/* Add here all your css styles (customizations) */
html{
	font-size: 16px;
	font-family: 'Open Sans Condensed', sans-serif;
}
/*body{
	background-image: url("bg.png"); 
}*/
#menu{
	width: 400px; 
	margin: 0px auto; 
	webkit-text-shadow: 1px 1px 1px #000; 
	moz-text-shadow: 1px 1px 1px #000; 
	text-shadow: 1px 1px 1px #000; 
	font-size: 40px;
}

section {
	max-width: 1064px;
	margin: 0px auto;
	overflow: hidden;
	min-width: 300px;
}

#infoContainer {
	position: absolute;
	left: 43%;
	width: 500px;
	top: 78px;
	text-align: center;
	margin-left: -250px;
}

#container {
width: 100%;
}

#container:before,
#container:after {
    content:"";
    display:table;
}
#container:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
#container {
    zoom:1;
}

.box{
	border: 1px solid black; 
	padding: 20%;
	text-align: center; 
	font-size: 1.63em;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 3px; 
    -moz-border-radius: 3px; 
    border-radius: 3px; 
    margin: 2px; 
    -webkit-box-shadow: 1px 1px 1px #ccc; 
    -moz-box-shadow: 1px 1px 1px #ccc; 
    box-shadow: 1.5px 2px 2px #000; 
    text-shadow: 1px 1px 1px #ccc; 
}

.box {
	text-decoration: none;
	color: inherit; 
}

.box:hover{
	box-shadow: 1px 1px 1px #ccc; 
	cursor: pointer; 
	text-shadow: 1px 1px 1px #000;
}

#panelOne{
	float: left; 
	width: 5.5556%;
}

#panelTwo{
	float: left; 
	width: 5.5556%;
	margin-top: 6.5%; 
}

#panelThree{
	float: left; 
	width: 5.5556%;
	margin-top: 19.6%;
}

#lowerContainer{
	float: right; 
	margin-top:1%;
	width: 80%; 
}

.bottom{
	float: left; 
	width: 6.66666667%; 
}

@media screen and (max-width: 1000px){
	#panelTwo{
		margin-top: 6.3%;
	}

	#panelThree{
		margin-top: 18.9%;
	}
}

@media screen and (max-width: 900px){
	#panelTwo{
		margin-top: 6.8%;
	}

	#panelThree{
		margin-top: 20.5%;
	}
}

@media screen and (max-width: 800px){
	.box{
		font-size: 1em; 
	}

	#panelTwo{
		margin-top: 5.7%;
	}

	#panelThree{
		margin-top: 17%;
	}
}

@media screen and (max-width: 700px){

	#panelTwo{
		margin-top: 6.2%;
	}

	#panelThree{
		margin-top: 19%;
	}
}

@media screen and (max-width: 550px){
	.box{
		font-size: .5em; 
	}
		#panelTwo{
		margin-top: 5.5%;
	}

	#panelThree{
		margin-top: 15.8%;
	}
	#menu{
		width: 300px; 
		font-size: 28px;
	}
	#infoContainer {
		top: 50px;
	}
}

@media screen and (max-width: 400px){
		#panelTwo{
		margin-top: 7.3%;
	}

	#panelThree{
		margin-top: 21.6%;
	}
}

#clear{
	clear: both; 
}