/*
 * Copyright (c) 2012-2013 Thibaut Courouble
 * http://www.cssflow.com
 *
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */
.switch {
  position: relative;
  height: 2rem;
  width: 12.25rem;
  background: white;
  border-radius: 1rem; }

.switch-label {
  position: relative;
  z-index: 2;
  float: left;
  width: 6rem;
  line-height: 2rem;
  font-size: 0.75rem;
  color: #13294b;
  text-align: center;
  cursor: pointer; }

.switch-label-off {
  padding-left: 0.125rem; }

.switch-label-on {
  padding-right: 0.125rem; }

/*
 * Note: using adjacent or general sibling selectors combined with
 *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
 *       See this article for more info and a potential fix:
 *       http://css-tricks.com/webkit-sibling-bug/
 */
.switch-input {
  display: none; }
  .switch-input:checked + .switch-label {
    color: #fff;
    -webkit-transition: 0.15s ease-out;
    -moz-transition: 0.15s ease-out;
    -o-transition: 0.15s ease-out;
    transition: 0.15s ease-out; }
  .switch-input:checked + .switch-label-on ~ .switch-selection {
    left: 6.125rem;
    /* Note: left: 50% doesn't transition in WebKit */ }

.switch-selection {
  display: block;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 6rem;
  height: 2rem;
  background: #13294b;
  border-radius: 1rem;
  -webkit-transition: left 0.15s ease-out;
  -moz-transition: left 0.15s ease-out;
  -o-transition: left 0.15s ease-out;
  transition: left 0.15s ease-out; }
  .switch-blue .switch-selection {
    background: #13294b; }
  .switch-yellow .switch-selection {
    background: #c4bb61; }