/* 
	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.
  
  	[xxx] feature name
*/




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

/* content styling */
@import url("content/standard-html.css");
@import url("content/lists.css");
@import url("content/areeba-markup.css");
@import url("content/widgets.css");
@import url("content/boxes.css");
@import url("content/downloads.css");

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

/* page variant styles */
@import url("pages/home.css");
@import url("pages/products.css");
@import url("pages/investors.css");
@import url("pages/landingpage.css");
@import url("pages/sitemap.css");
@import url("pages/search.css");
@import url("pages/map.css");


/* form styles */
@import url("forms/standard-forms.css");
@import url("forms/two-column-forms.css");

/* Thickbox */
@import url("jquery-ui/thickbox.css");

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

body {

}

#page {
	position: relative; zoom: 1;
	z-index: 1;
	margin: 0 auto;
	width: 958px;
}


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

#page #primary-navigation {
	width: 0;
	height: 0;
	float: left;
}

#primary-navigation ul {
	position: absolute;
	top: 86px; /* just below header */
	min-height: 43px;
	/* margin set in primary nav css */
	width: 795px;
	z-index: 300;
	zoom:1;
}

/* 
	ie don't like #breadcrumb being position absolute in some designs,
	so float it and make it 0 size to not affect layout then position absolute the ol inside 
*/
#page #breadcrumb {
	width: 0;
	height: 0;
	float: left;
}

#breadcrumb ol {
	font-size: 0.91667em;
	position: absolute;
	line-height: 1.35em;
	top: 158x; /* just below primary navigation */
	left: 234px; /* line up with content when there's secondary nav in place */
	padding: 0;
	margin: 20px 0 0 0;
	width: 400px;
}


/************************
 * secondary navigation & content columns
 ************************/

#column-wrapper {
	margin-top: 30px;
	margin-bottom:25px;
	padding-bottom:30px;
}
body.home-page #column-wrapper {
	margin-top: 20px;
}

/* no secondary nav */
#page #content {
	min-height: 530px;
	height: auto;
	_height: 530px;
}
body.home-page #page #content {
	min-height: 325px;
	height: auto;
	_height: 325px;
}

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


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

/* move into the space we created next to #content */
#page #secondary-navigation {
	float: left; display: inline;
	width: 178px;
	margin-top: 5px; /* clear primary navigation */
	margin-bottom: 30px;
	z-index: 1; /* make sure this isn't hidden underneath #content in FF */
	position: relative;
}


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

#page #footer {
	background: #95887b;
	border-top: 1px solid #b4ada5;
	clear: both;
	height: 80px;
	padding: 29px 0 20px 0;
	margin-top: 35px;
}

#footer-bg {
	background: #95887b;
	border-top: 1px solid #b4ada5;
	height: 129px;
	margin-top: -130px;
	position: absolute;
	width: 100%;
}




/*****************************************************************************************
 *			Page layout / styles
 ****************************************************************************************/
html {
}

body {

	background: #c9c5c1 url(../images/backgrounds/bg_body-repeat.jpg) repeat-x;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 75%;
	xbackground: white left top repeat;
	color: #666;
}
body.home-page {
	xbackground-color: #c5beb6;
	xbackground-image: url(../images/backgrounds/bg_body-repeat-home.jpg);
}


#page {

}

#page-inner {

}




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

#page-title {

}

body.has-breadcrumb #page-title {
	padding-top: 3em; /* 66px leave room for breadcrumb, ie spacks with margin here */
	padding-bottom: 2.75em; /* 33px */
	width: 540px;
}

body.has-breadcrumb #page-title span.date {
	margin-top: -20px; 
	position: absolute;
}

#page-title h1 {
	margin: 0;
}




/*****************************************************************************************
 *		 	Content area internal layout
 ****************************************************************************************/

#column-wrapper {
	background: url(../images/backgrounds/bg_content-repeat.png) 0 0 repeat-y;
}
body.home-page #column-wrapper {
	background: none;
}
#content {
	
}
body.home-page #content-inner {
	background: #E9E9E9;
	margin-top: 20px;
}
/************************
 * No sub content
 ************************/

#content #main {

}
body.home-page #page #content #main {
	margin-top: 0;
}



/************************
 * With sub content
 ************************/

/* prep the main content, leaving room beside it for sub content */
body.has-sub-content #content #main {
	float: left; display: inline;
	width: 100%;
	padding: 0;
	margin: 0;
	margin-right: -202px; /* sub content width + border + margin each side of sub content  */
	_margin-right: -208px; /* IE6 seems to be a bit picky here.. */
}
body.home-page #content #main {
	margin-right: -169px; /* sub content width + border + margin each side of sub content  */
}


/* leave room for side content to sit, it get's shifted into this space */
body.has-sub-content #content #main-inner {
	margin-right: 202px; /* sub content width + border + margin each side of sub content  */
	border-top:1px solid #F5F5F5;
	margin-top: 47px;
	margin-bottom: 30px;
}
body.home-page #content #main-inner {
	border-top: none;
	margin-right: 169px; /* sub content width + border + margin each side of sub content  */
	margin-top: 0;
	margin-bottom: 0;
}

/* shift the sub content into the space left by #main-inner */
body.has-sub-content #content #sub {
	border: 1px solid #f1f1f1;
	border-bottom: none;
	float: right; display: inline;
	margin: 30px 10px 30px 37px;
	_margin-left: 24px; /* IE6 doesn't like this */
	width: 153px;
}
body.home-page #page #content #sub {
	background-color: none;
	border: none;
	margin: 0;
	width:169px;
}


/************************
 * 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;
	}
}


/************************
 * flash inclusion
 ************************/

/* These are standard flash inclusion styles... do not modify */
@media screen {
	.flash-text-replaced embed,
	.flash-text-replaced object {
		visibility: visible !important;
		margin: 0;
		clear: none;
		_margin-right: -3px; /* account for IE 6 putting 3px of margin on the left when next to a floated element */
	}
	
	html.flash-text-has-flash span.alt {
		display: block;
	}
	.flash-text-replaced span.alt {
		position: absolute;
		left: -10000px;
		top: -10000px;
	}
}

.flash-replaced .alt {
		position: absolute;
		left: -10000px;
		top: -10000px;
}

/* custom font tweaks go here */
html.flash-text-has-flash .box h2 {
	zoom: 1; /* stop ie 6 putting 3px of internal margin on our text (and pushing the embed element down when it's inserted */
}