sleep.css

* {
	font-size:35px;
	font-family:helvetica;
}

::-webkit-input-placeholder {
	opacity:.5;
}

:-moz-placeholder {
/* Firefox 18- */
	opacity:.5;
}

::-moz-placeholder {
/* Firefox 19+ */
	opacity:.5;
}

:-ms-input-placeholder {
	opacity:.5;
}

@media only screen and (min-device-width : 320px) and (max-device-width : 568px) {
	html {
		max-width:100%;
		max-height:100%;
	}
	
	body {
		color:#fff;
	/*    background-image: none !important;
	    background-color: #70A5D6; */
	}
	
	.disclaimer {
		font-size:18px!important;
	}
	
	.calcbtn {
		width:90%!important;
	}
	
	.high {
		font-size:35px!important;
	}
	
	.med {
		font-size:25px!important;
	}
	
	.low {
		font-size:20px!important;
	}
	
	.sleeporwake {
		width:100%!important;
	}
	
	#sleepnow {
		margin:0 auto;
		max-width:100%;
		padding:0;
	}
	
	body {
		max-width:640px;
		margin:0!important;
	}
	
	.about {
		display:none;
	}
	
	.header {
		height:45px;
		margin:0!important;
		background-image:url(http://css-tricks.com/wp-content/csstricks-uploads/transpBlack10.png);
		padding-top:0;
	}
	
	.tagline {
		font-family:'Coming Soon',cursive;
		display:none;
	}
	
	#contain {
		max-width:100%;
	}
}

.calcbtn {
    margin:0 auto;width:60%
}

.calcbtn p {
    font-size:16px;opacity:0.6;
}

.header {
    margin-top:15px;margin-left:10px;width:150px
}
.show {
	display:none;
}

.low {
	color:#fff;
/*    color:#9ad3eb;*/
	font-size:30px;
	font-weight:200;
	opacity:.45;
}

.med {
	color:#fff;
	font-size:40px;
	font-weight:400;
	opacity:.8;
}

.high {
	color:#fff;
	font-weight:800;
	font-size:55px;
}

h1 {
	font-weight:100;
	font-size:26px;
}

.sleeporwake h1 {
	text-align:center;
	font-weight:100;
	font-size:50px;
	margin:0 0 10px;
	opacity:.6;
}

.description {
	text-align:center;
	margin-top:0;
	margin-bottom:35px;
	font-size:22px;
	font-style:italic;
	font-weight:100;
	opacity:.6;
}

#contain {
	max-width:800px;text-align:center;margin: 0 auto
}

.social {
	position:fixed;
	bottom:0;
	float:left;
}

.twitter-share-button {
	margin-bottom:10px;
	float:left;
	font-size:12px;
}

#zzz,#xxx {
	font-size:27px;
}

.info p, a {
    font-size:16px
}

body {
	color:#fff;
/* background-image: url('http://i.imgur.com/kgemBFu.jpg');
    background-size:cover;
    background-color: #70A5D6; */
	background:-webkit-linear-gradient(#0E2958,#294363);
/* For Safari 5.1 to 6.0 */
	background:-o-linear-gradient(#0E2958,#294363);
/* For Opera 11.1 to 12.0 */
	background:-moz-linear-gradient(#0E2958,#294363);
/* For Firefox 3.6 to 15 */
	background:linear-gradient(#0E2958,#294363);
}

.onoffswitch {
	position:relative;
	width:125px;
	top:10px;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	display:inline-block;text-align:left
}

.onoffswitch-checkbox {
	display:none;
}

.onoffswitch-label {
	display:block;
	overflow:hidden;
	cursor:pointer;
	border:none;
	border-radius:46px;
}

.onoffswitch-inner {
	width:200%;
	margin-left:-100%;
	-moz-transition:margin .3s ease-in 0;
	-webkit-transition:margin .3s ease-in 0;
	-o-transition:margin .3s ease-in 0;
	transition:margin .3s ease-in 0;
}

.onoffswitch-inner:before,.onoffswitch-inner:after {
	float:left;
	width:50%;
	height:46px;
	padding:0;
	line-height:46px;
	font-size:35px;
	color:#fff;
	font-family:Helvetica,Trebuchet,Arial,sans-serif;
	font-weight:400;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	border-radius:46px;
}

.onoffswitch-inner:before {
	content:"AM";
	padding-left:10px;
	background-color:#206AAD;
	color:#FFF;
	border-radius:46px 0 0 46px;
}

.onoffswitch-inner:after {
	content:"PM";
	padding-right:10px;
	background-color:#294155;
	color:#FFF;
	text-align:right;
	border-radius:0 46px 46px 0;
}

.onoffswitch-switch {
	width:46px;
	margin:0;
	background:#FFF;
	border:none;
	border-radius:46px;
	position:absolute;
	top:0;
	bottom:0;
	right:79px;
	-moz-transition:all .3s ease-in 0;
	-webkit-transition:all .3s ease-in 0;
	-o-transition:all .3s ease-in 0;
	transition:all .3s ease-in 0;
	background-image:-moz-linear-gradient(center top,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 80%);
	background-image:-webkit-linear-gradient(center top,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 80%);
	background-image:-o-linear-gradient(center top,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 80%);
	background-image:linear-gradient(center top,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 80%);
	box-shadow:0 1px 1px #fff inset;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
	margin-left:0;
}

.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
	right:0;
}

.onoffswitch2 {
	position:relative;
	width:200px;
	top:10px;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select:none;
	display:inline-block;text-align:left
}

.onoffswitch2-checkbox {
	display:none;
}

.onoffswitch2-label {
	display:block;
	overflow:hidden;
	cursor:pointer;
	border:none;
	border-radius:46px;
}

.onoffswitch2-inner {
	width:200%;
	margin-left:-100%;
	-moz-transition:margin .3s ease-in 0;
	-webkit-transition:margin .3s ease-in 0;
	-o-transition:margin .3s ease-in 0;
	transition:margin .3s ease-in 0;
}

.onoffswitch2-inner:before,.onoffswitch2-inner:after {
	float:left;
	width:50%;
	height:46px;
	padding:0;
	line-height:46px;
	font-size:35px;
	color:#fff;
	font-family:Helvetica,Trebuchet,Arial,sans-serif;
	font-weight:400;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	border-radius:46px;
}

.onoffswitch2-inner:before {
	content:"wake up";
	padding-left:10px;
	background-color:#206AAD;
	color:#FFF;
	border-radius:46px 0 0 46px;
}

.onoffswitch2-inner:after {
	content:"sleep";
	padding-right:35px;
	background-color:#294155;
	color:#FFF;
	text-align:right;
	border-radius:0 46px 46px 0;
}

.onoffswitch2-switch {
	width:46px;
	margin:0;
	background:#FFF;
	border:none;
	border-radius:46px;
	position:absolute;
	top:0;
	bottom:0;
	right:154px;
	-moz-transition:all .3s ease-in 0;
	-webkit-transition:all .3s ease-in 0;
	-o-transition:all .3s ease-in 0;
	transition:all .3s ease-in 0;
	background-image:-moz-linear-gradient(center top,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 80%);
	background-image:-webkit-linear-gradient(center top,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 80%);
	background-image:-o-linear-gradient(center top,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 80%);
	background-image:linear-gradient(center top,rgba(0,0,0,0.1) 0%,rgba(0,0,0,0) 80%);
	box-shadow:0 1px 1px #fff inset;
}

.onoffswitch2-checkbox:checked + .onoffswitch2-label .onoffswitch2-inner {
	margin-left:0;
}

.onoffswitch2-checkbox:checked + .onoffswitch2-label .onoffswitch2-switch {
	right:0;
}

#hourInput,#minInput {
	height:46px;
	font-size:35px;
	width:50px;
	text-align:center;
	border-radius:3px;
	border:none;
	background-color:rgba(0,0,0,0.20);
	color:#fff;
}

#hourInput:focus,#minInput:focus {
	outline:none;
	border-color:#206AAD;
	box-shadow:0 0 10px #206AAD;
}

#sleepnow {
margin:20px auto;
	width:100%;
	color:#fff;
	font-size:30px;
	height:55px;
	background:#65bd63;
	border-radius:3px;
	padding:5px;
	border-top:none;
	border-left:none;
	border-right:none;
	border-bottom:4px solid #634da7;
	background-image:-webkit-linear-gradient(top,(#8e7cc3),#7f6bbb);
	background-image:-moz-linear-gradient(top,#8e7cc3,#7f6bbb);
	background-image:-o-linear-gradient(top,#8e7cc3,#7f6bbb);
	background-image:linear-gradient(to bottom,#8e7cc3,#7f6bbb);
	cursor:pointer;
}

#go {
	color:#fff;
	font-size:30px;
	height:55px;
	background:#206AAD;
	border-radius:3px;
	border-top:none;
	border-left:none;
	border-right:none;
	padding:5px;
	border-bottom:4px solid #185082;
	background-image:-webkit-linear-gradient(top,#206AAD,#2477c3);
	background-image:-moz-linear-gradient(top,#206AAD,#2477c3);
	background-image:-o-linear-gradient(top,#206AAD,#2477c3);
	background-image:linear-gradient(to bottom,#206AAD,#2477c3);
	cursor:pointer;
}

#go:hover {
	background:#2477c3;
}

#sleepnow:hover {
	background:#8e7cc3;
}

.alert,#alert {
	display:none;
	font-size:19px;
	clear:both;
	color:#904D4B;
}

p {
	display:block;
	-webkit-margin-before:.25em;
	-webkit-margin-after:.25em;
	-webkit-margin-start:0;
	-webkit-margin-end:0;
}

a {
	color:#19BAB1;
}

hr {
	width:100%;
	opacity:.4;
	color:#fff;
}

/****************************

*******************/
.tooltip {
	position:absolute;
	z-index:1030;
	display:block;
	visibility:visible;
	font-size:12px;
	line-height:1.4;
	opacity:0;
	filter:alpha(opacity=0);
}

.tooltip.in {
	opacity:.9;
	filter:alpha(opacity=90);
}

.tooltip.top {
	margin-top:-3px;
	padding:5px 0;
}

.tooltip.right {
	margin-left:3px;
	padding:0 5px;
}

.tooltip.bottom {
	margin-top:3px;
	padding:5px 0;
}

.tooltip.left {
	margin-left:-3px;
	padding:0 5px;
}

.tooltip-inner {
	max-width:200px;
	padding:3px 8px;
	color:#fff;
	text-align:center;
	text-decoration:none;
	background-color:#000;
	border-radius:4px;
}

.tooltip-arrow {
	position:absolute;
	width:0;
	height:0;
	border-color:transparent;
	border-style:solid;
}

.tooltip.top .tooltip-arrow {
	bottom:0;
	left:50%;
	margin-left:-5px;
	border-width:5px 5px 0;
	border-top-color:#000;
}

.tooltip.top-left .tooltip-arrow {
	bottom:0;
	left:5px;
	border-width:5px 5px 0;
	border-top-color:#000;
}

.tooltip.top-right .tooltip-arrow {
	bottom:0;
	right:5px;
	border-width:5px 5px 0;
	border-top-color:#000;
}

.tooltip.right .tooltip-arrow {
	top:50%;
	left:0;
	margin-top:-5px;
	border-width:5px 5px 5px 0;
	border-right-color:#000;
}

.tooltip.left .tooltip-arrow {
	top:50%;
	right:0;
	margin-top:-5px;
	border-width:5px 0 5px 5px;
	border-left-color:#000;
}

.tooltip.bottom .tooltip-arrow {
	top:0;
	left:50%;
	margin-left:-5px;
	border-width:0 5px 5px;
	border-bottom-color:#000;
}

.tooltip.bottom-left .tooltip-arrow {
	top:0;
	left:5px;
	border-width:0 5px 5px;
	border-bottom-color:#000;
}

.tooltip.bottom-right .tooltip-arrow {
	top:0;
	right:5px;
	border-width:0 5px 5px;
	border-bottom-color:#000;
}


.fb-like {
    display:inline-block;margin-left:15px;margin-top:5px;
}

.disclaimer {font-size:25px;}