/*general site-wide styles */ body, div {margin:0;padding:0; position:relative;} body {background:url(images/background.jpg);background-repeat:no-repeat;background-position:00px 430px;font-family:"Trebuchet MS", arial, sans-serif;padding-top:12px;} body.popup {background:none;padding-top:12px;} ul {margin-top:0px; padding:top:0px; margin-bottom:0px; padding-bottom:0px;} form {margin:0;padding:0;} a, a:visited {color:#145491; font-weight:bold; text-decoration:none;cursor:pointer;} a:hover, a:visited:hover {text-decoration:underline;cursor:pointer;} .highlight {color:#144a91} h1 {margin:0px; padding:0px;font-size:20px; line-height:18px; color:#145491;font-weight:bold; text-transform:uppercase; text-align:right:display:inline} h2 {font-size:40px; line-height:33px;margin:0px; padding:0px; padding-top:16px;padding-bottom:6px} h3 {padding-top:12px; color:#145491; font-size:18px; padding-bottom:8px; margin:0px;} /* clears floated divs */ .clearer {clear:both;display:block;height:0px;} /* page layout styles */ #header {width:990px;margin-left:auto;margin-right:auto; text-align:right;} #header img {float:left;} #nav {width:990px; margin-left:auto; margin-right:auto; margin-bottom:12px; margin-top:12px; background-image:url(images/nav_bg_off.gif); display:block; border-top:1px solid #999; border-bottom:1px solid #999;} #nav img {position:absolute; z-index:100; top:0px; left:0px;} #nav a, #nav a:visited {display:block;background-repeat:repeat;height:33px; width:139px;line-height:33px;text-align:center; float:left;border-right:1px solid #999;text-decoration:none; color:#fff;z-index:100} #nav a.on { background-image:url(images/nav_bg_on.gif); cursor:pointer;} #nav a:hover { background-image:url(images/nav_bg_on.gif);cursor:pointer;} #nav a.last {width:149px;border-right:none;} #nav .nav_border_left {position:absolute; top:-1px; left:0px;width:4px; height:35px; background-image:url(images/nav_border_left.gif);background-repeat:no-repeat;} #nav .nav_border_right {position:absolute; top:-1px; left:986px;width:4px; height:35px; background-image:url(images/nav_border_right.gif);background-repeat:no-repeat;} #nav2 a, #nav2 a:visited {display:block;background-repeat:repeat;height:33px; width:149px;line-height:33px;text-align:center; float:left;border-right:1px solid #999;text-decoration:none; color:#fff;z-index:100;font-size:12px;} #nav2 a.on { background-image:url(images/nav_bg_on.gif); cursor:pointer;} #nav2 a:hover { background-image:url(images/nav_bg_on.gif);cursor:pointer;} #nav2 a.last {border-right:none;} #nav2 {width:300px; margin-bottom:12px; margin-top:12px; background-image:url(images/nav_bg_off.gif); display:block; border-top:1px solid #999; border-bottom:1px solid #999;} #nav2 .nav_border_left {position:absolute; top:-1px; left:0px;width:4px; height:35px; background-image:url(images/nav_border_left.gif);background-repeat:no-repeat;} #nav2 .nav_border_right {position:absolute; top:-1px; left:296px;width:4px; height:35px; background-image:url(images/nav_border_right.gif);background-repeat:no-repeat;} #footer {text-transform:uppercase; font-size:10px; width:990px; margin-left:auto; margin-right:auto; text-align:center;padding-top:10px;} .watch a, .watch a:visited {color:#900;cursor:pointer} .watch a:hover, .watch a:visited:hover {text-decoration:none;cursor:pointer} #home, #why_dispense, #howitworks, #pro-forma, #faq, #company_info, #contact {margin-left:auto;margin-right:auto;background-repeat:no-repeat;width:990px;font-size:14px; line-height:16px;} /* page specific styles */ #home {background:url(images/bg_home.jpg); height:450px;font-size:16px; line-height:18px;} #why_dispense {background:url(images/bg_dispense.jpg);height:646px;} #pro-forma {background:url(images/bg_proforma.jpg);height:646px;} #howitworks {background:url(images/bg_how_it_works.gif); height:955px;} #faq {background:url(images/bg_faq.jpg);height:4580px;} #company_info {background:url(images/bg_company.jpg);height:646px;} #contact {background:url(images/bg_contact.jpg);height:646px;} #home h2 {padding-left:376px;} #home .copy {padding-left:376px;} #why_dispense h2, #pro-forma h2, #howitworks h2, #faq h2, #company_info h2, #contact h2, #why_dispense .copy, #pro-forma .copy, #howitworks .copy, #faq .copy, #company_info .copy, #contact .copy {padding-left:440px;padding-bottom:18px;padding-right:10px; } #home .watch {color:#990000;font-size:18px; line-height:15px; text-transform:uppercase;position:absolute; width:121px; height:56px;right:0px; bottom:0px;} #why_dispense .watch, #pro-forma .watch, #howitworks .watch, #faq .watch, #company_info .watch, #contact .watch {color:#990000;font-size:18px; line-height:15px; text-transform:uppercase;position:absolute; width:121px; height:56px;right:0px; top:10px;} form.proforma {line-height:30px;} form.proforma input.numbers{width:33px;} #hiw_graph {line-height:18px; font-size:14px;font-weight:bold;} #hiw_graph h2{position:absolute; top:12px; left:22px; font-size:24px;padding-left:0px;color:#144a91;padding:0px; margin:0px;} #hiw_graph .step1 {position:absolute; top:160px; left:22px;} #hiw_graph .step2 {position:absolute; top:190px; left:254px;} #hiw_graph .step3 {position:absolute; top:450px; left:272px;} #hiw_graph .step4 {position:absolute; top:480px; left:33px;} #hiw_graph span {font-size:24px;} /* smallboxes currently only used on home but can be reused on other pages */ #smallboxes {width:990px; margin-left:auto;margin-right:auto;margin-top:12px; } .smallbox {background:url(images/bg_smallbox.gif); width:485px; height:100px; background-repeat;no-repeat;font-size:11px; line-height:14px; } .smallbox img {float:left; margin:8px;margin-right:0px} .smallbox a {float:right;padding-top:12px; padding-right:12px;} .smallbox .copy {width:382px; float:right; text-align:left;} .smallbox ul {margin-left:17px; padding-left:0px;} #smallboxes #left {float:left;} #smallboxes #right {float:right;}