/* ============================= NARS StyleSheet by CLANG - InSite Interactive A. Global HTML Styles B. Header Styles C. Content Area Layout Styles -LeftNav -Center Column -Right Column D. Footer Styles E. Homepage Styles F. Sitemap Styles G. Forms' Styles ============================= */ @import url("reset.css"); /* Meyer Reset Reloaded */ @import url("global.css"); /* Global Styles */ /* ===================== A. Global HTML Styles ===================== */ BODY {background:#000 url(../images/bg.jpg) repeat-x fixed; color:#666; font-family:Arial, sans-serif; font-size:100%; line-height:.95em; text-align:center;} P,H1,H2,H3,H4,H5,H6 {margin-bottom:1em; font-size:.75em;} A:link {color:#e4232f; text-decoration:underline;} A:visited {color:#b41e27; text-decoration:underline;} A:hover {color:#ff9b06; text-decoration:underline;} A:active {color:#ff9b06; text-decoration:underline;} UL {list-style:disc; padding:0 0 1.4em 1.1em; font-size:.75em;} OL {list-style:decimal; padding:0 0 1.4em 1.5em; font-size:.75em;} OL LI {vertical-align:top;} SUP {bottom:0.33em; font-size:smaller; position:relative; vertical-align:baseline;} #container {background:url(../images/containerBorder.png); /*behavior:url(includes/iepngfix.htc);*/ margin:0 auto; padding:0 7px; text-align:left; width:970px;} /* ================ B. Header Styles ================ */ #header {width:970px; background:#fff url(../images/header_bg.png) repeat-x; padding-bottom:4px;} #header p {margin-bottom:0;} #logo {float:left; width:212px; height:78px; position:relative; background:url(../images/header_logo.gif) no-repeat;} #logo a {display:block; width:100%; height:100%;} #logo span {position:absolute; left:-999em;} #nav {float:left; width:555px; height:40px; padding:38px 0 0 0;} #nav li {float:left; z-index:1000; position:relative; list-style:none; width:111px; /*height:40px;*/ background-position:0 -40px; background-repeat:no-repeat;} #nav li a {position:relative; display:block; width:100%; height:40px; background-repeat:no-repeat;} #nav li a span {position:absolute; left:-999em;} #nav li.n1, #nav li.n1 a{background-image:url(../images/header_nav_aboutNARS.gif);} #nav li.n2, #nav li.n2 a{background-image:url(../images/header_nav_newCareers.gif);} #nav li.n3, #nav li.n3 a{background-image:url(../images/header_nav_employeeTraining.gif);} #nav li.n4, #nav li.n4 a{background-image:url(../images/header_nav_railroadLinks.gif);} #nav li.n5, #nav li.n5 a{background-image:url(../images/header_nav_contactUs.gif);} #nav li a:hover {background-image:none;} .about #nav li.n1 a,.careers #nav li.n2 a,.empTrain #nav li.n3 a,.links #nav li.n4 a,.contact #nav li.n5 a {background-image:none;} /* Active States set by BODY className */ .about #nav li.n1,.careers #nav li.n2,.empTrain #nav li.n3,.links #nav li.n4,.contact #nav li.n5 {background-position:0 -80px;} /* === DropDown Styles === */ #nav li ul {display:none; position:absolute; left:0; top:40px; width:200px; height:auto; padding:0; margin:0 3px; background:#fff; border:1px solid #e3e3e3; border-top:none;} #nav li ul li {background:none !important; float:none; width:100%; height:auto; border-top:1px solid #e3e3e3;} #nav li ul li.topRow {border:none;} #nav li ul li a {background:none !important; display:block; width:188px; height:100%; padding:3px 0 3px 12px; color:#666; text-decoration:none; font-size:1.2em;} #nav li ul li a:hover {background:#ff9b06 !important; color:#fff;} #nav li ul li ul {position:relative; left:0; top:0; margin:0; border:0;} #nav li ul li ul li {border:none;} #nav li ul li ul li a {font-size:1.35em; padding:3px 0 3px 30px; width:170px; background:#f2f2f2 url(../images/leftnav_bullet.gif) no-repeat 20px 9px !important;} #nav li ul li ul li a:hover {background:#ff9b06 url(../images/leftnav_bullet_active.gif) no-repeat 20px 9px !important; color:#fff;} #nav li > ul {top:40px; left:0;} #nav li:hover ul, #nav li.over ul {display:block;} #trax {float:right; width:74px; height:78px; position:relative; background:url(../images/header_traxLogin_bg.png) no-repeat 0 42px;} #trax span {background:url(../images/header_traxLogin.gif) no-repeat 0 -42px; display:block; width:74px; height:42px;} #trax a {display:block; width:100%; height:42px; background:url(../images/header_traxLogin.gif) no-repeat;} #trax a:hover {background-image:none;} #trax a span {position:absolute; left:-999em; background-image:none;} #headerGraphic {background-color:#000; padding-bottom:3px; line-height:0; width:970px;} /* ============================= C. Content Area Layout Styles ============================= */ #contentArea {background:#fff url(../images/content_full_bg.gif) repeat-y;} #leftCols {float:left; width:693px; padding:13px 17px 0 0; background:#fff url(../images/content_left_bg.gif) repeat-x;} #leftColsBg {background:url(../images/leftCol_bg.gif) no-repeat 0 bottom; min-height:449px;} /*For Subpages*/ #navCol {float:left; width:217px; padding:0 12px 0 11px;} #centerCol {float:left; width:451px; padding:10px 0 10px 0;} #rightCol {float:left; width:217px; padding:13px 26px 13px 17px;} /* 2 Column Layout Adjustments */ #contentArea.twoColumns {background-image:none;} .twoColumns #leftCols {width:953px;} .twoColumns #centerCol {width:697px;} /* 1 Column Layout Adjustments */ .oneColumn #leftCols {width:953px;} .oneColumn #centerCol {padding-left:240px; width:697px;} /* === LeftNav === */ .leftnav_title {background:url(../images/leftnav_title.gif) no-repeat; padding:17px 19px 12px 19px; font-size:1em; color:#fff; text-transform:uppercase;} .leftnav_title span {font-weight:bold; display:block;} .leftnav_title a {color:#fff; text-decoration:none; line-height:1em;} #leftnav {background:url(../images/leftnav_tile.gif) repeat-y; padding:0 5px;} #leftnav li {border-top:1px solid #e3e3e3; list-style:none; } #leftnav li a {display:block; padding:6px 16px; color:#666; text-decoration:none;} #leftnav li a:hover {background:#e3e3e3;} #leftnav li.active a {background:#ff9b06; color:#fff;} /* Sub Nav */ #leftnav li ul {padding:0; display:none;} #leftnav li ul li {border:none; background:#f2f2f2;} #leftnav li ul li a, #leftnav li.active ul li a {padding:4px 16px 4px 34px; color:#666; background:url(../images/leftnav_bullet.gif) no-repeat 25px 9px; font-size:1.2em;} #leftnav li ul li a:hover {background:#e3e3e3 url(../images/leftnav_bullet.gif) no-repeat 25px 9px;} #leftnav li ul li.active a {background:#ff9b06 url(../images/leftnav_bullet_active.gif) no-repeat 25px 9px !important; color:#fff;} .leftnav_bottom {width:217px; height:14px; background:url(../images/leftnav_bottom.gif) no-repeat; margin-bottom:165px;} /* === Center Column === */ #centerColTop {width:100%; height:23px; background:url(../images/content_border_TR.gif) right top no-repeat;} #centerColTopLft {width:10px; height:23px; background:url(../images/content_border_TL.gif) no-repeat;} #centerColMid {position:relative; border:2px solid #d9d9d9; border-width:0 2px; background:#fff; margin-bottom:-1em; padding:20px 45px 0 30px;} .twoColumns #centerColMid, .oneColumn #centerColMid {padding-right:150px;} #centerColBt {width:100%; height:23px; background:url(../images/content_border_BR.gif) right top no-repeat;} #centerColBtLft {width:10px; height:23px; background:url(../images/content_border_BL.gif) no-repeat;} #centerColMid h1 {color:#e4232f; font-size:1.3em; margin-bottom:.8em; font-weight:normal;} #centerColMid h2 {font-weight:bold; font-size:.85em; /*color:#ff9b06;*/ font-style:italic;} #centerColMid h3 {font-weight:bold; margin-bottom:0;} #centerColMid UL {list-style:none; padding-left:20px;} #centerColMid UL LI {background:url(../images/bullet_arrow.gif) no-repeat 0 4px; padding-left:13px; padding-bottom:.2em;} /*Adds arrow bullet to UL's*/ #downloadApp {position:absolute; z-index:1; right:15px; top:-33px; width:171px; height:33px; background:url(../images/content_downloadApp.png) no-repeat;} #downloadApp a {display:block; width:100%; height:100%;} #downloadApp span {position:absolute; left:-999em;} #downloadApp:hover { background:url(../images/content_downloadApp-over.png); } .centerColMidPhotoRt {float:right; margin:0 -30px 10px 19px;} .factSource {font-style:italic; font-size:.8em; display:block; text-align:right;} /* Content Callout Box */ .contentCallout {border:1px solid #d9d9d9; border-bottom:0; margin-bottom:1.3em;} .contentCallout h3 {padding:.3em .5em; border-bottom:1px solid #d9d9d9; background:#eee;} .contentCallout ul, .contentCallout ol {list-style:none; padding:0 !important;} .contentCallout li {border-bottom:1px solid #d9d9d9; padding:.3em .5em !important; background-image:none !important;} .faqsListing {padding:10px 30px 10px 0 !important; margin-bottom:20px; border:1px solid #d9d9d9; border-width:2px 0;} .faqsListing li {padding-bottom:.4em;} p.backToTop {text-align:right;} p.backToTop a {background:url(../images/bullet_upArrow.gif) no-repeat 0 6px; padding-left:13px;} /* === Right Column === */ #rightCol .callout {background:url(../images/rightCol_tile.gif) repeat-y;} #rightCol .callout h3 {background:url(../images/rightCol_titleTop.gif) repeat-y; min-height:7px; padding:18px 18px 14px 18px; margin-bottom:13px; color:#fff; font-size:1em; font-weight:normal; text-transform:uppercase;} #rightCol .callout h3 span {font-weight:bold;} #rightCol .callout p {padding:0 18px .2em 18px; margin:.6em 0 0 0;} #rightCol .callout p.photo {padding:0 5px; margin-top:-13px;} #rightCol .calloutBt {/*width:216px; */height:12px; background:url(../images/rightCol_bottom.gif) no-repeat; margin-bottom:8px;} #rightCol .callout ul, #rightCol .callout ol {padding:0 18px .2em 36px;} /* ================ D. Footer Styles ================ */ #footer {background:url(../images/footer_border.png) no-repeat; /*behavior:url(includes/iepngfix.htc);*/ margin:0 auto; text-align:left; width:984px;} #footer p {margin-bottom:0;} #footer ul {float:left; list-style:none; padding:0 0 7px 7px; height:52px;} #footer ul li {float:left; background-repeat:no-repeat; background-position:0 -52px; height:52px;} #footer ul li a {display:block; position:relative; width:100%; height:100%; background-repeat:no-repeat;} #footer ul li a span {position:absolute; left:-999em;} #footer ul li.ft1, #footer ul li.ft1 a {background-image:url(../images/footer_contactUs.gif); width:79px;} #footer ul li.ft2, #footer ul li.ft2 a {background-image:url(../images/footer_sitemap.gif); width:59px;} #footer ul li.ft3, #footer ul li.ft3 a {background-image:url(../images/footer_privacyPolicy.gif); width:76px;} #footer ul li a:hover {background-image:none;} #footer_mid {float:left; width:540px; height:52px; background:url(../images/footer_bg.png) repeat-x;} #footer_tagline {float:left; position:relative; width:216px; height:52px; background:url(../images/footer_tagline.gif) no-repeat right top;} #footer_tagline span {position:absolute; left:-999em;} #footer_copyright {float:left; padding:17px 0 20px 24px; font-size:.7em; color:#999; line-height:1.2em; width:98px;} #footer_address {float:right; padding:17px 24px 20px 0; font-size:.7em; color:#999; line-height:1.2em; text-align:right;} /* ================== E. Homepage Styles ================== */ #homeNewCareers {float:left; margin:0 16px 10px 13px; background:url(../images/home_calloutTile.gif) no-repeat 0 bottom; width:332px; min-height:116px;} #homeNewCareers h2 {background-image:url(../images/home_callout_newCareers.gif);} #homeEmpTraining {float:left; margin:0 0 10px 0; background:url(../images/home_calloutTile.gif) no-repeat 0 bottom; width:332px; min-height:116px;} #homeEmpTraining h2 {background-image:url(../images/home_callout_employeeTraining.gif);} .calloutTop {width:332px; min-height:100px; background:url(../images/home_calloutTop.gif) no-repeat;} .calloutTop h2 {position:relative; background-repeat:no-repeat; background-position:23px 21px; width:207px; height:17px; padding:21px 0 0 23px;} .calloutTop h2 span {position:absolute; left:-999em;} .calloutTop h3 {margin:0 15px 0 23px; padding:0; font-weight:bold;} .calloutTop p {margin:0 23px 8px 23px;} .calloutBottom {width:332px; height:28px; background:url(../images/home_calloutBottom.png) no-repeat; behavior:url(includes/iepngfix.htc);} .calloutBottom p {margin:0 0 0 232px; width:74px; height:21px;} .calloutBottom p a {position:relative; display:block; width:100%; height:100%; background:url(../images/home_callout_moreButton.gif) no-repeat;} .calloutBottom p a span {position:absolute; left:-999em;} #homeWelcome {background:url(../images/home_calloutWide_tile.gif) no-repeat 0 bottom; width:680px; min-height:254px; margin:0 0 13px 13px;} #homeWelcome h1 {background:url(../images/home_calloutWide_title.gif) no-repeat 0 33px; padding-top:33px; margin:0 0 .4em 246px; position:relative; width:409px; height:17px;} #homeWelcome h1 span {position:absolute; left:-999em;} .calloutWideTop {width:100%; min-height:226px; background:url(../images/home_calloutWide_top.gif) no-repeat;} .calloutWideTop p {margin-left:246px; margin-right:35px;} #calloutWidePhoto {float:left; margin:-45px 12px 0 12px; padding:0;} .calloutWideBottom {width:100%; height:28px; background:url(../images/home_calloutWide_bottom.png) no-repeat; behavior:url(includes/iepngfix.htc);} .calloutWideBottom p {margin:0 0 0 580px; width:74px; height:21px;} .calloutWideBottom p a {position:relative; display:block; width:100%; height:100%; background:url(../images/home_callout_moreButton.gif) no-repeat;} .calloutWideBottom p a span {position:absolute; left:-999em;} /* ================= F. Sitemap Styles ================= */ .sitemapCol {float:left; padding:0 0 20px 40px;} .sitemapColRt {float:left; margin-right:-40px; padding:0 0 20px 90px;} #sitemap h2 {margin:.8em 0 .3em 0;} #sitemap h2 a {color:#666; text-decoration:none;} #sitemap ul {list-style:none; padding-left:0 !important;} #sitemap ul li {line-height:1.5em; background:none;} #sitemap ul li a {color:#666; text-decoration:none; padding:0 0 0 10px; background:url(../images/leftnav_bullet.gif) no-repeat 0 5px;} #sitemap ul li ul {font-size:1em; margin:0 0 0 10px; padding-bottom:0} /* ================ G. Forms' Styles ================ */ form {width:100%; margin-left:-20px;} /* === Labels === */ label {float:left; display:block; width:160px; text-align:right; padding-right:10px; font-weight:bold; font-size:.75em;} p.fakeLabel {float:left; display:block; width:160px; text-align:right; padding-right:10px; font-weight:bold; font-size:.75em;} .shortLabel {width:auto; padding-left:10px;} .stateLabel {width:auto; padding-left:30px;} label span {display:none;} label.checkbox {float:none; width:auto; display:inline; text-align:left; padding:0; font-weight:normal;} /* === Form Fields === */ input {float:left; height:20px; border:1px solid #999; color:#666; margin:-2px 0 1em 0; } select {float:left; width:225px; height:22px; margin-bottom:1em;} textarea {float:left; width:339px; height:100px; font-size:.8em; color:#666; font-family:arial,sans-serif;} .stateSelect {width:auto;} input.checkbox {float:none; height:auto; margin:0; border:none;} .checkboxCol {float:left; margin-right:15px; margin-bottom:1em;} .namesInput {width:113px;} .longInput {width:339px;} /*See master_IE.css for IE tweak*/ @media screen and (-webkit-min-device-pixel-ratio:0){.longInput {width:337px;}} /*Safari Hack*/ .zipInput {width:50px;} .submitButton {width:auto; height:auto; float:right; padding:3em 0; margin:0; border:none;}