/*==========CONTENTS==========*/ /* 1. IMPORT 2. HTML TAGS 3. STRUCTURE 4. CLASSES */ /*==========1. IMPORT==========*/ @import "reset.css"; @import "enhancements.css"; /*==========2. HTML TAGS==========*/ html {} body {background: url("../images/header-gradient.png") repeat-x scroll left top #F3F3F3; color: #00142F; font: 75% arial, sans-serif; line-height: 1; } h1, h2, h3, h4, h5, h6 { font-family: arial, sans-serif; font-weight: normal; } h1 {font-size: 32px; line-height: 1.5em; margin-bottom: 0.562em;} h2 {font-size: 28px; line-height: 1.2em; margin-bottom: 0.75em;} h3 {color: #AB2B8A; font-size: 24px; font-weight: bold; line-height: 1.3em; margin-bottom: 0.818em;} h4 {font-size: 20px; line-height: 1.8em; margin-bottom: 0.9em;} h5 {font-size: 18px; line-height: 1em; margin-bottom: 1em; } h6 {font-size: 16px; line-height: 1.125em; margin-bottom: 1.125em;} p, span {font-size: 15px; line-height: 1.4em; margin-bottom: 1.286em;} li {font-size: 15px; line-height: 1.286em; margin-bottom: 1.286em; } ul {list-style: disc; list-style-position: outside; margin-bottom: 1.286em;} /*==== OL style modified by Craig 15/07/2010 =====*/ ol {list-style-type: decimal; list-style-position: inside; margin-bottom: 1.286em; margin-left:30px; lis} small {font-size: 10px; line-height: 1.8em;} blockquote {} blockquote p {} abbr {} sup {font-size: 0.7em; vertical-align: top;} a {border-bottom: 1px solid #0000CC; color: #0000CC; font-weight: normal; text-decoration: none; word-wrap: break-word;} a:link {color: #0000CC;} a:visited {} a:hover {color: #00acd9; border-bottom: 1px solid #00acd9;} a:active {color: #111; position: relative; top: 1px; } div {font-size: 15px; line-height:20px;} dt, dd {margin-bottom: 1em;} dt {font-size: 15px; font-weight: bold; } /*==========3.STRUCTURE==========*/ /*==========3.1 GLOBAL==========*/ /*#wrap { margin: 0 auto; width: 980px;}*/ blockquote p {color: #00aedc; font-style: italic;} blockquote.testimonial p, .testimonial blockquote p {color: #198BB3; font-size: 1.1em; margin-bottom: 1.0em;} cite {color: #38587A; display: block; font-weight: bold; margin-bottom: 1.286em;} /*==========3.2 HEADER==========*/ #header {background: url(../images/header-bg.jpg) no-repeat scroll center top transparent; width: 100%; } #header .header-content {height:390px; margin:0 auto; padding:24px 30px 30px; width:960px;} #header h1 {color: #fff; margin-bottom: 10px;} #header .intro h1 span.no-more {background: url(../images/pg-heading2.png) no-repeat top left; display: block; height: 22px; margin-bottom: 0; text-indent: -9000em; width: 412px;} #header .intro h1 span.exclusive {background: url(../images/pg-heading1.png) no-repeat top left; display: block; height: 39px; text-indent: -9000em; width: 527px; } #header h1#logo {float: left; margin-right: 20px;} #header h1#logo a {background: transparent url(../images/logo.png) no-repeat left top; border: none; color: #fff; display:block; height:57px; text-indent: -9000em; width:177px;} #header h1#logo a:hover {background-color: transparent; border: none; color: #fff;} #header h1#logo a:active {top: 0;} #header ul.contact { display: block; float: left; list-style: none; margin-top: 8px; width: 300px;} #header ul.contact li {color: #00aedc; margin-bottom: 3px;} #header ul.contact li span.country-uk {background: transparent url(../images/uk-flag.png) no-repeat left 3px; display: block; float: left; height: 18px; margin: 0 5px 0 0; width: 20px; text-indent: -9000em;} #header ul.contact li.phone {color: #fff; float: left;} #header ul.contact li.promo-code {clear: both; display: block;} #header .intro {margin-top: 30px; width: 525px;} #header .intro p {color: #00aedc; margin-bottom: 8px;} #header .intro a.btn {float:left; margin:4px 15px 0 0;} #header .intro a.order-online {width: 205px;} /*==========3.3 MAIN==========*/ #content {background-color:#FFFFFF;margin:0 auto; padding:20px; width:975px;} #content-main {float: left; margin: -61px 15px 15px 0; padding:0 15px 15px; position:relative; width: 740px; z-index: 10; } #content-main h2, #content-main h2 strong {color: #00aedc;} #content-main h2 { font-weight: bold; } #content-main h2 span {font-size: 28px; color: #00275C; } #content-main h3 {text-align:center; } #content-main p.intro {font-size: 18px; line-height:1.4em;} #content-main p.intro strong {color: #111;} #content-main ul li {color: #00275C; background: transparent url(../images/cc-sprite.gif) no-repeat left -395px; list-style-type: none; padding-left: 25px; margin-left:15px;} #content-main ul li strong {color: #00AEDC;} #content-main ul.emphasis {} #content-main ul.emphasis li {background-position: 0 -392px; font-weight: normal; font-style: italic;} #content-main ul.emphasis li h4 {font-size: 14px; font-weight: bold; margin-bottom: 0; } /*==========3.3.1 Home Page==========*/ .cms-home #content-main {/*width:425px;*/} .cms-home #content-main h2 { font-weight: bold; width: 410px;} /*==========3.3.2 Order Page==========*/ .product {background: transparent url(../images/light-blue-gradient.png) repeat-x scroll left -88px; border: 5px solid #00AEDC;padding: 20px; margin: 20px auto; width: 650px;} .product h4 {font-size: 24px; margin-bottom: 10px;} .product .product-desc {float: left; margin-right: 10px; width: 400px;} .product-desc img {display: block; margin-top: 8px;} /* change done 15/03/10 */ .product .product-cost {float: right; width: 200px;} /* change done 15/03/10 */ #content-main .product .product-cost ul li {background: none; margin-bottom: 5px; padding-left: 0; text-align: right;} #content-main .product .product-cost ul li.price {color: #AB2B8A; font-weight: bold; font-size: 28px;} .product-image a {background-color: transparent; border: none;} .product-image a:hover {border: none;} .product-image a:active {position: static;} /*==========3.3.3 FAQ Page==========*/ .cms-faq dl dt { color: #AB2B8A; font-size: 1.3em; margin-bottom: 5px;} /*==========3.3.4 checkout-cart-index==========*/ .checkout-cart-index h3 {color: #00aedc; font-size: 28px; line-height: 1.2em; text-align: left;} .page-head-alt a {border: none; float: right; width: 201px;} #content-main ul.messages {float: left; width: 530px;} #content-main ul.messages li {background: none; list-style: none; padding-left: inherit; padding: 5px 0; margin-bottom: 0; } #content-main ul.messages li.success-msg ul li {background:transparent url(../images/cc-sprite.gif) no-repeat scroll 0 -261px; padding-left:36px; margin-bottom: 5px; } #content-main li.success-msg ul {margin-bottom: 0;} select.address-select { width:630px; } .shipment-methods dd { margin-bottom:13px; } .payment-methods dt { margin-bottom:5px; } .payment-methods dd { padding:5px 20px; } .payment-methods select.month { width:146px !important; margin-right:10px; } .payment-methods select.year { width:100px !important; } .payment-methods input.cvv { width:3em !important; } /* Shopping Cart */ table#shopping-cart-table {clear: both; width: 100%;} table#shopping-cart-table thead {background-color: #94E3F9; text-align: left;} table#shopping-cart-table th {color: #246273; font-weight: normal; padding: 12px 5px;} table#shopping-cart-table tbody tr {border-bottom: 1px solid #4ED4F9; } table#shopping-cart-table tbody tr:hover {background-color: #f3f3f3;} table#shopping-cart-table tbody td {padding: 3px; vertical-align: middle;} table#shopping-cart-table a {border-bottom: none;} table#shopping-cart-table tfoot {text-align: right;} table#shopping-cart-table button.form-button-alt {float: right; margin-right: 20px; width: 200px;} table#shopping-cart-table button.continue-shopping {margin-right: 0;} table#shopping-cart-table td.last {padding:10px 0 10px 5px;} .shopping-cart { margin-bottom:0; } .shopping-cart th, .shopping-cart td { padding-left:13px; padding-right:13px; } .shopping-cart th .tax-flag {font-size:0.9em; font-weight:normal; display:block; } .shopping-cart tr.error { background:#FDE6E0 !important; } .shopping-cart .continue-shopping { float:left; } .shopping-cart-item-message {margin-bottom:5px;font-size:95%;margin-top:6px; } #coupon_code { margin: 0 20px 10px 0; } td.attributes-col { line-height:1.4em; } td.attributes-col ul { margin:5px 0; font-size:.95em; } td.attributes-col dt { margin-top:.5em; } td.attributes-col dd ul { margin:0 0 5px 0; list-style:disc; } td.attributes-col dd ul li { margin-left:15px; } td.attributes-col h4.title { padding:0; margin:0; font-size:1em; color:#2f2f2f; width:100%; overflow:hidden; } td.attributes-col h4.title a { font-weight:bold; } .shopping-cart-totals { width:325px; float:right; border:1px solid #BEBCB7; text-align:right; padding: 12px 15px; min-height: 131px; } .shopping-cart-totals table { width:100%; margin:7px 0; } .shopping-cart-totals td { padding:0 15px; } .shopping-cart-totals tr.last td {} .shopping-cart-totals tfoot td { padding-top:10px; font-size:1.3em; border:none!important; } .shopping-cart-totals td.price {text-align: left; width: 95px;} .shopping-cart-totals span.price {font-size: 1.2em;} .shopping-cart-totals a {border: none;} .shopping-cart-totals .checkout-types { padding:8px 15px 15px; } .shopping-cart-totals .checkout-types li { clear:both; margin:10px 0; } .shopping-cart-totals a.btn {display:block; float:right; width:150px;} /* Tax details */ .tax-total { cursor:pointer; } .tax-total td { line-height:13px; padding-top:5px !important; padding-bottom:5px !important; } .tax-total .tax-collapse { float:right; padding-left:20px; text-align:right; cursor:pointer; } .show-details .tax-collapse { background-position:0 -55px; } .show-details td { border-top:1px solid #d2d8db; } .tax-details td { font-size:0.91em; color:#626465; background-color:#dae1e4; } .tax-details-first td { border-top:1px solid #d2d8db; } /* Shopping cart tax info */ .cart-tax-info, .cart-price { padding-right:10px; } .cart-tax-total { cursor:pointer; } .cart-tax-total { padding-right:20px; cursor:pointer; } .cart-tax-total-expanded { background-position:100% -52px; } .shopping-cart-collaterals { float:left; width: 333px;} .shopping-cart-collaterals .box {border:1px solid #D0CBC1; float: left; margin-bottom:18px; padding:12px 15px; width: 333px; } .shopping-cart-collaterals .discount-codes {margin-right: 10px;} .shopping-cart-collaterals .discount-codes .left {float: left; width: 165px;} #advice-required-entry-coupon_code {color: red;} .shopping-cart-collaterals .discount-codes .left button.form-button-alt {margin-left: 10px;} .shopping-cart-collaterals .shipping-estimate {display: none;} .shopping-cart-collaterals .box .form-button { margin-left:5px; } .shopping-cart-collaterals .shipping-estimate .input-text { width:214px; } .shopping-cart-collaterals .shipping-estimate select { width:220px; } .shopping-cart-collaterals .upsell { width:42.5%; border:1px solid #cec3b6; padding:12px 15px; background:#fafaec; } .shopping-cart-collaterals .upsell .product-image { float:left; width:75px; border:1px solid #d0cdc9; } .shopping-cart-collaterals .upsell .product-shop { width:170px; } .shopping-cart-collaterals .upsell .product-shop h5 { font-size:1em; } .grand_total { width:auto; margin-top:15px; border:1px solid #BEBCB7; background:#DEE5E8; font-size:1.3em !important; font-weight:bold; text-align:right; } tr.grand_total td, p.grand_total { padding-top:5px; padding-bottom:5px; } /*==========3.4.5 404 Page==========*/ .cms-no-route h3 {color:#00AEDC; font-size:28px; line-height:1.2em; margin-bottom:0.75em;} /*==========3.4.6 Free Advice==========*/ .cms-free-advice #content-main h3 {text-align: left;} .cms-free-advice #content-main ul.article-list {} .cms-free-advice #content-main ul.article-list li {background:none repeat scroll 0 0 #ECF7FF; border:1px solid #CBDEEB; padding:20px;} .cms-free-advice ul.article-list li h4 a {font-weight: bold;} .cms-free-advice ul.article-list li a {} .cms-free-advice ul.article-list li p {} /*==========3.4 Asides (Sidebar elements or asides)==========*/ .cms-index-index .aside-right {float: right; margin: 0 0 20px 20px; position:relative; width:274px; z-index:100;} .cms-index-index #content-main .aside-right h2 {width: inherit; font-weight: inherit;} .cms-index-index .aside-right #content-aside-order ul li {background: none; padding-left: inherit;} #content-aside {background: url(../images/sidebar-top.png) no-repeat top right; float:left; margin:-123px 15px 30px 0; padding-top:35px; width:175px;} #content-aside ul.nav {background: transparent url(../images/sidebar-gradient.png) repeat-y right top; list-style: none; margin-bottom: 0; } #content-aside ul.nav li {border-bottom: 1px solid #c3e9fc; border-top: 1px solid #fff; margin-bottom: 0; text-align: right;} #content-aside ul.nav li a {border: none; display: block; color:#38587A; font-weight: bold; padding: 10px 20px 10px 0; } #content-aside ul.nav li a:hover {border: none; color:#00AEDC;} /*Highlight current page nav*/ .cms-home #content-aside ul.nav li.nav-home, .cms-how-does-it-work #content-aside ul.nav li.nav-how, .cms-why-use-triactol #content-aside ul.nav li.nav-why, .cms-compare #content-aside ul.nav li.nav-compare, .cms-ingredients #content-aside ul.nav li.nav-ingredients, .cms-clinically-proven #content-aside ul.nav li.nav-proven, .cms-testimonials #content-aside ul.nav li.nav-testimonials, .cms-faq #content-aside ul.nav li.nav-faq, .cms-order-triactol #content-aside ul.nav li.nav-order {background-color: #fff;} .cms-home #content-aside ul.nav li.nav-home a, .cms-how-does-it-work #content-aside ul.nav li.nav-how a, .cms-why-use-triactol #content-aside ul.nav li.nav-why a, .cms-compare #content-aside ul.nav li.nav-compare a, .cms-ingredients #content-aside ul.nav li.nav-ingredients a, .cms-clinically-proven #content-aside ul.nav li.nav-proven a, .cms-testimonials #content-aside ul.nav li.nav-testimonials a, .cms-faq #content-aside ul.nav li.nav-faq a, .cms-order-triactol #content-aside ul.nav li.nav-order a {color: #00acd9; font-weight: bold; cursor: default;} #content-aside ul.nav li.nav-order a {color: #009FC5; font-size: 18px;} #content-aside ul.nav li.nav-order a:hover {color: #111;} #content-aside .testimonial {background:transparent url(../images/sidebar-bottom.png) no-repeat scroll 4px top; padding-right:20px; padding-top:20px; text-align:right;} #content-aside .testimonial blockquote p {font-size: 0.8em;} #content-aside-order {background: #002856 url(../images/order-bg-2.gif) no-repeat center top; float:left; padding:15px 0 15px 15px; width:263px; } #content-aside-order .contents {} #content-aside-order h2 {color: #fff; line-height: 22px; text-align: center; margin-bottom: 10px; padding-right:15px;} #content-aside-order h2 br {display: none;} #content-aside-order h2 span {color: #f881ff; clear: both; font-size: 0.55em; display:block;} #content-aside-order #order-form ul {list-style-type: none;} #content-aside-order form#order-form input#order-name, #content-aside-order form#order-form input#order-email {height: 20px; font-size: 12px; padding: 7px 5px 5px; width: 230px;} #content-aside-order form#order-form label {color: #fff; font-size: 14px; } #content-aside-order form#order-form label span {color: #00aedc; /*display: block;*/ font-size: 14px; } #content-aside-order form#order-form #radio-choice-1, #content-aside-order form#order-form #radio-choice-2, #content-aside-order form#order-form #radio-choice-3, #content-aside-order form#order-form #radio-choice-4 {display: block; float: left; margin: 0 10px 10px 0;} #content-aside-order form#order-form span.outofstock { color: #ff0000; margin-left:10px } #content-aside-order p {color: #00aedc; width: 190px;} .aside-right #content-aside-order ul.cards {list-style: none; margin: 20px 0 0 20px; width:214px;} .aside-right #content-aside-order ul.cards li {background: url(../images/cc-sprite.gif) no-repeat top right; height: 36px; float: left; margin-right: 15px; text-indent: -9000em; width: 56px;} #content-aside-order ul.cards li.mastercard {background-position: -2px -80px} #content-aside-order ul.cards li.visa {background-position: -2px 0;} #content-aside-order ul.cards li.amex {background-position: -2px -177px;} .aside-right .out-of-stock {color: #fff; font-size: 14px;} .aside-right .validation-advice {color: red; padding: 10px 0; font-style: italic; } #content-aside-order .btn {display: block; margin: 0 auto; width: 165px; } #content-aside-order p strong {color: #00aedc; display: block;} /*==CTA's==*/ #content-aside-reasons {background: #fff url(../images/reasons-bg.png) repeat-x left bottom; border: 1px solid #CADFEE; float: left; margin: 30px 0 0 0; min-height: 333px; padding: 20px 20px 0 20px; width:232px; } #content-aside-reasons h2 {color: #00AEDC; margin-bottom: 5px; text-align: center; } #content-aside-reasons ul {list-style: none; margin-bottom: 1em;} #content-aside-reasons ul li {background: transparent url(../images/cc-sprite.gif) no-repeat scroll 0 -261px; padding-left: 36px; } #content-aside-reasons a { text-align: center;} .risk-free {background: transparent url(../images/cta-risk-free.jpg) no-repeat top left; height: 180px; padding:50px 30px 0; width:630px;} #content-main .risk-free h3 {color: #00aedc; margin-bottom: 5px; text-align:left;} .risk-free p {width: 530px;} .risk-free a.btn { margin-top:23px; width:161px; display:block; margin:0 auto; width:225px;} /*==========3.5 FOOTER==========*/ #footer {background-color: #001c44; clear: both; width: 100%;} #footer .footer-content {padding:30px 30px 60px; margin: 0 auto; width:920px;} #footer .footer-content .vcard {margin-right: 30px;} #footer .footer-content ul.secondary-nav {display: block; list-style: none; margin: 0 auto; text-align: center; width: 900px;} #footer .footer-content ul.secondary-nav li {border-right: 1px solid #fff; float: left; margin-right: 7px; padding-right: 7px;} #footer .footer-content ul.secondary-nav li a {color: #fff; border: none;} #footer .footer-content ul.top {margin: 0 auto; width: 624px; padding-left:68px;} #footer .footer-content ul li:last-child {border: none;} #footer .footer-content ul.bottom {margin: 0 auto; width: 370px;} #footer .footer-content ul.bottom li:last-child {border: none;} #footer .footer-content h3.logo-mirofilm {bottom: 10px; display: block; height: 30px; position: absolute; right: 20px; width: 90px;} #footer .footer-content .logo-mirofilm a {background: transparent url(../images/micro-logo.png) no-repeat top left; border: none; display: block; height: 32px; text-indent: -9000em; width: 68px; } /*==========4. CLASSES==========*/ .clr {clear: both;} .float-l{float:left;} .float-r{float:right;} img.float-l {padding: 2px 11px 5px 0;} img.float-r {padding: 2px 0 5px 11px;} a.btn, button.btn, button.btn span {color: #fff;} .btn {background:url("../images/btn-bg-gradient.png") repeat-x scroll left top #009FC5; border:1px solid #00B2D1; color:#FFFFFF; cursor:pointer; font-size:14px; line-height:20px; padding:5px 20px; text-align:center; } .btn:hover {background: #4ec9e9; color: #fff;} a.product-info {background: #00234e; border: 1px solid #003E8F; color: #fff; padding: 5px 20px;} a.product-info:hover {background-color: #00275c; } /********** New class added on 28-04-10*********/ .pack1{ background:url("../images/1month.gif") no-repeat left top !important; height:124px; height:142px; margin:0 0 7px 0!important; } .pack2{ background:url("../images/3month.gif") no-repeat left top !important; height:124px; margin:0 0 7px 0!important; height:142px; } .pack3 { background:url("../images/6month.gif") no-repeat left top !important; height:124px; margin:0 0 7px 0!important; height:142px; } .pack1 span, .pack2 span, .pack3 span{ display:block; padding:98px 0 0 13px; color:#fff; font:bold 14px Arial, Helvetica, sans-serif;} .pack1 span b, .pack2 span b, .pack3 span b { font-size:20px; color:#fff; font-weight:normal;} /*.pack1 h2, .pack2 h2, .pack3 h2 { height:0; overflow:hidden; padding:23px 0 0; } .pack1 h2.one-month { background:url(../images/one-month.gif) no-repeat 0 0 !important;} .pack2 h2.three-month { background:url(../images/three-month.gif) no-repeat 0 0 !important;} .pack3 h2.six-month { background:url(../images/sis-month.gif) no-repeat 0 0 !important;}*/ .left-add { position:relative; z-index:10; margin-left:-10px; padding:25px 0 0;} .left-add p{ margin:0 0 14px 0;} /********* New added on 29-04-10 ********/ .footer-middle{ background:#00356B; padding:0 0 0 0; height:100%; overflow:hidden; width:773px; margin:5px auto 34px; } .footer-middle h2{ font:normal 23px Arial, Helvetica, sans-serif; color:#fff; text-align:center; margin:0; padding:12px 0 10px;} .curve{ padding:0; height:6px;} .footer-middle p{ margin:0;} .float-left{ float:left;} .float-right{ float:right;} .footer-middle a{ color:#00B0DF; font-size:12px; text-decoration:none; outline:0; border-bottom:0; } .footer-middle a:hover{ color:#fff;} .footer-middle ul{ width:288px; float:left; padding:0 50px 0 38px; margin:0 0 10px;} .footer-middle ul li, #footer .footer-content .footer-middle ul li:last-child { border-bottom:1px dotted #fff; padding:3px 0; margin-bottom:0; list-style-type:none;} .footer-middle ul.last{ width:305px} .pink{ text-align:center; padding-bottom:10px;} .pink a{ color:#FC00FF; border-bottom:0; text-decoration:underline;} .pink a:hover{ color:#fff;} #ad_container{ position:fixed; width:100%; bottom:0; height:138px; background:url(../images/footer-ad.png) repeat-x 0 0; z-index:100;} #ad{ width:1045px; margin:0 auto; background:url(../images/footer-text.png) no-repeat 0 0; height:138px;} #ad h4{ height:20px; padding-top:18px;} #ad h4 a{ display:block; height:0; padding:60px 0 0; margin:60px 0 0; overflow:hidden; text-decoration:none; line-height:30px; border:0;} /********* New added on 07-07-10 ********/ .backcolour {background-color:#99DBFD;border:1px solid #2FB7D7;display:block;margin-bottom:20px;padding:20px;}