/** Colour Schemes**
HOME	-	#FF6600
ABOUT	-	#009933
NEWS	-	#6600CC
STAFF	-	#0066CC
GROUPS	-	#DDDD1E
PARENTS	-	#FF0000
LINKS	-	#FF00FF
CONTACT -	#99FF33
********************/

@font-face {
 font-family: KidTYPE-CrayonA;
 src: url(fonts/KITYPEC.eot) /* EOT file for IE */
}
@font-face {
 font-family: KidTYPE-CrayonA;
 src: url(fonts/KITYPEC.TTF) /* TTF file for CSS3 browsers */
}

* {
	margin:0;
	padding:0;
	border:0;
	list-style: none;
} 
html, body, #wrap {
	height: 100%;
}
body > #wrap {
	height: auto; 
	min-height: 100%;
}
#main {
	padding-bottom: 90px;  /* must be same height as the footer */
	width: 100%;
	margin: 0 auto 0 auto;
}
#wrap {
	background-color: #ffffff;
	width: 90%;
	min-width: 700px;
	max-width: 1280px;
	margin: 0 auto 0 auto;
}
#footer {
	position: relative;
	margin-top: -90px; /* negative value of footer height */
	height: 90px;
	clear:both;
	width: 90%;
	min-width: 700px;
	max-width: 1280px;
	background-color: #ffffff;
	margin: 0 auto 0 auto;
	text-align: center;
	font-size: smaller;
	border-top: 2px solid #ff6600;
} 

/* CLEAR FIX*/
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix {
	display: inline-block;
}
/* Hides from IE-mac \*/
* html .clearfix { 
	height: 1%;
}
.clearfix {
	display: block;
}
/* End hide from IE-mac */
body {
	background-color: #E5F8FF;
	background-image: url(page-bg-image.jpg);
	background-repeat: repeat-x;
	font-family: verdana, geneva, hevlvetica, arial, sans-serif;
}

#header {
	width: 100%;
	min-width: 700px;
	overflow: hidden;
	text-align: right;
	background-color: #E5F8FF;
	position: relative;
}

#logo {
	position: absolute; 
	top: 10px; 
	left: 10px; 
	z-index: 5;
	width: 150px;
}

#headerTitle {
	position: absolute;
	width: 300px;
	top: 40px;
	left: 200px;
	text-align: left;
	z-index: 15;
	font-family: KidTYPE-CrayonA;
}

#headerCharity {
	position: absolute;
	width: 300px;
	top: 125px;
	left: 200px;
	text-align: left;
	z-index: 15;
	font-size: 12px;
}

#navigation {
	background-color: #ffffff;
	float: left;
	width: 100%;
	height: 34px;
	overflow: hidden;
}

#navigation ul {
	width: 100%;
	text-align: center;
	background-color: #ffffff;
	border-bottom: 2px solid chartreuse;
	float: left;
}

#navigation ul li {
	display: inline;
	float: left;
	background-color: #ffffff;
	text-align: center;
}

#subHeading {
	width: 100%;
	height: 45px;
	font-family: KidTYPE-CrayonA;
	color: #ffffff;
	text-align: center;
	float: left;
}
#subHeading h1 {
	height: 20px;
	font-size: 20px;
	margin: 10px 0 0 0;
}

#navigation ul li.homeNav {width: 10%;}
#navigation ul li.aboutNav {width: 12%;}
#navigation ul li.newsNav {width: 11%;}
#navigation ul li.staffNav {width: 11%;}
#navigation ul li.groupsNav {width: 13%;}
#navigation ul li.parentsNav {width: 15%;}
#navigation ul li.linksNav {width: 10%;}
#navigation ul li.contactNav {width: 17%;}
#navigation ul li a span {display: none;}

#left {
	width: 20%;
	float: left;
	background-color: #ffffff;
	clear: left;
	padding: 10px 0 20px 0;
	color: purple;
}
#right {
	width: 20%;
	float: left;
	background-color: #ffffff;
	padding: 10px 0 20px 0;
	color: green;
}
#center {
	width: 60%;
	padding: 10px 0 20px 0;
	float: left;
}
#full {
	float: left;
	width: 100%;
}

#left h1 {
	
	color: #ffffff;
	font-family: KidTYPE-CrayonA;
	text-align: center;
	font-size: 15px;
}
#left p {
	font-size: 15px;
}

#center p {
	margin: 0 0 1em 0;
}

#clsComponentSubNavDiv {
	width: 90%;
	margin: 0 auto 1em auto;
	border-bottom: 1px dashed #A45364;
	color: #A45364;
}
#clsComponentSubNavDiv h1 {
	background-color: #A45364;
}
#clsComponentSubNavDiv a {
	color: #A45364;
	text-decoration: none;
}
#clsComponentSubNavDiv a:hover, #clsComponentSubNavDiv a:focus {
	text-decoration: underline;
}
#clsComponentNewsBulletinDiv {
	width: 90%;
	margin: 0 auto 1em auto;
	border-bottom: 1px dashed #999999;
	color: #999999;
}
#clsComponentNewsBulletinDiv h1 {
	background-color: #999999;
}
#clsComponentNewsBulletinDiv .article {
	width: 95%;
	margin: 0 auto 1em auto;
	border: solid 1px #999999;
	padding: 5px 2% 5px 2%;
}

#clsComponentNewsBulletinDiv .article h2, #clsComponentNewsBulletinDiv .article h3 {
	font-size: 12px;
	margin: 0 0 0.5em 0;
}
#clsComponentNewsBulletinDiv .article p {
	font-size: 10px;
	margin: 0 0 0.5em 0;
}

#clsComponentNewsBulletinDiv a {
	color: #999999;
}

#clsComponentNewsBulletinDiv h2 span, #clsComponentNewsBulletinDiv .article h3 span {
	font-weight: normal;
}


#clsComponentDownloadsDiv  {
	width: 90%;
	margin: 0 auto 1em auto;
	border-bottom: 1px dashed #E5773C;
	color: #E5773C;
	text-align: left;
	font-size: 15px;
}

#clsComponentDownloadsDiv  table#downloads {
	width: 100%;
	border-collapse: collapse;
	font-family:  KidTYPE-CrayonA;
}
#clsComponentDownloadsDiv  table#downloads  td{
	width: 100%;
	vertical-align: top;
	padding: 0 0 1em 0;
}
#clsComponentDownloadsDiv  table#downloads th {
	text-align: left;
	padding: 0 0 5px 0;
	font-weight: normal;
	font-size: 15px;
	width: 100%;
}

#clsComponentLoginDiv {
	width: 90%;
	margin: 0 auto 1em auto;
	border-bottom: 1px dashed #006634;
}

#right #clsComponentLoginDiv h1 {
	background-color: #006634;
}

#right #clsComponentDownloadsDiv h1 {
	background-color: #E5773C;
}

#right h1 {
	color: #ffffff;
	font-family: KidTYPE-CrayonA;
	text-align: center;
	font-size: 15px;
}

	
h2#breadcrumb  {
	font-size: 12px;
	margin: 0 0 1.5em 0;
	font-weight: normal;
}	
#breadcrumb a {
	font-weight: bold;
	text-decoration: none;
	color: #ff6600;
}
#breadcrumb a:hover, #breadcrumb a:focus {
	text-decoration: underline;
}

#center img.imgFloatRight {
	float: right;
	width: 28%;
	padding: 0 0 1em 2%;
}

#center img.imgFloatLeft {
	float: left;
	width: 28%;
	padding: 0 2% 1em 0;
}
	
#left p, #right p, #left form, #left h1, #right h1,  #left ul, #right ul {
	width: 100%;
	margin: 0 auto 1em auto;
}

#clsComponentLoginDiv table#login {
	width: 100%;
	border-collapse: collapse;
	font-family:  KidTYPE-CrayonA;
}

#clsComponentLoginDiv table#login td {
	width: 100%;
	vertical-align: top;
}

#clsComponentLoginDiv table#login th {
	text-align: left;
	padding: 0 0 5px 0;
	font-weight: normal;
	font-size: 15px;
	width: 100%;
}

#clsComponentLoginDiv table#login td p {
	width: 100%;
}

#clsComponentLoginDiv table#login td input#username, #clsComponentLoginDiv table#login td input#password {
	width: 88%;
	padding: 5px 5% 5px 5%;
	margin: 0 auto 1em auto;
	border: 1px solid #006634;
}

#clsComponentLoginDiv table#login td.buttons input#submit {
	width: 47%;
	margin: 0 0 1em 0;
	border: 1px solid #006634;
	padding: 2px 0 2px 2%;
	color: #006634;
	background-color: #dddddd;
	float: left;
}
#clsComponentLoginDiv table#login td.buttons {
	width: 100%;
}
#clsComponentLoginDiv table#login td.buttons p {
	font-family: verdana, geneva, helvetica, arial, sans-serif;
	font-size: 12px;
	width: 48%;
	text-align: right;
	padding: 4px 2% 2px 0;
	margin: 0 0 1em 0;
	float: left;
}

#clsComponentLoginDiv a {
	text-decoration: none;
	color: #006634;
}

#clsComponentLoginDiv a:hover, #clsComponentLoginDiv a:focus {
	text-decoration: underline;
}

#clsComponentGalleryDiv {
	width: 90%;
	margin: 0 auto 0 1em;
	border-bottom: 1px dashed #43aef1;
	font-size: 12px;
	text-align: center;
}

#clsComponentGalleryDiv  h1 {
	width: 100%;
	background-color: #43aef1;
}

#clsComponentGalleryDiv  img.clsGallerySlideThumb {
	width: 100%;
	color: #43aef1;
	margin: 0 0 0.5em 0;
}

#clsComponentGalleryDiv p {
	color: #43aef1;
	font-size: 12px;
}

#clsComponentGalleryDiv a {
	text-decoration: none;
	color: #43aef1;
	font-weight: bold;
}

#clsComponentGalleryDiv a:hover, #clsComponentGalleryDiv a:focus {
	text-decoration: underline;
}

.clsGallerySlide {
	width:100%;
	position: relative;
	margin: 0 0 1em 0;
}

.clsGalleryNextArrow, .clsGalleryPrevArrow {
	position: absolute;
}

.clsGalleryNextArrow {
	width: 12%;
	right: 0px;
	top: 40%;
}

.clsGalleryPrevArrow {
	width: 12%;
	left: 0px;
	top:40%;
}

#footer a {text-decoration: none;}
#footer a:hover, #footer a:focus {text-decoration: underline;}
#footer a.homeNav {color: #ff6600;}
#footer a.aboutNav {color: #009933;}
#footer a.newsNav {color: #6600CC;}
#footer a.staffNav {color: #0066CC;}
#footer a.groupsNav {color: #dddd1e;}
#footer a.parentsNav {color: #ff0000;}
#footer a.linksNav  {color: #ff00ff;}
#footer a.contactNav {color: chartreuse;}

span.homeNav {color: #ff6600;}
span.aboutNav {color: #009933;}
span.newsNav {color: #6600CC;}
span.staffNav {color: #0066CC;}
span.groupsNav {color: #dddd1e;}
span.parentsNav {color: #ff0000;}
span.linksNav  {color: #ff00ff;}
span.contactNav {color: chartreuse;}