/* Global styles */ body {background-color:#6487a3; text-align:center} * {margin: 0 auto; padding: 0;} /*<------<--------<-----| This assumes we're centering!!! */ a img {border: none;} a {font-family:Arial, Helvetica, sans-serif; color:#207cdd; font-size:11px; text-decoration:underline;} a:hover, a.current {text-decoration: underline; color:#ea4498;} p {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#545454;} h1{} ul, ol {padding:4px 0 0 0;} li {} td, th, tr {} h2,h3,h4{} /* reusable classes */ .right{float:right;} .left{float:left;} .full{position:relative; width:99%;} /*<------<--------<-----| This works better w/ px based widths */ .split50{position:relative; width:50%;float:left;} .split30{position:relative; width:33%;float:left;} .copytext {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#545454;} /* Wrappers */ /*<------<--------<-----| Start building out your divs here... */ #PageWrapper {background-color:#6487a3; width:910px; text-align:left} #Wrapper {background:url(images/slice_body.gif) repeat-y; width:910px; margin-top:10px;} #HP_BodyWrapper {background:url(images/hp_body.gif) no-repeat; width:910px;} #SUB_BodyWrapper {background:url(images/sub_body.gif) no-repeat; width:910px;} /* home page top */ #HP_Header {background:url(images/hp_header.jpg) no-repeat; width:910px; height:348px;} #About_Header {background:url(images/header5.jpg) no-repeat; width:910px; height:241px;} #Emp_Header {background:url(images/header3.jpg) no-repeat; width:910px; height:241px;} #Legal_Header {background:url(images/header6.jpg) no-repeat; width:910px; height:241px;} #Job_Header {background:url(images/header4.jpg) no-repeat; width:910px; height:241px;} #Contact_Header {background:url(images/header2.jpg) no-repeat; width:910px; height:241px;} #Logolink { float:left; position:static;} /*Navigation*/ #Nav {} #Nav ul {padding:60px 0 0 580px} #Nav li {padding:0 8px 0 8px; float:left; list-style:none;} #Nav a {font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:11px; text-decoration:none;} #Nav a:hover {font-family:Arial, Helvetica, sans-serif; color:#ea4498; font-size:11px; text-decoration:none;} #Nav a.current {font-family:Arial, Helvetica, sans-serif; color:#ea4498; font-size:11px; text-decoration:none;} #Nav_sub {} #Nav_sub ul {padding:55px 18px 0 315px} #Nav_sub li {padding:0 8px 0 8px; float:right; list-style:none;} #Nav_sub a {font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:11px; text-decoration:none;} #Nav_sub a:hover {font-family:Arial, Helvetica, sans-serif; color:#ea4498; font-size:11px; text-decoration:none;} #Nav_sub a.current {font-family:Arial, Helvetica, sans-serif; color:#ea4498; font-size:11px; text-decoration:none;} #BigNavPadding{ padding:220px 0 0 0;} #BigNav {width: 910px; height: 51px; list-style: none; background-color: #fff; padding: 0; position:relative; clear:both; display:block;} #BigNav ul {margin:0; padding:0; list-style:none} #BigNav li {float: left;} #BigNav li a span {display: none; } #BigNav li a {height: 51px; display: block; float: left; padding: 0;} #BigNav li a.construction {width:304px; background: url(images/bignav_construction.jpg) no-repeat top;} #BigNav li a.health {width:295px; background: url(images/bignav_health.jpg) no-repeat top;} #BigNav li a.legal {width:311px; background: url(images/bignav_legal.jpg) no-repeat top;} #BigNav li a:hover {background-position: bottom; } #BigNav li a.current {background-position: bottom; } /*Home Page Body text*/ #HP_Welcome {width:350px; padding:94px 0 20px 42px; float:left;} #HP_Welcome h3 {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ea4498; padding:0 0 6px 0;} #HP_Welcome h4 {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ea4498; padding:0 0 6px 0;} #HP_Welcome p {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#898989; padding:0 0 6px 0;} #HP_Emp{ width:200px; padding:94px 0 20px 60px; float:left;} #HP_Emp h3 {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ea4498; padding:0 0 6px 0;} #HP_Emp h4 {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ea4498; padding:0 0 6px 0;} #HP_Emp p {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#898989; padding:0 0 6px 0;} #HP_Job{ width:180px; padding:94px 0 20px 55px; float:left;} #HP_Job h3 {font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ea4498; padding:0 0 6px 0;} #HP_Job h4 {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#ea4498; padding:0 0 6px 0;} #HP_Job p {font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#898989; padding:0 0 6px 0;} #HP_Pic { background:url(images/hp_pic.gif) no-repeat; width:423px; height:84px; margin-top:16px; padding:0 0 0 30px; float:right;} /*Sub Pages*/ #LeftCol{ width:230px; padding:6px 10px 10px 24px; float:left;} #About_title {background:url(images/sub_title_about.gif) no-repeat; width:159px; height:26px; float:right;} #Emp_title {background:url(images/sub_title_employers.gif) no-repeat; width:159px; height:26px; float:right;} #Legal_title {background:url(images/sub_title_legal.jpg) no-repeat; width:159px; height:26px; float:right;} #Job_title {background:url(images/sub_title_jobseekers.gif) no-repeat; width:159px; height:26px; float:right;} #Contact_title {background:url(images/sub_title_contact.gif) no-repeat; width:159px; height:26px; float:right;} #SubNav {float:left; padding:16px 0 0 0; width:200px;} #SubNav ul {padding:0 0 20px 30px; margin:0} #SubNav li {list-style:none; padding:0 0 0 0; margin:0;} #SubNav a {font-family:Arial, Helvetica, sans-serif; color:#000; font-size:11px; text-decoration:none; padding-left:4px;} #SubNav a:hover {font-family:Arial, Helvetica, sans-serif; color:#000; font-size:11px; text-decoration:underline;} #SubNav a.current {font-family:Arial, Helvetica, sans-serif; color:#000; font-size:11px; text-decoration:underline;} #SideContent {background:url(images/sub_sidebar.jpg) no-repeat; background-color:#b0aeaf; width:216px; border:solid #aaa 1px; padding:10px 0 10px 0px; float:left;} #SideContent h4 {font-family:Arial, Helvetica, sans-serif; color:#ea4498; font-size:12px; text-decoration:none; padding:0px 0 4px 15px; font-weight:bold;} #SideContent p {font-family:Arial, Helvetica, sans-serif; color:#000; font-size:11px; text-decoration:none; padding:6px 0 4px 15px;} #SideContent a {font-family:Arial, Helvetica, sans-serif; color:#207cdd; font-size:11px; text-decoration:none; font-weight:bold; padding:6px 0 10px 15px;} #SideContent a:hover {font-family:Arial, Helvetica, sans-serif; color:#207cdd; font-size:11px; text-decoration:underline; font-weight:bold;} #SideContent ul {padding:6px 0 12px 40px; margin:0} #SideContent li {font-family:Arial, Helvetica, sans-serif; color:#000; font-size:11px; text-decoration:none; padding:0 0 4px 0;} #Main{ width:625px; float:left; padding:10px 0 0 10px;} #About_headline {background:url(images/sub_headline_about.gif) no-repeat; width:525px; height:40px; float:left;} #Emp_headline {background:url(images/sub_headline_emp.gif) no-repeat; width:525px; height:40px; float:left;} #EmpSer_headline {background:url(images/sub_headline_empServices.gif) no-repeat; width:525px; height:40px; float:left;} #EmpWhite_headline {background:url(images/sub_headline_empWhite.gif) no-repeat; width:525px; height:40px; float:left;} #Job_headline {background:url(images/sub_headline_job.gif) no-repeat; width:525px; height:40px; float:left;} #JobBenefits_headline {background:url(images/sub_headline_jobBenefits.gif) no-repeat; width:525px; height:40px; float:left;} #JobResources_headline {background:url(images/sub_headline_jobResources.gif) no-repeat; width:525px; height:40px; float:left;} #Legal_headline {background:url(images/sub_headline_legal.jpg) no-repeat; width:525px; height:40px; float:left;} #Contact_headline {background:url(images/sub_headline_contact.gif) no-repeat; width:525px; height:40px; float:left;} #Copy{ width:380px; float:left; padding:20px 0 0 16px;} #Copy h2{ font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#ea4498; padding:0 0 6px 0;} #Copy h3{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ea4498; padding:0 0 6px 0;} #Copy h3 a{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ea4498; padding:0 0 6px 0; text-decoration:none;} #Copy h3 a:hover{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#207cdd; padding:0 0 6px 0;} #Copy h4{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#545454;} #Copy ul{ font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#545454; padding:4px 0 10px 30px;} #Copy li{ font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#545454;} #Copy p{ font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#545454; padding:0 0 8px 0;} #Copy2{ width:570px; float:left; padding:20px 0 10px 8px;} #Copy2 h2{ font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#ea4498; padding:0 0 6px 0;} #Copy2 h3{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ea4498; padding:0 0 6px 0;} #Copy2 h4{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#545454;} #Copy2 ul{ font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#545454; padding:8px 0 10px 30px;} #Copy2 li{ font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#545454;} #Copy2 p{ font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#545454; padding:0 0 8px 0;} .box1{ width:564px; float:left; padding:10px 16px 10px 16px; background-color:#cbdbec; border:2px solid #fff;} .box2{ width:564px; float:left; padding:10px 16px 10px 16px; background-color:#e4eaf1; border:2px solid #fff;} #Copy3{ width:600px; float:left; padding:20px 0 10px 8px;} #Copy3 h2{ font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#ea4498; padding:0 0 6px 0;} #Copy3 h3{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ea4498; padding:0 0 6px 0;} #Copy3 h4{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#545454;} #Copy3 ul{ font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#545454; padding:8px 0 10px 30px;} #Copy3 li{ font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#545454;} #Copy3 p{ font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#545454; padding:0 0 8px 0;} #RightCol{ width:190px; float:left; padding:20px 0 0 30px} #About_photo {background:url(images/sub_photo1.jpg) no-repeat; width:183px; height:178px; float:left;} #Emp_photo {background:url(images/sub_photo8.jpg) no-repeat; width:183px; height:178px; float:left;} #EmpWhite_photo {background:url(images/sub_photo9-2.jpg) no-repeat; width:183px; height:178px; float:left;} #Legal_photo {background:url(images/sub_photo11.jpg) no-repeat; width:183px; height:178px; float:left;} #Job_photo {background:url(images/sub_photo6.jpg) no-repeat; width:183px; height:178px; float:left;} #Job_photo1 {background:url(images/sub_photo10.jpg) no-repeat; width:183px; height:178px; float:left;} #Job_photo2 {background:url(images/sub_photo5.jpg) no-repeat; width:183px; height:178px; float:left;} #Contact_photo {background:url(images/sub_photo2.jpg) no-repeat; width:183px; height:178px; float:left;} #About_photo2 { background:url(images/sub_photo1.jpg) no-repeat; width:183px; height:178px; float:right; margin-top:8px; margin-left:20px; margin-bottom:10px} #Contact_photo2 { background:url(images/sub_photo2-2.jpg) no-repeat; width:183px; height:178px; float:right; margin-top:4px; margin-right:16px; margin-bottom:10px;} *html #Contact_photo2 { background:url(images/sub_photo2-1.jpg) no-repeat; width:183px; height:178px; float:right; margin-top:4px; margin-right:8px; margin-bottom:10px} #Caption{ width:170px; float:left; padding:16px 0 0 10px;} #Caption h2{ font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#ea4498; padding:0 0 6px 0;} #Caption h3{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ea4498; padding:0 0 6px 0;} #Caption h4{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#545454;} #Caption ul{ font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#545454; padding:6px 0 10px 30px;} #Caption li{ font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#545454;} #Caption p{ font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#545454; padding:0 0 8px 0;} #Caption2 { width:200px; float:left; padding:16px 0 0 10px;} #Caption2 h2{ font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#ea4498; padding:0 0 6px 0;} #Caption2 h3{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#ea4498; padding:0 0 6px 0;} #Caption2 h4{ font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#545454;} #Caption2 ul{ font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#545454; padding:14px 0 20px 30px;} #Caption2 li{ font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#545454;} #Caption2 p{ font-family:Arial, Helvetica, sans-serif; font-size:11px; color:#545454; padding:0 0 8px 0;} /*Bottom Content - All pages*/ #Contact {width:910px;} #Contact p { text-align:center; font-family:Arial, Helvetica, sans-serif; font-size:10px; color:#898989; padding:2px 0 3px 0;} #Bottom { background:url(images/bottom.gif) no-repeat; width:910px; height:3px; overflow:hidden;} #Footer{ width:910px; padding-bottom:10px} #Footer ul { padding:0px 0 0 4px} #Footer li { padding:0 8px 0 0px; float:left; list-style:none; color:#FFF} #Footer a { font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:10px; text-decoration:none;} #Footer a:hover { font-family:Arial, Helvetica, sans-serif; color:#000; font-size:10px; text-decoration:none;} #Footer a.current { font-family:Arial, Helvetica, sans-serif; color:#000; font-size:10px; text-decoration:none;} #Footer span {font-family:Arial, Helvetica, sans-serif; color:#FFF; font-size:11px; text-decoration:none; float:right; padding:4px 4px 0 0;} /* -- Alsett Clearing Method*/ .clearfix:after {content: "."; display:block; height:0; clear:both; visibility:hidden;} * html .clearfix {height: 1%;} .clearfix {display: block;} .clearfix {display:inline-block;} /* Hide from IE Mac \*/ .clearfix {display:block;}