﻿
* {margin:0; padding:0px}

body 
{
    background:#4a1728 url(images/indexbackground.jpg) no-repeat left top; 
    text-align:center;
    font-family:georgia, helvetica, arial, verdana;
    color:#231f20
}
img {border:0px !important}
a {color:#4b494a; text-decoration:none;}
h1, h2, h3, h4, h5, h6 {color:#4b494a !important; letter-spacing:1px;}

span {letter-spacing:1px;}
p {color:#4b494a !important; letter-spacing:1px; font-family:Georgia; font-size:12px;color:#231f20; margin-bottom:5px; line-height:16px;}
.mceContentBody {background-color:#ffffff !important; text-align:left; height:300px !important;}
/*Global Styles, affect every page except shop*/
#container {margin:20px auto 10px auto;width:885px;background-color:#ffffff; padding:15px; height:100%}
#colOne {width:210px; float:left; margin-right:15px; background-color:#f9e5f0;  height:100%; overflow:hidden;}

#navigation {margin:0px 10px 10px 10px; padding:5px 0px 6px 0px; border-top:1px dotted #8e8288}
#navigation li { list-style-type:none;font-size:10px; letter-spacing:1px; margin:4px 0px; overflow:hidden; height:18px;}
#navigation li a {display:block; width:100%; height:24px; text-align:center; padding:3px 0px;}
#navigation li.listHeading {font-size:21px; height:30px; margin-top:0px !important}
#navigation li.listHeading a {height:36px;}
#navigation li.listSubCat {background-color:#fdeff3}
#navigation li.dottedSeperator {border-bottom:1px dotted #8e8288; margin-bottom:5px; padding-top:1px;height:1px !important; line-height:1px !important;font-size:1px;}
#navigation li.blob {width:187px; height:102px;margin:0pt; padding:0px; text-indent:-5000px;}
#navigation p {font-size:10px !important; line-height:12px; margin-top:10px;}
#brooklandsLogo {background:#ffffff url(images/brooklandslogo.gif) no-repeat left top; width:210px; height:116px;}

#blob2 a {height:100% !important; width:100% !important; display:block; text-indent:-5000px;}
#blob2 a:hover {background:none !important}

#blob5 a {height:100% !important; width:100% !important; display:block; text-indent:-5000px;}
#blob5 a:hover {background:none !important}

#blob3 {height:184px !important}
#blob3 a {height:184px !important; width:100% !important; display:block; text-indent:-5000px;}
#blob3 a:hover {background:none !important}

#blob4 {height:195px !important}
#blob4 a {height:195px !important; width:100% !important; display:block; text-indent:-5000px;}
#blob4 a:hover {background:none !important}

#colTwo{width:660px; float:left; text-align:left; height:100%; overflow:hidden;}
.clear {clear:both}

#mainTable {padding:15px;}
/*Internal content pages, global styles*/
.contentList {margin-left:10px; margin-top:10px; margin-bottom:10px;}
.contentList li {font-size:12px; list-style-position:inside; color:#4b494a; padding:5px 0px;}

.contentContainerLeft{margin-right:15px; padding:10px 20px; width:390px; float:left; height:100%}
.contentContainerLeft h1 {font-size:24px; font-weight:normal; padding-bottom:10px; margin-bottom:15px; border-bottom:1px dotted #595154}
.contentContainerLeft p {margin-bottom:20px; line-height:19px; color:#4b494a; letter-spacing:1px; font-size:13px}
.contentContainerLeft h3 {margin-bottom:5px; line-height:19px; color:#4b494a; letter-spacing:1px; font-size:13px}
.contentContainerLeftSmallP {line-height:16px !important; font-size:11px !important}
.contentContainerLeftSubHead {font-size:14px; font-weight:bold;margin-bottom:0px;}
.contentContainerLeftSmallerP {margin-bottom:5px; line-height:15px !important; font-size:10px !important;}
.contentLimitedPadding {margin-bottom:5px !important;}

.contentContainerRight {float:left; overflow:hidden; height:100%}
.contentContainerRight h2 {padding:12px 0px 10px 0px; margin-bottom:15px; border-bottom:1px dotted #595154; font-size:13px; font-weight:normal}
.contentContainerRight p {margin-bottom:5px; line-height:15px; font-size:10px;}
.contentContainerRight p.subHeading {font-size:14px; font-weight:bold;margin-bottom:0px;}
.contentContainerTopRight {background-color:#E3E9D1; padding:10px 20px; width:175px; margin-bottom:15px;}
.contentContainerBottomRight {padding:0px 0px 20px 0px; width:215px; background-color:#ffffff; height:100%}
.contentContainerBottomRight .innerContent {margin-top:15px; margin-left:17px; width:183px;}
.contentContainerBottomRight .innerContent h3 {padding-bottom:10px; margin-bottom:10px; font-size:13px; font-weight:normal; border-bottom:1px dotted #595154}
.contentContainerBottomRight .innerContent p {margin-bottom:10px; font-size:11px; line-height:15px}

/*Index specific page*/
#indexFlash {width:100%; height:308px; margin-bottom:15px;}
#indexHeroImage {background:#ffffff url(images/indexbigpic.jpg) no-repeat left top; width:100%; height:308px; margin-bottom:15px;}
#indexIntro {padding:10px 20px;background-color:#efd2e2; margin-bottom:15px}
#indexIntro h1 {padding-bottom:5px; margin-bottom:10px; border-bottom:1px dotted #595154; font-size:18px;font-weight:normal;}
#indexIntro p {font-size:13px; margin-bottom:5px;  line-height:19px;}

.indexPromos{background:#ffffff url(images/indexpromobacks.jpg) repeat-x left bottom; height:260px; width:210px; margin-right:15px; float:left; text-align:left;}
.indexPromos a {color:#ffffff;}
#indexEndPromo {margin-right:0px !important;}
#hbPromoImg {width:210px; height:103px; background:#ffffff url(images/indexhb.jpg) no-repeat left top;}
#ghPromoImg {width:210px; height:103px; background:#ffffff url(images/indexgh.jpg) no-repeat left top;}
#rbPromoImg {width:210px; height:103px; background:#ffffff url(images/indexrb.jpg) no-repeat left top;}
.indexPromoContent {padding-left:20px; padding-top:10px; width:170px; height:137px; color:#ffffff !important}
.indexPromoContent h2 {font-weight:normal !important; padding-bottom:5px; margin-bottom:10px; border-bottom:1px dotted #ffffff; font-size:12px; color:#ffffff !important}
.indexPromoContent p {padding-bottom:10px; color:#ffffff !important; font-size:11px; line-height:13px;}

#indexBottomContainer {margin-top:15px;}
#indexSpecialOffers {height:230px; width:395px; background-color:#f9e5f0; margin-right:15px; float:left; padding:10px 20px; overflow:hidden;}
#indexSpecialOffers h3 { padding-bottom:10px; margin-bottom:20px; border-bottom:1px dotted #595154; font-size:12px;font-weight:normal;}
#indexSpecialOfferLeft {width:177px; padding-right:20px; border-right:1px dotted #595154; float:left; height:75%;}
#indexSpecialOfferRight {width:177px; padding-left:20px; float:left; height:75%;}
#indexSpecialOffers h4 {font-weight:bold; font-size:12px; margin:0pt; padding:0px}
#indexSpecialOffers p.specialOfferReason {padding-bottom:10px; font-size:10px;}
#indexSpecialOffers p {padding-bottom:10px; font-size:11px; line-height:14px;}

#indexTestimonial {width:170px; background-color:#f9e5f0; float:left; padding:10px 20px; height:230px}
#indexTestimonial h3 {padding-bottom:10px; margin-bottom:20px; border-bottom:1px dotted #595154; font-size:12px;font-weight:normal;}
#indexTestimonial p {padding-bottom:10px; font-size:11px;line-height:14px;}

/*Health Spa and Gym*/
#hsHeroImage {background:#ffffff url(images/hsbigpic.jpg) no-repeat left top; width:100%; height:308px; margin-bottom:15px;}

/*Restaurant*/
#rHeroImage {background:#ffffff url(images/rbigpic.jpg) no-repeat left top; width:100%; height:308px; margin-bottom:15px;}

/*Hotels and bedrooms page*/
#hbHeroImage {background:#ffffff url(images/hbbigpic.jpg) no-repeat left top; width:100%; height:308px; margin-bottom:15px;}

/*Thai bistro*/
#tbHeroImage {background:#ffffff url(images/tbbigpic.jpg) no-repeat left top; width:100%; height:308px; margin-bottom:15px;}

/*Customer Review*/
#crHeroImage {background:#ffffff url(images/crbigpic.jpg) no-repeat left top; width:100%; height:200px; margin-bottom:15px;}

/*Contact*/
#coHeroImage {background:#ffffff url(images/cobigpic.jpg) no-repeat left top; width:100%; height:200px; margin-bottom:15px;}

/*Special Offers*/
#soHeroImage {background:#ffffff url(images/sobigpic.jpg) no-repeat left top; width:100%; height:200px; margin-bottom:15px;}

/*Treatments and salon page*/
#tsHeroImage {background:#ffffff url(images/tsbigpic.jpg) no-repeat left top; width:100%; height:308px; margin-bottom:15px; position:relative;}
#treatmentsPDF {position:absolute; top:67px; left:411px; width:226px; height:44px;text-indent:-5000px}
#residentialPDF {position:absolute; top:14px; left:411px; width:226px; height:41px;text-indent:-5000px}

#treatmentIntro {padding:10px 20px;background-color:#fce9e2;color:#ffffff !important; margin-bottom:15px}
#treatmentIntro h1 {padding-bottom:5px; margin-bottom:10px; border-bottom:1px dotted #595154; font-size:18px;font-weight:normal;}
#treatmentIntro p {font-size:13px; margin-bottom:5px; line-height:19px;}

.tsPromoBox {background-color:#fdf4f0; height:260px; width:210px; margin-right:15px; float:left; text-align:left;}
.tsPromoBoxBottom {background-color:#ffffff; height:260px; width:210px; margin-right:15px; float:left; text-align:left;}
.tsEndPromo {margin-right:0px !important;}

.treatmentPromoContent {padding-left:20px; padding-top:10px; width:170px; height:137px;}
.treatmentPromoContent h2 {font-weight:normal !important; padding-bottom:5px; margin-bottom:10px; border-bottom:1px dotted #595154; font-size:12px;}
.treatmentPromoContent p {padding-bottom:10px; font-size:11px; line-height:13px}

#tsPromo1 {width:210px; height:103px; background:#ffffff url(images/tspromo1.gif) no-repeat left top;}
#tsPromo2 {width:210px; height:103px; background:#ffffff url(images/tspromo2.gif) no-repeat left top;}
#tsPromo3 {width:210px; height:103px; background:#ffffff url(images/tspromo3.gif) no-repeat left top;}
#treatmentsPromoLineTwo{margin-top:15px;}
#tsPromo4 {width:210px; height:103px; background:#ffffff url(images/tspromo4.gif) no-repeat left top;}
#tsPromo5 {width:210px; height:103px; background:#ffffff url(images/tspromo5.gif) no-repeat left top;}
#tsPromo6 {width:210px; height:103px; background:#ffffff url(images/tspromo6.gif) no-repeat left top;}

/*Corporate Page */
#cHeroPic {background:#ffffff url(images/cbigpic.jpg) no-repeat left top; width:100%; height:308px; margin-bottom:15px;}

/*Wedding page*/
#weddingHeroImage {background:#ffffff url(images/weddingsbigpic.jpg) no-repeat left top; width:100%; height:308px; margin-bottom:15px;}

/*Special offers page & Customer Reviews page*/
#specialOffersList, #customerReviewList {width:100%}
#specialOffersList .specialOffer, #customerReviewList .customerReview {margin-bottom:10px; padding-bottom:10px;}
.specialOfferHeading, .customerReviewHeading {font-size:14px;}
#specialOffersList .specialOfferHead, #customerReviewList .customerReviewHead {background-color:#ffffff; padding:10px;}
.specialOfferHead a, .specialOfferLink a, .customerReviewHead a {color:#4b494a; font-size:12px; font-style:italic}
#specialOffersList .specialOfferContent, #customerReviewList .customerReviewContent {margin:10px; margin-bottom:0px !important; padding-bottom:20px; border-bottom:1px dotted #595154}
#specialOffersList .specialOfferPromotion {margin-bottom:5px !important; font-weight:bold;}
#specialOffersList .specialOfferContact, #customerReviewList .customerReviewContact {font-size:13px; margin-bottom:0px !important}
#customerReviewList .customerReviewContent > div {font-style:italic;}

.specialOffer p, .customerReview p {font-size:11px; margin-bottom:10px !important;}

/*Privacy */
.privacy h3 {font-size:13px; margin-bottom:4px;}
.privacy p {font-size:11px;}

/*Enquiry Page*/
#enquiryTable {width:100%; border-collapse:collapse;}
#enquiryTable td {height:33px; font-size:12px; color:#4B494A}
#enquiryTable input {width:200px; border:1px solid #8e8e8e; padding:3px;}
#enquiryTable textarea {width:200px; height:100px; border:1px solid #8e8e8e; padding:3px;}
.inputDefaultWidth input {width:auto !important; }

/*Sitemap page*/
.sitemapHeading {padding-bottom:10px; margin-bottom:10px; border-bottom:1px dotted #756b69; width:70%; font-size:13px; letter-spacing:1px;}

/*General Styles*/
.pinkSubmit {width:102px !important; height:31px !important; margin-top:4px;}
.requiredError {background-color:#f8e7ec}

#footer {margin:10px auto 20px auto; padding:10px; width:885px; text-align:left; color:#ffffff !important;}
#footerLeft {float:left;width:40%}
#footerRight {float:right; width:54%; text-align:right; font-size:11px;}
#footer p {font-size:10px; color:#ffffff !important; letter-spacing:1px; margin-bottom:2px;}
.footerSmallText {font-size:10px;}
#footer a {color:#ffffff; font-size:10px; letter-spacing:1px;}
#footer a:hover {text-decoration:underline}

/*Individual treatments pages*/
#swbHeroImage {background:#ffffff url(images/tslargepromo1.jpg) no-repeat left top; width:100%; height:200px; margin-bottom:15px;}
#sdsHeroImage {background:#ffffff url(images/tslargepromo2.jpg) no-repeat left top; width:100%; height:200px; margin-bottom:15px;}
#shsHeroImage {background:#ffffff url(images/tslargepromo3.jpg) no-repeat left top; width:100%; height:200px; margin-bottom:15px;}
#sdbtHeroImage {background:#ffffff url(images/tslargepromo4.jpg) no-repeat left top; width:100%; height:200px; margin-bottom:15px;}
#scabHeroImage {background:#ffffff url(images/tslargepromo5.jpg) no-repeat left top; width:100%; height:200px; margin-bottom:15px;}
#sdbHeroImage {background:#ffffff url(images/tslargepromo6.jpg) no-repeat left top; width:100%; height:200px; margin-bottom:15px;}
/*Shop*/
.shopContent h1 {border-bottom:1px dotted #333333;font-size:18px; padding-bottom:10px}
.shopContent h2 {border-bottom:1px dotted #333333;font-size:13px; padding-bottom:10px; padding-top:4px;}
.shopContent {height:100%; width:100%; background-color:#ffffff;}
.shopContent table {padding:10px;}
.shopContent td {padding:10px 0px}
.shopContent table td.dottedRight {border-right:1px dotted #333333}
.shopContent table td.shopHeading {padding-right:10px; padding-bottom:0px !important; padding-top:0px !important; border-right:1px dotted #333333}
.shopContent table td.shopSmallHeading {padding-left:10px; padding-bottom:0px !important; padding-top:0px !important}
.shopContent .overviewContent {width:430px}
.shopContent .overviewRightCol {width:210px;}
.shopContent .fullPaddedColumn {padding:0px 10px;}
.shopContent .rightPaddedColumn {padding-right:10px;}

/*Shop individual promo styles*/
.individualPromoItem h3 {font-size:12px;}
.individualPromoProdName {font-size:11px;}
.indvidualPromoImage {float:left; width:48%}
.indvidualPromoContent {float:left; width:48%}


/*Lightbox css*/

/*Default box to be placed on the pages where the gallery is launched*/
#lightboxActivate {width:175px}

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 2000; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 1200; width: 100%; height: 500px; background-color: #000; }
