/* CSS Document * * @developer: Jake Plummer * @designer: Jake Mize * @website: www.shopeelectricityratestexas.com * @other: IDs included are intended to start providing consistency and familiarity with styles across all websites * @styles: selector { LAYOUT(position, float, clear), APPEARANCE(display, width, height, background, border), SPACING(padding, margin), TYPOGRAPHY(font, color, text-decoration), MISC.(z-index, zoom)} */ /******************************************************************************** RESETS ********************************************************************************/ body, div, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, label, p, strong, em, table, td { margin: 0; padding: 0;} ul, ol { list-style: none;} h1, h2, h3, h4, h5, h6 { font-size: 100%; line-height: 1;} img { border: 0;} * { vertical-align: baseline;} sup, sub { position: relative; height: 0; line-height: 1; vertical-align: baseline !important; vertical-align: bottom;} sup { bottom: .75ex;} sub { top: .5ex;} hr { border-top: #dde7e9 solid 1px; border-left: none; border-right: none; border-bottom: none; padding: 5px 0;} .red { color: #ff0000;} /******************************************************************************** GLOBAL STYLES ********************************************************************************/ body { font-family: Helvetica, Arial, sans-serif; font-size: 13px; line-height: 1.5; color: #254850;} /* links */ a { color: #254850; text-decoration: underline;} a:hover { text-decoration: none;} /* floats */ .float-left { float: left;} .float-right { float: right;} .clear { clear: both;} /* typography */ p { margin-bottom: 1em;} /* headers */ h1 { margin-bottom: 20px; font-weight: bold; font-size: 20px; line-height: 1;} h2 { margin-bottom: 10px; font-weight: bold; font-size: 18px; line-height: 1;} h3 { margin-bottom: 5px; font-weight: bold; font-size: 16px; line-height: 1;} .round5 { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px} .round10 { border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px} .displaynone { display: none} .top5 { margin-top: 5px !important} /******************************************************************************** WRAPPERS ********************************************************************************/ #wrapper { width: 960px; margin: auto;} #main-column { float: left; width: 690px;} #compare-electricity #main-column { width: 960px;} #right-column { float: right; width: 260px; font-size: 12px;} /******************************************************************************** HEADER CONTENT ********************************************************************************/ #header { position: relative; width: 100%; padding-bottom: 20px;} #header .logo { display: block; width: 350px; height: 50px; background: url(/images/logo.png) no-repeat; margin-top: 30px;} #header .logoedeals { display: block; width: 350px; height: 50px; background: url(/images/logo_edeals.png) no-repeat; margin-top: 30px;} #header-cta { position: absolute; right: 0; bottom: 13px;} #header-cta span { display: block; font-weight: bold; font-size: 20px; line-height: 1.15; color: #548690; text-align: right;} #header-cta .phone { font-size: 37px; line-height: 1; color: #254850;} /******************************************************************************** MAIN COLUMN CONTENT ********************************************************************************/ /* main nav */ #main-nav { position: relative; background: #a2cad2 url(/images/nav_bg.png) repeat-x left bottom; padding: 8px; margin-bottom: 10px; -moz-border-radius: 30px; -webkit-border-radius: 30px; border-radius: 30px; z-index: 3;} #main-nav li { position: relative; float: left; margin-right: 5px;} #main-nav a { display: block; padding: 10px 25px; font-size: 16px; line-height: 1; color: #ffffff; text-decoration: none;} #main-nav a:hover, #main-nav #active { background: #548690; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;} #main-nav .dropdown:hover { background: none;} /* drop down menu */ #main-nav ul { position: absolute; left: 0; top: 100%; width: 200px; background: #a2cad2; padding: 10px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; visibility: hidden; z-index: -1;} #main-nav ul li { float: none; width: 100%; border-bottom: #cedee2 solid 1px; padding-bottom: 5px; margin-bottom: 5px;} #main-nav ul .last { border-bottom: none; padding: 0; margin: 0;} #main-nav ul li a { display: inline-block; width: 185px; padding: 10px 0 10px 15px; font-size: 14px;} #main-nav ul li a:hover { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px;} /* hero image */ .hero-image { position: relative; width: 100%;} #hero-zip-lookup { position: absolute; right: 20px; bottom: 20px; background: #254850; padding: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;} #hero-zip-lookup span { display: block; margin-bottom: 5px; font-weight: bold; font-size: 22px; line-height: 1.10; color: #fffc01;} #hero-zip-lookup input { float: left; display: block; width: 120px; border: 0; padding: 6px; font-size: 17px;} #hero-zip-lookup .submit { position: relative; width: 111px; height: 31px; background: url(/images/hero_zip_submit.png) no-repeat; margin-left: 10px; cursor: pointer;} #hero-zip-lookup .submit:hover { background-position: 0 -31px;} /* hero inside */ #hero-inside { position: relative; width: 100%;} .hero-commercial { background: url(/images/hero/hero_comm.jpg) top left no-repeat; height: 377px} #hero-inside h2 { position: absolute; left: 25px; top: 30%; font-style: italic; font-size: 24px; line-height: 1.25; z-index: 2;} #hero-inside h2.phone { color: #AF0303; font-style: normal; left: 215px; top: 195px; font-size: 28px} #hero-inside #hero-form { width: 176px; position: absolute; right: 28px; top:20px; z-index: 1} #hero-inside #hero-form input { width: 166px; border: none; margin: 2px 0;} #hero-inside #hero-form select { width: 178px !important; margin: 3px 0; padding: 5px} #hero-inside #hero-form input:focus { border: none; box-shadow: 0 0 0} #hero-inside #hero-form .submit {position: relative; width: 118px; height: 26px; background: url(/images/contact-btn.jpg) no-repeat; border: 0; margin: 3px 29px; cursor: pointer;} .formErrors { background-color: #CC3314; font-weight: bold; color: #ffffff; text-align: center; padding: 5px; margin: -12px 0 3px} #hero-inside #hero-zip-lookup { right: 25px; bottom: 17px;} /* home image */ .home-image { position: relative; width: 100%;} #home-zip-lookup { width: 660px; background: #ffffff; padding: 15px; -moz-box-shadow: inset 0 0 10px 2px #bebebe; -webkit-box-shadow: inset 0 0 10px 2px #bebebe; box-shadow: inset 0 0 10px 2px #bebebe; border-left: 1px solid #bebebe\9; border-right: 1px solid #bebebe\9; border-top: 1px solid #bebebe\9; width: 658px\9; margin-top: -3px\9} #home-zip-lookup .formErrors { margin-top: 5px; padding: 5px 0; width: 640px} #home-zip-lookup form { margin-left: 15px} #homerates label, #businessrates label { float: left; font-weight: bold; font-size: 14px; margin: 7px 15px 0 0; color: #254850;} #businessrates label { margin-bottom: 15px} #home-zip-lookup input, #home-zip-lookup select { float: left; border: 1px solid #254850; font-weight: normal; color: #000000; display: block; width: 120px; padding: 6px;} #home-zip-lookup .wide { width: 150px; width: 140px\9; margin:0 10px 10px 0} #home-zip-lookup select { width: 165px !important} #home-zip-lookup .submit { position: relative; width: 106px; height: 26px; background: url(/images/seerates-btn.jpg) no-repeat; border: 0; margin: 0 0 0 10px; cursor: pointer;} #home-btn-wrap { width: 690px; height: 54px} #home-btn-wrap div { width: 345px; height: 54px; cursor: pointer} #home-btn-wrap div:hover, #home-btn-wrap .selected { background-position: 0 -54px} #home-btn-left { background: url(/images/hero-btn-left.jpg) top left no-repeat; float: left} #home-btn-right { background: url(/images/hero-btn-right.jpg) top left no-repeat; float: right} /* content zip lookup */ #content-zip-lookup { width: 660px; height: 30px; background: #254850; padding: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; margin: 10px 0;} #content-zip-lookup span { float:left; display: block; margin: 0 0 5px 5px; font-weight: bold; font-size: 21px; line-height: 1.70; color: #fffc01;} #content-zip-lookup form { float: right;} #content-zip-lookup input { float: left; display: block; width: 120px; border: 0; padding: 6px; font-size: 17px;} #content-zip-lookup .submit { float: left; width: 111px; height: 31px; background: url(/images/hero_zip_submit.png) no-repeat; margin-left: 10px; cursor: pointer;} #content-zip-lookup .submit:hover { background-position: 0 -31px;} /* main content */ #main-content { margin: 20px 0 0; padding: 0 20px;} #main-content ul { list-style-type: disc; margin: 0 0 1em 35px;} #main-content ol { list-style-type: decimal; margin: 0 0 1em 35px;} #main-content li, #main-content li { padding-bottom: 8px;} .callout { background: #f3f7f8; padding: 20px; -moz-border-radius: 20px; -webkit-border-radius: 25px; border-radius: 25px;} .callout .icon { margin: 0 15px 0 5px; float: left;} #main-content #glossary-nav { list-style: none; padding: 0; margin: 0; color: #bbbbbb;} #glossary-nav li { float: left; margin-right: 10px;} .back-to-top { float: right; font-size: 10px;} #TX_alpha_nav_heading{background-color:#ECF4F6; padding: 5px; font-size: 14px; margin-bottom: 10px;} #top_cities, #letter_cities{width:100%; margin-top:10px;} /* results page */ select { margin-bottom: 10px;} .icons { list-style: none !important; margin: 0 !important;} .icons li { padding: 0 0 8px 40px !important; margin: 0 0 5px; line-height: 2em; font-size: 12px;} .commercial { float: right; display: inline-block;} /* compare chart */ #compare-chart { display: block; background: #8ab1ba; font-size: 12px; text-align: center; border-collapse: collapse; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;} #compare-chart .text-align-left { text-align: left;} #compare-chart .term { font-weight: bold; padding: 10px 0 0; display: block;} #compare-chart .icons { font-size: 12px;} #compare-chart .icons .green-energy, #compare-chart .icons .standard { padding-left: 30px !important;} th { padding: 15px 0 10px; font-weight: bold; line-height: 1; text-transform: uppercase; vertical-align: middle;} #compare-chart td { background: #ffffff; border: #8ab1ba solid 1px; padding: 15px 10px; vertical-align: top;} #compare-chart .cta { font-size: 18px; line-height: 1.25;} #compare-chart strong { color: #fe0000;} #compare-chart .cta a { display: inline-block; background: #fe0000; padding: 7px 10px; margin-top: 5px; font-weight: bold; font-size: 14px; line-height: 1; color: #ffffff; text-decoration: none; text-transform: uppercase; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;} #compare-chart .cta a:hover { background: #c30000;} /* icon list elements */ .gift-card { background: url(/images/compare_chart/icon_gift_card.png) no-repeat; line-height: 2.5em !important; display: none !important; visibility: hidden !important;} .gift-card75 { background: url(/images/compare_chart/icon_gift_card.png) no-repeat; line-height: 2.5em !important;} .green-energy { background: url(/images/compare_chart/icon_green_energy.png) no-repeat;} .no-deposit { background: url(/images/compare_chart/icon_no_deposit.png) no-repeat; line-height: 2.5em !important;} .no-long-term { background: url(/images/compare_chart/icon_no_long_term.png) no-repeat;} .online-billing { background: url(/images/compare_chart/icon_online_billing.png) no-repeat;} .participation { background: url(/images/compare_chart/icon_participation.png) no-repeat; line-height: 2.5em !important;} .pre-paid { background: url(/images/compare_chart/icon_pre_paid.png) no-repeat;} .price-protection { background: url(/images/compare_chart/icon_price_protection.png) no-repeat;} .standard { background: url(/images/compare_chart/icon_standard.png) no-repeat;} .rewards { background: url(/images/compare_chart/icon_rewards.png) no-repeat;} .priority-turn-on { background: url(/images/compare_chart/icon_priority_turn_on.png) no-repeat;} .referral-bonus { background: url(/images/compare_chart/icon-referral.png) no-repeat;} .no-switch-fee { background: url(/images/compare_chart/icon-referral.png) no-repeat;} .flexibility { background: url(/images/compare_chart/icon_flexibility.png) no-repeat;} /* feature guide */ #features-guide { position: relative; border: #8ab1ba solid 1px; padding: 10px 0 20px 50px; margin: 20px 0 50px;} legend { padding: 0 5px; margin: 0 0 0 -40px; font-weight: bold; font-size: 19px; color: #254850; text-transform: uppercase;} #features-guide ul { float: left; margin-right: 150px !important;} #features-guide .last { margin-right: 0 !important;} /* no results page */ #no-results-zip-lookup #hero-zip-lookup { position: relative; left: 0; top: 0; width: 260px; background: #254850; padding: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px;} /******************************************************************************** RIGHT COLUMN CONTENT ********************************************************************************/ #top-5-tips, #partners, #in-the-news, .social { background: #ecf4f6; padding: 30px 15px; margin-bottom: 10px; -moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px;} #right-column h2 { border-bottom: #cedee2 solid 1px; padding-bottom: 10px; margin-bottom: 10px; font-weight: bold; font-size: 20px; color: #548690;} /* social box */ .social { text-align: center;} .social h2 { text-align: left;} .social .facebook-like-button iframe { width: 55px !important; overflow: hidden;} .social .facebook-like-button .fb_edge_comment_widget iframe { width: 401px !important;} .social #___plusone_0 { margin-left: 5px !important; position: relative; top: 3px;} /* top 5 tips box */ #right-column li { position: relative; border-bottom: #cedee2 solid 1px; padding: 0 0 10px 40px; font-size: 11px; margin-bottom: 10px; zoom: 1;} #right-column .last { border: 0; padding-bottom: 0; margin-bottom: 0;} #right-column li span { position: absolute; top: 17%; left: 5px; display: block; width: 20px; height: 20px; background: url(/images/top_5_numbers.png) no-repeat; overflow: hidden;} #right-column #reason-1 { background-position: 0 0;} #right-column #reason-2 { background-position: 0 -21px;} #right-column #reason-3 { background-position: 0 -42px;} #right-column #reason-4 { background-position: 0 -63px;} #right-column #reason-5 { background-position: 0 -84px;} /* partners block */ #partners-scroll { position: relative; overflow: hidden; height: 80px; width: 205px; margin: 0 auto;} #partners-scroll .headline { position: absolute; top: 210px; left: 0; width: 205px;} /* in the news block */ #in-the-news .float-left { margin: 0 10px 20px 0;} #in-the-news a { font-weight: bold; color: #548690;} #in-the-news a:hover { text-decoration: none;} /* business contact form */ #business-contact-form{-moz-border-radius: 25px; -webkit-border-radius: 25px; border-radius: 25px; background: none repeat scroll 0 0 #ECF4F6; margin-bottom: 10px; padding: 30px 15px;} label{margin: 3px 0px;} input {padding: 5px; border:1px solid #548690; margin:3px 0px;} input:focus{border:2px solid #548690; -webkit-box-shadow: inset 0px 2px 2px #878787; -moz-box-shadow: inset 0px 2px 2px #878787; box-shadow: inset 0px 2px 2px #878787;} input.submit{background: url('/images/business_submit.jpg') no-repeat; border:none; width:111px; height:28px; cursor: pointer;} input.submit:hover{background: url('/images/business_submit.jpg') no-repeat 0px -28px;} /******************************************************************************** WP Styles ********************************************************************************/ .post{margin-bottom: 20px;} .comments-link{display: none; visibility: hidden;} /******************************************************************************** FOOTER ********************************************************************************/ #footer { clear: both; border-top: #dde7e9 solid 1px; padding: 20px 0 30px; margin-top: 10px;} /* footer nav */ .footer-nav { position: relative; margin-bottom: 10px; font-size: 11px; line-height: 1; clear: both; text-align: center} .footer-nav li { position: relative; display:inline; border-right: #254850 solid 1px; padding-right: 5px; margin-right: 5px;} .footer-nav .last { border: 0; padding: 0; margin: 0;} .footer-nav a { color: #254850; text-decoration: none;} .footer-nav a:hover { text-decoration: underline;} .legal {clear:both; font-size:10px; color: #666; text-align: center} /******************************************************************************** CLEARING ELEMENTS THAT CONTAIN FLOATED ELEMENTS ********************************************************************************/ /* new clearfix */ .clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } * html .clearfix { zoom: 1; } /* IE6 */ *:first-child+html .clearfix { zoom: 1; } /* IE7 */