/* ---------------------------------------------- */
/*         			Kertotaulukone		          */
/* ---------------------------------------------- */

/* reset */
* {margin:0; padding:0;}
img {border:none;}

button:focus {outline:none;}
button:active {outline:none;}

a {text-decoration:none;}

/* imgPreload */
div#image-preload {display:none;}

body {
	font-family: Arial, Helvetica, sans-serif;
	background: #000;
	color: #fff;
}

div#kone {
	width: 734px;
	height: 533px;
	background: url(../img/bg.jpg) 0 0 no-repeat; 
	margin: 30px auto;
	position: relative;
	/*not selectable: */
	-webkit-user-select: none; /* Chrome/Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
}

img#kayntivalo {
	position: absolute;
	top: 29px;
	right: 50px;
}

img#ratas {
	position: absolute;
	top: 144px;
	left: 126px;
}

img#puolat {
	position: absolute;
	top: 150px;
	left: 134px;	
}

p#sekunnit {
	font-size: 14px;
	position: absolute; 
	top: 196px;
	left: 171px;
	width: 35px;
	text-align: center;
}

img#vihrea_valo {
	position: absolute;
	top: 191px;
	left: 22px;	
}

button {
	background: #518951;
	border:none;
	padding: 5px 10px;
	position: absolute;
	cursor: pointer;
	border-radius: 15px;
	font-size: 14px;
	text-transform: uppercase;	
	box-shadow: 1px 1px 5px #0c3b0c;
	border: 2px solid #ccc;
	color: #fff;
}

button:hover {
	background: #45c945;
}

button#start {
	width: 91px;
	top: 300px;
	left: 142px;
}


div#kertolaskut {
	position: absolute;
	top: 80px;
	left: 402px;
	font-size: 24px;
}

div#kertolaskut p {
	text-align: center;
	margin-bottom: 5px;
}

p#tulos {
	font-size: 24px;
	position: absolute;
	top: 22px; right: 106px;
	text-align: center;
}

span.kertomerkki {
	display: inline-block;
	width: 8px;
	height: 24px;
	background: url(../img/kertomerkki.png) 0 8px no-repeat; 
	margin: 0 10px 0 10px;
}

span.oikein {
	color: #0f0;
	margin: 0 0 0 10px;
}

span.vaarin {
	color:#f00;
	margin: 0 0 0 10px;
}

input {
	background: none;
	font-size: 24px;
	width: 55px;
	border: none;
	border-bottom: 1px solid #fff;
	outline: none;
	color: #fff;
}
div#tasovalinta {
	position:absolute;
	top: 435px;
	left: 70px;
}

div#tasovalinta p {	
	background: url(../img/tasovalinta_bg.png) 0 0 no-repeat; 
	width: 23px;
	height: 24px;
	padding: 4px 0 0 11px;
	cursor:pointer;
	margin-right: -2px;
}

p#taso_a, p#taso_d {
	margin-left: 17px;
}
p#taso_a {
	position: absolute;
	top: 0;
	left: 0;
}
p#taso_b {
	position: absolute;
	top: 13px;
	left: -5px;
}
p#taso_c {
	position: absolute;
	top: 13px;
	left: 40px;
}
p#taso_d {
	position: absolute;
	top: 27px;
	left: 0px;
}


button#ohjeet {
	font-family:Times;
	font-style:italic;
	font-weight:bold;
	text-transform:none;
	font-size: 18px;
	bottom: 57px; left: 175px;
	padding: 1px 10px 0 9px;
	border-radius: 100%;
}

div#ohjeteksti,textarea {
	background: rgb(255, 255, 255); /* The Fallback */
	background: rgba(255, 255, 255, 0.4); 
	position: absolute;
	top: 106px;
	left: 368px;
	width: 275px;
	padding: 10px;	
}

textarea {
	height: 270px;
	resize: none;
}
button#lahetaPalaute {
	top: 420px;
	left: 587px;
}

#ohjeteksti a {
	color: #000;
	text-decoration: underline;
	margin: 0;
}

div#ohjeteksti p {
	font-family: "Inconsolata";
	text-align:left;
	font-size: 15px;
	margin: 0 0 14px 0;
	color: #000;
}
div#ohjeteksti p:last-child {
	margin-bottom: 2px;
}

/* FB-tykkäysnappi */
div.fb-like {
	position: absolute;
	bottom: -45px;
	left: 17px;	
}

p#kiitos {
	position: absolute;
	top: 190px;
	left: 386px;
	font-size: 25px;
}