/* ====================================================================== High Park Lodges: MAIN stylesheet. VERSION : Build 1.2. Date: 2007 ---------------------------------------------------------------------- CHANGE LOG: Created 6th February 2008 By Neil Ford: www.neilford.net 15 February 2008: Added a few IE fixes - some minor width hax is all :) 07 March 2009: Added random customer quote generator, and some auto date functions. 23 September 2009: Added a Customer comments page. ====================================================================== */ /*---------------------------------------------- RESETS ----------------------------------------------*/ * {margin: 0; border: 0; padding: 0;} html {height: 100%; margin-bottom: 1px; font: 12px/150% "Trebuchet MS", Helvetica, Arial, sans-serif;} *html {font: 75%/150% "Trebuchet MS", Helvetica, Arial, sans-serif;} body {width: 100%; background: #000; color: #fff; text-align: center;} img, a img {display: block;} object {margin: 0; padding: 0; border: 0;} /*---------------------------------------------- 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 */ div#wrap {width: 918px; margin: 18px auto; text-align: left;} div#wrap2 {position: relative; padding-top: 36px;} div#box {background: #000; width: 270px; position: absolute; top: 0; left: 642px; height: 36px;} div#box h4 {font-size: 1em; float: left; line-height: 36px; font-weight: normal;} div#box h4 a {outline: none;} div#box h4 a:link, div#box h4 a:visited {text-decoration: none; color: #ccc;} div#box h4 a:hover {color: #f30;} ul#quickLinks {float: left; list-style-type: none; background: #000;} ul#quickLinks li {display: inline; } ul#quickLinks li a {clear: right; margin: 0 0 0 24px; float: left; display: block; font-size: 1em; font-weight: bold; line-height: 36px; text-decoration : none;} div#siteNav {position: absolute; top: 0; left: 0;} div#siteNav h4 {display: none;} div#siteNav ul {list-style-type: none; background: #000; float: left;} div#siteNav ul li {display: inline; margin: 0; float: left; height: 36px; margin-right: 5px;} div#siteNav ul li#n1 {width:67px;} div#siteNav ul li#n2 {width:136px; margin-right: 6px;} div#siteNav ul li#n3 {width:122px; margin-right: 6px;} div#siteNav ul li#n4 {width:101px;} div#siteNav ul li#n5 {width:77px;} div#siteNav ul li#n6 {width:96px;} div#siteNav ul li a {outline: none; float: left; font-size: 1em; text-decoration: none; white-space: nowrap; height: 36px; font-weight: bold; text-transform: capitalize; text-indent: -99999px; } div#siteNav ul li#n1 a:link, div#siteNav ul li#n1 a:visited {width:67px; background: #000 url(../pi/navBG.jpg) 0 -18px no-repeat;} div#siteNav ul li#n2 a:link, div#siteNav ul li#n2 a:visited {width:136px; background: #000 url(../pi/navBG.jpg) -72px -18px no-repeat;} div#siteNav ul li#n3 a:link, div#siteNav ul li#n3 a:visited {width:122px; background: #000 url(../pi/navBG.jpg) -212px -18px no-repeat;} div#siteNav ul li#n4 a:link, div#siteNav ul li#n4 a:visited {width:101px; background: #000 url(../pi/navBG.jpg) -338px -18px no-repeat;} div#siteNav ul li#n5 a:link, div#siteNav ul li#n5 a:visited {width:77px; background: #000 url(../pi/navBG.jpg) -444px -18px no-repeat;} div#siteNav ul li#n6 a:link, div#siteNav ul li#n6 a:visited {width:96px; background: #000 url(../pi/navBG.jpg) -524px -18px no-repeat;} div#siteNav ul li#n1 a:hover, div#siteNav ul li#n1 a:focus, div#siteNav ul li#n1 a:active {width:67px; background: #000 url(../pi/navBG.jpg) 0 -72px no-repeat;} div#siteNav ul li#n2 a:hover, div#siteNav ul li#n2 a:focus, div#siteNav ul li#n2 a:active {width:136px; background: #000 url(../pi/navBG.jpg) -72px -72px no-repeat;} div#siteNav ul li#n3 a:hover, div#siteNav ul li#n3 a:focus, div#siteNav ul li#n3 a:active {width:122px; background: #000 url(../pi/navBG.jpg) -212px -72px no-repeat;} div#siteNav ul li#n4 a:hover, div#siteNav ul li#n4 a:focus, div#siteNav ul li#n4 a:active {width:101px; background: #000 url(../pi/navBG.jpg) -338px -72px no-repeat;} div#siteNav ul li#n5 a:hover, div#siteNav ul li#n5 a:focus, div#siteNav ul li#n5 a:active {width:77px; background: #000 url(../pi/navBG.jpg) -444px -72px no-repeat;} div#siteNav ul li#n6 a:hover, div#siteNav ul li#n6 a:focus, div#siteNav ul li#n6 a:active {width:96px; background: #000 url(../pi/navBG.jpg) -524px -72px no-repeat;} /* You are here */ body#index div#siteNav ul li#n1 a {width:67px; background: #000 url(../pi/navBG.jpg) 0 -126px no-repeat;} body#bed3 div#siteNav ul li#n2 a {width:136px; background: #000 url(../pi/navBG.jpg) -72px -126px no-repeat;} body#bed2 div#siteNav ul li#n3 a {width:122px; background: #000 url(../pi/navBG.jpg) -212px -126px no-repeat;} body#booking div#siteNav ul li#n4 a {width:101px; background: #000 url(../pi/navBG.jpg) -338px -126px no-repeat;} body#orkney div#siteNav ul li#n5 a {width:77px; background: #000 url(../pi/navBG.jpg) -444px -126px no-repeat;} body#contact div#siteNav ul li#n6 a {width:96px; background: #000 url(../pi/navBG.jpg) -524px -126px no-repeat;} /* inner page layout */ div#conBox {z-index: 0; color: #FFF5CE; background: #000 url(../pi/innerContentBG.jpg) 0 0 repeat-y; width: 918px; position: relative;} div#conBox h1, div#conBox h2, div#conBox h3, div#conBox h4 {font-size: 1.5em; font-weight: normal; font-weight: bold; color: #FFDE85; padding: 1em 0 0.5em 0; font-family: Constantia, Caslon, Georgia, serif;} div#conBox h4 {margin-top: 0.5em;} div#conBox h3#secondary {display: none;} div#conBox h1 a {text-decoration: none;} div#conBox p {padding: 0 0 1.5em 0;} div#conBox a:link {background:transparent; color: #FFDE85;; text-decoration: underline; font-weight: bold;} div#conBox a:visited {background:transparent; color: #FFDE85;; text-decoration: underline; font-weight: bold;} div#conBox a:hover {background:transparent; color:#f90; text-decoration: none; font-weight: bold;} div#conBox a:focus {background:transparent; color:#fff; text-decoration: none; font-weight: bold;} div#conBox a:active {background:transparent; color:#fff; text-decoration: none; font-weight: bold;} div#conBox ol {margin: 0 0 2em 2em;} div#conBox ol li {margin: 0 0 1em 0;} div#conBox ul {margin: 0 0 2em 2em;} div#conBox ul li {margin: 0 0 1em 0;} div#fade {z-index: 0; height: 108px; background: #000 url(../pi/innerContentBGfade.jpg) 0 0 repeat-y; width: 918px; position: absolute; top: 0; left: 0;} div#content {position: relative; z-index: 1; float: right; padding: 1.8em 18px 0 0; width: 540px;} div#secondaryContent {display: inline; position: relative; z-index: 1; float: left; margin: 1.8em 0 0 18px; width: 306px;} *html div#content {width /**/: 558px; } div#content h5 {Font-size: 1em; font-weight: bold; color: #F90; padding: 0.5em 0 0.25em 0;} div#splash {clear: both; width: 918px; background: #ccc url(../pi/innerContentBGbot.jpg) bottom left no-repeat; padding-bottom: 18px;} /* index page */ body#index div#header {height: 342px;} body#index div#conBox {z-index: 250; color: #FFF5CE; float: left; background: #000 url(../pi/contentBG.jpg) 0 0 repeat-y; width: 918px; position: relative;} *html body#index div#conBox {float: none; background: #000 url(../pi/contentBG.jpg) 0 0 repeat-y; width: 918px; position: relative;} body#index div#conBox h1, body#index div#conBox h3 {padding-top: 0;} body#index div#fade {z-index: 500; height: 108px; background: #000 url(../pi/contentBGfade.jpg) 0 0 repeat-y; width: 918px; position: absolute; top: 0; left: 0;} body#index div#content {position: relative; z-index: 1000; float: left; padding: 1.8em 0 0 18px; width: 306px; left: 0;} body#index div#secondaryContent {position: relative; z-index: 1000; float: left; margin: 1.8em 0 0 36px; width: 306px;} *html body#index div#secondaryContent {margin /**/: 1.8em 0 0 54px;} body#index div#secondaryContent ul {list-style-type: none; float: left; margin: 0;} body#index div#secondaryContent ul li {float: left; width: 90px; margin: 0 18px 18px 0;} body#index div#secondaryContent ul li.edge {float: left; width: 90px; margin-right: 0;} body#index div#secondaryContent ul li a {display: block; width: 88px; height: 88px; float: left;} body#index div#secondaryContent ul li a:link {border: 1px solid #fff; padding: 0; margin: 0;} body#index div#secondaryContent ul li a:visited {border: 1px solid #fff; padding: 0; margin: 0;} body#index div#secondaryContent ul li a:hover {border: 1px solid #f90; padding: 0; margin: 0;} body#index div#secondaryContent ul li a:focus {border: 1px solid #f90; padding: 0; margin: 0;} body#index div#secondaryContent ul li a:active {border: 1px solid #f90; padding: 0; margin: 0;} body#index div#secondaryContent ul li a img {border: none; display: block;} body#index div#tertiaryContent {position: relative; z-index: 1000; float: left; margin: 1.8em 0 0 36px; width: 198px;} body#index div#splash {clear: both; width: 918px; background: #ccc url(../pi/contentBGbot.jpg) bottom left no-repeat; padding-bottom: 18px;} /* booking page */ body#booking h5 {Font-size: 1em; font-weight: bold; color: #F90; padding: 0.5em 0 0.25em 0;} ol.helpList {margin: 0 0 0 2em; color: #f90;} ol.helpList li {margin: 0;} ol.helpList li p {color: #fff;} div.scriptCredits {display: none;} table.tariff {width: 303px; border-top: 1px solid #FFDE85; border-left: 1px solid #FFDE85; margin: 0 0 3em 0;} table.tariff caption {font: bold 1.5em Constantia, Caslon, Georgia, serif; text-align: left; padding: 0.25em} table.tariff th {font-size: 1em; border-bottom: 1px solid #FFDE85; border-right: 1px solid #FFDE85; padding: 0.5em 10px; background: #FFF7E1; color: #333; } table.tariff tr.topRow th {background: #FFF1CE; color: #900; font-weight: bold; font-size: 1.2em; text-align: center;} table.tariff tr.topRow th:first-child {text-align: left;} table.tariff td {font-size: 1em;border-bottom: 1px solid #FFDE85; border-right: 1px solid #FFDE85; padding: 0.5em 0; background: #FFF9E8; color: #900; text-align: center;} /* Accommodation pages */ div#conBox ul.slideShow {list-style-type: none; margin: 0; padding: 0; background: #333;} div#conBox ul.slideShow li {padding: 0; display: inline; float: left; margin: 0;} div#conBox ul.slideShow li a {display: block; margin: 0 18px 18px 0; width: 88px; height: 88px;} div#conBox ul.slideShow li.edge a {margin: 0 0 18px 0;} div#conBox ul.slideShow li.splashImage a {margin: 0 0 18px 0; width: 304px; height: 178px;} div#conBox ul.slideShow li a:link {border: 1px solid #fff;} div#conBox ul.slideShow li a:visited {border: 1px solid #fff;} div#conBox ul.slideShow li a:hover {border: 1px solid #f90;} div#conBox ul.slideShow li a:focus {border: 1px solid #f90;} div#conBox ul.slideShow li a:active {border: 1px solid #f90;} div#conBox ul.slideShow li a img {border: none; display: block;} #tariffTable {clear: both;} address {margin: 0 0 2em 0;} input {border: none;} /* footer */ div#footer {color: #ddd; float: left; clear: both; min-height: 72px; width: 882px; margin: 1.5em 0 0 0; padding: 0 18px 0 18px; font-size: 1em; line-height: 1.5em;} *html div#footer { height: 72px;} h4#siteInfo {display: none;} div#footer ul {list-style-type: none;} div#footer ul li {text-transform: capitalize; display: inline; margin-left: 6px; border-left: 1px solid #aaa; padding-left: 6px;} div#footer ul li a.email {text-transform: none;} div#footer ul li:first-child {border: none; padding-left: 0;} div#footer ul li a:link {background:transparent; color: #666;; text-decoration: underline; font-weight: bold;} div#footer ul li a:visited {background:transparent; color: #666; text-decoration: underline; font-weight: bold;} div#footer ul li a:hover {background:transparent; color:#ddd; text-decoration: none; font-weight: bold;} div#footer ul li a:focus {background:transparent; color:#ddd; text-decoration: none; font-weight: bold;} div#footer ul li a:active {background:transparent; color:#ddd; text-decoration: none; font-weight: bold;} /* 07 March 2009 index page - customer quotes */ blockquote#customerQuote { padding: 9px 9px 0 9px; margin: 0; font: italic 18px/27px Georgia, Times, serif; color: #f90; } blockquote#customerQuote cite { color: #fff; font-style: normal; font-size: 16px; line-height: 18px; margin: 0; padding: 0; } div#carousel { float: left; clear: both; width: 918px; background: transparent url(../pi/contentBGbot.jpg) bottom left no-repeat; padding: 18px 0; text-align: center; } div#carousel ul {list-style-type: none; width: 918px; float: left;background: transparent; margin: 0; padding: 9px 18px; text-align: center;} div#carousel ul li {display: inline; float:left; margin: 0; padding: 0;} div#carousel ul li a {float:left; margin: 0 9px 0 0;} div#carousel ul li a:link{border: 1px solid #fff} div#carousel ul li a:visited{border: 1px solid #fff} div#carousel ul li a:hover{border: 1px solid #f60} div#carousel ul li a:focus{border: 1px solid #f60} div#carousel ul li a:active{border: 1px solid #f60} div#carousel ul li.edge a {margin: 0;} /* 23 September 2009 index page - customer quotes */ div.comment blockquote { padding: 9px 9px 0 9px; margin: 0; font: italic 16px/20px Georgia, Times, serif; color: #f90; } div.comment { margin: 0 0 48px 0; } div.comment p { margin: 0; padding: 0; } div.comment blockquote cite { color: #fff; font-style: normal; font-size: 12px; line-height: 12px; margin: -10px 0 0 0; padding: 0; } .more { text-align: right; margin: 12px 0 0 0; }