/*html, body {
    width: 100%; height: 100%;
    overflow: hidden;
}*/
html { overflow: hidden; width: 100%; height: 100%;}
body {
	position: relative;
	width: 100%; height: 100%;
	background-color: #fff;
	overflow: hidden;
	margin: 0;
	font-size: 14px;
	font-family: "Helvetica Neue", Helvetica;
}

.hidden { opacity: 0; }

#menuBar {
	position: relative;
	background-color: #990000;
	width: 100%; height: 4%;
	border-bottom: 1px solid #555;
	z-index: 3;
}

#menuBar img{
	height: 100%;
}

#menuBar nav {
	position: absolute; right:0.2em; bottom: 0;
	color: #eee; font-weight: 700;
}

#menuBar nav li {
	cursor: pointer;
}

#menuBar nav li:hover {
	text-decoration: underline;
}

#menuBar ol { margin: 0; }
#menuBar ol li { display: inline-block; }

#geographicalView {
	background-image: url(../images/bedge_grunge.png);
	position: relative;
	height: 96%; width: 100%;
	overflow-y : auto;
}

#gmapOverlay {
  position: absolute; left: 0; top: 0;
  width: 100%; height: 100%;
}
#gmapOverlay.suppressed {
  z-index: -1;
}


#geographicalContainer {
	display: inline-block;
	width: 76%; height: 99%; margin: 0.3em 0;
	position: absolute; left: 14%; top: 0;
  overflow: auto;
}

#geographicalContainer.hidden {
  opacity: 0; display: none;
}

.buildingContainer {
  position: relative; width: 99%;
}

.buildingContainer img{
	width : 100%;
	border-radius: 2px;
	border: 1px solid #888;
	opacity: 0.95;
	/*box-shadow: 1px 0px 6px 1px #888;*/
	/*border: 2px solid #000;*/
}

.buildingContainer .buildingCloseBtn, .buildingContainer .heatmapToggleBtn {
  cursor: pointer;
  z-index: 9;
  opacity: 0.7;
}

.buildingContainer .buildingCloseBtn:hover, .buildingContainer .heatmapToggleBtn:hover {
  opacity: 1;
}

.buildingContainer .buildingCloseBtn {
  position: absolute; right: 0.8em; top: 0.8em;
  font-weight: 700; font-size: 1.2em;
}

.buildingContainer .heatmapToggleBtn {
  position: absolute; right: 3em; top: 1.1em;
  text-decoration: underline;
}

.devicemap, .heatmap {
  width: 100%;
  position: absolute;
}

.devicemap {
  z-index : 3;
}

.heatmap {
  z-index : 5;
}

.heatmap.hidden {
  display: none;
}

.heatmap canvas {
  width: 100%; height: 100%;
}

.floorNode {
	position: absolute;
	display: inline-block;
	cursor: pointer;
	font-weight: 700;
	/*width: 1em; height: 1em;*/
}
.floorNode.highlighted .nodeBlock{
  border: 2px solid #111;
  box-shadow: 0 0 6px 1px #666;
}

.nodeBlock {
	width: 1em; height: 1em;
    border: 1px solid #111;
	background-color: #666;
}
.nodeBlock.goodBlock { background-color: steelBlue; }
.nodeBlock.avgBlock { background-color: khaki; }
.nodeBlock.badBlock { background-color: red; }

.floorNode .hoverBlock {
  background-color: #111; color:#fff; width: 0;
  padding: 0.1em; margin-top: 0.1em; opacity: 0;
}
.floorNode:hover .hoverBlock { opacity: 0.85; width: auto;}


#logView {
    position: absolute; right: 0; bottom: 0;
    width : 100%; height : 200px; z-index: 3;
    color: #fff; background-color: #000; opacity: 0.8;
    overflow-y: auto;
    transition: all 300ms ease;
}
#logView.hidden { opacity: 0; height: 0;}

#apiView {
    position: absolute;
    top: 0;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    background-color: #FFFFFF;
    color: #fff;
    opacity: 1.0;
    transition: all 300ms ease;
    overflow: auto;
}
#apiView.hidden {
    opacity: 0;
    height: 0;
}

#apiImages {
    top: 5%;
    height: 100%;
    position: relative;
    text-align: center;
    margin-left: 0;
    width: 100%; height: 100%;
    overflow: auto;
    bottom: 10%;
    min-width: 700px; /* prevent auto-resizing from pushing div around too far */
}
#apiImages img {
    width: 100%;
}

/* dark gray div at very top, contains title of page */
#api-description {
    top: 0;
    width: 100%;
    background-color: #1A1A1A;
    border-bottom-style: solid;
    border-bottom-width: medium;
    border-bottom-color: #3D3D3D;
    height: 10%;
    text-align: left;
    min-width: 700px;
    word-wrap:break-word
    display: block;
}
.apidescriptiontitle {
    font-size: 2em;
    text-indent: 1em;
    padding-top: 1%;
}

#api-description-text-div {
    display: block;
    text-align: left;
}
#api-description-text-p.apidescriptiontext {
    text-decoration: none;
    font-size: 1.3em;
    margin: 0 auto; /* auto center */
    width: 850px; /* set width auto breaks text */
    text-align: justify;
    color: #4A4A4A; /* set text color */
    padding-bottom: 3%;
}

/* div that contains all the api functions and their expansions */
.apicontainer {
    margin-bottom: 2%;
    overflow: hidden;
    white-space: nowrap;
    float: left;
    min-width: 650px;
    width: 65%;
    margin-left: 10%;
}

/* individual function status boxes
 * '#' - css id string
 * '.' - css class string, appends a class on to rest of identifier (if any) 
 *       styles all html tags with class identifier listed */
.api {
    width: 60%;
    margin-bottom: 2%;
    text-align: left;
    height: 9%;
    background-color: #339933;
    border-radius: 0.3em; /* rounded div corners */
    white-space: nowrap;
    overflow: hidden;
}
/* api failed-api-test is within class description */
.api.failed-api-test {
    background-color: #CD2626;
}
.api.clicked {
    box-shadow: inset 0 0 1.5em #006400;
    font-weight: bold;
}
.api.clicked.failed-api-test {
    box-shadow: inset 0 0 1.5em #8B0000;
    font-weight: bold;
}
.apitext {
    text-indent: 1em;
    font-size: 1.2em;
}

/* expanded api data div, contains text in <p> */
.api-expansion {
    background-color: #000000;
    width: 400px;
    min-width: 40%;
    height: 600px;
    border-radius: 0.3em;
    text-align: left;
    word-wrap: break-word;
    opacity: 1.0;
    margin-left: 50%;
    /*left: 50%; [> left side "margin" of off float <]*/
    float: left; /* put divs side by side at same level. */
    position: absolute; /* allow for tags to overlap on screen. this way, 
                  all the api expansion divs overlap each other at the
                  same position on the same level, but only one can be 
                  seen at a time due to opacity*/
    background-color: #000000;
}
.api-expansion.hidden {
    opacity: 0;
}

/* paragraph that contains more detailed api */
.api-expansiontext {
    font-size: 1em;
    text-decoration: none;
    text-align: left;
    color: #FFFFFF; /* set text color */
    margin-left: 5%; /* all text in expansion has a left side margin */
    margin-right: 5%; /* all text in expansion has a right side margin */
}