/* There are some layout features included in this document.  Each line applying to each one
  is marked as follows (in case you need to remove them).  When changing the value of properties marked 
  with these tags you should leave the original value in a comment so changes can be easily scanned.
  
  	[cfw] Centred fixed width page

*/




/*****************************************************************************************
 *			Imports
 ****************************************************************************************/

/* content styling */
@import url("content/standard-html.css");

/* page components */
@import url("components/footer.css");
@import url("components/header.css");
@import url("components/primary-navigation-dropdown.css");
@import url("components/content-footer.css");

/*****************************************************************************************
 *			Main document sections layout
 ****************************************************************************************/

body {
	text-align: center; /* center the #page element in IE5/win [cfw] */
}

#page {
	position: relative; zoom: 1;
	z-index: 1;
	width: 950px; /* [cfw] */
	text-align: left; /* reset the text alignment after IE5/win hack above [cfw] */
	margin: 0 auto; /* ceneter the #page element in all but IE5/win [cfw] */
}

/* dummy element to contain bottom of page background */
#extra1 {
	float: left;
	width: 100%;
	width: 100%;
	height: 397px;
	margin-top: -262px;
}

/************************
 * header, primary navigation and breadcrumb
 ************************/
 
#page #header {
	position: relative; zoom: 1;
	height: 104px;
	z-index: 2;
}

#page #primary-navigation { /* IE 6 sucks.  have to position the inner UL instead */
	float: left;
	width: 0;
	height: 0;
}
#primary-navigation ul {
	position: absolute;
	top: 73px; /* just inside header */
	right: 0;
	left: 0;
	width: 299px;
	padding-left: 651px;
	z-index: 3;
}


/************************
 * secondary navigation & content columns
 ************************/
 
#column-wrapper {
 	padding-left: 185px;
	margin-top: 7px; /* margin below primary nav */
}

body.home-page #content{
	padding-bottom: 7px; /* push down the footer */
	*padding-bottom: 14px; /* IE pulls the -7px on the bottom of the boxes into the padding */
	
}

#page #column-wrapper-inner {
	width: 100%; /* teaches IE to figure out what margin-left: -100% means */
}

/* no secondary nav */
#page #content {
	min-height: 530px;
	margin-top: 7px;
	_z-index: 0; /*  IE6 was getting confused with z-index */
	_position: relative; /*  IE6 was getting confused with z-index */
	background: #fff url(../images/backgrounds/bg_content.png) -712px 0 no-repeat;
	padding: 20px;
}

#page #footer {
	_z-index: 2; /*  IE6 was getting confused with z-index */
}

/* breathe in at the left a little to make room for secondary nav */
body.has-secondary-navigation #page #content {
	float: left; display: inline;
	width: 100%;
	margin-top: 0;
}

/* push content away from space where secondary nav will be */
body.has-secondary-navigation #page #content-inner {
	padding-left: 21px; /* move away from the secondary navigation */
}

/* move into the space we created next to #content */
#page #secondary-navigation {
	float: left; display: inline;
	width: 185px;
	z-index: 1; /* make sure this isn't hidden underneath #content in FF */
	position: relative;
	padding-bottom: 340px; /* leave room for gradient bg on bottom of nav block */
	margin-left: -100%;
	left: -185px;
}



/************************
 * misc
 ************************/

#page #extended-footer {
	clear: both;
	padding: 0px 0 15px 0;
	overflow: hidden;
	zoom: 1; /* To stop IE6 page scroll bug */
	position: relative;
}

#page #footer {
	clear: both;
	min-height: 94px;
	_height: 94px;
}



/*****************************************************************************************
 *			Page layout / styles
 ****************************************************************************************/

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 75%;
	background: #7e949f url(../images/backgrounds/bg_body-internal-top.jpg) left top repeat-x;
	color: #231f20;
}

body.home-page {
	background-color: #fff;
	background-image: none;
}


/* page bottom background
#extra1 {
	background: url(../images/backgrounds/bg_body-internal.jpg) transparent left top repeat-x;
}
body.home-page #extra1 {
	background-image: url(../images/backgrounds/bg_body.jpg);
}
 */
/* footer reflection */
#extra1 div {
	background: url(../images/backgrounds/bg_body-center.jpg) transparent center -150px no-repeat;
	height: 400px;
	margin-top: -3px;
}

body.home-page #extra1 div {
	background-position: center top;
	height: 550px;
	margin-top: 400px;
}




/*****************************************************************************************
 *		 	Page Title internal layout / styles
 ****************************************************************************************/

#page-title {
	padding-bottom: 5px;
	margin-bottom: 5px;
}

body.has-breadcrumb #page-title {
	padding-top: 1.012em; /* account for height of breadcrumb line */
}

body.has-breadcrumb #page-title h1 {
	padding: 0;
}


/************************
 * Top of page Link
 ************************/
 
#top-page-link {
	margin-top: 3em;
}

#top-page-link a {
}




/*****************************************************************************************
 *			Content styles for custom classes and id's
 ****************************************************************************************/


/************************
 * Form prompt text
 ************************/
 
input.displayingPromptValue {
	color: #666;
}




/*****************************************************************************************
 *			Utility styles
 ****************************************************************************************/

/************************
 *  IMAGE-REPLACED: accessible text image replacement
 ************************/
/*
  Usage: <tag class="image-replaced">the text to replace<span></span></tag>
*/

.image-replaced {
	position: relative;
	overflow: hidden;
}


.image-replaced span{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: transparent;
	background-position: left top;
	background-repeat: no-repeat;
}


/************************
 * accessibility styles
 ************************/

/* hide items in a way still accessibly to screen readers (and unstyled browsers of course) */
.accessibility, hr {
	position: absolute !important;
	top: -1000em !important;
	left: -1000em !important;
}



/************************
 * clearfix, a class to clear floated elements
 ************************/
 
/* clearfix for good browsers */
html > body .clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

/* clearfix for IE/mac */
.clearfix {
	display: inline-block;
}

/* Hides from IE-mac, clearfix for IE/win and reset for not IE/mac */
@media all {
	* html .clearfix {
		_height: 0;
	}
	
	.clearfix {
		display: block;
	}
}