/* ------------------------------------------------- URI: http://www./ Created by Forte Trinity ------------------------------------------------- CONTENTS 1: SITE MASTER SETUP (including reset from Tripoli) 2: TYPOGRAPHY/DESIGN 3: LAYOUT 3.1 main form 3.2 container 3.3 header 3.4 content 3.5 primary content 3.6 secondary content 3.7 tertiary content 3.8 footer 4: GLOBAL ELEMENTS / CONTROLS 4.1 accessibility 5: TEMPLATE / PAGE SPECIFIC 6: USEFUL CLASSES /* ----------------------------------------------- 1. SITE MASTER SETUP ----------------------------------------------- */ /* Imported mostly from Tripoli reset.css - http://www.monc.se/tripoli/css/reset.css */ * { margin:0; padding:0; text-decoration:none; outline:none } code, kbd, samp, pre, tt, var, textarea, input, select, isindex, listing, xmp, plaintext { font:inherit } a, img, a img, iframe, form, fieldset, abbr, acronym, object, applet, table { border:none } table { border-collapse:collapse; border-spacing:0 } caption, th, td, center { text-align:left; vertical-align:top } q { quotes:"" "" } font { color:inherit !important; font:inherit !important; color:inherit !important } marquee { overflow:inherit !important; -moz-binding:none } blink { text-decoration:none } nobr { white-space:normal } /* end of import */ body { height:100%; text-align:center; min-width:775px } ul { list-style:disc outside } ol { list-style:decimal outside } /* ----------------------------------------------- 2. TYPOGRAPHY / DESIGN ----------------------------------------------- */ html { font-size:62.5%; font-family:arial, verdana, "microsoft sans serif", helvetica, sans-serif; line-height:1.4em; color:#000 } code, kbd, samp, pre, tt, var, input[type='text'], input[type='password'], textarea { font-size:1.1em; font-family:monaco, "Lucida Console", courier, mono-space } h1 { font-size:1.6em; color:#000; margin:0 0 12px 0 } h2 { font-size:1.5em; color:#000; margin:0 0 12px 0 } h3 { font-size:1.4em; color:#fff; margin:0 0 12px 0 } h4 { font-size:1.3em; color:#000; margin:0 0 12px 0 } h5 { font-size:1.2em; color:#000; margin:0 0 12px 0 } h6 { font-size:1.1em; color:#000; margin:0 0 12px 0 } p { font-size:1.1em; color:#000; margin:0 0 12px 0 } a {color:#00A2D1 } a:hover { color:#0066FF; } a:visited { } a:active { } ul { margin:0 0 12px 0; font-size:1.1em } ol { margin:0 0 12px 0; font-size:1.1em } dl { margin:0 0 12px 0; font-size:1.1em } hr { display:block; background:#aaa; color:#aaa; width:100%; height:1px; border:none } address { font-size:1.1em; color:#000 } blockqoute { } table { border-top:none; border-left:none } th, td { border-bottom:none; border-right:none } fieldset { border:1px solid #ccc; } legend { } label { font-size:1.1em } textarea, input[type='text'], select { border:1px solid #000; background:#fff; font-size:11px; color:#000 } strong a {color:#FFFFFF; text-decoration:underline} strong a:hover {color:#00A2D1; text-decoration:underline} /* 2.1 - index page */ h1.ttl-name {} h2.ttl-select-products {} /* ----------------------------------------------- 3. LAYOUT ----------------------------------------------- */ /* 3.1 - main form */ form.main { width:100%; height:100% } /* 3.2 - container */ div#container { margin:0 auto; position:relative; text-align:left } .content-container { width:960px; margin:0 auto; position:relative; text-align:left; } /* 3.3 - header */ div#header { background:#FFFFFF} div#flashcontent {background:url(../images/global/other/header.jpg) no-repeat; height:208px;} div#flashcontent p {padding-top:50px; padding-left:250px; color:#FFFFFF} div#flashcontent p a {color:#000; font-size:1.3em} div#flashcontent p a:hover {color:#333333; font-size:1.3em; text-decoration:underline} /* 3.4 - content */ div#content { background:url(../images/global/backgrounds/content-bg.jpg) #66a2b3 repeat-x} /* 3.5 - primary content */ div#primary-content { margin:0 0px } #index-h1-title {background:url(../images/global/other/h1-title.jpg) no-repeat; width:960px; height:118px; text-indent:-9999px;} #telecommunication-h1-title {background:url(../images/global/other/h1-title-telecommunication.jpg) no-repeat; width:960px; height:144px; text-indent:-9999px;} #energy-purchasing-h1-title {background:url(../images/global/other/h1-title-energy-purchasing.jpg) no-repeat; width:960px; height:144px; text-indent:-9999px;} #energy-refund-h1-title {background:url(../images/global/other/h1-title-refund.jpg) no-repeat; width:960px; height:144px; text-indent:-9999px;} #energy-management-h1-title {background:url(../images/global/other/h1-title-energy-management.jpg) no-repeat; width:960px; height:144px; text-indent:-9999px;} /* 3.6 - secondary content */ div#secondary-content { } ul.secondary-list {list-style:none; margin:20px 0 0 15px} ul.secondary-list li{width:420px; float:left; margin:0 18px} ul.secondary-list li p {color:#FFFFFF; line-height:24px;} /* 3.7 - tertiary content */ div#tertiary-content { } /* 3.8 - footer */ div#footer { background:#FFFFFF; margin-top:10px } .site-design {margin:0 0 10px 30px; float:left} #footer-navigation {list-style:none; float:right; padding-right:30px} #footer-navigation a{color:#00a2d1;} #footer-navigation a:hover{color:#0066FF;} #footer-navigation li{float:left; padding-left:5px} /* ----------------------------------------------- 4. GLOBAL ELEMENTS / CONTROLS ----------------------------------------------- */ /* 4.1 - accessibility */ ul#skiplinks { display:none } ul#skiplinks a, ul#skiplinks a:hover, ul#skiplinks a:visited { position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden } ul#skiplinks a:active, ul#skiplinks a:focus { position:static; width:auto; height:auto } ul#text-resizer {background:#00a2d1; width:960px; margin:0 auto; list-style:none} ul#text-resizer li {float:left; height:36px;} ul#text-resizer .small {float:left; background:url(../images/global/other/shrink.jpg) no-repeat; width:16px; height:36px; text-indent:-9999px; margin:0 0 0 0px} ul#text-resizer .text-title {float:left; background:url(../images/global/other/text-resize.jpg) no-repeat; width:75px; height:36px; text-indent:-9999px; margin:0 0 0 20px} ul#text-resizer .large { float:left;background:url(../images/global/other/enlarge.jpg) no-repeat; width:16px; height:36px; text-indent:-9999px; margin:0 0} /* ----------------------------------------------- 5. TEMPLATE/PAGE SPECIFIC ----------------------------------------------- */ #bar {background:#00a2d1;} #primary-navigation {float:right; padding-right:0px; position:absolute; z-index:1; margin:-15px 0 0 845px} #primary-navigation li {float:left; list-style:none; padding:0 5px; } /*Secondary Navigation*/ ul#secondary-navigation{margin:0 0 0 45px; padding:0 0} ul#secondary-navigation a {height:38px; float:left; overflow:hidden;} ul#secondary-navigation li a:hover {background-position:50% -38px; border-bottom:none} ul#secondary-navigation li {float:left; list-style:none; margin:0 5px; padding:0 0} #telecommunication-btn {width:270px; text-indent:-3000px} #telecommunication-btn a {width:270px; height:38px; background-image:url(../images/global/nav/telecommunication-btn.jpg); display:block} #purchasing-btn {width:156px; text-indent:-3000px} #purchasing-btn a {width:156px; height:38px; background-image:url(../images/global/nav/purchasing-btn.jpg); display:block} #utility-btn {width:193px; text-indent:-3000px} #utility-btn a {width:193px; height:38px; background-image:url(../images/global/nav/utility-btn.jpg); display:block} #management-btn {width:193px; text-indent:-3000px} #management-btn a {width:193px; height:38px; background-image:url(../images/global/nav/management-btn.jpg); display:block} /*CTA specifications*/ .cta{float:left; margin:0 5px 0 5px; width:218px; background:#FFFFFF} .cta-first{float:left; margin:0 5px 0 30px; width:218px; background:#FFFFFF} .cta-description{width:213px; background:#FFFFFF; margin:5px 5px 0px 5px; height:70px } .cta-description p {font-size:1.0em; color:#00518a;} #cta-image-telecommunications a{ background:url(../images/ctas/telecommunications-cost-control.jpg) no-repeat; width:218px; height:166px; text-indent:-9999px; display:block;} #cta-image-telecommunications a:hover{ background:url(../images/ctas/telecommunications-cost-control-hover.jpg) no-repeat; width:218px; height:166px; text-indent:-9999px; display:block;} #cta-image-purchasing a {background:url(../images/ctas/energy-purchasing.jpg) no-repeat; width:218px; height:166px; text-indent:-9999px; display:block;} #cta-image-purchasing a:hover {background:url(../images/ctas/energy-purchasing-hover.jpg) no-repeat; width:218px; height:166px; text-indent:-9999px; display:block;} #cta-image-utility a{background:url(../images/ctas/utility-refunds-analysis.jpg) no-repeat; width:218px; height:166px; text-indent:-9999px; display:block;} #cta-image-utility a:hover{background:url(../images/ctas/utility-refunds-analysis-hover.jpg) no-repeat; width:218px; height:166px; text-indent:-9999px; display:block;} #cta-image-management a{background:url(../images/ctas/energy-management.jpg) no-repeat; width:218px; height:166px; text-indent:-9999px; display:block;} #cta-image-management a:hover{background:url(../images/ctas/energy-management-hover.jpg) no-repeat; width:218px; height:166px; text-indent:-9999px; display:block;} #cta-telecommunications {width:218px; text-indent:-3000px} #cta-telecommunications a {width:218px; height:33px; background-image:url(../images/ctas/looking-for-saving.jpg); display:block} #cta-purchasing {width:218px; text-indent:-3000px} #cta-purchasing a {width:218px; height:33px; background-image:url(../images/ctas/we-can-help-you.jpg); display:block} #cta-utility {width:218px; text-indent:-3000px} #cta-utility a {width:218px; height:33px; background-image:url(../images/ctas/being-overcharged.jpg); display:block} #cta-management {width:218px; text-indent:-3000px} #cta-management a {width:218px; height:33px; background-image:url(../images/ctas/need-a-solution.jpg); display:block} /*Energy-management*/ body.energy-management h3 {border-bottom:1px solid #fff; padding-bottom:10px; padding-top:10px} body.energy-management dt {color:#FFFFFF; font-size:12px; font-weight:bold; padding:12px 0; line-height:24px} body.energy-management dd {color:#FFFFFF; font-size:12px; padding:2px 0; background:url(../images/energy-purchasing/bullet-square.gif) no-repeat 0px 10px; padding-left:15px; line-height:24px} body.energy-management table{margin:25px 0;} body.energy-management td {padding:5px 20px 5px 0px; color:#FFFFFF; font-weight:bold} .padding-the-first {padding:0px 0 0 0;} .pdf dt {color:#FFFFFF; font-size:12px; font-weight:bold; padding:12px 0} .pdf dd {background:url(../images/global/other/pdf.png) no-repeat; padding:5px 0 10px 25px;} .pdf dd a {color:#FFFFFF; padding-bottom:5px;} .pdf dd a:hover {color:#00a2d1; padding-bottom:5px;} /*Form holder*/ #formHolder p {color:#FFFFFF;} #formHolder {padding:40px 20px 0 50px; width:500px} /*compliance*/ #compliance {padding:40px 0 0 10px; margin:0 0 0 10px;} #compliance p{ color:#FFFFFF;} #compliance h2{color:#FFFFFF} #compliance address {color:#FFFFFF; font-style:normal; font-weight:bold; padding:10px 0 20px 0; font-size:13px;} #compliance a{color:#fff;} #compliance a:hover{color:#333333;} .bigger-text {line-height:45px; font-size:13px;} /*basescript*/ #basecript{width:900px; margin:0 auto; position:relative; text-align:justify; padding-top:300px } #basecript h1 {font-size:11px; color:#333333} #basecript p {font-size:10px; color:#666666} #basewords { width:900px; margin:auto; text-align:center } /* ----------------------------------------------- 6. USEFUL CLASSES ----------------------------------------------- */ .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden } .clr { overflow:hidden; clear:both; height:1px; margin-top:-1px } .la { text-align:left } .ra { text-align:right } .ca { text-align:center } .fl { float:left } .fr { float:right } .vt { vertical-align:top } .vm { vertical-align:middle } .vb { vertical-align:bottom } .nb { border:0 none }