/* on screen log **********************************************************************************************/
#onscreenlog {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 100;
  margin: 0px;
  padding: 5px;
}
#onscreenlog p {
  padding: 0px;
  margin: 0px;
  font-size: 12px;
}
/* dynamic information panels *****************************************************************************************/
.defaultpanels {
  background: #bbbbbb;
  background: rgba(187,187,187,0.80);
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
#bottomLeft {
  position: fixed;
  bottom: 40px;
  left:10px;
}
#coordinates p {
  padding: 2px;
  margin: 5px 10px 5px 10px;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
}
#helpbutton {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 20px;
  font-weight: bold;
  cursor:help;
  padding: 8px;
}
#urlinfo {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 100;
  margin: 0;
  width: 100%;
  background: #cccccc;
  background: rgba(204,204,204,0.60);
  padding: 3px;
}
#urlinfo p {
  padding: 0px;
  margin: 0px;
  font-family: "Lucida Console", "Courier New", Monospace;
  font-size: 14px;
}

/* middle of the screen **********************************************************************************************/
#crosshair {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -20px 0 0 -8px;
  width: 12px;
  height: 12px;
  background-color: #d00;
  opacity: 0.3;
  z-index: 100;
  border: 2px solid #333;
  /*height: 150px;
  width: 150px;*/
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
}
#actioninfo {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: 25px 0 0 25px;
  padding: 5px;
  /*width: 6px;
  height: 6px;*/
  background-color: #66d;
  opacity: 0.6;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  font-weight: bold;
  font-family: Helvetica, Arial, sans-serif;
}
#cooldown {
  position: fixed;
  top: 20px;
  left: 50%;
  margin: 0;
  transform: translate(-50%, 0);
  padding: 5px;
  /*width: 6px;
  height: 6px;*/
  background-color: #d33;
  opacity: 0.8;
  -moz-border-radius: 6px;
  -webkit-border-radius: 6px;
  border-radius: 6px;
  font-weight: bold;
  font-family: Helvetica, Arial, sans-serif;
}

/* navigation bar *****************************************************************************************/
nav.bar-tab {
  position: absolute;
  top: -55px;
  left: 0px;
  margin: 0px;
  padding: 0px;
}
nav.bar-tab ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav.bar-tab li {
  border: 1px solid #444;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  padding: 2px !important;
  margin: 0 0px 0 0;
  list-style: none;
  float: left;
  width: 40px !important;
  height: 35px !important;
  font-size: 80%;
  color: #ccc;
  /*text-shadow: 1px 1px 1px #333;*/
  box-shadow: 1px 1px 1px #333;
}
/*nav.bar-tab li.active {
  border: 3px solid #ffcc00;
}*/
nav.bar-tab a {
  color: #ccc;
  text-decoration: none;
}
nav.bar-tab li .tab-label {
  padding-top: 5px;
  font-size: 80%;
  text-align: right;
}
.tab-item {
  background: #222;
  background: rgba(34,34,34,0.80);
}
/**/
#palette ul li {
  margin: 5px;
  padding: 0;
}
/* palette bar *****************************************************************************************/
#palette {
  position: fixed;
  left: 50%;
  bottom: 50px;
  transform: translate(-50%, 0);
  margin: 0 auto;
  z-index: 100;
  background: #444;
  background: rgba(68,68,68,0.80);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

#palette ul {
  margin: 0;
  padding: 0;
  width: 354px;
}

#palette ul li {
  display: inline-block;
  margin: 5px 0px 5px 5px;
  padding: 0;
  width: 30px;
  /*min-height: 30px;*/
  height: 30px;
  /*background: #ccc;*/
  vertical-align: top;
  /* For IE 7 */
  zoom: 1;
  *display: inline;
}

#palette ul li img {
	width: 30px;
	height: 30px;
	border: 1px solid #000;
}

/* Hide elements for small screens */

/* Hide the palette */
@media only screen and (max-height: 500px) {
    #palette {
        display: none;
    }
}
@media only screen and (max-width: 550px) {
    #palette {
        display: none;
    }
}

/* tags and general text formats *******************************************************************************************/
/*http://www.jimmyscode.com/css-styling-for-kbd-tags/*/
kbd {
padding:0.1em 0.6em;
border:1px solid #ccc;
font-size:11px;
font-family:Arial,Helvetica,sans-serif;
background-color:#f7f7f7;
color:#333;
-moz-box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
-webkit-box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
box-shadow:0 1px 0px rgba(0, 0, 0, 0.2),0 0 0 2px #ffffff inset;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
display:inline-block;
margin:0 0.1em;
text-shadow:0 1px 0 #fff;
line-height:1.4;
white-space:nowrap;
}

/* container *****************************************************************************************************************/
#voxelcontainer {
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;
  user-select: none;
  height: 100vh;
  width: 100vw;
  margin:0;padding:0;
}
/* body **********************************************************************************************************************/
body { padding:0px; margin:0px; }