Team:St Andrews/Template:DocsCssFull

From 2012.igem.org

/* 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: 15px;

}

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

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

}


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

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

  1. variables label { 
 margin-bottom: 0;

}

/* Giant download button */ .download-btn { 

 margin: 36px 0 108px;

}

  1. download p,
  2. download h4 { 
 max-width: 50%;
 margin: 0 auto;
 color: #999;
 text-align: center;

}

  1. download h4 { 
 margin-bottom: 0;

}

  1. 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 { 

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

}

Retrieved from "http://2012.igem.org/Team:St_Andrews/Template:DocsCssFull"