@charset "utf-8";
/* CSS Document */

/*----------------------------------------GENERAL----------------------------------------*/
body { font-family: 'Roboto', sans-serif;}
h1, h2, h3, h4, h5{font-family: 'Roboto', sans-serif; font-weight:bold} 
p {font-size:14px; line-height:18px;margin-bottom:9px;}
p a {color: #000; text-decoration:none; border-bottom: 1px solid #bed600;}
p a:hover { color:#bed600;  border-bottom: 1px solid #000;}
.clear {clear: both}
em { font-style:italic}
strong { font-weight:bold}
h4 {font-size: 18px; margin: 25px 0 5px 0}
h3 {font-size: 16px; margin: 0px 0 10px 20px; line-height:20px;}

#banner { display:none;
           text-align:center;
           line-height:50px;
           font-size:18px;
           font-family: 'Roboto', sans-serif;
        text-transform:uppercase;
        font-weight:normal;
           background:#bed600;}
           #banner a {color:#0B00F7;}

/*----------------------------------------HEADER----------------------------------------*/
#header {height: 95px;border-bottom: 8px solid #bed600;background: url(../images/header.png) repeat-x;} 
#nav{ width:650px; float:right; height:50px; padding:35px 0 0 0; text-align:right;}
#nav li {margin: 0 5px 0 0px; display:inline; line-height:20px;}
#nav li.current a { border-top:2px solid #bed600; background: transparent url(../images/nav-hover.png) no-repeat center center; position:relative;}
#nav li a {color:#fff; text-decoration:none;padding: 34px 15px 40px; height:70px;}
#nav li a:active, #nav li a:focus {outline:none}
#nav li a:hover {color:#bed600; cursor:pointer; border-top:2px solid #bed600; background: transparent url(../images/nav-hover.png) no-repeat center center; position:relative;}


/*----------------------------------------FOOTER----------------------------------------*/
#footer {border-top: 8px solid #bed600; background: url(../images/footer.png) #393939 repeat-x; padding-bottom:10px;}
#footer h1 {text-transform:uppercase; font-size:18px; color:#FFF; padding: 20px 0 0 0;}
#footer h2 {font-size:18px; color:#bed600; padding: 11px 0 0 0 } 
#footer p {color:#FFF; padding: 3px 0 0 0; margin-bottom:0px}
#footer #affiliates img {border: 2px solid #5d5d5d; margin: 3px 10px 0 0;}

/*----------------------------------------CONTENT----------------------------------------*/
#page { width:100%;}
.wrap { width:1000px; margin: 0 auto;}
.savings {background:url(../images/savings-bg.jpg) no-repeat; width:1000px; height:380px; padding-bottom:30px}
#fade {padding:46px 0 0 12px;}
.punchline {font-size:60px; font-family: 'Roboto', sans-serif;}
.metering {background:transparent url(../images/icons/chart_bar.png) no-repeat scroll 0 2px; text-indent:20px;}
.logbook {background:transparent url(../images/icons/bookmark_book_open.png) no-repeat scroll 0 2px; text-indent:20px;}
.features {background:transparent url(../images/icons/dashboard.png) no-repeat scroll 0 2px; text-indent:20px;}
.coins {background:transparent url(../images/icons/coins.png) no-repeat scroll 0 2px; text-indent:20px;}
.simple {background:transparent url(../images/icons/note.png) no-repeat scroll 0 2px; text-indent:20px;}
.info {background:transparent url(../images/info-bg.jpg) repeat-x scroll 0 0px;}
.more {background-image:url(../images/more.png); width:98px; height:27px;}
.more:hover {background-image:url(../images/more-hover.png);}


#services {border-left:1px solid #E4E4E4;float:right; margin:57px 0 0; padding:0 0 0 25px; width:355px;}
#services li {display:block; height:47px; padding:10px 0 5px 70px; width:270px; font-size:12px;}
#services li#first { background:#F6F6F6 url(../images/l2.png) no-repeat scroll 8px top; border-bottom:1px solid #E4E4E4; }
#services li#second { background:#F6F6F6 url(../images/cibse.gif) no-repeat scroll 8px top; border-bottom:1px solid #E4E4E4; border-top:1px solid #FFFFFF; }
#services li#third { background:#F6F6F6 url(../images/carbon-trust.png) no-repeat scroll 8px top; border-top:1px solid #FFFFFF; }
#services li#second-e { background:#F6F6F6 url(../images/carbon-foot.gif) no-repeat scroll 8px top; border-top:1px solid #FFFFFF; }
#services li#first:hover, #services li#second:hover, #services li#third:hover {background-color:#fff;}
#who {width: 590px;	float: left; padding: 0 20px 0 0;}
#who img {background-color: #eee; border: 1px solid #ccc; padding: 7px; margin: 0 25px 5px 5px;	float: left;}
#who h3 {width: 590px; padding: 0 0 10px 5px; margin: 0 0 20px 0; border-bottom:1px solid #E4E4E4; font-family: 'Roboto', sans-serif;}
#who p { margin: 0 0 15px 0;}


.getting-started {font-size:48px; margin: 0 20px 30px 20px; color:#616161; text-align:center}

/*----------------------------------------COLUMNS----------------------------------------*/
.grad {background:url(../images/col-bg.png) repeat-x; padding:1px 10px;}
.onecol {padding:10px;}
.twocol {width:480px; float:left; display:block; padding:10px;}
.threecol { width:312px; padding: 10px; float:left;}
.threecol li  {  padding:0 0 5px 20px; line-height:20px; font-size:12px;}
/*.threecol li  { background-image: url(../images/bullet.png); background-repeat:no-repeat;background-position:7px 3px; padding:0 0 5px 40px; line-height:20px; font-size:14px;}*/


#footer h2, #footer h1, h3, .punchline, h4, .getting-started {
        font-family: 'Roboto', sans-serif;
        text-transform:uppercase;
        font-weight:normal;
    }