html, body, p, img{
	margin:0;
	padding:0;
	hyphens: auto;
	font-family: 'Lato', sans-serif;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */ 
}

#header {
	height:37.2%;
}

#game {
	margin:0 auto;
	width: 1024px;
	height:768px;
	background-color: #fff; 
	overflow:hidden;
	/*border: solid 1px; /*debug*/
}

.ruutu {
	position:relative;
	height:62.8%;
	overflow:hidden;	
}

#aloitusruutu {
	top:-62.8%;
}

#ingame {
	top: 70%;
}

/*Aloitusruudun elementit*/
#laureabox {
	position:relative;
	left: 3%;
	top: 10.5%;
	width: 27%;
	height: 89.5%;
	background-image: url(img/laureabox.png);
	background-size: 100%;
	background-repeat: no-repeat;
}

#sinunkorkeakoulusi {
	position:relative;
	left: 32%;
	top: -79%;
	width: 65%;
	height: 89.5%;
	background-image: url(img/sinunkorkeakoulusi.png);
	background-size: 100%;
	background-repeat: no-repeat;
}
	

	
.mahdollisuutesi {
	position:relative;
	left: 3%;
	width: 94%;
	height: 27%;
	background-image: url(img/mahdollisuutesi.png);
	background-size: 100%;
	background-repeat: no-repeat;
}
	
#aloituscontent {
	position:relative;
	background-color: #009fda; /*cyan*/
	left: 3%;
	width: 94%;
	height: 45.8%;
}
	
.palsta {
	display: inline;
	position: relative;
	width: 46%;
	left: 3%;
	top: 10%;
}

.palsta img{
	height:56px;
}	
	
.palsta p {
	position:relative;
	top: -13pt;
	left: 10pt;
	display: inline;
	color: #FFF;
	font-weight: 900;
	font-style: italic;
	font-size: 170%;
}

#vasenpalsta {
	float:left;
}

#footertext {
	position:relative;
	left: 3%;
	width: 94%;
	height: 11.4%;
	background-color: #003478; /*laurea blue*/
}

#footertext p {
	padding: 1% 0;
	text-align: center;	
	color: #FFF;
	font-weight: 900;
	font-size: 18pt;
}

#laurealogo {
	position:relative;
	margin: 0 auto;
	top: 3%;
	width: 32%;
	height: 8.7%;
	background-image: url(img/laurealogo.png);
	background-size: 100%;
	background-repeat: no-repeat;
}

#aloitapeli {
	position: relative;
	left: 81%;
	top: -33%;
	width: 17%;
	height: 37%;
	background-image: url(img/aloitapeli.png);
	background-size: 100%;
	background-repeat: no-repeat;
}

#parhaatpelaajat {
	position: relative;
	left: 83.7%;
	top: -98%;
	width: 10.94%;
	height: 24.92%;
	background-image: url(img/parhaatpelaajat.png);
	background-size: 100%;
	background-repeat: no-repeat;
}




/* ingame elementit*/

#content {
	position: relative;
	left: 3%;
	width: 94%;
	height:86.3%;
	top: 6.8%;
	background-color: #009fda; /*cyan*/
	overflow:hidden;
}


#score {
	position: relative;
	top: 0%;  /*pre-tween value to be tweened to -131%*/
	text-align: center;	
	color: #003478; /*laurea blue*/
	font-weight: 900;
	font-size:650%;
	width: 50%;
	margin: auto;
}

#iconcontainer {
	position: relative;
	width:100%;
	height:100%;
	top:-77%;
	opacity: 0; /*to be tweened to 1*/
}

		.icons {
			position: relative;
			background-size: 100%;
			background-repeat: no-repeat;
			background-position: 0 0px;
			height:37%;
			width:13.8%;
			display:inline-block;
			opacity: 0.3;
		}

		#icon1 {
			background-image: url(img/icon1.png);
			left: 7.2%;
			top: 34%;
		}
		#icon2 {
			background-image: url(img/icon2.png);
			left: 6.4%;
			top: 12%;
		}
		#icon3 {
			background-image: url(img/icon3.png);
			left: 7.2%;
		}
		#icon4 {
			background-image: url(img/icon4.png);
			left: 8.3%;
		}
		#icon5 {
			background-image: url(img/icon5.png);
			left: 9.1%;
			top: 12%;
		}
		#icon6 {
			background-image: url(img/icon6.png);
			left: 8.3%;
			top: 34%;
		}

#outercircle {
	position: relative;
	top: 700px; /*to be tweened to 0*/
}





/*endscreen & arvontascreen elementit*/

#arvontacontent {
	position:relative;
	top: 6.8%;
	left: 3%;
	width: 94%;
	height: 51.8%;
	background-color: #009fda; /*cyan*/
}
		#arvontacontent p{
			padding:1.4%;
			text-align: center;
			color: #FFF;
			font-weight: 700;
			font-size: 180%;
		}
		
		#inputcontainer{
			position: relative;
			top: 15%;
			width: 50%;
			height: 15%;
			margin: auto;
		}
			#ipad-email {
				height: 100%;
				width: 100%;
				padding: 1%;
				resize:none;
				margin:auto;
				text-align: center;
				color: #009fda; /*cyan*/
				font-weight: 700;
				font-size: 170%;
			}


#loppucontent {
	position:relative;
	left: 3%;
	width: 94%;
	height: 31.6%;
}

		#ikoniteksti {
			position:relative;
			top: 0%;
			width: 100%;
			height: 100%;
			background-color: #009fda; /*cyan*/
			background-image: url(img/icon6.png);
			background-position: 2% 55%;
			background-repeat: no-repeat;
			background-size: 9%;
		}

				#viestit {
					padding: 2% 3% 3% 13%;
				}

				#viestiLong, #viestiShort {
					text-align: left;	
					color: #FFF;
					font-weight: 900;
					font-style: italic;
					font-size: 170%;
					display: inline;
				}

				#viestiLong {
					font-weight: 700;
					font-size: 140%;
				}

#loppufooter, #arvontafooter {
	position:relative;
	left: 3%;
	top: 3%;
	width: 94%;
	height: 31.6%;
}

#arvontafooter {
	top: 10%;
}

		.backbutton, #hsbackbutton{
			position:relative;
			background-color: #d10074; /*pink*/
			background-image: url(img/backbutton.png);
			height: 100%;
			width:28.35%;
			background-repeat: no-repeat;
			background-position: 10% 55%;
			background-size: 25%;
			top:100%; /*tween to 0%*/
		}
				.backbutton p, #hsbackbutton p{
					padding:15% 20% 20% 40%;
					text-align: center;	
					color: #FFF;
					font-weight: 900;
					font-size: 180%;
				}

		#arvonta, #laheta {
			position:relative;
			background-color: #35bc00; /*green*/
			height: 100%;
			width:36.9%;
			left: 31.35%;
			top: 30% /* tween to -100%*/
		}
		
				#arvonta p, #laheta p{
						padding:7.4%;
						text-align: center;	
						color: #FFF;
						font-weight: 900;
						font-size: 240%;
				}
				
				#laheta p {
					padding: 14%;
				}
		
		#peliohi {
			position:relative;
			height: 100%;
			width:28.35%;
			left: 71.25%;
			top: -100%; /*tween to -200%*/
			background-color: #003478; /*laurea blue*/
		}

				#peliohi p{
					padding:9.5% 0 0 0;
					text-align: center;	
					color: #FFF;
					font-weight: 900;
					font-size: 180%;
				}
				
				#loppuscore {
					position: relative;
					top: 0%; 
					width: 50%;
					margin: auto;
					text-align: center;	
					color: #fff;
					font-weight: 900;
					font-size:400%;
				}
				
				
/*highscoreruutu elementit*/
#highscoreruutu {
	top:0; /*moved to -254.5% when shown*/
	background-color: #FFF;
}

#highscorecontainer {
	position:relative;
	padding: 0;
	margin: 0;
	top:-6%;
}

#highscoreheading {
	position:relative;
	width: 65%;
	height: height: 27%;
	left: 32%;
}
		#highscoreheading h1 {
			padding:1% 0 2% 7%;
			text-align: left;	
			color: #003478; /*laurea blue*/
			font-weight: 900;
			font-size: 240%;
		}
#highscorefooter {
	position:relative;
	left: 3%;
	top: -69.2%;
	width: 26%;
	height: 31.6%;
}

		#hsbackbutton {
			width:100%;
		}
				#hsbackbutton p{
					padding:20% 20% 20% 40%;
				}

#highscorecontent {
	position:relative;
	left: 32%;
	width: 65%;
	height: 73.1%;
	top: -6%;
	background-color: #009fda; /*cyan*/
}
	#highscorelist {
		padding: 5%;
	}
		.leader {
			padding: 1.5%;
			text-align: left;
			color: #FFF;
			font-weight: 900;
			font-size: 200%;			
		}
				
		.hsrank {
			font-weight: 300;
		}
		
		.hsscore {
			float:right;
			text-align: right;
		}
		
		.hsinput  {
				display: none;
				height: 70%;
				width: 70%;
				resize:none;
				margin:0;
				padding:0;
				text-align: center;
				color: #009fda; /*cyan*/
				font-weight: 700;
				font-size: 80%;
			}