/*
	GLOBLAL STYLE DEFINITIONS
	=========================
*/
BODY
{
	margin: 0;
	padding: 0;

	background-image: url(images/background.gif);
	background-repeat: repeat-y;
	background-color: #D6E3FE; /* (Red/Pink as at bottom of image) */

	font-family: Verdana, Sans-Serif;
	font-size: 0.75em;
	
}


DIV
{
	margin: 0;
	padding: 0;
	border: 0;
}

TABLE
{
	border-collapse: collapse;
	margin: 0;
	padding: 0;
	border: 0;
}

TR,TH,TD
{
	vertical-align: top;
}

P
{
	text-align: left;
	margin-top: 0.25em;
	margin-bottom: 1em;
}

A
{
	color: #ec4e16;
}

IMG
{
	border: 0;
	padding: 0;
	margin: 0;
}

H1
{
	margin: 0;
	font-size: 1.5em;
	color: #6C625F;
    margin-top: 0.25em;
    margin-bottom: 0.75em;
}

H2
{
	margin-top: 1em;
	margin-bottom: 0.25em;

	font-family: Arial, Sans-Serif;
	font-weight: bold;
	font-size: 1.3em;

	color: #df0800; /* dark red */
}









/* 
	FRAME CONTROL - That which controls the outer structure of the website
	=============
*/
DIV#container
{
	width: 1000px;
	margin: 0 auto;
	text-align: left;
}





/*
	BODY
	====
	Description: This table style defines one, two and three column body sections (left and right columns both being optional).
	All columns have a white background, with the left amd right areas (where applicable) is 270px wide.  A shaded vertical line
	runs down the left edge of the main line
	This is compatible with the "shade" or "shadeindent" class styles.
*/
TABLE.body
{
	width: 1000px;
	clear : both;
}

TABLE.body TD.body-left
{
	width:225px;	/* 270px - 2px */
	background-color: white;
	text-align: left;
}

TABLE.body TD.body-main
{
	background-color: white;
}

TABLE.body TD.body-right
{
	width: 275px;	/* 270px - 2px */
	background-color: white;
	text-align: center;
}



/* leftsection appears inside TD.body-left to provide the appropriate padding */
DIV.left-padding
{
	padding: 11px 7px;
}

DIV.right-padding
{
	padding: 11px 7px;
	text-align: center;
	
}

DIV.main-padding
{
	padding: 11px 15px;
}


/*
	HEADER 
	======
*/
DIV#header
{
	background-color: #FFFFFF;
}
DIV#header h1
{
	color: #0000FF;
	text-align: center;
}
IMG.header-logo
{
	margin: 14px 0 17px 14px;
}

P#header-topmenu
{
	margin: 4px 8px 2px;
	padding: 0;
	font-family: Verdana, Sans-Serif;
	font-size: 0.9em;
	text-align: right;
	background-color: #FFFFFF;
}
P#header-topmenu A
{
	color: Black;
	text-decoration: none;
}
P#header-topmenu A:hover
{
	text-decoration: underline;
}

P#header-banner
{
	margin: 0;
	background-image: url(images/header_bg.jpg);
	background-repeat: repeat-x;
	
}

TD#header-left
{
	width: 270px;
}

TD#header-right
{
	width: 1000px;
}





/*
	FOOTER 
	======
*/
DIV#footer
{
	border-top: solid 1px #FF6600;
	background-color: white;
	padding: 10px;
	
}
DIV#footer P
{
	padding: 10px;
	text-align: center;
	color: #0000FF;	
}
DIV#footer P A
{
	color: #0000FF;	
	
}
DIV#footer P.siteby 
{
	color: Black;
	
	text-align: right;
}
DIV#footer P.siteby A
{
	color: Black;
	
	text-align: right;
}



/*	SHADE
	=====
	The shade classes "shade" and "shadeindent" provide a shaded vertical line in the background of the containing object.
	The shadeindent version indents by the equivilent of a left column (270 pixels).  You can add these to DIV or TD objects
    by appending them to the existing class style.
*/
.shade
{
	background-image: url(images/shade-line-alpha.png);
	background-repeat: repeat-y;
}

.shadeindent
{
	background-image: url(images/shade-line-alpha.png);
	background-repeat: repeat-y;
	background-position: 270px top;	
}








/* 
	RED BAR
	=======
	The red-bar describes a 20pixel high red bar that runs the width of the containing area.
	This is compatible with the "shade" or "shadeindent" class styles.
*/
DIV.red-bar
{
	width: 984px;		/* = 1000px - 2 * 8px */
	min-height: 16px;	/* = 20px   - 2 * 2px */
	background-color: #0099FF;
	color: #FFFFFF;
	padding: 3px 8px;	/* (font and padding based on header-topmenu) */
	font-family: Verdana, Sans-Serif;
	font-size: 1em;
	text-align: right;
}
DIV.red-bar A
{
	color: White;
	text-decoration: none;
}
DIV.red-bar A:hover
{
	text-decoration: underline;
}




/* 
	YELLOW BAR
	==========
	Acts like a heading and as such, should be used in an H2 tag.
*/
H2.yellow-bar
{
	background-color: #fcd105; /* yellow/gold colour */
	color: Black;
	
	padding: 5px 8px;	/* (font and padding based on header-topmenu) */
	font-family: Arial, Sans-Serif;
	font-weight: bold;
	font-size: 1.3em;
}
H2.yellow-bar A
{
	color: black;
	text-decoration: none;
}
H2.yellow-bar A:hover
{
	text-decoration: underline;
}




/* 
	COLUMN SPLITTER
	===============
	Used to split main content into two or more columns.
	Suggest that all TDs start with a H2 followed by Ps.
	Irrespective of the number of columns you have, the final
	TD should contain class="lastsplit" to correct formatting.
*/

TABLE.columnsplitter
{
	
}
TABLE.columnsplitter TD
{
	padding-right: 10px;
}
TABLE.columnsplitter TD.lastsplit
{
	padding-right: 0px;
}


/* 
	wayfindermainmenu
	===============
	Formatting for the infocasa wayfinder snippet that is used to create the top Navigation menu (red bar) and the link at the bottom of page
*/


Div.wayfindermainmenu
{
	text-align: left;
	float: none;
	margin: none;
	padding-top: 0px;
	font-weight: normal;
	

}

Div.wayfindermainmenu .active A, .active A:link, .active A:visited

{
	color: #000000;	
}
Div.wayfindermainmenu li.row
{
	padding-left:2px;
	text-align: left;
	float: left;
	display: inline;
	padding-top: 0px;
	text-transform: capitalize;	
}

Div.wayfindermainmenu li.last  span
{
	display: none;
	padding-top: 0px;
}
Div.wayfindermainmenu ul
{
	clear:both;
		 
}

Div.wayfindermainmenu ul.outer
{
	margin:0;
	padding: 0;	
	padding-top: 0px;
		 
}
Div.wayfindermainmenu ul.inner
{
	margin:0;
	padding: 0;	
	padding-top: 0px;
	
}

/* 
	wayfinderfooter
	===============
	Formatting for the infocasa wayfinder snippet that is used to create  the links at the bottom of page
*/


Div.wayfinderfooter
{
	text-align: left;
	float: none;
	margin: none;
	padding-top: 0px;
	font-weight: normal;
	color: #000000;	

}

Div.wayfinderfooter A 
{
color: #000000;	
}
Div.wayfinderfooter .active A, .active A:link, .active A:visited

{
	color: #FF0000;	
}
Div.wayfinderfooter li.row
{
	padding-left:2px;
	text-align: left;
	white-space:nowrap;
	display: inline;
	padding-top: 0px;
	text-transform: capitalize;
	color: #000000	
}

Div.wayfinderfooter li.last  span
{
	display: none;
	padding-top: 0px;
}

Div.wayfinderfooter ul
{
	margin:0;
	padding: 0;	
	padding-top: 0px;
		 
}

Div.wayfinderfooter ul.outer
{
	margin:0;
	padding: 0;	
	padding-top: 0px;
		 
}
Div.wayfinderfooter ul.inner
{
	margin:0;
	padding: 0;	
	padding-top: 0px;
	
}

/* 
	wayfindersidemenu
	===============
	Formatting for the infocasa wayfinder snippet that is used to create the side Navigation menu 
*/


Div.wayfindersidemenu 
{color: #000000;	
}

Div.wayfindersidemenu A
{color: #000000;	
}

Div.wayfindersidemenu li  span
{
	display: none;
}



Div.wayfindersidemenu ul.outer 
{
	margin-top: 0.5em;
	list-style-type: none;	
}

Div.wayfindersidemenu ul.outer li
{
	margin-top: 0.6em;
}
	
Div.wayfindersidemenu ul.inner

{
	
	list-style-type: none;
}
Div.wayfindersidemenu ul.inner li

{
	margin-top: 0;
}
Div.wayfindersidemenu li.levelclass1 A
{
	color: #006600;
	font-weight: bold;
}



Div.wayfindersidemenu li.levelclass2 A
{
	color: #006600;
	font-weight: normal;
}

Div.wayfindersidemenu levelclass1.active A
{
	color: #000000;
	font-weight: bold;
	
}

Div.wayfindersidemenu li.selfclass A
{
	color: #000000;
	font-weight: bold;
	
}

/* 
	WAyfindersitemap
	===============
	Formatting for the infocasa wayfinder snippet that is used to create the side sitemap 
*/





Div.wayfindersitemap li  span
{
	display: none;
	
}



Div.wayfindersitemap ul.outer 
{
	margin-top: 0.5em;
	list-style-type: none;	
}

Div.wayfindersitemap ul.outer li
{
	
}


	
Div.wayfindersitemap ul.inner

{
	
	list-style-type: none;
}
Div.wayfindersitemap ul.inner li A

{
	margin-top: 0;
	color: #000000;
}

Div.wayfindersitemap li.row
{
	text-transform: capitalize;	
}


Div.wayfindersitemap li.parclass
{
	margin-top: 1.5em;
}
Div.wayfindersitemap li.levelclass1 A
{
	color: #006600;
	font-weight: bold;
	
	
}



Div.wayfindersitemap li.levelclass2 A
{
	color: #006600;
	font-weight: normal;
}

Div.wayfindersitemap levelclass1.active A
{
	color: #000000;
	font-weight: bold;
	
}

Div.wayfindersitemap li.selfclass A
{
	color: #000000;
	font-weight: bold;
	
}

/* 
	Images styling for Modx content
	===============================
	
*/

.image-right

{
	float: right;
	margin-left: .75em;
	margin-bottom: .75em;
}


.image-left

{
	float:left;
	margin-right: .75em;
	margin-bottom: .75em;
}

/* 
	left column info area
	=====================
	
*/

div#infoarea
{
	border: solid 2px #0099FF;
	text-align: center;
	
	padding: 0px;
	width: 230px;
	margin-top: 10px;
}

div#infoareatitle
{
	text-align: center;
	background-color: #0099FF;
	color: #FFFFFF;
	
}
div#infoarea ul
{
	border: none;
	text-align: left;
	list-style-type: disc;
	

}

div#infoarea P
{
	border: none;
	text-align: center;
	background-color: #0099FF;
	padding-bottom: 5px;
	margin-bottom: 0px;
	color: #FFFFFF;
}