Skip to content

B
bootstrap
Commit 23e076c1 authored by Mark Otto's avatar Mark Otto
Browse files
Options

add in a navbar button for toggling the nav items

parent dc74530f
Show whitespace changes
Inline Side-by-side
Showing with 1150 additions and 1022 deletions
docs/assets/css/bootstrap-responsive.css
View file @ 23e076c1
......@@ -86,6 +86,9 @@
width: auto;
margin: 0;
}
.btn-navbar {
display: block;
}
}
@media (min-width: 768px) and (max-width: 940px) {
.container {
......
docs/assets/css/bootstrap.css
View file @ 23e076c1
......@@ -1645,1258 +1645,1305 @@ table .span12 {
filter: alpha(opacity=40);
cursor: pointer;
}
.nav {
margin-left: 0;
margin-bottom: 18px;
list-style: none;
.btn.primary,
.btn.primary:hover,
.btn.danger,
.btn.danger:hover,
.btn.success,
.btn.success:hover,
.btn.info,
.btn.info:hover {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
color: #ffffff;
}
.nav > li > a {
display: block;
.btn.primary.active,
.btn.danger.active,
.btn.success.active,
.btn.info.active {
color: rgba(255, 255, 255, 0.75);
}
.nav > li > a:hover {
text-decoration: none;
background-color: #eeeeee;
.btn.primary {
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -ms-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(top, #0088cc, #0044cc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', 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);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.nav.list {
padding-left: 14px;
padding-right: 14px;
margin-bottom: 0;
.btn.primary:hover,
.btn.primary:active,
.btn.primary.active,
.btn.primary.disabled,
.btn.primary[disabled] {
background-color: #0044cc;
}
.nav.list > li > a, .nav.list .nav-header {
display: block;
padding: 3px 15px;
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
.btn.primary:active, .btn.primary.active {
background-color: #003399 \9;
}
.nav.list .nav-header {
font-size: 11px;
font-weight: bold;
line-height: 18px;
color: #999999;
text-transform: uppercase;
.btn.danger {
background-color: #da4f49;
background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -ms-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(top, #ee5f5b, #bd362f);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', 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);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.nav.list > li + .nav-header {
margin-top: 9px;
.btn.danger:hover,
.btn.danger:active,
.btn.danger.active,
.btn.danger.disabled,
.btn.danger[disabled] {
background-color: #bd362f;
}
.nav.list .active > a {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
background-color: #0088cc;
.btn.danger:active, .btn.danger.active {
background-color: #942a25 \9;
}
.nav.list .icon {
margin-right: 2px;
.btn.success {
background-color: #5bb75b;
background-image: -moz-linear-gradient(top, #62c462, #51a351);
background-image: -ms-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(top, #62c462, #51a351);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', 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);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.tabs, .pills {
*zoom: 1;
.btn.success:hover,
.btn.success:active,
.btn.success.active,
.btn.success.disabled,
.btn.success[disabled] {
background-color: #51a351;
}
.tabs:before,
.pills:before,
.tabs:after,
.pills:after {
display: table;
content: "";
.btn.success:active, .btn.success.active {
background-color: #408140 \9;
}
.tabs:after, .pills:after {
clear: both;
.btn.info {
background-color: #49afcd;
background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -ms-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(top, #5bc0de, #2f96b4);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', 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);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.tabs > li, .pills > li {
float: left;
.btn.info:hover,
.btn.info:active,
.btn.info.active,
.btn.info.disabled,
.btn.info[disabled] {
background-color: #2f96b4;
}
.tabs > li > a, .pills > li > a {
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
line-height: 14px;
.btn.info:active, .btn.info.active {
background-color: #24748c \9;
}
.tabs {
border-bottom: 1px solid #ddd;
.btn {
display: inline-block;
padding: 4px 10px 4px;
font-size: 13px;
line-height: 18px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-color: #fafafa;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
border: 1px solid #ccc;
border-bottom-color: #bbb;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
cursor: pointer;
*margin-left: .3em;
}
.tabs > li {
margin-bottom: -1px;
.btn:first-child {
*margin-left: 0;
}
.tabs > li > a {
padding-top: 9px;
padding-bottom: 9px;
border: 1px solid transparent;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
.btn:hover {
color: #333333;
text-decoration: none;
background-color: #e6e6e6;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-ms-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.tabs > li > a:hover {
border-color: #eeeeee #eeeeee #dddddd;
.btn:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
.tabs > .active > a, .tabs > .active > a:hover {
color: #555555;
background-color: #ffffff;
border: 1px solid #ddd;
border-bottom-color: transparent;
.btn.active, .btn:active {
background-image: none;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
color: rgba(0, 0, 0, 0.5);
outline: 0;
}
.btn.disabled, .btn[disabled] {
cursor: default;
background-image: none;
background-color: #e6e6e6;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.pills > li > a {
padding-top: 8px;
padding-bottom: 8px;
margin-top: 2px;
margin-bottom: 2px;
.btn.large {
padding: 9px 14px;
font-size: 15px;
line-height: normal;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.pills .active > a, .pills .active > a:hover {
color: #ffffff;
background-color: #0088cc;
}
.nav.stacked > li {
float: none;
.btn.large .icon {
margin-top: 1px;
}
.nav.stacked > li > a {
margin-right: 0;
.btn.small {
padding: 5px 9px;
font-size: 11px;
line-height: 16px;
}
.tabs.stacked {
border-bottom: 0;
.btn.small .icon {
margin-top: -1px;
}
.tabs.stacked > li > a {
border: 1px solid #ddd;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
button.btn, input[type="submit"].btn {
*padding-top: 2px;
*padding-bottom: 2px;
}
.tabs.stacked > li:first-child > a {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
button.btn::-moz-focus-inner, input[type="submit"].btn::-moz-focus-inner {
padding: 0;
border: 0;
}
.tabs.stacked > li:last-child > a {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
button.btn.large, input[type="submit"].btn.large {
*padding-top: 7px;
*padding-bottom: 7px;
}
.tabs.stacked > li > a:hover {
border-color: #ddd;
z-index: 2;
button.btn.small, input[type="submit"].btn.small {
*padding-top: 3px;
*padding-bottom: 3px;
}
.pills.stacked > li > a {
margin-bottom: 3px;
.btn-group {
position: relative;
*zoom: 1;
*margin-left: .3em;
}
.pills.stacked > li:last-child > a {
margin-bottom: 1px;
.btn-group:before, .btn-group:after {
display: table;
content: "";
}
.pills .dropdown-menu, .tabs .dropdown-menu {
margin-top: 1px;
border-width: 1px;
.btn-group:after {
clear: both;
}
.pills .dropdown-menu {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
.btn-group:first-child {
*margin-left: 0;
}
.tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret {
border-top-color: #0088cc;
margin-top: 6px;
.btn-group + .btn-group {
margin-left: 5px;
}
.tabs .dropdown-toggle:hover .caret, .pills .dropdown-toggle:hover .caret {
border-top-color: #005580;
.btn-toolbar {
margin-top: 9px;
margin-bottom: 9px;
}
.tabs .active .dropdown-toggle .caret, .pills .active .dropdown-toggle .caret {
border-top-color: #333333;
.btn-toolbar .btn-group {
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
}
.nav > .dropdown.active > a:hover {
color: #000000;
cursor: pointer;
.btn-group .btn {
position: relative;
float: left;
margin-left: -1px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.tabs .open .dropdown-toggle, .pills .open .dropdown-toggle, .nav > .open.active > a:hover {
color: #ffffff;
background-color: #999999;
border-color: #999999;
.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;
}
.nav .open .caret, .nav .open.active .caret, .nav .open a:hover .caret {
border-top-color: #ffffff;
opacity: 1;
filter: alpha(opacity=100);
.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;
}
.tabs.stacked .open > a:hover {
border-color: #999999;
.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;
}
.tabbable {
*zoom: 1;
.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;
}
.tabbable:before, .tabbable:after {
display: table;
content: "";
.btn-group .btn:hover,
.btn-group .btn:focus,
.btn-group .btn:active,
.btn-group .btn.active {
z-index: 2;
}
.tabbable:after {
clear: both;
.btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle {
outline: 0;
}
.tabs-below .tabs, .tabs-right .tabs, .tabs-left .tabs {
border-bottom: 0;
.btn-group .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
-webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
*padding-top: 5px;
*padding-bottom: 5px;
}
.tab-content > .tab-pane, .pill-content > .pill-pane {
display: none;
.btn-group.open {
*z-index: 1000;
}
.tab-content > .active, .pill-content > .active {
.btn-group.open .dropdown-menu {
display: block;
margin-top: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.tabs-below .tabs {
border-top: 1px solid #ddd;
.btn-group.open .dropdown-toggle {
background-image: none;
-webkit-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
}
.tabs-below .tabs > li {
margin-top: -1px;
margin-bottom: 0;
.btn .caret {
margin-top: 7px;
margin-left: 0;
}
.tabs-below .tabs > li > a {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
.btn:hover .caret, .open.btn-group .caret {
opacity: 1;
filter: alpha(opacity=100);
}
.tabs-below .tabs > li > a:hover {
border-bottom-color: transparent;
border-top-color: #ddd;
.primary .caret,
.danger .caret,
.info .caret,
.success .caret {
border-top-color: #ffffff;
opacity: 0.75;
filter: alpha(opacity=75);
}
.tabs-below .tabs .active > a, .tabs-below .tabs .active > a:hover {
border-color: transparent #ddd #ddd #ddd;
.btn.small .caret {
margin-top: 4px;
}
.tabs-left .tabs > li, .tabs-right .tabs > li {
float: none;
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 18px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.tabs-left .tabs > li > a, .tabs-right .tabs > li > a {
min-width: 74px;
margin-right: 0;
margin-bottom: 3px;
.alert, .alert-heading {
color: #c09853;
}
.tabs-left .tabs {
float: left;
margin-right: 19px;
border-right: 1px solid #ddd;
.alert .close {
position: relative;
right: -21px;
line-height: 18px;
}
.tabs-left .tabs > li > a {
margin-right: -1px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
.alert-success {
background-color: #dff0d8;
border-color: #d6e9c6;
}
.tabs-left .tabs > li > a:hover {
border-color: #eeeeee #dddddd #eeeeee #eeeeee;
.alert-success, .alert-success .alert-heading {
color: #468847;
}
.tabs-left .tabs .active > a, .tabs-left .tabs .active > a:hover {
border-color: #ddd transparent #ddd #ddd;
*border-right-color: #ffffff;
.alert-danger, .alert-error {
background-color: #f2dede;
border-color: #eed3d7;
}
.tabs-right .tabs {
float: right;
margin-left: 19px;
border-left: 1px solid #ddd;
.alert-danger,
.alert-error,
.alert-danger .alert-heading,
.alert-error .alert-heading {
color: #b94a48;
}
.tabs-right .tabs > li > a {
margin-left: -1px;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
.alert-info {
background-color: #d9edf7;
border-color: #bce8f1;
}
.tabs-right .tabs > li > a:hover {
border-color: #eeeeee #eeeeee #eeeeee #dddddd;
.alert-info, .alert-info .alert-heading {
color: #3a87ad;
}
.tabs-right .tabs .active > a, .tabs-right .tabs .active > a:hover {
border-color: #ddd #ddd #ddd transparent;
*border-left-color: #ffffff;
.alert-block {
padding-top: 14px;
padding-bottom: 14px;
}
.navbar {
overflow: visible;
.alert-block > p, .alert-block > ul {
margin-bottom: 0;
}
.navbar-inner {
background-color: #222222;
background-color: #2c2c2c;
background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -ms-linear-gradient(top, #333333, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
background-image: -webkit-linear-gradient(top, #333333, #222222);
background-image: -o-linear-gradient(top, #333333, #222222);
background-image: linear-gradient(top, #333333, #222222);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
.alert-block p + p {
margin-top: 5px;
}
.navbar .brand:hover {
color: #ffffff;
text-decoration: none;
.nav {
margin-left: 0;
margin-bottom: 18px;
list-style: none;
}
.navbar .brand {
float: left;
.nav > li > a {
display: block;
padding: 8px 20px 12px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
line-height: 1;
color: #ffffff;
}
.navbar .navbar-text {
.nav > li > a:hover {
text-decoration: none;
background-color: #eeeeee;
}
.nav.list {
padding-left: 14px;
padding-right: 14px;
margin-bottom: 0;
line-height: 40px;
color: #999999;
}
.navbar .navbar-text a:hover {
color: #ffffff;
background-color: transparent;
.nav.list > li > a, .nav.list .nav-header {
display: block;
padding: 3px 15px;
margin-left: -15px;
margin-right: -15px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.navbar .btn, .navbar .btn-group {
margin-top: 5px;
.nav.list .nav-header {
font-size: 11px;
font-weight: bold;
line-height: 18px;
color: #999999;
text-transform: uppercase;
}
.navbar .btn-group .btn {
margin-top: 0;
.nav.list > li + .nav-header {
margin-top: 9px;
}
.navbar-form {
margin-bottom: 0;
.nav.list .active > a {
color: #ffffff;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
background-color: #0088cc;
}
.navbar-form input, .navbar-form select {
display: inline-block;
margin-top: 5px;
margin-bottom: 0;
.nav.list .icon {
margin-right: 2px;
}
.navbar-form .radio, .navbar-form .checkbox {
margin-top: 5px;
.tabs, .pills {
*zoom: 1;
}
.navbar-form input[type="image"], .navbar-form input[type="checkbox"], .navbar-form input[type="radio"] {
margin-top: 3px;
.tabs:before,
.pills:before,
.tabs:after,
.pills:after {
display: table;
content: "";
}
.navbar-search {
position: relative;
.tabs:after, .pills:after {
clear: both;
}
.tabs > li, .pills > li {
float: left;
margin-top: 6px;
margin-bottom: 0;
}
.navbar-search .search-query {
padding: 4px 9px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 1;
color: #ffffff;
color: rgba(255, 255, 255, 0.75);
background: #666;
background: rgba(255, 255, 255, 0.3);
border: 1px solid #111;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
.tabs > li > a, .pills > li > a {
padding-right: 12px;
padding-left: 12px;
margin-right: 2px;
line-height: 14px;
}
.navbar-search .search-query :-moz-placeholder {
color: #eeeeee;
.tabs {
border-bottom: 1px solid #ddd;
}
.navbar-search .search-query::-webkit-input-placeholder {
color: #eeeeee;
.tabs > li {
margin-bottom: -1px;
}
.navbar-search .search-query:hover {
color: #ffffff;
background-color: #999999;
background-color: rgba(255, 255, 255, 0.5);
.tabs > li > a {
padding-top: 9px;
padding-bottom: 9px;
border: 1px solid transparent;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.navbar-search .search-query:focus, .navbar-search .search-query.focused {
padding: 5px 10px;
color: #333333;
text-shadow: 0 1px 0 #ffffff;
.tabs > li > a:hover {
border-color: #eeeeee #eeeeee #dddddd;
}
.tabs > .active > a, .tabs > .active > a:hover {
color: #555555;
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;
border: 1px solid #ddd;
border-bottom-color: transparent;
cursor: default;
}
.navbar-static {
margin-bottom: 18px;
.pills > li > a {
padding-top: 8px;
padding-bottom: 8px;
margin-top: 2px;
margin-bottom: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.navbar-static .navbar-inner {
padding-left: 20px;
padding-right: 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
.pills .active > a, .pills .active > a:hover {
color: #ffffff;
background-color: #0088cc;
}
.navbar-fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
.nav.stacked > li {
float: none;
}
.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
.nav.stacked > li > a {
margin-right: 0;
}
.navbar .nav.pull-right {
float: right;
.tabs.stacked {
border-bottom: 0;
}
.navbar .nav > li {
display: block;
float: left;
.tabs.stacked > li > a {
border: 1px solid #ddd;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.navbar .nav > li > a {
float: none;
padding: 10px 10px 11px;
line-height: 19px;
color: #999999;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
.tabs.stacked > li:first-child > a {
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.navbar .nav > li > a:hover {
background-color: transparent;
color: #ffffff;
text-decoration: none;
.tabs.stacked > li:last-child > a {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.navbar .nav .active > a, .navbar .nav .active > a:hover {
color: #ffffff;
text-decoration: none;
background-color: #222222;
background-color: rgba(0, 0, 0, 0.5);
.tabs.stacked > li > a:hover {
border-color: #ddd;
z-index: 2;
}
.navbar .vertical-divider {
height: 40px;
width: 1px;
margin: 0 5px;
overflow: hidden;
background-color: #222222;
border-right: 1px solid #333333;
.pills.stacked > li > a {
margin-bottom: 3px;
}
.navbar .nav.pull-right {
margin-left: 10px;
margin-right: 0;
.pills.stacked > li:last-child > a {
margin-bottom: 1px;
}
.navbar .dropdown-menu {
.pills .dropdown-menu, .tabs .dropdown-menu {
margin-top: 1px;
border-width: 1px;
}
.pills .dropdown-menu {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.navbar .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;
.tabs .dropdown-toggle .caret, .pills .dropdown-toggle .caret {
border-top-color: #0088cc;
margin-top: 6px;
}
.navbar .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;
.tabs .dropdown-toggle:hover .caret, .pills .dropdown-toggle:hover .caret {
border-top-color: #005580;
}
.navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret {
border-top-color: #ffffff;
.tabs .active .dropdown-toggle .caret, .pills .active .dropdown-toggle .caret {
border-top-color: #333333;
}
.navbar .nav .active .caret {
.nav > .dropdown.active > a:hover {
color: #000000;
cursor: pointer;
}
.tabs .open .dropdown-toggle, .pills .open .dropdown-toggle, .nav > .open.active > a:hover {
color: #ffffff;
background-color: #999999;
border-color: #999999;
}
.nav .open .caret, .nav .open.active .caret, .nav .open a:hover .caret {
border-top-color: #ffffff;
opacity: 1;
filter: alpha(opacity=100);
}
.navbar .nav .open > .dropdown-toggle, .navbar .nav .active > .dropdown-toggle, .navbar .nav .open.active > .dropdown-toggle {
background-color: transparent;
.tabs.stacked .open > a:hover {
border-color: #999999;
}
.navbar .nav .active > .dropdown-toggle:hover {
color: #ffffff;
.tabbable {
*zoom: 1;
}
.navbar .nav.pull-right .dropdown-menu {
left: auto;
right: 0;
.tabbable:before, .tabbable:after {
display: table;
content: "";
}
.navbar .nav.pull-right .dropdown-menu:before {
left: auto;
right: 12px;
.tabbable:after {
clear: both;
}
.navbar .nav.pull-right .dropdown-menu:after {
left: auto;
right: 13px;
.tabs-below .tabs, .tabs-right .tabs, .tabs-left .tabs {
border-bottom: 0;
}
.breadcrumb {
padding: 7px 14px;
margin: 0 0 18px;
background-color: #fbfbfb;
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f5f5f5));
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(top, #ffffff, #f5f5f5);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
.tab-content > .tab-pane, .pill-content > .pill-pane {
display: none;
}
.breadcrumb li {
display: inline;
text-shadow: 0 1px 0 #ffffff;
.tab-content > .active, .pill-content > .active {
display: block;
}
.breadcrumb .divider {
padding: 0 5px;
color: #999999;
.tabs-below .tabs {
border-top: 1px solid #ddd;
}
.breadcrumb .active a {
color: #333333;
.tabs-below .tabs > li {
margin-top: -1px;
margin-bottom: 0;
}
.pagination {
height: 36px;
margin: 18px 0;
.tabs-below .tabs > li > a {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
.pagination ul {
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
margin-left: 0;
margin-bottom: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
.tabs-below .tabs > li > a:hover {
border-bottom-color: transparent;
border-top-color: #ddd;
}
.pagination li {
display: inline;
.tabs-below .tabs .active > a, .tabs-below .tabs .active > a:hover {
border-color: transparent #ddd #ddd #ddd;
}
.pagination a {
.tabs-left .tabs > li, .tabs-right .tabs > li {
float: none;
}
.tabs-left .tabs > li > a, .tabs-right .tabs > li > a {
min-width: 74px;
margin-right: 0;
margin-bottom: 3px;
}
.tabs-left .tabs {
float: left;
padding: 0 14px;
line-height: 34px;
text-decoration: none;
border: 1px solid #ddd;
border-left-width: 0;
margin-right: 19px;
border-right: 1px solid #ddd;
}
.pagination a:hover, .pagination .active a {
background-color: #f5f5f5;
.tabs-left .tabs > li > a {
margin-right: -1px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px;
border-radius: 4px 0 0 4px;
}
.pagination .active a {
color: #999999;
.tabs-left .tabs > li > a:hover {
border-color: #eeeeee #dddddd #eeeeee #eeeeee;
}
.pagination .disabled a, .pagination .disabled a:hover {
color: #999999;
background-color: transparent;
cursor: default;
.tabs-left .tabs .active > a, .tabs-left .tabs .active > a:hover {
border-color: #ddd transparent #ddd #ddd;
*border-right-color: #ffffff;
}
.pagination li:first-child a {
border-left-width: 1px;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
.tabs-right .tabs {
float: right;
margin-left: 19px;
border-left: 1px solid #ddd;
}
.pagination li:last-child a {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
.tabs-right .tabs > li > a {
margin-left: -1px;
-webkit-border-radius: 0 4px 4px 0;
-moz-border-radius: 0 4px 4px 0;
border-radius: 0 4px 4px 0;
}
.pagination-centered {
text-align: center;
.tabs-right .tabs > li > a:hover {
border-color: #eeeeee #eeeeee #eeeeee #dddddd;
}
.pagination-right {
text-align: right;
.tabs-right .tabs .active > a, .tabs-right .tabs .active > a:hover {
border-color: #ddd #ddd #ddd transparent;
*border-left-color: #ffffff;
}
.pager {
margin-left: 0;
margin-bottom: 18px;
list-style: none;
text-align: center;
*zoom: 1;
.navbar {
overflow: visible;
}
.pager:before, .pager:after {
display: table;
content: "";
.navbar-inner {
background-color: #222222;
background-color: #2c2c2c;
background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -ms-linear-gradient(top, #333333, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
background-image: -webkit-linear-gradient(top, #333333, #222222);
background-image: -o-linear-gradient(top, #333333, #222222);
background-image: linear-gradient(top, #333333, #222222);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', GradientType=0);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}
.pager:after {
clear: both;
.btn-navbar {
display: none;
float: right;
padding: 7px 10px;
margin-left: 10px;
margin-right: 10px;
background-color: #2c2c2c;
background-image: -moz-linear-gradient(top, #333333, #222222);
background-image: -ms-linear-gradient(top, #333333, #222222);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#222222));
background-image: -webkit-linear-gradient(top, #333333, #222222);
background-image: -o-linear-gradient(top, #333333, #222222);
background-image: linear-gradient(top, #333333, #222222);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#222222', 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);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075);
}
.btn-navbar:hover,
.btn-navbar:active,
.btn-navbar.active,
.btn-navbar.disabled,
.btn-navbar[disabled] {
background-color: #222222;
}
.pager li {
display: inline;
.btn-navbar:active, .btn-navbar.active {
background-color: #080808 \9;
}
.pager a {
display: inline-block;
padding: 6px 15px;
.btn-navbar .i-bar {
display: block;
width: 18px;
height: 2px;
background-color: #f5f5f5;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-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 .i-bar + .i-bar {
margin-top: 3px;
}
.pager .next a {
float: right;
.navbar .brand:hover {
color: #ffffff;
text-decoration: none;
}
.pager .previous a {
.navbar .brand {
float: left;
display: block;
padding: 8px 20px 12px;
margin-left: -20px;
font-size: 20px;
font-weight: 200;
line-height: 1;
color: #ffffff;
}
.modal-open .dropdown-menu {
z-index: 2050;
}
.modal-open .dropdown.open {
*z-index: 2050;
}
.modal-open .popover {
z-index: 2060;
}
.modal-open .tooltip {
z-index: 2070;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
}
.modal-backdrop.fade {
opacity: 0;
.navbar .navbar-text {
margin-bottom: 0;
line-height: 40px;
color: #999999;
}
.modal-backdrop, .modal-backdrop.fade.in {
opacity: 0.8;
filter: alpha(opacity=80);
.navbar .navbar-text a:hover {
color: #ffffff;
background-color: transparent;
}
.modal {
position: fixed;
top: 50%;
left: 50%;
z-index: 1050;
max-height: 500px;
overflow: auto;
width: 560px;
margin: -250px 0 0 -280px;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
/* IE6-7 */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
.navbar .btn, .navbar .btn-group {
margin-top: 5px;
}
.modal.fade {
-webkit-transition: opacity .3s linear, top .3s ease-out;
-moz-transition: opacity .3s linear, top .3s ease-out;
-ms-transition: opacity .3s linear, top .3s ease-out;
-o-transition: opacity .3s linear, top .3s ease-out;
transition: opacity .3s linear, top .3s ease-out;
top: -25%;
.navbar .btn-group .btn {
margin-top: 0;
}
.modal.fade.in {
top: 50%;
.navbar-form {
margin-bottom: 0;
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
.navbar-form input, .navbar-form select {
display: inline-block;
margin-top: 5px;
margin-bottom: 0;
}
.modal-header .close {
margin-top: 2px;
.navbar-form .radio, .navbar-form .checkbox {
margin-top: 5px;
}
.modal-body {
padding: 15px;
.navbar-form input[type="image"], .navbar-form input[type="checkbox"], .navbar-form input[type="radio"] {
margin-top: 3px;
}
.modal-footer {
padding: 14px 15px 15px;
.navbar-search {
position: relative;
float: left;
margin-top: 6px;
margin-bottom: 0;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
*zoom: 1;
}
.modal-footer:before, .modal-footer:after {
display: table;
content: "";
.navbar-search .search-query {
padding: 4px 9px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 1;
color: #ffffff;
color: rgba(255, 255, 255, 0.75);
background: #666;
background: rgba(255, 255, 255, 0.3);
border: 1px solid #111;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 0px rgba(255, 255, 255, 0.15);
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.modal-footer:after {
clear: both;
.navbar-search .search-query :-moz-placeholder {
color: #eeeeee;
}
.modal-footer .btn {
float: right;
margin-left: 5px;
margin-bottom: 0;
.navbar-search .search-query::-webkit-input-placeholder {
color: #eeeeee;
}
.tooltip {
position: absolute;
z-index: 1020;
display: block;
visibility: visible;
padding: 5px;
font-size: 11px;
opacity: 0;
filter: alpha(opacity=0);
.navbar-search .search-query:hover {
color: #ffffff;
background-color: #999999;
background-color: rgba(255, 255, 255, 0.5);
}
.tooltip.in {
opacity: 0.8;
filter: alpha(opacity=80);
.navbar-search .search-query:focus, .navbar-search .search-query.focused {
padding: 5px 10px;
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;
}
.tooltip.top {
margin-top: -2px;
.navbar-static {
margin-bottom: 18px;
}
.tooltip.right {
margin-left: 2px;
.navbar-static .navbar-inner {
padding-left: 20px;
padding-right: 20px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.tooltip.bottom {
margin-top: 2px;
.navbar-fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
}
.tooltip.left {
margin-left: -2px;
.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0 10px 0 0;
}
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000000;
.navbar .nav.pull-right {
float: right;
}
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #000000;
.navbar .nav > li {
display: block;
float: left;
}
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #000000;
.navbar .nav > li > a {
float: none;
padding: 10px 10px 11px;
line-height: 19px;
color: #999999;
text-decoration: none;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #000000;
.navbar .nav > li > a:hover {
background-color: transparent;
color: #ffffff;
text-decoration: none;
}
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
.navbar .nav .active > a, .navbar .nav .active > a:hover {
color: #ffffff;
text-align: center;
text-decoration: none;
background-color: #000000;
background-color: #222222;
background-color: rgba(0, 0, 0, 0.5);
}
.navbar .vertical-divider {
height: 40px;
width: 1px;
margin: 0 5px;
overflow: hidden;
background-color: #222222;
border-right: 1px solid #333333;
}
.navbar .nav.pull-right {
margin-left: 10px;
margin-right: 0;
}
.navbar .dropdown-menu {
margin-top: 1px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
}
.popover {
.navbar .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: 0;
left: 0;
z-index: 1010;
display: none;
padding: 5px;
}
.popover.top {
margin-top: -5px;
}
.popover.right {
margin-left: 5px;
}
.popover.bottom {
margin-top: 5px;
}
.popover.left {
margin-left: -5px;
}
.popover.top .arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000000;
}
.popover.right .arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #000000;
}
.popover.bottom .arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #000000;
}
.popover.left .arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #000000;
top: -7px;
left: 9px;
}
.popover .arrow {
.navbar .dropdown-menu:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
position: absolute;
width: 0;
height: 0;
}
.popover .inner {
padding: 3px;
width: 280px;
overflow: hidden;
background: #000000;
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
top: -6px;
left: 10px;
}
.popover .title {
padding: 9px 15px;
line-height: 1;
background-color: #f5f5f5;
border-bottom: 1px solid #eee;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
.navbar .nav .dropdown-toggle .caret, .navbar .nav .open.dropdown .caret {
border-top-color: #ffffff;
}
.popover .content {
padding: 14px;
background-color: #ffffff;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
.navbar .nav .active .caret {
opacity: 1;
filter: alpha(opacity=100);
}
.popover .content p, .popover .content ul, .popover .content ol {
margin-bottom: 0;
.navbar .nav .open > .dropdown-toggle, .navbar .nav .active > .dropdown-toggle, .navbar .nav .open.active > .dropdown-toggle {
background-color: transparent;
}
.btn.primary,
.btn.primary:hover,
.btn.danger,
.btn.danger:hover,
.btn.success,
.btn.success:hover,
.btn.info,
.btn.info:hover {
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
.navbar .nav .active > .dropdown-toggle:hover {
color: #ffffff;
}
.btn.primary.active,
.btn.danger.active,
.btn.success.active,
.btn.info.active {
color: rgba(255, 255, 255, 0.75);
}
.btn.primary {
background-color: #006dcc;
background-image: -moz-linear-gradient(top, #0088cc, #0044cc);
background-image: -ms-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(top, #0088cc, #0044cc);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', 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);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn.primary:hover,
.btn.primary:active,
.btn.primary.active,
.btn.primary.disabled,
.btn.primary[disabled] {
background-color: #0044cc;
}
.btn.primary:active, .btn.primary.active {
background-color: #003399 \9;
}
.btn.danger {
background-color: #da4f49;
background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
background-image: -ms-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(top, #ee5f5b, #bd362f);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#bd362f', 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);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn.danger:hover,
.btn.danger:active,
.btn.danger.active,
.btn.danger.disabled,
.btn.danger[disabled] {
background-color: #bd362f;
}
.btn.danger:active, .btn.danger.active {
background-color: #942a25 \9;
}
.btn.success {
background-color: #5bb75b;
background-image: -moz-linear-gradient(top, #62c462, #51a351);
background-image: -ms-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(top, #62c462, #51a351);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#51a351', 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);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn.success:hover,
.btn.success:active,
.btn.success.active,
.btn.success.disabled,
.btn.success[disabled] {
background-color: #51a351;
}
.btn.success:active, .btn.success.active {
background-color: #408140 \9;
}
.btn.info {
background-color: #49afcd;
background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
background-image: -ms-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(top, #5bc0de, #2f96b4);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', 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);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
.navbar .nav.pull-right .dropdown-menu {
left: auto;
right: 0;
}
.btn.info:hover,
.btn.info:active,
.btn.info.active,
.btn.info.disabled,
.btn.info[disabled] {
background-color: #2f96b4;
.navbar .nav.pull-right .dropdown-menu:before {
left: auto;
right: 12px;
}
.btn.info:active, .btn.info.active {
background-color: #24748c \9;
.navbar .nav.pull-right .dropdown-menu:after {
left: auto;
right: 13px;
}
.btn {
display: inline-block;
padding: 4px 10px 4px;
font-size: 13px;
line-height: 18px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-color: #fafafa;
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
background-repeat: no-repeat;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
border: 1px solid #ccc;
border-bottom-color: #bbb;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
cursor: pointer;
*margin-left: .3em;
.breadcrumb {
padding: 7px 14px;
margin: 0 0 18px;
background-color: #fbfbfb;
background-image: -moz-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -ms-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f5f5f5));
background-image: -webkit-linear-gradient(top, #ffffff, #f5f5f5);
background-image: -o-linear-gradient(top, #ffffff, #f5f5f5);
background-image: linear-gradient(top, #ffffff, #f5f5f5);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f5f5f5', GradientType=0);
border: 1px solid #ddd;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
}
.btn:first-child {
*margin-left: 0;
.breadcrumb li {
display: inline;
text-shadow: 0 1px 0 #ffffff;
}
.btn:hover {
.breadcrumb .divider {
padding: 0 5px;
color: #999999;
}
.breadcrumb .active a {
color: #333333;
text-decoration: none;
background-color: #e6e6e6;
background-position: 0 -15px;
-webkit-transition: background-position 0.1s linear;
-moz-transition: background-position 0.1s linear;
-ms-transition: background-position 0.1s linear;
-o-transition: background-position 0.1s linear;
transition: background-position 0.1s linear;
}
.btn:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
.pagination {
height: 36px;
margin: 18px 0;
}
.btn.active, .btn:active {
background-image: none;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
background-color: #e6e6e6;
background-color: #d9d9d9 \9;
color: rgba(0, 0, 0, 0.5);
outline: 0;
.pagination ul {
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
*zoom: 1;
margin-left: 0;
margin-bottom: 0;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn.disabled, .btn[disabled] {
cursor: default;
background-image: none;
background-color: #e6e6e6;
opacity: 0.65;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
.pagination li {
display: inline;
}
.btn.large {
padding: 9px 14px;
font-size: 15px;
line-height: normal;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
.pagination a {
float: left;
padding: 0 14px;
line-height: 34px;
text-decoration: none;
border: 1px solid #ddd;
border-left-width: 0;
}
.btn.large .icon {
margin-top: 1px;
.pagination a:hover, .pagination .active a {
background-color: #f5f5f5;
}
.btn.small {
padding: 5px 9px;
font-size: 11px;
line-height: 16px;
.pagination .active a {
color: #999999;
}
.btn.small .icon {
margin-top: -1px;
.pagination .disabled a, .pagination .disabled a:hover {
color: #999999;
background-color: transparent;
cursor: default;
}
button.btn, input[type="submit"].btn {
*padding-top: 2px;
*padding-bottom: 2px;
.pagination li:first-child a {
border-left-width: 1px;
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
button.btn::-moz-focus-inner, input[type="submit"].btn::-moz-focus-inner {
padding: 0;
border: 0;
.pagination li:last-child a {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
button.btn.large, input[type="submit"].btn.large {
*padding-top: 7px;
*padding-bottom: 7px;
.pagination-centered {
text-align: center;
}
button.btn.small, input[type="submit"].btn.small {
*padding-top: 3px;
*padding-bottom: 3px;
.pagination-right {
text-align: right;
}
.btn-group {
position: relative;
.pager {
margin-left: 0;
margin-bottom: 18px;
list-style: none;
text-align: center;
*zoom: 1;
*margin-left: .3em;
}
.btn-group:before, .btn-group:after {
.pager:before, .pager:after {
display: table;
content: "";
}
.btn-group:after {
.pager:after {
clear: both;
}
.btn-group:first-child {
*margin-left: 0;
.pager li {
display: inline;
}
.btn-group + .btn-group {
margin-left: 5px;
.pager a {
display: inline-block;
padding: 6px 15px;
background-color: #f5f5f5;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
.btn-toolbar {
margin-top: 9px;
margin-bottom: 9px;
.pager .next a {
float: right;
}
.btn-toolbar .btn-group {
display: inline-block;
*display: inline;
/* IE7 inline-block hack */
.pager .previous a {
float: left;
}
.modal-open .dropdown-menu {
z-index: 2050;
}
.modal-open .dropdown.open {
*z-index: 2050;
}
.modal-open .popover {
z-index: 2060;
}
.modal-open .tooltip {
z-index: 2070;
}
.modal-backdrop {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #000000;
}
.modal-backdrop.fade {
opacity: 0;
}
.modal-backdrop, .modal-backdrop.fade.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.modal {
position: fixed;
top: 50%;
left: 50%;
z-index: 1050;
max-height: 500px;
overflow: auto;
width: 560px;
margin: -250px 0 0 -280px;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
*border: 1px solid #999;
/* IE6-7 */
*zoom: 1;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.btn-group .btn {
position: relative;
float: left;
margin-left: -1px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
.modal.fade {
-webkit-transition: opacity .3s linear, top .3s ease-out;
-moz-transition: opacity .3s linear, top .3s ease-out;
-ms-transition: opacity .3s linear, top .3s ease-out;
-o-transition: opacity .3s linear, top .3s ease-out;
transition: opacity .3s linear, top .3s ease-out;
top: -25%;
}
.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;
.modal.fade.in {
top: 50%;
}
.modal-header {
padding: 9px 15px;
border-bottom: 1px solid #eee;
}
.modal-header .close {
margin-top: 2px;
}
.modal-body {
padding: 15px;
}
.modal-footer {
padding: 14px 15px 15px;
margin-bottom: 0;
background-color: #f5f5f5;
border-top: 1px solid #ddd;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
-webkit-box-shadow: inset 0 1px 0 #ffffff;
-moz-box-shadow: inset 0 1px 0 #ffffff;
box-shadow: inset 0 1px 0 #ffffff;
*zoom: 1;
}
.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;
.modal-footer:before, .modal-footer:after {
display: table;
content: "";
}
.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;
.modal-footer:after {
clear: both;
}
.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;
.modal-footer .btn {
float: right;
margin-left: 5px;
margin-bottom: 0;
}
.btn-group .btn:hover,
.btn-group .btn:focus,
.btn-group .btn:active,
.btn-group .btn.active {
z-index: 2;
.tooltip {
position: absolute;
z-index: 1020;
display: block;
visibility: visible;
padding: 5px;
font-size: 11px;
opacity: 0;
filter: alpha(opacity=0);
}
.btn-group .dropdown-toggle:active, .btn-group.open .dropdown-toggle {
outline: 0;
.tooltip.in {
opacity: 0.8;
filter: alpha(opacity=80);
}
.btn-group .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
-webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
*padding-top: 5px;
*padding-bottom: 5px;
.tooltip.top {
margin-top: -2px;
}
.btn-group.open {
*z-index: 1000;
.tooltip.right {
margin-left: 2px;
}
.btn-group.open .dropdown-menu {
display: block;
margin-top: 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
.tooltip.bottom {
margin-top: 2px;
}
.btn-group.open .dropdown-toggle {
background-image: none;
-webkit-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
.tooltip.left {
margin-left: -2px;
}
.btn .caret {
margin-top: 7px;
margin-left: 0;
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000000;
}
.btn:hover .caret, .open.btn-group .caret {
opacity: 1;
filter: alpha(opacity=100);
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #000000;
}
.primary .caret,
.danger .caret,
.info .caret,
.success .caret {
border-top-color: #ffffff;
opacity: 0.75;
filter: alpha(opacity=75);
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #000000;
}
.btn.small .caret {
margin-top: 4px;
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #000000;
}
.alert {
padding: 8px 35px 8px 14px;
margin-bottom: 18px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #fcf8e3;
border: 1px solid #fbeed5;
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #ffffff;
text-align: center;
text-decoration: none;
background-color: #000000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.alert, .alert-heading {
color: #c09853;
.tooltip-arrow {
position: absolute;
width: 0;
height: 0;
}
.alert .close {
position: relative;
right: -21px;
line-height: 18px;
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1010;
display: none;
padding: 5px;
}
.alert-success {
background-color: #dff0d8;
border-color: #d6e9c6;
.popover.top {
margin-top: -5px;
}
.alert-success, .alert-success .alert-heading {
color: #468847;
.popover.right {
margin-left: 5px;
}
.alert-danger, .alert-error {
background-color: #f2dede;
border-color: #eed3d7;
.popover.bottom {
margin-top: 5px;
}
.alert-danger,
.alert-error,
.alert-danger .alert-heading,
.alert-error .alert-heading {
color: #b94a48;
.popover.left {
margin-left: -5px;
}
.alert-info {
background-color: #d9edf7;
border-color: #bce8f1;
.popover.top .arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #000000;
}
.alert-info, .alert-info .alert-heading {
color: #3a87ad;
.popover.right .arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid #000000;
}
.alert-block {
padding-top: 14px;
padding-bottom: 14px;
.popover.bottom .arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid #000000;
}
.alert-block > p, .alert-block > ul {
margin-bottom: 0;
.popover.left .arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #000000;
}
.alert-block p + p {
margin-top: 5px;
.popover .arrow {
position: absolute;
width: 0;
height: 0;
}
.popover .inner {
padding: 3px;
width: 280px;
overflow: hidden;
background: #000000;
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}
.popover .title {
padding: 9px 15px;
line-height: 1;
background-color: #f5f5f5;
border-bottom: 1px solid #eee;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
.popover .content {
padding: 14px;
background-color: #ffffff;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
}
.popover .content p, .popover .content ul, .popover .content ol {
margin-bottom: 0;
}
.thumbnails {
margin-left: -20px;
......
docs/base-css.html
View file @ 23e076c1
......@@ -33,6 +33,11 @@
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav">
<li class="">
......
docs/components.html
View file @ 23e076c1
......@@ -33,6 +33,11 @@
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav">
<li class="">
......
docs/download.html
View file @ 23e076c1
......@@ -33,6 +33,11 @@
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav">
<li class="">
......
docs/examples.html
View file @ 23e076c1
......@@ -33,6 +33,11 @@
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav">
<li class="">
......
docs/index.html
View file @ 23e076c1
......@@ -33,6 +33,11 @@
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav">
<li class="active">
......
docs/javascript.html
View file @ 23e076c1
......@@ -33,6 +33,11 @@
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav">
<li class="">
......
docs/less.html
View file @ 23e076c1
......@@ -33,6 +33,11 @@
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav">
<li class="">
......
docs/scaffolding.html
View file @ 23e076c1
......@@ -33,6 +33,11 @@
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav">
<li class="">
......
docs/templates/layout.mustache
View file @ 23e076c1
......@@ -33,6 +33,11 @@
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav">
<li class="{{index}}">
......
docs/upgrading.html
View file @ 23e076c1
......@@ -33,6 +33,11 @@
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar">
<span class="i-bar"></span>
<span class="i-bar"></span>
<span class="i-bar"></span>
</a>
<a class="brand" href="./index.html">Bootstrap</a>
<ul class="nav">
<li class="">
......
less/bootstrap.less
View file @ 23e076c1
......@@ -33,6 +33,11 @@
@import "component-animations.less";
@import "close.less";
// Components: Buttons & Alerts
@import "buttons.less";
@import "button-groups.less";
@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
// Components: Nav
@import "navs.less";
@import "navbar.less";
......@@ -45,11 +50,6 @@
@import "tooltip.less";
@import "popovers.less";
// Components: Buttons & Alerts
@import "buttons.less";
@import "button-groups.less";
@import "alerts.less"; // Note: alerts share common CSS with buttons and thus have styles in buttons.less
// Components: Misc
@import "thumbnails.less";
@import "labels.less";
......
less/navbar.less
View file @ 23e076c1
......@@ -16,6 +16,29 @@
.box-shadow(@shadow);
}
// Navbar button for toggling navbar items in responsive layouts
.btn-navbar {
display: none;
float: right;
padding: 7px 10px;
margin-left: 10px;
margin-right: 10px;
.buttonBackground(@navbarBackgroundHighlight, @navbarBackground);
@shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075);
.box-shadow(@shadow);
}
.btn-navbar .i-bar {
display: block;
width: 18px;
height: 2px;
background-color: #f5f5f5;
.border-radius(1px);
.box-shadow(0 1px 0 rgba(0,0,0,.25));
}
.btn-navbar .i-bar + .i-bar {
margin-top: 3px;
}
// Brand, links, text, and buttons
.navbar {
// Hover and active states
......
less/responsive.less
View file @ 23e076c1
......@@ -127,6 +127,11 @@
margin: 0;
}
// Navbar button
.btn-navbar {
display: block;
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment