/*----------------------------------------------------------------------------- Style Sheet for Helen Bowcock - Facilitation in Leeds and Bradford version: 1.0 author: Roger Knight email: roger@attractmore.co.uk Colours -----------------------------------------------------------------------------*/ /* Global reset */ /* Based upon 'reset.css' in the Yahoo! User Interface Library: http://developer.yahoo.com/yui */ *, html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, label, fieldset, input, p, blockquote, th, td {margin:0; padding:0;} table {border-collapse:collapse; border-spacing:0;} fieldset, img {border:0; } address, caption, cite, code, dfn, em, strong, th, var {font-style:normal; font-weight:normal;} /*ol, ul, li {list-style:none;}*/ caption, th {text-align:left;} h1, h2, h3, h4, h5, h6 {font-size:100%;} a {text-decoration:none;} /* Global reset-RESET */ /* The below restores some sensible defaults */ strong {font-weight:bold;} em {font-style:italic;} /* a { position:relative } /* Gets links displaying over a PNG background */ a img, img {border:none; } /* Gets rid of IE blue borders */ .clear {clear:both;} .floatright {float:right; margin:6px 0 0 12px;} .floatleft {float:left; margin:6px 12px 0 0;} .imgcenter {text-align:center; margin:6px auto;display:block;} .centered {text-align:center;} /*----------------------------------------------------- BODY, CONTAINER AND MAIN --------------------------------------------------------*/ body {margin:0 auto; font-family: Verdana, Arial, Helvetica, sans-serif; font-size:16px; line-height:1.4em; color:#7b3678; } #container {width:960px; margin:0 auto;} #main {background-color:#FFF; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; padding-bottom:12px;} #contentsidebar {margin: 12px 0 0 0;} /*-------------------------------------------------------- HEADER --------------------------------------------------------*/ #header {background-color:#FFDDFE; height:80px; position:relative;} #header h1 {width:388px; height:60px; position:absolute; top:0; left:50%; margin:12px 0 0 -285px;} #header h1 a {color: #830582; font-size:150%; text-align:center;} #header h1 a span {position:absolute; background:url(../images/scented-events-header.jpg) center top no-repeat; width:573px; height:100%; margin:0 0 0 -20px;} /*-------------------------------------------------------- NAVIGATION --------------------------------------------------------*/ #nav {padding: 0; margin:0;} #nav ul {text-align:center; margin-top:20px;} #nav ul li {display:inline; } #nav ul li a {background-color:#FFDDFE; text-decoration:none; padding:9px 18px; letter-spacing:1px; margin-right:16px; font-weight:bold; outline: none; color: #830582; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; -moz-transition-property:background-color, color, padding-top; -moz-transition-duration: .20s; -moz-transition-timing-function: ease-in-out; -o-transition:background-color .20s ease-in-out, color .20s ease-in-out, padding-top .20s ease-in-out; -webkit-transition:background-color, color, padding-top .20s ease-in-out; transition:background-color, color, padding-top .20s ease-in-out; } #nav ul li a:hover {color:#BA4377; padding-top:24px;} body#home #nav a.home, body#about #nav a.about, body#events #nav a.events, body#massage #nav a.massage, body#scentbar #nav a.scentbar, body#gallery #nav a.gallery, body#contact #nav a.contact { color:#BA4377; cursor:default; padding-top:24px;} /*------------------------------------------------------------ CONTENT --------------------------------------------------------------*/ #content {width:677px; float:left; padding-top:12px; font-family:Verdana, Arial, Helvetica, sans-serif;} #content h2, #content h3 {padding-left:0; margin:10px 49px 10px 0; font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:bold; font-size:18px;} #content p, #content blockquote, #content cite {margin:0 48px 10px 0; text-align:justify;} #contentsidebar a, #contentsidebar a:visited {color:#BA4377; font-weight:bold; text-decoration: none; border-bottom: 1px dotted #BA4377;} #contentsidebar a:hover, #contentsidebar a:focus {color:#830582; background-color:#FFDDFE; border-bottom:none;} #contentsidebar ul {margin-left:54px;} #gallery #contentsidebar ul {margin-left:0;} #contentsidebar .calloutbox {background-color:#5764E8; float:left; width:150px; margin:8px 14px 0px 0;} #contentsidebar .portrait {border:10px solid #eeeeff; border-left:none; border-right:none; margin:0 30px;} #contentsidebar .portrait p {margin:0 -20px; padding:1em; background-color:#eeeeff; font-style:italic; text-align:center; font-size:90%;} #content blockquote {background:url(../images/quote-left.jpg) 0 0 no-repeat; padding-left:18px;} #content blockquote .end {padding:0 16px 0 0; background:url(../images/quote-right.jpg) 0 0 no-repeat; } #content cite {font-size:90%; font-style:italic; display:block; text-align:right;} /*-------------------------------------------------------- SIDEBAR --------------------------------------------------------*/ #sidebar {width:270px; float:right; padding-top:0px; overflow:hidden;} #sidebar p {margin:0; text-align:center; font-size:70%} #sidebar img {margin:63px 0 0 36px; } /*-------------------------------------------------------- ONE-COLUMN ----------------------------------------------------------*/ #one-column {font-family:Verdana, Arial, Helvetica, sans-serif; margin:0 48px 0 36px;} #one-column h2, #one-column h3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-weight:bold; margin: 0 6px 10px 0; padding-top:10px;} #one-column p {text-align:justify; margin-bottom:6px;} #one-column p.centered {text-align:center;} #one-column p.strap {font-weight:bold; padding:9px 0;} #blockset {margin:12px 0;} .block {width:254px; height:370px; background-color:#FFDDFE; border:6px solid #ccc; font-size:90%; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;} #one-column .block h3 {font-family:Verdana, Arial, Helvetica, sans-serif; text-align:center;} .block p {margin:8px;} .block img {float:right;} .block1 {float:left; background: #FFDDFE url(../images/2-block-bg.jpg) center center no-repeat;} .block2 {margin:0 auto; background: #FFDDFE url(../images/logo-bottle-1.jpg) center center no-repeat;} .block3 {float:right; background: #FFDDFE url(../images/2-block-bg.jpg) center center no-repeat;} /*------------------------------------------------------------ FOOTER --------------------------------------------------------------*/ #footer {clear:both; font-size: 85%; margin:1em auto 0; background-color:#FFDDFE;} #social {float:right; margin:5px 0 0 0; width:150px;} #social li {margin-right:6px; display:block; float:left;} #fb {background:transparent url(../images/facebook.png) no-repeat center center; width:56px; height:56px;} #fb:hover {background: url(../images/facebook-hover.png) no-repeat center center; width:56px; height:56px;} #twitter {background:transparent url(../images/twitter.png) no-repeat center center; width:56px; height:56px;} #twitter:hover {background: url(../images/twitter-hover.png) no-repeat center center; width:56px; height:56px;} #footer #social a {text-indent:-9999em; display:block; width:56px; height:56px; border-bottom:none;} #footer p {padding:8px; margin:0px; color:#3B2B28;} #footer ul {margin: 0; padding:8px 0;} #footer ul li {list-style-image: none; list-style-type: none; margin: 0; padding: 0 8px; display: inline;} #footer ul#footer-contact {font-size:100%; font-weight:bold;} #footer a, #footer a:visited {color:#BA4377; text-decoration: none; border-bottom: 1px dotted #BA4377;} #footer a:hover, #footer a:focus {border-bottom: 1px solid;} /*------------------------------------------------------------ IMAGES -------------------------------------------------------------*/ .external {background-image: url(../images/externalLink.gif); background-repeat: no-repeat; background-position: right top; padding-right: 10px;} /*---------------------------------------------------------------- FORM -----------------------------------------------------------------*/ form#enquiryform {margin: 0 10px 5px 0px; width:450px;} fieldset {padding:0px 0 0 10px; margin:0px; width: 98%; border:0;} label {display:block; padding:8px 0 0 0; font-size:90%;} input {width:300px; padding:3px 0;} select {width:200px;} textarea.address {width:200px; height:100px;} textarea.msg {width:300px; height:200px;} input:focus, textarea:focus, select:focus, button:focus, input:hover, select:hover, button:hover, textarea:hover {background-color:#FFDDFE;} .required {font-size:80%; color:#cc0000;} .advice {font-size:80%;} button {width:8em; padding:0.2em 0; margin:12px 1em 0.5em 0;} /*---------------------------------------------------------------- MISCELLANEOUS -----------------------------------------------------------------*/ .floatRight {float: right;} .floatLeft {float: left;} /*----------------------------------------------------------------------------- GALLERY ------------------------------------------------------------------------------*/ /*.gallery-caption {color:#830582; font-weight:bold; position:absolute; bottom:0; left:0; width:640px; height:30px; text-align:center; background:white; background:transparent; background:rgba(255, 255, 255, 0.7); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#a3ffffff,endColorstr=#a3ffffff); zoom:1;} */ .gallery-caption {color:#7b3678; font-weight:bold; position:absolute; bottom:0; left:0; width:640px; height:30px; text-align:center; background:#fff; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); -khtml-opacity: 0.7; -moz-opacity: 0.7; opacity:0.7; zoom:1; background:rgba(255, 255, 255, 0.7);} #slide-wrapper {position:relative;} #gallery-slides {width:640px; margin:0 auto; position:relative;} #gallery-slides ul, #gallery-slides li {list-style:none;} #contentsidebar .prevBtn, #contentsidebar .nextBtn {background-image:url(../images/arrow-sprite.jpg); background-color:#fff; background-repeat:no-repeat; background-position:center top; display:block; width:48px; height:78px; text-indent:-9999px; outline:none; border-bottom:none; top:90px; position:absolute;} #contentsidebar .prevBtn {left:70px; background-position:-2px -7px; } #contentsidebar .nextBtn {left:758px; background-position: -50px -7px; } #contentsidebar a.prevBtn:hover {left:70px; background-position: -2px -108px;} #contentsidebar a.nextBtn:hover {left:758px; background-position: -50px -108px;} #contentsidebar #slide-wrapper a:hover, #contentsidebar #slide-wrapper a:focus {background-color:#fff;} /*----------------------------------------------------------------------------- TESTIMONIALS SLIDER ------------------------------------------------------------------------------*/ #slider {width:220px; margin:40px 0 0 40px; position:relative;} #slider ul {list-style:none; margin:0; padding:0;} #slider li {list-style:none; width:220px; overflow:hidden; } #slider li blockquote {display:inline; background:url(../images/quote-left.jpg) 0 0 no-repeat; padding-left:18px;} #slider blockquote .end {padding:0 16px 0 0; background:url(../images/quote-right.jpg) 0 0 no-repeat; } #slider cite {font-size:90%; font-style:italic; display:block; text-align:right;} /*----------------------------------------------------------------------------- TABLES ------------------------------------------------------------------------------*/ .fees {margin: 6px 0 10px 0; text-align:left;} .fees td {border-top: #000051 dotted 1px; padding:3px 0;} .fees tr.lastrow td {border-bottom: #000051 dotted 1px;} a[href^="http:"], a[href^="https:"] {background:url(../images/externalLink.gif) no-repeat right top; padding-right: 10px;} a[href^="http://www.facebook.com"], a[href^="http://www.twitter.com"] {background:none; padding-right:0;}