/* 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(http://widowshome.org/templates/strappedinterior/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-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;

  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;

}



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

}

.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: 1030;

    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);

  }

  .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

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

.quick-links {

  min-height: 30px;

  padding: 5px 20px;

  margin: 36px 0;

  list-style: none;

  text-align: center;

  overflow: hidden;

}

.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

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



pre.prettyprint {

  overflow: hidden;

}



.browser-support {

  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-bottom: 18px;

}

.the-icons i {

  display: block;

  margin-bottom: 5px;

}

.the-icons i:hover {

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

}

.the-icons i:after {

  display: block;

  content: attr(class);

  font-style: normal;

  margin-left: 20px;

  width: 140px;

}

#javascript input[type=checkbox] {

  position: relative;

  top: -1px;

  display: inline;

  margin-left: 6px;

}



/* Eaxmples page

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

.bootstrap-examples .thumbnail {

  margin-bottom: 9px;

  background-color: #fff;

}





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

  }



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

  }



}