.toggle-bg{
	background: #222; /* You'll want to see the area being toggled, but feel free to change the color */
	display: block; /* ...So that we can set a height and width */
	float: left; /* ...So that it doesn't take up the full width of the page */
	height: 7px; /* You can change this later if you want */
	position: relative; /* Required to allow the switch to move around */
	width: 26px; /* This can be changed later as well */
}

.toggle-bg input{
	height: 28px;
	left: 0;
	margin: 0; /* Reset the margins and padding */
	opacity: 0; /* Invisible! */
	padding: 0;
	position: absolute;
	top: -10px; /* Shift vertically */
	width: 36px;
	z-index: 2; /* We want the input to be over the span.switch, which we'll give a z-index of 1 */
		/*IE*/
		zoom: 1;
		filter: alpha(opacity=0);
}

.switch{
	background: #ccc;
	display: block;
	float: left;
	height: 14px;
	left: -1px; /* This is the starting point. When adding a border radius, a small bit of the background is shown if we use left: 0;, so -1px is best.*/
	position: relative;
	top: -4px; /* ...To keep it centered vertically */
	width: 14px;
	z-index: 1; /* Remember, it must be below the invisible inputs */
}

.toggle-bg input:checked~.switch{left: -1px;} /* initial toggle position */

.toggle-bg input~:checked~.switch{left: 13px;} /* final relative toggle position */

.toggle-bg input:checked{z-index: 0;}