.three-way-toggle {
	background-color: #E6E6E6;
	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: 30px; /* You can change this later if you want */
	position: relative; /* Required to allow the switch to move around */
	width: 90px; /* This can be changed later as well */
	border-radius: 5px;
	border-style: solid;
	border-width: 1px;
	border-color: #CCC;
}

.three-way-toggle:hover {
	box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.125) inset;
}

.three-way-toggle input {
	height: 30px;
	margin: 0; /* Reset the margins and padding */
	opacity: 0; /* Invisible! */
	padding: 0;
	position: absolute;
	top: 15x; /* Shift vertically */
	width: 30px;
	z-index: 2; /* We want the input to be over the span.switch, which we'll give a z-index of 1 */
}

.three-way-toggle .input-left {
	left: 0px;
}

.three-way-toggle .input-middle {
	left: 30px;
}

.three-way-toggle .input-right {
	left: 60px;
}

.switch {
	background-color: white;
	display: block;
	float: left;
	height: 28px;
	left: 36px; /* 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: 0px; /* ...To keep it centered vertically */
	width: 16px;
	z-index: 1; /* Remember, it must be below the invisible inputs */
	border-radius: 5px;
	border-style: solid;
	border-width: 1px;
	border-color: #CCC;
	transition: left 0.5s ease;
	text-align: center;
}

.three-way-toggle .input-left:checked ~ .switch {
	left: 0px;
	/*
	background-color: #5CB85C;
	border-color: #4CAE4C;
	*/
}

.three-way-toggle .input-middle:checked ~ .switch {
	left: 36px;
	/*
	background-color: white;
	border-color: #CCC;
	*/
}

.three-way-toggle .input-right:checked ~ .switch {
	left: 72px;
	/*
	background-color: #D9534F;
	border-color: #D43F3A;
	*/
}