/****************************************************************
   																|
   DESIGNER:  	Chris Chapman									|
   DATE:    	22-11-2006										|
   DESCRIPTION: Controls the layout of the site and styles		|
            	the menus										|
																|
 ****************************************************************/
 
 /**********************************************************************************
   #wrapper: Sets width of site to 758px (works well down to 800x600 resolutions)
 **********************************************************************************/
 	
#utility-links{float:left;}
#global-calendar{float:right;}
#breadcrumbs{width:555px; float:left; font-size:0.8em; padding: 5px; margin-bottom: 5px; }

/**************************************************************
   #header: Holds logo / cricket image and also utility links
 **************************************************************/

/* see below */

/***********************************************************************************************
   #page: Holds the main page content - everthing between footer and logos/utility/global links
 ***********************************************************************************************/

#page {float: left;	width: 756px; clear: both; background-color:#FFFFFF; padding-bottom:20px; background:url(../images/backgrounds/page-bg.gif) repeat-y center;}

/**************************************************************
   #mainMenu: Primary Navigation 
 **************************************************************/
#mainMenu {width: 100%; float:right; background:#FAE042; clear:right;}
#mainMenu ul {margin: 0; padding: 0;}
#mainMenu li {display: inline; list-style: none; margin: 0; padding: 0;}
/*#mainMenu li {display: inline; list-style: none; margin: 0; padding: 0;}
#mainMenu li a {float: left; margin: 0 1px;	padding: 5px 0.3em;	font: 400 0.9em "trebuchet ms", serif; text-decoration: none;text-transform: lowercase; color:#ffffff;}*/

/* rollover / current section effect */
/*#mainMenu li a:hover, #mainMenu li a.here {color:#EFEFEF;}*/





/**************************************************************
  news and spotlight styles - homepage
 **************************************************************/

#homepageNews{width:200px; border:dotted 2px #cccccc; float:right; padding: 0 5px; font-size: 90%;}
#homepageSpotlight{width:230px; float:left; margin-right: 2px;}
#newsSpotlightWrapper{padding: 10px 15px;}

/*Spotlight specific styling rules*/

.spotlightWrapper{width:248px;}
/*.red-bg{background:#cc0000;}
.blu-bg{background:#0033cc;}
.yel-bg{background:#FEE125;}*/

.red-bg{background:#ED2E38;}
.yel-bg{background:#FAE042}

.sp-img{float:left; padding:0 3px;}

.sp-header{color:#ffffff; font-weight:bold; font-size: 80%; padding-right: 2px;}
.sp-header-red{color:#ED2E38; font-weight:bold; font-size: 80%; padding-right: 2px;}
.sp-content{color:#ffffff; font-size: 70%; padding-right: 2px;}
.sp-content-grey{color:#666666; font-size: 70%; padding-right: 2px;}
.sp-content-red{color:#ED2E38; font-size: 70%; padding-right: 2px;}
.sp-more a {color:#ffffff; padding-right: 2px;}
.sp-more a:hover {color:#ffffff; text-decoration:none;}

.sp-more-red a {color:#ED2E38; padding-right: 2px;}
.sp-more-red a:hover {color:#ED2E38; text-decoration:none;}

/**************************************************************
   funds raised control styling
 **************************************************************/

#fundsRaisedWrapper{width: 200px; clear:both; margin: 0 auto; margin-top:10px;}
#fundsRaisedContent{padding: 0 8px; background:#ead0d0; text-align:center;}
#fundsRaisedContent p {margin:0px; padding:0px;}
#fundsRaisedContent h1{color: #666666; font-size: 1.4em;}
.totalRaised{color:#ED2E38; background:#FFFFFF; padding:2px; font-size: 1.8em;} 
.totalRaisedEdit{color:Red; border:solid 1px dotted; background:#FFFFFF; padding:2px; font-size: 1.8em;} 
.small{font-size:80%;}

/**************************************************************
   events Coming Up control styling
 **************************************************************/

#eventsComingUpWrapper{width: 480px; float: left; margin-left:10px; margin-top:10px; padding:0px; background:url(../images/backgrounds/eventsComingUpControlRepeat.jpg) repeat-y center;}
#eventsComingUpContent{padding: 0 8px}
#eventsComingUpContent p {margin:0px; padding:0px;}


/******************************************************************************
   Classes for creating various column layouts as per required - Max 4 columns
 ******************************************************************************/

.width100 {width: 100%;}
.width75 {width: 74%;}
.width67 {width: 67%;}
.width50 {width: 49.7%;}
.width33 {width: 32.7%;}
.width25 {width: 24.7%;}
.width32 {width: 31.7%;}

.width32 a{text-transform:uppercase; font-size:85%;}
/*.leftColumn{padding-left:5px;}
.rightColumn{padding-right:5px;}*/

/**************************************************************
   Useful classes to align / float things
 **************************************************************/

.floatLeft {float: left;}
.floatRight {float: right;}
.alignLeft {text-align: left;}
.alignRight {text-align: right;}

.floatLeft ul {width:90%;}

/**************************************************************
   More Useful classes 
 **************************************************************/

.clear {clear: both;}
.block {display: block;}
.highlighter{background-color:#FFFF99;}
.small {font-size: 0.8em;}
.green {color: #009900;}
.red {color: #ED2E38;}
.grey {color: #666;}
.pagelist{list-style-image:url(../images/icons/page.gif);}
.awardlist{list-style-image:url(../images/icons/award.gif);}
.calendarlist{list-style-image:url(../images/icons/calendar.gif);}
.ticklist{list-style-image:url(../images/icons/tick.gif);}
.thumbsuplist{list-style-image:url(../images/icons/thumb_up.gif);}
.faintBorder{border-bottom:solid 1px #efefef; /*padding:2px; margin:2px;*/}
.thumbnailEdit{padding:6px;}
.paralist{
	background-image: url(../images/icons/page.gif);
	background-repeat: no-repeat;
	background-position: left center;
	padding-left: 20px;
	font-size: 0.9em;
	margin-left: 15px;
}











/******************************
			Body
******************************/
body {
	text-align:center;
}

/******************************
			Wrapper
******************************/
#wrapper {
	background:#dbdbdb url('../images/backgrounds/content-bg.gif') repeat-x;
	margin:0 auto;
	padding:0 15px;
	text-align:left;
	width:756px;
}
#wrapper:after {
	clear:both;
	content:'.';
	display:block;
	height:0;
	visibility:hidden;
}

	/******************************
				Header
	******************************/
	#header {
		margin:0;
		padding:0;
		width:756px;
	}
	#header h1 {
		background:url('../images/backgrounds/header-h1.jpg') no-repeat;
		height:102px;
		margin:0;
		padding:0;
		text-indent:-9999px;
		width:756px;
	}
	#header ol {
		clear:both;
		height:97px;
		list-style:none;
		margin:0 0 3px;
		padding:0;
		width:756px;
	}
	#header ol li {
		float:left;
		height:97px;
		margin:0;
		overflow:hidden;
		padding:0;
		width:126px;
	}
	#header ol li a {
		display:block;
		height:97px;
		margin:0;
		padding:0;
		text-decoration:none;
		width:126px;
	}
	#header ol li a img {
		border:0;
		height:118px;
		margin:0;
		padding:0;
		width:126px;
	}

	/******************************
				Footer
	******************************/
	#footer {
		background:url('../images/backgrounds/footer.jpg') repeat-x;
		background-position:bottom center;
		clear:both;
		color:#666;
		font-size:.7em;
		height:24px;
		line-height:32px;
		margin:0 auto;
		padding:2px 15px 12px 15px;
		width:726px;
	}
	#footer a {
		color:#666;
		text-decoration:none;
	}
	#footer a:hover {
		text-decoration:underline;
	}
	#footer img {
		vertical-align:middle;
	}

	/******************************
				Legal
	******************************/
	#legal {
		font-size:80%;
		margin:0 auto;
		padding:10px 0 0;
		text-align:center;
		width:756px;
	}