@import "compass/css3/transition";
@import "compass/css3/box-shadow";
@import "compass/css3/border-radius";
@import "compass/css3/transform";
@import "mixin/_inlineblock";
@import "compass/css3/images";

/*Checkbox */


.sf-checkbox-container
{
    display: inline-block;
    width:60px;
    height: 25px;
    border: 1px solid #777;
    clear:both;
    overflow:hidden;
    line-height: 0 !important;
    padding-left: 0 !important;
    vertical-align: middle;
    color: #333;
    text-shadow: white 0px 1px 0px;
    @include border-radius(3px);
    @include transform(translate3d(0,0,0));
    @include box-shadow(rgba(255,255,255,0.7) 0px 1px 0px inset);
    -webkit-user-select: none;
       -moz-user-select: none;
    	-ms-user-select: none;
    background-image: -webkit-linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.2));
    background-image: -moz-linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.2));
    background-image:linear-gradient(rgba(0,0,0,0.0), rgba(0,0,0,0.0));
}
.sf-checkbox-container.rounded {
	@include border-radius(200px);
}
.sf-checkbox-container label 
{
    display:block;	
    position:relative;
    left:-34px;
    width:98px;
    cursor:pointer;
    z-index:2;
    color: inherit;
    margin-left: 0;
    margin-bottom: 0 !important;
    @include transition(left .2s ease-in-out);
}
.sf-checkbox-container.checked label {
    left: 0px;
    @include transition(left .2s ease-in-out);
}
.sf-checkbox-container input {
    /*left:-5000px;
    position:absolute;*/
    display:none;
}
.sf-checkbox-container span {
    float:left;
    display:block;
    font-size:12px;
    font-weight:bold;
    height:25px;
    line-height:25px;
    position:relative;
    text-align:center;
    width:34px;
    z-index:3;
    font-family: Helvetica;
}
.sf-checkbox-container.rounded label span.on {
	background: transparent;
}
.sf-checkbox-container label span.on {
	//background-color: inherit;
		background-color: #0074CC;

}
.sf-checkbox-container.checked label span.on 
{
	background-color: #0074CC;
	background-image: -moz-linear-gradient(center top , #0088CC, #0055CC);
    color: inherit;
    margin-right: -5px;
    padding-right: 5px;
    text-shadow: inherit;
    @include border-top-left-radius(2px);
    @include border-bottom-left-radius(2px);
}
.sf-checkbox-container.rounded.checked label span.on 
{
	@include border-top-left-radius(50px);
	@include border-bottom-left-radius(50px);
}
.sf-checkbox-container span.toggle 
{
    width: 26px;
    margin: 0px;
    z-index: 4;
    @include box-shadow(rgba(255,255,255,0.7) 0px 1px 0px inset, #222 0 0 3px);
    @include border-radius(2px);
    background: #fff;
    background: -webkit-linear-gradient(bottom, #fcfcfc 50%, #cfcfcf);
    background: -moz-linear-gradient(bottom, #fcfcfc 50%, #cfcfcf); 
    background: linear-gradient(bottom, #fcfcfc 50%, #cfcfcf);
}
.sf-checkbox-container.rounded span.toggle 
{
	@include border-radius(50px);
}
.sf-checkbox-container span.off 
{
    background-color: #ddd;
	background: -moz-linear-gradient(bottom, #ebebeb 50%, #d6d6d6 80%, #a2a2a2);
    background: -webkit-linear-gradient(bottom, #ebebeb 50%, #d6d6d6 80%, #a2a2a2);
    background: linear-gradient(bottom, #ebebeb 50%, #d6d6d6 80%, #a2a2a2);
    color: #666;
    float: left;
    margin-left: -10px;
    padding-left: 10px;
	text-shadow: white 0px 1px 0px;
	@include border-top-right-radius(2px);
	@include border-bottom-right-radius(2px);
}
.sf-checkbox-container.rounded span.off 
{
	@include border-top-right-radius(50px);
	@include border-bottom-right-radius(50px);

}
.sf-checkbox-container.rounded.checked label span.off 
{
	//background: transparent;
	background-color: #0074CC;

}