/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
	*/

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td,
	article, aside, canvas, details, embed, 
	figure, figcaption, footer, header, hgroup, 
	menu, nav, output, ruby, section, summary,
	time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		font-size: 100%;
		font: inherit;
		vertical-align: baseline;
	}
	/* HTML5 display-role reset for older browsers */
	article, aside, details, figcaption, figure, 
	footer, header, hgroup, menu, nav, section {
		display: block;
	}
	body {
		line-height: 1;
	}
	ol, ul {
		list-style: none;
	}
	blockquote, q {
		quotes: none;
	}
	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
			
/*****************************/
body{
	overflow:hidden;
}

#profile-name,#profile-score,#profile-star{
	padding:5px;
	font-family:happyfont;
	color:#FFF;
	text-shadow:0px 1px 3px #000;
	font-size:50px;
	height:50px;
	border-bottom:dashed #424242 3px;
	text-align:center;
	margin-top;10px;
	padding-top:50px;
}

#get-name{
	top:-100%;
	position:fixed;
	left::0px;
	background:#424242;
	padding:10px;
	z-index:105;
}

#myname,#myreg,#noreg{
	padding:10px;
	font-family:happyfont;
	font-size:50px;
	color:#424242;
	text-align:center;
	width:100%;
	border-radius:10px;
	box-shadow:0px 2px 15px #000;
}

#myname{
	padding:10px 0px !important;
	color:gray;
}



.direction{
background: linear-gradient(to bottom, #5195AE 0%,#1B559C 100%);
font-family:happyfont;
color:#FFF;
font-size:30px;
font-weight:bold;
text-shadow:0px 1px 3px #000;
padding:10px;
text-align:center;
box-shadow:0px 1px 10px #000;
width:100%;
}

#timer{
	border-radius:5px;
	border:solid #FFF 2px;
	right:10px;
	display:inline-block;
	width:240px;
}

#timercol{
	width:240px;
	height:20px;
	border-radius:5px;
	background:yellowgreen;
}



#loading{
	animation:fadeOut2 3s forwards;
	-webkit-animation:fadeOut2 3s forwards;
}

#logo{
	width:100%;
	height:100%;
}

#whatletter{
	font-family:happyfont;
	color:#FFF;
	text-shadow:0px 1px 3px #000;
	font-size:150px;
	background: radial-gradient(ellipse at center, #d2ff52 0%,#91e842 100%);
	border:solid #FFF 3px;
	border-radius:10px;
	display:inline-block;
	padding:10px;
	box-shadow:0px 1px 10px #000;
	position:fixed;
	top:-500px;
	width:200px;
	min-width:200px;
	max-width:200px;
	text-align:center;
}

#game-proper{
 background:url("../img/cloud.png");
 background-size:cover;
 top:0px;
 left:0px;
 position:fixed;
 display:none;
}

#return-button,#start-button{
	background: linear-gradient(to bottom, #00b7ea 0%,#009ec3 100%);
	border:none;
	font-family:happyfont;
	color:#FFF;
	text-shadow:0px 1px 3px #000;
	bottom:45px;
	position:fixed;
	left:0px;
	width:100%;
	font-size:30px;
	padding:5px;
}

#return-button{
	background: linear-gradient(to bottom, #00b7ea 0%,#009ec3 100%);
	bottom:0px;
}

#start-button:active{
	bottom:40px;
}

#return-button:active{
	bottom:-1px;
}

#header-game{
	position:fixed;
	top:-200px;
	left:0px;
	z-index:100;
	background: linear-gradient(to bottom, #a9e4f7 0%,#0fb4e7 100%);
	font-family:happyfont;
	color:#FFF;
	text-shadow:0px 1px 3px #000;
	padding:10px;
	font-size:30px;
	box-shadow:0px 2px 10px #000;
}

#word-play{
	position:fixed;
	top:50px;
	width:100%;
	height:100%;
	left:0px;
	z-index:90;
	display:none;
}



.wordy{
	position:fixed;
	font-family:song;
	color:#FFF;
	text-shadow:0px 1px 3px #000;
	font-size:60px;
	padding:5px;
	border:solid #FFF 2px;
	border-radius:20%;
	box-shadow:0px 2px 10px #000;
	animation:up 3s forwards;
	-webkit-animation:up 3s forwards;
}

#game-level{
	position:fixed;
	top:0px;
	left:0px;
	z-index:90;
	display:none;
	background: radial-gradient(ellipse at center, #87e0fd 0%,#53cbf1 40%,#05abe0 100%);
}

.letters{
	display:inline-block;
	padding:5px;
	font-family:song;
	color:#FFF;
	text-shadow:0px 1px 3px #000;
	font-size:50px;
	width:50px;
	height:60px;
	text-align:center;
	margin:10px 5px;
	border-radius:5px;
	overflow:hidden;
	box-shadow:0px 2px 5px #000;
}

.letters img{
	float:left;
	position:relative;
	top:-5px;
	left:-3px;
}

#foxsay{
	position:fixed;
	z-index:100;
	top:100%;
	left:0px;
	width:100%;
	height:100%;
	background:#FFF;
}

#finstar{
	margin-top:0px !important;
}

#finscore{
	font-size:50px !important;
}

#ok,#replay{
	position:relative;
}

#ok:active,#replay:active{
	top:1px;
}

.score_main{
	font-size:20px !important;
	color:#FFF;
	border-radius:50%;
	position:absolute;
	float:left;
	margin-left:-10px;
	background:red;
	display:inline-block;
	padding:2px;
	z-index:100;
}

#profile{
	position:fixed;
	background:#0099CC;
	bottom:200%;
	z-index:100;
}

#foxsay img{
	width:200px;
	margin-top:30px;
	border-radius:10px;
}

#message{
	font-family:song;
	font-size:50px;
	color:#424242;
	font-weight:bold;
	vertical-align:middle;
}

#message img{
	width:64px !important;
}

#myscore{
	margin-left:50px;
}

#score-board{
padding:5px;
background:#0099CC;
border-radius:5px;
border:solid #FFF 3px;
box-shadow:0px 2px 15px #000;
color:#FFF;
display:inline-block;
}

#back{
	color:blue;
}

#foxsaid{
	font-size:40px;
}

#b2menu{
	background: linear-gradient(to bottom, #00b7ea 0%,#009ec3 100%);
	font-family:happyfont;
	color:#FFF;
	text-shadow:0px 1px 3px #000;
	font-size:20px;
	border:solid #0099CC 1px;
	border-radius:5px;
	padding:3px 10px;
	margin:3px;
}
#resume,#reset{
	background: linear-gradient(to bottom, #00b7ea 0%,#009ec3 100%);
	font-family:happyfont;
	color:#FFF;
	text-shadow:0px 1px 3px #000;
	font-size:20px;
	border:solid #0099CC 1px;
	border-radius:5px;
	padding:3px 15px;
	margin:3px;
}

.scoreboard{
	position:absolute;
	animation:fadeOut 4s forwards;
	-webkit-animation:fadeOut 4s forwards;
	height:80px;
	top:0px;
}

#page2{
	display:none;
}

#nav{
	position:absolute;
	bottom:0px;
	left:0px;
	width:100%;
	text-align:center;
}

#nav1,#nav2,#nav3{
	width:30px;
	height:30px;
	background:#0099CC;
	border-radius:50%;
	display:inline-block;
	border:solid #FFF 3px;
	box-shadow:0px 2px 15px #000;
	margin:10px;
	font-size:25px;
	color:#FFF;
	font-family:arial;
}

#nav3{
	position:absolute;
	bottom:5px;
	right:5px;
}

#nav3 img{
	width:30px;
}

#nav1:active,#nav2:active{
	position:relative;
	top:-1px;
}
#nav3:active{
	bottom:4px;
}

@keyframes rollup{
	0%{top:0%;}
	20%{top:5%;}
	100%{top:-200%;}
}
@keyframes rolldown{
	0%{top:-200%;}
	20%{top:5%;}
	100%{top:0%;}
}


@keyframes bounce{
	0%{top:-500px;transform:rotate(0deg);}
	50%{top:150px;transform:rotate(360deg);}
	100%{top:150px;}
}

@keyframes fadeOut{
	from{opacity:1;display:block;}
	to{opacity:0;display:none;}
}
@keyframes fadeOut2{
	0%{opacity:1;display:block;}
	80%{opacity:1;display:block;}
	100%{opacity:0;display:none;}
}
@keyframes slideup{
	0%{top:100%;}
	20%{top:0%;}
	80%{top:0%;}
	100%{top:100%;}
}
@keyframes slideup2{
	0%{top:100%;}
	100%{top:0%;}
}
@keyframes slideup3{
	0%{top:100%;}
	100%{top:0%;}
}
@keyframes slidedown{
	0%{top:0%;}
	100%{top:100%;}
}

@keyframes fadeInTools{
	from{top:-200px;}
	to{top:0px;}
}
@keyframes fadeOutTools{
	from{top:0px;}
	to{top:-200px;}
}

@keyframes up{
	0%{opacity:1;}
	80%{opacity:1;}
	100%{opacity:0;z-index:-1;}
}

@keyframes boom{
	from{padding:5px;opacity:1;}
	to{padding:15px;opacity:0;}
}

@keyframes rolleddown{
	0%{bottom:200%;}
	20%{bottom:0%;}
	80%{bottom:0%;}
	100%{bottom:200%;}
}

@keyframes regdown{
	0%{top:-100%;}
	100%{top:25%;}
}

@keyframes regup{
	0%{top:25%;}
	100%{top:-100%;}
}

@-webkit-keyframes rollup{
	0%{top:0%;}
	20%{top:5%;}
	100%{top:-200%;}
}
@-webkit-keyframes rolldown{
	0%{top:-200%;}
	20%{top:5%;}
	100%{top:0%;}
}


@-webkit-keyframes bounce{
	0%{top:-500px;-webkit-transform:rotate(0deg);}
	50%{top:150px;-webkit-transform:rotate(360deg);}
	100%{top:150px;}
}

@-webkit-keyframes fadeOut{
	from{opacity:1;display:block;}
	to{opacity:0;display:none;}
}
@-webkit-keyframes fadeOut2{
	0%{opacity:1;display:block;}
	80%{opacity:1;display:block;}
	100%{opacity:0;display:none;}
}
@-webkit-keyframes slideup{
	0%{top:100%;}
	20%{top:0%;}
	80%{top:0%;}
	100%{top:100%;}
}
@-webkit-keyframes slideup2{
	0%{top:100%;}
	100%{top:0%;}
}
@-webkit-keyframes slideup3{
	0%{top:100%;}
	100%{top:0%;}
}
@-webkit-keyframes slidedown{
	0%{top:0%;}
	100%{top:100%;}
}

@-webkit-keyframes fadeInTools{
	from{top:-200px;}
	to{top:0px;}
}
@-webkit-keyframes fadeOutTools{
	from{top:0px;}
	to{top:-200px;}
}

@-webkit-keyframes up{
	0%{opacity:1;}
	80%{opacity:1;}
	100%{opacity:0;z-index:-1;}
}

@-webkit-keyframes boom{
	from{padding:5px;opacity:1;}
	to{padding:15px;opacity:0;}
}

@-webkit-keyframes rolleddown{
	0%{bottom:200%;}
	20%{bottom:0%;}
	80%{bottom:0%;}
	100%{bottom:200%;}
}

@-webkit-keyframes regdown{
	0%{top:-100%;}
	100%{top:25%;}
}

@-webkit-keyframes regup{
	0%{top:25%;}
	100%{top:-100%;}
}

