body {  
   background-color: #DCDDDE;
}

input, select, textarea {font-family:Arial, helvetica, sans-serif;}

/*******************************************************************************************************************************************************/
/************** general styles *************************************************************************************************************************/
/*******************************************************************************************************************************************************/

p.links {line-height:110%;}

p.links a:link {color: #58595B; text-decoration: underline}
p.links a:visited {color: #58595B; text-decoration: underline}
p.links a:active {color: #58595B; text-decoration: none}
p.links a:hover {color: #58595B; text-decoration: none}

p.footer {margin-bottom: 0px;}

.Blue {color: #0077c0;}
.Green {color: #79ac36;} /* #8cc63f */
.Grey {color: #221e1f;}
.Purple {color: #92278f;}
.nomargin {margin-bottom: 0px;}
.warning {color: red;}

/*******************************************************************************************************************************************************/
/************** ADDITIONAL STYLES **********************************************************************************************************************/
/*******************************************************************************************************************************************************/

/* None */

/*******************************************************************************************************************************************************/
/************** MAIN LAYOUT DIV STYLES *****************************************************************************************************************/
/*******************************************************************************************************************************************************/

table.mainContainer { 		/* Should be a DIV but background doesn't work properly */
							/* Can't get background to continue "off-page" if content too large for window */

	margin-left: auto; 		/*** USED TO CENTRE CONTENT ***/
	margin-right: auto; 	/*** USED TO CENTRE CONTENT ***/
	width: 960px;
	background: url(../images/spacers_etc/container_bg.gif) repeat-y top;
	height: 100%;
}

div.content {
	clear: both;
	width: 960px;
}

div.contentInside {
	padding-left: 30px;
	padding-right: 30px;
	padding-top: 20px;
	padding-bottom: 20px;
}

/********************************************************/
/*** Footer ***/
/********************************************************/

div.footer {width: 960px;}

div.footer div {
   padding: 10px 30px 5px 30px;
   text-align: center;
   clear: both;
}

/*******************************************************************************************************************************************************/
/************** HEADER STYLES **************************************************************************************************************************/
/*******************************************************************************************************************************************************/

div.header {
	/* Nothing in here at the moment */
}

div.headerLeft {
	float: left;
	width: 330px;
}

div.headerRightBlue,
div.headerRightGreen,
div.headerRightGrey,
div.headerRightPurple {
	float: right;
	width: 630px;
	
}

div.headerRightBlue {background: url(../images/header/main_circles_bg/blue.gif) repeat-y top;}
div.headerRightGreen {background: url(../images/header/main_circles_bg/green.gif) repeat-y top;}
div.headerRightGrey {background: url(../images/header/main_circles_bg/grey.gif) repeat-y top;}
div.headerRightPurple {background: url(../images/header/main_circles_bg/purple.gif) repeat-y top;}

div.headerRightImage {
	float: right;
	width: 180px;
}

/********************************************************/
/*** Navigation in the header ***/
/********************************************************/

div.headerNavigation {
	float: left;
	height: 22px;
	padding-right: 15px;
	background: url(../images/header/top_nav/main_background.gif) no-repeat right bottom;
}

div.headerNavigation div { /* Needed to get rid of border under left image */
	float: left;
}

div.headerNavigation span.alignfont {
	vertical-align: 7px;
	font-weight: bold;
	color: #ffffff;
}

a.headerLinksOn:link {color: #ffffff; text-decoration: underline}
a.headerLinksOn:visited {color: #ffffff; text-decoration: underline}
a.headerLinksOn:active {color: #ffffff; text-decoration: none}
a.headerLinksOn:hover {color: #ffffff; text-decoration: none}

a.headerLinksOff, /* Needed as not a link */
a.headerLinksOff:link,
a.headerLinksOff:visited,
a.headerLinksOff:active,
a.headerLinksOff:hover { /* Used to 'dim' font controls */
	color: #d2d2d2;
	text-decoration: none;
}

/*******************************************************************************************************************************************************/
/************** SEARCH AND NAVIGATION STYLES ***********************************************************************************************************/
/*******************************************************************************************************************************************************/

div.mainNavigationAndSearchBanner {
	width:960px;
	clear:both;
}

div.mainNavigationBlue,
div.mainNavigationGreen,
div.mainNavigationGrey,
div.mainNavigationPurple {
	float: left;
	height: 35px;
	background-color: #ffffff;
	padding-left: 30px;
	padding-right: 30px;
	font-weight: bold;
}

div.searchBlue,
div.searchGreen,
div.searchGrey,
div.searchPurple {
	float: right;
	height: 35px;
	background-color: #ffffff;
	padding-left: 10px;
	padding-right: 10px;
}


div.mainNavigationBlue, div.searchBlue, input.searchFieldBlue, input.searchButtonBlue {border:1px solid #0077c0;}
div.mainNavigationGreen, div.searchGreen, input.searchFieldGreen, input.searchButtonGreen {border:1px solid #79ac36;} /* #8cc63f */
div.mainNavigationGrey, div.searchGrey, input.searchFieldGrey, input.searchButtonGrey {border:1px solid #221e1f;}
div.mainNavigationPurple, div.searchPurple, input.searchFieldPurple, input.searchButtonPurple {border:1px solid #92278f;}

div.searchBlue {background-color: #BBDAF3;} 		/* 50% of lighter shade */
div.searchGreen {background-color: #E1EDC4;} 		/* 50% of lighter shade */
div.searchGrey {background-color: #78797B;} 		/* 25% of lighter shade */
div.searchPurple {background-color: #E7CFE5;} 		/* 50% of lighter shade */

input.searchFieldBlue,
input.searchFieldGreen,
input.searchFieldGrey,
input.searchFieldPurple {
	width: 150px;
	background: #ffffff;
	color: #58595B;
}

input.searchButtonBlue,
input.searchButtonGreen,
input.searchButtonGrey,
input.searchButtonPurple {
	color: #ffffff;
	font-weight: bold;
}

input.searchButtonBlue {background-color: #0077c0;}
input.searchButtonGreen {background-color: #8cc63f;}
input.searchButtonGrey {background-color: #221e1f;}
input.searchButtonPurple {background-color: #92278f;}

/********************************************************/
/*** Main navigation link styles ***/
/********************************************************/

.sectionNOTactive a:link {color:#58595B; text-decoration: none;}
.sectionNOTactive a:visited {color:#58595B; text-decoration: none;}
.sectionNOTactive a:active {color:#58595B; text-decoration: underline;} 
.sectionNOTactive a:hover {color:#58595B; text-decoration: underline;}

/*******************************************************************************************************************************************************/
/************** THREE column DIV styles ****************************************************************************************************************/
/*******************************************************************************************************************************************************/

div.leftColumnOuter {
	float: left;
 	width: 190px;
   	padding: 0px;
   	margin: 0px;
}

div.leftColumn {
   padding: 0px 20px 0px 0px;
   margin: 0px;
}

div.leftColumnInner {
   width: 170px;
   padding: 0px;
   margin: 0px;
   overflow: hidden;
}

div.centreAndRightColumn {
   float: right;
   width: 690px; /* 960px - (2 x 30px border) - 190px (left navigation) - 20px spacing */
   padding: 0px;
   margin: 0px;
}

div.rightColumn {
   float: right;
   width: 230px;
   padding: 0px;
   margin: 0px;
   overflow: hidden;
}

div.centreColumn {
   float: left;
   width: 440px; /* 690px - 230px - 20px (spacing) */
   padding: 0px;
   margin: 0px;
   overflow: hidden;
}

div.centreColumnHomeImage {
   float: right;
   padding: 0px;
   margin: 0px;
}

/*******************************************************************************************************************************************************/
/************** RIGHT COLUMN IMAGE STYLES **************************************************************************************************************/
/*******************************************************************************************************************************************************/

div.rightImage {
	width: 230px;
	padding: 0px;
	margin: 0px 0px 10px 0px;
	clear: both;
}

/*******************************************************************************************************************************************************/
/************** LEFT COLUMN IMAGE STYLES ***************************************************************************************************************/
/*******************************************************************************************************************************************************/

div.leftAreaLInks { /* Also used for comments buttons */
	padding: 0px;
	margin: 0px 0px 10px 0px;
}

/*******************************************************************************************************************************************************/
/************** LEFT navigation LEVEL TWO **************************************************************************************************************/
/*******************************************************************************************************************************************************/

div.leftNavigationContainer {
	width: 100%;
	margin: 0px 0px 13px 0px;
	padding: 0px;
}

div.leftNavigationContainerCellON, div.leftNavigationContainerCellOFF {
	width: 100%;
	padding: 4px 0px 5px 0px;
	margin: 0px;
	font-weight: bold;
}

div.leftNavigationContainerCellON a:link {text-decoration: none}
div.leftNavigationContainerCellON a:visited {text-decoration: none}
div.leftNavigationContainerCellON a:active {text-decoration: underline}
div.leftNavigationContainerCellON a:hover {text-decoration: underline}

div.leftNavigationContainerCellOFF a:link {COLOR: #58595B; text-decoration: none}
div.leftNavigationContainerCellOFF a:visited {COLOR: #58595B; text-decoration: none}
div.leftNavigationContainerCellOFF a:active {COLOR: #58595B; text-decoration: underline}
div.leftNavigationContainerCellOFF a:hover {COLOR: #58595B; text-decoration: underline}

/*******************************************************************************************************************************************************/
/************** LEFT navigation LEVEL THREE ************************************************************************************************************/
/*******************************************************************************************************************************************************/

ul.L3navigation {
   margin-top: 3px;
   margin-left: 1.7em;
   margin-right: 10px;
   margin-bottom: 0px;
   line-height:105%;
   color: #58595B;
   list-style-type: square;
}

/* Colour in colour stylesheets */
li.L3navigationON a:link {text-decoration: none}
li.L3navigationON a:visited {text-decoration: none}
li.L3navigationON a:active {text-decoration: underline}
li.L3navigationON a:hover {text-decoration: underline}

li.L3navigationOFF a:link {COLOR: #58595B; text-decoration: none}
li.L3navigationOFF a:visited {COLOR: #58595B; text-decoration: none}
li.L3navigationOFF a:active {COLOR: #58595B; text-decoration: underline}
li.L3navigationOFF a:hover {COLOR: #58595B; text-decoration: underline}

/*******************************************************************************************************************************************************/
/************** events styles **************************************************************************************************************************/
/*******************************************************************************************************************************************************/

div.eventsMonthCommencing {
	height: 35px;
	background-color: #ffffff;
	padding-left: 15px;
	padding-right: 15px;
	margin-bottom: 13px;
}

h3.eventTitle { margin-bottom: 5px; }

/*******************************************************************************************************************************************************/
/************** form styles ****************************************************************************************************************************/
/*******************************************************************************************************************************************************/

p.formReducedMargin {margin-bottom: 5px;}

form {margin-bottom: 0px;} /* NEEDED AS PAGE HAS A FORM TAG AROUND IT */

input {background: #ffffff; color: #58595B; border:1px solid #888888;}
input:focus {background: #e3e3e3;}

input.fullWidth {width: 436px;} /* smaller than column (440px) to allow for border and padding */

select {background: #ffffff; color: #58595B; border:1px solid #888888;}
select.fullWidth {width: 439px;} /* smaller than column (440px) to allow for border and padding */

textarea {background: #ffffff; color: #58595B; border:1px solid #888888;}
textarea:focus {background: #e3e3e3;}

textarea.fullWidth {width:434px;}	/* width reduced FROM 436px by additional 2px so that */
									/* there is no scrolling on centre coloum in Gogle Chrome browser */

span.website input.cmsmodalformhalfwidth,
span.website textarea.cmsmodalformhalfwidth,
span.website select.cmsmodalformhalfwidth {
	width: 241px; /* smaller than column to allow for border and padding */
}

span.website input.cmsmodalformfullwidth,
span.website textarea.cmsmodalformfullwidth,
span.website select.cmsmodalformfullwidth {
	width: 501px; /* smaller than column to allow for border and padding */
}

/********************************************************/
/*** Site search fileds configured above styles ***/
/********************************************************/

span.noborder input{ border: 0px;}

/*******************************************************************************************************************************************************/
/*********** MODAL POP-UP ******************************************************************************************************************************/
/*******************************************************************************************************************************************************/

/* Makes the modals look a bit smaller/better */
 div.modalContent p.cmsPara, div.modalContent p.cmsred {
	margin-bottom: 8px;
}

/* Used for warning messages in modal */
span.website div.modalContent .cmsh2 {
	color: red;
	margin-bottom: 8px;
}

span.website .modalBackground {
    background-color: Black;
    filter: alpha(opacity=35);
    opacity: 0.35;
}

span.website div.layerModalStandard {
	width: 535px;
	background: url(../Renew/modal_images/modalBg535.gif) repeat-y top;
	background-color: #ffffff;
	margin: 0px;
}

span.website div.modalContent {
    padding: 12px 15px 0px 15px;
    margin: 0px;
}

span.website div.modalContent table {
    margin-top: 1px;
}

span.website td.modalTableHeaderCell {
	padding: 6px 15px 0px 15px;
	font-family:Arial, helvetica, sans-serif; font-size: 11px;
}

span.website p.modaltitle {
	font-size: 14px;
	font-weight: bold;
	color: #ffffff;
	margin: 0px;
}

span.website .modalTableHeaderStandard {
	height: 35px;
	background: url(../Renew/modal_images/modalBarTopBg535.gif) no-repeat;
}

/* Cancel button, etc */

span.website td.modalTableHeaderLink {
	background: url(../Renew/modal_images/modalBarTopRightLinkBg.gif) repeat-x left;
	border: 0px;
	margin: 0px;
	padding: 0px;
	font-size: 11px;
	font-weight: bold;
	color: red;
}

span.website td.modalTableHeaderLink a:link {COLOR: #ffffff; text-decoration: none; font-family:Arial, helvetica, sans-serif; font-size: 11px;}
span.website td.modalTableHeaderLink a:visited {COLOR: #ffffff; text-decoration: none; font-family:Arial, helvetica, sans-serif; font-size: 11px;}
span.website td.modalTableHeaderLink a:active {COLOR: #ffffff; text-decoration: underline; font-family:Arial, helvetica, sans-serif; font-size: 11px;}
span.website td.modalTableHeaderLink a:hover {COLOR: #ffffff; text-decoration: underline; font-family:Arial, helvetica, sans-serif; font-size: 11px;}

span.website p.modalBottomPanel {
	margin-top: 8px;
	margin-bottom: 5px;
}

span.website .modalHeadingWarning {
	color: #EA2227;
	font-size: 14px;
	font-weight: bold;
}
