body {
   background-color: #f4f4f4;
   font-family: "Segoe UI", Ubuntu, 'Helvetica Neue', sans-serif;
   line-height: 26px;
   font-size: 16px;
}

b {
   font-weight: 500;
}

h4 {
   font-size: 1.4em;
   margin-top: 1.5em;
}

a {
   font-weight: 500;
}

   a[data-toggle] h3 {
      cursor: pointer;
   }

   a[data-toggle]:hover {
      text-decoration: none;
   }

pre {
   overflow: auto;
   word-wrap: normal;
}

.jumbotron {
   background-color: #dee0e0;
}

   .jumbotron .lead {
      font-family: Ubuntu, "Segoe UI", 'Helvetica Neue', sans-serif;
   }

   .jumbotron p.frameworks {
      margin: -.5rem;
   }

   .jumbotron p > a {
      min-height: 6rem;
      margin: 1rem;
   }

.welcome .jumbotron {
   margin-top: 80px;
   background-color: white;
   padding-top: 32px;
   padding-bottom: 16px;
   text-align: center;
}

/*
 * Navigation Bar
 */

.nav-main.navbar {
   background-color: #f8f8f8;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 55px;
   z-index: 100;
   border-radius: 0;
   box-shadow: 0 0 8px 0 rgba(0,0,0,.2);
}

.navbar-circle {
   display: inline-block;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: #92d050;
   box-shadow: white 0px 0px 20px 0px;
}

.navbar-name {
   position: fixed;
   top: 16px;
   left: 40px;
}

.navbar-header {
   padding-top: 6px;
   padding-left: 0px;
}

.navbar-brand {
   color: black;
   font-weight: normal;
   font-size: x-large;
   font-family: ubuntu;
   text-shadow: 0px 0px 10px white;
}

.nav-footer.navbar {
   background-color: #ced0d0;
   bottom: 0;
   left: 0;
   margin-bottom: 0;
   width: 100%;
   z-index: 100;
}

.nav-footer .row {
   margin-top: 10px;
}

.links {
   margin-top: 14px;
}

@media (max-width: 768px) {
   pre {
      font-size: x-small;
      max-width: 290px;
   }

   body {
      line-height: 22px;
   }

   div.footer {
      width: 100%;
   }

   .debug-output .col-xs-5 {
      width: 44%;
      padding-left: 0;
      padding-right: 2px;
   }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
   pre {
      font-size: x-small;
   }

   body {
      font-family: 'Helvetica Neue', helvetica, sans-serif;
      line-height: 22px;
   }
}

/*
 * Headline
*/
hr.title {
   height: 1px;
   width: 70%;
   background-color: #685642;
   opacity: .3;
}

.headline {
   margin: 2.5em 0;
}

   .headline a {
      font-size: .7em;
      color: #685642;
   }

   .headline .navbar-circle {
      width: 8px;
      height: 8px;
      margin: 2px;
   }

:target:before {
   content: "";
   display: block;
   height: 100px; /* fixed header height*/
   margin: -100px 0 0; /* negative fixed header height */
}

.overview-title {
   color: #685642;
}

   .overview-title .navbar-circle {
      width: 8px;
      height: 8px;
      margin: 2px;
   }

/*
 * Main content
 */
#Top {
   height: 100%;
   position: fixed;
   overflow-y: scroll;
   transition: all ease-in .25s;
}

.panel-main.footer-shown #Top {
   height: calc( 80% - 50px);
}

.loader {
   left: 30%;
   top: 40%;
   position: absolute;
}

.main {
   margin-top: 50px;
}

.keyword {
   color: #ce4844;
   font-weight: bold;
}

.markup {
   font-weight: bold;
   font-family: Calibri;
}

#Panel {
   margin-bottom: 50px;
}

#Content {
   /*margin-bottom: 3em;*/
}

#ExampleButtons {
   display: none;
}

#NotesPanel {
   display: none;
   margin-bottom: 3em;
}

#Notes .panel-heading {
   padding-left: 0px;
}

.footer {
   position: fixed;
   bottom: -21%;
   height: 20%;
   width: 75%;
   padding: 0;
   background-color: white;
   color: black;
   box-shadow: rgba(0,0,0,.4) 0 0 10px 4px;
   text-align: left;
   font-size: 12px;
   transition: all ease-in .25s;
   word-wrap: break-word;
}

   .footer.footer-shown {
      bottom: 0;
   }

@media (min-width: 992px) {
   .footer {
      width: 83.33333333%;
   }
}

.debug-btn {
   position: absolute;
   top: 12px;
   right: 30px;
}

@media (max-width: 768px) {
   .debug-btn {
      position: relative;
      left: 10px;
      height: 40px;
   }
}

.debug-header {
   width: 100%;
   height: 22px;
   margin: 0;
   padding: 2px;
   background-color: #F0F0F0;
   border-bottom: 1px solid #e0e0e0;
   font-weight: bold;
   line-height: normal;
}

#ClearBtn {
   font-size: 11px;
   padding: 2px 6px;
   background-color: white;
   border-radius: 2px;
   cursor: pointer;
}

   #ClearBtn:hover {
      background-color: #E0E0E0;
   }

.debug-output {
   width: 100%;
   height: calc( 100% - 22px );
   overflow-x: hidden;
   overflow-y: scroll;
   line-height: 18px;
}

   .debug-output .row {
      margin: 0;
   }

      .debug-output .row:nth-of-type(2n) {
         background-color: #f5f5f5;
      }

      .debug-output .row .glyphicon-arrow-left {
         color: #a94442;
      }

      .debug-output .row .glyphicon-arrow-right {
         color: #31708f;
      }

.string {
   color: green;
}

.number {
   color: blue;
}

.boolean {
   color: blue;
}

.null {
   color: blue;
}

.key {
   color: black;
}

.noselect {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}

/*
 * Sidebar
 */

/* Hide for mobile, show later */
.sidebar {
   display: none;
}

   .sidebar .section {
      padding-left: 20px;
      padding-right: 20px;
      padding-top: 30px;
   }

   .sidebar li:nth-of-type(2n) {
      background-color: rgb(45,55,60);
   }

.section a {
   font-weight: normal;
}

.section-title {
   color: rgba(146,208,80,.8);
   cursor: pointer;
   text-transform: uppercase;
   padding-bottom: 10px;
}

   .section-title:hover {
      color: rgb(146,208,80);
   }

.section-bullet {
   color: rgba(255,205,0,.8);
   transform: scale(.5);
}

.section-desc {
   color: rgb(125,135,140);
   font-size: 12px;
   line-height: 16px;
   padding: 0px 20px 10px 36px;
}

.section-line {
   border-color: rgba(65,75,80,.8);
   margin: 10px -20px;
}

@media (min-device-width: 768px) {
   .sidebar {
      position: fixed;
      top: 52px;
      bottom: 0;
      left: 0;
      z-index: 1000;
      display: block;
      padding: 1px;
      overflow-x: hidden;
      overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
      background-color: rgb(40,50,55);
      border-right: 1px solid #eee;
   }
}

@media (max-device-width: 768px) {
   .headline a {
      font-size: .6em;
   }

   h3 {
      font-size: 20px;
   }

   hr.title,
   .headline,
   .nav-main .container-fluid .pull-right {
      display: none;
   }
}

/* Sidebar navigation */
.section .nav-sidebar {
   margin-right: -21px; /* 20px padding + 1px border */
   margin-bottom: 20px;
   margin-left: -20px;
}

   .section .nav-sidebar > li > a {
      padding-right: 20px;
      padding-left: 20px;
      color: #b8c7ce;
      font-size: small;
   }

      .section .nav-sidebar > li > a:hover {
         color: white;
         background-color: black;
      }

      .section .nav-active,
      .section .nav-sidebar > li > a:active,
      .section .nav-sidebar > li > a:focus {
         color: black !important;
         background-color: white !important;
      }

.copyright {
   color: white;
   opacity: .5;
   font-size: x-small;
   margin-left: 10px;
   line-height: normal;
}

.new {
   background-color: brown;
   color: white;
   font-size: xx-small;
   padding: 2px 3px;
   margin-left: 5px;
   border-radius: 2px;
}

/*
 * TreeView and GridView Styles
*/

.no-bullet li {
   list-style-type: none;
}

span.tree-indent {
   display: inline-block;
   width: 32px;
}

span.canExpand {
   color: #31b0d5;
}

span.tree-btn.btn-lg {
   padding: 8px 8px;
}

span.indent {
   display: inline-block;
   width: 24px;
}

span.canExpand {
   color: #31b0d5;
}

span.btn-lg {
   padding: 8px 4px;
}

.btn-md {
   padding: 4px;
   border-radius: 4px;
}

.carousel-cell {
    width: 100%;  
}

    .carousel-cell img {
        width: 65%;
        border-radius: 8px;
        box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
    }