@font-face {
  font-family: 'Armata';
  src: url('../fonts/Armata-Regular.ttf');
}

body {
  margin: 0px;
  background-color: #bbbbbb;
  overflow: hidden;
  /*stops text from being selected when dragging mouse all over the place */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
}

#container {
  z-index: -1;
  position: absolute;
  left: 0px;
  top: 0px;
}

/*is removed onload using javascript */
#loadingPage {
  z-index: 200;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background-color: #000000;
  color: #DDDDDD;
  text-align: center;
  line-height: 300px;
  vertical-align: middle;
  font-size: 2em;
}

.hidden {
  display: none;
  z-index: -3;
}


/* message that webgl doesnt work, created by Detector.js */

#oldie {
  z-index: 300;
  position: absolute;
  left: 0px;
  top: 0px;
  font-family: monospace; 
  font-size: 13px; 
  text-align: center; 
  background: rgb(255, 255, 255) none repeat scroll 0% 0%; 
  color: rgb(0, 0, 0); 
  padding: 1.5em; 
  margin-top: 4em;
  width: 100%; 
  height: 100%; 
  text-shadow: none;
}

#oldie a {
  color: black;
}

/* 2d canvas overlay for things such as pop labels */

.overlay {
  z-index: 1;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
}

/* HUD overlay over everything else. includes menus and info boxes */

.hud {
  z-index: 2;
  opacity: 0.95;
  color: #fff; 
  background-color: #111;
  overflow-x: hidden; 
  font-family: 'Armata', sans-serif;
  width: 300px;
}

.hud a {
  color: #fff;
}

.hud h2 {
  display: inline;
  vertical-align: middle;
}

.leftHudCancel, .rightHudCancel {
  vertical-align: middle;
  float: right;
  /*prevent safari's overflow from covering img */
  padding-right: 15px;
}

/* HE POP menu ********************/

#rightHudContainer {
  z-index: 3;
  position: absolute;
  right: 0px;
  top: 0px;
  overflow: hidden;
  width: 300px;  
  height: 100%;
}

#rightHud {
  top: 0px;
  max-height: 100%;
}

#rightHudContainerTwo {
  z-index: 2;
  position: absolute;
  right: 300px;
  top: 0px;
  overflow: hidden;
  width: 300px;  
  height: 100%;
}

#rightHudTwo {
  top: 0px;
  max-height: 100%;
}

.popImage {
  width: 300px;
}

/*  Facilities menu *****************
 used to hide the scroll bar but still allow scrolling 
What we do is create a parent div that is the same width as the child
and then move the child over the width of its scroll bar.
the  scroll bar */
#leftHudContainer {
  z-index: 2;
  position: absolute;
  left: 0px;
  top: 0px;
  overflow: hidden;
  width: 300px;  
  height: 100%;
}


#leftHud {
  z-index: 4;
  top: 0px;
  max-height: 100%;
  overflow: hidden;
}

/* HE POP HUD ******************/

.strong {
  font-weight: bold;
}

.underline {
  text-decoration: underline;
}

/*  what to show selection menu ***********/

#whatToShowContainer {
  z-index: 10;
  position: absolute;
  left: 302px;
  bottom: 0px;
  overflow: hidden;
/* width changes using javascript to be responsive to window size*/  
  width: 600px; 
  height: 120px;
}

#whatToShow {
  height: 100%;
  width: 100%;
}

.toShow {
  display: inline-block;
  text-align: center;
/*  width: 24%; */
  padding: 4px;
  margin: 4px;
  font-size: 0.6em;
  vertical-align: top;
}

.toShow img {
  border: 1px solid #999999;
  max-width: 100%;
  max-height: 100%;
  background-color: #000000;
}

.zoom {
  float: right;
}

/* info icon box ***************/

#heLogoContainer {
  background-color: black;
  z-index: 10;
  position: absolute;
  bottom: 1px;
  right: 1px;
  overflow: hidden;
  width: 84px;
  height: 110px;
  border: white solid 1px;
}

.heLogo {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 4px;
}

#pdfLogoContainer {
  background-color: black;
  z-index: 10;
  position: absolute;
  bottom: 1px;
  right: 91px;
  overflow: hidden;
  width: 84px;
  height: 110px;
  border: white solid 1px;
}

.pdfLogo {
  height: 100%;
  width: 100%;
  overflow: hidden;
  padding: 4px;
}

/* paing icon **********/
#paintContainer {
  z-index: 4;
  position: absolute;
  left: 0px;
  top: 0px;
/*  overflow: hidden; */
  width: 34px;
  height: 34px;
  border: #f7f7f7 solid 1px;
}

#paintIcon {
  height: 100%;
  width: 100%;
/*  overflow: hidden; */
}

/**** paint controls ***/
#paintControlContainer {
  z-index: 4;
  position: absolute;
  left: 64px;
  top: 0px;
/*  overflow: hidden; */
/*  width: 900px; */
  height: 36px;
  line-height: 36px;
}

#paintControl {
  height: 36px;
  width: 100%;
  overflow: visible; 
  background-color: transparent;
}

.paintButton {
  background-color: #000000;
  height: 100%;
  border: #f7f7f7 solid 1px;
  padding: 4px 4px;
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000; 
}

#cancelColor img{
  vertical-align: middle;
  height: 80%;
}

.selectedColorButton {
  border-color: #ff0000;
}

/*border is around images even though click is on container */
#whatToShow .selectedColorButton img{
  border-color: #ff0000;
}

.onTopRight {
  z-index: 10;
}

.onTopLeft {
  z-index: 9;
}

/* color picker **********/
#picker {
  z-index: 4;
  width: 200px;
  height: 200px;
  position: absolute;
  top: 84px;
  left: 38px;
  /* initially has no background color of its own */
  background-color: #ff0000;
  border: 1px solid #999999;
}

#slider {
  z-index: 4;
  width: 30px;
  height: 200px;
  position: absolute;
  top: 84px;
  left: 246px;
  border: 1px solid #999999;
}

#resetInfo {
  text-align: center;
  z-index: 4;
  position: absolute;
  top: 400px;
  left: 520px;
  overflow: visible;
  padding: 1em;
  border: 1px solid #999999;
}

#yesNoQuestion {
  margin-bottom: 1em;
  display: inline-block;
}

/* view buttons */
#viewContainer {
  z-index: 4;
  position: absolute;
  left: 0px;
  top: 42px;
  width: 34px;
  height: 34px;
  border: #f7f7f7 solid 1px;
}

#viewIcon {
  height: 100%;
  width: 100%;
}

#viewControlContainer {
  z-index: 4;
  position: absolute;
  left: 64px;
  top: 42px;
  height: 36px;
  line-height: 36px;
}

#viewControl {
  height: 36px;
  width: 100%;
  overflow: visible; 
  background-color: transparent;
}

#cancelView img{
  vertical-align: middle;
  height: 80%;
}

.selectedViewButton {
  border-color: red;
  color: red;
}