/* 
  
  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
	[PF] Position fixed : For IE6
*/




/*****************************************************************************************
 *			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/landingpage.css");
@import url("content/page-parts.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");
@import url("components/my-red-cross.css");
@import url("components/gallaria.css");


/* page variant styles */
@import url("pages/home.css");
@import url("pages/sitemap.css");
@import url("pages/news.css");
@import url("pages/search.css");


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



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

html {
	_overflow: hidden; /* [PF] If you don't have this you get two scroll bars in IE6 */
}

body {
	text-align: center; /* center the #page element in IE5/win [cfw] */
	_height: 100%; /* [PF] If you don't have this you get two scroll bars in IE6 */
}

/*
	[PF] IE6 needs another element to create the scrolling context. 
	Note: the position: fixed item has to sit outside the #scroll-wrapper
*/
#scroll-wrapper {
	_height: 100%; 
	_width: 100%; 
	_overflow: auto; 
	_position: relative;
}

#page {
	position: relative; zoom: 1;
	z-index: 1;
	width: 960px; /* max page width to not scroll at 800x600 [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] */
	padding-top: 12px; /* we needed padding not margin to make the scroll wrapper background sit at the top of the screen in everything other than IE6, see notes on the home.css stylesheet about the scroll wrapper bg */
	padding-bottom: 12px;
	margin-bottom: 45px; /* leave room for the my red cross bar */
}


/************************
 * header, primary navigation and breadcrumb
 ************************/
 
#page #header {
	position: relative; zoom: 1;
	z-index: 200;
	padding: 15px 20px 10px 10px;
}

#page #primary-navigation {
	position: relative;
	z-index: 100;
	width: 960px; /* IE6 needs this to fill to background */
}

#page #breadcrumb {
	padding-top: 6px;
}

#page #page-controls {
	position: absolute;
	top: 62px;
	right: 0;
	width: 200px;
	text-align: right;
}

#page #page-controls ul {
	list-style-type: none;
}

#page #page-controls li {
	background: none;	
}


/************************
 * secondary navigation & content columns
 ************************/
 
/* no secondary nav */
#page #content {
	clear: both;
	padding: 10px 20px 20px 20px;
}

body.home-page #page #content {
	padding: 0;
}

/* breathe in at the left a little to make room for secondary nav */
body.has-secondary-navigation #page #content {
	float: right; display: inline;
	width: 940px;
	margin-left: -250px;
	margin-top: 0;
	padding: 10px 20px 20px 0;
}

/* push content away from space where secondary nav will be */
body.has-secondary-navigation #page #content-inner {
	padding-left: 250px;
	background: url(../images/backgrounds/bg_main.gif) 209px 0 repeat-y; /* match this up against the border on the secondary nav so that there is always a border no matter which column is taller */
}

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

#page #secondary-navigation h2 {
	margin-bottom: 20px;
	padding: 0 20px;
}


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

#page #footer {
	clear: both;
	padding: 8px 20px 20px 20px;
}

body.home-page #page #footer {
	margin-top: 20px;
	padding-top: 20px;
}

#page #footer #footer-inner {
	border-top: 1px solid #D4D4D4;
	padding-top: 12px;
}

body.home-page #page #footer #footer-inner {
	padding-top: 0;
	border: none;
}
.learn-box .box-title {
	font-size:20px;
	color:#FFF;
	margin-bottom:10px;
	padding:5px 5px 5px 7px;
	font-weight:bold;
}
.college-box .box-title {
	background-color:#cc0000;
}
.first-aid-box .box-title {
	background-color:green;
}
.learn-box a {
	padding:5px;
	display:block;
	text-decoration:none;
}
.learn-box a:hover .box-title {
	text-decoration:underline;
}


#my-red-cross {
	position: fixed;
	_position: absolute; /* [PF] IE6 does not understand position fixed and falls back to position: static by default */
	_margin-bottom: -1px; /* [PF] IE6 has problem caculating the bottom when the screen redraws sometimes leaving some extra space, so lets help it out a bit */
	zoom: 1;
	right: 0;
	bottom: 0;
	width: 100%;
	z-index: 1000;
}



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

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 75%; /* 12px BASE */
	background: #BDB7B4;
	color: #333;
}

#page {
	
}

#page-inner {

}




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

#page-title {
	clear: both;
	padding-top: 24px;
	padding-right: 280px; /* leave room for the page controls */
	padding-bottom: 24px;
	border-bottom: 1px solid #D4D4D4;
	margin-left: -1px; /* the font is slighly off in the heading so to line it up the with breadcrumbs we need this */
	zoom: 1; /* IE6 needs this to stop the content collapsing when you hover over the breadcrumbs */
}




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

#content {
	background: #FFF;
}

#content-inner {
	position: relative; /* We need this to stop IE from re-caculating the height of this when you hover over primary nav */
}


/************************
 * No sub content
 ************************/

#page #content #main {
	margin-top: 30px;
	margin-left: 15px;
}

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

body.has-secondary-navigation #page #content #main {
	margin-left: 0;
}

#content #main #main-inner {
	min-height: 530px;
	_height: 530px;
}


/************************
 * 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: -218px; /* sub content width + margin each side of sub content  */
	background: url(../images/backgrounds/bg_main.gif) 705px 0 repeat-y; /* match this up against the border on the sub column so that there is always a border no matter which column is taller */
}

body.has-sub-content-secondary-navigation #page #content #main {
	margin-left: 0;
	background-position: 490px 0;
}

/* leave room for side content to sit, it get's shifted into this space */
body.has-sub-content #content #main-inner {
	margin-right: 245px; /* sub content width + margin each side of sub content  */
}
body.has-sub-content-secondary-navigation #content #main-inner {
	margin-right: 230px; /* sub content width + margin each side of sub content  */
}

/* shift the sub content into the space left by #main-inner */
body.has-sub-content #content #sub {
	float: right; display: inline;
	width: 173px; /* + 30px padding left + 15px margin right = 260px */
	padding-left: 24px;
	margin-top: 30px;
	margin-right: 2px;
	border-left: 1px solid #D4D4D4;
	/* 
		The next two lines are to fix a bug in IE6 when you hover over the breadcrumb it makes the content disappear, it seems to be caused by the float.
		You don't actually need to float so we are removing it and then adding enough margin to make it look the same.
	*/
	_float: none;
	_margin-left: 0px;
}
body.has-sub-content-secondary-navigation  #content #sub {
	_margin-left: 15px;
}