/******************************************
Include File: /assets/css/screen/layout/standard.css
Description: Screen layout for standard
or page elements. This doesn't include
widgets or sections, such as navigation,
headers, and footers. Those are taken care
of in other files
******************************************/
table {
	margin-top: 8px;
	width: 100%;
}

table th {
	text-align: left;
}

table th, table td {
	margin: 0;
	padding: .2em .3em;
}

/******************************************
Include File: /assets/css/screen/layout/grid.css
Description: Screen layout for grid position
of columns.
******************************************/
body {
	margin: 0 auto;
	padding: 0;
	position: relative;
	width: 775px;
}

* html #content {
	height: 1%;
}

.section.main {
	float: right;
	padding: 0 20px;
	width: 533px;
}

.section.auxiliary {
	float: left;
	padding: 0;
	width: 196px;
}

.section.main.wide {
	border-left: 0;
	width: 729px;
}

.column {
	float: left;
	padding: 3%;
	width: 42%;
}

.column.right {
	float: right;
}

.column.third {
	width: 27%;
}


/******************************************
Include File: /assets/css/screen/layout/header.css
Description: Screen layout for header
elements, including logos, menu placement,
search forms, etc.
******************************************/
#header {
	position: relative;
}

/* IE6 gets borked if the header doesn't have hasLayout triggered and the
menu is set to position:absolute */
* html #header {
	height: 1%;
}

#header h1 {
	background: transparent url(/_assets/images/logo.gif) top left no-repeat;
	margin: 5px 0 5px 10px;
	text-indent: -9000px;
}

#header h1 a {
	display: block;
	height: 50px;
	width: 275px;
}

#header h1 a:hover {
	border-bottom: 2px solid #0071B8;
	height: 48px;
}

#header .menu {
	clear: left;
	width: 100%;
}

#section-header {
	margin-top: .5em;
}

#section-header h2 {
	clear: none;
	float: left;
	margin: 0 0 0 .5em;
	padding: 0;
	width: 50%;
}

#section-header .menu {
	clear: none;
	float: right;
	width: 27em;
}


/******************************************
Include File: /assets/css/screen/layout/content.css
Description: Screen layout for main content.
If whitespace or call-outs, etc. need to be
changed, this is the place.
******************************************/
#content {
	clear: both;
	margin: 0;
	padding: 0;
}

#main-content {
	padding-bottom: 1em;
}

#auxiliary-content {
	padding-bottom: 1em;
}

.section.auxiliary img {
	margin-top: 25px;
}

.breadcrumb {
	height: 15px;
	list-style-type: none;
	margin: 5px 0 0 0;
	padding: .3em 0;
	width: 100%;
}

.breadcrumb li {
	background: transparent url(/_assets/images/breadcrumb.gif) 0 2px no-repeat;
	float: left;
	margin-right: 7px;
	padding-left: 10px;
}

.callout {
	clear: right;
	float: right;
	margin: 10px;
	padding: 10px;
	width: 200px;
}

.callout p {
	margin: 0;
}

.callout.compact {
	margin-right: 0;
	padding: 0;
	width: 254px;
}

.callout.compact img {
	float: left;
	margin: 0;
	padding: 0;
}

.callout li {
	margin-bottom: .5em;
}

.callout h3 {
	margin: 0;
	margin-bottom: 1em;
}

.callout h3.last {
	margin-bottom: 0;
}

#main-content .contact-form fieldset {
	clear: none;
}

#main-content .contact-form fieldset.submit {
	clear: both;
	margin: 0 0 0 15px;
}

#main-content .contact-form fieldset label {
	width: 60px;
}

.short-contact-form {
	clear: right;
	float: right;
	margin: 0 10px 10px 10px;
	width: 225px;
}

#main-content .short-contact-form fieldset {
	margin: 5px 0;
}

#main-content .short-contact-form legend {
	margin: 0;
	padding-top: 0;
}

#main-content .short-contact-form fieldset label {
	width: 40px;
}

#main-content .short-contact-form fieldset input {
	margin: 0 0 0 5px;
	width: 135px;
}

#main-content .short-contact-form fieldset.submit {
	margin: 0;
}

#main-content .short-contact-form fieldset.submit input {
	margin: 0;
	width: auto;
}

.vcard {
	margin: 1em 0;
	padding: 5px;
}

.vcard p {
	margin: .3em 0;
	padding: 0;
}

.itDNA-logo {
	clear: right;
	display: inline;
	float: right;
	margin-right: 15px;
}


/******************************************
Include File: /assets/css/screen/layout/footer.css
Description: Screen layout for copyright
and global links, etc.
******************************************/
#footer .menu {
	float: right;
}


/******************************************
Include File: /assets/css/screen/layout/navigation.css
Description: Screen layout for menus.
This file should not be changed, but should
be overridden after the include.
******************************************/
ul.menu {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul.menu li {
	margin: 0;
	padding: 0;
}

ul.menu a {
	display: block;
	margin: 0;
	padding: .2em .6em;
	text-decoration: none;
}

ul.menu.horizontal li {
	display: inline;
	float: left;
}

ul.menu.horizontal li a {
	float: left;
}

ul.menu.vertical li a {
	display: inline-block;
	padding: 2% 1% 2% 5%;
	width: 95%;
}

ul.menu.vertical ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

ul.menu.vertical ul li a {
	padding: 2% 1% 2% 10%;
	width: 90%;
}

ul.menu.vertical ul ul li a {
	padding: 2% 1% 2% 17%;
	width: 83%;
}

ul.menu.dropdown {
	float: left;
	position: relative;
	width: 100%;
	z-index: 100;
}

ul.menu.dropdown ul {
	list-style-type: none;
	float: left;
	margin: 0;
	padding: 0;
	position: absolute;
}

ul.menu.dropdown li {
	display: block;
	float: left;
	position: relative;
}

ul.menu.dropdown li a {
	float: none;
}

ul.menu.dropdown ul li a {
	clear: left;
	font-size: 100%;
}

ul.menu.dropdown ul,
ul.menu.dropdown li:hover ul ul,
ul.menu.dropdown li.hover ul ul {
	display: none;
}

ul.menu.dropdown li:hover ul,
ul.menu.dropdown li.hover ul {
	display: block;
}

ul.menu.tabcontrol {
	width: 70%;
}

ul.menu.tabcontrol li {
	float: none;
}

ul.menu.tabcontrol li a {
	border: 1px solid #000;
	border-bottom-width: 0;
	margin-right: -1px;
}



/******************************************
Include File: /assets/css/screen/layout/forms.css
Description: Screen layout for forms
and input elements. This file should not
be changed, but should be overridden after
the include.
******************************************/
form {
	margin: 1em 0;
	padding: 0;
	width: 98%;
}

form fieldset {
	border: 0 dashed #AAA;
	border-top-width: 1px;
	clear: both;
	margin: 1em 0;
	padding: 0 1em;
	position: relative;
}

form fieldset legend {
	background-color: #FFF;
	color: #444;
	font: 130%/1.4em Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	font-weight: bold;
	margin: 0;
	padding: .5em;
}

form label {
	clear: left;
	display: block;
	float: left;
	margin: .2em .2em .2em 0;
	padding: .25em;
	text-align: right;
	width: 160px;
}

form fieldset.compact label {
	width: 6em;
}

form label:hover {
	color: #009;
}

form label:after {
	content: ":";
}

form label.compact {
	/* Wheee! IE6 doesn't know how to calculate margins! */
	display: inline;
	margin: .4em 0 .4em 130px;
	padding: 0;
	text-align: left;
	width: 250px;
}

form label.compact:after {
	content: "";
}

form label.compact input, form label.compact select, form label.compact textarea {
	display: inline;
	margin: 0;
	padding: 0;
}

form input, form select, form textarea {
	color: #304D6A;
	display: block;
	/* Firefox has a retard party unless font attributes are redeclared */
	font: normal 1em/1.5 Verdana, Helvetica, Arial, sans-serif;
	margin: .2em 0;
	padding: .25em;
}

/*IE can't handle this float, Firefox requires it.
This bypasses IE's "superior" parsing algorithm.*/
html>/**/body form input, html>/**/body form select, html>/**/body form textarea {
	float: left;
}

form input[type="text"], form input[type="password"], form input[type="checkbox"], form select, form textarea {
	border: 2px solid #CCC;
	border-color: #AAA #DDD #DDD #AAA;
}

/* IE7 does this awesome thing where it makes the border
around checkboxes, instead of the actual checkbox. Terrific. */
*:first-child+html form input[type="checkbox"] {
	border-width: 0;
}

form input[type="checkbox"], form input[type="radio"] {
	clear: left;
	display: block;
	float: none;
}

form input[type="text"]:focus, form input[type="password"]:focus, form select:focus, form textarea:focus {
	background-color: #E9E9E9;
}

form input.extended, form select.extended, form textarea.extended {
	clear: left;
	margin-left: 3em;
}

form fieldset fieldset {
	border-width: 1px;
	padding: .3em .5em .8em .5em;
	margin-left: 90px;
	width: 250px;
}

form fieldset fieldset legend {
	font-size: .9em;
}

form fieldset fieldset label {
	clear: none;
	float: left;
	margin: .3em 0;
	padding: 0;
	text-align: left;
	width: auto;
}

form fieldset fieldset label:after {
	content: "";
}

form fieldset fieldset.vertical-list label {
	clear: left;	
	width: 95%;
}

form fieldset fieldset input, form fieldset fieldset select, form fieldset fieldset textarea, form fieldset fieldset input[type="checkbox"], form fieldset fieldset input[type="radio"] {
	float: left;
	margin: .2em .4em;
	padding: 0;
}

/* Hack so that IE6 can see the above */
* html form fieldset fieldset input, * html form fieldset fieldset select, * html form fieldset fieldset textarea {
	/* Also, fix the double-margin float bug */
	display: inline;
	float: left;
	margin: .2em;
	padding: 0;
}

/*Ok, I don't know which browser's box model is making the padding around these
labels and inputs jacked up, but let's just blame it on IE, ok?*/
*:first-child+html form fieldset fieldset input {
	margin-bottom: 0;
	margin-top: 0;
}

/* This one is safe to blame on IE6, but same fix as above. */
* html form fieldset fieldset input {
	margin-bottom: 0;
	margin-top: 0;
}

form fieldset.submit {
	border-width: 0;
	/* Remember class, IE6 sucks. */
	display: inline;
	margin-left: 160px;
}

form fieldset.compact.submit {
	margin: 0;
	margin-left: 50px;
}

form fieldset.submit legend {
	display: none;
}

form fieldset .information {
	background-color: #CADAFF;
	border: 1px solid #AAA;
	font-size: 85%;
	padding: .4em;
	position: absolute;
	right: 1.5em;
	top: 2.5em;
	width: 140px;
}

form fieldset .information h3 {
	border-bottom: 1px solid #AAA;
	font-size: 1em;
	font-weight: bold;
	margin: 0;
	padding: .3em;
	text-align: center;
}

form .inline {
	clear: both;
}

form .inline input, form .inline select, form.inline textarea {
	clear: none !important;
	float: left;
}

form .step-buttons input {
	clear: none !important;
	float: left;
	margin-right: .5em;
	padding: .3em;
}

.section.auxiliary form fieldset,
.section.auxiliary form fieldset legend,
.section.tertiary form fieldset,
.section.tertiary form fieldset legend {
	border-width: 0;
	margin: 0;
	padding: 0;
}

.section.auxiliary form label,
.section.tertiary form label {
	margin: 0;
	padding: .1em 0;
	width: auto;
}

.section.auxiliary form input,
.section.auxiliary form select,
.section.auxiliary form textarea,
.section.tertiary form input,
.section.tertiary form select,
.section.tertiary form textarea {
	clear: both;
}


/******************************************
Include File: /assets/css/screen/typography/typography.css
Description: Screen typography definitions
******************************************/
body {
	font: 76%/1.4 Arial, Verdana, Helvetica, sans-serif;
}

h1 {
	font-size: 1.4em;
	line-height: 1;
	margin: .7em 0 .6em 0;
}

h2 {
	font-size: 1.3em;
	line-height: 1;
	margin: 1.7em 0 0 0;
}

h3 {
	font-size: 1.2em;
	line-height: 1;
	margin: 1.3em 0 0 0;
}

h4 {
	font-size: 1.1em;
	line-height: 1.25;
	margin: 1.25em 0;
}

h5 {
	font-size: 1em;
	line-height: 1.5;
	margin: 1.5em 0;
}

h6 {
	font-size: .8em;
	line-height: 1.875;
	margin: 1.875em 0;
}

p {
	line-height: 1.5;
	margin: .6em 0 0 0;
}

/* optionally indent following paragraphs */
/*
p + p {
	margin-top: 0;
	text-indent: 2em;
}
*/

ol, ul, dl {
	margin: .75em 0 .75em 1.5em;
}

ol ol, ol ul, ul ul, ul ol {
	margin: 0 0 0 1.5em;
}

li {
	margin: 0;
}

blockquote {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 0.9em;
	font-style: italic;
	line-height: 1.6667;
	margin: 1.6667em 1em;
}

.vcard .fn {
	font-weight: bold;
}

#header .menu {
	font-size: 92%;
	font-weight: bold;
}

#header .menu a {
	padding: .4em 1.3em;
}

.section.auxiliary .menu {
	font-weight: bold;
}

.section.auxiliary .menu ul {
	font-weight: normal;
}

.section.auxiliary h2 {
	font-size: 125%;
	font-weight: bold;
	margin: 15px 0 0 0;
	padding: 0;
}

.section.auxiliary h2 a {
	display: block;
	text-decoration: none;
	padding: 3%;
	width: 95%;
}

.section.main .vertical.menu a {
	text-decoration: underline;
}

.breadcrumb {
	font-size: 90%;
}

#footer {
	font-size: 85%;
}

dt {
	font-style: italic;
	font-weight: bold;
}


/******************************************
Include File: /assets/css/screen/color/palette.css
Description: Screen color palette. This
can be swapped out at any time. All
palettes should be stored in this folder.
******************************************/
html, body {
	background-color: #777;
}

h1, h2, h3, h4, h5, h6, dt {
	color: #03007F;
}

p {
	color: #111;
}

table {
	border: 2px solid #DDD;
	border-collapse: collapse;
}

table th, table td {
	border-bottom: 1px solid #DDD;
}

table th {
	background-color: #EEE;
	color: #03007F;
}

table td {
	background-color: #F5F4EB;
}

acronym, abbr {
	color: #1D1D32;
}

#page a:link {
	color: #003366;
}

#page a:visited {
	color: #4E7298;
}

#page a:hover {
	color: #003333;
}

#page a:active {
	color: #0066FF;
}

#page .section.auxiliary a:link,
#page .section.tertiary a:link { color: #CC0000; }
#page .section.auxiliary a:visited,
#page .section.tertiary a:visited { color: #999999; }
#page .section.auxiliary a:hover,
#page .section.tertiary a:hover { color: #006699; }
#page .section.auxiliary a:active,
#page .section.tertiary a:active { color: #006699; }

ul.menu a:link, ul.menu a:visited {
	border-color: #777;
}

ul.menu.tabcontrol a.selected, ul.menu.tabcontrol a:hover, ul.menu.tabcontrol li.hover a {
	background-color: #00A2FF;
	color: #FFF;
}

#header #menu {
	background-color: #000;
}

#header ul.menu a:link, #header ul.menu a:visited {
	color: #FFF;
}

#index .menu li.index a,
#about .menu li.about a,
#itDNA .menu li.itDNA a,
#consulting .menu li.consulting a,
#training .menu li.training a,
#approach .menu li.approach a,
#links .menu li.links a,
#careers .menu li.careers a,
#contact .menu li.contact a,
#header ul.menu a:hover {
	background-color: #03007F;
	color: #FFF;
}

#page {
	background-color: #FFF;
	border: 2px solid #666;
}

#content, .section.auxilary, .section.tertiary {
	background-color: #DEDBDE;
}

.section.main {
	background-color: #FFF;
}

.section.auxiliary h2,
.section.auxiliary h3,
.section.auxiliary h4,
.section.auxiliary h2,
.section.tertiary h3,
.section.tertiary h4 {
	color: #111;
}

#content {
	background: transparent url(/_assets/images/content-background.gif) top left repeat-y;
}

.section.auxiliary h2 {
	background-color: #B2B2B2;
	border-bottom: 1px solid #DEDBDE;
}

.section.auxiliary .menu a {
	border-bottom: 1px solid #DEDBDE;
}

#page .section.auxiliary a:link, #page .section.auxiliary a:visited {
	background-color: #C0C0C0;
	color: #000;
}

#page .section.auxiliary a:hover {
	background-color: #DEDBDE;
 	color: #006699;
}

.section.auxiliary img {
	border: 2px solid #B7B7B7;
}

.callout {
	background-color: #EEE;
	border: 2px solid #069;
}

#page .breadcrumb a:link, .breadcrumb a:visited {
	color: #666 !important;
}

#footer {
	background-color: #000;
	color: #FFF;
}

#footer a:link, #footer a:visited {
	color: #FFF;
}