html{
	height: 100%;
	background: radial-gradient(circle, #fff, #ccc);
	background: -webkit-radial-gradient(circle, #fff, #ccc);
	background: -o-radial-gradient(circle, #fff, #ccc);
	background: -moz-radial-gradient(circle, #fff, #ccc);
}

h1{
	color:#B481D9;
	text-align: center;
	text-decoration: underline;
	text-transform: capitalize;
}

h2{
	color: #B481D9;
	text-align: center;
}

#container{
	height: 400px;
	width: 550px;
	background-color: #9DD2EA;
	margin: 10px auto;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0px 4px 0px 0px #009de4;
	-moz-box-shadow: 0px 4px 0px 0px #009de4;
	-wbkit-box-shadow: 0px 4px 0px 0px #009de4;
/*	box-shadow: [horizontal offset (use minus to go left)] [verticle offset (use minus to go up)] [blur radius] [optional spread radius] [color]*/
	position: relative;
}


#sumSymboladd{
	width:30px;
	height: 36px;
	float: left;
	background-color: #f1ff92;
	color: #888e5f;
	padding: 1px;
	position: absolute;
	top: 20px;
	border: 1px solid #888e5f;
	font-weight: bold;
	font-size: 28px;
	text-align: center;
	border-left: 1px solid #888e5f;
	box-shadow: 0px 4px #9da853;
	-moz-box-shadow: 0px 4px #9da853;
	-wbkit-box-shadow: 0px 4px #9da853;
}

#sumSymbolsub{
	left: 50px;
	width:30px;
	height: 36px;
	float: left;
	background-color: #f1ff92;
	color: #888e5f;
	padding: 1px;
	position: absolute;
	top: 20px;
	border: 1px solid #888e5f;
	font-weight: bold;
	font-size: 28px;
	text-align: center;
	border-left: 1px solid #888e5f;
	box-shadow: 0px 4px #9da853;
	-moz-box-shadow: 0px 4px #9da853;
	-wbkit-box-shadow: 0px 4px #9da853;
}

#sumSymboltimes{
	left: 80px;
	width:30px;
	height: 36px;
	float: left;
	background-color: #f1ff92;
	color: #888e5f;
	padding: 1px;
	position: absolute;
	top: 20px;
	border: 1px solid #888e5f;
	font-weight: bold;
	font-size: 28px;
	text-align: center;
	border-left: 1px solid #888e5f;
	box-shadow: 0px 4px #9da853;
	-moz-box-shadow: 0px 4px #9da853;
	-wbkit-box-shadow: 0px 4px #9da853;
}

#sumSymboldivide{
	left: 110px;
	width:30px;
	height: 36px;
	float: left;
	background-color: #f1ff92;
	color: #888e5f;
	padding: 1px;
	position: absolute;
	top: 20px;
	border: 1px solid #888e5f;
	font-weight: bold;
	font-size: 28px;
	text-align: center;
	border-left: 1px solid #888e5f;
	box-shadow: 0px 4px #9da853;
	-moz-box-shadow: 0px 4px #9da853;
	-wbkit-box-shadow: 0px 4px #9da853;
}

#sumSymboladd:hover,#sumSymbolsub:hover, #sumSymboltimes:hover,#sumSymboldivide:hover {
	background-color: #888e5f;
	color: white;
}

#sumSymboladd:active,#sumSymbolsub:active,#sumSymboltimes:active,#sumSymboldivide:active {
	box-shadow: 0px 0px;
	top: 24px;
}

a {
	text-decoration: none;
	color: #888e5f;
}

a:hover {
	color: white;
}

#score{
	border: 1px solid #888e5f;
	background-color: #f1ff92;
	color: #888e5f;
	padding: 11px;
	position: absolute;
	left: 500px;
	top: 20px;
	box-shadow: 0px 4px #9da853;
	-moz-box-shadow: 0px 4px #9da853;
	-wbkit-box-shadow: 0px 4px #9da853;

}

#correct{
	position: absolute;
	left: 260px;
	background-color: #42e252;
	color: white;
	padding: 11px;
	display: none;
}

#wrong{
	position: absolute;
	left: 250px;
	background-color: #de401a;
	color: white;
	padding: 11px;
	display: none;
}

#question{
	width:450px;
	height:150px;
	margin: 50px auto 10px auto;
	background-color: #9da0ea;
	box-shadow: 0px 4px #535aa8;
	-moz-box-shadow: 0px 4px #535aa8;
	-wbkit-box-shadow: 0px 4px #535aa8;
	font-size: 100px;
	text-align: center;
	font-family: cursive, sans-serif;
	color: black;
}

#instruction{
	width: 450px;
	height: 50px;
	background-color: #b481d9;
	margin: 10px auto;
	text-align: center;
	line-height: 45px;
	box-shadow: 0px 4px #8153a8;
	-moz-box-shadow: 0px 4px #8153a8;
	-wbkit-box-shadow: 0px 4px #8153a8;
}

#choices{
	width:450px;
	height:100px;
	margin: 5px auto;
}

.box{
	width: 85px;
	height: 85px;
	background-color: white;
	float: left;
	margin-right: 36px;	
	border-radius: 3px;
	cursor: pointer;
	box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: rgba(0, 0, 0, 0.2);
	-wbkit-box-shadow: rgba(0, 0, 0, 0.2);
	text-align: center;
	line-height: 80px;
	position: relative;
	transition: all 0.2s;      
	-webkit-transition: all 0.2s;      
	-moz-transition: all 0.2s;      
	-o-transition: all 0.2s;      
	-ms-transition: all 0.2s;      
}

.box:hover, #startreset:hover{
	background-color: #9c89f6;
	color: white;
	box-shadow: 0px 4px #6b54d3;
	-moz-box-shadow: 0px 4px 0px 0px #6b54d3;
	-wbkit-box-shadow: 0px 4px 0px 0px #6b54d3;
}

.box:active, #startreset:active{
	box-shadow: 0px 0px #6b54d3;
	-moz-box-shadow: 0px 4px 0px 0px #6d54d3;
	-wbkit-box-shadow: 0px 4px 0px 0px #6d54d3;
	top: 4px;
}

#box4{
	margin-right: 0px;
}

#startreset{
	width: 78px;
	padding:10px;
	background-color: rgba(255,255,255,0.5);
	margin: 0px auto;
	border-radius: 3px;
	cursor: pointer;
	box-shadow: 0px 4px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: rgba(0, 0, 0, 0.2);
	-wbkit-box-shadow: rgba(0, 0, 0, 0.2);
	text-align: center;
	position: relative;
	transition: all 0.2s;      
	-webkit-transition: all 0.2s;      
	-moz-transition: all 0.2s;      
	-o-transition: all 0.2s;      
	-ms-transition: all 0.2s;
}

#timeremaining{
	width:152px;
	padding:10px;
	position: absolute;
	top: 395px;
	left: 400px;
	background-color: rgba(181,235,36,0.8);
	border-radius: 3px;
	box-shadow: 0px 4px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 4px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 4px rgba(0,0,0,0.2);
/*	visibility: hidden;*/
	display: none;
	
/*
	The difference between visibility and display is:
		
		visibility will cause the element to still be present in the page and will interact with the elements on the page. 
		
		display will hide the element and the element will not interact with the other elements
*/
}

#gameover{
	height: 200px;
	width:500px;
	background: linear-gradient(#f3ca6b, #f3706c);
	background: -webkit-linear-gradient(#f3ca6b, #f3706c);
	background: -o-linear-gradient(#f3ca6b, #f3706c);
	background: -moz-linear-gradient(#f3ca6b, #f3706c);
	color: white;
	font-size: 2.5em;
	text-align: center;
	text-transform: uppercase;
	position: absolute;
	top: 140px;
	left: 45px;
	z-index: 2;
/*	This is to lay the element over any other elements that have a position of absolute.*/
	display: none;
}