@import url(/fonts/LeagueGothic.css);


body {
	/* background-color: #fff8df; */
	background-color: rgb(229, 230, 231);
	
}

header{	
	/* background-color: #dfd9c3;
	min-height: 250px; */
	
}

header .header-graphic {float: left; position: relative; left: -2%; width: 60%;}
.bubbles {position: fixed; top: 0; right: 0; width: 20%}
.bubbles2 {position: fixed; bottom: 0; left: 0; width: 12%; }

#children,
#youth{
	padding-top: 30px; padding-bottom: 30px;
}
#children img,
#youth img{
	display: block;
	text-align: center;
	margin: 0 auto;
}

.red-circle{
	background-color: #990000;
	border-radius: 50%;
	width: 200px;
	height: 200px;
	margin: 20px auto;
	text-align: center;
}
.red-circle a{
	position: relative;
	top: 80px;
	font-family: 'League Gothic', sans-serif;
	line-height: 120%;
	font-size: 250%; text-transform: uppercase;
	
}

h2 {font-family: 'League Gothic', sans-serif;
	line-height: 100%;
	font-size: 350%; text-transform: uppercase; color: #990026;}

.red-circle a:link, .red-circle a:visited{text-decoration: none; color: white;}
.red-circle a:hover, .red-circle a:active{text-decoration: none; color: white;}
.top a{
	top: 55px;
}
.red-circle:hover{
	
	background-position: center top; background-repeat: no-repeat; background-size: cover; 
	
}
.biology:hover {background-image: url(/summers/2015/assets/biology.png);}
.music:hover {background-image: url(/summers/2015/assets/music.png);}
.music2:hover {background-image: url(/summers/2015/assets/music2.png);}
.risingsenior:hover {background-image: url(/summers/2015/assets/risingsenior.png);}
.robotics:hover {background-image: url(/summers/2015/assets/robotics.png);}
.art:hover {background-image: url(/summers/2015/assets/art.png);}
.journalism:hover {background-image: url(/summers/2015/assets/journalism.png);}

.baseball:hover {background-image: url(/summers/2015/assets/baseball.png);}
.basketball:hover {background-image: url(/summers/2015/assets/basketball.png);}
.basketball2:hover {background-image: url(/summers/2015/assets/basketball2.png);}
.softball:hover {background-image: url(/summers/2015/assets/softball.png);}
.soccer:hover {background-image: url(/summers/2015/assets/soccer.png);}
.volleyball:hover {background-image: url(/summers/2015/assets/volleyball.png);}
.cheerleading:hover {background-image: url(/summers/2015/assets/cheerleading.png);}
.golf:hover {background-image: url(/summers/2015/assets/golf.png);}
.golf2:hover {background-image: url(/summers/2015/assets/golf2.png);}

.floatright, .floatleft {width: 40%; border-radius: 50%; border: 5px solid gray;}
.floatright {float: right; margin-left: 10px;}
.floatleft {float: left; margin-right: 10px;}

label {width: 150px;}

footer{
	background-color: #dfd9c3;
	text-align: center;
	color: black;
	min-height: 150px;
	z-index: -5;
}
footer img{
	display: block;
	margin: 0 auto;
	padding: 20px 10px;
}


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

.red-circle{width: 175px; height: 175px; margin: 10px auto;}
.red-circle a{top: 65px; font-size: 250%;}
.top a{top: 50px;}
}

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

header .header-graphic {float: none; position: normal; left: 0; width: 100%;}
.bubbles {display: none;}
.bubbles2 {display: none;}
.red-circle{width: 150px; height: 150px; margin: 10px auto;}
.red-circle a{top: 60px; font-size: 200%;}
.top a{top: 43px;}
.floatright, .floatleft {width: 100%; float: none;}
label, input, textarea {width: 100%;}
}