/*
Title:  OE styles for screen media
Author: Craig Erskine @craigerskine
*/

/* normalize */
*,*:before,*:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,button,input,select,textarea{font-family:sans-serif}body{margin:0}a:focus{outline:thin dotted}a:active,a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}h2{font-size:1.5em;margin:0.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:0.83em;margin:1.67em 0}h6{font-size:0.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,pre{margin:1em 0}code,kbd,pre,samp{font-family:monospace,serif;_font-family:'courier new',monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,q:after{content:'';content:none}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,menu,ol,ul{margin:1em 0}dd{margin:0 0 0 40px}menu,ol,ul{padding:0 0 0 40px}nav ul,nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,input,select,textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,input{line-height:normal}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],html input[disabled]{cursor:default}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}

/* clear */
.container:before,.container:after { content: ""; display: table; }
.container:after { clear: both; }
.container { *zoom: 1; }

/* elements */
body { background: #101010 url(../img/grunge.png) repeat 50% 0; color: #D1DDF4; font: 14px/20px "Helvetica Neue", Arial, sans-serif; text-shadow: 0 1px 0 #000; overflow-y: scroll; overflow-x: hidden; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; }

a { color: #D2DDF5; font-weight: bold; text-decoration: none; }
a:hover,a:focus { color: #FFF; text-decoration: none; outline: 0; }

h1,h2,h3,h4,h5,h6 { margin: 0 0 20px; color: #EFF3FD; font-size: 22px; line-height: 22px; font-weight: normal; }
h2 { font-size: 16px; }
h2 strong { font-size: 18px; }
h4 { margin: 0; font-size: 16px; }

p,ul,ol,table { margin: 0 0 20px; }
ul ul,ul ol,ol ol,ol ul { margin-bottom: 0; }
table table { margin-bottom: 0; }
img { vertical-align: middle; }
hr { margin: 0 0 19px; border: 0 none; border-top: 1px solid #D1DDF4; height: 0; background: transparent; color: transparent; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
iframe,object { margin: 0; border: 0 none; padding: 0; }

/* classes */
.bottom-remove { margin-bottom: 0; }
.bottom-half { margin-bottom: 10px; }
.bottom-add { margin-bottom: 20px; }
.small { font-size: 80%; }
.large { font-size: 120%; line-height: 1.2; }
.muted { color: #999; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
.text-hide { overflow: hidden; text-indent: 100%; white-space: nowrap; }
.pull-left { margin: 0 20px 10px 0; float: left; }
.pull-right { margin: 0 0 10px 20px; float: right; }
.hide { display: none; }
.clear { clear: both; }
.error { padding: 20px; background: #D12733; color: #000; }

.img-overlay { display: inline-block; position: relative; }
.img-overlay:after { border: 1px solid #000; width: 100%; height: 100%; display: block; content: ""; position: absolute; top: 0; left: 0;
 -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 3px rgba(0,0,0,0.75);
 box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 3px rgba(0,0,0,0.75);
}

.caret { width: 7px; height: 10px; background: url(../img/caret.png) no-repeat 0 0; overflow: hidden; display: inline-block; position: relative; top: 1px; left: 3px; }

/* lean modal */
#lean-overlay { height: 100%; width: 100%; background: #000; display: none; position: fixed; z-index: 100; top: 0; left: 0; }

/* layout */
.container{ margin: 0 auto; width: 940px; clear: both; position: relative; }

#page { background: url(../img/retro-grid.jpg) no-repeat 50% 0; overflow: hidden; }

#head { height: 300px; }
#logo { margin: 0 auto; width: 304px; height: 94px; font-size: 0 a; text-indent: 100%; white-space: nowrap; overflow: hidden; position: relative; top: 42px; z-index: 2; }
#logo a { width: 100%; height: 100%; display: block; background: url(../img/logo.png) no-repeat 50%; }

#nav { width: 100%; height: 30px; position: absolute; top: 75px; left: 0; z-index: 1; }
#nav ul,#nav li,#nav a { margin: 0; padding: 0; list-style: none; display: block; }
#nav li { margin: 0 0 0 20px; width: 140px; float: left; }
#nav .nav-overview { margin: 0; }
#nav .nav-news { margin-right: 320px; }
#nav .nav-news a { margin-left: 22px; }
#nav .nav-forum a { margin-left: 70px; }
#nav .nav-github { text-align: right; }
#nav a { color: #9C2931; font-size: 18px; text-shadow: 0 2px 0 #000; }
.sect-default #nav .nav-overview a,.sect-news #nav .nav-news a { color: #F00; }
#nav a:hover,#nav a:focus { color: #D12733; }

.intro { width: 100%; height: 992px; position: relative; }
.intro-content { padding: 64px 0 0; width: 300px; position: relative; z-index: 2; }
.intro-content h2 { font-size: 18px; }
.intro-download { padding: 20px 0 80px; }
.intro-download .btn { width: 160px; height: 39px; line-height: 38px; background: url(../img/btn.png) no-repeat 0 0; color: #FFF; text-align: center; display: block; float: left; }
.intro-download .btn:focus { background-position: 0 -39px; }
.intro-download .btn-group { width: 29px; height: 39px; display: block; float: left; position: relative; }
.intro-download .dropdown-toggle { width: 100%; height: 100%; background: url(../img/btn.png) no-repeat -160px 0; display: block; }
.intro-download .dropdown-toggle .caret { display: none; }
.intro-download .open .dropdown-toggle { background-position: -160px -39px; }
.intro-download .dropdown-menu { margin: 0; border: 1px solid #000; padding: 5px 0; width: 180px; font-size: 13px; display: none; list-style: none; text-shadow: none; position: absolute; top: -21px; left: -20px; opacity: 0;
 background: #CCC;
 background: -moz-linear-gradient(top, rgba(217,217,217,0.9) 0%, rgba(190,189,189,0.9) 100%);
 background: -webkit-linear-gradient(top, rgba(217,217,217,0.9) 0%,rgba(190,189,189,0.9) 100%);
 background: -ms-linear-gradient(top, rgba(217,217,217,0.9) 0%,rgba(190,189,189,0.9) 100%);
 background: linear-gradient(to bottom, rgba(217,217,217,0.9) 0%,rgba(190,189,189,0.9) 100%);
 -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.6);
 box-shadow: inset 0 1px 0 rgba(255,255,255,0.5), 0 2px 3px rgba(0,0,0,0.6);
 -webkit-border-radius: 5px;
 border-radius: 5px;
}
.intro-download .open .dropdown-menu { display: block; opacity: 1; }
.intro-download .dropdown-menu li { margin: 0; padding: 0; list-style: none; }
.intro-download .dropdown-menu a { padding: 0 10px; color: #000; font-weight: normal; line-height: 22px; display: block; }
.intro-download .dropdown-menu a:hover,.intro-download .dropdown-menu a:focus { background: #222 url(../img/popover-select.png) repeat-x 0 0; color: #FFF; }

.intro-download-info { color: #434444; font-size: 10px; font-style: italic; display: block; clear: both; }

.intro-th,.intro-th li { margin: 0 0 0 -20px; padding: 0; list-style: none; display: block; }
.intro-th li { margin: 0 0 20px 20px; width: 140px; float: left; opacity: 0.8; position: relative; }
.intro-th li:hover { cursor: pointer; opacity: 1; }
.intro-th .active { opacity: 1; }
.intro-th .active:after { width: 152px; height: 153px; background: url(../img/intro-th-active.png) no-repeat 0 0; opacity: 1; display: block; content: ""; position: absolute; top: -6px; left: -6px; }

.intro-hero { width: 100%; height: 870px; position: absolute; top: 0; left: 0; z-index: 1; }
.intro-hero.affix { position: fixed; }
.intro-hero .container { height: 870px; }
.intro-img { opacity: 0; position: absolute; left: 363px; -webkit-transition: bottom 1s, opacity .5s; transition: bottom 1s, opacity .5s; }
.ie .intro-img { display: none; }
.intro-img.active { display: block; opacity: 1; }
.intro-img1 { bottom: 173px; }
.intro-img2 { bottom: 173px; }
.intro-img3 { bottom: 212px; }
.intro-img4 { bottom: 256px; }
.intro-img5 { bottom: 173px; }
.intro-img6 { bottom: 173px; }

.affix-bottom .intro-img { bottom: -89px; }

.controls { width: 100%; height: 800px; background: url(../img/wood.jpg) repeat-x 50% 0; overflow: hidden; }
.controls-content { margin-left: 640px; padding: 160px 0 0; width: 300px; color: #000; text-shadow: 0 1px 0 #DEA35F; opacity: 0; position: relative; z-index: 2; -webkit-transition: padding 1s, opacity 1s; transition: padding 1s, opacity 1s; }
.explode .controls-content { padding-top: 80px; opacity: 1; }
.controls-content h2 { color: #000; text-shadow: 0 1px 0 #DEA35F; }
.controls-action a { color: #402200; font-weight: 500; position: relative; }
.controls-action a:hover,.controls-action a:focus { color: #000; }
.controls-action a:hover .caret,.controls-action a:focus .caret { background-position: 0 -10px; }
.controls-video { margin: 0 0 30px; width: 140px; height: 79px; position: relative; }
.controls-video a:after { width: 140px; height: 79px; background: url(../img/controls-video.png) no-repeat 0 0; display: block; content: ""; position: absolute; top: 0; left: 0; }
.controls-video:hover a:after { background-position: 0 -79px; }
.controls-prefs { opacity: 0; position: absolute; top: 65px; left: -247px; z-index: 2; -webkit-transition: opacity 2s; transition: opacity 2s; }
.controllers { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
.controller { position: absolute; -webkit-transition: top 1s, left 1s, right 1s; transition: top 1s, left 1s, right 1s; }
.controls-nes { width: 432px; height: 495px; background: url(../img/controls-nes.png); top: 0; left: -181px; }
.controls-sms { width: 432px; height: 269px; background: url(../img/controls-sms.png); top: 0; left: -548px; }
.controls-gb { width: 256px; height: 422px; background: url(../img/controls-gb.png); top: 348px; left: -463px; }
.controls-snes { width: 437px; height: 718px; background: url(../img/controls-snes.png); top: 0; right: 414px; -webkit-transition: right 1.4s; transition: right 1.4s; }
.controls-gba { width: 436px; height: 256px; background: url(../img/controls-gba.png); top: 241px; right: 137px; -webkit-transition: right 1.2s; transition: right 1.2s; }
.controls-md { width: 458px; height: 819px; background: url(../img/controls-md.png); top: -64px; right: -137px; }
.explode .controls-sms,.ie .controls-sms { left: -750px; }
.explode .controls-gb,.ie .controls-gb { left: -532px; }
.explode .controls-snes,.ie .controls-snes { right: -228px; }
.explode .controls-gba,.ie .controls-gba { right: -505px; }
.explode .controls-md,.ie .controls-md { right: -764px; }
.explode .controls-prefs { opacity: 1; }

#controls-video { margin: -180px 0 0; }

.organized { padding: 0 0 78px; position: relative; }
.organized:before { width: 100%; height: 32px; background: url(../img/grunge-top.png) repeat-x; content: ""; position: absolute; top: 0; left: 0; }
.organized-content { margin: 0 auto 44px; padding: 77px 0 0; width: 464px; }
.organized-content h2 { margin: 0 0 12px; text-align: center; }
.organized-content p { margin: 0; }
.step { width: 260px; color: #464646; text-align: center; float: left; }
.step2 { margin: 0 80px; }
.step-num { margin: 0 auto 24px; width: 49px; height: 51px; background: url(../img/step-num.png) no-repeat 0 0; color: #000; font-size: 24px; line-height: 48px; text-align: center; text-shadow: 0 1px 0 rgba(255,255,255,0.2); }
.step-img { margin: 0 0 22px; }
.step-img img { opacity: 0.4; }
.step-content { margin: 0; padding: 0 10px; }
.step,.step-img img { -webkit-transition-duration: .75s; transition-duration: .75s; }
.step:hover,.step.hover { color: #D2DDF5; }
.step:hover .step-num,.step.hover .step-num { background-position: 0 -51px; }
.step:hover img,.step.hover img { opacity: 1; }

.features { padding: 82px 0 4px;}
.features h2 { margin: 0 0 48px; }
.features-content { width: 470px; float: left; }
.feature { margin: 0 0 58px 80px; width: 300px; clear: both; float: left; position: relative; }
.feature-ico { width: 60px; height: 60px; background: url(../img/features-ico.png) no-repeat 0 0; position: absolute; top: 5px; left: -80px; }
.feature h4 { margin: 0; color: #EFF3FD; font-weight: 500; font-size: 16px; }
.feature3,.feature4 { margin-left: 90px; }
.feature2 .feature-ico { background-position: 0 -120px; }
.feature3 .feature-ico { background-position: 0 -60px; }
.feature4 .feature-ico { background-position: 0 -180px; }
.feature-action a { position: relative; }
.feature-action a:hover,.feature-action a:focus { color: #9C2A32; }
.feature-action .caret { background-position: -7px 0; }
.feature-action a:hover .caret,.feature-action a:focus .caret { background-position: -7px -10px; }

.games { padding: 76px 0 91px; }
.games h2 { margin: 0 0 40px; }
.games-download { margin: 0; width: 140px; height: 39px; position: absolute; top: 0; right: 0; }
.games-download .btn { width: 140px; height: 39px; line-height: 38px; background: url(../img/btn.png) no-repeat 0 -78px; color: #FFF; text-align: center; display: block; float: left; }
.games-download .btn:focus { background-position: 0 -117px; }
.games-scroll { margin: 0 auto; width: 940px; position: relative; 
 -moz-user-select: -moz-none;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
.games-scroll .viewport { width: 100%; height: 286px; position: relative; }
.games-scroll .overview { position: absolute; left: 0; top: 0; }
.games-scroll .scrollbar { width: 940px; height: 9px; position: absolute; bottom: -9px; left: 0; }
.games-scroll .track,.games-scroll .thumb { width: 940px; height: 9px; background: url(../img/scroll.png) no-repeat 0 0; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: 0; }
.games-scroll .thumb { width: 179px; background-position: 0 -9px; }
.games-scroll .thumb .end { overflow: hidden; height: 9px; width: 13px; }
.games-info,.games-info li { margin: 0; padding: 0; width: 3600px; list-style: none; display: block; }
.games-info li { margin: 0 20px 0 0; width: 220px; text-align: center; float: left; }
.games-info li:last-child { margin: 0; }
.games-info img { opacity: 0.8; }
.games-info a:hover img { opacity: 1; }
.games-info p { margin: 0; padding: 20px 0 40px; color: #616672; font-weight: normal; }
.games-info strong { color: #EFF3FD; font-weight: 500; font-size: 16px; }
.games-info a { color: #616672; font-weight: normal; }
.games-info a:hover,.games-info a:focus { color: #9C2A32; }

.news { padding: 77px 0 0; }
.article-featured { padding: 0 0 50px; }
.featured-hero { margin: 0 0 46px; }
.article-info { width: 380px; float: left; }
.article-title,.article-title a { color: #F0F4FE; font-size: 18px; font-weight: 500; }
.article-title a:hover { color: #D12733; }
.article-title a:focus { color: #F00; }
.article-posted { color: #526B9F; font-size: 16px; }
.article-cat,.article-cat a { color: #464646; font-weight: 500; }
.article-cat a:hover { color: #8C95A6; }
.article-cat a:focus { color: #D1DDF4; }
.article-teaser { width: 460px; float: right; }
.article-more a { color: #D2DDF5; font-weight: 500; }
.article-more a:hover,.article-more a:focus { color: #9C2A32; }
.article-more .caret { background-position: -7px 0; }
.article-more a:hover .caret,.article-more a:focus .caret { background-position: -7px -10px; }
.article { padding: 60px 0 50px; }
.article-load { padding: 0 0 3px; font-size: 18px; position: relative; top: -2px; }
.article-load a { padding: 32px 0 42px; color: #9B2931; background: rgba(49,49,49,0.2); line-height: 29px; display: block; text-align: center; position: relative; }
.article-load a:hover,.article-load a:focus { color: #EFF3FD; background: rgba(213,50,62,0.2); }
.article-load a .ico { width: 24px; height: 29px; background: url(../img/news.png) no-repeat 0 -78px; display: inline-block; position: relative; top: 8px; left: -14px; }
.article-load a:hover .ico { background-position: 0 -107px; }
.article-post { padding: 0 0 80px; }
.article-comments { padding: 80px 0; }
.article-body { margin: 0 0 0 480px; width: 460px; }
.mast-med { margin-left: -240px; position: relative; }

.caption { margin: 20px 0 0; color: #9B2A32; font-style: italic; display: block; }
.mast-med .caption { width: 220px; text-align: right; position: absolute; bottom: 0; left: -240px; }

.comment-head { margin: 0 0 40px; color: #526BA0; }
.comment { margin: 0 0 40px; border-bottom: 1px solid #000; padding: 0 0 20px; -webkit-box-shadow: 0 1px 0 #212121; box-shadow: 0 1px 0 #212121; }
.comment-name { margin: 0 0 5px; font-size: 16px; }
.comment-name a { font-weight: normal; }
.comment-time { font-size: 16px; color: #464646; }
.comment-post {}
.comment-action { text-align: right; }
.comment-action .button { margin-left: 20px; }
.comment_name_input,.comment_email_input,.comment_web_input,textarea { padding: 6px; border: 1px solid #000; width: 100%; background: #181818; color: #D2DDF5; font: 14px "Helvetica Neue", Arial, sans-serif; text-shadow: 0 1px 0 #000; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 1px 0 #212121; box-shadow: inset 0 1px 2px rgba(0,0,0,0.2), 0 1px 0 #212121; }
::-webkit-input-placeholder { color: #464646; }
:-moz-placeholder { color: #464646; }
::-moz-placeholder { color: #464646; }
:-ms-input-placeholder { color: #464646; }
.button { border: 0 none; padding: 0 0 3px; width: 140px; height: 39px; background: url(../img/btn-form.png) no-repeat 0 0; color: #515151; font: 500 16px "Helvetica Neue", Arial, sans-serif; text-align: center; text-shadow: 0 1px 0 #000; }
.button:hover { color: #FFF; }
.button:active { background-position: 0 -39px; color: #FFF; }
.comments_error { border-color: #D12733; }

.fold { background: url(../img/grunge-bot.png) repeat-x bottom; }

.foot { padding: 108px 0 75px; background: url(../img/foot-logo.png) no-repeat 0 108px; }
.foot-nav,.foot-nav li { margin: 0 0 0 400px; padding: 0; list-style: none; display: block; line-height: 17px; }
.foot-nav li { margin: 0; padding: 0; width: 135px; color: #919090; font-weight: bold; float: left; font-size: 18px; }
.foot-nav ul { margin: 0; padding: 25px 0 0; }
.foot-nav li li { padding: 0 0 25px; width: auto; float: none; font-size: 16px; }
.foot-nav a { color: #555; }
.foot-nav a:hover,.foot-nav a:focus { color: #AAACB3; }

/* animation */
*{-webkit-transition:background-color .25s,color .25s,opacity .25s,box-shadow .25s;transition:background-color .25s,color .25s,opacity .25s,box-shadow .25s;}