/*------------------------------*/
/*Fonts*/
/*------------------------------*/
@import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,400italic,700,700italic);
@import url(https://fonts.googleapis.com/css?family=Arial:400,300,700);
/*------------------------------*/
/*Variables*/
/*------------------------------*/
/*------------------------------*/
/*Default settings*/
/*------------------------------*/
body, head {
  margin: 0px;
  padding: 0px;
}

* {
  box-sizing: border-box;
  font-size: 18px;
  font-family: 'Arial';
}

/*------------------------------*/
/*Text styling*/
/*------------------------------*/
h1, h2, h3 {
  margin: 15px 0px 15px 0px;
  padding: 0px;
  font-family: 'Arial';
  font-weight: 300;
  letter-spacing: 2px;
}

h1 {
  font-size: 40px;
}

h2 {
  font-size: 30px;
}

h3 {
  font-size: 25px;
}

/*------------------------------*/
/*Default styling*/
/*------------------------------*/
button {
  padding: 15px;
  margin: 0px auto 15px;
  display: block;
  color: floralWhite;
  background: #2980b9;
  border: 2px solid #005858;
  border-radius: 31px;
  outline: none;
}
button:hover {
  background: #3498db;
  border: 2px solid #ff4704;
}
button:active {
  color: floralWhite;
  background: #ff4704;
  border: 2px solid #e93f00;
}

/*------------------------------*/
/*Navigation links*/
/*------------------------------*/
.nav-child {
  width: 250px;
  padding: 10px;
  display: inline-block;
  color: white;
  text-decoration: none;
}

.nav-text {
  margin: 15px 0px 15px 0px;
  font-weight: 700;
  font-family: 'Arial';
  text-align: center;
  letter-spacing: 5px;
}

.nav-link {
  border-left: 5px solid #005858;
  transition: all 0.3s;
  font-size: 1.0em;
}
.nav-link:hover {
  /*border-left: 9px solid #ff4704;*/
  border-color: #ff4704;
  background-color: #dff9fb;
  color: #ff7979;
}
.menu-selected {
  /*border-left: 9px solid #ff4704;*/
  border-color: #ff4704 !important;
  background-color: #dff9fb;
  color: #ff7979 !important;
}

/*------------------------------*/
/*Navigation & content*/
/*------------------------------*/
.nav-bar {
  width: 250px;
  overflow-y: auto;
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  z-index: -1;
  background: #3498db;
  background: -moz-linear-gradient(top, #3498db 0%, #2980b9 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, #3498db), color-stop(100%, #2980b9));
  background: -webkit-linear-gradient(top, #3498db 0%, #2980b9 100%);
  background: -o-linear-gradient(top, #3498db 0%, #2980b9 100%);
  background: -ms-linear-gradient(top, #3498db 0%, #2980b9 100%);
  background: linear-gradient(to bottom, #3498db 0%, #2980b9 100%);
}

.main-content {
  padding: 15px 45px 15px 45px;
  overflow-y: auto;
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 0;
  background: snow;
  transition: all 0.5s;
}
.main-content.open-nav {
  left: 250px;
}

/*------------------------------*/
/*Menu toggle button*/
/*------------------------------*/
.nav-btn {
  width: 50px;
  height: 50px;
  box-sizing: border-box;
  display: block;
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 999999;
  visibility: hidden;
}
.nav-btn span {
  display: block;
  position: absolute;
  top: calc(50px/2 - 5px/2);
  bottom: calc(50px/2 - 5px/2);
  left: calc((50px - 40px)/2);
  right: calc((50px - 40px)/2);
  background: #2980b9;
  transition: all 0s;
  transition-delay: 0.5s;
}
.nav-btn span::before, .nav-btn span::after {
  content: '';
  width: 100%;
  height: 5px;
  display: block;
  position: absolute;
  left: 0;
  background: #2980b9;
  transition-duration: 0.5s, 0.5s, 1s;
  transition-delay: 0.5s, 0s, 0s;
}
.nav-btn span::before {
  top: -14px;
  transition-property: top, transform, background;
}
.nav-btn span::after {
  bottom: -14px;
  transition-property: bottom, transform, background;
}
.nav-btn.nav-on span {
  background: none;
}
.nav-btn.nav-on span::before, .nav-btn.nav-on span::after {
  transition-delay: 0s, 0.5s, 0.5s;
}
.nav-btn.nav-on span::before {
  top: 0;
  transform: rotate(45deg);
  background: crimson;
}
.nav-btn.nav-on span::after {
  bottom: 0;
  transform: rotate(-45deg);
  background: crimson;
}

/*Greatly inspired by: http://callmenick.com/post/animating-css-only-hamburger-menu-icons*/
/*------------------------------*/
/*Code div*/
/*------------------------------*/
.code-block-container {
  width: 100%;
  height: auto;
  padding: 15px;
  margin: 0px;
  overflow-x: auto;
  background: #2980b9;
  border: 1px solid #005858;
  border-left: 5px solid #005858;
  display: block;
}

.code-block {
  margin: 0px;
  padding: 0px;
  color: floralWhite;
}

/*------------------------------*/
/*Iframe output*/
/*------------------------------*/
iframe.output {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  border: none;
}

/*------------------------------*/
/*Mobile*/
/*------------------------------*/
@media only screen and (max-width: 800px) {
  .nav-btn {
    visibility: visible;
  }

  .main-content.open-nav {
    left: 0px;
    transform: translate3d(250px, 0px, 0px);
  }
}

.sub-menu {
  border-left: 15px solid #005858;
  color: #c7ecee;
  font-size: 0.8em;
}