/*
######################################################################################
######                                                                        #######
######     GENERIC STYLES    	                                             #######
######                                                                      #######
##################################################################################
*/

body {
	background-repeat: no-repeat;
	background-position: center top;
	background-image: url(../../images/generic/body_bg-standard.jpg);
}

p { margin: 0 0 20px 0; }

/********************************************************************************/
/***** WRAPPER STYLES **********************************************************/
/******************************************************************************/

#wrapper {
	position: relative;
	font-size: 0.9em;
	width: 984px;
	margin: 15px auto 0 auto;
	}


/********************************************************************************/
/***** MIDDLE STYLES ***********************************************************/
/******************************************************************************/

.middle {
	height: auto !important;
	min-height: 400px;
	height: 400px;
}


/********************************************************************************/
/***** MISC STYLES *************************************************************/
/******************************************************************************/

/***** RED ERROR / GREEN ALERT MESSAGE *****/

.error-message,
.alert-message { 
	display: block;
	padding: 7px 7px 1px 7px;
	background-color: #3D0F0F;
	border: 1px solid #EC3F57;
	margin: 0px 0px 10px 0px;
	color: #EC3F57;
	font-size: 1.2em;
	}
	.error-message a {
		color: #EC3F57;
		text-decoration: underline;
		}
	.error-message em,
	.alert-message em { 
		font-style: normal;
		}
	.error-message p,
	.alert-message p {
		margin-bottom: 6px;
		}
	.error-message ul,
	.alert-message ul {
		margin: 0px 0px 6px 20px;
		padding: 0px;
		}
		.error-message ul li,
		.alert-message ul li {
			padding: 0px;
			margin: 0px;
			list-style: disc;
			}
.alert-message {
	background-color: #10300C;
	border: 1px solid #3C9431;
	color: #2BB319;
	}

/********************************************************************************/
/***** TOP STYLES **************************************************************/
/******************************************************************************/

/***** TOP *****/

#top {
	position: relative;
	clear: both;
	margin: 0 auto;
	width: 984px;
	height: 44px;
	background-image: url(../../images/generic/top_bg.png);
	z-index: 100;
	}


/***** LOGO *****/

	#top .logo {
		float: left;
		width: 147px;
		height: 32px;
		margin: 4px 21px 0 4px;
		padding: 0;
		}
		#top .logo img {
			display: block;
			}


/***** TAB STYLES *****/

#tabs {
	float: left;
	margin: 12px 0 0 0;
	padding: 0;
	height: 17px;
	list-style: none;
	z-index: 110;
	}
	#tabs li {
		position: relative;
		float: left;
		height: 17px;
		margin: 0 30px 0 0;
		padding: 0;
		}
	#tabs li.last {
		margin-right: 0;
		}
		#tabs li a {
			color: white;
			text-decoration: none;
			font-size: 1.6em;
			font-weight: bold;
			padding-left: 14px;
			background-image: url(../../images/generic/arrow_tabs.gif);
			background-repeat: no-repeat;
			background-position: 0 7px;
			}
		#tabs li a:hover,
		#tabs li a.active {
			color: #fffc01;
			text-decoration: none;
			background-position: 0 -43px;
			}

		/** Sub navigation **/
			#tabs li ul {
				position: absolute;
				top: 28px;
				left: -1px;
				width: 161px;
				}
				#tabs li ul li {
					width: 152px;
					padding-left: 9px;
					background-image: url(../../images/generic/tabs-sub-bg.png);
					background-repeat: repeat-y;
					}
				#tabs li ul li.footer {
					width: 161px;
					height: 8px;
					overflow: hidden;
					background-image: url(../../images/generic/tabs-sub-footer.png);
					background-repeat: no-repeat;
					}
					#tabs li ul li a {
						float: none;
						text-indent: 0;
						width: 142px;
						height: auto;
						padding: 2px 0 2px 10px;
						color: white;
						font-size: 1.2em;
						background-image: url(../../images/generic/arrow-right-sml-white.gif);
						background-repeat: no-repeat;
						background-position: 0 7px;
						}
					#tabs li ul li a:hover,
					#tabs li ul li a.active {
						text-decoration: none;
						background-position: 0 7px;
						color: #fffc01;
						}


/********************************************************************************/
/***** INTRO STYLES ************************************************************/
/******************************************************************************/

/***** SECTION STYLES *****/

.section {
	position: relative;
	width: 981px;
	font-size: 1.3em;
	line-height: 1.7em;
	margin-bottom: 29px;
	overflow: hidden;
	}
	.section .hilite-left,
	.section .hilite-right {
		position: absolute;
		top: 32px;
		left: 0;
		width: 1px;
		height: 116px;
		background-image: url(../../images/generic/section-hilite.png);
		overflow: hidden;
		}
	.section .hilite-right {
		left: 980px;
		}
	.section .separator {
		margin-bottom: 25px;
		background-image: url(../../images/generic/main-separator.png);
		background-repeat: no-repeat;
		background-position: top middle;
		width: 924px;
		height: 1px;
		overflow: hidden;
		clear: both;
		}
		
/***** SECTION LIGHT *****/

	.top-light,
	.bottom-light {
		background-image: url(../../images/generic/section-top-light.png);
		width: 981px;
		height: 6px;
		font-size: 0.6em;
		overflow: hidden;
		}
	.bottom-light {
		height: 10px;
		background-image: url(../../images/generic/section-bottom-light.png);
		}
	.content-light {
		width: 921px;
		background-image: url(../../images/generic/section-bg-light.png);
		padding: 20px 30px 0 30px;
		overflow: hidden;
		}


/***** SECTION DARK *****/

	.top-dark,
	.bottom-dark {
		background-image: url(../../images/generic/section-top-dark.png);
		width: 981px;
		height: 6px;
		font-size: 0.6em;
		overflow: hidden;
		}
	.bottom-dark {
		height: 10px;
		background-image: url(../../images/generic/section-bottom-dark.png);
		}
	.content-dark {
		width: 921px;
		background-image: url(../../images/generic/section-bg-dark.png);
		padding: 10px 30px 0 30px;
		overflow: hidden;
		}


/***** SECTION GRADIENT *****/

	.top-gradient {
		background-image: url(../../images/generic/section-top-gradient.png);
		width: 981px;
		height: 6px;
		font-size: 0.6em;
		overflow: hidden;
		}
	.bottom-gradient {
		background-image: url(../../images/generic/section-bottom-gradient.png);
		width: 981px;
		height: 6px;
		font-size: 0.6em;
		overflow: hidden;
		}
	.content-gradient {
		position: relative;
		width: 921px;
		padding: 15px 30px 15px 30px;
		overflow: hidden;
		background-image: url(../../images/generic/section-content-gradient.png);
		}
		
		.content-gradient .img_left {
			float: left;
			margin-right: 15px;
			}
		.content-gradient .img_right {
			float: right;
			margin-left: 15px;
			}
		
		.content-gradient .separator,
		.content-gradient .separator-empty {
			background-image: url(../../images/generic/main-separator.png);
			background-repeat: no-repeat;
			background-position: middle 5px;
			width: 924px;
			height: 10px;
			overflow: hidden;
			clear: both;
		}
		.content-gradient .separator-empty { background-image: none; }


/********************************************************************************/
/***** FOOTER STYLES ***********************************************************/
/******************************************************************************/

#footer {
	border-top: 1px solid #4f4f4f;
	padding-top: 4px;
	height: 40px;
	color: #696969;
	width: 981px;
	}
	#footer .left {
		float: left;
		margin: 0;
		padding: 0;
		}
	#footer .right {
		float: right;
		margin: 0;
		padding: 0;
		}
		#footer .right a {
			text-decoration: none;
			color: #696969;
			}
		#footer .right a:hover {
			color: white;
			}




/*
######################################################################################
######                                                                        #######
######     GENERIC COMPONENT STYLES                                          #######
######                                                                      #######
##################################################################################
*/

/********************************************************************************/
/****** COLUMN STYLES **********************************************************/
/******************************************************************************/

/***** PAGE CONTENT COLUMNS *****/

/** These columns are designed to be used within the normal content of a page **/

.half {
	float: left;
	width: 49.9%;
	width/**/:/**/ 48% !important;
	width/**/:/**/ 47.9%;
	padding-right: 2%;
	}
.third {
	float: left;
	width: 33%;
	width/**/:/**/ 31%;
	padding-right: 2%;
	}
.two_thirds {
	float: left;
	width: 66%;
	width/**/:/**/ 64%;
	padding-right: 2%;
	}
.quarter {
	float: left;
	width: 24.9%;
	width/**/:/**/ 23% !important;
	width/**/:/**/ 22.9%;
	padding-right: 2%;
	}
.three_quarters {
	float: left;
	width: 74.9%;
	width/**/:/**/ 73% !important;
	width/**/:/**/ 72.7%;
	padding-right: 2%;
	}


/***** TEMPLATE STRUCTURE COLUMNS *****/

/** Combinations of these columns can be used to replace 
the main column styles (content_left, content_center ETC) **/

/** IE6 has a problem with exact percentage widths, hence the hack **/

.content_half {
	float: left;
	width: 50% !important;
	width: 49.9%;
	}
.content_third {
	float: left;
	width: 33% !important;
	width: 33.3%;
	}
.content_two_thirds {
	float: left;
	width: 66% !important;
	width: 66.6%;
	}
.content_quarter {
	float: left;
	width: 25% !important;
	width: 24.9%;
	}
.content_three_quarters {
	float: left;
	width: 75% !important;
	width: 74.9%;
	}



/*
######################################################################################
######                                                                        #######
######     UNIQUE PAGE STYLES                                                #######
######                                                                      #######
##################################################################################
*/

