/*

 * 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;

  width: 120px;

  border-radius: 3px;

}

.switch.oneline {

    display: inline-block;

    vertical-align: middle;

}

.switch-label {

  position: relative;

  z-index: 2;

  float: left;

  width: 58px;

  line-height: 26px;

  font-size: 11px;

  color: rgba(0, 0, 0, 0.15);

  text-align: center;

  cursor: pointer;

  font-weight: bold;

}

.switch-label-off {

  padding-left: 2px;

}

.switch-label-on {

  padding-right: 2px;

}

/*

 * 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 {

  font-weight: bold;

  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: 60px;

  /* Note: left: 50% doesn't transition in WebKit */

}

.switch-selection {

  display: block;

  position: absolute;

  z-index: 1;

  top: 2px;

  left: 2px;

  width: 58px;

  height: 22px;

  background: #65bd63;

  border-radius: 3px;

  background-image: -webkit-linear-gradient(top, #0066cc, #34609f);

  background-image: -moz-linear-gradient(top, #0066cc, #34609f);

  background-image: -o-linear-gradient(top, #0066cc, #34609f);

  background-image: linear-gradient(to bottom, #0066cc, #34609f);

    //#0066cc

    //#34609f

  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);

  box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);

  -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;

}

/*witch-blue .switch-selection {

  background: #3aa2d0;

  background-image: -webkit-linear-gradient(top, #4fc9ee, #3aa2d0);

  background-image: -moz-linear-gradient(top, #4fc9ee, #3aa2d0);

  background-image: -o-linear-gradient(top, #4fc9ee, #3aa2d0);

  background-image: linear-gradient(to bottom, #4fc9ee, #3aa2d0);

}

.switch-yellow .switch-selection {

  background: #c4bb61;

  background-image: -webkit-linear-gradient(top, #e0dd94, #c4bb61);

  background-image: -moz-linear-gradient(top, #e0dd94, #c4bb61);

  background-image: -o-linear-gradient(top, #e0dd94, #c4bb61);

  background-image: linear-gradient(to bottom, #e0dd94, #c4bb61);

}*/