* {
  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;*/
}
select { font-size: 1.7em; }
label, input { font-size: 1.4em; }

.imgtbn {
  /* background-image: url(''); background-position: 0 0; background-blend-mode: multiply; width: 16px; height: 16px; */
  background-repeat: no-repeat;
  transform-origin: top left;
  transform: scale(3);
  image-rendering: optimizeSpeed;
  image-rendering: pixelated;
}
.imgtbnbg {
  background-color: #000; padding: 4px; float: left;
}
.imgmapcont {
  overflow: scroll; background-color: #000;
}

#edit-cblk-lab, #edit-cgrd-lab { margin: 4px 8px; float: left; font-size: 0.8em; }

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

#imgdcpan{ width: 300px; height: 250px; }
#scor-tabl{
  background: url(img/scoretable.png) no-repeat;
  width: 640px;
  height: 240px;
  margin: 0 auto;
  background-size: cover;
  image-rendering: optimizeSpeed;
  image-rendering: pixelated;
  padding: 0 1px;
  text-align: left;
  position: relative;
}
#scor-tabl pre{
  position: absolute;
  font-family: 'sysfnt0';
  font-size: 15.3pt;
}
#scor-tabl pre:nth-child(1){ top: -5px; left: 368px; }
#scor-tabl pre:nth-child(2){ top: -5px; left: 512px; }
#scor-tabl pre:nth-child(3){ top: 187px; left: 512px; }

.rightel{ float:right }

#cont-room-prjs{  height:200px; overflow: scroll; background-color: #eee; }
#list-cblk-swtc{  height:70px; overflow-x: scroll; white-space: nowrap; background-color: #eee; }
#cont-cblk-swtc{  display: none; }

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

    image-rendering: optimizeSpeed;
/*    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
*/
    image-rendering: pixelated;

    letter-spacing: 1px;

    width: 768px;
}

#pzle canvas, body > canvas {
  cursor:url('img/IMpointer.png'), auto;
}

#editorpal {
	width: 300px;
	height: 600px;
	position: absolute;
	top: 100px; left: 0;
	z-index: 1;
/* background-color: #c0c0c0;	display: none; */
}
#game-paws {
  padding-top: 150px;
}
#editorpal .storecont {
  min-height: 507px;
}
#editorpal .storecont button {
  margin: 0px;
  border: solid 1px #c0c0c0;
  padding: 4px 8px;
  font-size: 14px;
  min-width: 50px;
  min-height: 40px;
  background-color: #c0c0c0;
}
#cont-col1 p {
  margin: 4px;
}
#editorpal .storecont button:hover {
  background-color: #c0c0c0;
  color: inherit;
  border: solid 1px #000;
}
#editorpal .storecont label {
  font-size: 15px;
}
#editorpal .storecont label span{
  font-size: 16px;
  font-weight: bold;
}
#cont-palette div{
  width: 40px;
  height: 32px;
  float: left;
  border: 1px solid black;
  margin: 1px;
}
#cont-palette div:last-child{
  width: 82px;
}
#edit-col1-fg0 #cont-palette div:last-child,
#edit-col2-fg0 #cont-palette div:last-child,
#edit-col4-bg0 #cont-palette div:last-child,
#edit-col4-bg0 #cont-palette div:nth-child(4){
  display: none;
}

#editortools {
	width: 300px;
	height: 600px;
	position: absolute;
	top: 100px; right: 0;
	z-index: 1;
/* background-color: #c0c0c0;	display: none; */
}
#editortools button, #editorpal button  {
    padding: 4px 8px;
    margin: 4px;
}
#editorgrid {
    display: block;
    margin: auto;
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    width: 768px;
}

@font-face {
    font-family: 'sysfnt0';
    src: url('./res/Commodore-64-v6.3.ttf');
}

.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;
}

#editortools, #editorpal {
  z-index: 1;
  display: none;
}
#pzle, #game-over, #game-paws, #game-overlay, #game-title, #stage-end, #store, #menu {
	margin: auto;
	width: 768px;
	height: 576px;
	position: absolute;
	top: 100px; left: 0; right: 0;
	z-index: 1;
	display: none;
}
#pzle { width: 816px;  }
#pzle .storecont { background-color: #60a0d0; min-width: 816px; min-height: 300px;}
#pzle-trni { display: none; }
#pzle-xbut { display: none; } /* visible on mobile */
#game-over, #game-overlay {}

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

#game-over, #game-paws, #game-title, #stage-end, #store, #menu {
	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:296px; }

#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-color: 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-color: rgb(255,255,255,.5); border-radius: 3px;}
#dsbar {height: 4px; background-color: rgb(255,255,255); border-radius: 3px;}

@media (max-width: 768px) {
  .wrapper, body > canvas{ width:100%;}
   #pzle, #game-over, #game-paws, #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; }
  #pzle-xbut { display: block;}
  #pzle-cont canvas, #pzle .storecont { width:100%; min-width: 100%; }
}

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

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

button, .fsco {
  border-radius: 5px;
  background-color: #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, .selbut {
  transition: all 0.3s ease-in-out;
  background-color: #0ce853;
  border: solid 1px #fff;
  color: #fff;
}