/* CSS Document */
body {
	margin: 0;
	padding: 0;
	background-color: #A5DEE2;
	color: #fff;
	text-align: center;
	-webkit-font-smoothing: antialiased;;
	}
	body.mobile {
		background-image: url(../img/bg-mobile.jpg);
		background-position: top;
		background-repeat: no-repeat;
		background-size: cover;
		}
	
	a {font-size: 16px;}
	a:link {color: #2e89bc; font-weight: bold; text-decoration: none;}
	a:active {color:#2e89bc; font-weight: bold; text-decoration: none;}
	a:visited {color: #2e89bc; font-weight: bold; text-decoration: none;}
	a:hover {color: #fff; font-weight: bold; text-decoration: none;}
	a.selected {color: #66ccff; font-weight: bold; text-decoration: none;}
	
	#logo {
		position: absolute;
		top: 20px;
		left: 20px;
		}
	#social {
		position: absolute;
		bottom: 20px;
		right: 25px;
		width: 250px;
		}
		#icon-audio {
			display: block;
			float: right;
			width: 31px;
			height: 26px;
			margin: 2px 0px 0px 0px;
			background-image: url(../img/icon-audio.png);
			background-position: top left;
			background-repeat: no-repeat;
			}
			#icon-audio.audioOff {
				background-position: top right;
				}
		#icon-facebook,
		#icon-gplus,
		#icon-twitter,
		#icon-pinterest {
			display: block;
			float: right;
			margin: 0px 0px 0px 10px;
			}
	#siteContentWrapper {
		position: absolute;
		top: 0px;
		left: 0px;
		height: 100%;
		width: 100%;
		overflow: hidden;
		background: #A5DEE2;
		min-width: 1000px;
		min-height: 700px;
		}
		#milk-flash {
			position:absolute;
			top: 0px;
			left: 0px;
			width:100%;
			height:100%;
			overflow:hidden;
			}
	#portraitTest {
		position: absolute;
		top: 0px;
		left: 0px;
		height: 100%;
		width: 100%; 
		overflow: hidden;
		display: none;
		text-align: center;
		background: #bbdfe0;
		}
	
		#portraitTestInside {
			padding-top:49%;
			}
		#bg-tablet {
			position: absolute;
			top: 800px;
			left: 50%;
			margin: 0px 0px 0px -512px;
		}
		#step0 {
			position: absolute;
			width: 100%;
			height: 30px;
			left: 0;
			top: 50%;
			margin: 0px;
			display: none;
			text-align: center;
			}
			
		#step1 {
			position: absolute;
			width: 600px;
			height: 600px;
			left: 50%;
			top: 50px;
			margin: 20px 0px 0px -300px;
			display: none;
			}
			#step1-phone1{
				position: absolute;
				left: 140px;
				top: 10px;
			}
			#step1-phone2{
				position: absolute;
				left: 135px;
				top: 10px;
			}
			#step1-subtitle{
				position: absolute;
				left: 115px;
				top: 130px;
			}
			#numpad {
				position: absolute;
				left: 172px;
				top: 180px;
				}
			#numpad a{
				position: absolute;
				height: 120px;
				width: 85px;
				background-image: url(../img/numpad.png);
				background-repeat: no-repeat;
				}
				#number1 {
					left: 0;
					top: 0;
					background-position: left -120px;
					}
				#number2 {
					left: 85px;
					top: 0;
					background-position: left -240px;
					}
				#number3 {
					left: 170px;
					top: 0;
					background-position: 0 0;
					background-position: left -360px;
					}
				#number4 {
					left: 0;
					top: 85px;
					background-position: 0 0;
					background-position: left -480px;
					}
				#number5 {
					left: 85px;
					top: 85px;
					background-position: 0 0;
					background-position: left -600px;
					}
				#number6 {
					left: 170px;
					top: 85px;
					background-position: left -720px;
					}
				#number7 {
					left: 0;
					top: 170px;
					background-position: left -840px;
					}
				#number8 {
					left: 85px;
					top: 170px;
					background-position: left -960px;
					}
				#number9 {
					left: 170px;
					top: 170px;
					background-position: left -1080px;
					}
				#number0 {
					left: 85px;
					top: 255px;
					background-position: left 0;
					}
				#numpad a:hover{
					/*
					background-position-x: right;
					*/
					}
					
		#step2 {
			position: absolute;
			width: 980px;
			height: 600px;
			left: 50%;
			top: 0;
			margin: 20px 0px 0px -490px;
			display: none;
			}
			#step2-title {
				position: absolute;
				left: 50%;
				margin: 0px 0px 0px -325px;
				top: 0;
				}
			#step2 a {
				background-repeat: no-repeat;
				background-position: top left;
			}
			#avatar1 {
				position: absolute;
				left: 225px;
				top: 375px;
				background-image: url(../img/avatar-boring.png);
				width: 255px;
				height: 255px;
				}
			#avatar6 {
				position: absolute;
				left: 100px;
				top: 75px;
				background-image: url(../img/avatar-yawners.png);
				width: 290px;
				height: 280px;
				}
			#avatar3 {
				position: absolute;
				left: 0;
				top: 300px;
				background-image: url(../img/avatar-lullaby.png);
				width: 200px;
				height: 265px;
				}
			#avatar4 {
				position: absolute;
				left: 730px;
				top: 50px;
				background-image: url(../img/avatar-maidens.png);
				width: 240px;
				height: 300px;
				}
			#avatar5 {
				position: absolute;
				left: 500px;
				top: 350px;
				background-image: url(../img/avatar-monk.png);
				width: 230px;
				height: 280px;
				}
			#avatar2 {
				position: absolute;
				left: 350px;
				top: 225px;
				background-image: url(../img/avatar-panther.png);
				width: 310px;
				height: 200px;
				}
			#avatar7 {
				position: absolute;
				left: 730px;
				top: 350px;
				background-image: url(../img/milk_zzz-faded.png);
				width: 250px;
				height: 120px;
				}
			#waterfall {
				position: absolute;
				left: 815px;
				top: -250px;
				}
				
				/*#step2 a.sm2_paused,
				#step2 a.sm2_playing*/
				#step2 a.active.sm2_paused,
				#step2 a.active.sm2_playing {
					background-position: top right;
				}
	
	/**********************************************************************************
	TABLET
	**********************************************************************************/
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		html {
			width: 1024px;
			-webkit-text-size-adjust: none;
			}
		html body {
			}
			#siteContentWrapper {
				min-width: 980px;
				min-height: 600px;
				}
	}
	
	/**********************************************************************************
	IPHONE
	**********************************************************************************/
	
	#callus {
		position: relative;
		margin: 150px auto 0px auto;
		width: 350px;
	}
	
	
	@media screen and (max-device-width: 480px) {
		html {
			width: 480px;
			height: 100%;
			-webkit-text-size-adjust: none;
			}
		#logo {
			position: absolute;
			top: 20px;
			left: 20px;
		}
	}
	@media screen and (max-device-width: 480px) and (orientation : landscape) {
		/*
		html {
			height: 700px;
			}
			*/
		#callus {
			margin: 65px auto 50px auto;
			width: 300px;
		}
		#logo img {
			width: 75px;
		}
	}
	@media screen and (max-device-width: 480px) and (orientation : portrait) {
		#logo img {
			width: 103px;
		}
	
	}