@charset "UTF-8";
/* CSS Document */

/*General ---you can edit the background color or font if you wish*/

body{
	background-color: #aed6ff;     
	margin: 0; padding: 0;
	text-align: center; 
	font-family: Arial, Helvetica, sans-serif;
}
.container{
	margin: 0 auto;
	width: 1100px;
	position: relative;
	background-color: #aed6ff;		
	height: 1300px;		
}

/*---For the most part, the rest below shouldn't change. The below is positioning everything. ----*/

/*---------------Header-----------------*/


#header{
	margin: 0 auto;
	
 }
#logo{
	position: absolute;
	text-align: left;
	left: 30px;
	top: 50px;
}
#title{
	margin: 20px;
	position: absolute;
	top: 50px;
	left: 430px;
}
#contact{
	margin: 0 auto;	
}
h1{
	font-size: 60px;
	margin: 0;
	padding: 0;
	letter-spacing: 2px;
}
h4{
	padding: 0;
	margin: 0;
	font-size: 30px;
	font-weight: 300;
	color: #006699;
}
h3{
	margin: 0;
	padding: 0;
}
h5{
	font-weight: 300;
	font-size: 24px;
	color: #006699;
	padding: 0;
	margin: 0;
}
#gallery_photos h5{
	font-weight: 300;
	font-size: 24px;
	color: #000;
	padding: 0;
	margin-top: 50px;
}
	
h6{
	padding: 0;
	margin:0;
	color: #006699;
	font-size: 18px;
	font-weight: 300;
}
#line{
	padding: 5px 5px 5px 5px;
}




/*--------------Main Content-------------*/
#main-content{
	background-color: #FFFFCC;
	position: absolute;
	left: 360px;
	top: 450px;
	min-height: 700px;
	width: 700px;
	text-align: left;
	padding: 20px;
	padding-bottom: 40px;
	font-family: Arial, Helvetica, sans-serif;
	overflow: auto;
}
#main-content-gallery{
	background-color: #FFFFCC;
	position: absolute;
	left: 360px;
	top: 450px;
	min-height: 700px;
	width: 700px;
	text-align: left;
	padding: 20px;
	padding-bottom: 40px;
	font-family: Arial, Helvetica, sans-serif;
	overflow: auto;
}
#gallery_photos{
		margin-left: 75px;
}
#main-content h4{
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
}
#main-content-gallery h4{
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: 700;
	margin-bottom: 50px;
}
hr{
	border: 0;
    height: 1px;
    background: #333;
    background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:    -moz-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:     -ms-linear-gradient(left, #ccc, #333, #ccc); 
    background-image:      -o-linear-gradient(left, #ccc, #333, #ccc); 
	width: 500px;
	margin-top: 50px;
	margin-bottom: 50px;
}
	
	
	
	
/*-------------Navigation----------*/
#nav{
	text-align: left;
	position: absolute;
	top: 470px;
	list-style-type: none;
}
#nav ul{
	list-style: none;
}
#nav ul li{
	font-size: 30px;
	line-height: 40px;
}
#nav ul li a {
	list-style-type: none;
	list-style-image: none;
	list-style-position: outside;
	text-decoration: none;
	font-weight: 400;
	font-size: 36px;
}
a:link {color:#000;}      /* unvisited link */
a:visited {color: #000;}  /* visited link */
a:hover {color: #cccc66;}  /* mouse over link */
a:active {color:#cccc66;}  /* selected link */





/*----------------Free Classes Box-------------*/
#free-classes{
	position: absolute;
	top: 800px;
	left: 40px;
	height: 350px;
	width: 260px;
	padding: 0 20px 20px 20px;
	background-color: white;
	font-size: 24px;
	text-align: left;
}
#free-title{
	background-color: #FFFFCC;
	width: 270px;
	margin: 0;
	position: relative;
	left: -20px;
	padding: 15px;
	text-align: center;
}
#free-content{
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}
.upcoming-class{
	color: red;
	text-align: center;
}





/*----------------Footer---------------------*/
#footer{
	background-color: white;
	border: solid;
	border-width: 30px 0 0 0;
	border-color:#006699;
	position: relative;
	height: 80px;
	/*THIS IS WHERE YOU CAN POSITION THE FOOTER. If you put too much content in the yellow box, increase the number of the "top" element below. Usually, you want to go by 50px increments. */
	top: 10px;
	width: 100%;
	text-align: center;
}
#footer_gallery{
	background-color: white;
	border: solid;
	border-width: 30px 0 0 0;
	border-color:#006699;
	position: relative;
	height: 80px;
	/*THIS IS WHERE YOU CAN POSITION THE FOOTER FOR THE PHOTO GALLERY PAGE. If you put too much content in the yellow box, increase the number of the "top" element below. Usually, you want to go by 50px increments. */
	top:  3100px;
	width: 100%;
	text-align: center;
}
#footer_third{
	background-color: white;
	border: solid;
	border-width: 30px 0 0 0;
	border-color:#006699;
	position: relative;
	height: 80px;
	top:  1300px;
	width: 100%;
	text-align: center;
}
#left{
	position: absolute;
	left: 100px;
	top: 15px;
}
#right{
	position: absolute;
	left: 750px;
	top: 15px;
}