/* <copyright>
 This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
 No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
 (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
 </copyright> */
.montage-toggle-switch {
    width: 60px;
    height: 22px;
}

.montage-toggle-switch .toggle:before {
    content: "";
    position: absolute;
    left: -13px;
    right: -13px;
    top: -8px;
    bottom: -8px;
    border-radius: 30px;
}

.montage-toggle-switch .toggle {
    position: absolute;
    border-radius: 12px;
    height: 20px;
    padding: 1px;
    background-color: rgba(160,160,160,.4);
    -webkit-box-shadow: inset 0 1px 4px rgba(0,0,0,.3), 0 1px rgba(255,255,255,.4), 0 -1px rgba(0,0,0,.1);
}

.montage-toggle-switch .scroll {
    -webkit-transform: translateZ(0);
}

.montage-toggle-switch .circle {
    position: absolute;
    margin: -16px 0 0 -16px;
    height: 50px;
    width: 50px;
    border-radius: 26px;
    background: #fff;
    opacity: .3;
    border: 1px solid rgba(0, 0, 0, .5);
    -webkit-transform: scale3d(.35, .35, 0) translateZ(0);
}

.montage-toggle-switch.pressed .circle {
    -webkit-transform: scale3d(1, 1, 0) translateZ(0);
}

.montage-toggle-switch .handlerbg {
    position: absolute;
    background: transparent;
    position: absolute;
    height: 20px;
    width: 20px;
    border-radius: 11px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .35);
    -webkit-transform: translateZ(0);
}

.montage-toggle-switch .handler {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 11px;
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e6e6e6));
    -webkit-transform: translateZ(0);
}

.montage-toggle-switch .handler:after {
    content: "";
    position: absolute;
    margin: 6px 0 0 6px;
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: #909090;
    -webkit-box-shadow: inset 0 1px 2px #707070;
    -webkit-transform: scale3d(.9, .9, 0) translateZ(0);
}

.montage-toggle-switch .handleronbg {
    opacity: 0;
    position: absolute;
    background: rgba(0,0,0,.3);
    margin: -1px 0 0 -1px;
    width: 20px;
    height: 20px;
    border-radius: 11px;
    padding: 1px;
    -webkit-transform: translateZ(0);
}

.montage-toggle-switch .handleron {
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    background: -webkit-gradient(linear, left top, left bottom, from(#10BEFE), to(#0AA3DA));
    -webkit-transform: translateZ(0);
}

.montage-toggle-switch .handleron:after {
    content: "";
    position: absolute;
    margin: 6px 0 0 6px;
    height: 8px;
    width: 8px;
    border-radius: 4px;
    background-color: #07739A;
    -webkit-box-shadow: inset 0 1px 2px #04435A;
    -webkit-transform: scale3d(.9, .9, 0) translateZ(0);
}

.montage-toggle-switch .handlerdragarea {
    position: absolute;
    margin: -16px 0 0 -16px;
    width: 52px;
    height: 52px;
    border-radius: 26px;
    -webkit-transform: translateZ(0);
}

.montage-toggle-switch.dark .toggle {
    padding: 0;
    border: 1px solid rgba(0,0,0,.4);
    background-color: rgba(40,40,40,.55);
    -webkit-box-shadow: 0 1px rgba(255,255,255,.2), 0 -1px rgba(0,0,0,.1);
}

.montage-toggle-switch.dark .circle {
    opacity: .25;
    background: rgba(120, 120, 120, .8);
    border: 1px solid #000;
    -webkit-transform: scale3d(.35, .35, 0) translateZ(0);
    -webkit-transition: -webkit-transform 150ms;
}

.montage-toggle-switch.pressed.dark .circle {
    -webkit-transform: scale3d(1, 1, 0) translateZ(0);
}

.montage-toggle-switch.dark .handler {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.5)), to(rgba(255,255,255,.3)));
}

.montage-toggle-switch.dark .handler:after {
    background-color: rgba(0,0,0,.6);
    -webkit-box-shadow: 0 1px 0 #828282;
}

.montage-toggle-switch.dark .handleronbg {
    opacity: 0;
    position: absolute;
    background: transparent;
    margin: -1px 0 0 -1px;
    width: 20px;
    height: 20px;
    border-radius: 11px;
    padding: 1px;
    -webkit-transform: translateZ(0);
}