/* CSS Document for www.hrcharter.com */
/* James Addicott - September 2006 */

/* ---- Reset Basic Styles ---- */

body, p, h1, h2, h3, h4, h5, h6, img, a, address, ul, li, form, label {
margin: 0;
padding: 0;
border: 0;
}


/* ---- General Typography ---- */

body {
font-family: Arial, Helvetica, sans-serif;
font-size: medium;
}

p, h1, h2, h3, h4, h5, h6, address { line-height: 1.5em; margin: 1em 0; color: #333333; }
p, address, label { font-size: 0.75em; font-style: normal; }
h1 { font-size: 1.2em; }
h2 { font-size: 1em; background-color: #fafafa; border-bottom: 1px solid #cccccc; }
h3 { font-size: 0.9em;}
h4 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.70em; color: #4d4d4d; font-weight: normal; text-transform: uppercase; letter-spacing: 0.1em; border-bottom: 1px solid #aaaaaa; }
em, strong { font-size: inherit; font-weight: bold; font-style: normal; }
a:link, a:visited, a:hover, a:active { color: #333333; }
a:hover { color: #000000; }

/* ---- General Page Layout ---- */

body {
text-align: center;
background-color: #ffffff;
border-top: 4px solid #336699;
}

#pageWrapper {
width: 840px;
margin: 10px auto;
text-align: left;
background-color: #ffffff;
}

#pageHeader {
width: 840px;
margin: 0 0 20px 0;
}

#mainContent {
float: left;
margin: 0 0 20px 0;
padding: 0 20px 40px 20px;
border-right: 1px solid #d4d4d4;
width: 500px;
}


#sideBar {
float: right;
width: 280px;
}

#pageFooter {
clear: both;
width: 798px;
margin: 20px 0;
padding: 20px 20px;
border: 1px solid #d4d4d4;
}


/* ---- pageHeader ---- */

#pageHeader {
background-color: #ffffff;
}

#headerTop {
float: left;
width: 840px;
}

#headerMiddle {
float: left;
width: 840px;
}

#headerBottom {
float: left;
width: 840px;
height: 27px;
background: #ffffff url(/images/headerBottom.gif) bottom left no-repeat;
}

#headerLogo {
padding: 30px 0 0 25px;
}


/* ---- headerMenu ---- */

#headerMenu {
float: right;
margin: 22px 0 0 0;
}

#headerMenu ul {
list-style: none;
padding: 0;
}

#headerMenu li {
display: inline;
float: left;
margin: 0;
padding: 0;
}

#headerMenu a:link, #headerMenu a:visited, #headerMenu a:hover, #headerMenu a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.70em;
display: block;
text-decoration: none;
color: #333333;
padding: 0.8em 1.2em;
background: url(/images/headerMenuLeft.gif) top left no-repeat;
}

#headerMenu a:hover {
text-decoration: underline;
}

#headerMenu li {
background: url(/images/headerMenuRight.gif) top right no-repeat;
}

body.products #headerMenu li.menuProducts {background: url(/images/headerMenuRightSelected.gif) top right no-repeat;}
body.products #headerMenu a.menuProducts {background: url(/images/headerMenuLeftSelected.gif) top left no-repeat; color: #000000;}

body.solutions #headerMenu li.menuSolutions {background: url(/images/headerMenuRightSelected.gif) top right no-repeat;}
body.solutions #headerMenu a.menuSolutions {background: url(/images/headerMenuLeftSelected.gif) top left no-repeat; color: #000000;}

body.partners #headerMenu li.menuPartners {background: url(/images/headerMenuRightSelected.gif) top right no-repeat;}
body.partners #headerMenu a.menuPartners {background: url(/images/headerMenuLeftSelected.gif) top left no-repeat; color: #000000;}

body.support #headerMenu li.menuSupport {background: url(/images/headerMenuRightSelected.gif) top right no-repeat;}
body.support #headerMenu a.menuSupport {background: url(/images/headerMenuLeftSelected.gif) top left no-repeat; color: #000000;}

body.company #headerMenu li.menuCompany {background: url(/images/headerMenuRightSelected.gif) top right no-repeat;}
body.company #headerMenu a.menuCompany {background: url(/images/headerMenuLeftSelected.gif) top left no-repeat; color: #000000;}

body.contact #headerMenu li.menuContact {background: url(/images/headerMenuRightSelected.gif) top right no-repeat;}
body.contact #headerMenu a.menuContact {background: url(/images/headerMenuLeftSelected.gif) top left no-repeat; color: #000000;}


/* ---- skipNav ---- */

#skipNav a:link, #skipNav a:visited, #skipNav a:hover, #skipNav a:active {
font-size: 0.75em;
color: #ffffff;
}

#headerTop #skipNav a:focus, #headerTop #skipNav a.sffocus {
color: #333333;
}


/* ---- headerSearch ---- */

#headerSearch {
float: right;
}

#headerSearch input.searchBox {
border: 1px solid #aaaaaa;
width: 12em;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.75em;
margin: 0 1em 0.25em 0;
}

#headerSearch #searchBox:focus, #headerSearch #searchBox.sffocus {
background-color: #ffffcc;
}

/* ---- mainContent ---- */

#mainContent a:link, #mainContent a:visited, #mainContent a:active, #mainContent a:hover, #sideBar p a:link, #sideBar p a:visited, #sideBar p a:hover, #sideBar p a:active, #sideBar address a:link, #sideBar address a:visited, #sideBar address a:hover, #sideBar address a:active {
text-decoration: none;
color: #333333;
border-bottom: 1px solid #bbccdb;
}

#mainContent a:hover, #sideBar p a:hover, #sideBar address a:hover {
background-color: #fff266;
border-bottom: 1px solid #1861a8;
}




/* "Next Steps" links */

#mainContent #links {
clear: both;
background: url(/images/textBoxBottomGreen.gif) bottom left no-repeat;
padding: 0 0 2em 0;
margin: 2em 0;
}

#mainContent #links h3 {
background: url(/images/textBoxTopGreen.gif) top left no-repeat;
text-transform: uppercase;
font-weight: normal;
font-size: 0.70em;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 25px 20px 0 20px;
}

#mainContent #links ul, #mainContent ul#newsstory {
list-style: url(/images/bullet2.gif) outside;
padding-left: 2em;
}



/* Left and Right floating objects */

#mainContent .left {
float: left;
text-align: left;
margin: 20px 20px 20px 0;
}

#mainContent .right {
float: right;
text-align: right;
margin: 20px 0 20px 20px;
}




/* ---- mainContent Typography ---- */


#mainContent ul {
margin-left: 2em;
}

#mainContent li {
font-size: 0.75em;
line-height: 1.5em;
color: #333333;
}

#mainContent li ul li {
font-size: 1em;
}


#mainContent .arrow {
color: #bbccdb;
}


#mainContent .logos img {
margin: 0.4em 2em 0.4em 0;
}


#mainContent .screenshot {
float: right;
border: 2px solid #336699;
margin: 1em 0 1em 1em;
}


/* ---- textBox ---- */

div.textBox {
/*clear: both;*/
background: url(/images/textBoxBottomGrey.gif) bottom left no-repeat;
padding: 0 0 15px 0;
margin: 1.4em 0;
}

div.textBox p {
padding: 0px 20px;
}

div.textBox h3 {
background: url(/images/textBoxTopGrey.gif) top left no-repeat;
padding: 25px 20px 0 20px;
}

div.productBox, div.productBoxEnterprise, div.productBoxProfessional {
width: 214px;
margin: 0 10px 0 0;
padding: 9px;
float: left;
background-color: #fafafa;
border: 3px solid #164e7c;
}

/*border-left: 3px solid #adb8bf;*/

div.textBox .new {
color: #000000;
}




#mainContent p.enterprise {
border-left: 3px solid #164e7c;
padding: 10px;
background-color: #fafafa;
}

#mainContent a.enterprise {
font-weight: bold;
}

#mainContent p.professional {
border-left: 3px solid #adb8bf;
padding: 10px;
background-color: #fafafa;
}

#mainContent a.professional {
font-weight: bold;
}


#mainContent a.more:link, #mainContent a.more:visited, #mainContent a.more:hover, #mainContent a.more:active {
font-weight: bold;
text-decoration: none;
border: none;
color: #336699;
margin-left: 0.6em;
padding-right: 1.5em;
background: transparent url(/images/arrow.gif) right no-repeat;
}

#mainContent a.more:hover {
text-decoration: underline;
}







/* ---- sideBar ---- */


#sideBar {
background-color: #ffffff;
}

#sideBar ul {
/*list-style: url(/images/smallbullet.gif) inside;*/
list-style: none;
line-height: 1em;
}

#sideBar li {
display: inline;
}

#sideBar li a:link, #sideBar li a:visited, #sideBar li a:hover, #sideBar li a:active {
display: block;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.70em;
padding: 0.2em 1em;
text-decoration: none;
}

#sideBar p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.70em;
}


#sideBar li a:hover {
text-decoration: underline;
}

/*
background-color: #eeeeee;
}

#sideBar .productsLinks li a:hover {background-color: #e6ecf2;}
#sideBar .solutionsLinks li a:hover {background-color: #f2e6e6;}
#sideBar .otherLinks li a:hover {background-color: #eeeeee;}
*/

#sideBar li a.selected {
background-color: #fff266;
}

#sideBar ul li a.selected:hover {
background-color: #fff266;
}



/* enterprise and professional grouped products */

#sideBar ul li.enterprise a {
font-weight: bold;
}

#sideBar ul li.enterprise ul li a {
font-weight: normal;
}

#sideBar ul li.professional a {
font-weight: bold;
}

#sideBar ul li.professional ul li a {
font-weight: normal;
}

#sideBar li.enterprise a {
/*border-left: 3px solid #164e7c;
background-color: #fafafa;*/
}

#sideBar li.professional a {
/*border-left: 3px solid #adb8bf;
background-color: #fafafa;*/
}


#sideBar .logos {
margin: 2em 0;
text-align: center;
}

#sideBar .logos img {
margin: 0 4px;
}




#logos {
display: none;
float: right;
clear: right;
margin-top: 20px;
width: 280px;
height: 120px;
text-align: center;
}

#logos img {
margin: 10px 5px;
}



div.logos a:link, div.logos a:visited, div.logos a:hover, div.logos a:active {
border: 0px;
}


/* Nested Menu Items */

#sideBar ul ul {
font-size: 1em;
margin-left: 1em;
}

#sideBar .sideBox {
}



/* ---- sideBar photos ---- */

body.home #sideBar {
background: transparent url(/images/home.jpg) top left no-repeat;
padding: 110px 0 0 0;
}

body.products #sideBar {
background: transparent url(/images/products.jpg) top left no-repeat;
padding: 80px 0 0 0;
}

body.solutions #sideBar {
background: transparent url(/images/solutions.jpg) top left no-repeat;
padding: 80px 0 0 0;
}

body.partners #sideBar {
background: transparent url(/images/partners.jpg) top left no-repeat;
padding: 80px 0 0 0;
}

body.support #sideBar {
background: transparent url(/images/support.jpg) top left no-repeat;
padding: 80px 0 0 0;
}

body.company #sideBar {
background: transparent url(/images/company.jpg) top left no-repeat;
padding: 80px 0 0 0;
}

body.contact #sideBar, body.search #sideBar {
background: transparent url(/images/contact.jpg) top left no-repeat;
padding: 80px 0 0 0;
}

#sideBar .productsLinks h4 { color: #1861a8; border-bottom: 1px solid #95a9bd; }
#sideBar .solutionsLinks h4 { color: #a8181a; border-bottom: 1px solid #af595a; }
#sideBar .otherLinks h4 { color: #666666; border-bottom: 1px solid #aaaaaa; }








/* ---- Home Page Layout ---- */


body.home #mainContent {
padding-bottom: 10px;
}

body.home #sideBar h1 {
margin: 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.70em;
font-weight: normal;
color: #999999;
text-transform: uppercase;
}


body.home #sideBar .more:link, body.home #sideBar .more:visited, body.home #sideBar .more:hover, body.home #sideBar .more:active {
text-decoration: none;
border: none;
color: #336699;
margin-left: 0.6em;
padding-right: 1.5em;
text-transform: lowercase;
background: transparent url(/images/arrow.gif) right no-repeat;
}

body.home #sideBar .more:hover {
text-decoration: underline;
}

body.home .logos {
/*float: left;*/
clear: left;
}

body.home .logos img {
display: inline;
}


body.home #news {
float: left;
background: url(/images/newsBottom.gif) bottom left no-repeat;
width: 320px;
}

body.home #news h3 {
background: url(/images/newsTop.gif) top left no-repeat;
text-transform: uppercase;
font-weight: normal;
font-size: 0.70em;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 2em 1.4em 0 1.4em;
margin: 0;
}

body.home #news ul {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 0.90em;
list-style: none;
margin: 1em 1.4em 2em 1.4em;
padding: 0;
}

#spotlight {
float: right;
background: url(/images/spotlightBottom.gif) bottom left no-repeat;
width: 160px;
height: 140px;
text-align: center;
}

#spotlight p {
margin: 1em 0 2em 0;
}

#spotlight h3 {
background: url(/images/spotlightTop.gif) top left no-repeat;
text-transform: uppercase;
font-weight: normal;
font-size: 0.70em;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-transform: uppercase;
letter-spacing: 0.1em;
padding: 25px 15px 0 15px;
margin: 0;
line-height: 1.2em;
}

body.company #spotlight {
margin-top: 4em;
}

#spotlight a:link, #spotlight a:visited, #spotlight a:hover, #spotlight a:active {
border: 0px;
}







/* ---- Search Results ---- */

p.title {
font-weight: bold;
}

p.match {
color: #999999;
font-size: 0.75em;
}




/* ---- pageFooter ---- */

#pageFooter {
background: #ffffff url(/images/triangle.gif) bottom right no-repeat;
}

#pageFooter ul li {
margin-right: 0.75em;
font-size: 0.75em;
}

#pageFooter ul li {
display: inline;
}



/* leftovers */

.tbc {
background-color: pink;
}

#sideBar div.otherLinks ul li a.brochureRequest, #links ul li a.brochureRequest {
color: #800000;
font-weight: bold;
}


body.partners #mainContent div.logos a:link, body.partners #mainContent div.logos a:visited, body.partners #mainContent div.logos a:hover, body.partners #mainContent div.logos a:active {
text-align: center;
border: 0;
background: none;
}