html,
body { height: 100%; overflow:auto; }

body {
    min-width: 900px;
    min-height: 600px;
    text-align: center;
    background: url(images/bg-shadow.png) no-repeat center center;
    overflow: hidden;
    font-size: 0.9em;
	color: #202020;
}
.jsonly { display: none; }

#qLoverlay {
	background: #222 url('images/siab-logo.jpg') no-repeat center center;
	width:100%;height:100%;position:fixed;z-index:9999;top:0px;left:0px;
}

#container {
	width: 1016px;
	height: 615px;
	min-width: 800px;
	min-height: 600px;
	margin: 0 auto;
	clear: both;
	overflow: visible;
	position: relative;
}

#shadow {
    float: left;
    height: 50%;
    margin-top: -307px;
    width: 100%;
}

/** FONTS **/

@font-face {
    font-family: 'MomsTypewriterRegular';
    src: url('fonts/momt___-webfont.eot');
    src: url('fonts/momt___-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/momt___-webfont.woff') format('woff'),
         url('fonts/momt___-webfont.ttf') format('truetype'),
         url('fonts/momt___-webfont.svg#MomsTypewriterRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'SecretTypewriterRegular';
    src: url('fonts/veteran_typewriter-webfont.eot');
    src: url('fonts/veteran_typewriter-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/veteran_typewriter-webfont.woff') format('woff'),
         url('fonts/veteran_typewriter-webfont.ttf') format('truetype'),
         url('fonts/veteran_typewriter-webfont.svg#SecretTypewriterRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* *
*
*	Box styles...
*
*
   ================================================== */

.supernova { z-index: 1000; background-color: rgb(255,255,255); }
.supernovaflash { z-index: 1050; background-color: rgb(255,255,255); }
.caution {
	font-family: 'SecretTypewriterRegular';
	color: white;
    text-shadow: rgb(0,0,0) 1px 1px 1px;
	background: url(images/caution.png) repeat-x center center;
	position: absolute;
	top:0px;
	left:0px;
	width: 1000px;
	height: 35px;
	z-index: 1000;
	display: none;
	font-size: 2em;
	padding-top: 5px;
}

#box-top-t, #box-top-r, #box-top-b {
	position: absolute;
	z-index: 1010;
}
#box-top-t {
	width: 1016px;
	height: 40px;
	background: url(images/box-top-edge_t.png);
}
#box-top-r {
	width: 40px;
	height: 534px;
	top: 40px;
	left: 975px;
	background: url(images/box-top-edge_r.png);
}
#box-top-b {
	left: 0px;
	top: 574px;
	width: 1016px;
	height: 40px;
	background: url(images/box-top-edge_b.png);
}

#box-sides {
    position: absolute;
    width: 956px;
    height: 555px;
    z-index: 50;
    top: 30px;
    left: 30px;
    background: url(images/box-sides_s1.png);
}

#box-left-lip {
    position: absolute;
    width: 30px;
    height: 614px;
    z-index: 60;
    top: 0;
    left: 0;
    background: url(images/left-lip_s1.png);
}

#box-bottom {
    z-index: 10;
    background: url(images/box-bottom_s1.png) no-repeat;
    width: 900px;
    height: 500px;
    position: absolute;
    top: 57px;
    left: 58px;
}

#container.open #box-lid {
   	box-shadow: -24px -10px 24px rgba(0,0,0,0.3);
	-moz-box-shadow: -24px -10px 24px rgba(0,0,0,0.3);
	-webkit-box-shadow: -24px -10px 24px rgba(0,0,0,0.3);
}
#box-lid {
    z-index: 1001;
    width: 993px;
    height: 573px;
    position: absolute;
    top: 20px;
    left: 0px;
    cursor: pointer;
    overflow: visible!important;
}
#lid {
	position: relative;
	left: 0px;
	top: 0px;
	width: 993px;
	height: 573px;
	z-index: 99;
}
#inner-box {
    overflow: hidden;
    width: 900px;
    height: 500px;
}

#content, .content-holder {
    position: absolute;
    top: 30px;
    left: 30px;
    width: 957px;
    height: 557px;
    /*padding: 30px 26px 27px 31px;*/
    overflow: hidden;
}
.content-inner { margin: 30px 26px 27px 31px; width: 100%; }
#content.closed { z-index: 80; }
#container.open #content { z-index: 950; }

#placeholder {
    width: 605px;
    height: 495px;
    position: relative;
}

#placeholder .button {
	position: absolute;
	cursor: pointer;
}

#placeholder div.button {
	font-size: smaller;
	color: #999;
	background-color: #eee;
	padding: 2px;
}

.message {
    padding-left: 50px;
    font-size: smaller;
}

#evolve { display: none }

#placeholder svg { z-index: 105; }

.tickLabels .tickLabel { color: #fff }

.legend tr { color: #FFF }

.legend tr td {
	padding: 2px;
	text-align: left;
}

#info {
	width: 955px;
	margin: 0 auto;
	color: #fff;
	background: #002e8a;
	position: absolute;
	height: 550px;
	top: -545px;
	left: 0px;
	z-index: 990;
	text-align: left;
	-webkit-box-shadow: -8px -4px 10px rgba(0,0,0,0.2);
	-moz-box-shadow: -8px -4px 10px rgba(0,0,0,0.2);
	-box-shadow: -8px -4px 10px rgba(0,0,0,0.2);
	transition: bottom 0.2s ease 0s, top 0.2s ease 0s, height 0.2s ease 0s; 
}
#infoinner { height: 524px; }
#infocontent { height: 472px; margin: 8px; padding: 32px; overflow: hidden; }
#info.open #infocontent { overflow: auto; }
#infocontent img { max-width: 100%; }
#infocontent h1 { font-size: 1.5em; margin-bottom: 0.25em; }
#infocontent h2 { font-size: 1.3em; margin: 1em 0 0.25em 0; }
#infocontent h3 { font-size: 1.2em; margin: 1em 0 0.25em 0; }
#infocontent p { margin: 0.5em 0; }
#info.open {
	-webkit-box-shadow: -16px -20px 20px rgba(0,0,0,0.2);
	-moz-box-shadow: -16px -20px 20px rgba(0,0,0,0.2);
	-box-shadow: -16px -20px 20px rgba(0,0,0,0.2);
	bottom: 0px;
	top: 0px;
	height: 555px;
}
#info .closer a { padding: 0 0 0 0.5em; }
#info .closer { display: none; text-align: right; font-size: 2em; line-height: 2em; position: absolute; right: 32px; top: 0px; }
#info.open .closer { display: block; }
#info .labels {
    position: absolute;
    text-align: left;
    top: 16px;
}
#info .label {
    margin-top: 5px;
    margin-bottom: 26px;
    width: 100px;
    font-size: 90%;
}
#info .tab {
	position: absolute;
	right: 15px;
	bottom: -2em;
	height: 2em;
	border-radius: 0px 0px 10px 10px;
	-moz-border-radius: 0px 0px 10px 10px;
	-webkit-border-radius: 0px 0px 10px 10px;
	background: #002e8a;
	padding: 0 8px;
	line-height: 2em;
	font-weight: bold;
	cursor: pointer;
	-webkit-box-shadow: -16px -20px 20px rgba(0,0,0,0.2);
	-moz-box-shadow: -16px -20px 20px rgba(0,0,0,0.2);
	-box-shadow: -16px -20px 20px rgba(0,0,0,0.2);
}

.ui-slider,
.ui-slider-horizontal {
	width: 700px;
	position: relative;
	left: 120px;
	margin-top: 10px;
	margin-bottom: 30px;
}

.ui-slider-label {
	font-size: 70%;
	width: 85px;
	text-align: center;
	color: #fff;
}

.ui-slider-range.ui-widget-header { background: #fff; }

#stages .ui-widget-content{ background: #009; }

#stages .ui-slider-tooltip{ background: #fff; }

#animate {
    display: none;
    position: absolute;
    top: -60px;
    left: 40px;
    width: 210px;
    height: 50px;
    padding: 10px;
    background: #002e8a;
    color: #fff;
    -moz-border-radius: 0 0 10px 10px;
    -webkit-border-radius: 0 0 10px 10px;
    z-index: 106;
    -webkit-box-shadow: -16px -20px 20px rgba(0,0,0,0.3);
    -moz-box-shadow: -16px -20px 20px rgba(0,0,0,0.3);
    -box-shadow: -16px -20px 20px rgba(0,0,0,0.3);
}

#animate #animateEvolve,
#animate #animateEvolveReset { margin-top: 10px }

#nav, #control, #right { right: 38px; }

#nav {
	position: absolute;
	top: 422px;
	width: 280px;
	text-align: center;
	background-color: rgba(0, 0, 0, 0.5);
}
#nav ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
#nav li {
	display: inline-block;
	padding: 5px;
}
#nav .item {
	width: 36px;
	height: 40px;
	padding: 0px;
	margin: 0px;
	cursor: pointer;
	display: inline-block;
}
#nav #therm { background: url(images/buttons.png) no-repeat 0px }
#nav #therm:hover { background: url(images/buttons_hover.png) no-repeat 0px }
#nav #therm.active { background: url(images/buttons_active.png) no-repeat 0px }
#nav #stopwatch { background: url(images/buttons.png) no-repeat -36px }
#nav #stopwatch:hover { background: url(images/buttons_hover.png) no-repeat -36px }
#nav #stopwatch.active { background: url(images/buttons_active.png) no-repeat -36px }
#nav #bulb { background: url(images/buttons.png) no-repeat -72px }
#nav #bulb:hover { background: url(images/buttons_hover.png) no-repeat -72px }
#nav #bulb.active { background: url(images/buttons_active.png) no-repeat -72px }
#nav #compare { background: url(images/buttons.png) no-repeat -108px }
#nav #compare:hover { background: url(images/buttons_hover.png) no-repeat -108px }
#nav #compare.active { background: url(images/buttons_active.png) no-repeat -108px }
#nav #mass { background: url(images/buttons.png) no-repeat -144px }
#nav #mass:hover { background: url(images/buttons_hover.png) no-repeat -144px }
#nav #mass.active { background: url(images/buttons_active.png) no-repeat -144px }

#control {
	position: absolute;
	top: 481px;
	width: 280px;
	background-color: rgba(0,0,0,0.5);
}
#controls {
	display: inline-block;
}
#controls img { margin: 2px; }
img.icon { width:36px; height:36px; margin:0px; background:url('images/icons.png') no-repeat scroll transparent; }
img.play { background-position: 0px 0px!important; }
img.pause { background-position: -36px 0px!important; }
img.reset { background-position: -72px 0px!important; }
img.rewind { background-position: -108px 0px!important; }
img.ff { background-position: -144px 0px!important; }
a.control_rewind,a.control_ff { display: none; }
#speedcontrol {
	float:right;
	color: #fff;
	padding: 10px 0px 0px 8px;
}
#speedcontrol select {
	font-size: 14px;
}
#speedcontrol label {
	display: none;
}

#scaletext {
	display: block;
	position: absolute;
	text-align: right;
	color: white;
}
#scaletext .units {
	font-size: 0.35em;
	color: #bbb;
}

#right {
	width: 280px;
	position: absolute;
	height: 386px;
	top: 36px;
	overflow: hidden;
	-webkit-box-shadow: inset 0 2px 6px #444;
	-moz-box-shadow: inset 0 2px 6px #444;
	box-shadow: inset 0 2px 6px #444;
}

#right .section {
	height: 390px;
	width: 280px;
	position: absolute;
	right: 0;
	border-bottom: groove 5px #999;
	overflow: hidden;
}

#slide {
    position: absolute;
    top: 0;
    right: 0;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

#slide.nav-1 { top: -1200px }
#slide.nav-2 { top: -800px }
#slide.nav-3 { top: -400px }
#slide.nav-4 { top: 0 }

#rCanvas,#thermometer,#rStopwatch,#rlum,#rScales {
	background: rgba(0,0,0,0.5);
}
#rCanvas { top: 0; right: 0; }
#thermometer { top: 400px; right: 0; }
#rlum { top: 800px; }
#rStopwatch { top: 1200px; }
#rScales { top: 1600px; }

#starMass, #tevTime {
	position: absolute;
	bottom: 44px;
	text-align:right;
	z-index: 106;
	padding: 0px;
}
#tevTime { right: 330px; padding: 0px; }
#starMass { left: 60px; }

#starMass .value {
	font-size:1.2em;
	font-weight: bold;
}


#right .info {
    width: 25px;
    height: 25px;
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: url(images/info-button-hover.png) no-repeat transparent;
    cursor: pointer;
}

#right .info:hover { background: url(images/info-button.png) no-repeat transparent }

#right .info.active { background: url(images/info-button-active.png) no-repeat transparent }

#right .caption {
    color: #fff;
    position: absolute;
    width: 260px;
    padding: 10px;
    background: rgba(0,0,0,0.85);
    top: 0;
    left: 0;
    text-align: left;
}

#right .caption h2 {
	padding: 0;
	margin: 0 0 5px;
	color: #fff;
}

#right .caption p {
	margin-bottom: 0.6em;
}

a#animateEvolve,
a#animateEvolveReset {
    border-top: 1px solid #fff;
    background: #6b6b6b;
    padding: 3px 13px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    border-radius: 40px;
    -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
    -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
    box-shadow: rgba(0,0,0,1) 0 1px 0;
    text-shadow: rgba(0,0,0,.4) 0 1px 0;
    color: #fff;
    text-decoration: none;
    vertical-align: middle;
}

a#animateEvolve:hover,
a#animateEvolveReset:hover {
    border-top-color: #858585;
    background: #858585;
    color: #000;
}

a#animateEvolve:active,
a#animateEvolveReset:active {
    border-top-color: #fff;
    background: #fff;
}

#evolveSpeedDiv { margin-bottom: 10px }

#loader.done { display: none; }
#loader.error { display: block; }

#loader {
	z-index: 1100;
	background-color: rgba(0,0,0,0.5);
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0px;
	right: 0px;
	color: #fff;
}

#loader #loading,#loader #loaderror {
    position: relative;
    margin: 250px auto 0;
    display: block;
    width: 200px;
    padding: 20px;
    background: rgba(0,0,0,0.8);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: rgba(0,0,0,0.2) 1px 1px 10px;
    -moz-box-shadow: rgba(0,0,0,0.2) 1px 1px 10px;
    box-shadow: rgba(0,0,0,0.2) 1px 1px 10px;
}
#loader #loading {
    padding-top: 64px;
    background-image: url('images/ajax-loader.gif');
    background-position: center 20px;
    background-repeat: no-repeat;
}
#mass-slider .ticks {
	width: 700px;
	height: 12px;
	position: absolute;
	top: 16px;
	color: #fff;
}

#mass-slider .tick {
	position: absolute;
	font-size: 80%;
	top:0;
	left:0;
	width: 40px;
	text-align: center;
}

#stages .ticks {
	width: 700px;
	height: 12px;
	position: absolute;
	top: 16px;
	color: #fff;
}
#stages .tick {
	position: absolute;
	font-size: 70%;
	top:0;
	left:0;
	width: 96px;
	text-align: center;
}

#current-stage{
	position: absolute;
	z-index: 105;
	top:45px;
	right:335px;
	color: #000;
	width: auto;
	text-align: right;
}

#welcome{
	position: absolute;
	top: 32px;
	right: 32px;
	width: 320px;
	min-height: 210px;
	text-align: right;
	padding: 24px;
	background: #fff;
	background: url('images/graph.jpg') no-repeat -20px -16px;
	-webkit-box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
	-moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
	box-shadow: 1px 1px 5px rgba(0,0,0,0.7);
	cursor: default;
	z-index: 110;
	overflow: auto;
	max-height: 460px;
}

#welcome-content {
	text-align: left;
}
#welcome.summary {
	width: 840px;
	height: 400px;
	-webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

#welcome:before{
	position: absolute;
	width: 200px;
	height: 100px;
	background: url('images/tape.png') no-repeat;
	content: ' ';
	top:-15px;
	right:30px;
}
#welcome #help-content,#welcome #summary-content,#welcome #lang-content { display: none; }
#welcome.help #welcome-content,#welcome.help #summary-content, #welcome.help #lang-content { display: none; }
#welcome.summary #welcome-content,#welcome.help #help-content { display: none; }
#welcome.lang #welcome-content,#welcome.lang #help-content { display: none; }
#welcome.help #summary-content,#welcome.help #help-content { display: none; }
#welcome.help #help-content,#welcome.summary #summary-content, #welcome.lang #lang-content { display: block; }

#lang-content { text-align: left; }
#lang-content ul { list-style: none; margin: 0px 0px 1em 0px; }
#lang-content li { display: block; }
#lang-content li.selected { font-weight: bold; }
#lang-content li a { display: inline-block; padding: 0.5em 0; text-decoration: none; }
#help-content { text-align: left; }
#help-content ul.keyboard-controls {
	list-style: none;
	margin: 0px;
	padding: 0px;
	margin-left: 0px;
}
#help-content ul.keyboard-controls li {
	line-height: 1.4em;
	margin-bottom: 0.1em;
	display: inline-block;
	margin-right: 1em;
}
.key {
	min-width: 1.2em;
	display:inline-block;
	text-align:center;
	background:#f0f0f0;
	background:-moz-linear-gradient(top,#f0f0f0,#fcfcfc);
	background:-webkit-gradient(linear,center top,center bottom,from(#f0f0f0),to(#fcfcfc));
	border-radius:3px;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-webkit-background-clip:padding-box;
	-moz-background-clip:padding;
	background-clip:padding-box;
	color:#303030;
	border:1px solid #b0b0b0;
	border-bottom-width:2px;
	white-space:nowrap;
	font-family:monospace;
	padding: 0px 6px;
	font-size:1.1em;
	-moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
	-webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
	box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

p, #welcome p {
	margin-bottom: 6px;
}

#welcome h1,#welcome h2, #welcome h3 {
	font-family: 'SecretTypewriterRegular';
	opacity: 0.7;
	color: #000;
}
#welcome h1 {
	font-size: 2.6em;
	margin-bottom: 8px;
}
#welcome h2 {
	font-size: 2em;
	margin-bottom: 8px;
}
#welcome h3 {
	font-size: 1.5em;
	margin-top: 8px;
	margin-bottom: 8px;
}

#menu {
	position: absolute;
	top:8px;
	right: 35px;
	z-index:1015;
	color: #ddd;
	letter-spacing: 1px;
	font-weight: bold;
}

#menu ul { list-style: none; padding: 0px; margin: 0px; }
#menu li { display: inline-block; border-left: 2px solid #ddd; }
#menu li:first-child { border-left: 0px; }
#menu a { display: inline-block; padding: 0 0.5em; }
#menu a,#info a {
	color: #ddd;
	text-decoration: none;
}

#menu a:hover,#info a:hover{
	color: #ddd;
	text-shadow: -1px -1px rgba(0,0,0,0.3);
}

#welcome.help{
	width: 850px;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-webkit-transition: all 1s ease-in-out;
	transition: all 1s ease-in-out;
	z-index: 100;
}

#lid-open a {
	bottom:10px;
	right: 10px;
	font-family: 'SecretTypewriterRegular';
	text-decoration: none;
	font-size: 1.5em;
	cursor: pointer;
}

#welcome td,#welcome th,#welcome  tr{
	border: 1px solid #999;
	padding: 3px;
}

#welcome td {
	min-width: 110px;
}

#welcome .label {
	font-weight: bold;
	margin-right: 0.2em;
}
#welcome.summary #welcome-content p{
	margin: 10px 0;
}

#summary-table{
	display: inline-block;
	padding: 10px;
	background: #fff;
	position: relative;
	margin: 10px auto;
	-moz-box-shadow: 1px 1px 5px #666;
	-webkit-box-shadow: 1px 1px 5px #666;
	box-shadow: 0px 0px 5px #999;
	clear: both;
}
#summary-table tr td, #summary-table tr th { text-align: center; }
#summary-table tr td:first-child, #summary-table tr th:first-child { text-align: right; }
#downloads{
	float: right;
	clear: both;
	display: block;
	width: 100%;
}

.poppitypin{padding:8px;text-align:center;opacity:0.8;filter:alpha(opacity=80); background-repeat:no-repeat;white-space:nowrap;}
.poppitypin-inner{padding:12px;background-color:#000;color:white;max-width:200px;text-align:center;border-radius:4px;white-space:normal; }
.poppitypin:before{content:"";display:block;width:0;height:0;border:8px solid #000;position:absolute;}
.poppitypin-center:before{content:"";display:block;width:0;height:0;border:0px solid #000;position:absolute;}
.poppitypin-south:before{left:50%;top:-8px;margin-left:-8px;border-color:transparent transparent #000;}
.poppitypin-north:before{left:50%;bottom:-8px;margin-left:-8px;border-color:#000 transparent transparent;}
.poppitypin-west:before{top:50%;right:-8px;margin-top:-8px;border-color:transparent transparent transparent #000;}
.poppitypin-east:before{top:50%;left:-8px;margin-top:-8px;border-color:transparent #000 transparent transparent;}
.poppitypin h2 { margin-bottom: 8px; }
.poppitypin .button { margin-top: 8px; cursor: pointer; color: black; margin-left: 8px;}
.ieold .poppitypin-north:before{_border-top-color: pink,_border-right-color: pink,_border-left-color:pink,_filter:chroma(color=pink);}
.ieold .poppitypin-south:before{_border-bottom-color: pink,_border-right-color: pink,_border-left-color:pink,_filter:chroma(color=pink);}
.ieold .poppitypin-east:before{_border-top-color: pink,_border-bottom-color: pink,_border-left-color:pink,_filter:chroma(color=pink);}
.ieold .poppitypin-west:before{_border-top-color: pink,_border-bottom-color: pink,_border-right-color:pink,_filter:chroma(color=pink);}

#modeform { position:relative;line-height: 30px; text-align: left; }
.toggle-bg{
	background: #cccccc;
	 -khtml-border-radius: 20px;
	   -moz-border-radius: 20px;
		-ms-border-radius: 20px;
		 -o-border-radius: 20px;
	-webkit-border-radius: 20px;
			border-radius: 20px;	
	-khtml-box-shadow: inset 0 0 3px rgba(0,0,0,0.4), inset 0 10px 0px rgba(0,0,0,0.05);
	   -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.4), inset 0 10px 0px rgba(0,0,0,0.05);
		-ms-box-shadow: inset 0 0 3px rgba(0,0,0,0.4), inset 0 10px 0px rgba(0,0,0,0.05);
		 -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.4), inset 0 10px 0px rgba(0,0,0,0.05);
	-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.4), inset 0 10px 0px rgba(0,0,0,0.05);
			box-shadow: inset 0 0 3px rgba(0,0,0,0.4), inset 0 10px 0px rgba(0,0,0,0.05);
	display: inline-block;
	height: 20px;
	position: relative;
	width: 40px;
	cursor: pointer;
}

.toggle-label1 { display: inline-block; margin-right: 5px; }
.toggle-bg label { line-height: 20px; margin-left: 46px; display: inline-block; }
.toggle-bg input {
	height: 20px;
	left: 0;
	margin: 0; /* Reset the margins and padding */
	opacity: 0.0; /* Invisible! */
	padding: 0;
	position: absolute;
	top: 0;
	width: 40px;
	z-index: 2;
		/*IE*/
		zoom: 1;
		filter: alpha(opacity=0);
	cursor: pointer;
}
/* As we are hiding the radio buttons we will make the switch glow when the radio button receives focus. We need to use some sibling selectors. */
.toggle-bg input:focus + .switch, .toggle-bg input:focus + input + .switch, .toggle-bg input:hover + .switch, .toggle-bg input:hover + input + .switch {
	box-shadow: 0 1px 1px #65727b, 0 0 1px #b6bdc2, 0 0 4px 1px #3366dd;
}
.switch{
	cursor: pointer;
	background: #ffffff;

	 -khtml-border-radius: 20px;
	   -moz-border-radius: 20px;
		-ms-border-radius: 20px;
		 -o-border-radius: 20px;
	-webkit-border-radius: 20px;
			border-radius: 20px;
	 -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: inline-block;
	height: 20px;
	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: absolute;
	top: 0; /* ...To keep it centered vertically */
	 -khtml-transition: left .2s ease;
	   -moz-transition: left .2s ease;
		-ms-transition: left .2s ease;
		 -o-transition: left .2s ease;
	-webkit-transition: left .2s ease;
			transition: left .2s ease;
	width: 20px;
	z-index: 1; /* Remember, it must be below the invisible inputs */
}
.toggle-bg input:checked~.switch{left: -1px; } /* initial toggle position */
.toggle-bg input~:checked~.switch{left: 21px;} /* final relative toggle position */
.toggle-bg input:checked{ z-index: 0; }