topical media & game development

talk show tell print

mobile-query-three-www-vendor-bootstrap-docs-assets-css-docs.css / css



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


(C) Æliens 04/09/2009

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.