/*:: Framework 1.5.4 ------------------------------------- */ /* - Modified E.Meyer Style Reset v1.0 | 20080212 - */ 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, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent;} body {line-height: 1;} blockquote, q {quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: '';content: none;} :focus {outline: 0;} ins {text-decoration: none;} del {text-decoration: line-through;} table {border-collapse: collapse;border-spacing: 0;} /* - Clear Fix Based On http://www.positioniseverything.net/easyclearing.html - */ .cf:after{content: "."; display: block; height: 0; clear: both; visibility: hidden;} .cf{display: inline-block;} * html .cf{height: 1%;} .cf{display: block;} /*:: Body ------------------------------------- */ body{font-family:Arial, Helvetica, Sans-Serif; font-size:11px; background-color:#b2d4f0; background-position:bottom center; background-repeat:no-repeat; background-attachment:fixed} body.r1024{background-image:url(images/bg-1024.jpg);} body.r1280{background-image:url(images/bg-1280.jpg);} body.r1680{background-image:url(images/bg-1680.jpg);} body.r1920{background-image:url(images/bg-1920.jpg);} /*:: Header ------------------------------------- */ #header{background:url(images/bg-header.png) no-repeat top left; width:758px; height:68px; margin:0 auto 26px auto;} #header h1{float:left;} #header h1 a{background:url(images/ir-logo.png) no-repeat top left; display:block; width:286px; height:32px; text-indent:-1000em; margin:10px 0 0 19px} #header h2 {background:url(images/ir-tagline.png) no-repeat top left; float:left; clear:left; width:288px; height:14px; text-indent:-1000em; margin:3px 0 0 19px} #header #focusLink{background:url(images/ir-focusLink.png) no-repeat top left; float:right; width:119px; height:25px; text-indent:-1000em; margin:10px 9px 0 0;} /* - Dropdown - */ #header ul{list-style:none; float:right; clear:right; margin:14px 4px 0 0; width:131px; position:relative; z-index:1000;} #header ul li{background:url(images/ir-moreLink.png) no-repeat top center; position:relative; height:13px;} #header ul li a{display:block; height:13px; width:100%; text-indent:-1000em;} #header ul li ul{background:#e8d666; position:absolute; left:-1000em; float:none; margin:0; padding:2px 0 0 0;} #header ul li:hover, #header ul li.on ul{left:0; z-index:100;} #header ul li ul li{background:none; height:auto; height:21px;} #header ul li ul li a{color:#000; text-decoration:none; text-decoration:none; font-size:12px; line-height:21px; text-indent:0; padding:0 0 0 4px; height:21px;} #header ul li ul li a:hover{background:#74cbc8; margin-left:-4px; padding-left:8px; width:131px;} /*:: Login Box ------------------------------------- */ #logincontainer{position:absolute; top:-20px; z-index:100;} #loginTab{padding:0 0 0 2px; float:right;} #loginTab div{white-space:nowrap; text-align:center; padding:2px 4px 0 0; height:20px;} #loginTab div a{text-decoration:none; color:#000; display:block; line-height:20px; padding:0 18px;} #login{clear:both; padding-top:6px; width:226px; display:none; position:absolute; right:0; top:20px;} #login #loginNest{height:100%;} .homeLogin{right:215px;} .homeLogin #loginTab{background:url(images/bg-loginLeft.png) no-repeat top left;} .homeLogin #loginTab div{background:url(images/bg-loginRight.png) no-repeat top right;} .homeLogin #login{background:url(images/bg-loginTop.png) no-repeat top left;} .homeLogin #login #loginNest{background:url(images/bg-loginBottom.png) no-repeat bottom left;} .internalLogin{right:222px;} .internalLogin #loginTab{background:url(images/bg-internalLoginLeft.png) no-repeat top left;} .internalLogin #loginTab div{background:url(images/bg-internalLoginRight.png) no-repeat top right;} .internalLogin #login{background:url(images/bg-internalLoginTop.png) no-repeat top left;} .internalLogin #login #loginNest{background:url(images/bg-internalLoginBottom.png) no-repeat bottom left;} #login #loginNest #loginNestNest{padding:40px 13px 13px 11px; clear:both; background:transparent; position:relative;} #login #loginNest #loginNestNest a.close{display:block; text-indent:-1000em; width:17px; height:17px; background:url(images/btn-close.gif) no-repeat top left; position:absolute; top:5px; left:11px;} #login #loginNest #loginNestNest a.close:hover{background-position:bottom left;} #login #loginNest #loginNestNest h4{color:#1595d3; font-size:12px; font-weight:bold; position:absolute; top:7px; left:33px;} #login p{color:#1595d3; font-size:12px; text-align:center; padding:0 0 20px 0; clear:both; line-height:14px;} #login p a{color:#1595d3;} #login label{color:#1595d3; display:block; padding-bottom:3px;} #login label a{float:right; font-size:10px; color:#1595d3; text-decoration:none; width:110px;} #login label a:hover{text-decoration:underline;} #login input{border:1px solid #97d6d4; width:200px;} #login #passwordLabel, #login #confirmPasswordLabel{padding-top:20px;} #login #passwordLabel{float:left; width:100%;} #login #passwordLabel span{float:left; width:60px;} #login input.submit{background:#72cac8; color:#fff; border:1px solid #1595d3; cursor:pointer; font-size:12px; width:70px; margin:20px 0 20px 66px; height:22px; padding-bottom:4px;} #login .error{color:#cf3a38; font-size:8px;} /*:: Content ------------------------------------- */ #content{width:924px; margin:0 auto 50px auto; position:relative;} #lCol, #homeModalTop, #cColTop, #rCol{float:left;} #lCol, #rCol{width:222px;} .contentBuffer{background:#fff;} .controls{float:right; height:36px; background-repeat:no-repeat; background-position:top left; margin:6px 0 0 6px; text-indent:-1000em;} .controls:hover{background-position:bottom left;} /* - Left Column - */ #lCol ul{list-style:none;} #lCol ul li{height:44px; width:204px; background:url(images/bg-nav.png) no-repeat bottom left; padding:2px 4px 4px 2px;} #lCol ul li.off{background-position:top left;} #lCol ul li.off a{cursor:default;} #lCol ul li.off a:hover span{background-position:left top;} #lCol ul li.on{height:auto; padding:2px 0 0 2px; width:220px; background:url(images/bg-navOnTop.png) no-repeat top left; margin-bottom:4px;} #lCol ul li a{display:block; height:44px; position:relative;} #lCol ul li a:hover span{background-position:left -25px;} #lCol ul li.done a, #lCol ul li.incomplete a, #lCol ul li.on a{cursor:pointer;} #lCol ul li a span{display:block; height:25px; position:absolute; width:243px; left:-35px; text-indent:-1000em; background-repeat:no-repeat; background-position:left 0; margin-top:7px;} #lCol ul li.incomplete a span{background-position:left -50px;} #lCol ul li.done a span{background-position:left -75px;} #navYourHome span{background-image:url(images/ir-yourHome.png);} #navYourEnergySupply span{background-image:url(images/ir-yourEnergySupply.png);} #navYourEnergyUse span{background-image:url(images/ir-yourEnergyUse.png);} #navResults span{background-image:url(images/ir-results.png);} /* - Sub Navigation - */ #lCol ul li ul{display:none; padding:0 0 10px 8px; background:url(images/bg-navOnBottom.png) no-repeat top left; margin-left:-2px;} #lCol ul li.on ul{display:block;} #lCol ul li.on ul li{height:27px; width:190px; border-width:1px 1px 0 1px; border-style:solid; border-color:#fff; padding:0; background:none; margin:0;} #lCol ul li.on ul li.last{border-bottom:1px solid #fff;} #lCol ul li.on ul li a{background-color:#a8d169; line-height:27px; width:185px; height:27px; text-indent:0; font-weight:normal; text-decoration:none; color:#fff; padding-left:5px; font-size:11px; margin-left:0;} #lCol ul li.on ul li a:hover{background-color:#8CC63F;} #lCol ul li.on ul li.on{border-right:0; border-top:0; height:28px;} #lCol ul li.on ul li.on a{width:205px; background:url(images/bg-navSubOn.png) no-repeat top left; padding-top:1px;} #lCol ul li.on ul li.on a:hover{background-color:Transparent;} #lCol ul li.on ul li.done a, #lCol ul li.on ul li.incomplete a{background-repeat:no-repeat; background-position:right center;} #lCol ul li.on ul li.done a{background-image:url(images/bg-navSubDone.png);} #lCol ul li.on ul li.incomplete a{background-image:url(images/bg-navSubIncomplete.png);} /* - Grading Key - */ #lCol #gradingKey h3{height:27px; background:#a8d169 url(images/bg-gradingKey.gif) no-repeat top left; text-indent:-1000em;} #lCol #gradingKey li.key{background:#fff; padding-top:8px; height:auto; line-height:12px; margin-top:-1px;} #lCol #gradingKey li.last{padding-bottom:8px;} #lCol #gradingKey li.key img{float:left; margin:1px 6px 0 8px;} /* - Center Column - */ #cColTop{margin-left:-2px; background:url(images/bg-cColTop.png) no-repeat top left; padding-top:8px;} #cColBottom{background:url(images/bg-cColBottom.png) no-repeat bottom left; padding-bottom:10px;} #cCol{width:464px; background:url(images/bg-cCol.png) repeat-y top left; padding:0 10px 0 8px;} #cCol #contentBuffer{height:409px; background:#fff url(images/bg-contentBuffer.gif) repeat-y top right;} html>body #cCol #contentBuffer{height:auto; min-height:415px;} #cCol .controls{width:108px; margin-right:-4px;} #cCol #btnLast{background-image:url(images/btn-last.gif);} #cCol #btnNext{background-image:url(images/btn-next.gif);} #cCol #btnEmail{background-image:url(images/btn-email.gif); width:172px; position:relative; z-index:100;} #cCol #btnEmail a{display:block; height:36px; width:100%;} #cCol #btnEmail div.emailForm{text-indent:0; right:-7px; bottom:38px;} #cCol #btnEmail div.emailForm a{text-indent:-1000em; float:left; width:17px; height:17px; background:url(images/btn-close.gif) no-repeat top left; margin:5px 0 0 5px; padding:0; clear:left;} #cCol #btnEmail div.emailForm a:hover{background-position:bottom left;} #cCol .col2{float:left; width:188px; padding:3px 0 0 4px;} /* - Right Column - */ #rCol #tallyTitle{background:url(images/bg-tallyTitle.png) no-repeat top left; height:39px; text-indent:-1000em;} #rCol .holder{overflow:auto; width:200px; height:295px; padding:0 8px; font-size:9px;} #rCol .jScrollPaneContainer{background:#fff; margin:0 0 6px 2px;} #rCol .holder h5, #rCol .holder li{margin-bottom:4px;} #rCol .holder ul{margin-left:5px; list-style:none; padding-bottom:4px; clear:both;} #rCol .holder ul li{width:100%; text-align:right;} #rCol .holder ul li strong{float:left;} #rCol .holder ul li ul{padding-top:4px;} #rCol .scoreInformation{margin-left:18px;} #rCol #scoreTitle{background:url(images/bg-scoreTitle.png) no-repeat top left; height:39px;} #rCol #scoreTitle h4{text-indent:-1000em;} #rCol #scoreTitle a{float:right; font-size:9px; color:#000; margin:4px 8px 0 0;} #rCol #scoreExplanation{position:absolute; background:url(images/bg-scoreExplanation.png) no-repeat top left; bottom:37px; z-index:100; width:190px; padding:14px 20px 14px 12px; display:none; margin-left:-24px;} #rCol #scoreExplanation p{font-size:10px; line-height:13px;} #rCol #scoreExplanation a.close{position:absolute; height:16px; width:51px; right:0; top:-14px; background:#e8d766; display:none; text-indent:-1000em; background:url(images/btn-close.png) no-repeat top left;} #rCol .score{background:url(images/bg-score.png) no-repeat 0 0; margin-left:2px; padding:0 22px; width:172px; position:relative; display:none; height:19px; z-index:100;} #rCol .score .sliderHolder{position:relative;} html>body #rCol .score{height:auto; min-height:19px;} #rCol .score .you{height:38px; width:45px; background:url(images/bg-you.png) no-repeat top left; position:absolute; top:15px; margin-left:-22px} #rCol .score .you div{height:16px; width:45px; text-align:center; line-height:16px; margin-top:40px;} div.good{background:#8dc63f;} div.ok{background:#e8d766;} div.bad{background:#cb171e;} /* - Results Page - */ #rCol #helpfulTitle{background-image:url(images/bg-helpfulTitle.png); height:39px; text-indent:-1000em;} #rCol #helpfulLinks{background:#fff; list-style:none; margin-left:2px; width:204px; padding:6px 6px 0 6px;} #rCol #helpfulLinks li{padding-bottom:6px;} #rCol #helpfulLinks li a{display:block; height:40px; line-height:40px; background:#a9d26d; color:#fff; font-size:12px; text-decoration:none; text-align:center;} #rCol #helpfulLinks li a:hover{background:#8DC63F;} /* - Scrollbar Control - */ .jScrollPaneContainer{position: relative; overflow: hidden; z-index: 1; clear:both; } .jScrollPaneTrack{position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background:#b9e2e0;} .jScrollPaneDrag {position: absolute; cursor: pointer; overflow: hidden; background:#0095d3;} .jScrollPaneDragTop {position: absolute; top: 0; left: 0; overflow: hidden;} .jScrollPaneDragBottom {position: absolute; bottom: 0; left: 0; overflow: hidden;} a.jScrollArrowUp, a.jScrollArrowDown {display: block;position: absolute;z-index: 1;bottom: 0;right: 0;text-indent: -2000px;overflow: hidden; background-color:#74cbc8; background-repeat:no-repeat; background-position: center center; height:17px;} a.jScrollArrowUp{background-image:url(images/bg-scrollUp.png);} a.jScrollArrowDown{background-image:url(images/bg-scrollDown.png);} a.jScrollArrowUp:hover, a.jScrollArrowDown:hover{background-color:#86d0ce;} /*:: Footer ------------------------------------- */ #footer{width:632px; margin:0 auto;} #footer .container{background:url(images/bg-containerTop.png) no-repeat top left; width:632px; padding-top:8px;} #footer .containerBottom{background:url(images/bg-containerBottom.png) no-repeat bottom left; padding:0 0 7px 0} /* - Lists - */ #footer ul{list-style:none; clear:left;} #footer ul li{float:left;} #footer ul li .footerTitle{float:left; width:122px; height:18px; margin-right:8px; text-indent:-1000em;} #footer ul li ul{clear:none; float:left; width:500px; padding-bottom:5px;} #footer ul li ul li a{display:block; height:18px; margin-left:8px; text-indent:-1000em;} #footer ul li ul li.first{border-left:2px solid #c2c4c7;} #footer ul li .footerTitle, #footer ul li ul li a{background-repeat:no-repeat;} #footer ul li .footerTitle{background-position:19px 2px;} #footer ul li ul li a{background-position:4px 4px;} #footer ul li ul li a:hover, #footer ul li.on .footerTitle{background-color:#74cbc8;} #footer #onTheWeb .footerTitle{background-image:url(images/ir-onTheWeb.png);} #footer #facebook a{width:55px; background-image:url(images/ir-facebook.png);} #footer #twitter a{width:40px; background-image:url(images/ir-twitter.png);} #footer #vimeo a{width:39px; background-image:url(images/ir-vimeo.png);} #footer #youTube a{width:49px; background-image:url(images/ir-youtube.png);} #footer #focusOnEnergy a{width:106px; background-image:url(images/ir-focusOnEnergy.png);} #footer #moreFromFocus .footerTitle{background-image:url(images/ir-moreFromFocus.png);} #footer #residential a{width:61px; background-image:url(images/ir-residential.png);} #footer #business a{width:52px; background-image:url(images/ir-business.png);} #footer #renewable a{width:98px; background-image:url(images/ir-renewable.png);} #footer #rewards a{width:107px; background-image:url(images/ir-rewards.png);} #footer #research a{width:53px; background-image:url(images/ir-research.png);} #footer #information a{width:63px; background-image:url(images/ir-information.png);} #footer #tellYourFriends .footerTitle{background-image:url(images/ir-tellYourFriends.png);} #footer #emailYourFriends{position:relative;} #footer #emailYourFriends a{width:229px; background-image:url(images/ir-email.png); background-position:4px 3px;} div.emailForm{height:113px; width:286px; background:url(images/email.png) no-repeat top left; position:absolute; padding:11px 0px 13px 11px; right:-2px; bottom:18px; display:none; z-index:100;} div.emailForm input.text{float:left; clear:none; padding:2px; border:1px solid #0194D3; font-size:9px; color:#0194D3; margin:5px 0 0 5px; width:123px;} div.emailForm textarea{border:1px solid #0194D3; margin:5px 0 0 5px; font-family:Arial, Helvetica, Sans-Serif; font-size:9px; color:#0194D3; height:29px; width:257px; padding:2px; float:left;} div.emailForm p.wordCount{font-size:9px; color:#0194D3; padding:9px 0 0 5px; float:left;} div.emailForm p#emailMessage{float:left; color:#f00; padding:7px 0 0 5px;} div.emailForm #submit{float:right; padding:5px 18px 0 0;} #footer #emailYourFriends div.emailForm a{float:left; width:17px; height:17px; background:url(images/btn-close.gif) no-repeat top left; margin:5px 0 0 5px; padding:0; clear:left;} #footer #emailYourFriends div.emailForm a:hover{background-position:bottom left;} /* - Legal - */ #footer #legal{height:8px; line-height:8px; color:#000; background:url(images/bg-footer.png) repeat top left; margin:0 5px; padding:5px;} #footer #legal a{color:#000; text-decoration:underline;} #footer #legal a:hover{text-decoration:none;} #footer #legal ul li{border-left:1px solid #000; padding:0 4px;} #footer #legal ul li.first{border-left:none; padding-left:0;} /*:: Privacy Policy ------------------------------------- */ #modal-overlay{width:100%; position:absolute; top:0; left:0; z-index:1000000; background:url(images/bg-modal.png) repeat top left; display:none;} #modal-container{border:7px solid #87b44a; background:#f1f6e9; width:610px; height:430px; position:absolute; left:50%; margin-left:-312px; top:100px;} #modal-container a.close{position:absolute; display:block; right:-7px; top:-23px; font-size:10px; color:#000; text-decoration:none; background:#87b44a url(images/btn-modal-close.gif) no-repeat 37px 2px; height:16px; width:45px; padding-left:7px; line-height:16px;} #modal-container .holder{padding:50px 0 10px 10px; height:370px; background:#f1f6e9 url(images/bg-modal-container.gif) no-repeat 10px 10px;} #modal-container .holder h2{font-size:16px; text-align:center; margin-bottom:1em;} #modal-container .holder p{font-size:11px; line-height:13px; margin-bottom:1em;} #modal-container .holder a{color:#0194D3;}