@import url('normalize.css');

/* ----------------------------------------------------------
    Client Name CSS
    Version 1.0

	TABLE OF CONTENTS

	01 - BASE STYLES
	02 - IMAGE ROLLOVER
	03 - TESLA CONTENT AND CONTAINERS
	04 - ROW 1
	05 - ROW 2
	06 - ROW 3
	07 - ROW 4
	08 - Bottom Credit links and formats
	09 - Static Screens CSS (BTF1, BTF2, etc.)
	10 - Credit.html

	COLOR GUIDE (Main Site Colors and their Hex Codes)
	Main Blue: #0C6DB1
	Text Gray: #6D6D6D
	Background Gray: #ebebee
    
	FONTS USED
	Main Copy:
	Main Headers:
	Secondary Headers:
		
	font-family: 'Open Sans', sans-serif;
	font-family: 'Open Sans light', sans-serif;
---------------------------------------------------------- */


/* 01 = BASE STYLES
---------------------------------------------------------- */

body {
	margin: 0;
	background-color: darkgrey;
}

p {
	color: #000;
	font-family: 'Open Sans', sans-serif;
	font-size: 14px;
	font-weight: 300;
	margin: 0;
	padding: 0;
	text-align: center;
}

a, 
a:visited { 
	color: #0C6DB1;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    margin: 5px 0;
    padding: 0;
    text-align: center;
	text-decoration: none;
}

a:hover {
	color: #99cbd0;
	text-decoration: none;
}

div {
	margin: 0;
	padding: 0;
}

/*----------image roll over effect--------------*/

a.rollover {
	display: block;
	width: 200px;
	height: 200px;
	margin-top: -22px;
}

/*-----Tesla button images ---*/
.tesla-button {
	background-image: url('../images/button-on2.png');
	background-repeat: no-repeat;
	position: absolute;
	width: 200px;
	height: 200px;
	left: 21px;
}

/*----- 02 TESLA CONTENT AND CONTAINERS ---*/

#tesla-container {
	background-image: url('../images/tes-bg.jpg');
	background-attachment: absolute;
	width: 1158px;
	height: 1700px;
}


/*-----Tesla button image positions row 1---*/
#tesla-screen-img-1 {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 200px;
	left: 140px;
	height: 200px;
	width: 200px;
	text-align: center;
}

#tesla-screen-img-2 {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 200px;
	left: 457px;
	height: 200px;
	width: 200px;
	text-align: center;
}

#tesla-screen-img-3 {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 200px;
	left: 776px;
	height: 200px;
	width: 200px;
	text-align: center;
}

/*-----Tesla button image positions row 2 ---*/
		
#tesla-screen-img-4 {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 495px;
	left: 140px;
	height: 200px;
	width: 200px;
	text-align: center;
}

#tesla-screen-img-5 {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 495px;
	left: 457px;
	height: 200px;
	width: 200px;
	text-align: center;
}

#tesla-screen-img-6 {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 495px;
	left: 776px;
	height: 200px;
	width: 200px;
	text-align: center;
}

/*-----Tesla button image positions row 3 ---*/

#tesla-screen-img-7 {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 789px;
	left: 140px;
	height: 200px;
	width: 200px;
	text-align: center;
}

#tesla-screen-img-8 {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 789px;
	left: 457px;
	height: 200px;
	width: 200px;
	text-align: center;
}

#tesla-screen-img-9 {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 789px;
	left: 776px;
	height: 200px;
	width: 200px;
	text-align: center;
}

/*-----Tesla button image positions - row 4---*/ 

#tesla-screen-img-10 {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 1084px;
	left: 140px;
	height: 200px;
	width: 200px;
	text-align: center;
}

#tesla-screen-img-11 {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 1084px;
	left: 457px;
	height: 200px;
	width: 200px;
	text-align: center;
}

#tesla-screen-img-12 {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 1084px;
	left: 776px;
	height: 200px;
	width: 200px;
	text-align: center;
}


/*-----Tesla button CREDIT bottom of page ---*/

a.kinetic {
	background-image: url('../images/kinetic-link.png');
	display: block;
	width: 80px;
	height: 80px;
	margin-left: 61px;
}

a.credit-page:link {
	color: #6d6d6d;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    margin: 5px 0;
    padding: 0;
    text-align: center;
    display: block;
}

a.credit-page:hover {
	color: #0C6DB1;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    margin: 5px 0;
    padding: 0;
    text-align: center;
    display: block;
}

#tesla-screen-img-credit {
	margin: 0;
	padding: 0;
	position: absolute;
	top: 1430px;
	left: 490px;
	height: 100px;
	width: 200px;
	text-align: center;
}

/*--Tesla Images
This is CSS for single image tesla screens
Example: Future 1 and Future 2
---*/

.tesla-screen-img {
	height: 100%;
	width: 100%;
}

.tesla-container-btf {
	background: url('../images/future1.jpg') no-repeat;
	position: absolute;
	left: 0;
	top: 0;
	width: 1158px;
	height: 1370px;
}

.tesla-container-btf-2 {
	background: url('../images/btf2new.jpg') no-repeat;
	position: absolute;
	left: 0;
	top: 0;
	width: 1158px;
	height: 1370px;
}

.tesla-container-btf-2-b {
	background: url('../images/btf2alt.jpg') no-repeat;
	position: absolute;
	left: 0;
	top: 0;
	width: 1158px;
	height: 1370px;
}

/*fix for clickable div*/
#work-darnit {
    position: absolute;
    left: 0;
    top: 0;
    width: 1158px;
    height: 1370px;
    z-index: 1;
}

/*
For tapping through options
*/

.b2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 1158px;
    height: 1370px;
    z-index: 1;
}

/*-----Credits Page CSS
This is CSS that is for credit.html
-----*/


#credit-page-container {
	position: absolute;
	top: 300px;
	left: 250px;
	height: 800px;
	width: 590px;
	text-align: center;
}

.credit-page-headline {
	color: aliceblue;
	font: 25px 'Open Sans', 'Tahoma', sans-serif;
	font-weight: 300;
	margin-bottom: 0;
	padding: 0;
	text-align: center;
	text-transform: uppercase;
}

.credit-page-para {
	font: 14px 'Open Sans', 'Tahoma', sans-serif;
	font-weight: 300;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 590px;
}

.btn a {
	width: 150px;
	text-align: center;
	border-radius: 25px;
	border: 2px solid aliceblue;
	padding: 20px;
	width: 200px;
	height: 150px;
}

.btn a:hover {
	width: 150px;
	text-align: center;
	border-radius: 25px;
	border: 2px solid darkslategrey;
	padding: 20px;
	height: 150px;
}

.tesla-links {
	list-style-type: none;
	margin: 0;
}

.tesla-links li {
	display: inline-block;
	margin: 0;
}

.tesla-links a {
	display: block;
	color: aliceblue;
	background-color: #0C6DB1;
	margin: 5px 5px;
	padding: 15px;
	font: 20px "tahoma," sans-serif;
	border-radius: 33px;
	border: 1px solid aliceblue;
	width: 200px;
}
.tesla-mentions{
	list-style-type:none;
}
.tesla-links a:hover {
	display: block;
	background-color: #99cbd0;
	margin: 5px 5px;
	padding: 15px;
	font: 20px "tahoma," sans-serif;
	border-radius: 33px;
	border: 1px solid darkslategrey;
	width: 200px;
}

.return-btn {
	display: block;
	clear: both;
	margin-top: 33px;
	width: 633px;
}

.return-btn a {
	color: aliceblue;
	background-color: dimgray;
	text-align: center;
	border-radius: 25px;
	border: 1px solid aliceblue;
	padding: 20px;
	width: 200px;
	font-weight: 700;
}

.return-btn a:hover {
	background-color: #0C6DB1;
	text-align: center;
	border-radius: 25px;
	border: 1px solid aliceblue;
	padding: 20px;
	width: 200px;
}


/*---this will be an awesome page because Chrissi was here---*/