/*-------------------------------------------------------------------------- * |_ . _ _ _ |_|_ _ * |_)|(/_| |(_|| | (_) * * author: Bienalto Consulting * project: Navy Health * date: May 2012 --------------------------------------------------------------------------*/ @font-face { font-family: NavyHealth; src: url('../fonts/GothamRnd-Medium.otf'); } @font-face { font-family: NavyHealth; font-weight: bold; src: url('../fonts/GothamRnd-Bold.otf'); } /* reset */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;}/*ol,ul{list-style:none}*/table{border-collapse:collapse;border-spacing:0}caption,th,td{text-align:left;font-weight:normal;}blockquote:before,blockquote:after,q:before,q:after{content:"";}blockquote,q{quotes:"" "";}input:focus, textarea:focus {outline:none;} body {background:#fff; color:#000000; font-size: 12px; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;} strong{font-weight: bold;} h1, h2, h3, h4, p{font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;} /* fix firefox's added padding to buttons */ button::-moz-focus-inner {border: 0;padding: 0;} /* layout */ a:hover, a:focus{text-decoration: underline;} #header{ position:relative; width:100%; } #header p, #header #start-over{border:0 none; bottom:0; color:#000265; display:inline; font-size:22px; line-height:29px; position:absolute; right:0;} #header #start-over{text-decoration:none;} #header #start-over:hover, #header #start-over:focus{text-decoration: underline;} #page{position:relative; height:576px; width:915px;} #footer{background:#002659; height:63px; padding-top:14px; text-indent: -9999px; width:915px;} #logo{display:inline-block; margin-top: 15px; margin-bottom:12px;} .container{margin: 0 auto; width: 915px; position:relative;} .txt-side{position:absolute; left:0px;} .txt-side p{color:#000265; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; position:relative;} .txt-side p .blue{color: #002a66;} .txt-side p .pink{color: #ec008c;} ul{padding-left:20px;} /* landing page */ #landing-page #header{position:absolute; left:0; top: 0; z-index:200;} #landing-page #hitbox{left:174px; margin-top:65px; position:absolute; top:0; z-index:100;} #landing-page #page{background: url('../images/bg-landing.jpg') 100% 0 no-repeat transparent; height:768px; width: 915px;} #landing-page #replace-can-i-join{background: url('../images/can-i-join.jpg') 100% 0 no-repeat transparent; height:57px; left:296px; position:absolute; top: 314px; width: 313px;} #landing-page #replace-can-i-join h1{text-indent:-9999px;} #landing-page .cta{color: #ec008c; font-size:14px; line-height:14px; position:absolute; left:0px; text-align:center; text-decoration:none; top:400px; width:915px;} #landing-page .txt-side{margin-left:30px; margin-top: 105px;} #landing-page .txt-side p{font-size:16px; line-height:17px; margin-bottom:17px; width: 195px;} /* question pages */ #question1 #page{background: url('../images/bg-q1.jpg') 100% 0 no-repeat transparent;} #question2 #page{background: url('../images/bg-q2.jpg') 100% 0 no-repeat transparent;} #question3 #page{background: url('../images/bg-q3.jpg') 100% 0 no-repeat transparent;} #question4 #page{background: url('../images/bg-q4.jpg') 100% 0 no-repeat transparent;} #question5 #page{background: url('../images/bg-q5.jpg') 100% 0 no-repeat transparent;} #question6 #page{background: url('../images/bg-q6.jpg') 100% 0 no-repeat transparent;} #question7 #page{background: url('../images/bg-q7.jpg') 100% 0 no-repeat transparent;} #question8 #page{background: url('../images/bg-q8.jpg') 100% 0 no-repeat transparent;} #question9 #page{background: url('../images/bg-q9.jpg') 100% 0 no-repeat transparent;} #question10 #page{background: url('../images/bg-q10.jpg') 100% 0 no-repeat transparent;} #question11 #page{background: url('../images/bg-q11.jpg') 100% 0 no-repeat transparent;} #question12 #page{background: url('../images/bg-q12.jpg') 100% 0 no-repeat transparent;} .txt-question{left:302px; position:absolute; top:245px;} .txt-question p{color:#FFFFFF; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size:16px; line-height:18px; width:305px;} #question9 .txt-question, #question11 .txt-question{top:237px;} #question10 .txt-question, #question12 .txt-question{top:230px;} .txt-list {position:absolute; margin-left:700px; margin-top:215px;} .txt-list p{color:#000265; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size:21px; line-height:29px; position:relative;} #question4 .txt-list, #question8 .txt-list, #question12 .txt-list {margin-top:366px;} .btn-yes, .btn-no{line-height:0px; padding-left:92px; padding-top:47px; float:left; font-size:0px;} .btn-yes{background: url('../images/btn-yes.gif') 0 -47px no-repeat transparent; margin-left:332px; margin-right:62px;} .btn-no{background: url('../images/btn-no.gif') 0 -47px no-repeat transparent;} .btn-yes:hover, .btn-yes:focus, .btn-no:hover, .btn-no:focus{background-position: 0 0;} /* sorry page */ #sorry #page{background: url('../images/bg_sorry.jpg') 100% 0 no-repeat transparent;} #replace-were-sorry{background: url('../images/were-sorry.jpg') 100% 0 no-repeat transparent; height:64px; left:260px; position:absolute; top: 217px; width: 387px;} #replace-were-sorry h1{text-indent:-9999px;} #sorry .txt-side{margin-left:313px; margin-top: 420px;} #sorry .txt-side p{color:#231f20; font-size:15px; line-height:19px; text-align:center; width: 285px;} .btn-visit{background: url('../images/btn-visit.gif') 100% 0 no-repeat transparent; font-size:0px; float:left; margin-left:410px; line-height:0px; padding-left:106px; padding-top:52px;} /* congrats page */ #congrats #page{background: url('../images/bg-congrats2.png') 100% 0 no-repeat transparent;} #replace-congratulations{background: url('../images/congratulations.jpg') 100% 0 no-repeat transparent; height:67px; left:188px; position:absolute; top: 20px; width: 550px;} #replace-congratulations h1{text-indent:-9999px;} #congrats .txt-side{margin-left:139px; margin-top: 331px;} #congrats .txt-side p{font-size:14px; line-height:17px; margin-bottom:17px; width: 275px;} #congrats form{left:457px; position:absolute; top:331px; width:324px;} #congrats form label{font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; float:left; font-size:14px; line-height:15px; margin-bottom:2px; margin-top:3px; width:80px;} #congrats form input{float:left; margin-bottom:2px; width:220px;} #congrats form label#lbl-chkbox{font-size:11px; line-height:14px; margin-top:16px; width:120px;} #congrats form input#chkbox-offer{margin-left:0px; margin-right:10px; margin-top:18px; width:auto;} #congrats form input#btn-sub{background: url('../images/btn-submit.gif') 100% 0 no-repeat transparent; border: 0 none; cursor:pointer; float:right; height:29px; margin-right:20px; margin-top:14px; text-indent:-9999px; text-transform: capitalize; width:68px;} #thanks{color:#002659; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size:30px; line-height:40px; position:absolute; text-align:center; top: 185px; width:915px;} #in-touch{color:#002659; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size:16px; line-height:18px; position:absolute; text-align:center; top: 245px; width:915px;} .btn-go, .btn-join, .btn-compare{line-height:0px; padding-left:113px; padding-top:47px; font-size:0px; float:left;} .btn-go{background: url('../images/btn-go.gif') 0 0 no-repeat transparent; margin-left:255px; margin-right:30px;} .btn-join{background: url('../images/btn-join.gif') 0 0 no-repeat transparent; margin-right:30px;} .btn-compare{background: url('../images/btn-compare.gif') 0 0 no-repeat transparent;} /* congrats page footer overwrite */ #footer.footer-congrats {text-indent: 0;} .footer-congrats .light {display: block; font-weight: lighter; margin-top: 7px;} .footer-congrats .btn-go, .footer-congrats .btn-join, .footer-congrats .btn-compare{display: inline-block; width: 113px; height: 47px; padding: 0; float:left; border-radius: 13px; color: white; font-size: 15px;text-decoration: none; line-height: 16px; text-align: center;} .footer-congrats .btn-go{margin-left: 255px; margin-right: 30px; background: #68bd45;} .footer-congrats .btn-join{margin-right:30px; background: #f26222;} .footer-congrats .btn-compare{background: #92278f;} /* bottom links */ #links{padding-top:5px;} #links a{color:#231f20; text-decoration:none;} #links a:hover, #links a:focus{text-decoration: underline;} #links #link-termsconditions{float:left; margin-bottom:5px;} #links #link-navyhealth{left:390px; position:absolute;} #links #link-sendfriend{float:right;} /* ie hacks */ * html #header p, * html #header #start-over{position:static; margin-left:480px; margin-top:68px; width:155px;} * html #footer{text-indent:0; line-height:0; font-size:0; overflow:hidden;} * html .btn-visit{margin-left:385px;} * html .btn-go{margin-left:255px; margin-right: 12px;} * html .btn-join{margin-right: 8px;} #formErrors { padding: 0 0 0 80px; clear: both; font-size: 1.1em; font-weight: bold; color: #dd3300; } #formErrors div { padding-top: 7px; } #incorrectFields { display: none; visibility: hidden; text-indent: -9999in; } #new-form{ float: right; margin-left: 50px; background: none; width: 400px; top: 130px; position: absolute; right: 70px; } #thumb { width: 400px; height: auto; position: absolute; top: 130px; right: 70px; background: none; } #thumb img { position: absolute; left: 50%; transform: translateX(-50%); max-height: 446px; } /************************************************************************ * Social Media Buttons ************************************************************************/ #header .slogan { display: block; color: #28297a; font-family: "NavyHealth", Verdana, sans-serif; font-size: 19px; position: absolute; top: 15px; right: 0; } .slogan .slogan-call { float: left; height: 37px; margin-right: 18px; line-height: 37px; } .slogan .social-buttons { float: left; } .social-buttons .social-button { float: left; margin-left: 9px; } .social-buttons .social-button:first-child { margin-left: 0; } .social-button { display: block; height: 37px; width: 37px; overflow: hidden; text-indent: -99999px; } .social-email { background: url("../images/social-email.png") no-repeat; } .social-facebook { background: url("../images/social-facebook.png") no-repeat; } .social-twitter { background: url("../images/social-twitter.png") no-repeat; } .social-youtube { background: url("../images/social-youtube.png") no-repeat; }