/*
 * Color scheme:
 * BLUE: #4bd
 * GREY: #ccc
 * RED: #f45   // f05
 * GREEN: #0d0 // #0b5 #0e5 #0D8
 *
 *
 */

/*
 * General style.
 */
body {
  background: #fff;
  font-size: 16px;
}

li {
  margin-bottom: 10px;
}

.btn-primary,
.nav-pills>li.active>a,
.nav-pills>li.active>a:hover,
.nav-pills>li.active>a:focus {
  background: #4bd;
}

.section {
  padding: 30px;
  margin: 0px auto;
  max-width: 960px;
}

.section-left {
  float: left;
  width: 435px;
  margin-right: 30px;
}

.section-right {
  float: left;
  width: 435px;
}

label {
  font-weight: normal;
}

input[type="radio"], input[type="checkbox"] {
  margin: 5px;
}

.loading-icon {
  width: 18px;
  height: 18px;
  display: block;
  background: url("../img/loading.gif") center center no-repeat;
}

/*
 * Header.
 */
#header {
  padding-top: 60px;
  overflow: hidden;
}

#header #title {
  text-align: center;
}

#header #title a {
  color: #000;
  text-decoration: none;
}

#logo {
  //text-indent: 100%;
  //white-space: nowrap;
  //overflow: hidden;
  //background: url('../img/logo.png') no-repeat center top;
  //width: 327px;
  //height: 72px;
  //margin: 0px;
  //margin-bottom: 30px;
  //padding: 0px;
  //display: block;
}

#navigation {
  text-align: center;
  padding-top: 10px;
}

#navigation-wrap {
  float: left;
  position: relative;
  right: -50%;
  text-align: left;
}

#navigation-wrap ul {
  list-style: none;
  position: relative;
  right: 50%;
  margin: 0;
  padding: 0;
}


/*
 * Practice.
 */
#flashcard-section {
  padding-top: 0px;
  padding-bottom: 0px;
}

#fingerspeller {
  text-align: center;
}

#fingerspeller-base {
  border-top: 1px solid #ccc;
}

.fingerspeller-canvas {
  margin: 0px auto;
  display: block;
}

#practice-controls .controls {
  margin: 30px 0px;
}

#practice-controls .alert {
  margin-bottom: 30px;
}

#practice-controls .score {
  font-size: 30px;
  padding: 0px;
  margin: 30px 0px;
}

#practice-controls .score div {
  text-align: center;
  padding-left: 0px;
  padding-right: 0px;
  margin-left: 0px;
  margin-right: 0px;
}

#practice-controls .score-correct {
  color: #0d0;
}

#practice-controls .score-wrong {
  color: #f45;
}

#practice-controls .score-skipped {
  color: #ccc;
}

#practice-controls .score-repeated {
  color: #ccc;
}

#practice-controls .last-word {
  text-align: center;
  color: #ccc;
  font-size: 25px;
  margin: 30px 0px;
}


/*
 * Options.
 */
#options-wrap {
  background: #eee;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

#options {
  clear: both;
}

img.speed-snail {
  margin: 0px 20px;
}

.speed-slider-wrapper {
  margin-top: 20px;
}

.speed-slider {
  width: 240px;
}

.speed-slider-wrapper .slider-handle {
  background: #4bd;
}

.speed-slider-wrapper .tooltip-inner {
  background: #4bd;
}

.speed-slider-wrapper .tooltip.top .tooltip-arrow {
  border-top-color: #4bd;
}


img.speed-rabbit {
  margin-left: 20px;
}

/*
 * Spell.
 */
#spell-section {
  padding-top: 0px;
  padding-bottom: 0px;
}

#spell-controls .controls {
  margin: 30px 0px;
}


/*
 * How.
 */
#how-section {
}
div.alphabet {
}
.letter {
  float: left;
  text-align: center;
  font-size: 30px;
}
.letter img {
  width: 80px;
}

/*
 * About.
 */
#about-section {
  padding-top: 0px;
  font-size: 18px;
}

.about-fingerspell {
  //background: #CFF;
  background: #8ef;
}

.about-me {
  background: #eee;
}

.about-me .profile {
  float: right;
  margin-left: 30px;
}

.about-gratitude {
  background: #e8fEd4;
}


/*
 * Footer.
 */
#footer {
  background: #888;
  max-width: none !important;
  color: #ccc;
  text-align: center;
  font-size: 16px;
  padding-top: 15px;
}

#footer a {
  color: #ccc;
}

/*
#footer-rabbit {
  position: relative;
  top: -35px;
  height: 0px;
  overflow: visible;
  opacity:0.4;
}
*/


/*
 * Sticky footer.
 */
html, body { height: 100%; }
#body-wrap { min-height: 100%; }
#body-wrap-inner { overflow:auto; padding-bottom: 80px; /* Footer height. */ }
#footer { position: relative; margin-top: -80px; /* Negative footer height. */ height: 80px; clear: both; }
/*Opera Fix*/
body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px; }