/* ====================================================================== Bellavista Guest House: MAIN stylesheet. VERSION : Build 1.0. ---------------------------------------------------------------------- CHANGE LOG: Created 4th March 2008 By Lone Turtle Design: www.lone-turtle.com Contact Neil Ford, neil@lone-turtle.com ====================================================================== */ /*---------------------------------------------- RESETS ----------------------------------------------*/ * {border: 0; margin: 0; padding: 0;} html {font: 12px/150% "Trebuchet MS", Tahoma, Helvetica, Arial, sans-serif; height: 100%; margin-bottom: 1px;} *html {font: 75%/150% "Trebuchet MS", Tahoma, Helvetica, Arial, sans-serif;} body {background: #D8EAD8 url(../pi/bodyBG.jpg) 0 0 repeat-x; color: #333; text-align: center; width: 100%;} img, a img {border: none; display: block;} a {font-weight: bold;} h1 {font-family: Bookman old Style, Georgia, Serif; font-weight: normal;} h2 {font-family: Bookman old Style, Georgia, Serif; font-weight: normal;} h3 {font-family: Bookman old Style, Georgia, Serif; font-weight: normal;} h4 {font-family: Bookman old Style, Georgia, Serif; font-weight: normal;} /*---------------------------------------------- FORM RESETS ----------------------------------------------*/ fieldset {border: 1px solid #fff; padding: 1em; margin: 0 0 1em 0;} legend {border: 1px solid #fff; padding: 1em;} input, textarea {border: 1px solid #ccc; padding: 1em; margin: 0 0 1em 0;} input:focus, textarea:focus {border: 1px solid #aaa;} label, abbr, accronym {cursor: help;} /*---------------------------------------------- LAYOUT ----------------------------------------------*/ body {padding-top: 3em;} div#box {background: transparent; height: 36px; position: absolute; right: 0; top: 0; width: 23em;} div#box h4 {float: left; font-family: "Trebuchet MS", Tahoma, Helvetica, Arial, sans-serif; font-size: 1em; font-weight: normal; line-height: 36px; margin: 0;} div#box h4 a {background:transparent url(../pi/quicklinkArrow.png) 100% 54% no-repeat; color: #7597C1; outline: none; padding: 0 10px 0 0;} div#box h4 a:link, div#box h4 a:visited {color: #7597C1; text-decoration: none;} div#box h4 a:hover {background:transparent url(../pi/quicklinkArrow.png) 100% 54% no-repeat; color: #333;} ul#quickLinks {float: left; list-style-type: none; background: transparent;} ul#quickLinks li {display: inline; } ul#quickLinks li a {clear: right; display: block; float: left; font-weight: normal; font-size: 1em; line-height: 36px; margin: 0 0 0 24px; text-decoration : underline;} ul#quickLinks li a:link {background:transparent; color:#7597C1;} ul#quickLinks li a:visited {background:transparent; color:#7597C1;} ul#quickLinks li a:hover {background:transparent; color:#333; text-decoration: none;} ul#quickLinks li a:active {background:transparent; color:#333; text-decoration: none;} ul#quickLinks li a:focus{background:transparent; color:#333; text-decoration: none;} div#wrap {background: transparent url(../pi/pageBGtop.png) 0 0 no-repeat; margin: 0 auto; padding-top: 18px; text-align: left; width: 966px;} div#wrap2 {background: transparent url(../pi/pageBGbot.png) 0 100% no-repeat; padding-bottom: 23px; width: 966px;} div#wrap3 {background: transparent url(../pi/pageBGmid.png) 0 0 repeat-y; padding: 0 23px; width: 920px;} /*div.tel {float: right; margin: 0 18px 0 0;}*/ div.tel {position: absolute; margin: 0 0 0 52px; top: 0; left: 0; line-height: 3em; color:#7597C1} *html div.tel {position: relative; top: -52px; left: 0; margin: 0;} /*div#siteNav {float: left; width: 666px; margin: -18px 0 0 0;}*/ div#siteNav {float: right; display: inline; width: 666px; margin: -18px 6px 0 0;} *html div#siteNav {float: right; display: inline; width: 666px; margin: -52px 6px 0 0;} div#siteNav h4 {display: none;} div#siteNav ul {float: left; list-style-type: none; width: 666px;} div#siteNav ul li {display: inline; float: left;} /* div#siteNav ul li a {background: #fff; display: block; float: left; font-family: "Trebuchet MS", Tahoma, Helvetica, Arial, sans-serif; font-size: 18px !important; font-weight: bold; line-height: 3em; text-align: center; text-decoration: none; text-transform: capitalize; white-space: nowrap;} */ div#siteNav ul li a {background: #fff; display: block; float: left; font-family: "Trebuchet MS", Tahoma, Helvetica, Arial, sans-serif; font-size: 14px !important; font-weight: bold; line-height: 3.85714em; text-align: center; text-decoration: none; text-transform: capitalize; white-space: nowrap;} div#siteNav ul li#n1, div#siteNav ul li#n1 a {width: 76px;} div#siteNav ul li#n2, div#siteNav ul li#n2 a {width: 181px;} div#siteNav ul li#n3, div#siteNav ul li#n3 a {width: 104px;} div#siteNav ul li#n4, div#siteNav ul li#n4 a {width: 130px;} div#siteNav ul li#n5, div#siteNav ul li#n5 a {width: 84px;} div#siteNav ul li#n6, div#siteNav ul li#n6 a {width: 84px;} div#siteNav ul li a:link {color:#72C36E;} div#siteNav ul li a:visited {color:#72C36E;} div#siteNav ul li a:hover {background: url(../pi/siteNavBGhover.png) 50% 2.6em no-repeat; color:#378FF0;} div#siteNav ul li a:active {color:#98CAF3;} div#siteNav ul li a:focus{color:#98CAF3;} body#index li#n1 a, body#accommodation li#n2 a, body#breakfast li#n3 a, body#contact li#n4 a, body#orkney li#n5 a, body#travel li#n6 a{background: #fff url(../pi/siteNavBG.png) 50% 2.6em no-repeat; color:#1A5F97;} div#conBox {background: #fff; /*border-top: 1px solid #D5E6F4;*/ clear: both; display: inline; float: left; margin: 18px 0 0 0; width: 918px;} body#index div#conBox {margin-top: 0;} *html div#conBox {margin-top: 6px;} *html body#index div#conBox {margin-top: -12px;} div#conBox address {margin: 0 0 36px 0;} div#conBox h2, div#conBox h3, div#conBox h4 {padding-bottom: 0;} div#content {background: #fff; float: left; display: inline; margin: 1.5em 0 3em 0; min-height: 342px; width: 918px;} /*IE*/ *html div#content {height: 342px;} div#content h1 {margin-bottom: 1em;} div#introduction {float: left; min-height: 342px; position: relative; width: 324px;} /*IE*/ *html div#introduction {height: 342px;} /* a.starRating {bottom: 0; position: absolute; right: 0;} */ a.starRating {float: right; margin: 8px 0 16px 8px;} div#introduction p {margin: 0 0 0.82em 0;} div#rep {float: right; width: 576px;} div#featureModule {float: right; width: 576px;} ul#featureNav {background: #fff url(../pi/testNav4.jpg) 0 0 no-repeat; float: left; height: 36px; list-style-type: none; width: 576px;} ul#featureNav li {float: left;} ul#featureNav li a { line-height: 36px; font-weight: bold; font-size: 10px; padding: 0 18px; text-decoration: none; width: 108px;} ul#featureNav li a:link {color: #666;} ul#featureNav li a:visited {color: #666;} ul#featureNav li#featureNav1 a {display: block; height: 36px; background: url(../pi/testNav4.jpg) 0 0 no-repeat;} ul#featureNav li#featureNav2 a {display: block; height: 36px; background: url(../pi/testNav4.jpg) -144px 0 no-repeat;} ul#featureNav li#featureNav3 a {display: block; height: 36px; background: url(../pi/testNav4.jpg) -288px 0 no-repeat;} ul#featureNav li#featureNav4 a {display: block; height: 36px; background: url(../pi/testNav4.jpg) -432px 0 no-repeat;} ul#featureNav li a:hover {color: #000;} ul#featureNav li#featureNav1 a:hover {display: block; height: 36px; background: url(../pi/testNav4.jpg) 0 -36px no-repeat;} ul#featureNav li#featureNav2 a:hover {display: block; height: 36px; background: url(../pi/testNav4.jpg) -144px -36px no-repeat;} ul#featureNav li#featureNav3 a:hover {display: block; height: 36px; background: url(../pi/testNav4.jpg) -288px -36px no-repeat;} ul#featureNav li#featureNav4 a:hover {display: block; height: 36px; background: url(../pi/testNav4.jpg) -432px -36px no-repeat;} ul#featureNav li a.here {color: #f90;} ul#featureNav li#featureNav1 a.here {display: block; height: 36px; background: url(../pi/testNav4.jpg) 0 -72px no-repeat;} ul#featureNav li#featureNav2 a.here {display: block; height: 36px; background: url(../pi/testNav4.jpg) -144px -72px no-repeat;} ul#featureNav li#featureNav3 a.here {display: block; height: 36px; background: url(../pi/testNav4.jpg) -288px -72px no-repeat;} ul#featureNav li#featureNav4 a.here {display: block; height: 36px; background: url(../pi/testNav4.jpg) -432px -72px no-repeat;} ul#featureNav li a:focus {color: #f90; outline: none;} ul#featureNav li a:active {color: #f90;} /* body.section rules*/ a.homeLink {display: block; width: 324px; margin-bottom: 1.5em;} div#addCon {background: #fff; float: left; width: 324px; margin: 0; padding: 0;} div#mainCon {background: #fff; float: right; width: 576px;} div#mainCon p, div#addCon p {margin: 0 0 1.5em 0;} div#mainCon ul, div#addCon ul, div#mainCon ol {margin: 0 0 1.5em 1.5em;} div#addCon div#gallery {background: transparent url(../pi/indexGalleryTop.png) 0 0 no-repeat; margin: 0 0 1.5em 0; padding: 13px 0 0 0; width: 324px;} body.section h1 {font-family: Bookman old Style, Georgia, Serif; font-weight: normal; font-size: 1.5em; margin: 0 0 1.5em 0;} body.section h2 {font-family: Bookman old Style, Georgia, Serif; font-weight: normal; font-size: 1.5em; margin: 2.5em 0 1em 0;} body.section h3 {font-family: Bookman old Style, Georgia, Serif; font-weight: normal; font-size: 1.5em; margin: 2.5em 0 1em 0;} body.section h4 {font-family: Bookman old Style, Georgia, Serif; font-weight: normal; font-size: 1.5em; margin: 2.5em 0 1em 0;} /* gallery rules*/ div#gallery {background: transparent url(../pi/indexGalleryTop.png) 0 0 no-repeat; clear: both; float: left; margin: 0 18px 0 0; padding: 13px 0 0 0; width: 324px;} div#gallery h3 {display: none;} div#gallery div {background: transparent url(../pi/indexGalleryBot.png) 0 100% no-repeat; float: left; padding: 0 0 13px 0; width: 324px;} div#gallery div div {background: transparent url(../pi/indexGalleryMid.png) 0 0 repeat-y; float: left; padding: 0 13px; width: 298px;} div#gallery ul {float: left; list-style-type: none; padding: 0 1px; margin: 0; width: 296px} div#gallery ul li {display: inline; float: left;} div#gallery ul li a {display: block; margin: 0 13px 13px 0; width: 88px; height: 88px;} div#gallery ul li a.firstTN {display: block; margin: 0 13px 13px 0; width: 191px; height: 88px;} div#gallery li.edge a {margin: 0 0 13px 0;} div#gallery ul li a.bot {margin-bottom: 0;} div#gallery ul li a:link {background:#fff; border: 1px solid #ACD2AC; color:#333;} div#gallery ul li a:visited {background:#fff; border: 1px solid #ACD2AC; color:#333;} div#gallery ul li a:hover {background:#fff; border: 1px solid #69AD69; color:#f00;} div#gallery ul li a:active {background:#fff; border: 1px solid #69AD69; color:#f00;} div#gallery ul li a:focus{background:#fff; border: 1px solid #69AD69; color:#f00;} div#contentFeature {background: transparent url(../pi/contentFeatureTop.png) 0 0 no-repeat; float: left; padding: 18px 0 0 0; width: 280px;} div#contentFeature div {background: transparent url(../pi/contentFeatureBot.png) 0 100% no-repeat; float: left; padding: 0 0 18px 0; width: 280px;} div#contentFeature div div {background: transparent url(../pi/contentFeatureMid.png) 0 0 repeat-y; float: left; padding: 0 18px; width: 244px;} div#contentFeature2 {background: transparent; float: left; padding: 18px 0 0 0; width: 280px;} div#contentFeature2 div {background: transparent; float: left; padding: 0 0 18px 0; width: 280px;} div#contentFeature2 div div {background: transparent; float: left; padding: 0 18px; width: 244px;} div#contentFeature3 {background: transparent url(../pi/contentFeature3Top.png) 0 0 no-repeat; float: right; margin: 1.5em 0 0 0; padding: 18px 0 0 0; width: 576px;} div#contentFeature3 div {background: transparent url(../pi/contentFeature3Bot.png) 0 100% no-repeat; float: left; padding: 0 0 18px 0; width: 576px;} div#contentFeature3 div div {background: transparent url(../pi/contentFeature3Mid.png) 0 0 repeat-y; float: left; padding: 0 18px; width: 540px;} div#contentFeature h3, div#contentFeature2 h3, div#contentFeature3 h3 {font-weight: bold; margin: 9px 0 9px 0; padding-top: 0;} div#boxCon {background: transparent url(../pi/mainConColtop.png) 0 0 no-repeat; color: #c63; float: right; margin: 0; padding: 18px 0 0 0; width: 576px;} div#boxCon div {background: transparent url(../pi/mainConColbot.png) 0 100% no-repeat; float: left; padding: 0 0 18px 0; width: 576px;} div#boxCon div div {background: transparent url(../pi/mainConColmid.png) 0 0 repeat-y; float: left; padding: 0 18px; width: 540px;} div#boxCon {color: #c63;} div#footer {clear: both; padding: 3em 0 1.5em 0; text-align: center;} div#footer ul {list-style-type: none;} div#footer ul li {display: inline; padding: 0 0.5em; text-transform: capitalize;} div#footer ul li a {} a.email {text-transform: none;} img.inline {display: inline;} div#footer ul li a:link {background:#fff; color:#ccc;} div#footer ul li a:visited {background:#fff; color:#ccc;} div#footer ul li a:hover {background:#fff; color:#f00;} div#footer ul li a:active {background:#fff; color:#f00;} div#footer ul li a:focus{background:#fff; color:#f00;} /* breakfast */ body#breakfast div#boxCon h3 { color: #884322; margin-top: 0;} body#breakfast div#gallery {margin: 0.5em 0 1.5em 0;} blockquote.customerQuote {background: #fff url(../pi/quoteMarksL.png) 0 0 no-repeat; clear: both; float: left; font-family: Bookman old Style, Georgia, Serif; font-weight: normal; font-style: italic; padding: 0 0 0 54px; margin: 2em 0 0 0; width: 270px;} blockquote.customerQuote p {background: #fff url(../pi/quoteMarksR.png) 100% 100% no-repeat; color: #999; padding: 0 36px 0.5em 0;} blockquote.customerQuote cite {color: #999; display: block; font-style: italic; font-size: 1.5em; font-weight: normal; padding: 0 54px 1.5em 0; text-align: right;} /* accommodation */ table.tariff { border-top: 1px solid #B2DEB0; border-left: 1px solid #B2DEB0; font: normal 0.8em/1.5em "Trebuchet MS", Arial, Helvetica, sans-serif; margin: 0 0 3em 0; width: 322px;} table.tariff caption {font-weight: bold; text-align: left; padding: 0.25em} table.tariff th {background: #F8FCF8; border-right: 1px solid #B2DEB0; color: #333; font-size: 1em; border-bottom: 1px solid #B2DEB0; padding: 0.5em 10px; text-align: left;} table.tariff th a {text-decoration: none;} table.tariff th a:link {} table.tariff th a:visited {} table.tariff th a:hover {background: #fff;} table.tariff th a:focus {} table.tariff th a:active {} table.tariff tr.topRow th {background: #EAF6E9; color: #333; font-weight: bold; font-size: 1.2em; text-align: left;} table.tariff tr.topRow th:first-child {text-align: left;} table.tariff td {font-size: 1em;border-bottom: 1px solid #B2DEB0; border-right: 1px solid #B2DEB0; padding: 0.5em 10px; background: #fff; color: #900; text-align: left;} div#addCon ul#accomNav {float: left; list-style-type: none; margin: 0 0 6em 0; padding: 0; width: 324px;} ul#accomNav li {margin: 0; padding: 0; width: 324px;} ul#accomNav li a {display: block; font-size: 14px; font-weight: bold; line-height: 3em; margin: 0; padding: 0 18px; text-align: right; text-decoration: none; text-transform: capitalize; width: 288px; } ul#accomNav li a:link {background: #fff url(../pi/accomNavBGlink.png) 98% 50% no-repeat; border-bottom: 1px solid #DAECFB; color:#72C36E;} ul#accomNav li a:visited {background: #fff url(../pi/accomNavBGlink.png) 98% 50% no-repeat; border-bottom: 1px solid #DAECFB; color:#72C36E;} ul#accomNav li a:hover {background: #F8FCFE url(../pi/accomNavBGhover.png) 98% 50% no-repeat !important; border-bottom: 1px solid #DAECFB; color:#378FF0;} ul#accomNav li a:active {background: #F8FCFE url(../pi/accomNavBGhover.png) 98% 50% no-repeat !important; border-bottom: 1px solid #DAECFB; color:#378FF0;} ul#accomNav li a:focus{background: #F8FCFE url(../pi/accomNavBGhover.png) 98% 50% no-repeat !important; border-bottom: 1px solid #DAECFB; color:#378FF0;} div#single li#sn1 a, div#twin li#sn2 a, div#double li#sn3 a, div#family li#sn4 a, div#living li#sn0 a {background: url(../pi/accomNavBGhere.png) 98% 50% no-repeat; border-bottom: 1px solid #DAECFB; color: #1A5F97;} /*---------------------------------------------- TRAVEL ----------------------------------------------*/ div#travel {color: 3B653B; background: transparent url(../pi/indexGalleryTop.png) 0 0 no-repeat; clear: both; float: left; margin: 0 18px 0 0; padding: 13px 0 0 0; width: 324px;} div#travel div {background: transparent url(../pi/indexGalleryBot.png) 0 100% no-repeat; float: left; padding: 0 0 13px 0; width: 324px;} div#travel div div {background: transparent url(../pi/indexGalleryMid.png) 0 0 repeat-y; float: left; padding: 0 13px; width: 298px;} div#travel address {margin: 0; padding: 0; font-style: normal;} div#travel h2 {color: #14A042; font-size: 2em; padding-top: 0; margin-top: 9px;} div#travel h3 {color: #14A042; font-size: 2em;} div#travel h4 {color: #14A042; font-size: 1.2em;} div#travel ul {list-style-type: none; padding: 0; margin: 0; width: 296px} div#travel ul li a {text-decoration: none;} div#travel ul li a:link {background:transparent; color:#333;} div#travel ul li a:visited {background:transparent; color:#333;} div#travel ul li a:hover {background:transparent; color:#f00;} div#travel ul li a:active {background:transparent; color:#f00;} div#travel ul li a:focus{background:transparent; color:#f00;} div#travel ul li ul {list-style-type: square;} div#travel ul li ul li {margin: 0 0 0 18px; padding: 0.25em 0;} iframe {border: 1px solid #333;} *html iframe {border: none;} div#addTel address {margin: 1em 0 3em 0; padding: 0 0 0 18px; font-style: normal; color: #000; font-size: 1.4em;} /*---------------------------------------------- CONTACT ----------------------------------------------*/ body.form div#contactDetails {color: 3B653B; background: transparent url(../pi/indexGalleryTop.png) 0 0 no-repeat; clear: both; float: left; margin: 0 18px 0 0; padding: 13px 0 0 0; width: 324px;} body.form div#contactDetails div {background: transparent url(../pi/indexGalleryBot.png) 0 100% no-repeat; float: left; padding: 0 0 13px 0; width: 324px;} body.form div#contactDetails div div {background: transparent url(../pi/indexGalleryMid.png) 0 0 repeat-y; float: left; padding: 0 13px; width: 298px;} body.form div#contactDetails address {margin: 0; padding: 0; font-style: normal;} body.form div#contactDetails h2 {color: #14A042; font-size: 2em; padding-top: 0; margin-top: 9px;} body.form div#contactDetails h3 {color: #14A042; font-size: 2em;} body.form div#contactDetails h4 {color: #14A042; font-size: 1.2em;} body.form h1 {font-family: Bookman old Style, Georgia, Serif; font-weight: normal; font-size: 1.5em; margin: 0 0 1.5em 0;} body.form h2 {font-family: Bookman old Style, Georgia, Serif; font-weight: normal; font-size: 1.5em; margin: 2.5em 0 1em 0;} body.form h3 {font-family: Bookman old Style, Georgia, Serif; font-weight: normal; font-size: 1.5em; margin: 2.5em 0 1em 0;} body.form h4 {font-family: Bookman old Style, Georgia, Serif; font-weight: normal; font-size: 1.5em; margin: 2.5em 0 1em 0;} *html body.form div#contactDetails { display: inline;} *html body#travel div#addCon div {display: inline;} div.scriptCredits { display: none;}