/* ================================================== Sans - Styles ================================================== Copy: #716353 BG Colour OLD: #DEDED4 BG Colour NEW!: #fafdf6 #f3e9e2 */ * {margin: 0; padding: 0;} ul, ol {list-style: none;} body {line-height: 16px; font-family: "Courier New", Courier, Mono; color: #716353; background-color: #f3e9e2;} .clear:after {content: "."; height: 0; visibility: hidden; display: block; clear: both;} h1, h2, h3 {text-transform: uppercase; font-weight: normal;} h1 {} h2 {font-size: 14px;} h3 {} p, q, ul, blockquote {font-size: 14px;} strong, b {font-weight: bold;} a, a:hover {text-decoration: none; color: #716353;} a:hover {color: #b5b0a4;} a.dim, .dim {color: #666;} a.dim:hover {color: #b5b0a4;} a.back, .back {color: #b5b0a4; font-size: 11px; text-transform: uppercase;} a.back:hover {text-decoration: underline;} .contactdetails a, .contactdetails {color: #999;} /* DEV - Start #allscreen {background: url(../images/baseline.gif);} /* DEV - Stop */ #allscreen {width: 875px; height: 660px; margin: 100px 0; clear: left; text-align: left; margin-left: auto; margin-right: auto; position: relative;} #header {height: 158px; border-top: dotted 1px #716353; border-bottom: dotted 1px #716353;} #header h1 {float: left; border-right: dotted 1px #716353;} #header h1 a {text-indent: -5000px; width: 650px; height: 158px; display: block; background: url(../images/sans-ceuticals-logo.png) top left no-repeat; cursor: pointer;} #nav-main {float: left; width: 200px; padding: 13px 0 0 16px;} #nav-main h2 {font-weight: bold} #nav-about a, #nav-ingredients a, #nav-environmental a, #nav-collection a, #nav-stockists a, #nav-contact a, #nav-media a, #nav-glossary a {font-weight: bold; display: block; cursor: pointer;} /* Start Image Replacement */ /* Main Nav #nav-about a, #nav-ingredients a, #nav-environmental a, #nav-collection a, #nav-stockists a, #nav-contact a, #nav-glossary a {text-indent: -5000px; height: 20px; cursor: pointer; display: block;} #nav-about a {background: url(../images/sans-ceuticals-heads.png) 0 0 no-repeat;} #nav-ingredients a {background: url(../images/sans-ceuticals-heads.png) 0 -20px no-repeat;} #nav-environmental a {background: url(../images/sans-ceuticals-heads.png) 0 -40px no-repeat;} #nav-collection a {background: url(../images/sans-ceuticals-heads.png) 0 -60px no-repeat;} #nav-stockists a {background: url(../images/sans-ceuticals-heads.png) 0 -80px no-repeat;} #nav-contact a {background: url(../images/sans-ceuticals-heads.png) 0 -100px no-repeat;} #nav-glossary a {background: url(../images/sans-ceuticals-heads.png) 0 -240px no-repeat;} #nav-about a:hover {background: url(../images/sans-ceuticals-heads.png) 0 -120px no-repeat;} #nav-ingredients a:hover {background: url(../images/sans-ceuticals-heads.png) 0 -140px no-repeat;} #nav-environmental a:hover {background: url(../images/sans-ceuticals-heads.png) 0 -160px no-repeat;} #nav-collection a:hover {background: url(../images/sans-ceuticals-heads.png) 0 -180px no-repeat;} #nav-stockists a:hover {background: url(../images/sans-ceuticals-heads.png) 0 -200px no-repeat;} #nav-contact a:hover {background: url(../images/sans-ceuticals-heads.png) 0 -220px no-repeat;} #nav-glossary a:hover {background: url(../images/sans-ceuticals-heads.png) 0 -260px no-repeat;} */ /* Body nav */ #head-skin, #head-hair, #head-gift {text-indent: -5000px; height: 20px; display: block;} #head-glossary, .head-collection, .head-media, .head {color: #b5b0a4; letter-spacing: 1px;} .glossary, .collection, .contact, .environmental, .copy-body, .media {text-align: right} .glossary h2 {font-size: 15px;} .glossary-list {padding-top: 8px;} .glossary-details a {color: #716353} .glossary-details a:hover {color: #b5b0a4} .glossary-details p, .collection-details p {padding-top: 16px;} .back a {font-size: 12px; color: #b5b0a4} .back a:hover {font-size: 12px; color: #716353} /* Body Block Type */ #copy-body-about, #copy-body-ingredients, #copy-body-environmental, #copy-body-stockists, #copy-body-contact {text-indent: -8000px; height: 500px; display: block;} #copy-body-stockists { height: auto; } #copy-body-about {background: url(../images/copy-body-about.png) 0 0 no-repeat;} #copy-body-ingredients {background: url(../images/copy-body-ingredients.png) 0 0 no-repeat;} #copy-body-environmental {background: url(../images/copy-body-environmental.png) 0 0 no-repeat;} /*#copy-body-stockists {background: url(../images/copy-body-stockists.png) 0 0 no-repeat;}*/ #copy-body-contact {background: url(../images/copy-body-contact.png) 0 0 no-repeat;} #col-body-wrap {} #col-left {width: 334px; height: 500px; float: left; border-right: dotted 1px #716353; padding: 16px 16px 0 0;} #col-left-environmental {width: 334px; float: left; border-right: dotted 1px #716353; padding: 16px 16px 0 0;} #col-left.stockists-details { height: 1018px; height: auto; margin-bottom: 72px } /*#col-left-collection {width: 334px; height: 500px; float: left; border-right: dotted 1px #716353; text-align: right; padding: 16px 16px 0 0;}*/ /*#col-left p {padding-bottom: 16px; line-height: 24px; font-size: 15px; font-family: Helvetica, Arial, sans-serif;}*/ #col-left p, #col-left-environmental p {padding-bottom: 16px; line-height: 20px; font-size: 15px; font-family: Helvetica, Arial, sans-serif;} .stockists-details, .collection-details, .media-details {padding-bottom: 16px; font-size: 12px; font-family: Helvetica, Arial, sans-serif;} .collection-details h3 {font-family: "Courier New", Courier, monospace;color: #b5b0a4;} .stockists-details h3 { font-family: "Courier New", Courier, monospace; font-weight: bold; font-size: 16px; color: #716353; line-height: 18px; margin: 0 0 10px; padding: 0; text-transform: uppercase; } .stockists-details h3.with_url { margin: 0; } .stockists-details ul {text-align: right;} .stockists-details li { margin: 0; padding: 0 0 16px; } #col-left .stockists-details li p { line-height: 18px; font-size: 14px; margin: 0 0 16px; padding: 0; } .stockists-details li.last { padding: 0; } #col-left .stockists-details li.last p { margin: 0; } .cufon-active .stockists-details h3 { margin: 0; } .cufon-active #col-left .stockists-details li p { margin: 0; } #back-button {position: absolute; top: 600px; left: 300px; z-index: 40;} #col-right {width: 508px; float: left; padding: 16px 0 0 16px;} #col-right-photo {width: 508px; height: 500px;} #col-right-photo.loading {background: url(../images/loading.gif) no-repeat center center;} #footer {padding-bottom: 32px}