@charset "utf-8";

	.switch {
		border: solid 1px #ccc;
		border-radius: 20px;
		display: inline-block;
		height: 40px;
		overflow: hidden;
		-ms-user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
		-webkit-user-select: none;
		user-select: none;
		width: 100px;
	}
	.switch [type=checkbox] {
		display: none;
	}
	.switch .label {
		cursor: pointer;
		margin-left: -60px;
		-ms-transition: margin .1s;
		-moz-transition: margin .1s;
		-o-transition: margin .1s;
		-webkit-transition: margin .1s;
		transition: margin .1s;
		white-space: nowrap;
	}
	.switch :checked + .label {
		margin-left: 0;
	}
	.switch .label > * {
		vertical-align: top;
	}
	.switch .on,
	.switch .off {
		display: inline-block;
		height: 40px;
		line-height: 40px;
		text-align: center;
		width: 82px;
	}
	.switch .on {
		background-color: #00f;
		background-image: -ms-linear-gradient(
	        top,
	        hsl(214,90%,40%),
	        hsl(214,90%,70%)
	        );
		background-image: -moz-linear-gradient(
	        top,
	        hsl(214,90%,40%),
	        hsl(214,90%,70%)
	        );
		background-image: -o-linear-gradient(
	        top,
	        hsl(214,90%,40%),
	        hsl(214,90%,70%)
	        );
		background-image: -webkit-linear-gradient(
	        top,
	        hsl(214,90%,40%),
	        hsl(214,90%,70%)
	        );
		background-image: linear-gradient(
	        top,
	        hsl(214,90%,40%),
	        hsl(214,90%,70%)
	        );
		box-shadow:
	        3px 2px 10px rgba(0,0,0,.2) inset,
		-3px 2px 10px rgba(0,0,0,.2) inset;
		color: #fff;
		text-shadow: -1px -1px rgba(0,0,0,.3);
	}
	.switch .separator {
		background-color: #eee;
		border: solid 1px #999;
		border-radius: 50%;
		box-sizing: border-box;
		box-shadow:
		1px 2px #fff inset,
		-1px 2px #fff inset,
		1px 1px 5px rgba(0,0,0,.2);
		display: inline-block;
		height: 40px;
		margin: 0 -25px;
		position: relative;
		width: 40px;
	}
	.switch .off {
		background-color: #eee;
		box-shadow: 5px 5px 10px rgba(0,0,0,.2) inset;
		color: #777;
		text-shadow: 1px 1px #fff;
	}