/* BASIC SETUP */ * { margin: 0; padding: 0; behavior: url(/salopenergy_new/PIE.htc); /* (rounded corner fix for IE7/8) */ } body { font-size: 1em; font-family: Arial, Helvetica, sans-serif; background-image: url(../images/body-bg.gif); background-position: center top; background-repeat: repeat-x; background-color: #e6e7e8; color: #404040; } .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .valign-top { vertical-align: top; } .valign-middle { vertical-align: middle; } .valign-bottom { vertical-align: bottom; } .clear { clear: both; font-size: 0; line-height: 0; height: 0px; } .float-left { float: left; } .float-right { float: right; } p { margin-bottom: 1em; line-height: 1.2em; } img { border: 0; } a { text-decoration: none; color: #acacac; } a:hover { color: #aaaaaa; } .hr hr { display: none; } .hr { border-bottom: 1px solid #939598; margin-bottom: 1em; } .hr.flat { margin: 0; } .error { color: #FF0000; } .small { font-size: 0.8em; color: #999999; } /* HEADINGS */ h1, h2, h3, h4, h5, h6 { margin-bottom: 0.7em; font-weight: normal; font-family: gotham-book, Arial, Helvetica, sans-serif; color: #E9614D; } h1 { font-size: 1.7em; } h2 { font-size: 1.45em; } h3 { font-size: 1.15em; } h4, h5, h6 { font-size: 1.1em; } h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong, .main-image-heading strong, .main-image-heading-ss-home strong { font-weight: normal; font-family: gotham-bold; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; } /* FORMS */ form { } fieldset { border: 0; } input.text { color: #000000; } input.text-ghosted { color: #808080; } input, select, textarea { vertical-align: middle; -webkit-appearance: none; border: 1px solid #D1D3D4; font-family: Arial, Helvetica, sans-serif; width: 100%; font-size: 0.8em; } .form-button, .button { height: 21px; border: 0; background-color: #FDCF57; color: #000000; cursor: pointer; width: auto; font-family: gotham-bold, sans-serif; font-size: 1em; } .nolabels { } .nolabels input.text, .nolabels input.text-ghosted, .nolabels textarea.text, .nolabels textarea.text-ghosted { width: 100%; } /* PAGE STRUCTURE */ #root { width: 980px; margin: 0px auto; } #header { height: 110px; position: relative; } #logo { position: absolute; left: 0px; top: 5px; } #strapline { position: absolute; right: 0px; top: 30px; font-size: 1.2em; font-family: gotham-book, Arial, Helvetica, sans-serif; text-align: right; } #strapline span { font-size: 1.36em; font-family: gotham-bold; color: #E9614D; } /* IMAGE ROTATOR NAVI */ .navi { position: absolute; bottom: 20px; /* left: 293px; */ right: 0; z-index: 1000; padding: 12px 7px; background-image: url(../images/black-trans.png); } .navi a { display: block; float: left; width: 11px; height: 11px; margin: 0 3px; background-image: url(../images/pager.png); background-position: 0 0; } .navi a.activeSlide { background-position: 0 -11px; } .navi a:focus { outline: none; } .navi a span { display: none; } #feature-nav { } #feature-nav a { float: left; position: relative; display: block; height: 180px; margin-right: 4px; } #feature-nav a .feature-band { position: absolute; bottom: 10px; } #feature-nav a:hover .feature-band { color: #aaaaaa; } #feature-nav a.first { border-radius: 0 0 0 20px; } #feature-nav a.last { border-radius: 0 0 20px 0; margin: 0; } #feature-nav a.first.last { border-radius: 0 0 20px 20px; } #main { background-color: #FFFFFF; border-radius: 5px; box-shadow: 0 0 5px #666666; margin-bottom: 10px; } #main-image-container { float: left; width: 700px; padding: 0 0 0 20px; } #main-image { position: relative; margin-bottom: 4px; padding-top: 20px; } #google-map { width: 700px; height: 260px; } #main-image img, #main-image a { display: block; } .main-image-heading { display: block; position: absolute; bottom: 20px; left: 0; padding: 10px 20px 10px 20px; background-image: url(../images/black-trans.png); font-family: gotham-light, sans-serif; font-size: 1.2em; color: #FFFFFF; text-shadow: 0.1em 0.1em 0.1em #000000; } .main-image-heading p { margin: 0; } .main-image-heading .float-left { max-width: 450px; margin-right: 30px; } #main-image a:hover .main-image-heading { color: #aaaaaa; } .img { width: 700px; height: 260px; border-radius: 20px 20px 0 0; } .img.tall { height: 400px; border-radius: 20px; } /* SOLAR SENSE */ #main-image-container-ss-home { } #main-image-ss-home { position: relative; width: 980px; height: 465px; margin-bottom: 20px; } #main-image-ss-home .yellow-band { position: absolute; left: 0; bottom: 40px; background-color: #FDCF57; color: #000000; height: 50px; line-height: 25px; padding: 10px 35px 10px 20px; font-family: gotham-book, sans-serif; font-size: 1.3em; z-index: 10; width: 360px; } #main-image-ss-home .yellow-band-thumbsup { position: absolute; left: 410px; bottom: 28px; z-index: 11; } #main-image-ss-home .logo { position: absolute; right: 20px; bottom: 40px; z-index: 11; } #main-image-ss-home .main-image-heading-ss-home { position: absolute; width: 230px; padding: 20px 20px 0; color: #000000; font-size: 1.8em; font-family: gotham-book, sans-serif; } #main-image-ss-home .main-image-heading-ss-home p { margin: 0.5em; } #main-image-ss-home .overlay { position: absolute; right: 0; z-index: 2; pointer-events: none; } #main-image-ss-home .image { position: absolute; right: 0; z-index: 1; } #main-image-container-ss { } #main-image-ss { position: relative; width: 980px; height: 465px; } #main-image-ss #sticker { position: absolute; top: 40px; left: 50px; } #main-image-ss .yellow-band { position: absolute; left: 0; bottom: 40px; background-color: #FDCF57; color: #000000; height: 50px; line-height: 25px; padding: 10px 35px 10px 20px; font-family: gotham-book, sans-serif; font-size: 1.3em; z-index: 10; width: 780px; } #main-image-ss .yellow-band p { margin: 0em; } #main-image-ss .yellow-band b, #main-image-ss .yellow-band strong { font-family: gotham-bold, sans-serif; font-weight: normal; } #main-image-ss .yellow-band-thumbsup { position: absolute; left: 830px; bottom: 28px; z-index: 11; } #main-image-ss-home .image { position: absolute; right: 0; z-index: 1; } #benefits-full { margin: 0 20px; font-family: gotham-book, sans-serif; font-size: 0.9em; } #benefits-bg { background-image: url(../images/solarsense/benefits-full-bg.png); background-position: center; background-repeat: repeat-y; } #benefits-full .benefit { float: left; width: 204px; padding: 15px; } #benefits-full .benefit h2 { font-size: 1.1em; font-family: gotham-bold, sans-serif; color: #404040; margin-bottom: 0.4em; } #icon-nav { } #icon-nav .icon { float: left; display: block; width: 230px; margin-right: 5px; } #icon-nav .icon.last { margin-right: 0; } #icon-nav .icon img { display: block; } #icon-nav .icon span.text { display: block; background-color: #404040; min-height: 110px; padding: 10px; color: #FFFFFF; font-family: gotham-book, sans-serif; font-size: 0.85em; } #icon-nav .icon:hover span.text { background-color: #FDCF57; color: #000000; } #icon-nav .icon:hover span.heading { text-shadow: none; } #icon-nav .icon span.heading { display: block; font-family: gotham-bold, sans-serif; margin-bottom: 0.5em; text-shadow: 0.1em 0.1em 0.1em #000000; } #solarsense-content { } #solarsense-content h2, #solarsense-content h3, #solarsense-content h4 { color: #000000; font-family: gotham-bold, sans-serif; } .subpage-anchor { color: #404040; text-decoration: underline; } #solarsense-content table { font-family: gotham-book, sans-serif; border: 0; background-image: url(../images/solarsense/table-bg.png); background-position: center; background-repeat: repeat-y; background-color: #fcb33e; margin-bottom: 1.2em; color: #000000; font-size: 1.3em; } #solarsense-content table b, #solarsense-content table strong { font-family: gotham-bold, sans-serif; font-weight: normal; } #solarsense-content table td { padding: 12px 15px; } #solarsense-content table .hr { border-bottom: 1px solid #000000; margin: 0; } #solarsense-content table .thick .hr { border-bottom: 3px solid #000000; } #thumb-picker { float: right; position: relative; width: 280px; margin: 0 0 20px 40px; } #thumb-picker img { display: block; margin-bottom: 10px; } #thumb-picker .picker-image { display: none; position: absolute; text-align: center; } #thumb-picker .picker-image.active { display: block; } #thumb-picker .tabs { margin-top: 290px; } #thumb-picker .tabs a { display: block; float: left; width: 49%; font-family: gotham-bold, sans-serif; border: 1px solid #BCBEC0; background-image: url(../images/grad-shallow-bg.gif); background-position: top left; background-repeat: repeat-x; background-color: #f1f2f2; color: #404040; height: 25px; line-height: 25px; text-align: center; } #thumb-picker .tabs a:hover { background-color: #E9E9E9; background-image: none; color: #000000; } #thumb-picker .tabs a.first { border-radius: 8px 0 0 8px; border-right: 0; } #thumb-picker .tabs a.last { border-radius: 0 8px 8px 0; } #thumb-picker .tabs a.active { background-color: #585858; background-image: none; color: #FFFFFF; } /* LEFT COLUMN */ #left-column { float: left; width: 210px; padding: 20px 0 0 20px; } #left-column h2, #left-column h3 { margin-bottom: 0.2em; } #left-footer { position: absolute; bottom: 0; left: 0; } .vertical-navigation { padding-bottom: 10px; } .vertical-navigation.ss { text-align: center; font-size: 1em; padding: 10px 0; min-height: 245px; } .vertical-navigation ul { font-family: gotham-book, sans-serif; font-size: 1.1em; list-style-type: none; } .vertical-navigation ul li { } .vertical-navigation ul li a { display: block; margin: 0; padding: 5px 0 !important; color: #404040; } .vertical-navigation.ss ul li a { padding: 7px 40px !important; } .vertical-navigation ul li a:hover { color: #aaaaaa; } .vertical-navigation.ss ul li a:hover { background-color: #D1D3D4; color: #000000; } .vertical-navigation ul li a.active { font-family: gotham-bold, sans-serif; } .vertical-navigation.ss ul li a.active { background-color: #D1D3D4; } #benefits-summary { padding: 15px 10px 5px; font-family: gotham-book, sans-serif; font-size: 0.95em; } #benefits-button { display: block; padding: 8px 0 5px; font-family: gotham-book, sans-serif; font-size: 1.2em; } #benefits-summary p, #benefits-button span { display: block; padding-left: 24px; margin-bottom: 0.5em; background-image: url(../images/solarsense/benefit-bullet.png); background-position: 0 1px; background-repeat: no-repeat; } #center-column { float: left; width: 700px; position: relative; padding: 20px; } #center-column.narrow { width: 520px; padding: 20px 0; } #main-content { padding: 0 20px; font-size: 0.9em; } #main-content ul, #main-content ol { margin-left: 1.5em; margin-bottom: 1em; } #main-content li { margin-bottom: 0.3em; } /* ROOF FINDER INTERFACE */ #roof-finder-map { width: 480px; height: 400px; margin-bottom: 0; } #find-my-roof-form { margin-bottom: 20px; border-top: 0; border-radius: 0 0 8px 8px; } #find-my-roof-box { } #find-my-roof-form form { float: left; width: 44%; } #find-my-roof-form form label { font-size: 0.9em; } #find-my-roof-form form .button { padding-right: 10px; padding-left: 10px; } #find-my-roof-form th, #find-my-roof-form td { border: 0; background-color: transparent; padding: 0; } .find-my-roof-text { float: left; width: 52%; padding-right: 15px; } /* GALLERY */ .gallery { margin-bottom: 10px; } .image-thumb { display: block; float: left; margin: 0 5px 5px 0; } .image-thumb img { display: block; } /* PAGE LIST */ .item.page { background-image: none; background-color: #FFFFFF; } .item.page .item-content { } .item.page .item-content h2 { width: 60%; font-size: 1.2em; color: #404040; font-family: gotham-bold, sans-serif; } .item.page .brand-logo { display: block; } .item.page .page-image { display: block; float: right; margin: 0 0 7px 20px; } /* PROJECTS/CASE STUDIES */ .item.project { } .item.project .item-content { } .item.project .item-content h2 { font-size: 1.2em; color: #404040; font-family: gotham-bold, sans-serif; } .project-type { position: absolute; top: -10px; right: -13px; } .item.project .project-image { display: block; float: right; margin: 0 0 7px 20px; } .pdf-download { } /* in xinha stylist */ .pdf-download:hover { color: #aaaaaa; } .page-nav { font-size: 0.8em; } .page-nav .middle { color: #aaaaaa; } #project-summary { float: right; width: 250px; margin: 0 0 20px 20px; } #project-summary p { margin-bottom: 0.6em; } #project-summary strong, #project-summary b { font-family: gotham-bold, sans-serif; font-weight: normal; } /* TESTIMONIALS */ #testimonial { } .testimonial { position: relative; } .testimonial .quote { font-family: gotham-book, sans-serif; font-size: 1.05em; color: #6D6E71; margin-bottom: 0.7em; } .testimonial .title { font-size: 0.7em; font-weight: bold; color: #E9614D; } /* CONTACT */ #contact-form { float: right; margin: 0px 0 10px 20px; width: 50%; } /* SEARCH */ .search-results-pagination { text-align: center; } #right-column { float: right; width: 210px; padding: 20px 20px 20px 0; } #right-column h2, #right-column h3 { margin-bottom: 0.5em; } #right-column-footer { position: absolute; bottom: 10px; right: 0; width: 210px; padding: 0 20px 10px 0; text-align: center; } #search-box { border-radius: 3px; border: 1px solid #A7A9AC; margin-bottom: 10px; } #search-box input { border: 0; background-color: transparent; } .item { display: block; border-radius: 8px; border: 1px solid #BCBEC0; background-image: url(../images/grad-shallow-bg.gif); background-position: top left; background-repeat: repeat-x; background-color: #f1f2f2; color: #404040; margin-bottom: 10px; } .item.tall { background-image: url(../images/grad-tall-bg.gif); } .item .item-content { display: block; position: relative; padding: 12px 12px 5px; border-radius: 8px; background-position: top right; background-repeat: no-repeat; color: #404040; font-size: 0.8em; } .item a.item-content:hover { color: #888888; background-color: #f5f5f5; } .item .title { display: block; font-family: gotham-bold, sans-serif; font-size: 1.4em; margin-bottom: 7px; } .item .quote { font-family: gotham-book, sans-serif; font-size: 1.2em; } .item .name { font-size: 0.8em; text-align: right; } .feature-band { display: block; padding: 0 10px; height: 28px; line-height: 28px; font-family: gotham-bold, sans-serif; color: #FFFFFF; text-shadow: 0.1em 0.1em 0.1em #000000; background-image: url(../images/black-trans.png); background-color: transparent; margin-bottom: 7px; font-size: 0.9em; } .feature-band.yellow { background-image: none; background-color: #FDCF57; color: #000000; text-shadow: none; } .feature-band.yellow:hover { background-color: transparent; background-image: url(../images/black-trans.png); color: #FDCF57; text-shadow: 0.1em 0.1em 0.1em #000000; } #quote-form-small { } #quote-form-small input { font-size: 1em; margin-bottom: 3px; padding: 2px 0 2px 3px; width: 97%; } #twitter-box { font-size: 0.9em; } #twitter-box a { color: #777777; } #twitter-box a:hover { color: #aaaaaa; } .image-item { height: 150px; position: relative; display: block; border-radius: 8px; margin-bottom: 10px; } a.image-item:hover .feature-band { color: #aaaaaa; } .image-item .feature-band { width: 190px; position: absolute; bottom: 0; left: 0; } #projects-footer { padding: 15px 20px; } #projects-footer h3 { float: left; } .project-arrow { display: block; float: right; width: 19px; height: 19px; margin-left: 7px; background-color: #E9614D; background-repeat: no-repeat; background-position: center; } .project-arrow.scrollright { background-image: url(../images/arrow-right.gif); } .project-arrow.scrollleft { background-image: url(../images/arrow-left.gif); } #projects { position: relative; overflow: hidden; float: left; width: 940px; height: 100px; } #projects .scrollable-items { width: 10000px; position: absolute; } #projects .scrollable-item { float: left; } #logos-footer { padding: 10px 20px; text-align: center; } /* MEGAMENU */ #megamenu-footer { font-size: 0.75em; margin-bottom: 30px; padding-left: 20px; } #megamenu-footer ul { float: left; margin: 0; padding: 0 40px 0 0; list-style-type: none; } #megamenu-footer ul li { margin: 0; padding: 0; } #megamenu-footer ul li.large { font-size: 1.3em; padding: 0; margin: 0 0 6px; } #megamenu-footer ul li a { color: #777777; display: block; padding: 0 0 4px; } #megamenu-footer ul li a:hover { color: #333333; } /* FANCYBOX PAGE */ body.popup { background-image: none; } #popup-root { } /* TABS */ .tabs ul { list-style-type: none; padding: 0; margin: 0; } .tabs ul li { float: left; margin: 0; padding: 0; } .tabs ul li a { display: block; background-color: #000000; color: #FFFFFF; text-align: center; padding: 1px 5px; margin-right: 2px; }/* GOTHAM */ @font-face { font-family: 'gotham-book'; src: url('fonts/gotham-book.eot'); src: url('fonts/gotham-book.eot?#iefix') format('embedded-opentype'), url('fonts/gotham-book.woff') format('woff'), url('fonts/gotham-book.ttf') format('truetype'), url('fonts/gotham-book.svg#GothamBook') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'gotham-bold'; src: url('fonts/gotham-bold.eot'); src: url('fonts/gotham-bold.eot?#iefix') format('embedded-opentype'), url('fonts/gotham-bold.woff') format('woff'), url('fonts/gotham-bold.ttf') format('truetype'), url('fonts/gotham-bold.svg#GothamBold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'gotham-light'; src: url('fonts/gotham-light.eot'); src: url('fonts/gotham-light.eot?#iefix') format('embedded-opentype'), url('fonts/gotham-light.woff') format('woff'), url('fonts/gotham-light.ttf') format('truetype'), url('fonts/gotham-light.svg#GothamLight') format('svg'); font-weight: normal; font-style: normal; }.project-thumb { float: left; width: 100px; height: 100px; } .boxgrid { position: relative; float:left; width: 100px; height: 100px; margin: 0 20px 0 0; overflow: hidden; } .boxgrid img{ position: absolute; top: 0; left: 0; } .boxcaption{ position: absolute; float: left; display: block; height: 90px; width: 90px; padding: 5px; color: #FFFFFF; background-color: #000000; font-size: .7em; opacity: .8; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; } .boxcaption h3 { font-size: .9em; font-weight: normal; margin-bottom: 0.3em; color: #FFFFFF; } .caption, .boxcaption { top: 100px; left: 0; text-align: left; z-index: 20; } .gridlink { position: absolute; top: 0; left: 0; display: block; width: 100px; height: 100px; z-index: 30; } .gridlink span { display: none; }/* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/drop_line.html Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ .main-navigation { position: relative; z-index: 100; background-color: #fbb03c; background-image: url(../images/main-navigation-bg.gif); background-repeat: repeat-y; border-radius: 5px 5px 0 0; } * html .main-navigation { padding-bottom: 0; } .main-navigation ul { list-style-type: none; margin: 0; padding: 0; } .main-navigation li { float: left; position: relative; margin: 0; padding: 0; } /* style the first level links */ .main-navigation a { display: block; padding: 0 10px 0; height: 35px; line-height: 35px; font-family: gotham-book, Arial, Helvetica, sans-serif; color: #000000; font-size: 0.75em; } .main-navigation a.active { font-family: gotham-bold; background-image: url(../images/main-navigation-a-active-bg.png); background-repeat: no-repeat; background-position: bottom center; } .main-navigation a.first { margin-left: 10px; } .main-navigation a.last { border: 0; } /* style the top level hover */ .main-navigation a:hover, .main-navigation :hover > a, .main-navigation ul ul :hover > a { background-color: #ffd770; } /* style the second level links */ .main-navigation ul ul a { text-align: left; padding: 10px 0px 8px 13px; height: auto; text-transform: none; border: 0; background-image: url(../images/black-trans.png); /*opacity: .8; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";*/ color: #FFFFFF; line-height: normal; } .main-navigation ul ul a.first2 { } .main-navigation ul ul a.last2 { } /* style the second level hover */ .main-navigation ul ul a:hover, .main-navigation ul ul :hover > a { background-color: #000000; color: #FFFFFF; } /* style the third level links */ .main-navigation ul ul ul a { } .main-navigation ul ul ul a.first2 { } .main-navigation ul ul ul a.last2 { } /* style the third level hover */ .main-navigation ul ul ul a:hover { background-color: #000000; color: #FFFFFF; } /* hide the sub levels and give them a positon absolute so that they take up no room */ .main-navigation ul ul { margin: 0; padding: 0; visibility: hidden; position: absolute; width: 200px; height: 0; top: 35px; left: 0; } /* another hack for IE5.5 */ * html .main-navigation ul ul { top: 35px; t\op: 36px; } /* position the third level flyout menu */ .main-navigation ul ul ul { left: 200px; top: 0px; width: 150px; border-top: 0; } /* style the table so that it takes no part in the layout - required for IE to work */ .main-navigation table { position: absolute; top: 0; left: 0; } /* DON'T NEED TO CHANGE */ /* make the second level visible when hover on first level list OR link */ .main-navigation ul li:hover ul, .main-navigation ul a:hover ul{ visibility: visible; } /* keep the third level hidden when you hover on first level list OR link */ .main-navigation ul :hover ul ul{ visibility: hidden; } /* make the third level visible when you hover over second level list OR link */ .main-navigation ul :hover ul :hover ul{ visibility: visible; } .main-navigation ul ul li { float: none; margin: 0px; padding: 0px; } /* yet another hack for IE5.5 */ * html .main-navigation ul ul a { width: 140px; w\idth: 139px; }.large-paragraph { font-size: 1.4em; } .pdf-download { display: block; padding: 8px 0 6px 50px; height: 36px; line-height: 18px; background-image: url(../images/pdf-icon.png); background-repeat: no-repeat; background-position: top left; font-family: gotham-bold, sans-serif; font-size: 1.1em; color: #404040; } .elec-icon, .saving-icon, .carbon-icon { display: block; height: 34px; line-height: 17px; font-size: 1.1em; padding: 3px 0 3px 47px; background-position: top left; background-repeat: no-repeat; font-family: gotham-book, sans-serif; } .elec-icon { background-image: url(../images/project-icons/output.png); } .saving-icon { background-image: url(../images/project-icons/saving.png); } .carbon-icon { background-image: url(../images/project-icons/carbon.png); }