body {
	background-color: black;
	background-image: none;
	font-family: 'HelveticaNeue-Light', 'HelveticaNeue', Helvetica, Arial, sans-serif;
	margin: 0px;
	padding: 0px;
	font-size: 28px;
	color: white;
	overflow: hidden;

	backface-visibility:hidden;	
	-webkit-backface-visibility:hidden; /* Chrome and Safari */
	-moz-backface-visibility:hidden; /* Firefox */
}

div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari */
-moz-backface-visibility:hidden; /* Firefox */
}

@media screen and (min-width:400px) and (min-height:400px) {
	body {
		font-size: 42px;
	}
}

@media screen and (min-width:500px) and (min-height:500px) {
	body {
		font-size: 56px;
	}
}


@media screen and (min-width:620px) and (min-height:620px) {
	body {
		font-size: 74px;
	}
}

.ui-page, .ui-body-c, .ui-overlay-c, .ui-page {
	background-color: black;
	background-image: none;
	color: white;
	text-shadow: none;
}

h1 {
	font-size: 1.1em;
	color: lightgreen;
	padding: 0px;
	margin: 0.1em;
}

a, a:hover, a:visited {
	text-decoration: none;
}

#main {
	text-align:center;
}

#menu {
	width: 8em;
	text-align: center;
	border: solid 0.08em yellow;
	background-color: black;
	border-radius: 0.4em;
	display:inline-block;
}

#menu a, a:hover, a:visited {
	display: block;
	color: white;
	margin: 0.1em;
}

/* App*/

.cell {
	width: 1.7em;
	height: 1.7em;
	display: inline-block;
	border: solid 1px white;
	vertical-align: middle;
	text-align: center;
}

.app {
	text-align: center;
	margin: 0.1em;
}


.solvedcell {
	background-color: green;
}

.blockedcell {
	background-color: gray;
	color: gray;
}

.gameboard {
	border: solid 1px black;
	display: inline-block;
}

.box {
	display: block;
	border: solid 2px blue;
	padding: 0.2em;
	border-radius: 0.2em;
	margin: 0.2em;
	width: 5em;
	text-align: center;
}

#panel {
	display: inline-block;
	vertical-align: top;
}

#gameover {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	width: 10em;
	height: 2em;
	margin-left: -5em;
	margin-top: -1em;
	font-size: 1.5em;
	color: yellow;
	background-color:black;
	border: 0.1em solid yellow;
	border-radius: 0.2em;
}

#gameover div {
	font-size: 0.5em;
}


#boardlist {
	position: absolute;
	top: 1em;
	left: 50%;
	border: solid 0.05em yellow;
	border-radius: 0.2em;
	background-color: black;
	padding: 0.2em;
	margin-left:-4em;
	width:8em;
}


	#boardlist .gameboard {
		margin: 0.2em;
		font-size: 0.2em;
	}

.button {
	display: inline-block;
	width: 1em;
	height: 1em;
	border: solid 1px gray;
	background-size: 1em;
	background-repeat: no-repeat;
}

#togglesound {
	background-image: url( '../img/sound.png');
}

	#togglesound.off {
		background-image: url( '../img/nosound.png');
	}

#togglevibrate {
	background-image: url( '../img/vibratephone.png');
}

	#togglevibrate.off {
		background-image: url( '../img/novibratephone.png');
	}


#mainmenu {
	display: block;
	vertical-align: central;
	text-align: center;
}

	#mainmenu div {
		font-size: 0.5em;
		display: inline-block;
		width: auto;
		border: groove 3px yellow;
		border-radius: 0.3em;
		padding: 0.3em;
		background-color: darkgreen;
	}


/* About */

#about {
	text-align:center;
}

#about h1 {
	font-size: 0.8em;
}

#about p {
	font-size: 0.5em;
}

/* Highscrore */

#highscore {
	text-align:center;
}

#highscorelist h1, #highscorelist a {
	font-size: 0.8em;
}

#highscore a {
	color:lightblue;
}

#highscorelist {

	margin: 0.1em;
}

#highscorelist li {
	background: none;
	list-style-type: none;
	font-size: 0.6em;
}

#highscorelist span {
	display:inline-block;
	width: 5em;
	margin-right: 1em;
	text-align: right;
}

#highscorelist span + span {
	display: inline-block;
	width: 12em;
	text-align: left;
}

#highscorelist input:focus {
	border: 1px dotted lightgray;
	width: 12em;
	text-align: left;
}

#highscorelist input, #highscorelist input:focus {
	background: none;
	color: white;
	font-size: 1em;
}


/* Tutorial */

#tutorial {
	font-size: 0.3em;
	text-align:center;
}

#tutorial .cell {

}

#tutorial #nextbox {
	display:inline-block;
}