/* GENERAL */



.bodycopy
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;	
	}

BODY {
	margin-top: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;	
	text-align:center;
}

form {
	margin-top: 0px;
	margin-bottom: 0px;
}

input {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;	
	background-color: #FFFFFF;	
	}

textarea {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;	
	background-color: #FFFFFF;	
	}

td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
}

.menu {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
}
a.menu, a.menu:link, a.menu:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px; 
	color: #000000;
	text-decoration: none; 
}
a.menu:active, a.menu:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration: none; 
}
.parent {
	padding-left:15px; 
	padding-right:15px; 
	padding-top:2px; 
	padding-bottom:2px;
	line-height: 17px;
	text-decoration: none;
	clip: rect(0px 110px 17px 0px);
	visibility: visible;
	position:relative;
	line-height : -2px;
}

P {
	margin-top: 0px;
	margin-bottom: 15px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;	
}
A, A:link, A:active {
	color: #3300FF;
	text-decoration: none; 
}
A:visited {
	color: #3300FF;
	text-decoration: none; 
}
A:hover {
	color: #3300FF;
	text-decoration: underline; 
}

h1 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color: #003366;
	margin-top: 0px;
	margin-bottom: 0px;
}

h2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	color: #000000;
	margin-top: 0px;
	margin-bottom: 0px;
}

h3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	color: 808080;
	margin-top: 0px;
	margin-bottom: 0px;
}
.heading4 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #666666;
	margin-top: 5px;
	margin-bottom: 5px;
}

.heading3 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 20px;
	font-weight: bold;
	color : 003366;
	margin-top: 5px;
	margin-bottom: 5px;
}

.greytext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #999999;
}
.greydarktext {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
}
.bannerwhite {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 14px;
	color: #ffffff;
}
a.bannerwhite, a.bannerwhite:link, a.bannerwhite:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 14px;
	color: #ffffff;
	text-decoration: none; 
}
a.bannerwhite:active, a.bannerwhite:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 14px;
	color: #ffffff;
	text-decoration: underline; 
}
.copybg {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	color: #666666;
}
.copysm {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
}
a.copysm, a.copysm:link, a.copysm:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration:none;
}
a.copysm:active, a.copysm:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	text-decoration:underline;
}

.copyright {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
}
a.copyright, a.copyright:link, a.copyright:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration:none;
}
a.copyright:active, a.copyright:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #666666;
	text-decoration:underline;
}

.caviat {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8px;
	color: #999999;
}
a.caviat, a.caviat:link, a.caviat:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8px;
	color: #999999;
	text-decoration:none;
}
a.caviat:active, a.caviat:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 8px;
	color: #999999;
	text-decoration:underline;
}

.bannerblack {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
}
a.bannerblack, a.bannerblack:link, a.bannerblack:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 14px;
	color: #000000;
	text-decoration: none; 
}
a.bannerblack:active, a.bannerblack:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 14px;
	color: #000000;
	text-decoration: underline; 
}


.caviatwhite {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #ffffff;
}

P {
	margin-top: 5px;
	margin-bottom: 10px;
}
A, A:link, A:active {
	color: #003399;
	text-decoration: none; 
}
A:visited {
	color: #003399;
	text-decoration: none; 
}
A:hover {
	color: #003399;
	text-decoration: underline; 
}

.leftmenu {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
}
a.leftmenu, a.leftmenu:link, a.leftmenu:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px; 
	color: #666666;
	text-decoration: none; 
}


.bannerBlue
{
	background-color: #003366;
	}
	
.navBlue
{
	background-color: #003366;
	}

.navBackground
{
	background-color: #E7E3E7;
	}



td.pollTitle
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	background-color: #CCCCCC;
	text-decoration: none;	
	}


.a.pollTitle, a.pollTitle:link, a.pollTitle:visited
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	background-color: #CCCCCC;
	text-decoration: none;	
	font-weight : bold;
	}
	
.a.pollTitle:Hover
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	background-color: #CCCCCC;
	text-decoration: underline;	
	font-weight : bold;
	}
	
	a.pollTitle:visited:Hover
{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	background-color: #CCCCCC;
	text-decoration: underline;	
	font-weight : bold;
	}


a.leftmenu:active, a.leftmenu:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
	
	text-decoration: none;
}
.parentleftmenu {
	padding-left:4px; 
	padding-right:4px; 
	padding-top:3px; 
	padding-bottom:3px;
	width:111px; 
	text-decoration: none;
	clip: rect(0px 111px 21px 0px);
	visibility: visible;
	position:relative;
	line-height : -5px;

}

.parentleftmenuBlue {
	padding-left:4px; 
	padding-right:4px; 
	padding-top:3px; 
	padding-bottom:3px;
	width:111px; 
	text-decoration: none;
	clip: rect(0px 111px 21px 0px);
	visibility: visible;
	position:relative;
	line-height : -5px;
	background-color: #003366;
}

.parentleftmenuLBlue {
	padding-left:4px; 
	padding-right:4px; 
	padding-top:3px; 
	padding-bottom:3px;
	width:111px; 
	text-decoration: none;
	clip: rect(0px 111px 21px 0px);
	visibility: visible;
	position:relative;
	line-height : -5px;
	background-color: #E5E3E6;
}



.banner {
	background-image: url('../images/banner.gif');
	width:622px;
	height:117px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #ffffff;
	background-position: right;
	background-color: #ffffff;
	background-repeat: no-repeat;
}
.menuline {
	background-image: url('../images/horizline.gif');
	background-repeat: repeat-x;
}
.bodyindent {
	font-size: 12px; 
	font-family: Arial, Helvetica, sans-serif;
	color: #666666;
	padding-left: 40px;
}

input.login {
	font-size: 11px;
	font-family: Arial, Helvetica, sans-serif;
	color: #000000;
	background-color: #FFFFFF;	
	}

td.introtext {
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	background-color: #003366;
	padding: 15px 10px 15px 10px;
}
.horline {
	background-color: #999999;
	height: 1px;
	width: 100%;
}
a.quicklink, a.quicklink:link, a.quicklink:visited {
	font-size: 12px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
   color: #003399;
   text-decoration: none;
	padding-bottom: 5px;
	padding-top: 5px;
}
a.quicklink:active, a.quicklink:hover {
	font-size: 12px;
	font-weight: bold;
	font-family: Arial, Helvetica, sans-serif;
	color: #003399;
	text-decoration: underline;
	padding-bottom: 5px;
	padding-top: 5px;
}
.border {
	background-color: #cccccc;
}


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: #003366;margin-top: 30px;margin-bottom: 10px; font-size: 1.7em; 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; } 
h4, heading4 {color: #666666;margin-top: 5;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;
	*width:740px;
}
#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 #CCC;}

/* 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: 111px;
	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 #leftNav
{
	position: absolute;/*hack*/
	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: 295px;
	*width:325px;/*ie7 specific*/
	padding: 17px 10px 10px 20px;
	overflow:hidden;
	
}

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


#rightColumn 
{
	width: 130px;
	*width:133px;
	color: #000;
	overflow: hidden;
	margin: 10px 0px;
	padding-left:3px;
	padding-right:3px;
	*padding-right:0px;
	margin-left:5px;
	float:left;
}

#centerColumn {
	width: 148px;
	float: left;
	color: #FFF;
	overflow:hidden;
	margin:10px 5px;
}

#centerColumn img, #rightColumn img { margin: 0; }
#homepage #centerColumn{}
#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;}
#homepage #contentWrapper {background:#FFFFFF url(/images/background_general.gif) repeat-y scroll 1px 0pt;}
#general #wrapper > #contentWrapper {background-position: 0 0;}
#homepage #content {width:627px}
#general #content {width:627px}
.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:url(/images/background_promo_only.gif) repeat-y top right !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;}
#wrapper{text-align:left;}
#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; }

.centerTitle,.promoTitle
{
	background-color:#E7E3E7;
	border:1px solid #ccc;
	padding:0px 2px 0 2px;
	margin:5 0px 5px 0px;
	color:#666;
	font-size:12px;
}

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

.parent{clip:rect(0px 110px 17px 0px);line-height:17px;line-height:-2px;padding-bottom:2px;padding-left:15px;padding-right:15px;padding-top:2px;position:relative;text-decoration:none;visibility:visible;}
.parentleftmenu{background:url('../images/horizline.gif') repeat-x bottom;clip:rect(0px 111px 21px 0px);line-height:-5px;padding:3px 4px 3px 4px;position:relative;text-decoration:none;visibility:visible;width:111px;}
.parentleftmenuBlue{background:#036 url('../images/horizline.gif') repeat-x bottom;clip:rect(0px 111px 21px 0px);line-height:-5px;padding:3px 4px 3px 4px;position:relative;text-decoration:none;visibility:visible;width:111px;}
.parentleftmenuLBlue{background:#E5E3E6 url('../images/horizline.gif') repeat-x bottom;clip:rect(0px 111px 21px 0px);line-height:-5px;padding:3px 4px 3px 4px;position:relative;text-decoration:none;visibility:visible;width:111px;}

a.leftmenu,a.leftmenu:link,a.leftmenu:visited{color:#666;font-size:11px;text-decoration:none;}
a.leftmenu:active,a.leftmenu:hover{text-decoration:none;}
a.leftmenuLB,a.leftmenuLB:link,a.leftmenuLB:visited{color:#036;font-size:11px;text-decoration:none;}
a.leftmenuWhite,a.leftmenuWhite:link,a.leftmenuWhite:visited{color:#FFF;font-size:11px;text-decoration:none;}