/*----------------------------------------------------------------------
Theme Name: Natural Selection 2
Theme URI: http://www.naturalselection2.com/
Description: Natural Selection 2 theme
Author: Adam Foster
Version: 1.1
Tags: Natural Selection 2	
-----------------------------------------------------------------------*/

/* 1] Reset
-----------------------------------------------------------------------*/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video,a { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-touch-callout:none; }
body { line-height:1; }
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display:block; }
audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
audio:not([controls]) { display: none; }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
del { text-decoration: line-through; cursor: help; }
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; }
table { border-collapse: collapse; border-spacing: 0; }
td { vertical-align: top; }
input, select { vertical-align:middle; }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle; display: block; }
a:hover, a:active { outline: 0; }

/* 2] General
-----------------------------------------------------------------------*/

html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { margin: 0; font-size: 14px; line-height: 1.35; background: #070606 url(_client/images/bg-body.jpg) top; }
body, button, input, select, textarea { font-family: tahoma, Arial; color: #7e857e; font-weight:normal; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
p { margin: 0; }
b, strong { font-weight: bold; }
dfn, cite, em, i { font-style: italic; }
small { font-size: 85%; }
a { color:#028cec; text-decoration: none; }
a:hover, a:active { text-decoration: underline; }
p a {}
.no-touch p a:hover { text-decoration: underline; }

.cufon-loading .cufon-a { visibility: hidden; }
cufon { margin-top: -3px; }

/* 3] Helper classes
-----------------------------------------------------------------------*/

.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; text-align: left!important; }
.ss, #footer-nav li { background: url(_client/images/sprite.png) no-repeat; }
.clearfix { zoom: 1; }
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.left { float: left!important; }
.right { float: right!important; }
.clear { clear: both!important; }
.button { background: url(_client/images/sprite-big.png) no-repeat 0 -915px; margin: 0 0 0 -10px!important; }
.button a { display: block; height: 25px; width: 300px; text-transform: uppercase; text-align: center; padding: 25px 0 25px 50px; color: #98988e; font-size: 18px; background: url(_client/images/sprite-big.png) no-repeat 85px -816px; }
.button a:hover { background-position: -235px -816px; }

/* 4] Global styles
-----------------------------------------------------------------------*/

#natural-selection { min-width: 993px; width: 100%; background: url(_client/images/bg-bottom.jpg) no-repeat bottom; }
#wrapper { background: url(_client/images/bg-top.jpg) no-repeat top; min-width: 993px; width: 100%; overflow: hidden; position: relative; }
#header { height: 575px; width: 855px; margin: 0 auto; position: relative; z-index: 2; }
#effects { position: absolute; top: 6px; left: 50%; z-index: 1; width: 1558px; margin-left: -954px; }
#logo { width: 495px; margin-top: 94px; }
#logo h1 { overflow: hidden; text-indent: -9999px; height: 34px; margin-bottom: 27px; }
#logo a { display: block; background: url(_client/images/sprite-big.png) no-repeat -12px -742px; height: 33px; width: 162px; text-indent: -9999px; overflow: hidden; margin-right: 29px; }
#logo a:hover { background-position: -12px -692px; }
#header .video-trigger { position: absolute; top: 315px; left: 250px; }
#header .video-trigger a { display: block; height: 129px; width: 129px; background: url(_client/images/sprite-big.png) no-repeat -171px -405px; text-indent: -9999px; overflow: hidden; }
#header .video-trigger a:hover { background-position: 0 -405px; }
#pre-order { margin-top: 50px; }	
#pre-order .pre-order-trigger { display: block; background: url(_client/images/sprite-big.png) no-repeat 0 -201px; text-indent: -9999px; overflow: hidden; height: 201px; width: 294px; margin: -3px -33px; position: relative; z-index: 1; }
#pre-order .pre-order-trigger:hover { background-position: -1px -1px; }
.social { list-style: none; position: relative; z-index: 2; margin: -38px 0 0 12px; }
.social li { float: left; background: url(_client/images/sprite-big.png) no-repeat -62px -543px; }
.social li:hover { background-position: -9px -543px; }
.social li a { display: block; height: 60px; width: 54px; text-indent: -9999px; overflow: hidden; background: url(_client/images/sprite-big.png) no-repeat; }
.social li a.twitter { background-position: -10px -623px; }
.social li a.facebook { background-position: -63px -623px; }
.social li a.yt { background-position: -110px -623px; }
.social li a.email { background-position: -161px -623px; }

#content { width: 970px; margin: 0 auto; position: relative; padding: 75px 0 65px; }
#content .mid { padding: 0 20px; }
.post { position: relative; z-index: 10; padding: 50px 45px; }
#content .mid .post:first-child { padding: 0 45px; z-index: 11; min-height: 270px; }	
.post .copy { width: 370px; }
.post .copy.right { width: 400px; }
.post p { margin-bottom: 16px; }
.post .cufon-a { text-transform: uppercase; font-size: 30px; color: #fff; margin-bottom: 10px; }
.image-viewer { position: absolute; top: -10px; right: 35px; height: 318px; width: 414px; background: url(_client/images/bg-image-player.png) no-repeat; background-color: rgba(0, 0, 0, .3); -webkit-box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, .3); box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, .3); }
.image-viewer .content { margin: 25px 22px; overflow: hidden; position: relative; }
.image-viewer .screens { width: 9999px; list-style: none; position: relative; left: 0;
                         -webkit-transition: left 400ms ease-in-out;
                         -moz-transition: left 400ms ease-in-out;
                         -ms-transition: left 400ms ease-in-out;
                         -o-transition: left 400ms ease-in-out;
                         transition: left 400ms ease-in-out; 
}
.image-viewer .screens li { float: left; width: 370px; height: 231px; }
.pips { position: absolute; bottom: 28px; left: 0; }
.pips ul { list-style: none; width: 412px; text-align: center; }
.pips li { display: inline; }
.pips li a { height: 21px; width: 21px; background-position: -26px -22px; display: inline-block; }
.pips li a.active, .pips li a:hover { background-position: -3px -22px; }
.video-player { position: absolute; top: -100px; right: -25px; height: 351px; width: 487px; background: url(_client/images/bg-video-player.png) no-repeat; background-color: rgba(0, 0, 0, .3); -webkit-box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, .3); box-shadow: 0px 0px 10px 10px rgba(0, 0, 0, .3); }
.video-player .content { padding: 35px 32px 1px; width: 390px; height: 238px; }
.video-player .play { position: absolute; height: 74px; width: 74px; background: url(_client/images/sprite-big.png) no-repeat -140px -542px; overflow: hidden; text-indent: -9999px; top: 122px; left: 192px; }
.video-player .play:hover { background-position: -220px -542px; }
.video-player .thumbnails { padding: 0 26px 0 32px; }
.video-player .thumbnails ul { list-style: none; }
.video-player .thumbnails li { float: left; }
.video-player .thumbnails li a {  width: 76px; height: 47px; display: block; margin: 1px; }
.video-player .thumbnails li a.active,
.video-player .thumbnails li a:hover { border: 1px solid #38e6ff; margin: 0; }
.popout-video-viewer { width: 409px; }
.popout-video-viewer ul { list-style: none; }
.popout-video-viewer ul li { float: left; margin: 0 0 16px 9px; }
.popout-video-viewer a { display: block; }
#post-7 { background: url(_client/images/bg-two-sides.jpg) left top no-repeat; }
#post-17 { z-index:9; margin-top: -60px; background: url(_client/images/bg-enviroments.jpg) left top no-repeat; padding: 150px 45px 100px; }
#footer { -webkit-border-radius: 5px; border-radius: 5px; background-color: #050505; border: 1px solid #1e1e1e; margin: 85px 45px 0; position: relative; z-index: 4; }
#footer-nav { text-align: center; list-style: none; }
#footer-nav li { display: inline; background-position: 0px 3px; }
#footer-nav li:first-child { background: none; }
#footer-nav li a { display: inline-block; padding: 10px 13px 10px 15px; }
#footer-specs { -webkit-border-radius: 5px; border-radius: 5px; border-top: 1px solid #1e1e1e; padding: 25px 15px 25px 25px; }
.info { width: 160px; }
.min-requirements { width: 300px; padding-right: 15px; }
.rec-requirements { width: 300px; padding-right: 15px; }
#footer-specs h3 { font-size: 18px; text-transform: uppercase; color: #fff; margin-bottom: 12px; }
#footer-specs dl { font-size: 11px; }
#footer-specs dt { float: left; clear: both; display: block; width: 60px; }
#footer-specs dd { float: left; width: 240px; color: #747f54; }
#footer-specs .info dd { width: 95px; }
#page-footer { height: 120px; width: 960px; margin: 0 auto; padding-top: 125px; position: relative; }
#page-footer .uwe { position: relative; }
#page-footer .uwe > a { display: block; position: absolute; top: -50px; left: 0; }
#page-footer .uwe p { margin: 0; font-size: 11px; margin-left: 295px; }
#page-footer .fi p { margin: -2px 0 0; font-size: 11px; }
#page-footer .fi p a { background-position: right 0; display: inline-block; padding: 2px 37px 2px 0; }
#page-footer .bg { background: url(_client/images/bg-page-bot.png) no-repeat; height: 548px; width: 225px; position: absolute; top: -583px; left: 11px; z-index: 5; }
#page-footer .bg:after { background: url(_client/images/overlay.png) no-repeat; }
#page-footer .bg:before { background: url(_client/images/overlay-video.png) no-repeat; }

#trailer { display: none; height: 510px; width: 854px; background: url(_client/images/overlay-video.png) no-repeat; position: fixed; top: 50%; left: 50%; margin: -272px 0 0 -441px; z-index: 100; padding: 18px 14px; }
#checkout { display: none; height: 328px; width: 597px; background: url(_client/images/overlay-checkout.png) no-repeat; position: fixed; top: 50%; left: 50%; margin: -164px 0 0 -299px; z-index: 100; padding: 40px 0px 0; text-align: center; }
.close { z-index: 101; position: absolute; height: 57px; width: 57px; position: absolute; top: 30px; right: 33px; background: url(_client/images/sprite-big.png) no-repeat -236px -728px; cursor: pointer; }	
.close:hover { background-position: -236px -668px; }
#checkout .close {top: 17px; right: 12px;}
#trailer .close  { right: 6px; top: 10px; }
#overlay { display: none; height: 100%; width: 100%; position: fixed; z-index: 99; background-color: #000; opacity: 0.7; top: 0; left: 0; }	

#mailchimp { position: relative; display: none; height: 543px; width: 396px; background: url(_client/images/overlay-newsletter.png) no-repeat; position: fixed; top: 50%; left: 50%; margin: -271px 0 0 -198px; z-index: 100; padding: 18px 14px; }
#mailchimp .close  { right: 40px; top: 15px; }
#mc_signup {margin: 55px 43px 0 16px;font-size: 14px;}
#mailchimp #mc_message {padding: 5px 15px 0px 15px;}
#mailchimp .mc_merge_var, #mc-indicates-required, .mergeRow {
    padding: 15px 16px 0px 16px;
}
#mailchimp label {display: block; margin-bottom: 10px;}
#mailchimp input[type=text] {width: 295px; border: none; border-radius: 2px; height: 28px; padding: 0px 5px; line-height: 28px; background: url(_client/images/overlay-newsletter-input-bg.png) repeat-x #262723;}
#mailchimp .groups label {display: inline; vertical-align: middle}
#mailchimp #mc-indicates-required {font-size: 12px; padding-top: 5px; color: #292B29}
#mailchimp .mc_list li {line-height: 18px;}
#mailchimp .mc_list input {margin: 0 10px 0 0;}
#mailchimp .mergeRow > label {margin-bottom: 5px;}
#mailchimp #mc_signup_submit {position: absolute; bottom: 80px; left: 30px; width: 350px; height: 55px; border: 0px; cursor: pointer; background: url(_client/images/overlay-newsletter-subscribe.png) no-repeat;}
#mailchimp #mc_unsub_link {position: absolute; bottom: 55px; left: 0px; text-align: center; width: 400px;}
#mailchimp #mc_unsub_link a {color: #7e857e;}
/*#mailchimp .mc_custom_border_hdr {
    text-align: center;
    margin: 25px 0px;
    font-size: 25px;
}
#mailchimp .mc_form_inside {
    width: 50%;
    margin: 0px auto;
}
#mailchimp #mc_message {
    margin: 15px 0px;
}
#mailchimp .mc_merge_var {
    margin-bottom: 15px;
}
#mailchimp label {
    display: inline-block;
    width: 110px;
    text-align: right;
    margin-right: 10px;
}
#mailchimp input[type=text]{
    width: 200px;
}
#mailchimp #mc-indicates-required {
    margin-bottom: 15px;
}
#mailchimp .mergeRow > label {
    text-align: left;
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: bold;
    width: 100%;
}
#mailchimp .mc_list li {
    margin-bottom: 10px;
}
#mailchimp .mc_list label {
    margin-left: 5px;
    text-align: left;
}
#mailchimp .mc_signup_submit {
    margin: 15px 0px;
}
#mailchimp #mc_signup_submit {
    background: none;
    border: 1px solid #333333;
    width: 150px;
    height: 30px;    
    font-size: 15px;
    padding-bottom: 3px;
    cursor: pointer;
}*/

/* 5] Checkout specifics - for external
-----------------------------------------------------------------------*/

.cufon-loading #hs-title, .cufon-loading #hs-price { visibility: hidden; }
cufon { margin-top: -3px; }

#hs-info { overflow: hidden; width: 375px; margin: 0 auto; }
#hs-title { font-size: 33px; line-height: 40px; color: #fff; text-transform: uppercase; margin-bottom: 14px; }
.cufon-active #hs-title { font-size: 40px; }
#hs-price { color: #38e6ff; font-size: 40px; line-height: 54px; float: left; }
.cufon-active #hs-price { font-size: 54px; }
#hs-description { float: left; padding: 0 0 0 30px; }
#hs-description ul { text-align: left; }
#hs-email { background-color: #000; border: 1px solid #2d2e2c; -webkit-border-radius: 5px; border-radius: 5px; height: 45px; width: 375px; position: relative; margin: 10px auto 0; z-index: 102; }
#hs-emailfield { background: none repeat scroll 0 0 transparent; border: medium none;  display: block; left: 0; padding: 12px 10px; position: absolute; top: 0; width: 355px; text-align: center; font-family: tahoma; color: #25b5ff; font-weight:normal; font-size: 14px; }
#hs-infield { padding: 12px 10px; font-size: 14px; display: block; }
#hs-gift { background-color: #000; background-color: rgba(0,0,0, 0.3); position: relative; border: 1px solid #2d2e2c; -webkit-border-radius: 5px; border-radius: 5px; border-top: 0; margin: -5px auto 18px; padding-top: 5px; z-index: 101; width: 355px; overflow: hidden; padding: 8px 10px 6px; }
#hs-gift label { background: url(_client/images/bg-checkbox.png) left top no-repeat; padding: 1px; display: block; float: right; }
#hs-giftcheckbox { border: 0; margin-right: 10px; }

#hs-row-2, #hs-logo, #forgotemailaddress, #hw-email-error, .hs-purchase-in-progress, #default-caption { display: none; }

/* 6] IE7/8 
----------------------*/
.lt-ie8 body { overflow-x: hidden; position: relative; }
.lt-ie8 #effects { display: none; }
.lt-ie8 #wrapper { overflow: visible; }
.lt-ie8 #pre-order { margin-top: 25px; }
.lt-ie8 .pips { bottom: 31px; left: 145px; }
.lt-ie8 .pips li { float: left; }
.lt-ie8 .pips li a { display: block; }
.lt-ie8 #footer-nav li { background: none; }

.lt-ie9 #content .mid .post { zoom: 1; min-height: 0; padding-bottom: 0; }

/* 6] Styles for temporary countdown timer
----------------------*/
ul#countdown {    
    padding: 0;
    position: absolute;
    top: 340px;
    left: 45px;    
}

ul#countdown li {
    background: url("_client/images/countdown/square.png") no-repeat scroll left top transparent;
    border: medium none;
    border-radius: 6px 6px 6px 6px;
    color: #49E3FE;
    display: inline;
    float: left;
    font: 50px Tahoma;
    height: 100px;
    letter-spacing: 5px;
    margin-left: 5px;
    padding-top: 8px;
    text-align: center;
    text-shadow: 0 0 12px #1F4C95;
    width: 117px;
}

ul#countdown .number {
    padding-left: 20px;
}

.lt-ie10 ul#countdown li canvas {
    padding-left: 0px;
    margin-left: -8px;
}

.lt-ie10 ul#countdown li p canvas {
    margin-left: 0px;
}

ul#countdown p.timeRef {
    font: 16px Arial;
    letter-spacing: 0;
    margin: -6px 0 0;
    padding-bottom: 5px;
}

h1#relaseCountdown {
    background: url("_client/images/countdown/timeUntilRelase.png") no-repeat;
    position: absolute;
    top: 240px;
    left: 70px; 
    width: 443px;
    height: 78px;
}