/**
  Copyright 2009 Google Inc.

  Licensed under the Apache License, Version 2.0 (the 'License')
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an 'AS IS' BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
 */

/**
 * Color Map
 #4291bf => darkish-blue for buttons and some text.
 #e8a63d => orange for the nav.
 */

body {
  font: 87%/1.4 Arial, sans;
  padding: 15px;
  margin: 0;
}

h3 {
  margin: 2px 0;
}

a {
 color: #4291bf;
}
a:active {
 color: #e8a63d;
}
a:visited {
 color: #4291bf;
}
sup {
  font-size: 70%;
  color: green;
  margin-left: .4em;
}

/** General styles **/
.bs-compact {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bs-ir span {
  position: absolute;
  top: -9999px;
}

.bs-list-horz li {
  float: left;
}

.bs-btn-c {
  margin-top: 16px;
}
.bs-btn,
a.bs-btn,
.bs-btn-disabled {
  background: #4291bf url(/static/img/gradients.png) 0 -43px repeat-x;
  border: 0;
  border-bottom: 1px solid #555;
  padding: 5px 25px;
  text-decoration: none;
  color: #fff;
  font-size: 150%;
  font-weight: bold;
  text-shadow: 0 1px 2px #444;
  white-space: nowrap;
  border-radius: 8px;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-box-shadow: 0 2px 2px rgba(102, 102, 102, .4);
  -webkit-box-shadow: 0 2px 2px rgba(102, 102, 102, .4);
}
.bs-btn-disabled {
  background: #222;
}
.bs-btn:hover,
.bs-btn:focus {
  text-decoration: underline;
  cursor: pointer;
}
.bs-btn-arr {
  font-size: 80%;
}

h3 .bs-btn {
  font-size: 80%;
  font-style: normal;
  margin: 0 0 0 1em;
}

.bs-btn-del {
  background: red;
  padding: 5px 10px;
  font-size: 100%;
}
.bs-btn ~ .bs-btn-del {
  margin-left: 2em;
}

p.bs-youcan {
  width: 600px;
}
.bs-youcan dd {
  margin-bottom: 1em;
  width: 500px;
  margin-left: 40px;
}

/* chrome frame checkbox */
#bs-cf-enabled {
  margin: 0 0 0 .7em;
}
#bs-cf-c label {
  margin: 0 0 0 .2em;
}
#bs-autorun-msg {
  background: #aaa;
  color: #fff;
  opacity: .9;
  border: 1px solid #333;
  border-top: 0;
  font-weight: bold;
  padding: 10px 20px 15px;
  position: absolute;
  z-index: 99;
  top: 0;
  left: 33%;
  text-shadow: 0 1px 2px #444;
  box-shadow: 0 2px 2px rgba(102, 102, 102, .4);
  -moz-box-shadow: 0 2px 2px rgba(102, 102, 102, .4);
  -webkit-box-shadow: 0 2px 2px rgba(102, 102, 102, .4);
  -moz-border-radius-bottomright: 15px;
  -moz-border-radius-bottomleft: 15px;
  -webkit-border-bottom-right-radius: 15px;
  -webkit-border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}
#bs-runtest-c {
  margin: 0;
}
#bs-test-iframe {
  margin-top: 1em;
  border: 1px solid #ccc;
  background: #c7e3f0;
}

.bs-admin {
  font-size: 80%;
  color: darkred !important;
  text-decoration: none;
}

/** AllTests **/
#bs-alltests dl {
  margin-top: 2em;
}
#bs-alltests dd {
  margin-top: 1em;
}
#bs-alltests .bs-btn {
  font-weight: bold;
  font-size: 150%;
}

/** TopNav **/
#bs-logo {
  margin: 0;
  float: left;
}
#bs-logo a {
  display: block;
  background: url(/static/img/logo.png) 0 0 no-repeat;
  width: 232px;
  height: 39px;
  margin: 0 20px 0 0;
}
#bs-nav {
  overflow: hidden;
  padding: 2px 0 0;
  background: #f90;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-box-shadow: 0 2px 2px rgba(102, 102, 102, .4);
  -webkit-box-shadow: 0 2px 2px rgba(102, 102, 102, .4);
}
#bs-nav-cats {
  float: left;
  width: auto;
  margin: 0 0 0 10px;
}
#bs-nav a,
#bs-nav span {
  font-size: 1.1em;
  color: #fff;
  _color: #000;
  text-shadow: 0 1px 2px #444;
  font-weight: bold;
  text-decoration: none;
  padding-right: .4em;
  margin-right: .2em;
  white-space: nowrap;
}
#bs-nav a:hover,
#bs-nav a:focus {
  text-decoration: underline;
}
#bs-nav-sub a,
#bs-nav-sub span {
  font-size: 80%;
}
#bs-nav-sub .bs-nav-settings {
  font-size: 80%;
  padding: 0;
}
#bs-nav-sub a.bs-nav-settings {
  text-decoration: underline;
  margin-right: .8em;
}
#bs-nav-cats li {
  margin: 0 .5em 0 0;
}
#bs-nav-cats a {
  display: block;
  width: auto;
  padding: 3px 5px;
  text-decoration: none;
}
#bs-nav-cats a:hover,
#bs-nav-cats a:focus {
  text-decoration: none;
}
#bs-nav-cats li ul {
  display: none;
  position: absolute;
  width: 7em;
  background: #f90;
  border: 1px solid #ccc;
  border-top: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 10px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  -webkit-border-radius: 10px;
  -webkit-border-top-right-radius: 0;
  -webkit-border-top-left-radius: 0;
  -moz-border-radius: 10px;
  -moz-border-radius-topright: 0;
  -moz-border-radius-topleft: 0;
  box-shadow: 0 1px 1px rgba(102, 102, 102, .4);
  -moz-box-shadow: 0 1px 1px rgba(102, 102, 102, .4);
  -webkit-box-shadow: 0 1px 1px rgba(102, 102, 102, .4);
}
#bs-nav-cats li:hover ul {
  display: block;
  font-size: 90%;
  line-height: 1.2;
}

#bs-nav-cats li:hover a {
  color: #222;
  text-shadow: 0 1px 2px #fff;
  background: #eee;
  border-radius: 5px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  -webkit-border-radius: 5px;
  -webkit-border-bottom-right-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  -moz-border-radius: 5px;
  -moz-border-radius-bottomright: 0;
  -moz-border-radius-bottomleft: 0;
}
#bs-nav-cats li:hover li a {
  background: #f90;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
}
#bs-nav-cats li li.bs-last,
#bs-nav-cats li li.bs-last a {
  border-radius: 10px;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius-topright: 0;
  -moz-border-radius-topleft: 0;
  -webkit-border-top-right-radius: 0;
  -webkit-border-top-left-radius: 0;
}
#bs-nav-cats li:hover li a:hover,
#bs-nav-cats li:hover li a:focus {
  background: #eee;
}
#bs-nav-cats li li {
  float: none;
  padding: 0;
  margin: 0;
}
#bs-nav-cats li li a {
  margin: 0;
}


.bs-bc {
  float: right;
  margin-right: 7px;
}

#bs-body {
  padding: 30px 0 0;
}

/** Footer **/
#bs-foot {
  margin: 30px;
  border-top: 1px solid #ccc;
  padding-top: 6px;
  font-size: 80%;
  text-align: center;
}

/**
 * g-section fundamentally has to clear floats. There are many ways to do this.
 * This technique is nice because it doesn't rely on overflow: hidden, which
 * has the potential to hide your content in situations where a fixed size
 * node takes up too much space (like a big table, or a text input or image.
 * Works in Webkit, IE8, and FF3.
 */
.g-section {
  width: 100%;
  vertical-align: top;
  display: inline-block;
}

/**
 * IE7-only hack. Nicely IE7 will clear floats with just block display
 * and hasLayout.
 */
*:first-child+html .g-section {
  display: block;
}

/**
 * IE6 cannot hang with overflow: visible. If we use the IE7 display block
 * trick in IE6 we get severe float drop in nested grids.
 */
* html .g-section {
  overflow: hidden;
}

/* FF2 can't actually hang with overflow: visible. */
@-moz-document url-prefix() {
  .g-section {
    overflow: hidden;
  }
}

/**
 * FF3 now needs to be reset after the previous block which affects it as well.
 * We target the tt element in this hack because no one uses it.
 */
@-moz-document url-prefix() {
  .g-section,tt:default {
    overflow: visible;
  }
}

/* Forces "hasLayout" fixing a gamut of bugs in <= IE7. */
.g-section,
.g-unit {
  zoom: 1;
}

#bs-nav .g-unit {
  width: 29.999%;
  float: left;
  text-align: right;
}
#bs-nav .g-first {
  width: 69.999%;
  text-align: left;
}

html>body .goog-inline-block {
  display: -moz-inline-box; /* This is ignored by FF3 and later*/
  display: inline-block; /* This is ignored by pre-FF3 Gecko */
}
.goog-inline-block {
  position: relative;
  display: inline-block;
}
* html .goog-inline-block {
  display: inline;
}
*:first-child+html .goog-inline-block {
  display: inline;
}

/** Home Page **/
.bs-timeline {
  width: 800px;
}
#bs-home-recent-c {
  border-bottom: 1px solid #666;
  float: right;
  margin: 0 40px;
}
#bs-home-recent {
  border: 10px solid #bebec3;
  min-height: 200px;
  padding: 8px;
  background: #111;
  color: #0f0;
  width: 450px;
  padding-top: 0;
  font-family: "Andale Mono", "Vera Sans Mono", Courier, mono;
  text-shadow: 0 0 1px #fff;
  border-radius-topright: 2px;
  border-radius-topleft: 2px;
  -moz-border-radius-topright: 2px;
  -moz-border-radius-topleft: 2px;
  -webkit-border-top-right-radius: 2px;
  -webkit-border-top-left-radius: 2px;
}
#bs-home-recent h2 {
  font-size: 1em;
  margin: 0;
}
#bs-home-recent-tests {
  width: 100%;
  background: #111;
}
#bs-home-recent-tests td {
  padding: 2px;
  border: 0;
}
#bs-home-intro-c {
  padding: 0 5px;
}
#bs-home-intro-u {
  min-width: 410px;
}
#bs-home-intro {
  color: #4291bf;
  font-size: 120%;
  font-weight: bold;
  margin: 0;
  padding-bottom: 5px;
}
#bs-home-intro-sub {
  margin: 0 0 20px;
  font-weight: bold;
}

.d-msg {
  color: #e8a63d;
  font-weight: bold;
  padding: 0 20px;
  margin: 0;
}

/* tooltip */
.goog-tooltip {
  background: #e8a63d;
  border: 1px solid #333;
  padding: 5px;
  opacity: .9;
  width: 400px;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}
.goog-tooltip a {
  color: #fff;
}

/** FAQ **/
#bs-faq dt {
  font-size: 130%;
  font-weight: bold;
}
#bs-faq dd {
  margin: .5em 0 1em .5em;
}

/** User **/
#bs-user-settings-steth {
  position: relative;
  top: -20px;
}
#bs-user-settings .bs-table {
  font-size: 90%;
}
#bs-user-settings .bs-table td {
  white-space: normal;
}
#bs-user-settings .bs-table th {
  text-align: left;
  cursor: auto;
}
#bs-user-settings .bs-btn {
  font-size: 100%;
}
#bs-user-test-form label {
  display: block;
}
#bs-home-tpl .rt-loading {
  font-size: 200%;
}

.bs-usertest .bs-results-links,
.bs-usertest .rt-ua-s-d {
  display: none;
}
.bs-usertest #bs-results-cats .bs-sel a {
  cursor: default;
}
#bs-usertest-howto pre {
  margin: 4px 0;
  border: 1px inset #bbb;
  display: table-cell;
  padding: 10px;
}
#bs-usertest-howto li {
  margin-bottom: 1em;
}
#bs-usertest-dontforget {
  margin-bottom: 8px;
}

/* For the iframe user_test_table page */
#bs-user-test-table-tpl #bs-body {
  padding: 0;
}
#bs-user-test-table-tpl #bs-results {
  margin: 0;
}
#bs-user-test-table-tpl h1 {
  float: none;
  padding: 0;
  margin-bottom: 5px;
}

/** User Agent **/
#bs-ua-parser th {
  font-weight: bold;
  text-align: left;
}
#bs-ua-parser label {
  display: block;
  margin-top: 16px;
}
#bs-ua-parser textarea {
  display: block;
}
#bs-ua-parser form div em {
  display: block;
  font-size: 90%;
  color: #ccc;
}
td.wrap {
  white-space: normal !important;
  width: 20% !important;
}