/* GENERAL STYLES
----------------------------- */

* {
	margin: 0;
}

.uppercase {
	text-transform: uppercase;
}

.justified {
	text-align: justify;
}

.underlined {
	text-decoration: underline;
}

.with-margin {
	margin-bottom: 1.2em;
}

.no-margin {
	margin-bottom: 0;
}

.small-margin {
	margin-bottom: .5em;
}

.red-text {
	color: #900;
}

.blue-background {
	background-color: #bef;
}

/* SITE COMMON STYLES
------------------------------------ */

body {
	background-color: #191919;
	color: #fff;
	font: normal normal 15px/2 "Arial narrow", sans-serif;
	z-index: 0;
}

a img {
	border: 0;
}

#container {
	width: 50em; /* 750px */
	margin: 8px auto; /* non-scalable in Firefox */
}

#header {
	background-color: #fff;
	height: 70px;
	margin-bottom: 15px; /* non-scalable in Firefox */
}

#header a#logo {
	display: block;
	background: #fff url(images/hire_ability_logo.gif) no-repeat center 60%;
	float: left;
	width: 27.4em; /* 411px = the actual width of bgd-img */
	height: 100%;
}

#header a#logo2 {
	display: block;
	background: #bf5a4e url(images/staffing_soln.jpg) no-repeat right;
	float: right;
	width: 22.6em; /* 339px = the actual width of bgd-img */
	height: 100%;
}

#main {
	margin-bottom: .5em;
	background-color: #900; /* for when #main-right is taller than #sidebar; when #sidebar is taller than #main-right, this is overwriten in site_styles_2.css */
	clear: both;
	float: left;
}

#sidebar {
	width: 11em;
	float: left;
	clear: none;
	font: normal normal 1em/1 Arial, sans-serif;
	padding: 1em 0 1.4em;
}

#sidebar h4 {
	color: #a6a59f;
	padding: 1.333em 0 .133em .133em; /* 20px 0 2px 2px */
}

#sidebar a {
	width: 10.133em; /* 152px */
	display: block;
	padding: .333em 0 .333em .866em; /* 5px 0 5px 13px */
	color: #fff;
	font: normal bold 1em/1 Arial, sans-serif;
	text-decoration: none;
}

#sidebar .active {
	background-color: #fff;
	color: #b11811;
}

#sidebar a:hover {
	background-color: #fff;
	color: #000;
}

#sidebar div#menu1 {
	position: relative;
	z-index: 1;
}

#sidebar a#program {
	display: block;
	background: url(images/right_arrow_white.gif) no-repeat 95% center;
}

#sidebar a#program:hover {
	background: #fff url(images/right_arrow_black.gif) no-repeat 95% center;
}

#sidebar div#menu1 {
	behavior: url('iefixes.htc');
}

#sidebar div#menu1 ul {
	display: none;
}

#sidebar div#menu1:hover,
#sidebar div#menu1 a:hover {
	cursor: pointer;
}

#sidebar div#menu1:hover a#program,
#sidebar div#menu1.hover a#program {
	background: #fff url(images/right_arrow_black.gif) no-repeat 95% center;
}

#sidebar div#menu1:hover a,
#sidebar div#menu1.hover a {
	background-color: #fff;
	color: #000;
}

#sidebar div#menu1:hover ul#programs,
#sidebar div#menu1.hover ul#programs {
	display: block;
	position: absolute;
	padding: 0;
	top: 0;
	left: 11em;
}

#sidebar div#menu1:hover ul#programs li,
#sidebar div#menu1.hover ul#programs li {
	border-width: 1px 1px 0;
	border-style: solid;
	border-color: #fff;
	padding: 0;
	list-style: none;
}

#sidebar div#menu1:hover ul#programs li.first,
#sidebar div#menu1.hover ul#programs li.first {
	position: relative;
	top: auto;
}

#sidebar div#menu1:hover ul#programs li.second,
#sidebar div#menu1.hover ul#programs li.second {
	position: relative;
	top: -1px;
}

#sidebar div#menu1:hover ul#programs li.third,
#sidebar div#menu1.hover ul#programs li.third {
	position: relative;
	top: -2px;
}

#sidebar div#menu1:hover ul#programs li.fourth,
#sidebar div#menu1.hover ul#programs li.fourth {
	position: relative;
	top: -3px;
}

#sidebar div#menu1:hover ul#programs li.fifth,
#sidebar div#menu1.hover ul#programs li.fifth {
	position: relative;
	top: -4px;
}

#sidebar div#menu1:hover ul#programs li.sixth,
#sidebar div#menu1.hover ul#programs li.sixth {
	position: relative;
	top: -5px;
}

#sidebar div#menu1:hover ul#programs li.seventh,
#sidebar div#menu1.hover ul#programs li.seventh {
	position: relative;
	top: -6px;
}

#sidebar div#menu1:hover ul li a,
#sidebar div#menu1.hover ul li a {
	display: block;
	width: 11.3em; /* For aesthetics. */
	background-color: #64635f;
	color: #fff;
	font: normal bold 11px Verdana, sans-serif;
	padding: 5px 1em 6px; /* 5px 11px 6px; 1 more px on bottom to correct for IE pixel gap */
	position: relative;
	top: auto;
}

#sidebar div#menu1:hover ul li a.active,
#sidebar div#menu1.hover ul li a.active,
#sidebar div#menu1:hover ul li a:hover,
#sidebar div#menu1.hover ul li a:hover {
	background-color: #822;
	color: #fff;
}

#footer {
	width: 100%;
}

#footer #company-name {
	float: left;
	width: 25%; /* 1:3 split seems to work best */
	text-align: left;
}

#footer #company-contact {
	float: right;
	width: 74%;
	text-align: right;
}

/* #MAIN-RIGHT STYLES
----------------------------------- */

#main-right {
	background-color: #fff;
	color: #000;
	width: 42em; /* Total width should be 585px = 45em * 13px = 39em * 15px */
	padding: 1.4em;
	padding-bottom: 3em;
	float: left;
	font: normal normal 13px/1.4 Arial, sans-serif;
	clear: none;
}

#main-right h2 {
	color: #900;
	font-size: 20px;
	padding-bottom: .6em;
	border-bottom: .15em solid #900;
	margin-bottom: .6em;
}

#main-right h3 {
	font-size: 1.4em;
	clear: both;
	padding-bottom: .6em;
	border-bottom: .15em solid #900;
	margin-bottom: .6em;
}

#main-right h4 {
	clear: both;
	float: left;
	width: 100%; /* necessary for IE */
}

/*
1 em = 13 px;
 */
#main-right h4,
#main-right p,
#main-right td,
#main-right th,
#main-right ul li,
#main-right ol li {
	font-size: 1em;
}

#main-right h4.with-margin,
#main-right ul.with-margin li,
#main-right ol.with-margin li,
/* #main-right li.last-item, */
#main-right p {
	margin-bottom: 1.2em;
}

#main-right p {
	clear: both;
	float: left;
	width: 100%; /* necessary for IE */
}

#main-right ul {
	display: block;
	float: left;
	clear: both;
	width: 39em; /* 42em - 3em */
	padding-left: 3em; /* 39px */
}

#main-right a {
	text-decoration: underline;
	color: #698;
}

#main-right a:visited {
	color: #869;
}

#main-right a:hover {
	text-decoration: none;
}

#main-right #faq dt {
	font-weight: bold;
}

#main-right #faq dd {
	font-style: italic;
}

#main-right #myths-facts dt {
	font-weight: bold;
}

#main-right #myths-facts dd {
	margin-bottom: 1.2em;
}

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block; margin-bottom: 1em;}

/* Hides from IE-mac \*/
* html .clearfix {height: 200%;}
.clearfix {display: block;}
/* End hide from IE-mac */