* {
  box-sizing: border-box;
}
html, body {
  /* height: 100%; */
}
body {
  background: rgb(0, 116, 217);
  font-family: Nunito, Arial, sans-serif;
  color: #fff;
  /* min-height: 100%;  min-width: 600px;*/
  font-size: 12px;

  margin:0;

  /* no page drag? */
  overflow: hidden;
}

.thmb img{ width: 18%; margin: 5px; border-radius: 3px; }
.thmb {max-width: 600px; margin: 0 auto;}

#imgdcpan{ width: 300px; height: 250px; }

.rightel{ float:right }

/* canvas{ width:600px; height:500px;} */
canvas {
    display: block;
    margin: auto;
/*    position: absolute;
    top: 110px; */
    left: 0;
    right: 0;
}

.wrapper {
    width: 600px;
    margin: 0 auto;
}

#instructions {
    float: left;
    color: #757575;
}

#score {
	/* float: right; */
	color: white;
	font-size: 1.6em;
	text-align: center;
}
#score div {
  vertical-align: middle;
}
.ammdisp, .ducdisp {
	margin-right: 1em;
	font-size:1.1em;
}
.key {
    color: #aaffdd;
}

#game-over, #game-overlay, #game-title, #stage-end, #store, #menu {
	margin: auto;
	width: 600px;
	height: 500px;
	position: absolute;
	top: 108px; ;left: 0; right: 0;
	z-index: 1;
	display: none;
}
#game-over, #game-overlay {}

#game-overlay {
	background-color: black;
	opacity: .5;
}

#game-over, #game-title, #stage-end, #store, #menu {
	height: 500px;
	text-align: center;
	color: white;
}
#collpan { font-size: 1.2em; }

#store, #menu { padding: 16px; background-color: rgba(0, 116, 217, .7); }
#store h1 {color: #000;}
.storecont {background-color: #fff;border-radius: 16px;color: #000; padding: 8px; min-height: 400px;}
#itemscont {height: 300px; padding: 0 16px; overflow-y: scroll;}
.itemicon { position: absolute; left: 10px; width: 50px; height: 50px; top: 4px; }
.itemslot { position: relative; height: 60px; border-bottom: 1px solid rgb(0,0,0,.1); }
.itemtitle { top: 16px; left: 70px; position: absolute; font-weight: bold; font-size: 1.2em; }
.itemslot button { position: absolute; top: -2px; }
.owned { right: 140px; position: absolute; top: 20px; color: rgb(0,0,0,.5); font-size: 1.3em; }

#menu p { font-size: 1.3em; }
#menu .storecont button { margin: 0 4px; }
.homebuts { z-index:2; position:absolute; width:100%; top:160px; }
.morehomebuts { margin-top:150px; }

#scorescont {height: 300px; padding: 0 16px; overflow-y: scroll;}

table { width: 100%; border-collapse: collapse; border-spacing: 0; }
td {font-size:1.6em; padding:0;  vertical-align: middle !important; border-top: 1px solid #ddd;}
table tr td:nth-child(1) { color: #888; text-align: center; }
table tr td:nth-child(2) { font-weight:bold; text-align: center; }
table tr td:nth-child(3) { width:80px !important;}
table tr td:nth-child(4) { text-align: left;}
a {
    color: #0074d9;
    text-decoration: none;
}
a:hover {
    color: #0d8eff;
}
a:focus, a:hover {
    color: #23527c;
    text-decoration: underline;
}


/*table tr:nth-child(1) { background: linear-gradient(45deg,  rgba(255,220,80,0.6) 0%,rgba(255,255,255,1) 56%,rgba(252,235,0,0.8) 96%); }
table tr:nth-child(2) { background: linear-gradient(45deg,  rgba(232,232,232,0.6) 0%,rgba(255,255,255,1) 56%,rgba(160,160,160,1) 96%); }
table tr:nth-child(3) { background: linear-gradient(45deg,  rgba(223,182,103,0.6) 0%,rgba(249,243,232,1) 56%,rgba(231,192,116,0.8) 96%); }
*/
.avatar {
    padding: 1px;
    border: 1px solid #c0c0c0;
    border-radius: 5px;
    background: #fff;
}

.prog {
    display: inline-block;
    width: 100px;
    height: 36px;
    border-radius: 18px;
    background: rgb(00,255,0);
    padding:10px;
}
.ress {
    background-color: #fff;
    border-radius: 8px;
    width: 100%;
    height: 16px;
    /* transition: width;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(.36,.55,.63,.48); */
}
.shad {
    box-shadow: 0px 16px 16px rgba(0, 0, 0, 0.2);
}
#dscont {margin-top: 3px; width:100%; /*600px;*/ height: 4px; background: rgb(255,255,255,.5); border-radius: 3px;}
#dsbar {height: 4px; background: rgb(255,255,255); border-radius: 3px;}

@media (max-width: 600px) {
  .wrapper, canvas{ width:100%;}
   #game-over, #game-overlay, #game-title, #stage-end, #store, #menu{ width:100%; font-size: .8em}
   #score{ font-size: 1.2em}
  .thmb img { width: 23%; margin: 2px;}
  #itemscont { padding:0;}
  .homebuts { top:100px; }
  .morehomebuts { margin-top:90px; }
  button { padding: 8px; }
}

/* .wrap {
  position: relative;
  height: 100%;
  min-height: 360px;
  padding-bottom: 20px;
  overflow: hidden;
}*/

hr { border: 0; height: 1px; background: #fff; background-image: linear-gradient(to right, #00f, #fff, #0ff); }

button, .fsco {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -khtml-border-radius: 5px;
  background: #fff;
  color: rgb(0, 116, 217);
  border: solid 1px #fff;
  text-decoration: none;
  margin: 10px;
  outline: none;
  font-family: Nunito, Arial, sans-serif;
  padding: 2px 12px;
}
button {
  cursor: pointer;
  font-size: 1.6em;
  padding: 8px 20px;
}
button:hover {
  transition: all 0.3s ease-in-out;
  background: #0ce853;
  border: solid 1px #fff;
  color: #fff;
}