/**
 * ToggleSwitch CSS
 * Author: Michael Palmer
 */
.toggle_switch{
	position: relative;
	display: inline-block; 
	margin-left: 30px;
}

.toggle_switch .switch {
	border: none;
	position: relative;
	cursor: pointer;
}

.toggle_switch .inner {
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transition: left 0.20s ease-in-out;
}

/* Small toggle switch
 ****************************/
.small_toggle_switch .switch {
	width: 60px;
	height: 13px;
	background: url(../images/toggle_bk.png) no-repeat 0 0;
	top:2px;    /*lockchou add 20100711*/
	border:0px solid #333;
	*margin-right:20px;
}

.small_toggle_switch.disabled .switch {
	background-position: 0 -14px;
}

.small_toggle_switch .inner {
	width: 30px;
	height: 13px;
	text-indent: -9999em;
	border:0px solid #333;
}

.small_toggle_switch:hover .inner {
	background-position: 0 -15px;
    top:-5px\9;    /*IE8 below*/
    *top:0px;      /*IE7 below*/
}

.small_toggle_switch.checked .inner {
	left: 0;
	background: url(../images/toggle_on.png) no-repeat 0 0;
	border:0px solid #333;
    top:-5px\9;    /*IE8 below*/
    *top:0px;      /*IE7 below*/
    _top:0px;     /*IE6 below*/
}

.small_toggle_switch.unchecked .inner {
	left: 30px;
	background: url(../images/toggle_off.png) no-repeat 0 0;
    top:-5px\9; /*IE8 below*/
    *top:0px;      /*IE7 below*/
    _top:0px;     /*IE6 below*/	
}

/**
 * CSS hack for Firefox
 * Author: Lockchou 20100713
 */
@-moz-document url-prefix(){
	.small_toggle_switch .switch { top:-3px; }
	.small_toggle_switch .inner { top:-6px; }
	.small_toggle_switch.checked .inner {left:-7px;}
	.small_toggle_switch.unchecked .inner {left: 23px;}
}

.small_toggle_switch.disabled .inner {
	background-position: 0 -28px;
}

.small_toggle_switch .status_label {
	display: inline-block;
	line-height: 13px;
	height: 13px;
	border:0px solid #333;
	font-size:12px;
	*position:absolute; /*IE7 below*/
}

.small_toggle_switch .on { 
	margin-right: 5px; 
	*float:right; *right:80px; /*IE7 below*/
}
.small_toggle_switch .off { 
	margin-left: 5px; text-align:left;  
	*float:right; *right:0px;  /*IE7 below*/
}

/* Big toggle switch
 ****************************/
.big_toggle_switch {
	width: 118px;
	height: 26px;
	background: url(../images/toggle_big_bk.png) no-repeat 0 0;
}

.big_toggle_switch.disabled {
	background-position: 0 -27px;
}
 
.big_toggle_switch .switch {
	width: 100%;
	height: 100%;
	background: transparent;
}

.big_toggle_switch .inner {
	width: 59px;
	height: 26px;
	line-height: 28px;
	font-size: 12px;
	text-align: center;
	color: #fff;
}

.big_toggle_switch:hover .inner {
	background-position: 0 -27px;
}

.big_toggle_switch.checked .inner {
	left: 0;
	background: url(../images/toggle_big_on.png) no-repeat 0 0;
}

.big_toggle_switch.unchecked .inner {
	left: 50%;
	background: url(../images/toggle_big_off.png) no-repeat 0 0;
}

.big_toggle_switch.disabled .inner {
	background-position: 0 -54px;
}

.big_toggle_switch .status_label {
	font-size: 12px;
	display: inline-block;
	text-align: center;
	width: 45%;
	line-height: 28px;
	height: 26px;
	position: absolute;
	color: #666;
}

.big_toggle_switch .on {
	left: 0;
	padding-left: 5%;
}

.big_toggle_switch .off {
	left: 50%;
	padding-right: 5%;
}