/* 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)
  
  	[sf] Sticky footer
  	[mmw] Min - Max width centred page

*/

/*****************************************************************************************
 *			Main document sections layout
 ****************************************************************************************/
html, body {
	padding: 0 7px;
	margin: 0;
	height: 99.9%; /* these need to be 100% for Mozilla to expand to the full window height when the content doesn't push it there [sf] */
	text-align: center; /* center the #page element in IE5/win [mmw] */
}

#page {
	position: relative; /* lets us position the #footer absolute relative to #page [sf] */
	min-height: 100%; /* minimum #page height for Modern Browsers [sf] */
	height: auto !important; /* make the height auto for Modern Browsers (IE doesn't do !important) [sf] */
	height: 99.9%; /* For IE, IE treats height exactly like min-height, so just give it that [sf] */
	text-align: left; /* reset the text alignment after IE5/win hack above [mmw] */
	xmin-width: 750px; /* max page width to not scroll at 800x600 [mmw] */
	xmax-width: 995px; /* max page width to not scroll at 800x600 [mmw] */
	width: 995px;
	margin: 0 auto; /* ceneter the #page element in all but IE5/win [mmw] */
	/* max and min width javascript expression for IE/win (all).  dynamically writes width value after checking browser windown width.
	   The numeric values and pixel values in the < and > constrainsts below should match the max and min width values above
	   [mmw]
	*/
	width:expression(
		((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) 
			> 1024 ? "995" : 
		(((document.compatMode && document.compatMode=='CSS1Compat') ? document.documentElement.clientWidth : document.body.clientWidth) 
			< 771 ? "743px" : "auto")
	); 
}
/* only for mac ie (it doesn't do max-min-width) [mmw] \*//*/
#page { width: 771px; }
/* end hack [mmw] */

#page #header {
	width: 100%;
	margin-bottom: 29px;
}
/* IE is messing up the header height with extra whitespace */
* html #page #header { margin-bottom: 22px; height: 160px;}

#page #content {
	padding: 0 0 7em 0; /* leave room for the #footer to sit [sf] */
	margin-left: 185px;
}

#page #secondaryNavigation {
	padding-bottom: 7em;
	width: 166px;
	position: absolute;
	top: 185px;
}

#page #footer {
	position: absolute; /* position absolutely within the #page [sf] */
	bottom: 5px !important; /* sit on the bottom of #page (either window bottom or content bottom) [sf] */
	bottom: 1px; /* For Certain IE widths, IE is funky with some calculations [sf] */
}
/* only mac IE: position absolute messes with it [sf] \*//*
#page #footer { position: static; }
*//*end hack [sf]*/

/* only show jump to content etc. shortcuts when there's no CSS */
#page #jumpLinks {
	display: none;
}




/*****************************************************************************************
 *			Header layout / styles
 ****************************************************************************************/

#header {
	position: relative;
}

#header #logo {
	padding-top: 14px;
	float: left;
}

#header #searchBox {
	padding: 19px 0;
	float: right; display: inline;
	line-height: 1em;
}
#header #searchBox form {
	margin: 0;
	padding: 0;
}
#header #searchBox input {
	margin: 0;
	display: inline;
	vertical-align: middle;
}
#header #searchBox #search {
	height: 13px;
	padding: 1px 2px;
	width: 150px;
}

#header #sectionHeader {
	clear: both;
	padding-top: 14px;
}

body.homeSection #header #sectionHeader h1 {
	display: block;
	margin: 0;
	height: 199px;
	width: 995px;
	line-height: 15px;
	vertical-align: middle;
	zoom: 1; /* make IE make the entire 'a' clickable */
}

body.homeSection #header #sectionHeader h1 span {
	background: url(../images/headers/hed_homepage.jpg) top left no-repeat;
}

#header #sectionHeader #textIMG {
	position: absolute;
	bottom: 0;
	left: 0;
	z-index: 1;
}

#header #sectionHeader #repeatingIMG {
	width: 99%; /* stop IE/win 1px rounding error causing 1px of this to appear to the right of #graphicalIMG */
}

#header #sectionHeader #graphicalIMG {
	position: absolute;
	bottom: 0;
	right: 0;
}

/* ie/win seems to get this wrong by 1px... */
* html #header #sectionHeader #graphicalIMG,
* html #header #sectionHeader #textIMG {
	bottom: -1px;
}


/************************
 * PRIMARY NAVIGATION LAYOUT / STYLES
 ************************/
 #header #primaryNavigation {
	float: right;
	clear: right;
}

#header #primaryNavigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
#header #primaryNavigation li {
	float: left;
}
#header #primaryNavigation li a {
	display: block;
	color: white;
	margin: 0;
	height: 15px;
	line-height: 15px;
	vertical-align: middle;
	zoom: 1; /* make IE make the entire 'a' clickable */
}

/* HOME */
#primaryNavigation ul li#home-section-link a {
	width: 33px;
}
#primaryNavigation ul li#home-section-link a span {
	background:url(../images/buttons/nav/nav_home.gif) top left no-repeat;
}
/* rollover and active */
#primaryNavigation ul li#home-section-link a:hover span,
#primaryNavigation ul li#home-section-link a.active span {
	background:url(../images/buttons/nav/nav_home_over.gif) top left no-repeat;
}

/* ABOUT US */
#primaryNavigation ul li#aboutus-section-link a {
	width: 58px;
}
#primaryNavigation ul li#aboutus-section-link a span {
	background:url(../images/buttons/nav/nav_aboutus.gif) top left no-repeat;
}
/* rollover and active */
#primaryNavigation ul li#aboutus-section-link a:hover span,
#primaryNavigation ul li#aboutus-section-link a.active span {
	background:url(../images/buttons/nav/nav_aboutus_over.gif) top left no-repeat;
}

/* OUR PRODUCTS */
#primaryNavigation ul li#products-section-link a {
	width: 85px;
}
#primaryNavigation ul li#products-section-link a span {
	background:url(../images/buttons/nav/nav_ourproducts.gif) top left no-repeat;
}
/* rollover and active */
#primaryNavigation ul li#products-section-link a:hover span,
#primaryNavigation ul li#products-section-link a.active span {
	background:url(../images/buttons/nav/nav_ourproducts_over.gif) top left no-repeat;
}

/* TECHNICAL INFO */
#primaryNavigation ul li#techinfo-section-link a {
	width: 129px;
}
#primaryNavigation ul li#techinfo-section-link a span {
	background:url(../images/buttons/nav/nav_technical.gif) top left no-repeat;
}
/* rollover and active */
#primaryNavigation ul li#techinfo-section-link a:hover span,
#primaryNavigation ul li#techinfo-section-link a.active span {
	background:url(../images/buttons/nav/nav_technical_over.gif) top left no-repeat;
}

/* XRAYS AT WORK */
#primaryNavigation ul li#xraysAtWork-section-link a {
	width: 92px;
}
#primaryNavigation ul li#xraysAtWork-section-link a span {
	background:url(../images/buttons/nav/nav_xrays.gif) top left no-repeat;
}
/* rollover and active */
#primaryNavigation ul li#xraysAtWork-section-link a:hover span,
#primaryNavigation ul li#xraysAtWork-section-link a.active span {
	background:url(../images/buttons/nav/nav_xrays_over.gif) top left no-repeat;
}


/* NEWS */
#primaryNavigation ul li#newsAndEvents-section-link a {
	width: 88px;
}
#primaryNavigation ul li#newsAndEvents-section-link a span {
	background:url(../images/buttons/nav/nav_newsevents.gif) top left no-repeat;
}
/* rollover and active */
#primaryNavigation ul li#newsAndEvents-section-link a:hover span,
#primaryNavigation ul li#newsAndEvents-section-link a.active span {
	background:url(../images/buttons/nav/nav_newsevents_over.gif) top left no-repeat;
}


/* CONTACT */
#primaryNavigation ul li#contact-section-link a {
	width: 67px;
}
#primaryNavigation ul li#contact-section-link a span {
	background:url(../images/buttons/nav/nav_contactus.gif) top left no-repeat;
}
/* rollover and active */
#primaryNavigation ul li#contact-section-link a:hover span,
#primaryNavigation ul li#contact-section-link a.active span {
	background:url(../images/buttons/nav/nav_contactus_over.gif) top left no-repeat;
}

/*****************************************************************************************
 *			Footer layout / styles
 ****************************************************************************************/

#footer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 65%;
	border-top: 1px solid #050505;
	padding: 7px 0;
	width: 100%;
}

#footer a {
	color: #64A700;
	text-decoration: underline;
}
#footer a:hover {
	text-decoration: none;
}

#footer #copyright {
	float: left;
	width: 186px;
}

#footer .linksList {
	float: left;
	list-style: none;
	margin: 0 0 0 19px;
	padding: 0;
	width: 300px;
}

#footer .linksList li {
	width: 45%;
	float: left;
}

#footer #madeByAreeba {
	float: right;
}

#footer #madeByAreeba a {
	text-decoration: none;
}
#footer #madeByAreeba span {
	vertical-align: middle;
	text-decoration: underline;
}
#footer #madeByAreeba img {
	vertical-align: middle;
}




/*****************************************************************************************
 *			Secondary Navigation layout / styles
 ****************************************************************************************/

#secondaryNavigation {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 70%;
}

#secondaryNavigation ul, #secondaryNavigation li {
	list-style: none;
	margin: 0;
	padding: 0;
}

#secondaryNavigation ul ul {
	border-bottom: 1px solid #CDCDCD;
}

/* no border on bottom of submenus */
#secondaryNavigation ul ul ul {
	border-bottom: none;
}

#secondaryNavigation li li {
	border-top: 1px solid #CDCDCD;
}

#secondaryNavigation li li.first {
	border-top: none;
}

#secondaryNavigation ul li li a {
	display: block;
	margin: 0;
	padding: 5px 10px;
	color: #030303;
	text-decoration: none;
}

#secondaryNavigation ul li li li a {
	padding-left: 17px;
	background: url(../images/bullets/bullet_secondary_nav.gif) 10px center no-repeat;
}

/* hide all menus and top level links by default */
#secondaryNavigation ul li, #secondaryNavigation ul li a {
	display: none;
}

/* show the current subsection menu */
.aboutUsSection #secondaryNavigation li.aboutUsSection, .aboutUsSection #secondaryNavigation li.aboutUsSection li,
.productsSection #secondaryNavigation li.productsSection, .productsSection #secondaryNavigation li.productsSection li,
.techinfoSection  #secondaryNavigation li.techInfoSection  , .techinfoSection  #secondaryNavigation li.techInfoSection li,
.xraysAtWorkSection #secondaryNavigation li.xraysAtWorkSection, .xraysAtWorkSection #secondaryNavigation li.xraysAtWorkSection li,
.newsAndEventsSection #secondaryNavigation li.newsAndEventsSection, .newsAndEventsSection #secondaryNavigation li.newsAndEventsSection li,
.contactSection #secondaryNavigation li.contactSection, .contactSection #secondaryNavigation li.contactSection li,
.floatingSection #secondaryNavigation li.floatingSection, .floatingSection #secondaryNavigation li.floatingSection li {
	display: block;
}

/* fancy show/hide behaviour when javascript is enabled */
#secondaryNavigation ul.menusExpanded ul ul, 
#secondaryNavigation ul.menusExpanded ul ul li, 
#secondaryNavigation ul.menusExpanded ul ul li a {
 	display: none;
}

#page #secondaryNavigation ul.menusExpanded ul li.expanded ul,
#page #secondaryNavigation ul.menusExpanded ul li.expanded,
#page #secondaryNavigation ul.menusExpanded ul li.expanded li, 
#page #secondaryNavigation ul.menusExpanded ul li.expanded li a {
	display: block;
}

#secondaryNavigation ul.menusExpanded li li.active a, #secondaryNavigation ul li li a:hover {
	background-color: #EAF6C4;
}

/* IE/win fix */
@media all {
	* html #secondaryNavigation ul li {height: 0; margin-bottom: -3px;}
	* html #secondaryNavigation ul {height: 0; padding-bottom: 3px;}
}


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

#content {
	position: relative;
}

/************************
 * CALLOUT BOXES
 ************************/
.hasSidebox #content #mainTextContent {
	margin-right: 213px;
}

.hasArticleImage #content #mainTextContent {
	margin-right: 249px;
}

#content #sideboxes, #content #articleImage {
	position: absolute;
	top: 45px; /* guesstimate to align with top of first paragraph */
	right: 0;
}



/*****************************************************************************************
 *		 	Content styles for standard (X)HTML elements
 ****************************************************************************************/

#content {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 73%;
}

/************************
 * TEXT STYLES
 ************************/
 /* headings */
#content h1 {
	font-size: 260%;
	margin: 0 0 0.34em 0;
}
#content h2 {
	font-size: 140%;
	margin: 0.83em 0 0.42em 0;
}
#content h2.blockTitle {
	font-size: 215%;
	margin-top: 0;
	margin-bottom: 0.5em;
}
#content h3 {
	font-size: 120%;
	margin: 1em 0 0.5em 0;
}
#content h4 {
	font-size: 110%;
	margin: 1.33em 0 0.67em 0;
}
#content h5 {
	font-size: 100%;
	margin: 1.67em 0 .84em 0;
}
#content h6 {
	font-size: 100%;
	margin: 2.33em 0 1.17em 0;
}
/* text blocks */
#content p {
	line-height: 1.3; /*Adjust this property for optimum readability. Remeber - wider content may require a larger line height.*/
	margin-right: 10px;
}
#content blockquote {
	font-weight: bold;
	margin-left: 20px;
}
#content pre {
	margin: 1em 0 1em 20px;
}
/* lists */
#content ul {
	margin-top: 1em;
	margin-bottom: 1em;
}
#content ol {
	margin-top: 1em;
	margin-bottom: 1em;
}
#content li {
	padding-top: 0;
	padding-bottom: 0;
}
/* inline text styles */
#content i {
	letter-spacing: 0.08em;
	margin-right: 1px;
}
#content a {
	color: #64A700;
	text-decoration: underline;
}
#content a:hover {
	text-decoration: none;
}

/************************
 * TABLE STYLES
 ************************/
#content table {
	margin: 0;
	padding: 0;
	width: 100%;
	border-collapse: collapse;
}
#content caption {
	font-weight: bold;
	text-align:left;
	padding-top: 3px;
	padding-bottom: 3px;
	padding-right: 5px;
}
#content th {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
	text-align: left;
	background-color: #666;
	border: 1px solid #555;
	color: #fff;
}
#content td {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
	border: 1px solid #ccc;
}

#content .nonContentTable table, #content .nonContentTable td {
	border: none;
}


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

/************************
 * More Link
 ************************/
 /*ClearFix for Mozilla browsers*/
html > body .moreLink:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.moreLink {display: inline-block;}
/* Hides from IE-mac \*/
* html .moreLink {height: 1%;}
.moreLink {display: block;}
/* End hide from IE-mac */

#content .moreLink a {
 	display: block;
	float: left;
	height: 20px;
	padding-left: 36px;
	padding-top: 4px;
	background: url(../images/icons/ico_more_link.gif) center left no-repeat;
	margin-top: 21px;
	font-size: 95%;
}
 
/************************
 * USER NOTES (message box type stuff)
 ************************/
#content .important {
	color:#725A00;
	background: url(../images/icons/ico_note.gif) no-repeat 20px center;
	background-color: #FFFAE6;
	padding: 20px 20px 20px 88px;
	border: 1px solid #FAC71E;
	margin: 1em 0;
}
#content .success {
	color:#2d8228; 
	background: url(../images/icons/ico_success.gif) no-repeat 20px center;
	background-color: #f4fcf4;
	padding: 20px 20px 20px 88px;
	border: 1px solid #51cd49;
	margin: 1em 0;
}
#content .error {
	color: #FF0000;
	background: url(../images/icons/ico_alert.gif) no-repeat 20px center;
	background-color: #fff1f1;
	padding: 20px 20px 20px 88px;
	border: 1px solid #f9221d;
	margin: 1em 0;
}
		
/************************
 * article listings
 ************************/

#content .articleList {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#content .articleList li {
	margin: 21px 0;
	padding: 0;
}

#content .articleList li.first {
	margin-top: 0;
}

#content .articleList .thumbnail {
	float: left;
}

#content .articleList .text {
	margin-left: 87px;
}

#content .articleList .text h3 {
	font-size: 105%;
	margin: 0;
}

#content .articleList .text p {
	margin: 0;
}

#content .articleList .moreLink {
	margin-left: 87px;
}

#content .articleList .moreLink a {
	background-image: none;
	padding: 0;
	margin-top: 14px;
}

/************************
 * topic listings
 ************************/

#content .topicList {
	list-style-type: none;
	margin: 1.5em 0;
	padding: 0;
	width: 90%;
}

#content .topicList li {
	margin: 0;
	padding: 0 0 21px 55px;
	background: url(../images/icons/ico_topicList_bullet.gif) top left no-repeat;
}

#content .topicList h2 {
	font-size: 110%;
	margin: 0.3em 0;
}

#content .topicList p {
	margin: 0;
}

#content .topicList .moreLink a {
	background-image: none;
	padding: 0;
	margin-top: 14px;
}

/************************
 *  sidebox
 ************************/
#content #sideboxes .sidebox {
	background: url(../images/backgrounds/bg_sidebox_top.gif) top left no-repeat;
	padding-top: 4px;
	width: 185px;
}

#content #sideboxes .sideboxInnerOne {
	background: url(../images/backgrounds/bg_sidebox_bottom.gif) bottom left no-repeat;
	padding-bottom: 3px;
}

#content #sideboxes .sideboxInnerTwo {
	background: url(../images/backgrounds/bg_sidebox_middle.gif) repeat-y;
	padding: 7px;
}

#content #sideboxes .sidebox h3 {
	margin-top: 0;
}

#content #sideboxes .sidebox h4 {
	margin-bottom: 0.2em;
}

#content #sideboxes .sidebox p {
	margin-top: 0;
	line-height: 130%;
}


/************************
 * Download Links box
 ************************/

#content .sidebox ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#content #sideboxes  .downloadLinks {
	margin: 1em 0;
	font-size: 83%;
}

/************************
 * Gallery Link
 ************************/
#content .sidebox #galleryLink {
	text-align: center;
}

/************************
 * Artice Image
 ************************/

#content #articleImage .caption {
	margin-top: 1em;
}




/*****************************************************************************************
 *			Home page styling
 ****************************************************************************************/
.homeSection #page #content {
	font-size: 70%;
	margin: 0;
}

/************************
 * SECTION COLUMNS
 ************************/
.homeSection #content #aboutUs, .homeSection #content #xraysAtWork {
	float: left;
	display: inline;
	margin-right: 1.8%;
	width: 38.2%;
}

.homeSection #content #latestNews {
	float: left;
	display: inline;
	width: 19%;
}



/*****************************************************************************************
 *			Contact page styling
 ****************************************************************************************/
.contactSection #content #contactDetails {
	float: right;
	width: 29%;
}
.contactSection #content #contactForm {
	float: right;
	width: 69%;
}

.contactSection #content #contactDetails dl {

}
.contactSection #content #contactDetails dt {
	font-weight: bold;
}
.contactSection #content #contactDetails dd {
	margin-left: 21px;
}

/************************
 * FORM CONTROL STYLES
 ************************/
#content fieldset {
	border: none;
	height: 1%;
}

#content .control {
	margin-bottom: 7px;
	float: left; display: inline;
	clear: left;
	width: 500px;
}

#content .control label {
	display: inline; float: left; 
	width: 75px;
	text-align: right;
	padding: 0 28px 0 0;
	margin: 0;
	font-weight: bold;
}

#content .required label {
	width: 103px;
	padding: 0;
}

#content .required label img {
	padding-left: 20px;
}

#content .control input {
	float: left;
	height: 1%;
	width: 300px;
}

#content .control textarea {
	float: left;
	margin: 0;
	width: 300px;
}

#content .button input {
	margin-left: 103px;
	width: auto;
}

#content .radio label {
	text-align: left;
	margin-left: 7px;
	width: auto;
	font-weight: normal;
}

/* nested controls */
#content .control .control {
	margin-left: 107px;
	margin-top: 3px;
	margin-bottom: 0;
}


/*****************************************************************************************
 *			News and Events styling
 ****************************************************************************************/
/************************
 * FRONT PAGE LAYOUT
 ************************/
#content #news {
	float: left;
	width: 48.75%;
}

#content #events {
	float: right;
	width: 48.75%
}

#content #news h3, #content #events h3 {
	margin-top: 0;
}


/*****************************************************************************************
 *			Sitemap styling
 ****************************************************************************************/
body.sitemapSection .left-column {
	float: left;
	width: 45%;
}

body.sitemapSection .right-column {
	float: right;
	width: 45%;
}

body.sitemapSection .sitemap-content {
	clear: both; 
}



/************************
 * LATEST NEWS
 ************************/
#content ul.newsList {
	margin: 0;
	padding: 0;
	list-style: none;
}

#content ul.newsList li {
	margin: 0 0 10px 0;
	padding: 10px 0 0 0;
	border-top: 1px solid #CBCBCB;
}

#content ul.newsList li.first {
	padding-top: 0;
	border-top: none;
}

#content ul.newsList .title h3 {
	font-size: 100%;
	font-weight: normal;
	margin: 0;
}

#content ul.newsList .date {
	margin-top: 2px;
}

#content #mediaContactDetails {
	margin-top: 2em;
}

#content #mediaContactDetails dt {
	font-weight: bold;
	float: left;
}
#content #mediaContactDetails dd {
	margin-bottom: 0.3em;
}




/*****************************************************************************************
 *			Miscellaneous generic styles
 ****************************************************************************************/
/* fix for messed up IE5/win font sizing */
table {
 	font-size: 100%;
}

/* stop borders on images used as links */
img {
	border: none;
}

/************************
 * footnotes for display during printing only
 ************************/
 /* only mac ie \*//*/
 .printOnly { display: none; }
/* end hack */
/* ie/mac doesn't understand this */
@media screen {
	.printOnly {
	  display: none;
	}
}

/************************
 * CLEARFIX, a class to clear floated elements
 ************************/
/*ClearFix for Mozilla browsers*/
html > body .clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

/************************
 * sIFR
 ************************/
/* These are standard sIFR styles... do not modify */
@media screen {
	.sIFR-flash {
		visibility: visible !important;
		margin: 0;
	}
	
	.sIFR-replaced {
		visibility: visible !important;
	}
	
	span.sIFR-alternate {
		position: absolute;
		left: 0;
		top: 0;
		width: 0;
		height: 0;
		display: block;
		overflow: hidden;
	}
}

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