/* 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 */

/* 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: 100%;
  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: 20px;
  z-index: 2;
}

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

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

/* This is to prevent the material css conflict with blockly's input fields */
/*
.blocklyHtmlInput {
  border: none !important;
  border-radius: 4px !important;
  font-family: sans-serif !important;
  height: 100% !important;
  margin: 0 !important;
  outline: none !important;
  padding: 0 1px !important;
  width: 100% !important;
}
*/