html { 
	width: 100%; 
	background-color: #505d79;
	text-align: center;
	color: white;
	font-size: 12px;
	font-family: Verdana, Geneva, sans-serif;
}

body { 	
	margin: 0px;
	padding: 0px;
	padding: 2% 0px;
}

img { border: 0px; }

.menu  { font-size: 20px; padding-bottom: 20px; }
.menu span { padding: 0px 10px; }
a:link {
	color: #4e84ff;
	text-decoration: none;
}
a:visited {
	color: #4e84ff;
	text-decoration: none;
}
a:active {
	color: #fff;
	text-decoration: none;
}
a:hover {
	color: #4e84ff;
	text-decoration: none;
}
a.active { color: white; text-decoration: underline; }

.CodeMirror { height: auto; text-align: left; }

.hr { clear: both; width: 98%; background-color: white; height: 1px; margin-bottom: 1%; }

#howto { text-align: left; }
#wrapper { width: 75%; margin: 0px auto; }

.eqHeight { float: left; width: 22.6%; padding: 3% 5%; margin-right: 1%; }

#content { background-color: #35405a; overflow: hidden; padding: 1%; }
#content.products { padding-bottom: 0px; }

#leftPanel { background-color: #616d88; text-align: left; }
#mainPanel { background-color: #727e99; }
#rightPanel { background-color: #818da7; margin-right: 0px; }

#products { margin-right: -2%; }
.product { 
	float: left;
	width: 28%; 
	background-color: #616d88; 
	margin-right: 1%; 
	margin-bottom: 1%; 
	padding: 2%;
	text-align: left;
 }

h5 { font-size: 14px; margin: 0px; }

.test { float: left; border: 1px solid red; }

/* ########### ON OFF SWITCH #################################################### */

#onoffswitch { width: 100px; margin: 0px auto; }

input[type="checkbox"] { 
	position: absolute;
	opacity: 0;
}

/* Normal Track */
input[type="checkbox"].ios-switch + div {
	vertical-align: middle;
	width: 40px;	height: 20px;
	border: 1px solid rgba(0,0,0,.4);
	border-radius: 999px;
	background-color: rgba(0, 0, 0, 0.1);
	-webkit-transition-duration: .4s;
	-webkit-transition-property: background-color, box-shadow;
	box-shadow: inset 0 0 0 0px rgba(0,0,0,0.4);
	margin: 15px 1.2em 15px 2.5em;
}

/* Checked Track (Blue) */
input[type="checkbox"].ios-switch:checked + div {
	width: 40px;
	background-position: 0 0;
	background-color: #3b89ec;
	border: 1px solid #0e62cd;
	box-shadow: inset 0 0 0 10px rgba(59,137,259,1);
}

/* Tiny Track */
input[type="checkbox"].tinyswitch.ios-switch + div {
	width: 34px;	height: 18px;
}

/* Big Track */
input[type="checkbox"].bigswitch.ios-switch + div {
	width: 50px;	height: 25px;
}

/* Green Track */
input[type="checkbox"].green.ios-switch:checked + div {
	background-color: #2f3c5a;
	border: 1px solid #37425b;
	box-shadow: inset 0 0 0 10px #2f3c5a;
}

/* Normal Knob */
input[type="checkbox"].ios-switch + div > div {
	float: left;
	width: 18px; height: 18px;
	border-radius: inherit;
	background: #ffffff;
	-webkit-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
	-webkit-transition-duration: 0.4s;
	-webkit-transition-property: transform, background-color, box-shadow;
	-moz-transition-timing-function: cubic-bezier(.54,1.85,.5,1);
	-moz-transition-duration: 0.4s;
	-moz-transition-property: transform, background-color;
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(0, 0, 0, 0.4);
	pointer-events: none;
	margin-top: 1px;
	margin-left: 1px;
}

/* Big Knob */
input[type="checkbox"].bigswitch.ios-switch + div > div {
	width: 23px; height: 23px;
	margin-top: 1px;
}

/* Checked Big Knob (Blue Style) */
input[type="checkbox"].bigswitch.ios-switch:checked + div > div {
	-webkit-transform: translate3d(25px, 0, 0);
	-moz-transform: translate3d(16px, 0, 0);
	box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3), 0px 0px 0 1px rgba(8, 80, 172,1);
}

/* Green Knob */
input[type="checkbox"].green.ios-switch:checked + div > div {
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 0 1px #37425b;
}