body
{
	background:#FFF;
	color:#666;
	font-family:Arial,Helvetica,sans-serif;
	font-size:62.5%;/* 10px */
	margin: 0;
	padding:2px 10px;
}

/* links */
a {color:#039;text-decoration:none;}
a:hover {color:#039;text-decoration:underline;}
a img {border: 0;}

/* headers */
h1, .heading1 {color: #808080;margin-top: 20px;margin-bottom: 20px; font-size: 2em; font-weight:bold; }
h2, .heading2 {color: #808080;margin-top: 0;margin-bottom: 0; font-size: 1.2em; font-weight:bold; }
h3, .heading3 {color: #003366;margin-top: 0;margin-bottom: 2px; font-size: 1.1em; font-weight:bold; }  

/* helper classes */
.clearfix:after {content:".";display:block;position:relative;height:0;clear:both;visibility:hidden}
.clearfix {display:inline-block;}
.hide { position:absolute;left:-999px;width: 99px; }

/* global wrapper */
#wrapper {width:740px;margin:0 auto;}

/* header */
#banner 
{ 
	background:#036;
	text-align: right;
	width: 100%;
}
#banner #datacomPeopleLogo {float:left;padding:10px;color:#fff;font-size:2em;}
#banner a#datacomGroupLogo 
{
	color: #FFF;
	font-size: 1.1em;
	padding-top: 3px;
	float: right;
	margin: 10px;
}

#topNav 
{
	border: 1px solid #CCC;
	background: #E7E3E7;
	margin: 5px 0;
	width: 738px;
}
#topNav ul 
{
	float: left;
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 60%;
}
#topNav li 
{
	float: left;
	display: inline;
	margin: 0;
	white-space: nowrap;
	border-right: 1px solid #ccc;
}
#topNav a 
{
	color: #333;	/* TODO: check colour */
	font-size: 1.1em;
	padding: 3px 8px;	/* TODO: check spacing values against design */
	float: left;
	text-decoration: none;
}
#topNav li > a {padding:4px 8px 5px 8px;/* TODO: check spacing values against design */}
#topNav a:hover {color:#FFF;background:#999;}
#topNav li.selected {background-color:#666;}
#topNav li.selected a {color:#FFF;}
#topNav li.selected a:hover {color:#FFF;background:#666;}
ul#topNavUtility {float:right;width:39%;}
#topNavUtility li 
{
	float: right;
	border-left: 1px solid #ccc;
	border-right: none;
}
#topNavUtility li.icon a {padding:0;}
#topNavUtility li.icon > a {padding:.15em 0;}

/* content */
#contentWrapper {font-size:1.1em;border:1px solid #FFF;}

/* left sidebar navigation */
#leftNav {
	overflow:hidden;
}
#leftNav, #leftSideBar {width:111px;position:absolute;} /*IE - requires JS to fix the height */
#contentWrapper > #leftNav, #contentWrapper > #leftSideBar {width:111px;float:left;position:absolute;} /*float:left works for FF*/
#leftNav ul {list-style-type:none;margin:0;padding:0;}
#leftNav li {border-top:1px dashed #999;margin:0;padding:0;}
#leftNav li.first {border-top:0;}
#leftNav li.last {border-bottom:1px dashed #999;}
#leftNav a 
{
	display: block;
	width: 103px;
	margin: 0;
	padding:3px 4px;
	color: #666;
	background: #FFF;
	text-decoration: none;
}

#leftNav li.selected a, #leftNav a:hover {color:#FFF;background:#036;}
#leftNav li.selected li a {color:#666;background:#E5E3E6;padding-left:10px;}
#leftNav li.selected li a:hover {color:#FFF;background:#999;}
#leftNav li.selected li.selected a {color:#FFF;background:#999;}
#leftNav li.selected li.selected li a {color:#FFF;background:#666;padding-left:18px;width:100px;}
#leftNav li.selected li.selected li.selected a {color:#FFF;background:#555;}

/* homepage left side bar */
#homepage #contentWrapper {position: relative;/*hack*/}
#homepage #leftSideBar 
{
	position: absolute;/*hack*/
	padding: 5px;
	width: 100px;
	left: 0;
	top: 0;
	line-height:1em;
}

#homepage #leftSideBar p {margin:0 0 1em 0;}

#content 
{
	margin-left: 112px;	/* space for left menu sidebar */
	font-size: 1.1em;
	color: #666;
}


#content #bannerImage * {margin:0;padding:0;}

#footer 
{
	text-align:right;
	background:#E7E3E7;
	border:1px solid #CCC;
	border-top: 0; /* redundant shared border with contentWrapper */
}

#footer ul {margin:0;padding:0;list-style-type:none;}
#footer li {display:inline;}

#footer a
{
	color:#666;
	font-size:1em;
	text-decoration:none;
	padding:0 5px;
	white-space:nowrap;
	border-left: 1px solid #ccc;
}

#footer a:hover {text-decoration:underline;}
#footer hr, #header hr {display:none;}

#contentColumn {
	float: left;
	width: 322px;
	padding: 10px;
	overflow:hidden;
}

.promoOnly #contentColumn,
.homepageCenterOnly #contentColumn,
.homepageRightOnly #contentColumn {width:454px;}

#rightColumn {
	float: right;
	width: 142px;
	color: #000;
	overflow:hidden;
}
#centerColumn {
	width: 142px;
	float: left;
	color: #FFF;
	overflow:hidden;
}
#centerColumn p, #rightColumn p {margin: 10px;}
#centerColumn img, #rightColumn img { margin: 0; }
#contentColumn h1 {margin-top: 0;}

/* The background bars (stripes of vertical colour) are created using the background
 * image technique. These definitions define which image to use.
 */
#general #contentWrapper {background:#FFF url(/images/background_general.gif) repeat-y 1px 0;
  border-color:#ccc;
  border-style:solid;
  border-width:1px;

}
#homepage #contentWrapper {background:#FFF url(/images/background_homepage.gif) repeat-y 0 0;}
#general #wrapper > #contentWrapper {
  background-position:0 0;
}
#homepage #content {background:url(/images/background_homepage_multicol.gif) repeat-y top right;}
#general #content {background:url(/images/background_default_multicol.gif) repeat-y top right;}
.paySystems#general #content {background:url(/images/background_pay_multicol.gif) repeat-y top right;}
.humanResources#general #content {background:url(/images/background_hr_multicol.gif) repeat-y top right;}

/* disappearing columns */
.promoOnly {background:none!important;}
.homepageCenterOnly {background:url(/images/background_hp_center_only.gif) repeat-y top right !important;}
.homepageRightOnly {background:url(/images/background_hp_right_only.gif) repeat-y top right !important;}

#homepage .bodyOnly {background: #fff !important;}
#homepage .bodyOnly #contentColumn { width: auto; }

#general .promoOnly #centerColumn, #homepage .promoOnly #rightColumn { width: 142px; color: #333; }
.homepageCenterOnly #contentColumn,
.homepageRightOnly #contentColumn,
#general .promoOnly #contentColumn { width: 464px;}
#general .bodyOnly {background: #fff !important;}
#general .bodyOnly #contentColumn { width: 600px; }

/* left nav sub-menu text styles */
#leftNavText p {
	color: #999;
	margin: 0;
	padding: 5px 5px 0 5px;	
}

/* error page content takes full width */
#error #content {
	padding: 10px;
	margin: 0 100px;	
}