@charset "utf-8";

/*

 * 		Sharlie Joseph Soccer Academy

 * 		Updated: October 27 2010

 *

 * 		Front-end coding by http://www.forwardinc.com

 */



/* 0. RESET */



html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {

	margin: 0;

	padding: 0;

	border: 0;

	outline: 0;

	font-size: 100%;

	vertical-align: baseline;

	background: transparent;

}

body {

	line-height: 1;

}

ol, ul {

	list-style: none;

}

blockquote, q {

	quotes: none;

}

blockquote:before, blockquote:after, q:before, q:after {

	content: '';

	content: none;

}

:focus {

	outline: 0;

}

ins {

	text-decoration: none;

}

del {

	text-decoration: line-through;

}

table {

	border-collapse: collapse;

	border-spacing: 0;

}

/* 1. GLOBAL */



/* 1.1 =Techniques */



/* http://sonspring.com/journal/clearing-floats */

.clear {

	clear: both;

	display: block;

	overflow: hidden;

	visibility: hidden;

	width: 0;

	height: 0;

}

/* http://perishablepress.com/press/2009/12/06/new-clearfix-hack */

.clearfix:after {

	clear: both;

	content: ' ';

	display: block;

	font-size: 0;

	line-height: 0;

	visibility: hidden;

	width: 0;

	height: 0;

}

/* http://phark.typepad.com/phark/2003/08/accessible_imag.html */

.phark {

	display: block;

	overflow: hidden;

	font-size: 0.0;

	line-height: 0.0;

	text-decoration: none;

	text-indent: -9999px;

	background: transparent no-repeat 0 0;

	border: 0;

}

/* 1.2 =Default */



body {

	font-family: Arial, Helvetica, sans-serif;

	font-size:12px;

	line-height:1.2;

	text-align: left;

	background-color: #052F57;

	background-image: url(../images/bg.jpg);

	background-repeat: no-repeat;

	background-position: center top;

}

#container {

	width: 950px;

	background-image: url(../images/containerbg.png);

	margin: 0 auto;

	padding: 0 5px;

}

#sidebar {

	width:230px;

	float: left;

}

#main {

	width: 720px;

	float: right;

	background-image: url(../images/contentbg.png);

	background-repeat: repeat-x;

}

#content {

	width: 680px;

	padding: 0 20px;

}

/* 1.3. =Header */



#header {

	margin: 0;

	padding: 0;

	height: 200px;

	border-top: 5px solid red;

	border-bottom: 1px solid #ccc;

}

/* 1.4. =Content */



#content .contentimage{

	padding: 10px;

	float: right;

}



#content .contentimage-left{

	padding: 10px;

	float: left;

}



#content p{

	line-height: 20px;

}



#embed-container{

	text-align: center;

	margin-bottom: 20px;

}



#content ul{

	list-style-type: circle;

	font-family: Arial, Helvetica, sans-serif;

	font-size: 12px;

	padding-left: 50px;

	color: #053E73;

	padding-bottom: 10px;

	font-weight: bold;

}



#content li{

	padding: 5px;

}



#content p.small{

	font-size: 12px;

}



/* =Main */



#featurebox {

	height: 250px;

	width: 720px;

	position: relative;

}

#summer-schedule {

	height: 56px;

	width: 183px;

	position: absolute;

	background-image: url(../images/summer-schedule.png);

	left: 25px;

	top: 101px;

}

#winter-schedule {

	height: 56px;

	width: 183px;

	position: absolute;

	background-image: url(../images/winter-schedule.png);

	left: 25px;

	top: 166px;

}

#proformance {

	height: 117px;

	width: 229px;

	position: absolute;

	background-image: url(../images/proformance.png);

	left: 253px;

	top: 103px

}

#top7 {

	height: 204px;

	width: 194px;

	position: absolute;

	background-image: url(../images/top7.png);

	left: 505px;

	top: 17px;

}

#leading {

	height: 60px;

	width: 461px;

	position: absolute;

	background-image: url(../images/leading.png);

	left: 25px;

	top: 10px;

}



#summer-schedule:hover, #winter-schedule:hover{

	background-position: 0 -56px;

}



#proformance:hover{

	background-position: 0 -117px;



}



/* =Tables */



table {

	width: 680px;

	margin-bottom: 20px;

}

table, th, td {

	border: 1px solid #D4E0EE;

	border-collapse: collapse;

	font-family: Arial, Helvetica, sans-serif;

	color: #053E73;

	font-size: 12px;

	vertical-align: middle;

}

caption {

	font-size: 100%;

	font-weight: bold;

	margin: 5px;

}

td, th {

	text-align: center;

	padding: 5px;

}

thead th {

	text-align: center;

	background: #E6EDF5;

	color: #4F76A3;

	font-size: 100% !important;

}

tbody th {

	font-weight: bold;

}

tbody tr {

	background: #FCFDFE;

}

tbody tr.odd {

	background: #F7F9FC;

}

table a:link {

	color: #718ABE;

	text-decoration: none;

}

table a:visited {

	color: #718ABE;

	text-decoration: none;

}

table a:hover {

	color: #718ABE;

	text-decoration: underline !important;

}

tfoot th, tfoot td {

	font-size: 85%;

}

#col_main td img {

	float:none;

}

tbody td a:hover {

	background: transparent;

	color: #FFFFFF;

}

tbody tr:hover {

	background-color: #C9D8E9;

}

tbody tr:hover th, tbody tr.odd:hover th {

	background: #C9D8E9;

}

/* =Sidebar */



#sponsors {

	background-color: #FFF;

	width: 210px;

	margin-bottom: 10px;

	padding-top: 20px;

	padding-right: 10px;

	padding-bottom: 20px;

	padding-left: 10px;

}

#sponsorsmap {

	width: 211px;

	height: 128px;

	position: relative;

	background-image: url(../images/sponsors.jpg);

}

#wegotsport {

	height: 51px;

	width: 101px;

	position: absolute;

	left: 0;

}

#adidas {

	height: 60px;

	width: 90px;

	position: absolute;

	left: 116px;

}

#owater {

	height: 68px;

	width: 75px;

	position: absolute;

	top: 60px;

}

#kwik {

	height: 28px;

	width: 119px;

	position: absolute;

	top: 96px;

	left: 89px;

}

#wegotsport:hover {

	background: url(../images/sponsors.jpg) 0 -128px;

}

#adidas:hover {

	background: url(../images/sponsors.jpg) -116px -128px;

}

#owater:hover {

	background: url(../images/sponsors.jpg) 0 -188px;

}

#kwik:hover {

	background: url(../images/sponsors.jpg) -89px -224px;

}



.mailing-list p{

	font-size: 12px;

	font-weight: bold;

	color: #333;

	line-height: 24px;

	padding-bottom: 10px;

}



.mailing-list h2{

	font-size: 16px;

	color: #000;

	padding: 5px 15px 10px 15px;

	font-family: "Arial Narrow", Arial, Helvetica, sans-serif;

}



.mailing-list label {

	width: 50px;

	float: left;

	text-align: right;

	margin-right: 15px;

	display: block;

}



.mailing-list input{

	border: 1px solid #999;

}



.mailing-list .submit {

	margin-left: 35px;

}



#submit{

	height: 56px;

	width: 152px;

	background-image: url(../images/signup.png);

	cursor: pointer;	

}



/* 1.5 =Footer */



#footer {

	background: url(../images/footerbg.png) no-repeat;

	width: 960px;

	margin: 0 auto 50px auto;

	text-align: center;

}

#footer p {

	color: #8FABD6;

	padding-top: 70px;

	font-size: 10px;

	text-transform: uppercase;

}

/* 2. NAVIGATION */



/* 2.1 =Main Nav */

#nav {

}

#nav li {

}

#nav li a {

	display: block;

	font-family: Arial, Helvetica, sans-serif;

	text-decoration: none;

	color: #000;

	padding: 8px 0 8px 5px;

	background-image: url(../images/navbg.png);

	font-weight: bold;

	text-transform: uppercase;

	font-size: 11px;

	border-bottom: solid 1px #7d7d7d;

	border-top: solid 1px #fff;

	background-color: #C6C6C6;

	background-repeat: repeat-x;

}

#nav li a:hover {

	background-color: #F0F0F0;

	background-image: none;

	color: #000;

}

#nav li a.active {

	color: #FFF;

	background-image: url(../images/navhover.jpg);

	border-top: solid 1px #ff0000;

	background-color: #9F0608;

	background-repeat: repeat-x;

}

/* 3. TYPOGRAPHY */



/* 3.1 =General Rules */

a {

	color:#16A3D6;

}

a:hover {

	color: red;

}

h1 {

	font-size: 24px;

	color: #D33;

	font-family: "Arial Black", Gadget, sans-serif;

	margin: 15px 0;

}

h2 {

	font-size: 18px;

	color: #0B569A;

	margin-bottom: 10px;

}



.blue{

	color: #42C0E8;

}



h3 {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 16px;

	color: #B60A08;

	padding-bottom: 10px;

	display: block;

	border-bottom: solid 1px #E6EDF5;

	margin-bottom: 10px;

}



h4 {

	font-family:Arial, Helvetica, sans-serif;

	font-weight:normal;

	font-size:16px;

	color:#000000;

	font-weight:bold;

	padding-bottom:15px;

}



p {

	font-size:14px;

	color:#4E5974;

	padding-bottom:15px;

}

blockquote {

	padding: 30px 20px;

	background-image: url(../images/quote.gif);

	background-repeat: no-repeat;

	background-position: left 5px;

}

blockquote p {

	padding: 0;

	font-style: italic;

	font-family: Arial, Helvetica, sans-serif;

	color: #084073;

}

cite {

	font-size: 14px;

	border-bottom: solid 1px #e9e9e9;

	display: block;

	text-align: right;

	color: #0A508E;

	font-weight: bold;

	padding-bottom: 15px;

	font-style: normal;

	font-family: Arial, Helvetica, sans-serif;

}



/*********** FORMS **********/

#refer_form label {

	font-family:Arial, Helvetica, sans-serif;

	font-weight:bold;

	font-size:12px;

	color:#4e5974;

}

#refer_form input {

	width:189px;

	height:18px;

	padding:3px 3px;

	border:2px solid #cfe2ec;

}

#refer_form div.formrow label {

	width:110px;

	float:left;

	margin-top:5px;

}

#refer_form div.formrow {

	clear:both;

	margin-bottom:12px;

}

#refer_form ol {

	margin-left:25px;

	font-size:12px;

	font-weight:bold;

	color:#010101;

	font-family:Arial, Helvetica, sans-serif;

	list-style-type: decimal;

}

#refer_form li {

	clear:both;

	margin-bottom:10px;

	padding-left:10px;

}

#refer_form li input { 

	margin-left:30px;

	margin-right:28px;

}

#refer_form #submitbutton {

	width:136px;

	height:33px;

	background:url(../images/refer.png) top left no-repeat;

	padding:0;

	border:0;

	margin:20px 0;

	cursor:pointer;

}

#refer_form div.formrow label.error {

	clear:both;

	margin-left:110px;

	width:100%;

	color:#bb0000;

	font-weight:normal;

	margin-bottom:10px;

}



/*********** TOGGLE **********/

h2.trigger {

	padding-bottom: 5px;

	margin: 0 0 5px 0;

	font-size: 14px;

	text-align: center;

}

h2.trigger a {

	text-decoration: none;

	display: block;

}

h2.trigger a:hover { color: red; }

.toggle_container {

	margin: 0 0 10px 0;

	padding: 0;

	background: #f5f8fa;

	overflow: hidden;

	width: 670px;

	clear: both;

}

.toggle_container .block {

	padding: 20px 20px 10px 20px; /*--Padding of Container--*/

}

.bad { color:#FF0000 !important; }