@charset "UTF-8";

body {
	margin: 0;
	background: #36C;
}
img {
	margin: 0;
  	padding: 0;
  	border: 0;
}


/********** MAIN SCENE POSITIONING ***********/
.main-scene-container {
	height: 540px;
	width: 100%;
	position: relative;
}

.cloud-1 {
	position: absolute;
	background: url(images/clouds/clouds-1.png) no-repeat -70px 0;
	width: 300px;
	height: 183px;
	left: 0p;
	top: 70px;
}
.cloud-2 {
	position: absolute;
	background: url(images/clouds/clouds-3.png) no-repeat -250px 0;
	width: 500px;
	height: 306px;
	left: 0;
	top: 200px;
}
.cloud-3 {
	position: absolute;
	background: url(images/clouds/clouds-3.png) no-repeat 200px 0;
	width: 500px;
	height:  306px;
	right: 0;
	top: 90px;
}
.cloud-4 {
	position: absolute;
	background: url(images/clouds/clouds-4.png) no-repeat 200px 0;
	width: 400px;
	height:  245px;
	right: 0;
	top: 300px;
}

.logo-holder {
	width: 768px;
	height: 110px;
	top: 5px;
  	left: 50%;
    margin-left: -384px;
	position: absolute;
	background: url(images/logo-headline.png) no-repeat 0;
	z-index: 1;
}
.logo-holder span {
	display: none;
}
.logo-only-holder {
	background: url(images/ce-logo.png) no-repeat 0;
	width: 442px;
	height: 140px;
	top: 50px;
  	left: 50%;
    margin-left: -221px;
	position: absolute;
}
.logo-only-holder span {
	display: none;
}
.rays-halo {
	width: 100%;
	height: 540px;
	top: 0px;
	left: 0px;
	position: absolute;
	background: url(images/solar-halo.png) no-repeat 0;
}
.rays {
	width: 768px;
	height: 269px;
	top: 0px;
	left: 0px;
	position: absolute;
	background: url(images/rays.png) no-repeat 0;
}
.rays2 {
	width: 768px;
	height: 269px;
	top: 5px;
	left: -40px;
	position: absolute;
	background: url(images/rays.png) no-repeat 0;
}
.solar-panels {
	width: 768px;
	height: 442px;
	top: 100px;
  	left: 50%;
    margin-left: -384px;
	position: absolute;
	background: url(images/hero-image-newpanels.png) no-repeat 0;
}
.solar-panels-hilite {
	width: 768px;
	height: 442px;
	top: 100px;
  	left: 50%;
    margin-left: -384px;
	position: absolute;
	background: url(images/panels-hilite.png) no-repeat 0;
}

/********** UNUSED STYLE ALSO ID# STYLE shouldn't be used! ***********/

#hero-image {
	background-image: url(images/hero-image.png);
	background-position: 0px 0px;
	display: block;
	height: 550px;
	width: 768px;
	
}

/********** content-container ***********/
.content-container {
	background-color: #FFF;
	display: block;
	margin-right: auto;
	margin-left: auto;
	border-bottom-style: dotted;
	border-bottom-color: #509feb;
	border-bottom-width: 2px;
}


/********** SECTION ROLLOVERS ***********/
#rollover-wrap {
	display: block;
	height: 260px;
	width: 768px;
	margin-right: auto;
	margin-left: auto;
}

#how a {
	background-image: url(images/section-rollovers/section-rollovers.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: block;
	float: left;
	height: 260px;
	width: 192px;
}
#how a:hover {
	background-image: url(images/section-rollovers/section-rollovers.jpg);
	background-repeat: no-repeat;
	background-position: 0px -260px;
	display: block;
	float: left;
	height: 260px;
	width: 192px;
}
#how span {
	display: none;
}
#why a {
	background-image: url(images/section-rollovers/section-rollovers.jpg);
	background-repeat: no-repeat;
	background-position: -192px 0px;
	display: block;
	float: left;
	height: 260px;
	width: 192px;
}
#why a:hover {
	background-image: url(images/section-rollovers/section-rollovers.jpg);
	background-repeat: no-repeat;
	background-position: -192px -260px;
	display: block;
	float: left;
	height: 260px;
	width: 192px;
}
#why span {
	display: none;
}
#solution a {
	background-image: url(images/section-rollovers/section-rollovers.jpg);
	background-repeat: no-repeat;
	background-position: -384px 0px;
	display: block;
	float: left;
	height: 260px;
	width: 192px;
}
#solution a:hover {
	background-image: url(images/section-rollovers/section-rollovers.jpg);
	background-repeat: no-repeat;
	background-position: -384px -260px;
	display: block;
	float: left;
	height: 260px;
	width: 192px;
}
#solution span {
	display: none;
}
#audit a {
	background-image: url(images/section-rollovers/section-rollovers.jpg);
	background-repeat: no-repeat;
	background-position: -576px 0px;
	display: block;
	float: left;
	height: 260px;
	width: 192px;
}
#audit a:hover {
	background-image: url(images/section-rollovers/section-rollovers.jpg);
	background-repeat: no-repeat;
	background-position: -576px -260px;
	display: block;
	float: left;
	height: 260px;
	width: 192px;
}
#audit span {
	display: none;
}
.wrapper-columns {
	width: 768px;
	height: 320px;
}
.wrapper-questions {
	height: 110px;
	width: 720px;
	margin: 15px 0 30px 0;
}
.bullets-float-right {
	width: 600px;
	height: 110px;
	float: right;
}
	

/********* ANCHORS *************/
#how-anchor {
	width: 768px;
	background-color: #FFF;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}
#why-anchor {
	background-color: #FFF;
	width: 768px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}
#solution-anchor {
	background-color: #FFF;
	width: 768px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}
#audit-anchor {
	background-color: #FFF;
	width: 768px;
	padding-left: 15px;
	padding-right: 15px;
	padding-bottom: 10px;
	margin-left: auto;
	margin-right: auto;
}

/********* TEXT STYLES *************/

.headline {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-weight: normal;
	color: #509feb;
	margin-bottom: 5px;
}
.sub-headline {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #509feb;
	margin-bottom: 5px;
	clear: both;<
}
.body-copy {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin-bottom: 5px;
}

.italics-intro {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	margin-bottom: 15px;
	font-style: italic;
	color: #666;
}
.center-text {
	text-align: center;
}
.text-left {
	text-align: left;
}
.separator-dotted-line {
	border-bottom: #509feb 1px dotted;
}
.confirmation-paragraph {
	width: 500px;
	height: 350px;
	position: absolute;
	top: 220px;
	left: 50%;
	margin-left: -250px;
	text-align: center;
	font-family: Baskerville, "Palatino Linotype", Palatino, "Century Schoolbook L", "Times New Roman", serif;
	font-size: 24px;
	font-style: italic;
	color: #FFF;
	font-weight: normal;
	line-height: 1.5em;
}
.confirmation-paragraph span {
	text-decoration: blink;
}

	

/******** links ************/
.text-link a:link { 
	color: #509feb;
	text-decoration: underline;
}
.text-link a:visited { 
	color: #509feb;
	text-decoration: underline;
}
.text-link a:hover {
	color: #390;
}


/********** BULLET STYLES ***********/
.bullets-multi-column {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	list-style-type: disc;
	float: left;
	margin-right: 10px;
	width: 240px;
}
.bullets-multi-column .sub-headline {
	text-indent: -20px;
}
.bullets-multi-column dd, li, dt {
	margin-bottom: 0.5em;
}
dl .last-line-leading {
	margin-bottom: 1.25em;
}
.bullets-body-copy {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	list-style-type: disc;
	margin-right: 10px;
}
.bullets-body-copy .sub-headline {
	text-indent: -20px;
}

/********** FORM STYLES ***********/
form {
	text-align: right;
	width: 590px;
	margin: 0 auto 10px 0;
	border: 1px solid #C4D3DE;
	border-radius: 15px;
	background: #D4F0FF;
	padding: 0 20px 20px 20px;
}
label {
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}
input {
	border: 1px solid #509feb;
	border-radius: 7px;
  	font: 13px/20px 'Droid Sans', Arial, 'Helvetica Neue', 'Lucida Grande', sans-serif;
	margin: 5px 0 5px 0;
	padding: 3px;
	width: 300px;
}
.input-narrow {
	border: 1px solid #509feb;
	border-radius: 7px;
  	font: 13px/20px 'Droid Sans', Arial, 'Helvetica Neue', 'Lucida Grande', sans-serif;
	margin: 5px 0 5px 0;
	padding: 3px;
	width: 150px;
}

#submit-btn {
	width: 308px;

	background: rgb(80,159,235); /* Old browsers */
	
	background: -moz-linear-gradient(top,  rgba(80,159,235,1) 0%, rgba(59,93,170,1) 100%); /* FF3.6+ */
	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(80,159,235,1)), color-stop(100%,rgba(59,93,170,1))); /* Chrome,Safari4+ */
	
	background: -webkit-linear-gradient(top,  rgba(80,159,235,1) 0%,rgba(59,93,170,1) 100%); /* Chrome10+,Safari5.1+ */
	
	background: -o-linear-gradient(top,  rgba(80,159,235,1) 0%,rgba(59,93,170,1) 100%); /* Opera 11.10+ */
	
	background: -ms-linear-gradient(top,  rgba(80,159,235,1) 0%,rgba(59,93,170,1) 100%); /* IE10+ */
	
	background: linear-gradient(to bottom,  rgba(80,159,235,1) 0%,rgba(59,93,170,1) 100%); /* W3C */
	
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#509feb', endColorstr='#3b5daa',GradientType=0 ); /* IE6-9 */
	border: 1px solid #509feb;
  	color: #fff;
  	font-weight: bold;
	text-align: center;
}
#submit-btn:hover {
	background: rgb(89,174,255); /* Old browsers */
	
	background: -moz-linear-gradient(top,  rgba(89,174,255,1) 0%, rgba(80,159,235,1) 44%, rgba(74,119,214,1) 100%); /* FF3.6+ */
	
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(89,174,255,1)), color-stop(44%,rgba(80,159,235,1)), color-stop(100%,rgba(74,119,214,1))); /* Chrome,Safari4+ */
	
	background: -webkit-linear-gradient(top,  rgba(89,174,255,1) 0%,rgba(80,159,235,1) 44%,rgba(74,119,214,1) 100%); /* Chrome10+,Safari5.1+ */
	
	background: -o-linear-gradient(top,  rgba(89,174,255,1) 0%,rgba(80,159,235,1) 44%,rgba(74,119,214,1) 100%); /* Opera 11.10+ */
	
	background: -ms-linear-gradient(top,  rgba(89,174,255,1) 0%,rgba(80,159,235,1) 44%,rgba(74,119,214,1) 100%); /* IE10+ */
	
	background: linear-gradient(to bottom,  rgba(89,174,255,1) 0%,rgba(80,159,235,1) 44%,rgba(74,119,214,1) 100%); /* W3C */
	
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59aeff', endColorstr='#4a77d6',GradientType=0 ); /* IE6-9 */
	
}
#submit-btn:active {
  background: #3b5daa;
  color: #FC3;
}
	
select {
	margin: 5px 0 5px 0;
}
textarea {
	border: 1px solid #509feb;
	border-radius: 7px;
  	font: 13px/20px 'Droid Sans', Arial, 'Helvetica Neue', 'Lucida Grande', sans-serif;
	padding: 3px;
	width: 300px;
	height: 250px;	
}
.form-headline {
	margin: 20px 10px 0 0;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #509feb;
}


/********* TABLE *********/
.table-style {
	width: 768px;
  	border: 1px solid #509feb;
	border-collapse: collapse;
	border-spacing: 0;
}
th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	padding: 5px;
	border-bottom: 1px solid #509feb;
	color: #FFF;
	background: #509feb;

}	
td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	border-bottom: 1px dotted #509feb;
	border-right: 1px dotted #509feb;
	padding: 5px;
}



/********* CLEAR FIX*********/

.content-container:before,
.content-container:after {
  content: "";
  display: table;
}
.content-container:after {
  clear: both;
}
.content-container {
  *zoom: 1;
}	

/********* IMAGE CONTAINERS *************/

.hero-image-sub {
	display: block;
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	overflow: hidden;
}
.photovoltaic-compare {
	background: url(images/battery-bckgrnd.jpg) no-repeat 0;
	display: block;
	width: 768px;
	height: 270px;
	margin-left: auto;
	margin-right: auto;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	overflow: hidden; 
}
.photovoltaic-compare p {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: #FFF;
	padding: 150px 20px 5px 20px; 
	width: 730px;
	background: none;
}
/*********** UNUSED FOR ANIMATING BATTERY JUICE
.battery-juice {
	background: #39F url(images/battery-juice.png) no-repeat -550px -13px;
	display: block;
	width: 768px;
	height: 270px;
	margin-left: auto;
	margin-right: auto;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	overflow: hidden; 
	position: absolute;

}
**********/
.questions-image-holder {
	background: url(images/questions.jpg)  no-repeat 0 10px;
	width: 120px;
	height: 120px;
	float: left;
}

/********* MANUFACTURER LOGO LINKS *************/
.manufacturers {
	position: relative;
	width: 768px;
	height: 200px;
}
.mnf-logo-holder {
	width: 200px;
	height:	75px;
	position: absolute;
	text-align: center;
	padding: 10px;
}
.mnf-logo-holder span {
	display: none;
}
.advanced-energy {
	top: 5px;
	left: 0px;
}
.burndy {
	top: 5px;
	left: 200px;
}
.centro-solar {
	top: -15px;
	left: 440px;
}
.cooper {
	top: -5px;
	left: 600px;
}
.enphase {
	top: 100px;
	left: 0px;
}
.fronius {
	top: 100px;
	left: 160px;
}
.sma {
	top: 100px;
	left: 460px
}
.schneider {
	top: 5px;
	left: 400px;
}
.solar-world {
	top: 70px;
	left: 600px;
}
.unirac {
	top: 100px;
	left: 320px;
}