.togglebox input{ display:none; }
	.togglebox{font:10px "Arial"; display:inline-block; border:1px solid #BBB; width:45px; height:15px; position:relative; vertical-align:middle; border-radius:10px; color:#FFF; font-weight:bold; overflow:hidden; box-shadow:0 1px 0 #CCC; }
	.togglebox label{ width:200%; height:100%; line-height:15px; border-radius:0.2em; position:absolute; top:0; left:-30px; z-index:1; cursor:pointer; -webkit-transition:0.12s; -moz-transition:0.12s; transition:0.12s; }
	.togglebox span{ position:absolute; right:-25px; }

	.togglebox label::before{ content:'ON'; width:32px; float:left; margin-right:-8px; padding-right:6px; text-align:center; background:#007FEA; text-shadow:0 -1px 0px #093B5C; box-shadow:0 2px 2px -1px rgba(0,0,0,0.3) inset; }
	.togglebox label b{display:block; height:100%; width:16px; float:left; position:relative; z-index:1; border:0px solid #AAA; background:#F6F6F6; box-shadow:0 2px 0 -1px #F1F1F1 inset, 0 2em 2em -2em #AAA inset, 0 0 2px rgba(0,0,0,.5); border-radius:10px; }
	.togglebox label:hover b{ background:#E5E5E5; }
	.togglebox label::after{ content:'OFF'; width:32px; float:left; margin-left:-13px; padding-left:10px; text-align:center; color:#999; background:#FFF; box-shadow:0 2px 2px -1px rgba(0,0,0,0.3) inset; }

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