/* (c) 2008 Bam Creative Title : style.css Author : Bam Creative Description : Stylesheet */ /* GLOBAL SETTINGS------------------------------------- GLOBAL SETTINGS */ html { } body { font-family: Arial, Helvetica, sans-serif; font-size: 0.75em; /* MASTER font-size controller */ color: #666; /* MASTER text colour controller */ background-color: #dfd7c6; } /*-- this controls the tinymce area --*/ .mceContentBody { background-image: none; background-color: #fff; } /* LINKS -------------------------------------------------------- LINKS */ a { color: #f37121; text-decoration: none; } a:hover { color: #333; } #footer a { color: #666; } #footer a:hover { color: #f37121; } /* -- buttons -- */ a.energyaudit_btn { width: 306px; height: 109px; display: block; text-indent: -99999em; background: url(/art/eco_btn.gif) 0 0 no-repeat; cursor: pointer; border: none; position: absolute; left: 0; top: 9px; } a.energyaudit_btn:hover { background-position: 0 -109px; } a.finalreport_btn { width: 306px; height: 109px; display: block; text-indent: -99999em; background: url(/art/final_result_btn.gif) 0 0 no-repeat; cursor: pointer; border: none; position: absolute; left: 0; top: 9px; } a.finalreport_btn:hover { background-position: 0 -109px; } a.whatis_btn { width: 299px; height: 109px; display: block; text-indent: -99999em; background: url(/art/whatis_btn.gif) 0 0 no-repeat; cursor: pointer; border: none; position: absolute; left: 316px; top: 9px; } a.whatis_btn:hover { background-position: 0 -109px; } a.getinvolved_btn { width: 294px; height: 109px; display: block; text-indent: -99999em; background: url(/art/getinvolved_btn.gif) 0 0 no-repeat; cursor: pointer; border: none; position: absolute; left: 623px; top: 9px; } a.getinvolved_btn:hover { background-position: 0 -109px; } a#facebook-button, a#twitter-button { float:left; display:block; text-indent:-9999px; line-height:0; font-size:0; height:47px; margin-top:10px; cursor:pointer; } #facebook-button { background:url(/art/facebook_button.jpg); width:153px; } #twitter-button { background:url(/art/twitter_button.jpg); width:154px; } .readall_btn { width: 87px; height: 21px; display: block; padding: 5px 0 0 27px; background: url(/art/readmore_btn.gif) 0 0 no-repeat; cursor: pointer; border: none; position: absolute; bottom: 0px; right: 0px; } .readall_btn:hover { background-position: 0 -26px; } .rss_btn { width: 20px; height: 18px; display: block; text-indent: -99999em; background: url(/art/rss_btn.gif) 0 0 no-repeat; cursor: pointer; border: none; position: absolute; top: 11px; right: 11px; } .rss_btn:hover { background-position: 0 -18px; } /* HEADINGS -------------------------------------------------- HEADINGS */ h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; padding: 0; padding-bottom: 0.4em; color: #544d45; } h1 { font-size: 1.7em; line-height: 1.2em; font-weight: normal; } h2 { font-size: 1.333em; font-weight: 600; line-height: 1.3em; } h3 { font-size: 1.25em; font-weight: 600; line-height: 1.2em; } h4 { font-size: 1.1em; line-height: 1.2em; font-weight: bold; padding-bottom: 0.3em; } h5 { font-size: 1em; line-height: 1.3em; font-weight: bold; padding-bottom: 0.2em; } h6 { font-size: 0.9em; line-height: 1.3em; font-weight: bold; padding-bottom: 0.2em; } /* PARAGRAPHS ---------------------------------------------- PARAGRAPHS */ p { font-size: 100%; line-height: 1.4em; padding: 0 0 1.25em 0; } /* LISTS -------------------------------------------------------- LISTS */ ul, ol { padding:0 0 1.25em 2em; } #content li, body#tinymce li { font-size: 100%; line-height: 1.6em; } #content ul li, body#tinymce ul li { list-style-type: none; background: url(/art/bullet.gif) 0 0.3em no-repeat; padding-left: 15px; } /*-- nested lists --*/ #content ul ul, body#tinymce ul ul { padding: 0 0 0 1.5em; } #content ol ol, body#tinymce ol ol { padding: 0 0 0 1.5em; } #footer ul { margin: 0; padding: 0; list-style-type: none; } #footer ul li { float: left; padding: 0 10px 0 14px; background: url(/art/footer_bullet.gif) 0 5px no-repeat; } #footer ul li.start { background: none !important; padding-left: 0; } /* LAYOUT ------------------------------------------------------ LAYOUT */ #container { } #header { background-color: #fff; } #top_header { width: 910px; height: 93px; margin: 0 auto; background-color: #fff; position: relative; } #hero_wide { width: 100%; height: 239px; background: url(/art/hero_wide.jpg) top center no-repeat; } #hero_inner { position: relative; width: 910px; height: 239px; margin: 0 auto; } #hero_slideshow { width: 465px; height: 271px; position: absolute; right: 0; top: -32px; background: url(/art/hero1_sample.png) top right no-repeat; } /* #hero_slideshow img { position: absolute !important; margin: 0; padding: 0; right: 0; bottom: 0; } */ #mid_section { background: url(/art/midsection_bg.gif) 0 0 repeat-x; height: 124px; width: 100%; } #mid_section_inner { width: 910px; margin: 0 auto; height: 124px; position: relative; } #page { background-color: #f7f3ea; } #page_inner { width: 910px; margin: 0 auto; padding: 30px 0; } #content { float: left; display: inline; width: 580px; } #side { float: right; display: inline; width: 307px; } .side_widget { background: url(/art/side_widget_bg.gif) 0 0 no-repeat; width: 307px; margin-bottom: 20px; position: relative; } .side_widget_content { padding: 12px 15px 0; } .side_widget_bottom { width: 307px; height: 8px; background: url(/art/side_widget_bottom.gif) 0 0 no-repeat; font-size: 0; line-height: 0; } #page-content { /* all bamCMS content goes inside here: shouldn't need styling really */ } #footer { width: 910px; height: 145px; margin: 0 auto; position: relative; } .copyright { float: left; border-bottom: 1px solid #d1caba; padding: 20px 0 10px; } .footer_logos { padding-top: 8px; clear:left; } .footer_logos-wp { padding-top: 0px; clear:left; } #consortium { clear:both; padding-top: 8px; } #newsletter_signup { width: 296px; position: absolute; top: 0; right: 0; } #newsletter_signup h2 { display: block; width: 296px; position: absolute; left: 0; top: 0; height: 38px; background: url(/art/newsletter_signup.gif) 0 0 no-repeat; padding: 0; margin: 0; text-indent: -99999em; } #newsletter_signup input.text_input { background: url(/art/footerfield_long.gif); border: none; color: #818181; display: block; font-family: Arial,Helvetica,sans-serif; font-size: 11px; height: 13px; left: 0; padding: 10px; position: absolute; width: 236px; } #newsletter_signup input#name { position: absolute; left: 19px; top: 47px; } #newsletter_signup input#email { position: absolute; left: 19px; top: 87px; background-image: url(/art/footerfield_short.gif); width: 136px; } #subscribe_btn { width: 91px; height: 31px; display: block; text-indent: -99999em; background: url(/art/subscribe_btn.gif) 0 0 no-repeat; cursor: pointer; border: none; position: absolute; top: 87px; right: 22px; } #subscribe_btn:hover { background-position: 0 -31px; } /* ARTICLES MODULE------------------------------------------ ARTICLES MODULE */ div.news-box { width: 200px; float: right; padding: 10px; border: 1px solid #ccc; } div.latestnews { } img.news-thumb { float: left; padding: 4px; border: 1px solid #eee; margin: 0 8px 8px 0; } div.news-item { margin-bottom: 5px; } div.news-item h3 a { text-decoration: none; } div.article-category-heading { margin-bottom: 20px; background: url(/art/article_dline.gif) bottom left repeat-x; } div.article-thumbnail { float: left; margin: 0 9px 9px 0; } div.article-thumbnail img { border: 1px solid #eee; padding: 4px; } div.articles-paginator { background-color: #eeebe1; padding: 3px 8px; width: auto; clear: both; margin-bottom: 10px; } div.article-listing { padding-bottom: 8px; margin-bottom: 10px; } div.article-short-content { float: left; background: url(/art/article_dline.gif) bottom left repeat-x; } div.articles-paginator p { padding: 0; } p.article-date { font-size: 90%; color: #bd8146; padding-bottom: 0.8em; } div.article-image { float: right; margin: 0 0 10px 10px; } div.article-image img { border: 1px solid #eee; padding: 8px; } /* MISC --------------------------------------------------------- MISC */ hr { background: #ccc;/*NS FF OP */ color: #ccc;/*IE*/ border: none;/*FF NS OP*/ height: 1px;/*FF NS OP*/ width: 100%; } img.logo { padding-top: 23px; } /* FORMS -------------------------------------------------------- FORMS */ #contactform { width: 580px; position: relative; } form.pagecontentform fieldset ol { list-style: none; padding: 0; } div.input { clear: left; margin-bottom: 6px !important; padding: 2px; } div.input label { float: left; width: 204px !important; margin-right: 18px !important; } div.input span { font-size:smaller; display:block; padding-bottom:1em; } div.input input, div.input textarea { border: 1px solid #dfd7c6; border-top-color: #cec5b3; color: #666666; font-family: Arial, Helvetica, sans-serif; padding: 5px; width: 270px; } div.input textarea { height: 65px; font-size: 12px; } input.submit { width: 93px; height: 33px; display: block; text-indent: -99999em; background: url(/art/send_btn.gif) 0 0 no-repeat; cursor: pointer; border: none; } input.submit:hover { background-position: 0 -33px; } div.checkbox label { float: none; line-height: 22px; margin-left: 10px; } div.checkbox input { float: left; width: auto; } .message-error { color: #c00; } /* No generic form styling shall be applied here as it causes too many problems with Bamcms admin area. Instead, use classes or ids on forms to style. For more information refer to the CSS and XHTML Best Practices Manual */ /* TABLES ------------------------------------------------------ TABLES */ /*-- data table --*/ table.custom-data-table { border: 1px solid #ccc; border-bottom: none; border-right: none; width: 100%; } td.custom-data-header { background:#eae1d1; text-align:center !important; font-weight:bold; } table.custom-data-table th, table.custom-data-table td { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 4px; text-align: center; line-height: normal; } table.custom-data-table th{ background-color: #eae1d1; font-size: 12px; font-weight: bold; height: 23px; color: #666; line-height: normal; } table.custom-data-table td { color: #676767; font-size: 12px; text-align: left; } table.custom-data-table td.right { text-align: right; } /* CUSTOM CLASSES -------------------------------------- CUSTOM CLASSES */ .clear { clear: both; } .custom-highlight { color:#f36c1a; font-size:13px; font-weight:bold; } /* Any classes that start with the "custom-" prefix will automatically be made available in the TinyMCE Styles drop down menu. For example: .custom-red-text { color: #F00; } */