/* 
CITY OF RAUMA - THE GAME. Author and copyright: Juho Ruohola, www.juhoruohola.fi
Any use, redistribution or modification of the graphics, music and sounds in this game is prohibited. Copyright of the graphics in "community creations" belongs to the creator of that graphics.
Any use, redistribution or modification of the game code is prohibited unless the credit and contact of the original author (Juho Ruohola) is preserved.
Uses: jQuery, Hammer.js, Google hosted libraries, Google Fonts
*/
html, body{width:100%;height:100%;overflow:hidden;font-family:"Open Sans",Arial,Helvetica,sans-serif;font-size:16px;}
body{background:#333/*#629400*/;margin:0px;padding:0px;}
div, canvas{box-sizing:border-box;}
h1,h2,h3,h4{color:#00009b;line-height: 1.1;}
h1{font-size:1.8em;text-transform: uppercase;}
h2{font-size:1.4em;text-transform: uppercase;margin-top:0px;}
h3{font-size:1.2em;}
ul{list-style:none;padding:0px;margin-bottom:20px;}
li{padding:0px;margin:0px;}
#theCanvas{}
#theMap{border:none;cursor:pointer;margin-top:0px;}
#canvasWrap{width:100%;height:100%;position: absolute;z-index: 98;left:0px;top:0px;overflow:hidden;}
#toolbar{width:100%;height:40px;background: #ffa700; 
background: -moz-linear-gradient(top, #ffa700 0%, #ffcd00 100%);
background: -webkit-linear-gradient(top, #ffa700 0%,#ffcd00 100%);
background: linear-gradient(to bottom, #ffa700 0%,#ffcd00 100%);
position: absolute;bottom:0px;box-shadow: 0px 0px 15px #222;text-transform: uppercase;z-index:199;font-size:0.9em;}
.button{width:33.333%;height:40px;float:left;text-align:center;color:#00009b;line-height: 40px;font-weight:bold;cursor:pointer;}
#btn2{border-left:1px solid #00009b;border-right:1px solid #00009b;}
.button.active{background:#00009b;color:#fff;}
.btn_i{padding:12px;background:#00009b;color:#fff;width:150px;text-align:center;margin:20px auto;cursor:pointer;}
#cursor{position:absolute;z-index:95;top:50%;left:50%;/*width:52px;height:26px;*/display: none;}
#cursor span{display: none;}
#cursor img{/*width:52px;height:26px;*/opacity:0.5;}
#blanket{position:absolute;z-index:100;top:0px;left:0px;width:100%;height:100%;background:rgba(0,0,0,0.6);display:none;}
#window_build{position:absolute;z-index:101;top:10%;left:10%;width:80%;height:80%;background:#fff;border-radius:8px;display:none;}
#window_settings{position:absolute;z-index:102;top:10%;left:10%;width:80%;height:80%;background:#fff;border-radius:8px;display:none;}
#window_stats{position:absolute;z-index:103;top:10%;left:10%;width:80%;height:80%;background:#fff;border-radius:8px;display:none;}
#window_credits{position:absolute;z-index:103;top:10%;left:10%;width:80%;height:80%;background:#fff;border-radius:8px;display:none;}
#window_info{position:absolute;z-index:104;top:10%;left:10%;width:80%;height:80%;background:#fff;border-radius:8px;}
.inner{overflow-y: scroll;max-width: 100%;max-height: 90%;margin:20px 0px 20px 20px;padding-right: 20px;}
.closewin{position:absolute;z-index:102;top:-15px;right:-15px;width:32px;height:32px;cursor:pointer;}
#tab_selected{position:absolute;z-index:103;bottom:60px;left:10px;width:42px;height:42px;cursor:pointer;display:none;}
#tab_selected span{display: none;}
#logo{position:absolute;z-index:98;top:60px;left:10px;width:42px;height:42px;cursor:pointer;}
.item{cursor:pointer;width:52px;display:inline-block;margin-right: 8px;vertical-align:middle;}
.item img{max-width:100%;}
.item span{color:#777;font-size: 0.8em;display:inline-block;padding:4px;text-align: center;}
#logo img, #closewin img, #tab_selected img{max-width:100%;height:auto;}
#itemlist{display:none;position:absolute;top:2%;left:2%;overflow:scroll;width:96%;height:96%;z-index:2017;background:#fff;}
.itemcontainer{float:left;margin-right:40px;min-height:230px;}
#cityimagewrapper{max-height:300px;max-width:100%;overflow: scroll;}
#musicplayer{display:block;}
#theMap{border:1px solid #aaa;margin:20px 0px;}
#ads{display:none;overflow:hidden;position:absolute;top:0px;left:50%;transform:translateX(-50%);width:100%;height:70px;max-height:70px;max-width:100%;z-index:99;}
#ads_mobile{overflow:hidden;position:absolute;top:0px;left:50%;transform:translateX(-50%);width:320px;height:50px;max-height:70px;max-width:100%;z-index:99;}
#downloadimage{display: none;}

@media screen and (max-width: 480px){
	/*#cursor img{display: none;}*/
}
@media screen and (min-width: 768px){
.item{cursor:pointer;width:76px;}
#ads{display:block;width:640px;height:80px;max-height:80px;}
#ads_mobile{display:none;}

#logo{top:10px;}
}