.switch {
	background: #DADADA;
	/*background: -moz-linear-gradient(top, #f6f8f9 0%, #e5ebee 50%, #d7dee3 51%, #f5f7f9 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f8f9), color-stop(50%,#e5ebee), color-stop(51%,#d7dee3), color-stop(100%,#f5f7f9));
	background: -webkit-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%);
	background: -o-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%);
	background: -ms-linear-gradient(top, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%);
	background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 );*/
		
	 -khtml-border-radius: 10px;
	   -moz-border-radius: 10px;
		-ms-border-radius: 10px;
		 -o-border-radius: 10px;
	-webkit-border-radius: 10px;
			border-radius: 10px;
	
	-khtml-box-shadow: 0 1px 0 #fff, inset 0 0 2px #3f4c6b, inset 0 1px 0 #d7dee3, inset 0 1px 5px #d7dee3;
	   -moz-box-shadow: 0 1px 0 #fff, inset 0 0 2px #3f4c6b, inset 0 1px 0 #d7dee3, inset 0 1px 5px #d7dee3;
		-ms-box-shadow: 0 1px 0 #fff, inset 0 0 2px #3f4c6b, inset 0 1px 0 #d7dee3, inset 0 1px 5px #d7dee3;
		 -o-box-shadow: 0 1px 0 #fff, inset 0 0 2px #3f4c6b, inset 0 1px 0 #d7dee3, inset 0 1px 5px #d7dee3;
	-webkit-box-shadow: 0 1px 0 #fff, inset 0 0 2px #d7dee3, inset 0 1px 0 #d7dee3, inset 0 1px 5px #d7dee3;
			box-shadow: 0 1px 0 #fff, inset 0 0 2px #d7dee3, inset 0 1px 0 #d7dee3, inset 0 1px 5px #d7dee3;
	
	 -khtml-transition: background .2s ease;
	   -moz-transition: background .2s ease;
		-ms-transition: background .2s ease;
		 -o-transition: background .2s ease;
	-webkit-transition: background .2s ease;
			transition: background .2s ease;
	
	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: 20px; /* You can change this later if you want */
	position: relative; /* Required to allow the switch-button to move around */
	width: 60px; /* This can be changed later as well */
}

.switch.active {
	background: #4DBCC7;
	/*background: -moz-linear-gradient(top, #4DBCC7 0%, #49b3bc 50%, #42a2aa 51%, #54cdd8 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4DBCC7), color-stop(50%,#49b3bc), color-stop(51%,#42a2aa), color-stop(100%,#54cdd8));
	background: -webkit-linear-gradient(top, #4DBCC7 0%,#49b3bc 50%,#42a2aa 51%,#54cdd8 100%);
	background: -o-linear-gradient(top, #4DBCC7 0%,#49b3bc 50%,#42a2aa 51%,#54cdd8 100%);
	background: -ms-linear-gradient(top, #4DBCC7 0%,#49b3bc 50%,#42a2aa 51%,#54cdd8 100%);
	background: linear-gradient(to bottom, #4DBCC7 0%,#49b3bc 50%,#42a2aa 51%,#54cdd8 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4DBCC7', endColorstr='#54cdd8',GradientType=0 );*/
}

.switch input {
	height: 34px;
	left: 0 !important;
	visibility: visible !important;
	margin: 0; /* Reset the margins and padding */
	opacity: 0; /* Invisible! */
	padding: 0;
	position: absolute;
	top: -7px; /* Shift vertically */
	width: 62px;
	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-button {
	background: #ffffff;
	/*background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #fefefe 50%, #fdfdfd 51%, #ffffff 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(50%,#fefefe), color-stop(51%,#fdfdfd), color-stop(100%,#ffffff));
	background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#fefefe 50%,#fdfdfd 51%,#ffffff 100%);
	background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#fefefe 50%,#fdfdfd 51%,#ffffff 100%);
	background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#fefefe 50%,#fdfdfd 51%,#ffffff 100%);
	background: radial-gradient(ellipse at center, #ffffff 0%,#fefefe 50%,#fdfdfd 51%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );*/
	/* gradient generated by http://www.colorzilla.com/gradient-editor/ */

	 -khtml-border-radius: 15px;
	   -moz-border-radius: 15px;
		-ms-border-radius: 15px;
		 -o-border-radius: 15px;
	-webkit-border-radius: 15px;
			border-radius: 15px;
	
	
	 -khtml-box-shadow: 0 1px 1px #65727b, 0 0 1px #b6bdc2;
	   -moz-box-shadow: 0 1px 1px #65727b, 0 0 1px #b6bdc2;
		-ms-box-shadow: 0 1px 1px #65727b, 0 0 1px #b6bdc2;
		 -o-box-shadow: 0 1px 1px #65727b, 0 0 1px #b6bdc2;
	-webkit-box-shadow: 0 1px 1px #65727b, 0 0 1px #b6bdc2;
			box-shadow: 0 1px 1px #65727b, 0 0 1px #b6bdc2;
	
	display: block;
	float: left;
	height: 30px;
	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: -5px; /* ...To keep it centered vertically */
	
	 -khtml-transition: left .2s ease, background .2s ease, -khtml-box-shadow .2s ease;
	   -moz-transition: left .2s ease, background .2s ease, -moz-box-shadow .2s ease;
		-ms-transition: left .2s ease, background .2s ease, -ms-box-shadow .2s ease;
		 -o-transition: left .2s ease, background .2s ease, -o-box-shadow .2s ease;
	-webkit-transition: left .2s ease, background .2s ease, -webkit-box-shadow .2s ease;
			transition: left .2s ease, background .2s ease, box-shadow .2s ease;
	
	width: 30px;
	z-index: 1; /* Remember, it must be below the invisible inputs */
}

.switch:hover .switch-button {    
	 -khtml-box-shadow: 0px 4px 8px #65727b, 0 0 4px #b6bdc2;
	   -moz-box-shadow: 0px 4px 8px #65727b, 0 0 4px #b6bdc2;
		-ms-box-shadow: 0px 4px 8px #65727b, 0 0 4px #b6bdc2;
		 -o-box-shadow: 0px 4px 8px #65727b, 0 0 4px #b6bdc2;
	-webkit-box-shadow: 0px 4px 8px #65727b, 0 0 4px #b6bdc2;
			box-shadow: 0px 4px 8px #65727b, 0 0 4px #b6bdc2;
}

.switch.active .switch-button {
	background: #398D94;
   /* background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #fefefe 50%, #fdfdfd 51%, #ffffff 100%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#ffffff), color-stop(50%,#fefefe), color-stop(51%,#fdfdfd), color-stop(100%,#ffffff));
	background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#fefefe 50%,#fdfdfd 51%,#ffffff 100%);
	background: -o-radial-gradient(center, ellipse cover, #ffffff 0%,#fefefe 50%,#fdfdfd 51%,#ffffff 100%);
	background: -ms-radial-gradient(center, ellipse cover, #ffffff 0%,#fefefe 50%,#fdfdfd 51%,#ffffff 100%);
	background: radial-gradient(ellipse at center, #ffffff 0%,#fefefe 50%,#fdfdfd 51%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );*/
	/* gradient generated by http://www.colorzilla.com/gradient-editor/ */
}

.switch-label {
	position: relative;
	right: -40px;
	font-weight: bold;
	cursor: default;
}

.switch-on-label {
	color: #398D94;
}
.switch-off-label {
	color: #A5A5A5;
}

.switch:not(.active) .switch-on-label {
	display: none;
}
.switch:not(.active) .switch-off-label {
	display: inline;
}

.switch.active .switch-on-label {
	display: inline;
}
.switch.active .switch-off-label {
	display: none;
}

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

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

.switch input:checked{ z-index: 0; }