
._gnome-switch {
    color: white;
    width: 80px;
    position: relative;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.6;
}

/* create a new BFC to have floating label work correctly.
 * http://colinaarts.com/articles/float-containment/ */
._gnome-switch:before, ._gnome-switch:after {
  content    : '';
  display    : table;
}

._gnome-switch:after {
  clear: both;
}

._gnome-switch { display : inline-block; }
._gnome-switch { display : block; }



._gnome-switch, ._gnome-switch * {
    display: block;
}

._gnome-switch .slider.not-dragging {
    -webkit-transition: left 0.2s ease-in-out;
    -moz-transition: left 0.2s ease-in-out;
    -ms-transition: left 0.2s ease-in-out;
    -o-transition: left 0.2s ease-in-out;
    transition: left 0.2s ease-in-out;
}

._gnome-switch .slider {
    position: absolute;
    /* (80px / 2) - 2px */
    width: 38px;
    top: -2px;
    bottom: -2px;

    border: 3px solid #5f5f5f;
    background-color: #000;
    border-radius: 4px;
}

._gnome-switch .slider .handle {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -5px;
    margin-top: -4px;
    width: 2px;
    height: 8px;
    border-width: 0 6px 0 2px;
    border-style: none double none solid;
    border-color: #5f5f5f;
}

._gnome-switch .off,
._gnome-switch .on,
._gnome-switch.customized .custom-content {
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6),
                 0 1px 0   rgba(0, 0, 0, 0.6);
    border-style: solid;
    border-width: 2px;
    text-align: center;
    padding: 1px 0;
}

._gnome-switch .off,
._gnome-switch .on {
    /* 80px / 2 - 2px */
    width: 38px;
}

._gnome-switch .custom-content {
    /* To aid with writing style sheets, put the default color styles
     * in a less specified selector, so they're easily overridden. */
    display: none;

    /* default colors */
    background-color: #000000;
    border-color: #2e3436;
}

._gnome-switch.customized .custom-content {
    display: block;

    /* 80px - 4px */
    width: 76px;
    border-radius: 4px;
}

._gnome-switch .off {
    float: right;
    border-color: #2e3436;
    border-left-style: none;
    border-radius: 0 4px 4px 0;
    background-color: #000000;
}

._gnome-switch .on {
    float: left;
    border-color: #3465a4;
    border-right-style: none;
    border-radius: 4px 0 0 4px;
    background-color: #4a90d9;
}

._gnome-switch.customized .on,
._gnome-switch.customized .off,
._gnome-switch.customized .slider {
    display: none;
}
