/* 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");

/* page variant styles */
@import url("./pages/home.css");
@import url("./pages/system.css");
@import url("./pages/product.css");
@import url("./pages/contact.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: 795px; /* 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] */
}


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

#page #primary-navigation {
	position: absolute;
	top: 44px; /* just below header */
	left: 429px;
	z-index: 3;
}


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

#page #footer {
	clear: both;
	padding: 15px;
}




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

body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 93.75%; /* 15px */
	background: #000 url(../images/backgrounds/bg_body-internal.jpg) no-repeat top center;
	color: #FFF;
}

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

#page {

}

#page-inner {

}




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

#page-title {
	padding: 16px 0 15px 24px;
}

#page-title h1 {
	width: 230px;
	height: 65px;
}

#page-title h1 span {
	background: url(../images/backgrounds/bg_combined.gif) no-repeat -400px 0;
}

body.product-page #page-title h1 span {
	background-position: -650px 0;
}

body.contact-page #page-title h1 span {
	background-position: -400px -80px;
}


/* home page page title */
body.home-page #page-title {
	padding-top: 95px;
}

body.home-page #page-title h1 {
	width: 800px;
	height: 500px;
}

body.home-page #page-title h1 span {
	background: url(../images/backgrounds/bg_h1-home.jpg) no-repeat top left;
}




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

#content {
	
}


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

#content #main {

}

#content #main-inner {
	padding-left: 25px;
}

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



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


/************************
 * Feature items
 ************************/

ul#features {
	clear: both;
	margin: 20px 0;
	padding: 0;
	list-style: none;
}

ul#features li {
	float: left; display: inline;
	width: 255px;
	height: 131px;
	margin: 0 0 0 15px;
	padding: 0;
}

html.js ul#features li {
	cursor: pointer; /* only if js is enabled */
}

ul#features li.first {
	margin: 0;
}

ul#features li h2 {
	font-size: 2.3334em; /* 35px */
	color: #DEDEDE;
	font-weight: normal;
	margin: 0;
	padding: 0;
}

ul#features li h3 {
	font-size: 0.93334em; /* 14px */
	font-weight: normal;
	margin: 0 0 10px 0;
	padding: 0;
}

ul#features li .more-link {
	border-top: 1px solid #2E2E2E;
	text-align: right;
}

ul#features li .more-link a {
	font-size: 0.93334em; /* 14px */
	display: block;
	padding: 7px 0 0 0;
	color: #DEDEDE;
	text-decoration: none;
}

/* js enabled background images */
ul#features li span {
	background: url(../images/backgrounds/bg_combined.gif) no-repeat 0 -200px;
}
ul#features li.arb-hover-system span {
	background-position: 0 -350px;
}

ul#features li#product-feature-link span {
	background-position: -270px -200px;
}
#page ul#features li.arb-hover-product span {
	background-position: -270px -350px;
}

ul#features li#contact-feature-link span {
	background-position: -540px -200px;
}
#page ul#features li.arb-hover-contact span {
	background-position: -540px -350px;
}


/************************
 * Cols
 ************************/

.col-wrapper {

}

.col-wrapper .col {
	float: left; display: inline;
}


/************************
 * More Link
 ************************/
 
.more-link {

} 

.more-link a:link,
.more-link a:visited {

}
 

/************************
 * USER NOTES (message box type stuff)
 ************************/
 
.important, .success, .error {
	padding: 15px 15px 15px 60px;
	margin: 1em auto 1em 0;
	background-position: 15px 20px;
	background-repeat: no-repeat;
	-moz-border-radius: 7px;
	-webkit-border-radius: 7px;
	border-radius: 7px;
}

.important h2, .success h2, .error h2 {
	color: inherit;
	margin-top: 0;
}
.important p, .success p, .error p {
	margin: 0;
}

.important {
	color:#666600;
	background-image: url(../images/icons/ico_important.gif);
	background-color: #ffffe6;
}

.success {
	color:#427002; 
	background-image: url(../images/icons/ico_success.gif);
	background-color: #eefde5;
}

.error {
	color: #ba2025;
	background-image: url(../images/icons/ico_error.gif);
	background-color: #ffecec;
}




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