body{
	background-color: #DCE3EA;
	color:#000C7A;
	margin:0; 
	padding:0;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	background:url(../images/bg_gradient.jpg) 0 0 repeat-x #DCE3EA;
}
div, p, h1, h2, h3, h4, ul, ol, img {padding:0px; margin:0px;}
img {border: none;}
ul{list-style-type:none;}
a{outline: none} /* stop dotted lines around links in firefox */


#container {
	margin: 0 auto 0 auto; /* top and bottom: 0, sides: flexible (stretches) */
	width: 810px;
	color: #ccc; /* for the w3c validator to stop hyperventilating */
}

#header{
	background:url(../images/header.jpg) 0 0 no-repeat ;
	width:810px;
	height:180px;
	margin:20px auto 0 auto;
	color: #ccc; /* needed to keep the css validator happy */
}


#logo_header{
	height: 161px;
	width: 750px;
	padding:15px 0 0 15px;
}


#navbar{
background: url(../images/nav.jpg) top left no-repeat;
height: 31px;
}

#middle_container{ /* used to colour in the background if the middle panel expands downwards  */
	width:810px;
	margin:0 auto;
	color: #000; /* needed to keep the css validator happy */
}



/* note that min-height does not work in ie6 
but ie6 will expand a box bigger than the height specified
so ie6 ignores min-height, ignores the !important attribute, gets the height 510px attribute but expands if necessary
all other browsers get min-height and !important (so ignore height 510)
*/

#middle_image{
	background: url(../images/middle.jpg) 0 0 repeat-y;
	width:810px;
	min-height: 820px; height:auto !important; height: 820px;
	margin:0 auto;
	color: #000; /* needed to keep the css validator happy */
}



/* we need main_content_wrap to avoid ie bug with top margin
 do not assign width and horizontal margin and padding attributes to the same CSS element.
 Also, do not assign height and vertical margin and padding attributes to the same CSS element. 
THis sets the space between the top of the panel and the first paragraph
sets space at the bottom so the text doesn't go right to the end of the panel
sets left and right margin as we don't want the text in the "exact" center of the panel*/



#main_content {
	margin: 0 auto 0 auto;
	width: 750px ;
	color:#000C7A;  /* main font colour  */
}

#main_content_wrap { 
	padding: 20px 50px 50px 70px ;
}


#main_content p {
	margin: 10px 0 0px 0 ;
	font-size:13px;
	font-weight:normal;
}

#main_content h1 {
	margin: 20px 10px 30px 10px ;
	font-size:18px;
	font-weight:bold;
	font-family: georgia, serif; 
}


#main_content h3 {
	margin: 20px 10px 30px 10px ;
	font-size:16px;
	font-weight:bold;
	font-family: georgia, serif; 
}


#main_content img {
	float: right;
	margin: 0 0 30px 0;
}

#main_content .front_shoe{
	margin: -5px 40px 0px 0;
}

#main_content .front_coach{
	float: left;
	margin: 10px 15px 5px 15px;
	height: 80px;
	width: 80px;
}



#main_content .img-pad {
	margin-right: 15px;
}


#main_content a{
	color:#000C7A; 
	text-decoration: none;
	font-weight:normal;
	border-bottom: 1px solid #C2C8FE;  
}

#main_content a:hover{
	color:#FE0000;  
	text-decoration: none;
	font-weight:normal;
}


#main_content .coach-images{
	width: 550px;
	margin: 10px auto 0 auto;
}

/******************* boxes ********/


#main_content .button-box {
	width: 618px;
/*	height: 180px;  */
	float: left;
	margin: 0 0 30px 0;
	padding: 1px 0 1px 0 ;
	background:url(../images/front-box-top.jpg) 0 0 no-repeat #ffffff;
}

#main_content .button-box-inside {
	background:url(../images/front-box-slice.gif) 0 0 repeat-y #ffffff;
}


#main_content .button-box h2{
	margin: 13px 0 20px 0;
	font-size: 16px;
	font-weight:bold;
	color: #F40006;
	text-align: center;
}

#main_content .button-box .button-box-inside p {
	margin: 20px 25px 0 50px ;
	font-size: 14px;
	line-height: 22px;
	word-spacing: 2px;
}

#main_content .button-box  .button-box-inside p.click {
	margin: 20px 25px 0 50px ;
	font-size: 13px;
}

#main_content .button-box  .button-box-inside p.click a {

}

#main_content .button-box-bottom {
	background:url(../images/front-box-bottom.gif) 0 0 no-repeat #ffffff;
	height: 23px;
}

#footer-container{
	width:810px;
	margin:0 auto;
}

#footer{
	background: #DCE3EA url(../images/footer.jpg) no-repeat;
	width:810px;
	margin:0 auto;
	height: 58px;
	color: #FFF; /* needed to keep the css validator happy */
}


.footer-text-left {
	padding: 20px 0 0 30px;
	color: #626262;
	font-size: 11px;
	float: left;
}

.footer-text-right {
	padding: 20px 30px 0 0;
	color: #626262;
	font-size: 11px;
	float: right;
}

#legals{
	background-color: #DCE3EA;
	margin:0 auto;
	color: #4B97C3;
	font-size: 11px;
	width: 700px;
	min-height: 40px; height:auto !important; height: 40px;
}

#legals .left {
	text-align:center;
	width:350px;
	float: left;
}

#legals .right {
	text-align:right;
	float: right;
	width: 200px;
}


#legals a{
	color: #4B97C3;
	font-size: 11px;
}

#legals a:hover{
	color: #FFFFFF;
}

.clearme {
	clear: both;
}