/* ------------------------------------------
CSS TOGGLE SWITCHES (Ionuț Colceriu)
Licensed under Unlicense 
https://github.com/ghinda/css-toggle-switch
------------------------------------------ */

/* Toggle Switches */
@media only screen {

	/* Checkbox
	 */
	.toggle {
		position: relative;
		left:-43%;
		display: block;
		width: 58%;
		
		padding: 0;
		margin: 0;
		
		font-family: sans-serif;
		font-weight: bold;
/*		font-size: 12px;*/
/*		color: #fff;*/
		
/*		text-shadow: 1px 1px 1px #191b1e;*/
	}

	/* Position the label over all the elements, except the toggle-button
	 * Clicking anywhere on the label will change the switch-state
	 */
	.toggle label {
		position: relative;
		z-index: 3;
		
		display: block;
		width: 100%;
		padding: 3px 0;				
		cursor: pointer;
	}

	/* Don't hide the input from screen-readers and keyboard access
	 */
	.toggle input {
		position: absolute;
		opacity: 0;
		z-index: 5;
	}

	/* Outline the toggle when the input is focused */
	.toggle input:focus ~ .toggle-button {
		outline: 1px dotted #fff;
	}

	/* Track */
	.toggle label:after {
		content: '';
		position: absolute;
		top: 0;
		right: 0;
		z-index: 0;
		display: block;
		width: 80px;
		height: 18px;
		padding: 2px 0;
		
		background-color: #dd7e6d;	
		border: 1px solid #b15b4d;
		border-radius: 2px;
		box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.17), 0 1px 0px rgba(255, 255, 255, 0.9);
		
		/* Text labels */
		content: "off \a on";
		white-space: pre;
		
		color: #8f5247;
		font-weight: bold;
		text-align: center;
		text-shadow: 0 1px 0px rgba(255, 255, 255, 0.4);
			
		-webkit-column-count: 2;
		-moz-column-count: 2;
		column-count: 2;
		-webkit-column-gap: 0;
		-moz-column-gap: 0;
		column-gap: 0;
	}

	/* We could use label:after to create the toggle button
	 * But we won't be able to use transitions on it, except in Firefox
	 */
	.toggle span {
		display: block;
		position: absolute;
		right: -1px;
		top: -2px;
		z-index: 4;
		width: 40px;
		height: 26px;
		
		border: 1px solid #bbbbbb;
		
		background-color: #f7f7f7; 
		background-image: -webkit-linear-gradient(top, #f7f7f7, #ececec); 
		background-image:    -moz-linear-gradient(top, #f7f7f7, #ececec); 
		background-image:     -ms-linear-gradient(top, #f7f7f7, #ececec); 
		background-image:      -o-linear-gradient(top, #f7f7f7, #ececec); 
		background-image:         linear-gradient(top, #f7f7f7, #ececec);  
		
		box-shadow: inset 0 1px 2px rgba(255, 255, 255, 1), 0 1px 1px rgba(0, 0, 0, 0.12);
		border-radius: 2px;
		
		-webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}

	.toggle input:checked ~ span {
		right: 45px;
	}
	
	.toggle input:checked + label:after {
		background-color: #a0c66b;
		border-color: #87aa5b;

		color: #60783f;
	}

	/* Radio Switch
	 */
	.switch {
		position: relative;
		left:-43%;
		border: 0;
		padding: 0;
		width: 58%;
		
		font-family: sans-serif;
		font-weight: bold;
/*		font-size: 12px;*/
/*		color: #fff;*/
		
/*		text-shadow: 1px 1px 1px #191b1e;*/
		
	}

	.switch legend {
		float: left;
		width: 40%;
		padding: 7px 10% 3px 0;	
		
		text-align: right;
	}

	.switch input {
		position: absolute;
		opacity: 0;
	}

	.switch legend:after {
		content: '';
		
		position: absolute;
		top: 0;
		left: 50%;
		z-index: 0;
		
		width: 50%;
		height: 100%;
		
		padding: 2px;
		background-color: #2d3035;
		
		border-radius: 3px;	
		
		box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3), 0 1px 0px rgba(255, 255, 255, 0.2);
	}

	.switch label {
		position: relative;
		z-index: 2;
		
		float: left;
		width: 25%;
		margin-top: 2px;
			
		padding: 5px 0 3px 0;
		text-align: center;
		
		color: #64676b;
		text-shadow: 0 1px 0 #000;
	}


	.switch input:checked + label {
		color: #2d592a;
		text-shadow: 0 1px 0 rgba(255,255,255,0.5);
	}

	.switch input:focus + label {
		outline: 1px dotted #fff;
	}

	.switch .switch-button {
		clear: both;
		position: absolute;
		top: 0;
		left: 50%;
		z-index: 1;
		
		width: 25%;
		height: 100%;
		
		margin: 2px;
		
		background-color: #70c66b;
		
		background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
		background-image:    -moz-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
		background-image:     -ms-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
		background-image:      -o-linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
		background-image:         linear-gradient(top, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0));
		
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), inset 0 1px 1px rgba(255, 255, 255, 0.45);
		
		border-radius: 3px;
		
		-webkit-transition: all 0.3s ease-out;
		-moz-transition: all 0.3s ease-out;
		-o-transition: all 0.3s ease-out;
		transition: all 0.3s ease-out;
	}
	.switch input:last-of-type:checked ~ .switch-button {
		left: 75%;
	}

	/* Treo Switch */
	.switch.switch-treo label {
		width: 16.6%;
	}
	.switch.switch-treo .switch-button {
		width: 16.6%;
	}
	.switch.switch-treo input:checked:nth-of-type(2) ~ .switch-button {	
		left: 66.6%;
	}
	.switch.switch-treo input:checked:last-of-type ~ .switch-button {
		left: 83.26%;
	}
	/* Switch Themes/Colors */
	.switch.blue input:checked + label {
		color: #15475d;
	}
	.switch.blue .switch-button {
		background-color: #38a3d4;
	}
	.switch.yellow .switch-button {
		background-color: #ccc165;
	}
	.switch.yellow input:checked + label {
		color: #494525;
	}	
	/* Bugfix for older Webkit, including mobile Webkit. Adapted from:
	 * http://css-tricks.com/webkit-sibling-bug/
	 */
	.switch, .toggle {
		-webkit-animation: bugfix infinite 1s;
	}
	
	@-webkit-keyframes bugfix { from { position: relative; } to { position: relative; } }

}

/* Default form styles */
fieldset {
	margin: 0 0 2em 0;	
	border: 0;
}

fieldset legend {
/*	color: #fff;*/
}