@charset "UTF-8";
/* html,body{height: 100%;} */
body{background-color: #eee; font-family: "Helvetica", sans-serif; /* font-family: 'MisoLight'; */ padding-bottom: 0px;}
#container{width: 860px; /* position: relative; */ left: 50%; margin-left: -450px; top: 20px; /* min-height: 1000px; */ background-color: #fff; padding: 20px; padding-bottom: 20px;}

#menu{position: absolute; height: 120px; width: 290px; top: 20px; right: 20px;}
#menu ul li{width: 84px; height: 22px; font-size: 12px; color: #fff; float: left; margin: 0 10px 10px 0; padding: 0 0 0 6px; background-color: #ccc;}
#menu ul li:hover, #menu ul li.selected{background-color: #000;}
#menu ul li a{display: block; width: 100%; height: 100%; line-height: 22px; color: #fff; /* text-transform: uppercase; */}
#menu ul #co2, #menu ul #home{margin-right: 0;}


#title{font-size: 43px;width: 460px;line-height: 51px; color: #000; font-family:'Conv_Akkurat-Light', sans-serif; margin-top: -8px; position: absolute; z-index: 11;}
#title a{color: #000;}

#wrapper{margin-top: 170px; padding-bottom: 260px;}
.box{background-color: #000; z-index: 12;}
.text{width: 190px; padding: 15px; position: absolute; color: #FFF; font-size: 12px; line-height: 15px;}
.text h4{margin: 0; padding: 0; font-size: 13px;}
.gif{padding: 0; margin: 0; margin-left: 220px; width: 640px;}
.gif img{margin: 0; padding: 0; vertical-align: bottom;}

.box.picture .gif{margin-left: 0; width: 100%;}
.box.picture .gif img{width: 100%;}

#logo{position: absolute; width: 460px; height: 360px; background: url("../img/logo_r.png") no-repeat -90px 77px; top: 0; left: 0; z-index: 0;}

#foot{font-size: 11px; color: #999; margin-top: 10px; }
#foot a{color: #999;}
#foot a:hover{color: #000; text-decoration: underline;}

.box{margin-bottom: 15px;}

#menu ul li#share{background-color: transparent; padding: 0; width: 80px;}
#menu ul li#share:hover{background-color: transparent;}

#share span{width: 20px; height: 20px; line-height: 20px; font-size: 12px; background-color: #999; display: block; float: left; text-align: center; margin-right: 15px;}

#share span.last{margin-right: 0;}

#social{position: absolute; top: 0px; right: -6px;}
#social span{width: 12px; height: 12px; display: block; float: left; margin-right: 8px; cursor: pointer;}

#social_fb{background: url("../img/fb.png") no-repeat 0 0;}
#social_t{background: url("../img/t.png") no-repeat 0 0;}
#social_g{background: url("../img/g.png") no-repeat 0 0;}
#social_fb:hover{background: url("../img/fb_b.png") no-repeat 0 0;}
#social_t:hover{background: url("../img/t_b.png") no-repeat 0 0;}
#social_g:hover{background: url("../img/g_b.png") no-repeat 0 0;}

#footer{position: absolute; bottom: -40px; left: 0px; width: 860px; padding: 0 20px; font-size: 11px; color: #000; height: 40px; line-height: 40px; background-color: transparent;}
#footer span{float: left; line-height: 40px;}
#footer a#like_fb{float: right; color: #000; line-height: 40px;}
#footer a:hover{}

#intro{font-size: 43px; line-height: 53px; font-family:'Conv_Akkurat-Light', sans-serif; color: #999; margin-top: 310px; background-color: transparent;}
#intro .text{background-color: transparent; color: #999; font-size: 12px; }
#intro .gif{line-height: 53px;padding-right: 0px; width: auto; margin-left: 0; height: auto;  word-wrap: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}

#co2.box{background-color: #FFF;}
#co2 .gif{border: 1px solid #CCC; height: 640px;}
.gif .sq{ width: 126px; height: 126px; border: 1px solid #CCC; float: left; background-color: #FFF;}
.gif .sq img{text-align: center; vertical-align: middle; position: absolute;}
#co2 .text{background-color: #FFF; border: 2px solid #CCC; height: 608px; color: #000;}
#co2 .text img{width: 190px; height: 105px; background-color: #000;}
#co2 .text h4{margin-top: 20px; text-transform: capitalize; color: #000;}

#co2 img.out{z-index: 29;}
#co2 img.on{display: none; z-index: 30;}
#co2 h5{position: absolute; z-index: 31; display: none; text-align: center; bottom: 10px; width: 100%;}

#dots{position: absolute; bottom: 5px; left: 15px; width: 190px;}
#dots span{width: 20px; height: 20px; display: block; float: left; margin:0 10px 10px 0;}
#first{background-color: #8CC63F;}
#second{background-color: #39B54A;}
#third{background-color: #009245;}
#fourth{background-color: #006837;}

.c6h6{color: #8CC63F;}
.ch20{color: #39B54A;}
.c2hcl13{color: #009245;}
.so2{color: #006837;}

#plant, #plant_name{display: none;}

#logos{position: absolute; left: 0; top: -120px; background-color: #FFF; width: 860px; height: 40px; padding: 20px; border-top: 40px solid #eee;}
a.logos{width: 120px; height: 40px; display: block; float: left; opacity: .6;}
a.logos:hover{opacity: 1;}
#open_house{ background: url("../img/logos_oh.png") no-repeat 0 0; width: 50px; margin-right: 20px;}
#urban_experience{ background: url("../img/logos_ue_s.png") no-repeat 0 0; width: 39px;  margin-right: 10px;}
#on_off{ background: url("../img/logos_oo.png") no-repeat 0 0; width: 184px; margin-right: 10px;}
#come_se{ background: url("../img/logos_cs.png") no-repeat 0 0; width: 147px; margin-right: 0;}

#fastsail{ background: url("../img/logos_fs.jpg") no-repeat 0 0; width: 160px;margin-right: 10px;}
#fablab{ background: url("../img/logos_fl.png") no-repeat 0 0; width: 217px; margin-right: 10px;}

#dots h3{position: absolute; top: -24px; left: 0; font-size: 12px;}



#cc{position: relative; left: 87px; top: 4px; opacity: .4;}
#cc:hover{opacity: 1;}



#info{color: #000; position: relative; right: -350px;}