From: Mark Otto Date: Sat, 28 Jan 2012 23:09:23 +0000 (-0800) Subject: add in a navbar button for toggling the nav items X-Git-Tag: v2.0.0~6^2~74^2 X-Git-Url: http://git.ipfire.org/gitweb.cgi?a=commitdiff_plain;h=23e076c1bb73c4950d473cb36218937b2607bc13;p=thirdparty%2Fbootstrap.git add in a navbar button for toggling the nav items --- diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 19c465e445..3731713e82 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -86,6 +86,9 @@ width: auto; margin: 0; } + .btn-navbar { + display: block; + } } @media (min-width: 768px) and (max-width: 940px) { .container { diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 7b47aebef3..43181db38c 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -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; diff --git a/docs/base-css.html b/docs/base-css.html index 10f3db03dc..aa0ac664fc 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -33,6 +33,11 @@