@import url("reset.css");

img { behavior: url(/iepngfix.htc); }

/* Skip Navigation */
.screenReaderMenu {position:absolute; top:-1000px; left:-1000px; font-size:1px; line-height:1px;}

/* Container */
#container {width:997px; margin:0 auto;background:url('../Images/contentBg.gif') repeat-y top left #fff;text-align:left;}

/* Form */
/*#contactForm { display:none; }*/
#contactForm {background:#fff url('../Images/contactFormBg.gif') no-repeat top left; height:171px; position:relative; z-index:100;float:left;width:997px;}
#contactForm #formDiv {position:absolute; top:33px; left:325px; width:620px;} 
#contactForm #formDiv #inputArea {float:left; width:270px;}
#contactForm #formDiv #inputArea label {float:left; width:127px; text-align:right; padding:3px 3px 0 0; color:#fff; font-size:1.1em; font-weight:bold;}
#contactForm #formDiv #inputArea .inputWrapper {float:left; background:#c7dd5a url(../Images/inputRounded.gif) no-repeat top left; width:136px; height:23px;padding:1px 0 0 4px;}
#contactForm #formDiv #inputArea .inputWrapper .inputfield {border:0px none; width:127px; height:15px; margin:0; font-family:"Trebuchet MS",Tahoma,Verdana,Helvetica,sans-serif; color:#808080; font-size:1.1em; background:#eff5d3;}
#contactForm #formDiv #inputArea .row {clear:both;padding:2px 0; }
#contactForm #formDiv #textinputArea {float:left; margin:0 0 0 3px; width:220px;}
#contactForm #formDiv #textinputArea label {text-align:left; padding:7px 0 3px 0; color:#fff; font-size:1.1em; font-weight:bold;}
#contactForm #formDiv #textinputArea .textareaWrapper {float:left; background:url(../Images/textareaRounded.gif) no-repeat top left; width:215px; height:83px;padding:2px 0 0 4px;}
#contactForm #formDiv #textinputArea .textareafield {border:0px none; width:205px; height:75px;font-family:"Trebuchet MS",Tahoma,Verdana,Helvetica,sans-serif; color:#808080; font-size:1.1em; background:#eff5d3; position:relative; z-index:101;}
#contactForm #formDiv #submitArea {float:left; margin:0 0 0 2px; width:125px; }
#contactForm #formDiv #submitArea #closeButton {text-align:right; cursor:pointer; padding:0 10px;}
#contactForm #formDiv #submitArea #errorMessages {height:60px; padding:5px 0; font-size:1.1em; color:#903;}
#contactForm #formDiv #submitArea #submitButton {}
#contactForm #formDiv .Error {  }
#contactForm #formResultsDiv {display:none; position:absolute; top:17px; left:311px; z-index:102;}
#contactForm #formResultsDiv #successMessage { background:#c7dd5a url('../Images/successMessageBg.gif') no-repeat top left; width:638px; height:145px;}
#contactForm #formResultsDiv #successMessage #closeButtonSuccess {text-align:right; cursor:pointer; padding:16px 14px 0 0;}
#contactForm #formResultsDiv #successMessage p { color:#fff; font-size:1.2em; font-weight:bold;padding:25px 0 0 17px; }

/* Header */
#header {height:155px; width:997px; position:relative; background:url('../Images/header.gif') 100% 0 no-repeat #fff; float:left;}
#header .logo {position:absolute; top:31px; left:58px;}
#header .openForm {position:absolute; top:2px; left:715px; cursor:pointer;} 

/* Navigation */
#navigation {width:926px; margin:0 0 20px 0;}
#nav {margin-left:0; padding:0; list-style:none; display:inline; overflow:hidden;}
#nav li {margin:0; padding:0; list-style:none; display:inline;}
#nav a {float:left; padding:35px 0 0 0; overflow:hidden; height:0px !important;}
#nav a:hover {background-position:0 -35px;}
#nav a:active, #nav a.selected {background-position:0 -35px;}
#twhat a  {width:289px; background:url("../Images/what-is-onboarding-button.gif") top left no-repeat;}
#twork a  {width:289px; background:url("../Images/how-does-it-work-button.gif") top left no-repeat; margin:0 0 0 29px;}
#tbenefits a  {width:289px; background:url("../Images/what-are-the-benefits-button.gif") top left no-repeat; margin:0 0 0 29px;}
#nav span {display:none;}

/* Content */
#content { padding:15px 0 0 35px; float:left; }
#content #promoFeature {padding:0 0 25px 0;}
#content #subPromoFeature {height:175px; width:926px;margin:0 0 25px 0;}
#content #demoFeature { }
#content #demoFeature .back { margin:10px 0 0 15px; }

#content #lftBox {float:left; margin:0; width:287px;}
#content #lftBox .copy {padding:0 0 0 15px;}
#content #ctrBox {float:left; margin:0 0 0 21px; width:287px;}
#content #rgtBox {float:left; margin:0 0 0 21px; width:287px;}
#content #lftBox .heading {width:289px;height:35px;background:url("../Images/what-is-onboarding-button.gif") top left no-repeat; margin:0 0 40px 0; cursor:pointer;}
#content #lftBox .heading:hover {background:url("../Images/what-is-onboarding-button.gif") top left no-repeat;background-position:0 -35px;} 
#content #ctrBox .heading {width:289px;height:35px;background:url("../Images/how-does-it-work-button.gif") top left no-repeat; margin:0 0 40px 0; cursor:pointer;}
#content #ctrBox .heading:hover {background:url("../Images/how-does-it-work-button.gif") top left no-repeat;background-position:0 -35px;} 
#content #rgtBox .heading {width:289px;height:35px;background:url("../Images/what-are-the-benefits-button.gif") top left no-repeat; margin:0 0 40px 0; cursor:pointer;}
#content #rgtBox .heading:hover {background:url("../Images/what-are-the-benefits-button.gif") top left no-repeat;background-position:0 -35px;} 
#content #lftBox h2,#content #ctrBox h2,#content #rgtBox h2 {display:none;}
#content #ctrBox .copy, #content #rgtBox .copy {padding:0 0 0 15px;border-left:2px solid #ccc;}
#content #ctrBox .copy img, #content #rgtBox .copy img {margin:0 0 10px 0;}
#content #subLftBox {float:left; margin:0; width:250px; padding:0 0 0 30px;}
#content #subLftBox .viewDemo {text-align:center;}

#content #subRgtBox {float:left; margin:0; width:600px; margin:0 0 0 45px;}
#content #subRgtBox ul { margin:20px 15px;color:#808080;font-size:1.3em;list-style-image: url("../Images/bullet.gif"); }
#content #subRgtBox ul li { margin:0 0 0.8em 0; }
#content #whatHeading {background:url("../Images/what-is-onboarding-heading.gif") no-repeat top left; height:34px; width:293px; margin:0 0 30px 0;}
#content #workHeading {background:url("../Images/how-does-it-work-heading.gif") no-repeat top left; height:34px; width:293px; margin:0 0 30px 0;}
#content #benefitsHeading {background:url("../Images/what-are-the-benefits-heading.gif") no-repeat top left; height:34px; width:360px; margin:0 0 30px 0;}
#content #pagenotfoundHeading {background:url("../Images/page-not-found-heading.gif") no-repeat top left; height:34px; width:450px; margin:0 0 30px 0;}
#content #errorHeading {background:url("../Images/error-heading.gif") no-repeat top left; height:34px; width:80px; margin:0 0 30px 0;}
#content #whatHeading h1,#content #workHeading h1,#content #benefitsHeading h1,#content #pagenotfoundHeading h1,#content #errorHeading h1 {display:none;}
#content #graph { float:right;margin:0 0 0 5px; }
#content .moreInfo { font-size:1.2em; }


/* Footer */
#footer {background:url('../Images/footer.gif') no-repeat top left #fff; height:40px;}
#footerInfo {padding:15px 35px 0 35px; font-size:1.1em; background:#fff; border:0px #000 solid;}
#footerInfo ul {clear:both; list-style:none; margin:2px 0 0 0; padding:0;float:left;}
#footerInfo ul li {display:block; float:left; padding:0 5px;border-right:1px solid #808080;}
#footerInfo ul li.first {padding-left:0;}
#footerInfo ul li.last { border-right:none }
#footerInfo #knowMore {float:right;}
#footerInfo #knowMore .knowMoreLft {background:#fff url('../Images/knowMoreBg.gif') repeat-y top left; width:117px; color:#fff; display:block; float:left; padding:2px 0 2px 3px; font-weight:bold; }
#footerInfo #knowMore .knowMoreRgt {color:#808080; display:block; float:left; height:18px; padding:2px 0 0 5px;}
#footerInfo p.legal {padding:5px 0 0 0; margin:0; color:#bfbfbf; font-size:1.1em;}
#footerInfo a {font-weight:bold; color:#808080;}
#footerInfo a:hover {font-weight:bold; color:#333;}
#footerInfo a.whtLink {font-weight:bold; color:#fff;}
#footerInfo a.whtLink:hover {font-weight:bold; color:#fff;}

/* Common */
.clear {clear:both;}
img { border:0px; }
.italics { font-style:italic; color:#bdd73e; margin-left:40px;}

a.greyBack { background:#dcdcdc;padding:0 5px;color:#808080; }
a.greyBack:visited { background:#dcdcdc;color:#808080; }
a.greyBack:hover { background:#bdd73e;color:#fff; }
a.greyBack:active { background:#bdd73e;color:#fff; }
a.moreInfoLink { background:#dcdcdc; padding:0 5px; color:#808080; }
a.moreInfoLink:visited { background:#dcdcdc; color:#808080; }
a.moreInfoLink:hover { background:#bdd73e; color:#fff; }
a.moreInfoLink:active { background:#bdd73e; color:#fff; }