* { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; /* Prevent font scaling in landscape while allowing user zoom */ }
body { background-color: #F5F5F5; line-height: 1.6em; font-family: Verdana, Geneva, sans-serif; margin: 0; font-size: 16px; color: #000; }
#page.large { font-size: 16px; }
#page.medium { font-size: 14px; }
#page.small { font-size: 12px; }

area { cursor: pointer; }
input { font-family: Verdana, Geneva, sans-serif; font-size: 14px; }
#page { width: 100%; height: 100%; color: #FFF; }
#wrapper {height: 100%; width: 100%; overflow: hidden; margin: auto; position: relative; }
#header { text-align: center; padding: 0.5em 3em; font-size: 1em; font-weight: bold; position: absolute; top: 0; width: 100%; z-index: 99; background-color: rgba(0,0,0,0.4); text-shadow: 0 0 1px #000; line-height: 1.4em; min-height: 2.4em; }
#main { position: relative; max-width: 100%; }
#main:after { content: " "; display: block; height: 0; clear: both; overflow: hidden; visibility: hidden; }
#menu-button { height: 2.4em; line-height: 2.4em; position: absolute; right: 0; text-align: center; top: 0; width: 2.4em; z-index: 102; cursor: pointer; }
#menu-button i { line-height: 1.2em; }
#menu-button i.fa-times { color: #fff; }
#menu { background-color: rgba(0, 0, 0, 1); bottom: 0; position: absolute; right: 0; top: 0; z-index: 101; left: 0; transition: transform 0.4s linear; overflow: hidden; }
#menu.hidden { transform: translateY(-100%); }
#menu #menu-image { bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; z-index: -1; }
#menu #menu-nav { margin-left: 7%; margin-top: 10%; float: left; }
#menu .menu-item { line-height: 2.4em; cursor: pointer; position: relative; }
#menu .menu-item:hover::before { content: "•"; position: absolute; left: -1em; }
#saves { bottom: 0; overflow-y: auto; position: absolute; right: 10%; top: 10%; width: 50%; transition: transform 0.4s linear; }
#saves.hidden { transform: translateY(100%); }
#saves .save { overflow: hidden; padding: 1em; margin: 1em 0; background-color: rgba(0,0,0,0.5); }
#saves .date { font-size: 0.8em; color: #999; line-height: 1em; }
#saves .title { font-size: 1em; max-height: 3.4em; overflow: hidden; line-height: 1.6em; }
#saves .delete-save { float: right; }
#saves .delete-save:hover { color: #000; }
#saves img { width: 10em; float: left; margin-right: 0.5em; }
#footer { position: absolute; bottom: 0; width: 100%; }
#image { border: none; width: 100%; max-width: 100%; vertical-align: middle; }
#fakemap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
#fakemap-inner { position: relative; }
.fakemap-area { position: absolute; cursor: pointer; border-radius: 1em; }
body.touch .fakemap-area { border: 1px solid rgba(255, 255, 255, 0.2);  }
.fakemap-area:hover { border: 1px solid rgba(255, 255, 255, 0.4); }

.arrow { font-size: 1.4em; }

.style1 { color: #FFFFFF; }
.style2 { color: #FFFF00; }
.style3 { color: #FF0000; }
.style4 { color: #999999; }
.style5 { color: #00FFFF; }
.style6 { color: #990000; }
.style7 { color: #FFFF99; }
.style8 { color: #FF00FF; }
.style9 { color: #CCCCCC; }
.style10 { color: #666666; }
.style11 { color: #00FF00; }
.style12 { color: #FF66CC; }
.style13 { color: #0066FF; }
.style14 { color: #FFCC66; }
.style15 { color: #666600; }
.style16 { color: #996600; }
.style17 { color: #FF6600; }
.style18 { color: #9933FF; }
.style19 { color: #FF3300; }
.style20 { color: #FFFFCC; }
.style21 { color: #F0F0F0; }
.style22 { color: #FF9900; }
.style23 { color: #990033; }
.style24 { color: #9900FF; }
.style25 { color: #CCFFCC; }
.style26 { color: #6666CC; }
.style27 { color: #0000FF; }
.style28 { color: #9933CC; }
.style29 { color: #9999FF; }
.style30 { color: #9999CC; }
.style31 { color: #0099FF; }
.style32 { color: #FF3333; }
.style33 { color: #FFCC00; }
.style34 { color: #FFFF66; }
.style35 { color: #993300; }
.style36 { color: #FFCC99; }
.style37 { color: #FFCC33; }
.style38 { color: #99FFCC; }
.style39 { color: #999900; }
.style40 { color: #99CCCC; }
.style41 { color: #0066CC; }
.style42 { color: #FF0033; }
.style43 { color: #3366FF; }
.style44 { color: #9966CC; }

.error { background-color: red; color: #FFF; }

.message { display: block; color: #fff; padding: 0.2em; }
#responses { background-color: rgba(0,0,0,0.4); text-shadow: 0 0 1px #000; }
.response { display: block; color: #fff; padding: 0.4em; cursor: pointer; }
.response:hover { background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.6); }

#main .button { clear: right; float: right; margin: 1em; text-transform: uppercase;}

.title { font-size: 2.6em; rgb(67, 198, 219) font-weight: bold; }

#tag { position: absolute; right: 0; top: 2.3em; background-color: rgb(0, 0, 0); color: #FFF; padding: 0 0.8em; }
#stats { background-color: rgb(5,5,5);  background-color: rgba(0, 0, 0, 0.8); left: 0; border: 1px solid rgba(0, 0, 0, 0.8); position: absolute; top: 2.3em; width: 15%; max-width: 6em; }
#stats img { max-width: 100%; }
#stats .count { float: right; position: relative; }
#stats .stat-count { padding-right: 0.5em; clear: both; position: relative; }
#stats .stat-count > img { vertical-align: middle; position: absolute; top: 0.3em; z-index: 0; }
#score { font-size: 1.5em; }
#score .score-divider { opacity: 0.4; }
#score .score-max { opacity: 0.4; }
#inventory { position: absolute; width: 100%; padding: 0.3em; top: 2.4em; }
#inventory > img { border-color: rgb(0, 100, 0); border: 2px solid rgba(0, 100, 0, 0.6); margin-left: 0.4em; width: 10%; max-width: 2.8em; float: right; }
#image-bottom { bottom: 0; position: absolute; width: 100%; }
#image-wrapper { position: relative; }
#image-loading { background: none no-repeat scroll 50% 50% #FFF; height: 100%; left: 0; position: absolute; right: 0; top: 0; width: 100%; opacity: 0; display: none; }
#image-loading-inner { color: #333; font-size: 2em; left: 50%; position: absolute; top: 50%; }
#image-loading-inner i { position: relative; left: -50%; top: -50%; }
#image-caption { line-height: 1.4em; padding: 0.5em; background-color: rgb(5,5,5); background-color: rgba(0,0,0,0.4); text-shadow: 0 0 1px #000; font-weight: bold; color: #FFF; text-align: center; }

#footer .button { font-size: 1em; padding: 0.2em 0.6em; float: right; font-weight: normal; margin-left: 1em; }
.save { cursor: pointer; }
.load { cursor: pointer; }


.new-achievement { background-color: rgba(0, 0, 0, 0.6); border-radius: 0.5em; padding: 0.5em 1em 1em; position: absolute; right: 0.5em; text-align: right; top: 0.5em; }
.new-achievement .achievement-main-title { color: #999999; font-size: 0.7em; line-height: 1em; margin-bottom: 1em; }
.new-achievement .achievement-title { text-transform: uppercase; }
.new-achievement .achievement-description { font-size: 0.8em; line-height: 1em; }

#page-achievements { background-color: rgba(0, 0, 0, 0.8); height: 100%; left: 0; padding: 1em; position: absolute; top: 0; width: 100%; overflow: auto; }
#page-achievements .achievement-title { display: block; float: left; margin-right: 1em; text-transform: uppercase; }
#page-achievements .achievement-description { color: #999999; }
#page-achievements .progress:before { content: "progress: "; }
#page-achievements .progress { background-color: #FFFFFF; color: #000000; display: block; margin: 1em -1em 0; padding: 0.2em 1em; }
#page-achievements .achievement { border: 1px solid #FFFFFF; margin: 1em; padding: 1em 1em 0; }

@media only screen and (-moz-min-device-pixel-ratio: 2),
       only screen and (-o-min-device-pixel-ratio: 2/1),
       only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-device-pixel-ratio: 2) {
    /*use CSS to swap out your low res images with high res ones here*/
    body { font-size: 12px; }
}