/* (c) 2008 Bam Creative Title : style.css Author : Bam Creative Description : Stylesheet */ /* GLOBAL SETTINGS------------------------------------- GLOBAL SETTINGS */ html { height:100%; } body{ font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.8em; /* MASTER font-size controller */ color: #353535; /* MASTER text colour controller */ height:100%; } body.home { background:url(../art/container-bg.gif) repeat-y center; } body.main { background:url(../art/container-bg-main.gif) repeat-y center; } .wrap{ background:url(/art/home-wrap.gif) repeat-x; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -45px auto; /* negative value must be the same height as footer (for stickyness) */ } body.main .right-content{ float:right; width:280px; } body.main .wrap{ background:url(/art/main-wrap.gif) repeat-x; min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -45px auto; /* negative value must be the same height as footer (for stickyness) */ } body.main #header{ background:url(/art/home-header.jpg) no-repeat center top; height:206px; } #header{ background:url(/art/home-header.jpg) no-repeat center; height:563px; } .header-inner{ width:960px; margin:0 auto; position:relative; } .header-inner p{ margin:0px; padding:0px; } /*-- this controls the tinymce area --*/ .mceContentBody { background-image: none; background-color: #fff; } .top-right{ position:absolute; right:0; } /* LINKS -------------------------------------------------------- LINKS */ a { color:#9da112; text-decoration:underline; } a:hover { text-decoration:none; } /* HEADINGS -------------------------------------------------- HEADINGS */ h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; padding: 0; padding-bottom: 0.2em; letter-spacing:-1px; font-family:Verdana, Helvetica, sans-serif; } h2, h3, h4, h5, h6 { padding-top: 0.2em; } h1 { font-size: 2.0em; color:#0a2840; padding-bottom:15px; font-weight:bold; } h2 { font-size: 1.6em; color:#9da112; } h3 { font-size: 1.4em; color:#0a2840; } h4 { font-size: 1.3em; padding-bottom: 0.3em; color:#9da112; } h5 { font-size: 1.2em; font-weight: bold; padding-bottom: 0.2em; color:#0a2840; } h6 { font-size: 1em; font-weight: bold; padding-bottom: 0.2em; color:#9da112; } /* 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 2.5em; } #content li, body#tinymce li { font-size: 100%; line-height: 1.6em; } #content ul li, body#tinymce ul li { list-style-image:url(../art/bullet.gif); } /*-- 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; } /* LAYOUT ------------------------------------------------------ LAYOUT */ #container { width:960px; margin: 0 auto; position: relative; } #header { } #content { width:650px; padding:15px 0 25px 0; float:left; } body.home #content { width:344px; padding:15px 0px 20px 0; float:left; } .middle{ float:left; padding-top:15px; padding-left:26px; width:260px; padding-bottom:20px; } .right-content{ float:right; width:596px; } #special_offer .snippet_title{ font-size: 2.0em; color:#0a2840; padding-bottom:15px; font-weight:bold; letter-spacing:-1px; } .newsletter-title{ font-size: 2.0em; color:#0a2840; padding-left:21px; padding-top:12px; padding-bottom:15px; font-weight:bold; letter-spacing:-1px; } #footer { background:url(../art/footer-bg.gif) no-repeat center; height:45px; color:#fff; } #footer a{ color:#9da112; text-decoration:none; } #footer p{ padding-top:11px; } .push { height:45px; } .inner-footer{ width:960px; margin:0 auto; } .copyright { float: left; } .credits { float: right; margin-right:8px; } /* TABLES ------------------------------------------------------ TABLES */ /*-- data table --*/ table.custom-data-table { border: 1px solid #ccc; border-bottom: none; border-right: none; width: 100%; border-collapse:collapse; } 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: #eee; background-color:#003d71; font-size: 12px; font-weight: bold; height: 29px; color: #fff; 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; } /*----------------------------------------------------------- MESSAGES */ .message-error, .confirm-message, .message { width: auto; background-color: #eee; border: 1px solid #e2e2e2; border-bottom-color: #c1c1bd; padding: 12px; margin: 0 auto 10px; color: #555; } .message-inner { padding: 12px; } .message-error p, .confirm-message p, .message p { margin: 0; padding: 0; } .confirm-message h3{ color: #4b953c; } .message-error h3 { color: #6d0808; } .error-inner { background: #ffcfcf; color: #fff; } .confirm-inner { background: #e5ffe2; color: #fff; } /* MISC --------------------------------------------------------- MISC */ hr { background: #ccc;/*NS FF OP */ color: #ccc;/*IE*/ border: none;/*FF NS OP*/ height: 1px;/*FF NS OP*/ width: 100%; } /* FORMS -------------------------------------------------------- FORMS */ /* 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 */ /* CUSTOM CLASSES -------------------------------------- CUSTOM CLASSES */ .clear { clear: both; } /* 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; } */ /* HOME PAGE FADER -------------------------------------- HOME PAGE FADER */ #featured{ top:160px; position:absolute; } #featured .snippet_title{ text-align:right; position:absolute; right:170px; top:379px; color:#FFF; } .custom-view-product{ position:absolute; top:365px; right:0px; width:152px; height:29px; background:url(../art/view-product.gif) no-repeat; text-indent:-999em; } .custom-view-special{ float:right; width:122px; height:36px; background:url(../art/view-deal.gif) no-repeat; text-indent:-999em; } .custom-view-special:hover{ background-position:right; } .view-cat{ float:right; width:77px; height:30px; background:url(../art/view-btn.gif) no-repeat; text-indent:-999em; margin-top:20px; } .view-cat:hover{ background-position:right; } .custom-read-more{ float:right; width:134px; height:36px; background:url(../art/read-more.gif) no-repeat; text-indent:-999em; } .custom-read-more:hover{ background-position:right; } .newsletter{ background:url(../art/newsletterbg.gif) no-repeat; width:256px; height:157px; } .newsletter-wrap{ float:right; } p.newsletter-title{ } .custom-view-product:hover{ background-position:right; } #featured_nav{ position:absolute; top:525px; left:0px; color:#FFF; } #featured_nav a{ color:#000; display:block; float:left; font-weight:bold; background:#FFF; padding:6px 8px 6px 8px; text-decoration:none; margin-right:4px; } #featured_nav a:hover{ background:#689fc8; } #featured_nav a.activeSlide{ background:#9ca012; } .newsletter{ position:relative; width:282px; } .newsletter label{ display:none; } .newsletter input{ width:190px; } .newsletter input.submitbtn{ position:absolute; top:190px; left:140px; width:122px; height:36px; background:url(../art/subscribe.gif) no-repeat; text-indent:-999em; border:none; cursor:pointer; } .newsletter input.submitbtn:hover{ background-position:right; } #ename{ position:absolute; background:none; border:none; top:38px; left:33px; color:#FFF; width:210px; } #email2{ position:absolute; background:none; border:none; top:114px; left:33px; width:210px; color:#FFF; } /* CATALOGUE ------------------------------------- CATALOGUE */ div.product-admin-separator { width: 1px; height: 26px; border-left: 1px solid #999; margin: 0 12px 0 10px; float: left; } div.category { clear: both; background: #f6f6f6; border-bottom: 1px solid #e3e3e3; border-right: 1px solid #eceaea; padding: 10px; margin-bottom:15px; } div.product { clear: both; background: #f6f6f6; border-bottom: 1px solid #e3e3e3; border-right: 1px solid #eceaea; padding: 10px; margin-bottom:15px; } a.category-image, a.product-image { float: left; border: 0px solid #fff; padding: 0px; margin: 2px 15px 2px 2px; } div.text input { width: 70%; } #youtube, #downloads, #enquire { margin-left:13px; margin-top:15px; } #youtube h2, #downloads h2 { font-size: 1.8em; color:#0a2840; padding-bottom:15px; font-weight:bold; text-decoration:none; } #product_image{ float:left; margin-bottom:28px; } .small_product_image{ float:left; margin-left:10px; margin-bottom:10px; } .small_product_image img, .small_product_image a img, .small_product_image a{ padding:0px; } .category-image{ text-decoration:none; } .category-image img{ width:150px; border:none; } #content #login div{ float:left; } #content #login div input{ margin-right:10px; } #content #login div input{ padding:6px; } #content #login button{ background:url(../art/login.gif); width:77px; height:30px; border:none; cursor:pointer; } #content #login button:hover{ background-position: right top; } #content #login button span{ display:none; } #content #login label{ vertical-align:middle; } #enquire a.button span{ display:none; } #enquire a.button{ background:url(../art/enquire.gif); width:97px; height:30px; border:none; cursor:pointer; display:block; } #enquire a.button:hover{ background-position: right top; } .logout{ position:absolute; right:0px; top:128px; color:#FFF; } form#contact_form textarea, form#enquiry textarea, form#contact_form text, form#enquiry text{ font-family:Verdana, Geneva, sans-serif; font-size:100%; } form#contact_form label, form#enquiry label{ display:block; margin-top:9px; } form#enquiry div.input.radio { margin-top:15px; margin-bottom:15px; } form#contact_form div.input textarea, form#enquiry div.input textarea{ width:315px; } form#enquiry div.input, form#contact_form div.input{ width:450px; } form#enquiry div.input input, form#contact_form div.input input{ padding:3px; } form#contact_form input.submit, form#enquiry input.submit{ display:block; width:70px; background:url(../art/send.gif) no-repeat; height:36px; border:none; cursor:pointer; margin-top:10px; margin-left:250px; line-height: 1 !important; overflow:hidden; text-indent:-999em; } form#contact_form input.submit:hover, form#enquiry input.submit:hover{ background-position:bottom right; }