/****** FILE: themes/barbasso/css/layout.css *****/
@font-face {
  font-family: 'Inconsolata';
  font-style: normal;
  font-weight: normal;
  src: local('Inconsolata Regular'), local('Inconsolata-Regular'), url(/_resources/themes/barbasso/font/Inconsolata-Regular.woff) format('woff');
}

@font-face {
    font-family: 'SourceCodePro';
    src: url('/_resources/themes/barbasso/font/sourcecodepro-light-webfont.eot');
    src: url('/_resources/themes/barbasso/font/sourcecodepro-light-webfont.eot') format('embedded-opentype'),
    url('/_resources/themes/barbasso/font/sourcecodepro-light-webfont.woff') format('woff'),
    url('/_resources/themes/barbasso/font/sourcecodepro-light-webfont.ttf') format('truetype'),
    url('/_resources/themes/barbasso/font/sourcecodepro-light-webfont.svg#source_code_prolight') format('svg');
}
*{
    margin:0;padding:0;
    font-family:'SourceCodePro','Inconsolata', monospace;
    /*font-smooth:never;*/
    /*-webkit-font-smoothing:never;*/
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust:none;
    -ms-text-size-adjust:none;
    text-size-adjust:none;
    font-weight:normal;
    text-decoration:none;
    color:inherit;
    font-size:1em;
}

html {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}
body{
    line-height:0;
    background-color:#000;
    color:#00ff45;
    text-shadow: 1px 0px 0px rgba(0,0,0,0.5), 0px 1px 0px rgba(0,0,0,0.5), 0px -1px 0px rgba(0,0,0,0.5), -1px 0px 0px rgba(0,0,0,0.5);
    font-size:100%;
    line-height:1.4;
    height:100%;
    overflow:hidden;
    position: fixed;
    width: 100%;
}
@media (min-width:40em){
    body{
	font-size:120%;
    }
}
#fg{
    position:fixed;
    top:0;
    height:100%;
    left:0;
    width:100%;
    z-index:99;
    box-sizing:border-box;
    
    padding:1ex;
    
    -webkit-transition: left 500ms linear, margin 500ms linear;
    -moz-transition: left 500ms linear, margin 500ms linear;
    -o-transition: left 500ms linear, margin 500ms linear;
    transition: left 500ms linear, margin 500ms linear;
}
@media (min-width:48em){
    #fg{
	padding:1ex 1em;
    }
}
body.map #fg, body.info #fg{
    left:-100%;
    margin-left:2em;
}

#content h2{
    line-height:100%;
    font-size:2em;
}
#content .text{
    clear:both;
}
#map, #info{
    position:fixed;
    z-index:1;
    left:100%;
    top:0;
    width:100%;
    height:100%;
    background-color:#ccc;
    padding-left:2em;
    -webkit-transition: left 500ms linear 0s;
    -moz-transition: left 500ms linear 0s;
    -o-transition: left 500ms linear 0s;
    transition: left 500ms linear 0s;
    color:#00ff45;
    box-sizing:border-box;
}
#info{
    background-color:#000;
    padding:1ex 3em;
}
#info p{
    margin-bottom:2ex;
}
body.map #map, body.info #info{
    left:0;
}
body.map #mapnav{
    background-color:#00ff45;
    color:#000;
}
body.info #infonav{
    background-color:#00ff45;
    color:#000;
}
#main{
    background:#888888;
    position:fixed;
    z-index:2;
    width:100%;
    height: 100%;
    overflow: hidden;
    left:0;
    -webkit-transition: left 500ms linear, padding 500ms linear, margin 500ms linear;
    -moz-transition: left 500ms linear, padding 500ms linear, margin 500ms linear;
    -o-transition: left 500ms linear, padding 500ms linear, margin 500ms linear;
    transition: left 500ms linear, padding 500ms linear, margin 500ms linear;
    
}
body.map #main, body.info #main{
    padding-left:2em;
    left:-100%;
}
#sidenav{
    position:absolute;
    right:0;
    top:0;
    margin:0;
    padding:0;
    text-align:right;
}
#sidenav div{
    cursor:pointer;
    height:1.4em;
    line-height:1.4em;
    padding:0.4em;
    float:left;
}
body.map #sidenav div, body.info #sidenav div{
    float:none;
}
@media (min-width:48em){
    #sidenav div{
	float:none;
    }
}
body.map #sidenav div span, body.info #sidenav div span{
    display:none;
}

ul{
    list-style:none;
}
#mainnav{
    padding-right:3em;
}
#content{
    max-width:32.4em;
    padding-top: 1em;
    clear:both;
}
@media (min-width:48em){
    #content{
	margin-right:10em;
    margin-top:0;
    padding-top: 2em;
    }
}
#mainnav li{
    float:left;
    display:none;
}
#mainnav ul.secondary li {
    display:block;
}
#mainnav li.current{
    display:block;
}
#mainnav ul.secondary {
    clear:both;
    display:block;
}
@media (min-width:48em){ 
    #mainnav li{
	display:block;
    }
    #mainnav a:before{
	content:": ";
    }
    #mainnav a:after{
	content:" :";
    }
    #mainnav li:first-child a:before{
	content:"";
    }
    #mainnav li:last-child a:after{
	content:"";
    }
}
#mainnav ul li.current a,#mainnav ul li a:hover{
    color:#fff;
}

.desk-only{
    display:none;
}

#mainnav ul li.current .desk-only{
    display:inline;
}

@media (min-width:40em){
    span.desk-only{
	display:inline;
    }
}

#leftscreen{
    position:fixed;
    z-index:999;
    background-color:#000;
    top:0;
    left:-17em;
    width:17em;
    height:100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    -webkit-transition: left 500ms linear;
    -moz-transition: left 500ms linear;
    -o-transition: left 500ms linear;
    transition: left 500ms linear;
}
#leftscreen > div{
    margin:1ex 0;
}
#leftscreen > i{
    position:absolute;
    right:0;
    top:0;
    font-style:normal;
    cursor:pointer;
    padding:1ex 1em 2ex 2em;
    background:#000;
}
#leftscreen > i:before{
    content:" X";
}
a.leftnav:before{
    content:"<- ";
}

body.leftopen #main, body.leftopen #fg, body.leftopen .screen{
    /*left:17em;*/
}
body.leftopen #leftscreen{
    left:0;
}
#leftscreen > div > ul > li{
    margin-bottom:2ex;
    clear:right;
}
#leftscreen ul ul, #leftscreen li{
    display:inline-block;
}
#leftscreen li li span{
    white-space:nowrap;
}
#leftscreen ul ul{
    text-align:right;
}


.screen{
    left:0;
    top:0;
    width:100%;
    height: 100vh;
    overflow:hidden;
    z-index:200;
}
.screen > .content{
display:none;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
}
.screen br{
    display:none;
}
.screen span{
    padding:0 4px 0 0;
}
.section-ticker{
    /*position:absolute;*/
    bottom:0;
    white-space:pre;
}
.slides{
    position:relative;
    width:100%;height:100%;
}
.slides .slide{
    position:absolute;
    width:100%;
    left:0;top:0;
    opacity:0;
    transition:all 0.8s;
}
.slides .slide.current{
    opacity:1;
}
.slides .slide img{
    width:100%;height:auto;
}
#home .slide {
    width: 100% !important;
    left: 0 !important;
    background: #000;
}


#footer{
    position:absolute;
    bottom:0;
    left:0;
    right:0;
	padding:1ex;
}
@media (min-width:48em){
    #footer{
	padding:1ex 1em;
    }
}

#footer .social{
    float:left;
}
#footer .related{
    float:right;
    margin-left:1em;
}
#footer a{
    white-space:nowrap;
}

#gamesection{
    position:fixed;
    z-index:9999;
    left:0;
    top:0;
    background:black;
    width:100%;
    height:100%;
    text-align:center;
    display:none;
    inline:1em solid #00ff45;
}
body.game #gamesection{
    display:block;
}
#gamesection canvas{
    margin-top:1em;
    max-width:100%;
}



@-webkit-keyframes playadkfrms {
    0% {background:#000;}
    50% {background:#00ff45;}
    100% {background:#000;}
}

@keyframes playadkfrms {
    0% {background:#000;color:#00ff45;}
    50% {background:#00ff45;color:#000;}
    100% {background:#000;color:#00ff45;}
}
.playad{
    cursor:pointer;
    color:#00ff45;
}
.playad span{
    -webkit-animation-name: playadkfrms;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: steps(1);
    -webkit-animation-duration: 1s;

    animation-name: playadkfrms;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    animation-timing-function: steps(1);
    animation-duration: 1s;

    color:#000;
    text-shadow: none;
}


hr{
    border:none;
    box-shadow: 0 0 1px #333;
    height:1px;
    background-color:#00ff45;
}