@font-face {
    font-family: 'OmnesMedium-Roman';
    src: url('omnesmediumroman.eot');
    src: url('omnesmediumroman.eot?#iefix') format('embedded-opentype'),
    url('omnesmediumroman.woff') format('woff'),
    url('omnesmediumroman.ttf') format('truetype'),
    url('omnesmediumroman.svg#omnesmediumroman') format('svg');
    font-weight: normal;
    font-style: normal;
}
body{
    background: white url('../img/BackgroundRepeat.jpg') repeat-x center top;
    font-family:  'OmnesMedium-Roman', helvetica, arial, sans-serif;
    color:white;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased;
}
*{
    margin:0;
    padding:0;
}
canvas{
    margin:0 auto;
    display: block;
}
/* preload varela font */
body:before{
    content: "preload";
    font-family: Varela Round;
    position: absolute;
    top:-1px;
    left:-1px;
    font-size: 1px;
    height: 1px;
    width: 1px;
    overflow: hidden;
}
header { text-align: right; max-width: 960px;margin:0px auto;padding: 25px 0;}
header nav li{ display: inline-block; border-right: solid 1px white; padding: 0px 10px;}
header nav li:last-child{ border: none; padding-right: 0}
header nav a{ font-size: 18px; color: white; text-decoration: none; }
header nav li.active a{ text-decoration: underline}
html.has-touch header{ padding: 7px 0px 6px 0px }
html.has-touch header nav a{ font-size: 16px; }
#game{ background-color: black }
#game img{ display: block; margin: 0 auto; width: auto; max-width: 100%;}
html.page-loaded #game img{ display: none;}
.game-logo{
    background:url(../img/sew-logo.svg) 0 0 no-repeat;
    width: 220px;
    height: 63px;
    margin: 30px auto;
}

.rotate-warning{
    text-align: center;
    margin-top:20%;
    display: none;
}
.rotate-warning img{
    width: auto;
    max-width: 151px;
}
.rotate-warning:after{
    display: block;
    content:"Rotate your screen to play in landscape view.";
    max-width: 300px;
    text-align: center;
    margin: 30px auto;
    font-size: 18px;
}

@media (max-width: 767px) {  html.has-touch body{background-size:100% 100%; } html.has-touch header, html.has-touch .game-logo{ display: none} }
@media (orientation: portrait) {  html.has-touch #game{ display: none } html.has-touch   .rotate-warning{ display: block }  }