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

/*** BODY STRUCTURE ***/

body, html {background-color:#FFFFFF;height:100%; width:100%; }
.wrapper {height: 100%; width:100%; }

/*** CHARACTER STYLING ***/

body { font-size:14px; color:#626262; text-align:left; line-height:1.5;}
h1 { color:#535353; text-transform:uppercase; text-align:left;}
h2 { color:#393939; text-align:left;}
h3 { color:#363636; text-align:left;}
h4 { color:#535353; text-transform:uppercase; text-align:left;}
h5 { color:#535353; text-transform:uppercase; text-align:left;}


.btn_down {background:url(../images/common/arrow_down.png); background-repeat:no-repeat; background-position:center bottom;}

.btn_right {background:url(../images/common/arrow_right.png); background-repeat:no-repeat; background-position:right center; width:69px; height:22px; text-align:left; font-size:20px; line-height:22px;}
.btn_right h4 {font-size:20px; line-height:22px; margin:60px 0 0;}
.btn_right h4:hover {color:#00aad2;}

.btn_left {background:url(../images/common/arrow_left.png); background-repeat:no-repeat; background-position:left center; width:61px; height:22px; text-align:right; font-size:20px; line-height:22px;}
.btn_left h4 {font-size:20px; line-height:22px; margin:60px 0 0; text-align:right;}
.btn_left h4:hover {color:#00aad2;}

.btn_close {background:url(../images/common/btn_close.png) no-repeat center center; width:32px; height:47px;}
.btn_close h4 {font-size:20px; line-height:16px; margin:60px 0 0; text-align:right;}
.btn_close h4:hover {color:#00aad2;}


.btn_more {background:url(../images/common/btn_more.png) no-repeat; height:24px; width:24px;}
.btn_more:hover {}
.white {background:url(../images/common/btn_more_white.png); background-repeat:no-repeat; height:24px; width:24px;}
.white:hover {background-position:0 -24px;}

.btn_open {background:url(../images/common/btn_open.png); background-repeat:no-repeat; height:20px; width:21px;}
.btn_open:hover {background-position:0 -22px;}

.btn_next {background:url(../images/common/arrow_down.png); background-repeat:no-repeat; height:18px; width:30px;}
.btn_next:hover {}
.btn_next_white {background:url(../images/common/btn_next_white.png) no-repeat center top; height:18px; width:30px;}
.btn_next_white:hover {}

.highlight {color:#00aad2;}

/*** NAV TOP ***/

#logowrapper {position:fixed; width:121px; margin-left:-60px; left:50%; z-index:1001;}
#logowrapper li {margin:auto;}
#logowrapper li:hover ul.social {display:block;}
#logo {background:url(../images/logo/logo.png); background-repeat:no-repeat; height:64px; width:128px; display:block;}

#logowrapper ul.social {margin: 10px auto; width:21px; height:30px; display:none;}
#logowrapper ul.social li {background-repeat:no-repeat; height:20px; width:21px; float:left; margin:0 auto;}

#logowrapper ul.social li.facebook {background:url(../images/nav/btn_fb.png); background-repeat:no-repeat;}
#logowrapper ul.social li.facebook:hover {background-position:0 -22px;}
#logowrapper ul.social li.twitter {background-image:url(../images/nav/btn_tw.png); background-repeat:no-repeat;}
#logowrapper ul.social li.twitter:hover {background-position:0 -22px;}

#topnav {background:url(../images/bg/bg_nav_top.png); background-repeat:repeat-x; background-color:transparent; height:173px; width:100%; border-top:2px solid #eb7010; z-index:1000; position:fixed; top:0; overflow:hidden; }
#topnav a.highlight {color:#00aad2;}
#topnav a.highlight:hover {color:#0094b7;}
#topnav #login a {background:url(../images/nav/btn_login.png); background-repeat:no-repeat; height:25px; width:68px; display:block; margin:-3px auto; padding:1px; color:#FFFFFF; font-weight:400; display:none;}
#topnav #login a:hover {background-position:0 -28px;}
#topnav .text {margin:3px 0; width:63px; text-align:center;}

#topnav ul li.active {color:#4c4c4c;}
#topnav ul li {position: relative; float:left; margin:15px 20px; text-align:left; color:#696969; font-size:16px; font-weight:bold;}
#topnav ul li a {text-decoration:none;color:#404040;}
#topnav ul li a:hover{color:#fa6d28;}

#topnav .left {float:left;}
#topnav .right {float:right;}
#topnav .row1 {float:right}

#topnav .top_left {position:absolute; left:0; margin:10px;}
#topnav .zen {background:url(../images/nav/zen.png); background-repeat:no-repeat; height:31px; width:25px; position:absolute; margin:10px; left:0;}
#topnav .zen:hover {background-position: 0 -33px;}
#topnav .fb_plugin {margin-top:-1px}

#topnav .icon_nav_more {background:url(../images/nav/nav_down.png); width:12px; height:12px; background-repeat:no-repeat;}
#topnav .icon_nav_more:hover {background-position:0 -14px;}

#topnav .support_text {cursor:pointer;}
#topnav .support_text .icon_nav_more {float:right; margin-top:3px; margin-left:4px;}
#topnav .support_text:hover {color:#00aad2;}
#topnav .support_text:hover .icon_nav_more {background-position:0 -14px;}

#topnav .support ul.support_nav {padding-top:25px; padding-left:-5px; width:70px; height:160px; position:absolute; display:none;}
#topnav .support ul.support_nav li {height:20px; width:68px; color:#696969; padding:8px 15px 3px; background:url(../images/bg/bg_nav_top.png); background-repeat:repeat-x; background-color:transparent; -moz-border-radius: 3px; border-radius: 3px; margin:0 0 10px; line-height:15px;}
#topnav .support ul.support_nav .active {background:#7e7e7e; color:#FFFFFF;}

#topnav .support ul.support_nav a li:hover {background:#00aad2; color:#FFFFFF;}

#topnav .support {width:auto;}
#topnav .support li {margin:auto; }
#topnav .support li:hover ul.support_nav {display:block;}

#sidenav .text {font-family: "proxima-nova-condensed",sans-serif; color:#535353; font-weight:600; text-transform:uppercase; text-align:right; margin-right:20px; padding:3px 6px 0; float:right; background:#FFFFFF; -moz-border-radius: 3px; border-radius: 3px; line-height:14px; font-size:12px; margin-top:1px;}

/*** NAV BOTTOM ***/

#bottomnav { height:45px; width:100%; bottom:0; position:fixed; z-index:9000;}
#bottomnavwrapper { position:relative; background-repeat:repeat; width:100%; top:45px; }
#bottomnavwrapper .nav_list{ background:url(../images/bg/bg_nav_bottom.jpg); overflow:hidden; }
#wtf-herrleder { width: 960px; margin: 0 auto; position: relative; z-index : 9999; }
#wtf-herrleder a.iconInfo {
	background:url(../images/footer/iconInfo.png) no-repeat;
	width: 47px; height: 68px;
	position: absolute;
	right: 24px; top: -20px;
	cursor: pointer;
	text-indent: -9999px;
	outline: none;
	z-index: 9002;
}
#bottomnav ul { height:45px; width:961px; margin:auto; overflow:hidden; }

#bottomnav ul li  {color:#838383; width:132px; float:left; border-left:solid 1px #313131; float:left; font-family: "proxima-nova-condensed", sans-serif; font-size:14px; line-height:17px; font-weight:400; text-transform:uppercase; text-align:center; margin:10px auto 0;}
#bottomnav ul li.inactive { color:#444; text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.3);} 
#bottomnav ul li.active { color:#FFFFFF; text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.8);} 
#bottomnav ul li a {text-decoration:none; color:#a8a8a8;}
#bottomnav ul li a:hover {color:#fa6d28;} 
#bottomnav ul li a:hover .indicator {background-position:0 -23px;} 

#bottomnav ul li .indicator {background-repeat:no-repeat; height:21px; width:22px; display:block; margin:-8px auto 0;}
#bottomnav ul li .indicator.active {background-position:0 -23px;} 
#bottomnav ul li .indicator.inactive {background-position:0 -46px;} 
#bottomnav ul li .default {background:url(../images/nav/icon.png); }
#bottomnav ul li .blue_ind {background:url(../images/nav/icon_blue.png);}

#bottomnav .highlight {color:#00aad2;}
#bottomnav .highlight:hover{ color:#38d9ff; text-shadow:0px 0px 15px rgba(056, 217, 255, 0.8);}

/*** NAV SIDE ***/

#sidenav {width:auto; height:auto; position:fixed; z-index:950; right:10px; margin-top: -76px; top:50%;}
#sidenav .indicator {background:url(../images/nav/side_nav.png); background-repeat:no-repeat; width:21px; height:21px; position:absolute; right:0; }
#sidenav .indicator.active {background-position:0 -21px;}
#sidenav .indicator:hover {background-position:0 -21px;}
#sidenav .wrapper_sidenav {width:auto; height:16px; display:block; margin-top:13px;}
#sidenav .text {font-family: "proxima-nova-condensed",sans-serif; color:#535353; font-weight:600; text-transform:uppercase; text-align:right; margin-right:20px; padding:2px 6px 0; float:right; background:#FFFFFF; -moz-border-radius: 3px; border-radius: 3px; line-height:14px; font-size:12px; margin-top:1px;}

/*** FOOTER ***/

#footer {background:url(../images/bg/bg_footer.jpg); background-repeat:repeat; background-color:#000000; height:250px; width:100%; font-family: "proxima-nova-condensed", sans-serif; color:#aeaeae; font-weight:400; text-transform:uppercase; text-align:left; font-size:15px; text-decoration:none; line-height:23px; position:relative; z-index:9000;}
#footer .content {margin:40px 0 0 0;}
#footer ul li {font-family: "proxima-nova-condensed",sans-serif; color:#FFFFFF; font-weight:400; text-transform:uppercase; text-align:left; font-size:15px; text-decoration:none; line-height:23px;}
#footer ul li.active {color:#838383;}
#footer ul li.inactive {color:#444;}
#footer ul li a {color:#FFFFFF; text-decoration:none;}
#footer ul li a:hover {color:#838383;}

#footer .highlight {color:#00aad2;}
#footer .gizmodo {background:url(../images/footer/gizmodo.png); background-repeat:no-repeat; height:15px; width:98px; display:block; margin:10px 0;}
#footer .cnn {background:url(../images/footer/cnn.png); background-repeat:no-repeat; height:18px; width:39px; background-position:center; display:block;margin:8px 0;}
#footer .forbes {background:url(../images/footer/forbes.png); background-repeat:no-repeat; height:17px; width:54px; background-position:center; display:block;margin:10px 0;}
#footer .wired {background:url(../images/footer/wired.png); background-repeat:no-repeat; height:16px; width:80px; background-position:center; display:block;margin:10px 0;}


#footer .social {float:left; margin:2px 10px auto 0;}
#footer .facebook {background:url(../images/footer/fb.png); background-repeat:no-repeat; height:17px; width:17px;}
#footer .facebook:hover {background-position:0 -19px;}
#footer .twitter {background:url(../images/footer/tw.png); background-repeat:no-repeat; height:16px; width:22px;}
#footer .twitter:hover {background-position:0 -18px;}
#footer .youtube {background:url(../images/footer/yt.png); background-repeat:no-repeat; height:16px; width:17px;}
#footer .youtube:hover {background-position:0 -18px;}

#footer .footer_bg{
	background:url(../images/footer/footer_bg.jpg) no-repeat left top;
	min-height:401px;
}
.container{
	width:960px;
	margin:0 auto;
}
.footer_box1{
	float:left;
	width:345px;
	font-size:12px;
	color:#fffefe;
	margin-top:34px;
}
.footer_box2{
	float:right;
	width:400px;
	margin-top:34px;
}
.footer_box2 .title{
	font-size:15px;
	color:#fec853;
	margin-bottom:10px;
}
.footer_box2 .text{
	font-size:12px;
	color:#ffffff;
	padding-left:18px;
}
.footer_box2 .text span{ color:#b6b5b5;}


/*** AWARDS ***/
#awwwards{position:absolute; top:20px; right:0px; z-index:10000; } 
#awwwards a{ width:69px; height:105px; text-indent:-8000px; display:block; background:url(../images/awwwards_siteoftheday_b_right.png) no-repeat; overflow:hidden; }
		
@media only screen and (min-width: 35em) {
  

}

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height: 0; }
.ir br { display: none; }
.hidden { display: none !important; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

@media print {
  * { background: transparent !important; color: black !important; box-shadow:none !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } 
  a, a:visited { text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } 
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; } 
  tr, img { page-break-inside: avoid; }
  img { max-width: 100% !important; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3 { page-break-after: avoid; }
}