/* Start of CMSMS style sheet 'Elave_Main' */ /*------------------------------------------------------------------ [Master Stylesheet] Project: Elave Main CSS [Typography] All text: font-family: Helvetica, Arial, Geneva, sans-serif; Body text: 0.8em [Colours] Dark Gray: #888888 Light Gray Bg: #dcddde Blue : #76bac8 Blue for link & footer: #91a3ba Dark blue Text: #566a87 Gray texts: #8e9092 Light blue: #81c1ce / 57b4c0 -------------------------------------------------------------------*/ /*=THE BIG GUYS ----------------------------------------------- */ * {margin:0; padding:0} body { padding-top:73px; background: #dddddd url(uploads/elave/body-bg-6.jpg) top left no-repeat; color: #62737a; font-size: 0.8em; font-family: 'Helvetica Neue', Helvetica, Arial, Geneva, sans-serif; } #IntroPage { background: #dddddd; background-image:none; margin:0px; padding:0px;} #introFlashContainer {width:900px;} #introFlashContainer p {text-align:center; font-size:80%; padding-top:20px; margin:0px;} /* =LAYOUT HEADER ----------------------------------------------------*/ #header { } /* MAIN Menu */ #mainMenu { float:right; margin:0px; padding:0px;} #mainMenu li { list-style: none; margin:0; padding:0; display:inline;} #mainMenu a { display:block; font-weight:bold; float:left; margin-left:3px; width:150px; height:27px; line-height:27px; text-align:center; text-decoration:none; background: #888888; color:#ffffff; display:block; text-transform:uppercase; font-size:90%;} #mainMenu a#btn-yourskin { background:transparent url(uploads/elave/btn-yourskin.gif) top left no-repeat; } #mainMenu a#btn-yourskin:hover { background: transparent url(uploads/elave/btn-yourskin.gif) 0px -27px no-repeat; } #mainMenu a#btn-products { background:transparent url(uploads/elave/btn-products.gif) top left no-repeat; } #mainMenu a#btn-products:hover { background:transparent url(uploads/elave/btn-products.gif) 0px -27px no-repeat; } #mainMenu a#btn-about { background:transparent url(uploads/elave/btn-about.gif) top left no-repeat; } #mainMenu a#btn-about:hover { background:transparent url(uploads/elave/btn-about.gif) 0px -27px no-repeat; } #mainMenu a#btn-feedback { background:transparent url(uploads/elave/btn-feedback.gif) top left no-repeat; } #mainMenu a#btn-feedback:hover { background:transparent url(uploads/elave/btn-feedback.gif) 0px -27px no-repeat; } #mainMenu a#btn-blog { background:transparent url(http://www.elaveskincare.com/uploads/elave/btn-blog.gif) top left no-repeat; } #mainMenu a#btn-blog:hover { background:transparent url(http://www.elaveskincare.com/uploads/elave/btn-blog.gif) 0px -27px no-repeat; } #mainMenu a#btn-contact { background:transparent url(uploads/elave/btn-contact.gif) top left no-repeat; } #mainMenu a#btn-contact:hover { background:transparent url(uploads/elave/btn-contact.gif) 0px -27px no-repeat; } /*=LAYOUT MAIN BODY ----------------------------------------------- */ #wrap { width:960px; margin: 0px; position:relative; } #IntroPage #wrap {width:900px; margin:0px auto;} #content-wrap { position:relative; padding:0px; clear:both; padding-left:20px; padding-right:10px; min-height:600px; height:auto !important; height:600px; } #topLogo { position:absolute; top:20px; left:20px; clear: left;} /* SECONDARY Menu */ #secondaryMenu { clear:both; padding:0px; margin:0px;} #secondaryMenu li { list-style: none; padding:0px; display:inline; } #secondaryMenu a { display:block; float:left; margin:5px 0px 5px 15px;} #SubDermoCos {width:123px; height:9px; background:url(uploads/elave/SubDermoCos.gif) top left no-repeat;} #SubDermoCos:hover { background:url(uploads/elave/SubDermoCos.gif) 0px -9px no-repeat; } #SubDermatological {width:120px; height:9px; background:url(uploads/elave/SubDermatological.gif) top left no-repeat;} #SubDermatological:hover { background:url(uploads/elave/SubDermatological.gif) 0px -9px no-repeat; } #SubMen {width:66px; height:9px; background:url(uploads/elave/SubMen.gif) top left no-repeat;} #SubMen:hover { background:url(uploads/elave/SubMen.gif) 0px -9px no-repeat; } #SubJunior {width:70px; height:9px; background:url(uploads/elave/SubJunior.gif) top left no-repeat;} #SubJunior:hover { background:url(uploads/elave/SubJunior.gif) 0px -9px no-repeat; } #SubBaby {width:60px; height:9px; background:url(uploads/elave/SubBaby.gif) top left no-repeat;} #SubBaby:hover { background:url(uploads/elave/SubBaby.gif) 0px -9px no-repeat; } #SubDrySkin {width:43px; height:9px; background:url(uploads/elave/SubDrySkin.gif) top left no-repeat;} #SubDrySkin:hover { background:url(uploads/elave/SubDrySkin.gif) 0px -9px no-repeat; } #SubSensitiveSkin {width:72px; height:9px; background:url(uploads/elave/SubSensitiveSkin.gif) top left no-repeat;} #SubSensitiveSkin:hover { background:url(uploads/elave/SubSensitiveSkin.gif) 0px -9px no-repeat; } #SubEczema {width:38px; height:9px; background:url(uploads/elave/SubEczema.gif) top left no-repeat;} #SubEczema:hover { background:url(uploads/elave/SubEczema.gif) 0px -9px no-repeat; } #SubDermatitis {width:56px; height:9px; background:url(uploads/elave/SubDermatitis.gif) top left no-repeat;} a#SubDermatitis:hover { background:url(uploads/elave/SubDermatitis.gif) 0px -9px no-repeat; } #SubPsoriasis {width:49px; height:9px; background:url(uploads/elave/SubPsoriasis.gif) top left no-repeat;} #SubPsoriasis:hover { background:url(uploads/elave/SubPsoriasis.gif) 0px -9px no-repeat; } #SubRosacea {width:44px; height:9px; background:url(uploads/elave/SubRosacea.gif) top left no-repeat;} #SubRosacea:hover { background:url(uploads/elave/SubRosacea.gif) 0px -9px no-repeat; } #SubOurQuality {width:62px; height:9px; background:url(uploads/elave/SubOurQuality.gif) top left no-repeat;} #SubOurQuality:hover { background:url(uploads/elave/SubOurQuality.gif) 0px -9px no-repeat; } #SubOurEffectiveness {width:96px; height:9px; background:url(uploads/elave/SubOurEffectiveness.gif) top left no-repeat;} #SubOurEffectiveness:hover { background:url(uploads/elave/SubOurEffectiveness.gif) 0px -9px no-repeat; } #SubOurSustainability {width:98px; height:9px; background:url(uploads/elave/SubOurSustainability.gif) top left no-repeat;} #SubOurSustainability:hover { background:url(uploads/elave/SubOurSustainability.gif) 0px -9px no-repeat; } #SubFeaturedIn {width:60px; height:9px; background:url(uploads/elave/SubFeaturedIn.gif) top left no-repeat;} #SubFeaturedIn:hover { background:url(uploads/elave/SubFeaturedIn.gif) 0px -9px no-repeat; } #SubWriteReview {width:121px; height:9px; background:url(uploads/elave/SubWriteReview.gif) top left no-repeat;} #SubWriteReview:hover { background:url(uploads/elave/SubWriteReview.gif) 0px -9px no-repeat; } #pageTitle { clear:both;} #sidebar { position:relative; float:right; clear:right; width:210px; margin-right:20px; font-size:90%;} #sidebar a { color:#62737a; } #sidebar a:hover { color:#91a3ba; } #sidebar .hr {display:block; margin: 0px 0px 10px 0px; background:url(uploads/elave/sidebar-border.gif) top left no-repeat; height:1px; width:169px; border:none; } #content-box { margin-right: 270px;} #sidebar #OvelleIcon { /*position:absolute; top:-180px; left:20px;*/ margin-bottom:20px;} a.back, #NewsPostDetailReturnLink, a#backProduct, a.back:hover, #NewsPostDetailReturnLink:hover, #productSinglePic a.back, #productSinglePicBaby a.back, #productSinglePicMen a.back {display:block; padding-left:20px; height:19px; line-height:19px; background:url(uploads/elave/arrow-left.gif) top left no-repeat;} a.next, a.next:hover, a#nextProduct, #productSinglePic a.next, #productSinglePicBaby a.next, #productSinglePicMen a.next { display:block; padding-right:20px; height:19px; line-height:19px; background:url(uploads/elave/arrow-right.gif) top right no-repeat;} /* =LAYOUT FOOTER ----------------------------------------------------*/ #footer { clear:both; padding:0px 5px 5px 15px; color:#91a3ba;} #footerMenu { float:right; margin:10px 0px 0px 0px; padding:0px; z-index:9999;} #footerMenu li { list-style: none; padding:0px; margin:0; display:inline; } #footerMenu a { display:block; float:left; margin:0px 25px 0px 0px;} #footerMenu a:hover, #credits a:hover { color:#576a88; } #SubNews {width:27px; height:9px; background:url(uploads/elave/SubNews.gif) top left no-repeat;} #SubNews:hover { background:url(uploads/elave/SubNews.gif) 0px -9px no-repeat; } #SubDisclaimers {width:57px; height:9px; background:url(uploads/elave/SubDisclaimers.gif) top left no-repeat;} #SubDisclaimers:hover { background:url(uploads/elave/SubDisclaimers.gif) 0px -9px no-repeat; } #SubLinks {width:26px; height:9px; background:url(uploads/elave/SubLinks.gif) top left no-repeat;} #SubLinks:hover { background:url(uploads/elave/SubLinks.gif) 0px -9px no-repeat; } #SubCredits {width:39px; height:9px; background:url(uploads/elave/SubCredits.gif) top left no-repeat;} #SubCredits:hover { background:url(uploads/elave/SubCredits.gif) 0px -9px no-repeat; } #SubPrivacyPolicy {width:75px; height:9px; background:url(uploads/elave/SubPrivacyPolicy.gif) top left no-repeat;} #SubPrivacyPolicy:hover { background:url(uploads/elave/SubPrivacyPolicy.gif) 0px -9px no-repeat; } #footerMenu li#credits {font-size:90%; height:9px; line-height:9px;} #footerStatement { clear:left; float:left; margin-left:200px; width:535px; height:135px; padding: 0px 0px 0px 135px; margin-top:0px; z-index:1;} #footerStatement h4 { text-transform:uppercase; } #footerStatement p { margin:0px; padding:0px; } * html #footerStatement { display:inline; } .footerStatementGeneral { background:url(uploads/elave/Freefrom-logo-general-S.gif) top left no-repeat;} .footerStatementGeneral h4, .footerStatementGeneral h4 a { color:#57b4c0;} .footerStatementGeneral a:hover, .footerStatementBaby a:hover, .footerStatementDermocos a:hover { color:#576a88;} .footerStatementBaby { background:url(uploads/elave/Freefrom-logo-baby-S.gif) top left no-repeat;} .footerStatementBaby h4, .footerStatementBaby h4 a { color:#5a82b9;} .footerStatementDermocos { background:url(uploads/elave/Freefrom-logo-dermocos-S.gif) top left no-repeat;} .footerStatementDermocos h4, .footerStatementDermocos h4 a { color:#8496ae;} #footer a#btn-wherebuy { display:block; width:114px; height:24px; float:left; margin-left:3px; background:transparent url(uploads/elave/btn-wherebuy.gif) top left no-repeat; } #footer a#btn-wherebuy:hover { background:transparent url(uploads/elave/btn-wherebuy.gif) 0px -24px no-repeat; } /* LINKS */ a,a:link,a:link,a:link,a:hover { background:transparent; text-decoration:none; cursor:pointer; } a { color:#91a3ba; } a:hover, a:active {color:#62737a;} /* 'MORE' LINK - provides an accessible alternative to just using 'more' as a link at the end of paragraphs */ a.readmore:link, a.readmore:visited, a.readmore:hover, a.readmore:active { text-transform:uppercase; } a.readmore:hover { color:#576a88; } /* BUY NOW BUTTON */ p.BuyNowLine { margin-left:-3px; margin-top:20px; margin-bottom:20px;} a#BuyNowBtn { width:85px; height:29px; display:block; background:url(uploads/elave/BuyNow-Btn.gif) top left no-repeat; } a#BuyNowBtn:hover { background:url(uploads/elave/BuyNow-Btn.gif) 0px -29px no-repeat; } /* FORMS */ fieldset {border: none} form {margin: 0; line-height:130%;} .contactform input, .contactform textarea, .formbuilderform input { margin: 2px 0; border:solid 1px #a9a9a9; width:300px;} .formbuilderform textarea { margin: 2px 0; border:solid 1px #a9a9a9; width:400px; height:150px;} .contactform fieldset, .formbuilderform fieldset {border: none} .contactform label { padding-right:10px; float:left; width: 150px; text-align:right; clear:left; } .formbuilderform label { padding-right:10px; float:left; width: 130px; text-align:right; } p.ContactAddress { padding-left:160px; } .formbuilderform .checkbox { padding-left:140px; } .formbuilderform .checkbox label { float:none; } .contactform .checkbox { padding-left:160px; } .contactform .checkbox label { float:none; } .contactform div, .formbuilderform div { padding:2px 0px; } .contactform input.fbsubmit, .formbuilderform input.fbsubmit { width: 100px; background:#91a3ba; color:white; margin-left:160px; padding: 4px 0px;} input#mf085f_24 { width:auto; } #newsletterForm input { margin: 2px 0; border:solid 1px #a9a9a9; width:auto; } #newsletterForm label { padding-right:10px; float:left; width: 110px; text-align:right; clear:left; } #newsletterForm input#submitBtn { width: 100px; background:#91a3ba; color:white; margin-left:120px; height:25px; line-height:25px; padding:0px;} input#mf49a0fbrp_submit { width: 100px; background:#91a3ba; color:white; margin-left:140px; height:25px; line-height:25px; padding:0px;} /* TYPOGRAPHY */ h1, h2, h3, h4, h5, h6 { padding-bottom: .1em} h1 { font-size: 146%; margin: 0em 0 .3em; } h2 {font-size: 120%; margin-bottom: 0px; text-transform:uppercase; font-weight:normal; color:#808080; } h3, .toggleSubText a {font-size: 120%; margin-bottom: .5em; text-transform:uppercase; font-weight:normal; color:#566a87; } .toggleSubText a {font-weight:bold; text-decoration:none;} h4 {font-size: 100%; color:#76bac8; text-transform:uppercase; font-weight:bold; margin-top:10px; margin-bottom: .5em;} #sidebar h4 a { text-decoration:none; } h5 {font-size: 100%; color:#8e9092; font-weight:bold; margin:15px 0px 0px 0px; padding:0px; text-transform:uppercase;} h6 {font-size: 100%; font-weight:normal; color:#595959; padding:0px;} .highlight {color:#75bac7; font-weight:bold;} .subdued {color:#999} .error {color:#ECAC00; font-weight:bold} .success {color:#390; font-weight:bold} .caption {color:#999; font-size:11px} .date {font: bold 82% arial; color:#bbb; display:block; letter-spacing: 1px} small {font-size:11px} /* LISTS */ ul {margin: .3em 0 1.5em 0; list-style-type:none} ul.related {margin-top: -1em} ol {margin: .5em .5em 1.5em} ol li {margin-left: 1.4em; padding-left: 0; background: none; list-style-type: decimal} li {line-height: 1.5em; padding-left: 3px; } li.doc {background-position: 3px -500px} ul.nomarker li {background:none; padding-left:0} dl {margin: 0 0 1em 0} dt {font-weight:bold; margin-top: 1.3em} dl dl {margin: 0 0 1.5em 30px} #sidebar ul { margin-bottom:15px;} #sidebar li { padding:0px; margin:0px; line-height:1.5em;} #content-box ul.creditsList li { padding-bottom:0px; margin:0px; } p.creditsList {margin-bottom:0px;} /* =GENERAL ----------------------------------------------- */ p {margin:5px 0px 10px 0px; line-height:130%;} p.note { font-size:95%; } pre { margin:0 0 1em; font-size:100%; } pre.codeblock { background:#eee; border:1px solid #ccc; padding:5px; } code {font:110% "Courier New"; } img {border:none} hr {margin: 0px 0px 10px 0px; color:#888888; background-color:#888888; height:1px; border:none; } .spacer {clear:both; position:relative; font-size:0px; height:0px; line-height:0px; } .hidden {position:absolute; left:0px; top:-500px; width:1px; height:1px; overflow:hidden; } p.moreLink { text-align:right; } /* End of 'Elave_Main' */