/*  CSS Document */

* { padding: 0; margin: 0; }

body { font-size: 62.8%; font-family: Helvetica, Arial, sans-serif; background: url(/images/bg.png) repeat-x; }

#page { width: 900px; margin: 0 auto; }

#header { height: 133px; position: relative;}

#logo { position: relative; left: 0; top: 0; width: 132px; height: 110px; font-size: 1em; color: #000; margin: 0;}
#logo span { position: absolute; top: 0; left: 0; width: 132px; height: 110px; background: url(/images/3_step_payroll.png) no-repeat;}
#header h2 { text-align: right; color: #333; margin: -1.5em 0 0 0; font-size: 4em; color: #2f2d6a; font-weight: normal;}
#header #out_link { float: right; margin: -4.5em 0 0 0; }

#top_login { position: absolute; top: 0; right: 0; padding: 5px 15px;  width: 700px; font-size: 0.9em; }
#top_login a { color: #2f2d6a; }
#second_nav {font-size: 1.4em; }
div#top_login { font-size: 1.4em; text-align: right;}

#nav { list-style: none; height: 39px;}
#nav li { float: left; height: 35px; padding: 2px 2px 2px 0; margin: 0; font-weight: bold; }
#nav li a { padding-left: 25px; padding-bottom: 10px; padding-right: 25px; padding-top: 10px; display: block; height: 15px; color: #fff; text-decoration: none;}
#nav li a.selected, #nav li a:hover { background: #333366;}

#content { background: url(/images/content_top.png) no-repeat #fff; padding: 21px 10px 10px 10px; }

#feature { height: 245px; width: 878px; position: relative; border: 1px solid #999;}
#features { height: 245px; width: 878px;}
#feature .feature_item { padding: 10px; width: 858px; height: 225px;}
#feature .feature_item h2, #feature .feature_item h3, #feature .feature_item h4, #feature .feature_item p { padding-left:100px;}
#features_pager { position: absolute; left: 0; bottom: 0; z-index: 99; list-style: none; height: 22px; padding: 3px; font-size: 0.8em; background: #ddd;}
#features_pager li { height: 14px; width: 14px; border: 1px solid #74A734; float: left; margin: 0 1px; padding: 0; display: block; text-align: center;}
#features_pager li a { background: #74a734; color: #fff; padding: 2px; height: 12px; width: 12px; display: block;}
#features_pager li a.activeSlide { background: #fff; color: #74A734; }

.col1, .col2, .colhalf { float: left; margin: 10px 10px 0 0; padding: 10px; }
.col1 { width: 265px; }
.col2 { width: 560px; }
.colhalf { width: 413px;}
.last { margin-right: 0;}

.color1box, .color3box, .color4box { padding: 10px; margin-bottom: 10px; }
.color1box { border: 1px solid #2f2d6a; background: url(/images/fade_blue.png) repeat-x top left;} /* blue */
.color3box { border: 1px solid #74A734; background: url(/images/fade_green.png) repeat-x top left;} /* green */
.color4box { background: #efefef;}
.color4box h2 {font-size: 1.5em; border-bottom-color: #669933; border-bottom-style: solid; border-bottom-width: 2px; color: #333366;}

.color1 { color: #2f2d6a; } /* blue */
.color3 { color: #74A734; } /* green */

h1, h2, h3, h4 { margin: 0.3em 0;}
h1 { font-size: 2.5em;}
h2 { font-size: 2em; }
h3 { font-size: 1.7em; }

hr { border: none; border-top: 1px dashed #666; margin: 20px 0; }
li { font-size: 1.4em; margin:1em 0 0 25px;}
p { font-size: 1.4em; line-height: 1.3em; margin: 1em 0;}
a img { border: none;}
a { text-decoration: none;}
a:hover { text-decoration: underline;}

table { margin: 0 0 1em 0; border-collapse: collapse; width: 99%;}
th, td { font-size: 1.4em; padding: 4px 5px 2px 5px; border: 1px solid #6b69a6;}
th *, td * { font-size: 1em;}
th { background: #2f2d6a; color: #fff;}
tr.odd { background: #efefef;}


.button { padding: 3px 10px; background: url(/images/button.png) repeat-x center center #7777a9; color: #fff; text-decoration: none; border: none;}
a.button {padding: 5px 10px 3px 10px;}
.button:hover { text-decoration: underline;}

.alignleft { float: left; margin-right: 1em;}
.alignright { float: right; margin-left: 1em; text-align: right;}
.clearer { clear: both;}

.progress li { list-style: none; margin: 0.5em 0 0 0;}
.progress li a { color: #555; padding: 4px 5px 2px 25px; display: block; background: url(/images/bullet_blue.png) 2px 2px no-repeat;}
.progress li a.current { color: #fff; font-weight: bold; background-color: #2f2d6a;}
.progress li a.complete { background-image: url(/images/accept.png); }
.progress li a.incomplete { background-image: url(/images/error.png); }

fieldset { margin-bottom: 1em; padding: 1em ; border: none; border-top: 2px solid #74A734; background: url(/images/fade_green.png) repeat-x top left;}
legend { font-size: 1.6em; font-weight: bold; padding: 4px 10px 2px 10px; color: #fff; background: #74A734;}
form div { padding: 0.5em 0;}
label { font-size: 1.4em; margin-right: 0.5em; display: block; padding: 3px 0 2px 0;}
#header label { display: inline;}
label span.required { color: #900; }
input, select { font-size: 1.4em; margin-right: 1em;}
input.small { width: 50px;}
.error { color: #c00; }
label.error { display: inline; background: url(/images/exclamation.png) no-repeat; padding-left: 20px;}

#footer { background: #74A734; padding: 10px; color: #fff; margin-top: 40px;}
#footer .center { width: 900px; margin: 0 auto;}
#footer a { color: #fff; }

/* disclosure */

.disclosure, .disclosure-closed {	margin: 0;}
.disclosure-img {	float: left; margin: 4px 10px 0 15px; }
.disclosure h1, .disclosure-closed h1, .disclosure h2, .disclosure-closed h2, .disclosure h3, .disclosure-closed h3, 
.disclosure h4, .disclosure-closed h4 {	cursor:pointer;	}

/* tabs */
/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */.ui-tabs-hide {  display: none; }}

/* Hide useless elements in print layouts... */
@media print {.ui-tabs-nav {display: none;}}

/* Skin */
.ui-tabs-nav {list-style: none; margin: 0 0 5px 0; border-bottom: 1px solid #444; height: 26px; }
.ui-tabs-nav li { float: left; margin: 0 2px 0 0; width: 150px; }
.ui-tabs-nav a { display: block; padding: 5px 10px; background: url(/images/fade_blue.png) repeat-x top left; color: #2f2d6a; font-weight: bold; text-align: center; text-decoration: none; border: 1px solid #444;}
.ui-tabs-nav .ui-tabs-selected a { color: #000; background: #fff; border-bottom-color: #fff;}
.ui-tabs-nav .ui-tabs-selected a, .tabs-nav a:hover, .tabs-nav a:focus, .tabs-nav a:active { outline: 0; /* prevent dotted border in Firefox */ }