/* Add additional stylesheets below

-------------------------------------------------- */

/*

  Bootstrap's documentation styles

  Special styles for presenting Bootstrap's documentation and examples

*/

/* Body and structure

-------------------------------------------------- */

body {

  position: relative;

  padding-top: 90px;

  background-color: #fff;

  /*background-image: url(../img/grid-18px-masked.png);*/

  background-repeat: repeat-x;

  background-position: 0 40px;

}

/* Tweak navbar brand link to be super sleek

-------------------------------------------------- */

.navbar-fixed-top .brand {

  padding-right: 0;

  padding-left: 0;

  margin-right: 20px;

  margin-left: 0px;

  float: left;

  font-weight: bold;

  color: #ffffff;

 /* text-shadow: 0 1px 0 rgba(255,255,255,.1), 0 0 30px rgba(255,255,255,.125);*/

  -webkit-transition: all .2s linear;

     -moz-transition: all .2s linear;

          transition: all .2s linear;

}

.navbar-fixed-top .brand:hover {

  text-decoration: none;

}

.navbar-fixed-top .krik {
    background: #F4F4F4;   
    height: 35px;
    padding-top: 10px; 
}
.navbar-fixed-top .krik .container {
    padding-left: 18px;
    
}

/* Space out sub-sections more

-------------------------------------------------- */

section {

  padding-top: 60px;

}

/* Faded out hr */

hr.soften {

  height: 1px;

  margin: 54px 0;

  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));

  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));

  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));

  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));

  border: 0;

}

/* Jumbotrons

-------------------------------------------------- */

.jumbotron {

  position: relative;

}

.jumbotron h1 {

  margin-bottom: 9px;

  font-size: 65px;

  font-weight: bold;

  letter-spacing: -1px;

  line-height: 1;

}

.jumbotron p {

  margin-bottom: 18px;

  font-weight: 300;

}

.jumbotron .btn-large {

  font-size: 20px;

  font-weight: normal;

  padding: 14px 24px;

  margin-right: 10px;

  -webkit-border-radius: 6px;

     -moz-border-radius: 6px;

          border-radius: 6px;

}

.jumbotron .btn-large small {

  font-size: 14px;

}

/* Masthead (docs home) */

.masthead {

  padding-top: 36px;

  margin-bottom: 72px;

}

.masthead h1,

.masthead p {

  text-align: center;

}

.masthead h1 {

  margin-bottom: 18px;

}

.masthead p {

  margin-left: 5%;

  margin-right: 5%;

  font-size: 30px;

  line-height: 36px;

}

/* Specific jumbotrons

------------------------- */

/* supporting docs pages */

.subhead {

  padding-bottom: 0;

  margin-bottom: 9px;

}

.subhead h1 {

  font-size: 54px;

}

/* Subnav */

.subnav {

  width: 100%;

  height: 36px;

  background-color: #eeeeee; /* Old browsers */

  background-repeat: repeat-x; /* Repeat the gradient */

  background-image: -moz-linear-gradient(top, #f5f5f5 0%, #eeeeee 100%); /* FF3.6+ */

  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#eeeeee)); /* Chrome,Safari4+ */

  background-image: -webkit-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Chrome 10+,Safari 5.1+ */

  background-image: -ms-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* IE10+ */

  background-image: -o-linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* Opera 11.10+ */

  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#eeeeee',GradientType=0 ); /* IE6-9 */

  background-image: linear-gradient(top, #f5f5f5 0%,#eeeeee 100%); /* W3C */

  border: 1px solid #e5e5e5;

  -webkit-border-radius: 4px;

     -moz-border-radius: 4px;

          border-radius: 4px;

}

.subnav .nav {

  margin-bottom: 0;

}

.subnav .nav > li > a {

  margin: 0;

  padding-top:    11px;

  padding-bottom: 11px;

  border-left: 1px solid #f5f5f5;

  border-right: 1px solid #e5e5e5;

  -webkit-border-radius: 0;

     -moz-border-radius: 0;

          border-radius: 0;

}
.nav > li.hide {
    display: none;
}
.subnav .nav > .active > a,

.subnav .nav > .active > a:hover {

  padding-left: 13px;

  color: #777;

  background-color: #e9e9e9;

  border-right-color: #ddd;

  border-left: 0;

  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);

     -moz-box-shadow: inset 0 3px 5px rgba(0,0,0,.05);

          box-shadow: inset 0 3px 5px rgba(0,0,0,.05);

}

.subnav .nav > .active > a .caret,

.subnav .nav > .active > a:hover .caret {

  border-top-color: #777;

}

.subnav .nav > li:first-child > a,

.subnav .nav > li:first-child > a:hover {

  border-left: 0;

  padding-left: 12px;

  -webkit-border-radius: 4px 0 0 4px;

     -moz-border-radius: 4px 0 0 4px;

          border-radius: 4px 0 0 4px;

}

.subnav .nav > li:last-child > a {

  border-right: 0;

}

.subnav .dropdown-menu {

  -webkit-border-radius: 0 0 4px 4px;

     -moz-border-radius: 0 0 4px 4px;

          border-radius: 0 0 4px 4px;

}

/* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */

@media (min-width: 980px) {

  .subnav-fixed {

    position: fixed;

    top: 40px;

    left: 0;

    right: 0;

    z-index: 1020; /* 10 less than .navbar-fixed to prevent any overlap */

    border-color: #d5d5d5;

    border-width: 0 0 1px; /* drop the border on the fixed edges */

    -webkit-border-radius: 0;

       -moz-border-radius: 0;

            border-radius: 0;

    -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);

       -moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);

            box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0,0,0,.1);

    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); /* IE6-9 */

  }

  .subnav-fixed .nav {

    width: 938px;

    margin: 0 auto;

    padding: 0 1px;

  }

  .subnav .nav > li:first-child > a,

  .subnav .nav > li:first-child > a:hover {

    -webkit-border-radius: 0;

       -moz-border-radius: 0;

            border-radius: 0;

  }

  .masthead {

    padding-top: 20px;

	margin-bottom: 40px;

  }

}

/* Quick links

-------------------------------------------------- */

.bs-links {

  margin: 36px 0;

}

.quick-links {

  min-height: 30px;

  margin: 0;

  padding: 5px 20px;

  list-style: none;

  text-align: center;

  overflow: hidden;

}

.quick-links:first-child {

  min-height: 0;

}

.quick-links li {

  display: inline;

  margin: 0 5px;

  color: #999;

}

.quick-links .github-btn,

.quick-links .tweet-btn,

.quick-links .follow-btn {

  position: relative;

  top: 5px;

}

/* Marketing section of Overview

-------------------------------------------------- */

.marketing .row {

  margin-bottom: 9px;

}

.marketing h1 {

  margin: 36px 0 27px;

  font-size: 40px;

  font-weight: 300;

  text-align: center;

}

.marketing h2,

.marketing h3 {

  font-weight: 300;

}

.marketing h2 {

  font-size: 22px;

}

.marketing p {

  margin-right: 10px;

}

.marketing .bs-icon {

  float: left;

  margin: 7px 10px 0 0;

  opacity: .8;

}

.marketing .small-bs-icon {

  float: left;

  margin: 4px 5px 0 0;

}

/* Footer

-------------------------------------------------- */

.footer {

  margin-top: 45px;

  padding: 35px 0 36px;

  border-top: 1px solid #e5e5e5;

}

.footer p {

  margin-bottom: 0;

  color: #555;

}

/* Special grid styles

-------------------------------------------------- */

.show-grid {

  margin-top: 10px;

  margin-bottom: 20px;

}

.show-grid [class*="span"] {

  background-color: #eee;

  text-align: center;

  -webkit-border-radius: 3px;

     -moz-border-radius: 3px;

          border-radius: 3px;

  min-height: 30px;

  line-height: 30px;

}

.show-grid:hover [class*="span"] {

  background: #ddd;

}

.show-grid .show-grid {

  margin-top: 0;

  margin-bottom: 0;

}

.show-grid .show-grid [class*="span"] {

  background-color: #ccc;

}

/* Render mini layout previews

-------------------------------------------------- */

.mini-layout {

  border: 1px solid #ddd;

  -webkit-border-radius: 6px;

     -moz-border-radius: 6px;

          border-radius: 6px;

  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.075);

     -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075);

          box-shadow: 0 1px 2px rgba(0,0,0,.075);

}

.mini-layout {

  height: 240px;

  margin-bottom: 20px;

  padding: 9px;

}

.mini-layout div {

  -webkit-border-radius: 3px;

     -moz-border-radius: 3px;

          border-radius: 3px;

}

.mini-layout .mini-layout-body {

  background-color: #dceaf4;

  margin: 0 auto;

  width: 70%;

  height: 240px;

}

.mini-layout.fluid .mini-layout-sidebar,

.mini-layout.fluid .mini-layout-header,

.mini-layout.fluid .mini-layout-body {

  float: left;

}

.mini-layout.fluid .mini-layout-sidebar {

  background-color: #bbd8e9;

  width: 20%;

  height: 240px;

}

.mini-layout.fluid .mini-layout-body {

  width: 77.5%;

  margin-left: 2.5%;

}

/* Popover docs

-------------------------------------------------- */

.popover-well {

  min-height: 160px;

}

.popover-well .popover {

  display: block;

}

.popover-well .popover-wrapper {

  width: 50%;

  height: 160px;

  float: left;

  margin-left: 55px;

  position: relative;

}

.popover-well .popover-menu-wrapper {

  height: 80px;

}

.large-bird {

  margin: 5px 0 0 310px;

  opacity: .1;

}

/* Download page

-------------------------------------------------- */

.download .page-header {

  margin-top: 36px;

}

.page-header .toggle-all {

  margin-top: 5px;

}

/* Space out h3s when following a section */

.download h3 {

  margin-bottom: 5px;

}

.download-builder input + h3,

.download-builder .checkbox + h3 {

  margin-top: 9px;

}

/* Fields for variables */

.download-builder input[type=text] {

  margin-bottom: 9px;

  font-family: Menlo, Monaco, "Courier New", monospace;

  font-size: 12px;

  color: #d14;

}

.download-builder input[type=text]:focus {

  background-color: #fff;

}

/* Custom, larger checkbox labels */

.download .checkbox {

  padding: 6px 10px 6px 25px;

  color: #555;

  background-color: #f9f9f9;

  -webkit-border-radius: 3px;

     -moz-border-radius: 3px;

          border-radius: 3px;

  cursor: pointer;

}

.download .checkbox:hover {

  color: #333;

  background-color: #f5f5f5;

}

.download .checkbox small {

  font-size: 12px;

  color: #777;

}

/* Variables section */

#variables label {

  margin-bottom: 0;

}

/* Giant download button */

.download-btn {

  margin: 36px 0 108px;

}

#download p,

#download h4 {

  max-width: 50%;

  margin: 0 auto;

  color: #999;

  text-align: center;

}

#download h4 {

  margin-bottom: 0;

}

#download p {

  margin-bottom: 18px;

}

.download-btn .btn {

  display: block;

  width: auto;

  padding: 19px 24px;

  margin-bottom: 27px;

  font-size: 30px;

  line-height: 1;

  text-align: center;

  -webkit-border-radius: 6px;

     -moz-border-radius: 6px;

          border-radius: 6px;

}

/* Color swatches on LESS docs page

-------------------------------------------------- */

/* Sets the width of the td */

.swatch-col {

  width: 30px;

}

/* Le swatch */

.swatch {

  display: inline-block;

  width: 30px;

  height: 20px;

  margin: -6px 0;

  -webkit-border-radius: 3px;

     -moz-border-radius: 3px;

          border-radius: 3px;

}

/* For white swatches, give a border */

.swatch-bordered {

  width: 28px;

  height: 18px;

  border: 1px solid #eee;

}

/* Misc

-------------------------------------------------- */

img {

  max-width: 100%;

}

/* Make tables spaced out a bit more */

h2 + table,

h3 + table,

h4 + table,

h2 + .row {

  margin-top: 5px;

}

/* Example sites showcase */

.example-sites img {

  max-width: 100%;

  margin: 0 auto;

}

.marketing-byline {

  margin: -18px 0 27px;

  font-size: 18px;

  font-weight: 300;

  line-height: 24px;

  color: #999;

  text-align: center;

}

.scrollspy-example {

  height: 200px;

  overflow: auto;

  position: relative;

}

/* Remove bottom margin on example forms in wells */

form.well {

  padding: 14px;

}

/* Tighten up spacing */

.well hr {

  margin: 18px 0;

}

/* Fake the :focus state to demo it */

.focused {

  border-color: rgba(82,168,236,.8);

  -webkit-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);

     -moz-box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);

          box-shadow: inset 0 1px 3px rgba(0,0,0,.1), 0 0 8px rgba(82,168,236,.6);

  outline: 0;

}

/* For input sizes, make them display block */

.docs-input-sizes select,

.docs-input-sizes input[type=text] {

  display: block;

  margin-bottom: 9px;

}

/* Icons

------------------------- */

.the-icons {

  margin-left: 0;

  list-style: none;

}

.the-icons i:hover {

  background-color: rgba(255,0,0,.25);

}

/* Eaxmples page

------------------------- */

.bootstrap-examples .thumbnail {

  margin-bottom: 9px;

  background-color: #fff;

}

/* Responsive table

------------------------- */

.responsive-utilities th small {

  display: block;

  font-weight: normal;

  color: #999;

}

.responsive-utilities tbody th {

  font-weight: normal;

}

.responsive-utilities td {

  text-align: center;

}

.responsive-utilities td.is-visible {

  color: #468847;

  background-color: #dff0d8 !important;

}

.responsive-utilities td.is-hidden {

  color: #ccc;

  background-color: #f9f9f9 !important;

}

/* Responsive tests

------------------------- */

.responsive-utilities-test {

  margin-top: 5px;

  margin-left: 0;

  list-style: none;

  overflow: hidden; /* clear floats */

}

.responsive-utilities-test li {

  position: relative;

  float: left;

  width: 25%;

  height: 43px;

  font-size: 14px;

  font-weight: bold;

  line-height: 43px;

  color: #999;

  text-align: center;

  border: 1px solid #ddd;

  -webkit-border-radius: 4px;

     -moz-border-radius: 4px;

          border-radius: 4px;

}

.responsive-utilities-test li + li {

  margin-left: 10px;

}

.responsive-utilities-test span {

  position: absolute;

  top:    -1px;

  left:   -1px;

  right:  -1px;

  bottom: -1px;

  -webkit-border-radius: 4px;

     -moz-border-radius: 4px;

          border-radius: 4px;

}

.responsive-utilities-test span {

  color: #468847;

  background-color: #dff0d8;

  border: 1px solid #d6e9c6;

}

/* Responsive Docs

-------------------------------------------------- */

@media (max-width: 480px) {

  /* Reduce padding above jumbotron */

  body {

    padding-top: 30px;

  }

  /* Change up some type stuff */

  h2 {

    margin-top: 27px;

  }

  h2 small {

    display: block;

    line-height: 18px;

  }

  h3 {

    margin-top: 18px;

  }

  /* Adjust the jumbotron */

  .jumbotron h1,

  .jumbotron p {

    text-align: center;

    margin-right: 0;

  }

  .jumbotron h1 {

    font-size: 45px;

    margin-right: 0;

  }

  .jumbotron p {

    margin-right: 0;

    margin-left: 0;

    font-size: 18px;

    line-height: 24px;

  }

  .jumbotron .btn {

    display: block;

    font-size: 18px;

    padding: 10px 14px;

    margin: 0 auto 10px;

  }

  /* Masthead (home page jumbotron) */

  .masthead {

    padding-top: 10px;

	margin-bottom: 20px;

  }

  /* Don't space out quick links so much */

  .quick-links {

    margin: 40px 0 0;

  }

  /* hide the bullets on mobile since our horizontal space is limited */

  .quick-links .divider {

    display: none;

  }

  /* center example sites */

  .example-sites {

    margin-left: 0;

  }

  .example-sites > li {

    float: none;

    display: block;

    max-width: 280px;

    margin: 0 auto 18px;

    text-align: center;

  }

  .example-sites .thumbnail > img {

    max-width: 270px;

  }

  table code {

    white-space: normal;

    word-wrap: break-word;

    word-break: break-all;

  }

  /* Modal example */

  .modal-example .modal {

    position: relative;

    top: auto;

    right: auto;

    bottom: auto;

    left: auto;

  }

}

@media (max-width: 768px) {

  /* Remove any padding from the body */

  body {

    padding-top: 0;

  }

  /* Jumbotron buttons */

  .jumbotron .btn {

    margin-bottom: 10px;

  }

  /* Subnav */

  .subnav {

    position: static;

    top: auto;

    z-index: auto;

    width: auto;

    height: auto;

    background: #fff; /* whole background property since we use a background-image for gradient */

    -webkit-box-shadow: none;

       -moz-box-shadow: none;

            box-shadow: none;

  }

  .subnav .nav > li {

    float: none;

  }

  .subnav .nav > li > a {

    border: 0;

  }

  .subnav .nav > li + li > a {

    border-top: 1px solid #e5e5e5;

  }

  .subnav .nav > li:first-child > a,

  .subnav .nav > li:first-child > a:hover {

      -webkit-border-radius: 4px 4px 0 0;

         -moz-border-radius: 4px 4px 0 0;

              border-radius: 4px 4px 0 0;

  }

  /* Popovers */

  .large-bird {

    display: none;

  }

  .popover-well .popover-wrapper {

    margin-left: 0;

  }

  /* Space out the show-grid examples */

  .show-grid [class*="span"] {

    margin-bottom: 5px;

  }

  /* Unfloat the back to top link in footer */

  .footer .pull-right {

    float: none;

  }

  .footer p {

    margin-bottom: 9px;

  }

  .masthead {

    padding-top: 10px;

	margin-bottom: 20px;

  }

}

@media (min-width: 480px) and (max-width: 768px) {

  /* Scale down the jumbotron content */

  .jumbotron h1 {

    font-size: 45px;

  }

  .jumbotron p {

    margin-right: 0;

    margin-left: 0;

  }

}

@media (min-width: 768px) and (max-width: 980px) {

  /* Remove any padding from the body */

  body {

    padding-top: 0;

  }

  /* Scale down the jumbotron content */

  .jumbotron h1 {

    font-size: 50px;

  }

  .masthead {

    padding-top: 20px;

	margin-bottom: 40px;

  }

}

@media (max-width: 980px) {

  /* Unfloat brand */

  .navbar-fixed-top .brand {

    float: left;

    margin-left: 0;

    padding-left: 10px;

    padding-right: 10px;

  }

  /* Inline-block quick links for more spacing */

  .quick-links li {

    display: inline-block;

    margin: 5px;

  }

  .masthead {

    padding-top: 20px;

	margin-bottom: 40px;

  }

}

/* LARGE DESKTOP SCREENS */

@media (min-width: 1210px) {

  /* Update subnav container */

  .subnav-fixed .nav {

    width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */

  }

}