/* General styling */
html, body {
  height: 100%;
  margin: 0;
}
body {
  background-color: #fff;
  font-family: sans-serif;
  overflow: hidden;
}
h1 {
  font-weight: normal;
  font-size: 140%;
}
table {
  height: 100%;
  width: 100%;
}

#helpButton {
  background-color: #7FB800;
  padding: 10px;
  text-decoration: none;
  color: #FFFFFF;
}
/* End general styling */

/* Make the menu width 50% so it covers the sim */
.side-nav {
  width: 50% !important;
}

/* Begin block category styling */
.blocklyTreeRoot {
  padding: 0px !important;
}

/* This controls the category item height */
div[role='treeitem'] {
  height: 42px !important;
  line-height: 20px !important;
}

div#blocklyArea {
  float: left;
  width: 50%;
  height: 100%;
}

div#blocklyArea.half {
  width: 55% !important;
}

div#blocklyArea.full {
  width: 100% !important;
}

div#codeView {
  background: #E7E7E8;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1;
  width: 45%;
  padding: 10px;
  font-family: monospace;
  height: 100%;
  overflow: auto;
}

div#codeView.hidden {
  display: none;
}

div#codeView.visible {
  display: block;
}

/* Material CSS stuff */
a#hamburger {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 2;
}

div#missionTitle {
  position: absolute;
  top: 12px;
  right: 50px;
  z-index: 2;
}

/* override medium size for hamburger icon */
i.medium {
  font-size: 3rem !important;
}
/* end material css */

/* Tabs */
#tab-container {
  width: 0px;
  position: absolute;
  transition: 0.5s;
}

#add-new-tab {
  display: none;
}

#mission-tabs {
  width: 100% !important;
}
/* End tabs */

/* Sim sidebar */
.sidebar {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 50px;
  left: 0;
  background-color: #FFF;
  overflow-x: hidden;
  transition: 0.5s;
}

.openbtn {
  position: absolute;
  font-size: 20px;
  cursor: pointer;
  background-color: #111;
  color: white;
  padding: 10px 15px;
  border: none;
}

.openbtn:hover {
  background-color: #444;
}
/* End sim sidebar */

/* Unity */
#unity-container {
  position: absolute;
  transition: margin-left .5s;
  width: 100%;
  height: 100vh;
}

#unity-canvas { 
  background: #231F20
}

#unity-loading-bar { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none }
#unity-progress-bar-empty { width: 141px; height: 18px; margin-top: 10px; background: url('../images/progress-bar-empty-dark.png') no-repeat center }
#unity-progress-bar-full { width: 0%; height: 18px; margin-top: 10px; background: url('../images/progress-bar-full-dark.png') no-repeat center }
#unity-progress-bar-label 
{ 
    position: relative;
    font-size: 36px;
    color: white;
    text-align: center;
    font-family: sans-serif;
}
/* End Unity */