Team:UCL Academy/example.css
From 2014hs.igem.org
(Created page with "/*! * Bootstrap v2.2.2 * * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with al...")
Newer edit →
Revision as of 15:45, 24 May 2014
/*!
* Bootstrap v2.2.2 * * Copyright 2012 Twitter, Inc * Licensed under the Apache License v2.0 * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. */
.clearfix {
*zoom: 1;
} .clearfix:before, .clearfix:after {
display: table; content: ""; line-height: 0;
} .clearfix:after {
clear: both;
} .hide-text {
font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0;
} .input-block-level {
display: block; width: 100%; min-height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
} article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
display: block;
} audio, canvas, video {
display: inline-block; *display: inline; *zoom: 1;
} audio:not([controls]) {
display: none;
} html {
font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;
} a:focus {
outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px;
} a:hover, a:active {
outline: 0;
} sub, sup {
position: relative; font-size: 75%; line-height: 0; vertical-align: baseline;
} sup {
top: -0.5em;
} sub {
bottom: -0.25em;
} img {
/* Responsive images (ensure images don't scale beyond their parents) */
max-width: 100%; /* Part 1: Set a maxium relative to the parent */
width: auto\9; /* IE7-8 need help adjusting responsive images */
height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */
vertical-align: middle; border: 0; -ms-interpolation-mode: bicubic;
}
- map_canvas img,
.google-maps img {
max-width: none;
} button, input, select, textarea {
margin: 0; font-size: 100%; vertical-align: middle;
} button, input {
*overflow: visible; line-height: normal;
} button::-moz-focus-inner, input::-moz-focus-inner {
padding: 0; border: 0;
} button, html input[type="button"], input[type="reset"], input[type="submit"] {
-webkit-appearance: button; cursor: pointer;
} label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] {
cursor: pointer;
} input[type="search"] {
-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; -webkit-appearance: textfield;
} input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
} textarea {
overflow: auto; vertical-align: top;
} @media print {
* { text-shadow: none !important; color: #000 !important; background: transparent !important; box-shadow: none !important; } a, a:visited { text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; } @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3 { page-break-after: avoid; }
} body {
margin: 0; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; color: #333333; background-color: #ffffff;
} /*a {
color: #0088cc; text-decoration: none;
} a:hover {
color: #005580; text-decoration: underline;
}*/ .img-rounded {
-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
} .img-polaroid {
padding: 4px; background-color: #fff; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
} .img-circle {
-webkit-border-radius: 500px; -moz-border-radius: 500px; border-radius: 500px;
} .row {
margin-left: -20px; *zoom: 1;
} .row:before, .row:after {
display: table; content: ""; line-height: 0;
} .row:after {
clear: both;
} [class*="span"] {
float: left; min-height: 1px; margin-left: 20px;
} .container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 940px;
} .span12 {
width: 940px;
} .span11 {
width: 860px;
} .span10 {
width: 780px;
} .span9 {
width: 700px;
} .span8 {
width: 620px;
} .span7 {
width: 540px;
} .span6 {
width: 460px;
} .span5 {
width: 380px;
} .span4 {
width: 300px;
} .span3 {
width: 220px;
} .span2 {
width: 140px;
} .span1 {
width: 60px;
} .offset12 {
margin-left: 980px;
} .offset11 {
margin-left: 900px;
} .offset10 {
margin-left: 820px;
} .offset9 {
margin-left: 740px;
} .offset8 {
margin-left: 660px;
} .offset7 {
margin-left: 580px;
} .offset6 {
margin-left: 500px;
} .offset5 {
margin-left: 420px;
} .offset4 {
margin-left: 340px;
} .offset3 {
margin-left: 260px;
} .offset2 {
margin-left: 180px;
} .offset1 {
margin-left: 100px;
} .row-fluid {
width: 100%; *zoom: 1;
} .row-fluid:before, .row-fluid:after {
display: table; content: ""; line-height: 0;
} .row-fluid:after {
clear: both;
} .row-fluid [class*="span"] {
display: block; width: 100%; min-height: 30px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; float: left; margin-left: 2.127659574468085%; *margin-left: 2.074468085106383%;
} .row-fluid [class*="span"]:first-child {
margin-left: 0;
} .row-fluid .controls-row [class*="span"] + [class*="span"] {
margin-left: 2.127659574468085%;
} .row-fluid .span12 {
width: 100%; *width: 99.94680851063829%;
} .row-fluid .span11 {
width: 91.48936170212765%; *width: 91.43617021276594%;
} .row-fluid .span10 {
width: 82.97872340425532%; *width: 82.92553191489361%;
} .row-fluid .span9 {
width: 74.46808510638297%; *width: 74.41489361702126%;
} .row-fluid .span8 {
width: 65.95744680851064%; *width: 65.90425531914893%;
} .row-fluid .span7 {
width: 57.44680851063829%; *width: 57.39361702127659%;
} .row-fluid .span6 {
width: 48.93617021276595%; *width: 48.88297872340425%;
} .row-fluid .span5 {
width: 40.42553191489362%; *width: 40.37234042553192%;
} .row-fluid .span4 {
width: 31.914893617021278%; *width: 31.861702127659576%;
} .row-fluid .span3 {
width: 23.404255319148934%; *width: 23.351063829787233%;
} .row-fluid .span2 {
width: 14.893617021276595%; *width: 14.840425531914894%;
} .row-fluid .span1 {
width: 6.382978723404255%; *width: 6.329787234042553%;
} .row-fluid .offset12 {
margin-left: 104.25531914893617%; *margin-left: 104.14893617021275%;
} .row-fluid .offset12:first-child {
margin-left: 102.12765957446808%; *margin-left: 102.02127659574467%;
} .row-fluid .offset11 {
margin-left: 95.74468085106382%; *margin-left: 95.6382978723404%;
} .row-fluid .offset11:first-child {
margin-left: 93.61702127659574%; *margin-left: 93.51063829787232%;
} .row-fluid .offset10 {
margin-left: 87.23404255319149%; *margin-left: 87.12765957446807%;
} .row-fluid .offset10:first-child {
margin-left: 85.1063829787234%; *margin-left: 84.99999999999999%;
} .row-fluid .offset9 {
margin-left: 78.72340425531914%; *margin-left: 78.61702127659572%;
} .row-fluid .offset9:first-child {
margin-left: 76.59574468085106%; *margin-left: 76.48936170212764%;
} .row-fluid .offset8 {
margin-left: 70.2127659574468%; *margin-left: 70.10638297872339%;
} .row-fluid .offset8:first-child {
margin-left: 68.08510638297872%; *margin-left: 67.9787234042553%;
} .row-fluid .offset7 {
margin-left: 61.70212765957446%; *margin-left: 61.59574468085106%;
} .row-fluid .offset7:first-child {
margin-left: 59.574468085106375%; *margin-left: 59.46808510638297%;
} .row-fluid .offset6 {
margin-left: 53.191489361702125%; *margin-left: 53.085106382978715%;
} .row-fluid .offset6:first-child {
margin-left: 51.063829787234035%; *margin-left: 50.95744680851063%;
} .row-fluid .offset5 {
margin-left: 44.68085106382979%; *margin-left: 44.57446808510638%;
} .row-fluid .offset5:first-child {
margin-left: 42.5531914893617%; *margin-left: 42.4468085106383%;
} .row-fluid .offset4 {
margin-left: 36.170212765957444%; *margin-left: 36.06382978723405%;
} .row-fluid .offset4:first-child {
margin-left: 34.04255319148936%; *margin-left: 33.93617021276596%;
} .row-fluid .offset3 {
margin-left: 27.659574468085104%; *margin-left: 27.5531914893617%;
} .row-fluid .offset3:first-child {
margin-left: 25.53191489361702%; *margin-left: 25.425531914893618%;
} .row-fluid .offset2 {
margin-left: 19.148936170212764%; *margin-left: 19.04255319148936%;
} .row-fluid .offset2:first-child {
margin-left: 17.02127659574468%; *margin-left: 16.914893617021278%;
} .row-fluid .offset1 {
margin-left: 10.638297872340425%; *margin-left: 10.53191489361702%;
} .row-fluid .offset1:first-child {
margin-left: 8.51063829787234%; *margin-left: 8.404255319148938%;
} [class*="span"].hide, .row-fluid [class*="span"].hide {
display: none;
} [class*="span"].pull-right, .row-fluid [class*="span"].pull-right {
float: right;
} .container {
margin-right: auto; margin-left: auto; *zoom: 1;
} .container:before, .container:after {
display: table; content: ""; line-height: 0;
} .container:after {
clear: both;
} .container-fluid {
padding-right: 20px; padding-left: 20px; *zoom: 1;
} .container-fluid:before, .container-fluid:after {
display: table; content: ""; line-height: 0;
} .container-fluid:after {
clear: both;
} .btn {
display: inline-block; *display: inline; /* IE7 inline-block hack */
*zoom: 1; padding: 4px 12px; margin-bottom: 0; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; color: #333333; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); background-color: #f5f5f5; background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6); background-image: -o-linear-gradient(top, #ffffff, #e6e6e6); background-image: linear-gradient(to bottom, #ffffff, #e6e6e6); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); border-color: #e6e6e6 #e6e6e6 #bfbfbf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #e6e6e6; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); border: 1px solid #bbbbbb; *border: 0; border-bottom-color: #a2a2a2; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; *margin-left: .3em; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
} .btn:hover, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
color: #333333; background-color: #e6e6e6; *background-color: #d9d9d9;
} .btn:active, .btn.active {
background-color: #cccccc \9;
} .btn:first-child {
*margin-left: 0;
} .btn:hover {
color: #333333; text-decoration: none; background-position: 0 -15px; -webkit-transition: background-position 0.1s linear; -moz-transition: background-position 0.1s linear; -o-transition: background-position 0.1s linear; transition: background-position 0.1s linear;
} .btn:focus {
outline: thin dotted #333; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px;
} .btn.active, .btn:active {
background-image: none; outline: 0; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
} .btn.disabled, .btn[disabled] {
cursor: default; background-image: none; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .btn-large {
padding: 11px 19px; font-size: 17.5px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
} .btn-large [class^="icon-"], .btn-large [class*=" icon-"] {
margin-top: 4px;
} .btn-small {
padding: 2px 10px; font-size: 11.9px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
} .btn-small [class^="icon-"], .btn-small [class*=" icon-"] {
margin-top: 0;
} .btn-mini [class^="icon-"], .btn-mini [class*=" icon-"] {
margin-top: -1px;
} .btn-mini {
padding: 0 6px; font-size: 10.5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
} .btn-block {
display: block; width: 100%; padding-left: 0; padding-right: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
} .btn-block + .btn-block {
margin-top: 5px;
} input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="button"].btn-block {
width: 100%;
} .btn-primary.active, .btn-warning.active, .btn-danger.active, .btn-success.active, .btn-info.active, .btn-inverse.active {
color: rgba(255, 255, 255, 0.75);
} .btn {
border-color: #c5c5c5; border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25);
} .btn-primary {
color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #006dcc; background-image: -moz-linear-gradient(top, #0088cc, #0044cc); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); background-image: -o-linear-gradient(top, #0088cc, #0044cc); background-image: linear-gradient(to bottom, #0088cc, #0044cc); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0); border-color: #0044cc #0044cc #002a80; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #0044cc; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
} .btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
color: #ffffff; background-color: #0044cc; *background-color: #003bb3;
} .btn-primary:active, .btn-primary.active {
background-color: #003399 \9;
} .btn-warning {
color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #faa732; background-image: -moz-linear-gradient(top, #fbb450, #f89406); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); background-image: -webkit-linear-gradient(top, #fbb450, #f89406); background-image: -o-linear-gradient(top, #fbb450, #f89406); background-image: linear-gradient(to bottom, #fbb450, #f89406); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); border-color: #f89406 #f89406 #ad6704; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #f89406; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
} .btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
color: #ffffff; background-color: #f89406; *background-color: #df8505;
} .btn-warning:active, .btn-warning.active {
background-color: #c67605 \9;
} .btn-danger {
color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #da4f49; background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f)); background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f); background-image: -o-linear-gradient(top, #ee5f5b, #bd362f); background-image: linear-gradient(to bottom, #ee5f5b, #bd362f); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0); border-color: #bd362f #bd362f #802420; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #bd362f; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
} .btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
color: #ffffff; background-color: #bd362f; *background-color: #a9302a;
} .btn-danger:active, .btn-danger.active {
background-color: #942a25 \9;
} .btn-success {
color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #5bb75b; background-image: -moz-linear-gradient(top, #62c462, #51a351); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); background-image: -webkit-linear-gradient(top, #62c462, #51a351); background-image: -o-linear-gradient(top, #62c462, #51a351); background-image: linear-gradient(to bottom, #62c462, #51a351); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0); border-color: #51a351 #51a351 #387038; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #51a351; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
} .btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
color: #ffffff; background-color: #51a351; *background-color: #499249;
} .btn-success:active, .btn-success.active {
background-color: #408140 \9;
} .btn-info {
color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #49afcd; background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4)); background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4); background-image: -o-linear-gradient(top, #5bc0de, #2f96b4); background-image: linear-gradient(to bottom, #5bc0de, #2f96b4); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0); border-color: #2f96b4 #2f96b4 #1f6377; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #2f96b4; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
} .btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] {
color: #ffffff; background-color: #2f96b4; *background-color: #2a85a0;
} .btn-info:active, .btn-info.active {
background-color: #24748c \9;
} .btn-inverse {
color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #363636; background-image: -moz-linear-gradient(top, #444444, #222222); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222)); background-image: -webkit-linear-gradient(top, #444444, #222222); background-image: -o-linear-gradient(top, #444444, #222222); background-image: linear-gradient(to bottom, #444444, #222222); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0); border-color: #222222 #222222 #000000; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #222222; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
} .btn-inverse:hover, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] {
color: #ffffff; background-color: #222222; *background-color: #151515;
} .btn-inverse:active, .btn-inverse.active {
background-color: #080808 \9;
} button.btn, input[type="submit"].btn {
*padding-top: 3px; *padding-bottom: 3px;
} button.btn::-moz-focus-inner, input[type="submit"].btn::-moz-focus-inner {
padding: 0; border: 0;
} button.btn.btn-large, input[type="submit"].btn.btn-large {
*padding-top: 7px; *padding-bottom: 7px;
} button.btn.btn-small, input[type="submit"].btn.btn-small {
*padding-top: 3px; *padding-bottom: 3px;
} button.btn.btn-mini, input[type="submit"].btn.btn-mini {
*padding-top: 1px; *padding-bottom: 1px;
} .btn-link, .btn-link:active, .btn-link[disabled] {
background-color: transparent; background-image: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;
} .btn-link {
border-color: transparent; cursor: pointer; color: #0088cc; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
} .btn-link:hover {
color: #005580; text-decoration: underline; background-color: transparent;
} .btn-link[disabled]:hover {
color: #333333; text-decoration: none;
} .btn-group {
position: relative; display: inline-block; *display: inline; /* IE7 inline-block hack */
*zoom: 1; font-size: 0; vertical-align: middle; white-space: nowrap; *margin-left: .3em;
} .btn-group:first-child {
*margin-left: 0;
} .btn-group + .btn-group {
margin-left: 5px;
} .btn-toolbar {
font-size: 0; margin-top: 10px; margin-bottom: 10px;
} .btn-toolbar > .btn + .btn, .btn-toolbar > .btn-group + .btn, .btn-toolbar > .btn + .btn-group {
margin-left: 5px;
} .btn-group > .btn {
position: relative; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
} .btn-group > .btn + .btn {
margin-left: -1px;
} .btn-group > .btn, .btn-group > .dropdown-menu, .btn-group > .popover {
font-size: 14px;
} .btn-group > .btn-mini {
font-size: 10.5px;
} .btn-group > .btn-small {
font-size: 11.9px;
} .btn-group > .btn-large {
font-size: 17.5px;
} .btn-group > .btn:first-child {
margin-left: 0; -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; border-bottom-left-radius: 4px;
} .btn-group > .btn:last-child, .btn-group > .dropdown-toggle {
-webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; border-bottom-right-radius: 4px;
} .btn-group > .btn.large:first-child {
margin-left: 0; -webkit-border-top-left-radius: 6px; -moz-border-radius-topleft: 6px; border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomleft: 6px; border-bottom-left-radius: 6px;
} .btn-group > .btn.large:last-child, .btn-group > .large.dropdown-toggle {
-webkit-border-top-right-radius: 6px; -moz-border-radius-topright: 6px; border-top-right-radius: 6px; -webkit-border-bottom-right-radius: 6px; -moz-border-radius-bottomright: 6px; border-bottom-right-radius: 6px;
} .btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active {
z-index: 2;
} .btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle {
outline: 0;
} .btn-group > .btn + .dropdown-toggle {
padding-left: 8px; padding-right: 8px; -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); -moz-box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); box-shadow: inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); *padding-top: 5px; *padding-bottom: 5px;
} .btn-group > .btn-mini + .dropdown-toggle {
padding-left: 5px; padding-right: 5px; *padding-top: 2px; *padding-bottom: 2px;
} .btn-group > .btn-small + .dropdown-toggle {
*padding-top: 5px; *padding-bottom: 4px;
} .btn-group > .btn-large + .dropdown-toggle {
padding-left: 12px; padding-right: 12px; *padding-top: 7px; *padding-bottom: 7px;
} .btn-group.open .dropdown-toggle {
background-image: none; -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); -moz-box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); box-shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
} .btn-group.open .btn.dropdown-toggle {
background-color: #e6e6e6;
} .btn-group.open .btn-primary.dropdown-toggle {
background-color: #0044cc;
} .btn-group.open .btn-warning.dropdown-toggle {
background-color: #f89406;
} .btn-group.open .btn-danger.dropdown-toggle {
background-color: #bd362f;
} .btn-group.open .btn-success.dropdown-toggle {
background-color: #51a351;
} .btn-group.open .btn-info.dropdown-toggle {
background-color: #2f96b4;
} .btn-group.open .btn-inverse.dropdown-toggle {
background-color: #222222;
} .btn .caret {
margin-top: 8px; margin-left: 0;
} .btn-mini .caret, .btn-small .caret, .btn-large .caret {
margin-top: 6px;
} .btn-large .caret {
border-left-width: 5px; border-right-width: 5px; border-top-width: 5px;
} .dropup .btn-large .caret {
border-bottom-width: 5px;
} .btn-primary .caret, .btn-warning .caret, .btn-danger .caret, .btn-info .caret, .btn-success .caret, .btn-inverse .caret {
border-top-color: #ffffff; border-bottom-color: #ffffff;
} .btn-group-vertical {
display: inline-block; *display: inline; /* IE7 inline-block hack */
*zoom: 1;
} .btn-group-vertical > .btn {
display: block; float: none; max-width: 100%; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
} .btn-group-vertical > .btn + .btn {
margin-left: 0; margin-top: -1px;
} .btn-group-vertical > .btn:first-child {
-webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
} .btn-group-vertical > .btn:last-child {
-webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
} .btn-group-vertical > .btn-large:first-child {
-webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
} .btn-group-vertical > .btn-large:last-child {
-webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px;
} .navbar {
overflow: visible; margin-bottom: 20px; *position: relative; *z-index: 2;
} .navbar-inner {
min-height: 40px; padding-left: 20px; padding-right: 20px; background-color: #fafafa; background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2)); background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2); background-image: -o-linear-gradient(top, #ffffff, #f2f2f2); background-image: linear-gradient(to bottom, #ffffff, #f2f2f2); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0); border: 1px solid #d4d4d4; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065); *zoom: 1;
} .navbar-inner:before, .navbar-inner:after {
display: table; content: ""; line-height: 0;
} .navbar-inner:after {
clear: both;
} .navbar .container {
width: auto !important;
} .nav-collapse.collapse {
height: auto; overflow: visible;
} .navbar .brand {
float: left; display: block; padding: 10px 20px 10px; margin-left: -20px; font-size: 20px; font-weight: 200; color: #777777; text-shadow: 0 1px 0 #ffffff;
} .navbar .brand.pull-right {
float: right;
} .navbar .brand:hover {
text-decoration: none;
} .navbar-text {
margin-bottom: 0; line-height: 40px; color: #777777;
} .navbar-link {
color: #777777;
} .navbar-link:hover {
color: #333333;
} .navbar .divider-vertical {
height: 40px; margin: 0 9px; border-left: 1px solid #f2f2f2; border-right: 1px solid #ffffff;
} .navbar .btn, .navbar .btn-group {
margin-top: 5px;
} .navbar .btn-group .btn, .navbar .input-prepend .btn, .navbar .input-append .btn {
margin-top: 0;
}
.navbar-static-top {
position: static; margin-bottom: 0;
} .navbar-static-top .navbar-inner {
-webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
} .navbar-fixed-top, .navbar-fixed-bottom {
position: fixed; right: 0; left: 0; z-index: 1030; margin-bottom: 0;
} .navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {
border-width: 0 0 1px;
} .navbar-fixed-bottom .navbar-inner {
border-width: 1px 0 0;
} .navbar-fixed-top .navbar-inner, .navbar-fixed-bottom .navbar-inner {
padding-left: 0; padding-right: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
} .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 940px;
} .navbar-fixed-top {
top: 0;
} .navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {
-webkit-box-shadow: 0 1px 10px rgba(0,0,0,.1); -moz-box-shadow: 0 1px 10px rgba(0,0,0,.1); box-shadow: 0 1px 10px rgba(0,0,0,.1);
} .navbar-fixed-bottom {
bottom: 0;
} .navbar-fixed-bottom .navbar-inner {
-webkit-box-shadow: 0 -1px 10px rgba(0,0,0,.1); -moz-box-shadow: 0 -1px 10px rgba(0,0,0,.1); box-shadow: 0 -1px 10px rgba(0,0,0,.1);
} .navbar .nav {
position: relative; left: 0; display: block; float: left; margin: 0 10px 0 0; padding: 0;
} .navbar .nav.pull-right {
float: right; margin-right: 0;
} .navbar .nav > li {
float: left;
} .navbar .nav > li > a {
float: none; padding: 10px 15px 10px; color: #777777; text-decoration: none; text-shadow: 0 1px 0 #ffffff;
} .navbar .nav .dropdown-toggle .caret {
margin-top: 8px;
} .navbar .nav > li > a:focus, .navbar .nav > li > a:hover {
background-color: transparent; color: #333333; text-decoration: none;
} .navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
color: #555555; text-decoration: none; background-color: #e5e5e5; -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125); box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
} .navbar .btn-navbar {
display: none; float: right; padding: 7px 10px; margin-left: 5px; margin-right: 5px; color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #ededed; background-image: -moz-linear-gradient(top, #f2f2f2, #e5e5e5); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e5e5e5)); background-image: -webkit-linear-gradient(top, #f2f2f2, #e5e5e5); background-image: -o-linear-gradient(top, #f2f2f2, #e5e5e5); background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe5e5e5', GradientType=0); border-color: #e5e5e5 #e5e5e5 #bfbfbf; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #e5e5e5; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
} .navbar .btn-navbar:hover, .navbar .btn-navbar:active, .navbar .btn-navbar.active, .navbar .btn-navbar.disabled, .navbar .btn-navbar[disabled] {
color: #ffffff; background-color: #e5e5e5; *background-color: #d9d9d9;
} .navbar .btn-navbar:active, .navbar .btn-navbar.active {
background-color: #cccccc \9;
} .navbar .btn-navbar .icon-bar {
display: block; width: 18px; height: 2px; background-color: #f5f5f5; -webkit-border-radius: 1px; -moz-border-radius: 1px; border-radius: 1px; -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
} .btn-navbar .icon-bar + .icon-bar {
margin-top: 3px;
} .navbar .nav > li > .dropdown-menu:before {
content: ; display: inline-block; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ccc; border-bottom-color: rgba(0, 0, 0, 0.2); position: absolute; top: -7px; left: 9px;
} .navbar .nav > li > .dropdown-menu:after {
content: ; display: inline-block; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 6px solid #ffffff; position: absolute; top: -6px; left: 10px;
} .navbar-fixed-bottom .nav > li > .dropdown-menu:before {
border-top: 7px solid #ccc; border-top-color: rgba(0, 0, 0, 0.2); border-bottom: 0; bottom: -7px; top: auto;
} .navbar-fixed-bottom .nav > li > .dropdown-menu:after {
border-top: 6px solid #ffffff; border-bottom: 0; bottom: -6px; top: auto;
} .navbar .nav li.dropdown > a:hover .caret {
border-top-color: #555555; border-bottom-color: #555555;
} .navbar .nav li.dropdown.open > .dropdown-toggle, .navbar .nav li.dropdown.active > .dropdown-toggle, .navbar .nav li.dropdown.open.active > .dropdown-toggle {
background-color: #e5e5e5; color: #555555;
} .navbar .nav li.dropdown > .dropdown-toggle .caret {
border-top-color: #777777; border-bottom-color: #777777;
} .navbar .nav li.dropdown.open > .dropdown-toggle .caret, .navbar .nav li.dropdown.active > .dropdown-toggle .caret, .navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: #555555; border-bottom-color: #555555;
} .navbar .pull-right > li > .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right {
left: auto; right: 0;
} .navbar .pull-right > li > .dropdown-menu:before, .navbar .nav > li > .dropdown-menu.pull-right:before {
left: auto; right: 12px;
} .navbar .pull-right > li > .dropdown-menu:after, .navbar .nav > li > .dropdown-menu.pull-right:after {
left: auto; right: 13px;
} .navbar .pull-right > li > .dropdown-menu .dropdown-menu, .navbar .nav > li > .dropdown-menu.pull-right .dropdown-menu {
left: auto; right: 100%; margin-left: 0; margin-right: -1px; -webkit-border-radius: 6px 0 6px 6px; -moz-border-radius: 6px 0 6px 6px; border-radius: 6px 0 6px 6px;
} .navbar-inverse .navbar-inner {
background-color: #1b1b1b; background-image: -moz-linear-gradient(top, #222222, #111111); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#222222), to(#111111)); background-image: -webkit-linear-gradient(top, #222222, #111111); background-image: -o-linear-gradient(top, #222222, #111111); background-image: linear-gradient(to bottom, #222222, #111111); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff111111', GradientType=0); border-color: #252525;
} .navbar-inverse .brand, .navbar-inverse .nav > li > a {
color: #999999; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
} .navbar-inverse .brand:hover, .navbar-inverse .nav > li > a:hover {
color: #ffffff;
} .navbar-inverse .brand {
color: #999999;
} .navbar-inverse .navbar-text {
color: #999999;
} .navbar-inverse .nav > li > a:focus, .navbar-inverse .nav > li > a:hover {
background-color: transparent; color: #ffffff;
} .navbar-inverse .nav .active > a, .navbar-inverse .nav .active > a:hover, .navbar-inverse .nav .active > a:focus {
color: #ffffff; background-color: #111111;
} .navbar-inverse .navbar-link {
color: #999999;
} .navbar-inverse .navbar-link:hover {
color: #ffffff;
} .navbar-inverse .divider-vertical {
border-left-color: #111111; border-right-color: #222222;
} .navbar-inverse .nav li.dropdown.open > .dropdown-toggle, .navbar-inverse .nav li.dropdown.active > .dropdown-toggle, .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
background-color: #111111; color: #ffffff;
} .navbar-inverse .nav li.dropdown > a:hover .caret {
border-top-color: #ffffff; border-bottom-color: #ffffff;
} .navbar-inverse .nav li.dropdown > .dropdown-toggle .caret {
border-top-color: #999999; border-bottom-color: #999999;
} .navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret, .navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret, .navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret {
border-top-color: #ffffff; border-bottom-color: #ffffff;
} .navbar-inverse .navbar-search .search-query {
color: #ffffff; background-color: #515151; border-color: #111111; -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15); -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15); box-shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0 rgba(255,255,255,.15); -webkit-transition: none; -moz-transition: none; -o-transition: none; transition: none;
} .navbar-inverse .navbar-search .search-query:-moz-placeholder {
color: #cccccc;
} .navbar-inverse .navbar-search .search-query:-ms-input-placeholder {
color: #cccccc;
} .navbar-inverse .navbar-search .search-query::-webkit-input-placeholder {
color: #cccccc;
} .navbar-inverse .navbar-search .search-query:focus, .navbar-inverse .navbar-search .search-query.focused {
padding: 5px 15px; color: #333333; text-shadow: 0 1px 0 #ffffff; background-color: #ffffff; border: 0; -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); box-shadow: 0 0 3px rgba(0, 0, 0, 0.15); outline: 0;
} .navbar-inverse .btn-navbar {
color: #ffffff; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); background-color: #0e0e0e; background-image: -moz-linear-gradient(top, #151515, #040404); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404)); background-image: -webkit-linear-gradient(top, #151515, #040404); background-image: -o-linear-gradient(top, #151515, #040404); background-image: linear-gradient(to bottom, #151515, #040404); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0); border-color: #040404 #040404 #000000; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); *background-color: #040404; /* Darken IE7 buttons by default so they stand out more given they won't have borders */
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
} .navbar-inverse .btn-navbar:hover, .navbar-inverse .btn-navbar:active, .navbar-inverse .btn-navbar.active, .navbar-inverse .btn-navbar.disabled, .navbar-inverse .btn-navbar[disabled] {
color: #ffffff; background-color: #040404; *background-color: #000000;
} .navbar-inverse .btn-navbar:active, .navbar-inverse .btn-navbar.active {
background-color: #000000 \9;
} .accordion {
margin-bottom: 20px;
} .accordion-group {
margin-bottom: 2px; border: 1px solid #e5e5e5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;
} .accordion-heading {
border-bottom: 0;
} .accordion-heading .accordion-toggle {
display: block; padding: 8px 15px;
} .accordion-toggle {
cursor: pointer;
} .accordion-inner {
padding: 9px 15px; border-top: 1px solid #e5e5e5;
} .hidden {
display: none; visibility: hidden;
} .visible-phone {
display: none !important;
} .visible-tablet {
display: none !important;
} .hidden-desktop {
display: none !important;
} .visible-desktop {
display: inherit !important;
}
/*
Code example styles
- /
body {
background: #fcfcfc; -webkit-font-smoothing: antialiased; font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #232525;
}
.nav {
list-style-type: none; top: 8px;
}
.nav li {
marign: 0; padding: 0;
}
.nav a {
font-size: 12px; text-transform: uppercase; line-height: 1; font-weight: 800; color: #afb2b6; text-decoration: none; display: block; float: left; padding: 6px 15px 2px; border-radius: 10px; margin: 0 5px; text-shadow: 0 1px 4px rgba(0,0,0,.8);
}
.nav .active a, .nav a:hover { color: #fff }
.nav a.active {
color: #fff; text-shadow: 0 -1px 0 rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(255,255,255,.1),inset 0 -1px 4px rgba(0,0,0,1); background-color: #111;
}
/* Ad Packs */
- ad_packs {
margin: 45px 0 30px 0; width: 298px; overflow: hidden;
}
- footer.small #ad_packs {
margin:0;
}
- bsap_aplink {
float: right; font-size: 10px;
}
/* Type styles */ h1 {
font-size: 23px; text-transform: uppercase;
}
h2 { font-size: 18px }
h3 { margin: 0 }
p {
font-weight: 400; color: #333; margin:0 0 15px;
}
small {
font-weight: 400; color: #333;
}
a:link, a:visited {
color: #d22929; text-decoration: none; font-weight: 600;
}
a:hover, a:active {
color: #9e2020; text-decoration: none; font-weight: 600;
}
a.btn {
color:#fff; margin-bottom: 10px;
}
.section {
padding-top:30px;
}
- footer {
font-size: 12px;
}
- footer .span8 {
padding-top:20px;
}