.togglebox{
	margin-top:6px;
    display:inline-block;
    border:1px solid #AAA;
    width:86.7px;
    height:28px;
    position:relative;
    border-radius:20px;
    color:#FFF;
    font-weight:700;
    overflow:hidden;
    box-shadow:0 1px 0 #FFF;
}

.togglebox label{
    width:200%;
    height:100%;
    line-height:28px;
    border-radius:.4em;
    position:absolute;
    top:0;
    left:0;
    z-index:1;
    font-size:1.1em;
    cursor:pointer;
    -webkit-transition:.12s;
    -moz-transition:.12s;
    transition:.12s;
}

.togglebox label::before{
    content:'NO';
    width:62px;
    float:left;
    margin-right:-16px;
    padding-right:13px;
    text-align:center;
    border-radius:20px;
    color:#999;	
    background:#FFF;
    text-shadow:0 -1px 0 #093B5C;
    box-shadow:0 4px 5px -2px rgba(0,0,0,0.3) inset;
}

.togglebox label b{
    display:block;
    height:100%;
    width:26px;
    float:left;
    position:relative;
    z-index:1;
    border:1px solid #AAA;
    background:#F6F6F6;
    box-shadow:0 4px 0 -2px #F1F1F1 inset, 0 2em 2em -2em #AAA inset, 0 0 2px rgba(0,0,0,.5);
    border-radius:20px;
}

.togglebox label:hover b{
    background:#E5E5E5;
    border-radius:20px;
}

.togglebox label::after{
    content:'SI';
    width:62px;
    float:left;
    border-radius:20px;
    margin-left:-15px;
    padding-left:13px;
    text-align:center;
	background:#007FEA;    
    box-shadow:0 4px 5px -2px rgba(0,0,0,0.3) inset;
}

.togglebox input:checked ~ label{
    left:-60px;
}