body {
	
	font-family: Arial, serif;
	background: black;
	color: #333;
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
	-o-user-select: none;
	user-select: none;
}

h1 {
	font-size: 20px;
	margin: 1em 0 2em;
	text-align: center;
}

h1[data-action="start"] {
	display: none;

}

ul {
	list-style: none;
}

ul, li {
	padding: 0;
	margin: 0;
}

p[data-action="lose"] {
	display: none;
}

p[data-action="start"] {
	display: show;
	}
	
.style1 {
	text-align: center;
	margin: 0 auto;
	position: relative;
	}
	
.style2 li{
	font-size: 80px;
	display:inline;
	}


.active {
	opacity: 1 !important;
}

.clearfix {
	width: 100%;
	clear: both;
}

.wrapper {
	width: 900px;
	margin: 0 auto;
}
.container {
	width: 305px;
}


.tile {
	opacity: 0.30;
	-webkit-transition: opacity 250ms ease;
	-moz-transition: opacity 250ms ease;
	-ms-transition: opacity 250ms ease;
	-o-transition: opacity 250ms ease;
	transition: opacity 250ms ease;
}

.tile.lit {
	opacity: 1;
}

.E1, .R1, .L1, .O1, .N1, .G1, .I1, .E2, .R2, .I2{
	font-size: 80px;
}

.E1:hover, .R1:hover, .L1:hover, .O1:hover,.N1:hover, .G1:hover, .I1:hover, .E2:hover, .R2:hover, .I2:hover{
	border: 0px solid red;
	clip: rect(0px, 300px, 150px, 150px);
	width: 300px;
	opacity: 1;
	transition: opacity 500ms ease;
	
}

.E1 {
	background: black;
	clip: rect(0px, 300px, 150px, 150px);
	width: 300px;
	color: #99CC00;
}

.R1 {
	background: black;
	clip: rect(0px, 300px, 150px, 150px);
	width: 300px;
	color: #99FF33;
	}
	

.L1 {
	background: black;
	clip: rect(0px, 300px, 150px, 150px);
	width: 300px;
	color: #99FF66;
	}
	

.O1 {
	background: black;
	clip: rect(0px, 300px, 150px, 150px);
	width: 300px;
	color: #99FF99;
	}
	
.N1 {
	background: black;
	clip: rect(0px, 300px, 150px, 150px);
	width: 300px;
	color: #99FFCC;
}

.G1 {
	background: black;
	clip: rect(0px, 300px, 150px, 150px);
	width: 300px;
	color: #66FFFF;
	}
	

.I1 {
	background: black;
	clip: rect(0px, 300px, 150px, 150px);
	width: 300px;
	color: #33CCFF;
	}
	

.E2 {
	background: black;
	clip: rect(0px, 300px, 150px, 150px);
	width: 300px;
	color: #0099FF;
	}
	
.R2 {
	background: black;
	clip: rect(0px, 300px, 150px, 150px);
	width: 300px;
	color: #0033CC;
	}
	

.I2 {
	background: black;
	clip: rect(0px, 300px, 150px, 150px);
	width: 300px;
	color: #000099;
	}


.game-info {
	margin-top: 90px;
}

.game-info button {
	width: 5px;
	color: #669900;
	box-sizing: border-box;
	font-size: 75px;
	-webkit-border-radius: 10px 10px 10px 10px;
	border-radius: 10px 10px 10px 10px;
	background: black;
	border: none;
	padding: 0.3em 0.6em;
}

.game-info button:hover {
	background: #600000;
}

.game-options h2 {
	margin-top: 30px;
	margin-bottom: 0;
}

.game-options input[type="radio"] {
	margin-right: 10px;
}

.hoverable:hover {
	cursor: pointer;
}

footer {
	position: absolute;
	bottom: 20px;
	width: 900px;
	clear: both;
	text-align: center;
}