﻿
/* RESET */
/* ----------------------------------------- */

/* Global reset */
/* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */
*, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
table { border-collapse:collapse; border-spacing:0 }
fieldset, img { border:0 }
address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal }
ol, ul, li { list-style:none }
caption, th { text-align:left }
h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal }
q:before, q:after { content:''}

/* Global reset-RESET */
/* The below restores some sensible defaults */
strong { font-weight:bold }
em { font-style:italic }
a img { border:none } /* Gets rid of IE's blue borders */


/* MAIN CSS */

/*
 ------------------------------------------------------------------------------
 TYPOGRAPHY
 ------------------------------------------------------------------------------
*/

body{
  font-family: Arial, Helvetica, sans-serif;
  color: #000000;
}

h1 {
  font-size: 34px;
  font-weight: bold;
}

h2{
  font-size: 26px;
  font-weight: bold;
  color: #006699;
  margin-bottom: 5px;
}

h3, h4{
  font-size: 22px;
  font-weight: bold;
  color: #000000;
  margin-bottom: 5px;
}

h5, h6{
  font-size: 14px;
  font-weight: bold;
}

p{
  font-size: 12px;
}

blockquote{
  font-family: Georgia, Garamond, serif;
  font-size: 12px;
}


/*#header p{
  font-size: 12px;
  color: #555555;
  font-style: italic;
}*/

#nav {
  font-size: 12px;
  color: #000000;
}



/*
 ------------------------------------------------------------------------------
 MAIN STYLE
 ------------------------------------------------------------------------------
*/

body{
  background-color: #006699;
}

#wrapper{
  width: 800px;
  height: 100%;
  margin : 0 auto;
  background-color: #FFFFFF;
  padding: 10px;
}

.clear{
  clear: both;
  height: 0px;
  margin-bottom: 10px;
}

#tag{
  color: #006699;
}


/*
-------------------------------------------------------------------------------
HEADER
-------------------------------------------------------------------------------
 */

#header{
  height: 78px;
}

#header h1 a:link, #header h1 a:visited{
  color: #333333;
  padding: 5px 0px;
  text-decoration: none;
}

#header h1 a:hover{
  text-decoration: none;
  color: #006699;
}


#header ul{
  height: 25px;
  float: right;
}

#header li{
  display: inline;
  padding: 0 2px;
}

#header li a:link, #header li a:visited{
  color: #333333;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 2px solid #006699;
}

#header li a:hover{
  color: #006699;
  border-bottom: 2px solid #333333;
}

/*
-------------------------------------------------------------------------------
TOP NAVIGATION
-------------------------------------------------------------------------------
 */

#nav {
  background-color: #EEEEEE;
  font-weight: bold;
  border-bottom: 1px solid #CCCCCC;
  padding-top: 5px;
  padding-left: 10px;
  margin-bottom: 5px;
}

#nav ul{
  height: 19px;
}

#nav li{
  display: inline;
  margin: 0 2px;
}

#nav li a:link, #nav li a:visited{
  text-decoration: none;
  color: #444444;
  padding: 5px;
}

#nav li a:hover{
  background-color: #888888;
  color: #FFFFFF;
}


/*
-------------------------------------------------------------------------------
CONTENT
-------------------------------------------------------------------------------
*/
#content{
  width: 780px;
  height: 100%;
}

#content p{
  font-size: 14px;
  margin-left: 10px;
  margin-bottom: 10px;
}

#para{
float: left;
width: 55%;
}

#content h3 {
   color: white;
   text-shadow: 2px 1px 1px #000;
}

#content div {
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 -moz-box-shadow: 2px 2px 5px #000;
 -webkit-box-shadow: 2px 2px 5px #000;
 box-shadow: 2px 2px 5px #000;
}

#content #football{
  background-color: #669900;
  color: white;
  width: 98%;
  float: left;
  padding: 5px;
  margin: 10px;
}

#content #othersport{
  background-color: #333;
  color: white;
  width: 98%;
  float: left;
  padding: 5px;
  margin: 10px;
}

#content #school{
  background-color: #336699;
  color: white;
  width: 98%;
  float: left;
  padding: 5px;
  margin: 10px;
}

/*Marcus Images dont match the color and color you choose where too bright on normal PC screens and writing became lost */
#content #leadership{
  background-color: #8E2121;
  color: white;
  width: 98%;
  float: left;
  padding: 5px;
  margin: 10px;
}

#content #hosting{
  background-color: #CC3333;
  color: white;
  width: 98%;
  float: left;
  padding: 5px;
  margin: 10px;
}


/*Marcus Images dont match the color and color you choose where too bright on normal PC screens and writing became lost */
#content #shop{
  background-color: #4F6C28;
  color: white;
  width: 98%;
  float: left;
  padding: 5px;
  margin: 10px;
}

#content #charity{
  background-color: #FF6633;
  color: white;
  width: 47%;
  float: left;
  padding: 5px;
  margin: 10px 0px 10px 0;
}

#content ul{
  margin-left: 150px;
  margin-bottom: 10px;
  font-size: 14px;
}
#content ul li{
  list-style: square;
}

#content a, #content a:link, #content a:visited{
   color: #FFF;
   font-weight: bold;
   text-decoration: none;
}

#content a:hover{
   text-decoration: underline;
}

#main ul{
  margin-left: 50px;
  margin-bottom: 10px;
  font-size: 14px;
}
#main ul li{
  list-style: square;
}

#main a, #main a:link, #main a:visited{
   color: #006699;
   font-weight: bold;
   text-decoration: none;
}

#main a:hover{
   text-decoration: underline;
}

#main{
  width: 780px;
  height: 100%;
}


#main p{
  font-size: 14px;
  margin-left: 10px;
  margin-bottom: 10px;
}

#main div {
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 -moz-box-shadow: 2px 2px 5px #000;
 -webkit-box-shadow: 2px 2px 5px #000;
 box-shadow: 2px 2px 5px #000;
}

#main #school{
  background-color: #336699;
  color: white;
  width: 98%;
  float: left;
  padding: 5px;
  margin: 10px;
}

#main #school a, #main #school a:link, #main #school a:visited{
   color: #FFF;
   font-weight: bold;
   text-decoration: underline;
}

#main #school a:hover{
   text-decoration: none;
}

#main #school h3 {
   color: white;
   text-shadow: 2px 1px 1px #000;
}

#main #contact{
  background-color: #669900;
  color: white;
  width: 98%;
  float: left;
  padding: 5px;
  margin: 10px;
}

#main #contact a, #main #contact a:link, #main #contact a:visited{
   color: #FFF;
   font-weight: bold;
   text-decoration: underline;
}

#main #contact a:hover{
   text-decoration: none;
}

#main #contact h3 {
   color: white;
   text-shadow: 2px 1px 1px #000;
}


#main #school img {
	float: right;
	margin: 5px;
}

.icon{
  margin: 5px;
  float: left;
}

#logo{
margin: 5px;
float: right;
}
/*
-------------------------------------------------------------------------------
FOOTER
-------------------------------------------------------------------------------
*/

#footer{
  text-align: center;
  margin-top: 20px;
  padding-bottom: 20px;
}










