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