/* (c) 2008 Bam Creative Title : style.css Author : Graeme @ Bam Creative Description : Stylesheet */ /* GLOBAL SETTINGS------------------------------------- GLOBAL SETTINGS */ html { } body { font-family: Helvetica, sans-serif; font-size: 0.85em; /* MASTER font-size controller */ color: #fcfcfc; /* MASTER text colour controller */ background:#010609; } /*-- this controls the tinymce area --*/ .mceContentBody { background-image: none; background:#010609; } .bg{ background:url(../art/bg.jpg) center top no-repeat; width:auto; height:100%; } .overlay{ background:url(../art/overlay.png) center top; width:auto; height:100%; } /* LINKS -------------------------------------------------------- LINKS */ a { color:#34b44a; text-decoration:none ; position: relative; } a:hover { text-decoration:underline; } form input{ position:relative; } /* HEADINGS -------------------------------------------------- HEADINGS */ h1, h2, h3, h4, h5, h6 { font-weight: normal; margin: 0; padding: 0; padding-bottom: 0.4em; font-family:Helvetica, sans-serif; letter-spacing:-1px; } h1 { font-size: 2.6em; font-weight:bold; } h2 { font-size: 1.6em; font-weight: 600; color:#34b44a; padding-top:0.3em; } h3 { font-size: 1.4em; font-weight: 600; color:#fff; } h4 { font-size: 1.3em; color:#34b44a; font-weight: bold; padding-bottom: 0.3em; } h5 { font-size: 1.2em; color:#0085bd; font-weight: bold; padding-bottom: 0.2em; } h6 { font-size: 1.2em; color:#34b44a; 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 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.png); } /*-- 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 { width:960px; height:220px; margin:0 auto; position:relative; z-index:9; } .halo{/*Car Class*/ position:absolute; top:70px; right:-65px; } body#subtemplate .halo{ position:absolute; top:60px; right:0px; z-index:10; } .banner{ margin:0 auto; background:url(../art/home-banner.png) no-repeat center; height:231px; } #content { width:660px; background:#010609; margin-top:19px; padding-bottom:20px; float:left; } body#subtemplate #content { width:660px; padding:20px; background:url(../art/subconbg.png) no-repeat; margin-top:0px; padding-bottom:20px; float:right; padding-top:13px; margin-bottom:30px; min-height:500px; height:auto !important; height:500px; } a.fleft{ float:left; position:relative; display:block; } .subwrap{ float:left; width:215px; } .hlogo{ margin-left:-79px; margin-top:24px; } #page-content { /* all bamCMS content goes inside here: shouldn't need styling really */ } .title{ margin-bottom:20px; } #footer { margin-top:30px; border-top:1px solid #0d3215; background:#010609; } .copyright { float: left; padding-top:15px; } .credits { float: right; padding-top:15px; } #not-yet-member-box{ background:url(../art/priority.png) no-repeat; width:454px; height:196px; padding-left:20px; margin-top:35px; float:left; } #not-yet-member{ padding:45px 40px 0px 160px; text-align:right; } #featured-product-box{ background:url(../art/free.png) no-repeat; float:right; width:454px; height:169px; margin-top:35px; position:relative; } .freetrial{ float:right; margin-right:-30px; margin-top:-17px; } .girl{ margin-top:-50px; margin-left:-60px; position:absolute; } .contact{ float:right; margin-top:19px; } /*Fades Home----------------------------------------- */ .act a span { display:none; } .act a.login, .act a.login .hover { display:block; padding:0; height:47px; background:url(../art/login.gif) no-repeat; width:197px; cursor:pointer; float:left; } .act a.login { background-position: 0 0; } .act .highlight a.login:hover, .act a.login .hover { background-position:-197px 0px; } #logp{ position:absolute; top:0px; right:0px; } /* TABLES ------------------------------------------------------ TABLES */ /*-- data table --*/ table.custom-data-table { border: 1px solid #34B44A; border-bottom: none; border-right: none; width: 100%; border-collapse:collapse; } table.custom-data-table th, table.custom-data-table td { border: 1px solid #34B44A; border: 1px solid #34B44A; padding: 7px; text-align: center; line-height: normal; } table.custom-data-table th{ background-color: #eee; font-size: 16px; font-weight: bold; height: 23px; color: #000; padding:10px; line-height: normal; background:url(../art/th.gif) top repeat-x; } table.custom-data-table td { font-size: 12px; text-align: left; } table.custom-data-table td.right { text-align: right; } /* 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 */ form#login { padding-top:30px; } #login input{ display:block; float:left; margin-right:20px; padding:7px; background: url(/art/inputbg.png) repeat-x; border:1px solid #11491b; color:#34b34a; } #login label{ display:block; float:left; vertical-align:baseline; margin-right:10px; line-height:37px; font-size:1.1em; font-weight:bold; font-style:italic; text-transform:uppercase; color:#34b34a; } #login .submit{ border: 0; background: url(/art/loginbt.gif) 0 0; width: 87px; height: 32px; display: block; cursor: pointer; text-indent: -9999px; } #login .submit:hover { background: url(/art/loginbt.gif) 87px 0px; } /*******************************************Order Form****/ #product_form input{ display:block; float:left; margin-right:20px; padding:7px; background: url(/art/inputbg.png) repeat-x; border:1px solid #11491b; color:#34b34a; width:336px; } #contact-detail input{ display:block; float:right; margin-right:3px; padding:2px; background: url(/art/inputbg.png) repeat-x; border:1px solid #11491b; color:#34b34a; width:30px; } #contact-detail label{ display:block; float:left; vertical-align:baseline; margin-right:10px; line-height:37px; font-size:1.1em; font-weight:bold; font-style:italic; text-transform:uppercase; color:#34b34a; width:170px; padding-right:10px; text-align:right; } input#ProductsState, input#ProductsPostcode{ width:100px; margin-right:-70px; } #product_form label{ display:block; float:left; vertical-align:baseline; margin-right:10px; line-height:37px; font-size:1.1em; font-weight:bold; font-style:italic; text-transform:uppercase; color:#34b34a; width:170px; padding-right:10px; text-align:right; } form div{ position:relative; } #product_form .submit{ border: 0; background: url(/art/send.gif) 0 0; width: 87px; height: 32px; display: block; cursor: pointer; text-indent: -9999px; margin-left:450px; margin-top:20px; } #product_form .submit:hover { background: url(/art/send.gif) 87px 0px; } .prod2 #product_form .submit{ margin-left:530px; } input#ProductsProductone, input#ProductsProducttwo{ width:20px; border:none; display:block; top:10px; position:absolute; z-index:100; left:190px; } #ProductsProductonequantity, #ProductsProducttwoquantity, #ProductformWorkshoptype{ /*****Form Selections*****/ margin-top:10px; } #product_form div.input.checkbox input{ width:20px; border:none; display:block; top:10px; position:absolute; z-index:100; left:190px; } .prod2 #product_form div.input.checkbox input{ width:20px; border:none; display:block; top:10px; position:absolute; z-index:100; left:270px; } .prod2 #product_form div.smalll label{ font-size:0.9em; } .prod2 #product_form label{ display:block; float:left; vertical-align:baseline; margin-right:10px; line-height:37px; font-size:1.1em; font-weight:bold; font-style:italic; text-transform:uppercase; color:#34b34a; width:260px; padding-right:10px; text-align:right; } .fleft{ float:left; } .message-error{ color:#0085BD; clear:both; position:absolute; font-size:0.9em; text-align:right; top:-2px; } textarea{ background:url(../art/textareabg.png) no-repeat; border:1px solid #11491b; color:#34b34a; padding:7px; font-family:Helvetica, sans-serif; font-size:1em; width:330px; } #ProductsProductonequantity{ float:left; } div.input.textarea{ margin-top:20px } /*******************************************Contact Form****/ #ContactForm input{ display:block; float:left; margin-right:20px; padding:7px; background: url(/art/inputbg.png) repeat-x; border:1px solid #11491b; color:#34b34a; width:336px; } #ContactForm label{ display:block; float:left; vertical-align:baseline; margin-right:10px; line-height:37px; font-size:1.1em; font-weight:bold; font-style:italic; text-transform:uppercase; color:#34b34a; width:170px; padding-right:10px; text-align:right; } #ContactForm .submit{ border: 0; background: url(/art/send.gif) 0 0; width: 87px; height: 32px; display: block; cursor: pointer; text-indent: -9999px; margin-left:450px; margin-top:20px; } #ContactForm .submit:hover { background: url(/art/send.gif) 87px 0px; } /*******************************************Free Trial Offer****/ /* 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; } */ .custom-read-more{ display:block; width:145px; height:41px; background:url(../art/readmore.gif) no-repeat; } .custom-read-more:hover{ background-position:right; } #not-yet-member-box a.custom-read-more { position:absolute; top:183px; left:296px; } #feature-product a.custom-apply-now{ position:absolute; top:148px; left:14px; } .custom-apply-now{ display:block; width:145px; height:41px; background:url(../art/apply-now.gif) no-repeat; } .custom-apply-now:hover{ background-position:right; } .custom-apply-now { text-indent:-999em; } .custom-read-more { text-indent:-999em; text-align:left; } #feature-product{ padding:50px 180px 0 20px; } .custom-product-image{ margin-left:25px; border:3px solid #34b44a; } .custom-related-list{ padding:1em 0 1.25em 3.8em; } #contact-detail table{ border:none; } #contact-detail table tr{ border:none; } #contact-detail table td{ border:none; } /*Stripe Table*/ .custom-stripeMe td small{ padding-top:5px; } .custom-stripeMe th{ font-size:16px; border:none; padding:15px 0 15px 0px; color:#34b44a; } .custom-stripeMe{ width:600px; font-size:1em; } .custom-stripeMe td{ padding:7px 3px 7px 3px; background: #072c01; } .custom-stripeMe td h6{ color:#fff; } .custom-stripeMe tr.alt td { background:none; } .custom-stripeMe tr.over td { background: #093701; color:#FFF; }