/* Special styles for bootstrap documentation - DON'T INCLUDE IN PRODUCTION
------------------------------------------------------------------------- */
/* Add additional stylesheets below
-------------------------------------------------- */
/*
  Bootstrap's documentation styles
  Special styles for presenting Bootstrap's documentation and examples
*/


/* Body and structure
-------------------------------------------------- */
body {
   position: relative;
}


/* Tweak navbar brand link to be super sleek
-------------------------------------------------- */
.navbar-fixed-top .brand {
   padding-right: 0;
   padding-left: 0;
   margin-left: 20px;
   float: right;
   font-weight: bold;
   color: #000;
   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;
}


/* 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: 81px;
   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;
}
.jumbotron .btn-large small {
   font-size: 14px;
   color: #000;
}
.jumbotron  small {
   font-size: 16px;
}

/* Masthead (docs home) */
.masthead {
   padding-top: 36px;
   margin-bottom: 72px;
}
.masthead .inner {
   margin-left: 20px;
}

.masthead h1 {
   font-family: "OpenSansLightRegular",Arial,Helvetica,Sans-Serif;
   font-size: 50px;
   font-weight: normal;
   color: #000;
   margin-bottom: 18px;
}
.masthead h2 {
   font-size: 36px;
   font-weight: normal;
}
   .masthead p {
      margin-left: 5%;
      margin-right: 5%;
      font-size: 30px;
      line-height: 36px;
   }
   .masthead .inner p {
      margin-left: 0;
      font-size: 24px;
   }



/* 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: #CCC; /* 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: 0;
   -moz-border-radius: 0;
   border-radius: 0;
}
.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;
   color: #000;
}
.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: none;
   -moz-box-shadow: none;
   box-shadow: none;
}
.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: 0;
   -moz-border-radius: 0;
   border-radius: 0;
}
.subnav .nav > li:last-child > a {
   border-right: 0;
}


/* Fixed subnav on scroll, but only for 980px and up (sorry IE!) */
@media (min-width: 980px) {
   .subnav-fixed {
      position: fixed;
      top: 0;
      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: none;
      -moz-box-shadow: none;
      box-shadow: none;
      filter: none;
   }
   .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;
   }
}


/* 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 8px;
   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;
   color: #000;
}
.marketing p {
   font-size: 14px;
   margin-right: 10px;
}
.marketing.metro p {
   display: inline-block;
}
.marketing .bs-icon {
   float: left;
   margin: 7px 10px 0 0;
   opacity: .8;
}
.marketing .small-bs-icon {
   float: left;
   margin: 4px 5px 0 0;
}
.marketing .thumbnail {
   background-color: #fff;
}
.marketing img {
   margin: 0 auto;
   max-width: 100%;
}


#hero {
   display: block;
   position: relative;
}
#hero-image {
   margin: 0;
}

#hero a.btn-large b {
   font-size: 24px;
}

#carousel-container {
   display: block;
   height: 320px;
}

#home-carousel {
   /*margin-top: 60px;*/
}
#home-carousel .item h2 {
   font-size: 50px;
   line-height: 53px;
   color: #000;
}
#home-carousel .item p {
   font-size:18px;
   line-height:24px;
   color: #666;
}

#home-carousel .carousel-control {
   top: 200px;
   margin-left: -100px;
}
#home-carousel .carousel-control.right {
   margin-right: -100px;
}

#home-tiles {
   margin-top: 10px;
}
#home-tiles .tile {
   margin-left: 2%;
   margin-right: 2%;
}

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

/* 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,
.marketing.metro p.marketing-byline {
   display: block;
   margin: -18px 0 27px;
   font-size: 18px !important;
   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;
}

section#misc .ui-loader {
   display: block;
   left: 0;
   margin: 0;
   position: relative;
   top: 0;
}



/* Icons demo page
-------------------------------------------------- */
#icomoon-container {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   margin: 0;
   paddin: 0;
}

#icomoon-container section,
#icomoon-container header,
#icomoon-container footer {
   display: block;
   padding: 0;
}

#icomoon-container .glyph {
   float: left;
   text-align: center;
   background: #FFF;
   padding: .75em;
   margin: .75em 1.5em .75em 0;
   width: 7em;
   /*border-radius: .375em;*/
   /*box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #ccc;*/
}
#icomoon-container .glyph input {
   width: 100%;
   text-align: center;
   font-family: consolas, monospace;
}
#icomoon-container .glyph input,
#icomoon-container .mtm {
   margin-top: .75em;
   border: 0;
   /*background-color: #fff;*/
   padding: 0 20px;
}

.fs1 {
   font-size: 2em;
}
#icomoon-container header {
}
#icomoon-container header h1 {
}
#icomoon-container .clearfix:before,
#icomoon-container .clearfix:after { content: ""; display: table; }
#icomoon-container .clearfix:after { clear: both; }
#icomoon-container footer {
   margin-top: 2em;
   padding: .5em 0;
   box-shadow: 0 -2px #eee;
}
#icomoon-container .box1 {
   display: inline-block;
   width: 15em;
   padding: .25em .5em;
   background-color: #fff;
   margin: .5em 1em .5em 0;
   font-size: 18px;
}




/* Responsive Docs
-------------------------------------------------- */
@media (max-width: 480px) {

   /* Reduce padding above jumbotron */
   body {
      padding-top: 70px;
   }

   /* Change up some type stuff */
   h2 {
      margin-top: 27px;
   }
   h2 small {
      display: block;
      line-height: 18px;
   }
   h3 {
      margin-top: 18px;
   }

   /* icons */
   .marketing .bs-icon {
      margin: 0;
   }

   /* 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: 0;
   }

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

}


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

   /* Scale down the jumbotron content */
   .jumbotron h1 {
      font-size: 54px;
   }
   .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: 72px;
   }

}


@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;
   }

}


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

}