@charset "UTF-8";

/*---------------------------------------------------------------  

DESCRIPTION: Design created for Two West Wind and Solar inc. 
AUTHOR: Jared Tapscott
AUTHOR URL: http://www.utopiadesign.ca/

	Copyright (c) Utopia Design.

---------------------------------------------------------------*/


* {padding: 0px; margin: 0px;}


/*GLOBAL SETTINGS*/

body {background: #032e46; color: #00182d; font-size: 62.5%; line-height:1.3em; font-family: Helvetica, Arial, sans-serif;}

h1 {font-size: 1.6em; color: #9C0; text-transform: uppercase; line-height:1.8em; font-weight: normal; letter-spacing: 1px;}
h2 {font-size: 1.4em; color: #f9901e; padding: 5px 0px; text-transform: uppercase; font-weight: normal; line-height: 1.2em;}
h3 {font-size: 1em; padding: 5px; text-transform: uppercase; }
h4 {font-size: 1.1em; color: #9C0; font-weight: normal; letter-spacing: 1px;}

a:link {color: #f78f1e; text-decoration: none; border-bottom: 1px dotted #f78f1e;}
a:visited {color: #f78f1e;}
a:hover {color: #00182d;}
a:active {}

ul {}
li {}

img {margin: 5px; border:none;}

blockquote {line-height: 1.3em; font-style:italic; padding: 10px 15px; text-align:justify;}
blockquote + p {margin: 0px 15px; font-weight: bold; }

/*----------GLOBAL CLASSES*/

.wrap {width: 980px; margin: 0px auto; font-size: 1.2em; background:url(../images/banner_earth.jpg) top center no-repeat #032e46;}
.clr {clear: both;}
.hide {position: relative; left: -99999px;}
.left {float: left;}
.clr_border {margin: 10px 0px; border-top:1px solid #ddd;}
a.plain {margin: 0px; padding: 0px; border: none; text-decoration: none;}

.bold_green {color: #c1d82e;}
.bold_white {color: #FFF;}
.bold_orange {color: #f9901e;}
.bold { font-weight:bold;}
.caption {color: #00182d; font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.2em;  text-align: center;}

/*----------LAYOUT DIVS*/


/*--------------------HEADER*/

#header {background: url(../images/header.gif) top center no-repeat #00182d; width: 100%; height: 110px; padding: 0px 0px 20px 0px; }
#header .wrap {background: none;}
#header #branding {float:left; width: 750px; height: 120px; }
#header .top_nav {float: right; width: 200px;}
#header .top_nav li {float: left; margin-left: 2px; list-style: none;}
#header .top_nav a {font-weight: bold; color: #f9901e; text-decoration:none; border: none; background: url(../images/blue_trans.png); border: 1px solid #000; padding: 10px 10px; display: block;}
#header .top_nav a:hover {font-weight: bold;; color: #00182d; text-decoration:none; background: #f9901e}

/*--------------------LOGIN BAR*/

#login { background-color: #c1d82e; height: 40px; }
#login #login-form { float:right; margin: 0px; padding: 5px 0px; }
#login #login-form input { border: 1px solid #990; background-color: #D5E79D; color: #00182d; padding: 5px; }
#login #login-form button { border: 2px outset #069; background-color: #032e46; color: #D5E79D; padding: 3px; }

/*--------------------MAIN NAVIGATION*/

#main_nav {width: 100%;}
#main_nav #nav {float: right; list-style: none;}
#main_nav #nav li {float: left; padding: 0px 2px; }
#main_nav #nav li a {color: #00182d; text-align: center; display: block; width: 142px; height: 13px; padding: 7px 0px; text-decoration:none; border:none; background:url(../images/nav_tab.gif) top no-repeat;}
#main_nav #nav li a:hover {}

/*--------------------2nd tier*/

#main_nav #nav li ul {position: absolute;left: -999em; list-style:none;}
#main_nav #nav li:hover ul, #nav li.sfhover ul {left: auto; }
#main_nav #nav li ul li {float:none; clear: both; margin: 0px; }
#main_nav #nav li ul li a {background: url(../images/blue_trans.png); color: #f9901e;}
#main_nav #nav li ul li a:hover {font-weight:bold; color: #9C0;}

/*--------------------3rd tier*/

#main_nav #nav li ul ul {margin: -27px 0 0 140px; border-left: 1px dotted #666; }
#main_nav #nav, #main_nav #nav ul {padding: 0;margin: 0;list-style: none; line-height: 1; }
#main_nav #nav li:hover ul ul, #main_nav #nav li.sfhover ul ul {left: -999em;}
#main_nav #nav li:hover ul, #main_nav #nav li li:hover ul, #main_nav #nav li.sfhover ul, #main_nav #nav li li.sfhover ul {left: auto;  }

/*--------------------MAIN CONTENT*/

#tier1 {height: 200px; }

#tier2 {height: 90px ; background:url(../images/blue_trans.png);}
#tier2 .left {float: left; width: 234px; height: auto; margin: 10px 5px; border-right: 1px solid #999; color: #FFF;}
#tier2 .left_end {float: left; width: 234px; margin: 10px 5px; color: #FFF;}
#tier2 h2 {font-size: 1.2em; text-align: right; color: #FFF; height: 45px; padding: 10px 10px 4px 40px; background:url(../images/solar_bullet.png) top left no-repeat; text-transform: uppercase;}
#tier2 p {padding: 0px 10px; }
#tier2 a {font-size: .8em; float: right; padding-right: 10px; text-decoration:none; border:none;}
#tier2 a:hover {color: #c1d82e;}

#tier3 {background: #FFF; width: 96%; padding: 2%;}
#tier3 p {line-height: 1.6em;}
#tier3 ul {margin: 0px 40px;}
#tier3 li {line-height: 2em; font-weight:bold;}
#tier3 #main_col {float: left; width:67%; border-right: 1px solid #9C0; padding-right: 2%; margin-right: 1%;}
#tier3 #main_col p {line-height: 22px;}
#tier3 #right_col {float: left; width: 28%; padding: 0px 0px 0px 1%;}
#tier3 #right_col ul {margin: 5px; padding: 0px; list-style:none; }
#tier3 #right_col li {margin: 2px; padding: 4px; line-height: 1.3em; background: #B9DAF2; border: 1px solid #036; }
#tier3 .left {width: 48%; margin-right: 1%;}



/*--------------------FOOTER*/

#footer .wrap {background: url(../images/footer_bkgd.gif) repeat-x top left; height: 113px;}
#footer .footer_nav {float: left; padding: 20px 15px 0px 15px;}
#footer .footer_nav dt {color: #f78f1e; text-transform: uppercase;}
#footer .footer_nav dd {padding: 1px 0px;}
#footer .footer_nav dd a {color: #FFFFFF; text-decoration: none; border: none; }
#footer .footer_nav dd a:hover {color: #00182d;  }

#footer #copyright {float: right; margin: 20px 20px;}
#footer #utopia {float: right; margin-right: 20px;}
#footer #utopia a {color: #FFFFFF; text-decoration:none; border:none; font-style:italic; font-size: .9em;}
#footer #utopia a:hover {color: #f78f1e; }

/*--------------------FORMS*/

form { margin: 20px auto;}
form .label {float: left; width: 50px; margin: 2px 0px; }
form .input {float: left; width: 165px; margin: 2px 0px; border: 1px solid #ccc; background: #D5E79D; }
form textarea {float: left; width: 300px; margin: 2px 0px; border: 1px solid #ccc; background: #D5E79D; }
form .button {border: 1px solid #ccc; background: #036; color: #FFF; width: 85px; margin-left: 50px; cursor:pointer; }
form .button:hover {border: 1px solid #ccc; background: #D2E0E6; color: #036; width: 85px; margin-left: 50px;}

#thankyou {height:300px; padding:25px; text-align:center;}




/*SPECIAL LAYOUT RULES SORTED BY PAGE*/


/*----------HOMEPAGE*/

/*.homepage #maincontent .wrap {background:url(../images/banner_earth.jpg) bottom center no-repeat #032e46;}
.homepage #maincontent .wrap #tier1 {height: 165px; padding: 90px 0px 0px 50px;} */

.homepage {background: url(../images/home_bkgd.jpg) top center no-repeat #032e46; margin:0px; padding:0px;}
.homepage .wrap {background:none;}
.homepage #maincontent #tier1 {height: 194px; padding: 100px 0px 0px 50px;}
.homepage #maincontent #tier2 {height: 198px;}
.homepage #maincontent .home-box { height: 175px;}

/*----------INVESTOR PAGE*/

#tier3 .left blockquote {background: url(../images/profits.jpg) no-repeat top center; width: 100%; padding: 220px 0px 0px 0px;}
#tier3 .left blockquote + p {padding: 0px; margin:0px;}

/*----------MEDIA PAGE*/

#tier3 .date {font-size: 1.2em; font-weight:bold; color: #F90; margin: 10px 0px;}
#tier3 .mrelease {margin: 15px 0px 15px 10px; }
#tier3 .mrelease a {font-size: 1em; font-weight:bold; color: #00182d; border: none; text-transform: uppercase; padding: 10px 0px; width: 100%; display: block; text-decoration:none;}
#tier3 .mrelease a:hover {font-size: 1em; font-weight:bold; color: #00182d; border: none; text-transform: uppercase; background: #D5E79D;}


/*----------MISSION PAGE*/

#tier3 blockquote {background: url(../images/profits.jpg) no-repeat top center; width: 255px; padding: 220px 0px 0px 0px; font-family:Georgia, "Times New Roman", Times, serif;}
#tier3 blockquote + p {padding: 0px; margin:0px; font-family:Georgia, "Times New Roman", Times, serif;}

/*----------TEAM PAGE*/

.team_tier { overflow: hidden; }
#tier3 .team_tier .team_left {float:left; width: 165px; height: 300px; margin: 10px; }
#tier3 .team_tier .team_left dt {font-size: 1.4em; color: #00182d; line-height:1.8em; font-weight: bold; letter-spacing: 1px;}
#tier3 .team_tier .team_left .title {font-size: .9em; color: #69C; line-height:1.4em; font-weight: normal; letter-spacing: 1px; height: 50px;}
#tier3 .team_tier .team_left .bio_pic{}
#tier3 .team_tier .team_left a {font-size: .9em; color: #69C; text-transform:uppercase; margin-bottom: 10px; text-align:center; display:block; border:none;}

#tier3 .bio_tier {}
#tier3 .bio_tier ul {list-style: none;}
#tier3 .bio_tier p {font-weight:normal;}
#tier3 .bio_tier .bio_email {margin-top: 15px; font-style: italic;}
#tier3 .bio_tier .bio {background: #D5E79D; border: 1px solid #00182d; padding: 10px; margin: 5px;}



/*----------CONTACT PAGE*/

#tier3 address {font-weight: normal; line-height:1.4em; margin: 5px 10px;}
#tier3 #left_border {border-left: 1px solid #c1d82e; padding-left: 10px;}

/*----------PRODUCT PAGES*/

#tier3 .left h1.product_header {letter-spacing: 0px; font-size: 1.3em; color: #00182d; font-weight:bold; }
#tier3 .left h2 {font-size: 1em; margin: 0px; padding: 0px; font-weight:bold;}
#tier3 .left h3 {padding: 10px; line-height:1.6em;}
#tier3 .left hr {margin: 10px 0px; padding: 0px;}
#tier3 .left .phone {width: 200px; margin: auto; font-size: 1.2em;}

#tier3 .left form { margin: 20px auto;}
#tier3 .left #product_form {width: 250px;}
#tier3 .left #product_form .label {float: left; width: 50px; margin: 2px 0px; }
#tier3 .left #product_form .input {float: left; width: 185px; margin: 2px 0px; border: 1px solid #ccc; background: #D5E79D; }
#tier3 .left #product_form textarea {float: left; width: 185px;  margin: 2px 0px; border: 1px solid #ccc; background: #D5E79D; }
#tier3 .left #product_form .button {border: 1px solid #ccc; background: #036; color: #FFF; width: 85px; margin-left: 50px;}
#tier3 .left #product_form .button:hover {border: 1px solid #ccc; background: #D2E0E6; color: #036; width: 85px; margin-left: 50px;}

#tier3 .product_table th, #tier3 .product_table td  {border: 1px solid #999; line-height: 1.6em; background: #D5E79D;}
#tier3 h3.toggler {cursor: pointer;border: 1px solid #f5f5f5; border-right-color: #ddd;border-bottom-color: #ddd; font-size: 1em;background: #D2E0E6; color: #F90;  margin: 0 0 4px 0;padding: 3px 5px 1px;}
#tier3 h3.toggler:hover {background: #EDEDFF; color: #F90;}
#tier3 .element p, div.element h4 {margin:0px; padding:4px; background: #D5E79D;}


/*---------PRODUCT PAGES NAVIGATION (#NAV2)*/

#tier3 #right_col #nav2 li {background: none; border: none;}
#tier3 #right_col #nav2 a {display: block; color:#00182d;  background:#c1d82e ; border: none; padding: 5px; text-decoration:none;}
#tier3 #right_col #nav2 a:hover {display: block; background: #D5E79D ; border: none; }

/*----------DRIVE FOR POWER PAGE*/

.driveforpower { background: none; line-height: 1.3em; font-style:italic; padding: 10px 15px; text-align:justify;}



/*----------CLIENT CENTRE PAGES*/

#clientcenter { background-color: #c1d82e;  }
#clientcenter ul { list-style:none; width: 100%; }
#clientcenter ul li { float: left; }
#clientcenter ul li a { display:block; margin: 0px; padding: 10px 20px; background-color: #c1d82e; color: #00182d; text-decoration:none; }
#clientcenter ul li a:hover { display: block; background: #D5E79D ; border: none; }


#clientcenter ul li ul {position: absolute;left: -999em; list-style:none;}
#clientcenter ul li:hover ul, #nav li.sfhover ul {left: auto; }
#clientcenter ul li ul li {float:none; clear: both; margin: 0px; }
#clientcenter ul li ul li a {background: url(../images/blue_trans.png); color: #f9901e; width: 100px; }
#clientcenter ul li ul li a:hover {font-weight:bold; color: #00182d;}

#clientcenter ul #logout { float: right; margin: 0px; padding: 0px; }
#clientcenter ul li #form-logout {  margin: 0px; padding: 3px; }
#clientcenter ul  #logout button { border: 2px outset #D5E79D; background-color: #00182d; color: #c1d82e; padding: 3px; }

/*CLIENT CENTRE ADMIN PAGEs*/
.clientcenter-box { border: 1px solid #ddd; padding: 10px; margin: 10px; float: left; background: #eee; }
.video-box { border: 1px solid #ddd; padding: 10px; margin: 10px; background: #eee; width: 96%; }

h3.videoh3 { top:-22px; position: relative; background-color: #ccc; width: 100px; text-align:center; border: 1px solid #999; }

form.clientcenter-box { width: 36%; }
form.clientcenter-box label { float: left; width: 55px; margin: 5px 0px; }
form.clientcenter-box input { float: left;  width: 280px; background: #D5E79D; border: 1px solid #c1d82e; height: 20px; margin: 5px 0px; }
form.clientcenter-box .clr { clear:both; }
form.clientcenter-box .button { width: auto; padding: 0px 5px; color: #00182d; font-weight:bold; float: right; }
form.clientcenter-box a.button { background: #D5E79D; border: 1px solid #c1d82e; height: 15px; margin: 5px 20px; padding: 5px 10px 0px 10px;}
form.clientcenter-box a.button:hover { border: 1px solid #ccc; background: #D2E0E6; color: #036; }

.video_right_col { width: 55%; }
table.video-table td { border: 1px solid #fff; padding: 0px 5px; }
table.video-table .title-row { background-color: #00182d; border: 1px solid #c1d82e; text-align:center; font-weight:bold; color: #c1d82e; }
table.video-table .record-hover { background-color: #D5E79D; color: #00182d; }
table.video-table .record-hover:hover { background-color: #D2E0E6;  }
table.video-table .record-hover a { color: #00182d; font-weight:bold; border: none; text-decoration:underline; }
table.video-table .record-hover a:hover { color: #f78f1e; }

/*CLIENT CENTRE VIDEO PAGE*/

.video-links { list-style:none;}
.video-links li { float: left; margin: 5px; }
.video-links li a { display:block; width: 70px; height: 70px; background: #D5E79D; border: 1px solid #c1d82e; color:#00182d; padding: 20px; text-align:center;   }
.video-links li a:hover { background: #f9901e; border: 1px solid #C60; }

.video-user-links { list-style:none; font-size: 9px; }
.video-user-links li { float: left; margin: 5px; list-style:none; }
.video-user-links li a { display:block; width: 60px; height: 60px; background: #D5E79D; border: 1px solid #c1d82e; color:#00182d; padding: 5px; text-align:center;   }
.video-user-links li a:hover { background: #f9901e; border: 1px solid #C60; }

.uservideos { min-height: 254px; overflow: auto; }