/* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/simple_vertical.html Copyright (c) 2005-2007 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ /* Get rid of the margin, padding and bullets in the unordered lists */ ul#nav { float:left; color: #666; height:50px; position:relative; width:924px; font-size:0.9em; margin-top:7px; z-index: 300; background:url(img/nav/navBg.png) right no-repeat; } ul#nav ul.sub {position:absolute; top:39px;} /* Set up the list items */ ul#nav li {position: relative; z-index: 300; float:left; height:40px; margin-top:1px; text-indent: -999em} /* Set up the link size, color and borders */ ul#nav a, ul#nav a:visited {color:#646464; display:block; height:40px; text-decoration:none;} ul#nav li.subHeader, ul#nav li.subHeader a, ul#nav li.subHeader a:visited, ul#nav li.subHeader a:hover, ul#nav li.mainLink a, ul#nav li.mainLink a:visited, ul#nav li.mainLink a:hover {color: #0460af; font-weight:bold; } ul#nav li.mainLink a, ul#nav li.mainLink a:visited, ul#nav li.mainLink a:hover {display:inline;} ul#nav li.subHeader {margin-top:10px} /* Set up the sub level borders */ ul#nav li ul.sub li {height:auto; text-indent: 0; float:left; padding-left: 6px;} * html ul#nav li ul.sub li {height:10px; line-height: 1.0em;} ul#nav li ul.sub li a, ul#nav li ul.sub li a:visited {height:auto;} ul#nav li ul.sub li a {display:inline; height:auto; text-decoration:none; padding:0; background-image:none;} ul#nav li ul.sub li a:hover {text-decoration: underline;} ul#nav li ul.sub li.first {margin-top:10px} ul#nav li ul.sub li.subHeader {clear:both;} ul.col1 li, ul.col2 li, ul.col3 li {clear:both; width:100%} /* HOME STATE */ ul#nav li.home {width:93px; margin-right: -12px;} ul#nav li.home a {background:url(img/nav/home.png)} body.homePage ul#nav li.home a, body.homePage ul#nav li.home a:hover, ul#nav li.home a:hover {width:93px; background:url(img/nav/home.png) 0 -40px;} /* Search STATE */ ul#nav li.search {width:153px; margin-right: -12px;} ul#nav li.search a {background:url(img/nav/search.png);} body.searchPage ul#nav li.search a {width:153px; background:url(img/nav/search.png) 0 -40px;} body.searchPage ul#nav li.search:hover > a {background-position:0 -80px;} body.searchPage ul#nav li.search ul.sub li a {width: auto; background-image:none;} ul#nav li.search ul.sub[class] {width: 484px; background:url(img/nav/col3BackLarge.png) left bottom} ul#nav li.search ul.sub li.subHeader {margin-top:10px} * html ul#nav li.search ul.sub li {float:left} ul#nav li.search ul.sub li.mainLink {width: 340px} ul#nav li.search ul.sub li ul.col1 {float:left; width: 145px;} ul#nav li.search ul.sub li ul.col2 {float:left; width: 155px;} ul#nav li.search ul.sub li ul.col3 {float:left; width: 145px;} ul#nav li.search ul.sub li ul li {padding-left:0; margin-top:0} * html ul#nav li.search ul.sub li ul li {float:none;} /* JOEL caravan Search STATE */ ul#nav li.navCaravanSearch {width:159px; margin-right: -12px;} ul#nav li.navCaravanSearch a {background:url(img/nav/navCaravanSearch.png);} body.searchPage ul#nav li.navCaravanSearch a {width:159px; background:url(img/nav/navCaravanSearch.png) 0 -40px;} body.searchPage ul#nav li.navCaravanSearch:hover > a {background-position:0 -80px;} body.searchPage ul#nav li.navCaravanSearch ul.sub li a {width: auto; background-image:none;} ul#nav li.navCaravanSearch ul.sub li.mainLink {width:100%;} ul#nav li.navCaravanSearch ul.sub[class] {margin-left:1px; width: 484px; background:url(img/nav/holidayBackWide.png) left bottom} ul#nav li.navCaravanSearch ul.sub li.subHeader {margin-top:10px} * html ul#nav li.navCaravanSearch ul.sub li {float:left} * html ul#nav li.navCaravanSearch ul.sub li.mainLink {width: 500px} ul#nav li.navCaravanSearch ul.sub li ul.col1 {float:left; width: 110px;} ul#nav li.navCaravanSearch ul.sub li ul.col2 {float:left; width: 170px;} ul#nav li.navCaravanSearch ul.sub li ul.col3 {float:left; width: 170px;} ul#nav li.navCaravanSearch ul.sub li ul li {padding-left:0; margin-top:0} * html ul#nav li.navCaravanSearch ul.sub li ul li {float:none;} /* Our Parks STATE */ ul#nav li.parks {width:118px; margin-right: -12px;} ul#nav li.parks a {background: url(img/nav/parks.png)} body.parksPage ul#nav li.parks a {width:118px; background:url(img/nav/parks.png) 0 -40px;} body.parksPage ul#nav li.parks:hover > a {background-position:0 -80px;} body.parksPage ul#nav li.parks ul.sub li a {width: auto; background-image:none;} ul#nav li.parks ul.sub[class] {width: 384px; background:url(img/nav/col3Back.png) left bottom} ul#nav li.parks ul.sub li.subHeader {margin-top:10px} * html ul#nav li.parks ul.sub li {float:left} ul#nav li.parks ul.sub li.mainLink {width: 340px} ul#nav li.parks ul.sub li ul.col1 {float:left; width: 115px;} ul#nav li.parks ul.sub li ul.col2 {float:left; width: 125px;} ul#nav li.parks ul.sub li ul.col3 {float:left; width: 115px;} ul#nav li.parks ul.sub li ul li {padding-left:0; margin-top:0} * html ul#nav li.parks ul.sub li ul li {float:none;} /* Accommodation STATE */ ul#nav li.accommodation {width: 163px; margin-right:-12px;} ul#nav li.accommodation a {background: url(img/nav/accommodation.png)} body.accommodationPage ul#nav li.accommodation a {width:163px; background:url(img/nav/accommodation.png) 0 -40px;} body.accommodationPage ul#nav li.accommodation:hover > a {background-position:0 -80px;} body.accommodationPage ul#nav li.accommodation ul.sub li a {width: auto; background-image:none;} ul#nav li.accommodation ul.sub[class] {width: 334px; background:url(img/nav/col2Back.png) left bottom} ul#nav li.accommodation ul.sub li.subHeader {margin-top:10px} * html ul#nav li.accommodation ul.sub li {float:left} ul#nav li.accommodation ul.sub li.mainLink {width: 300px} ul#nav li.accommodation ul.sub li ul.col1 {float:left; width: 145px;} ul#nav li.accommodation ul.sub li ul.col2 {float:left; width: 155px;} ul#nav li.accommodation ul.sub li ul li {padding-left:0; margin-top:0} * html ul#nav li.accommodation ul.sub li ul li {float:none;} /* JOEL caravan buyers guide STATE */ ul#nav li.navCaravanBuyers {width: 149px; margin-right:-12px;} ul#nav li.navCaravanBuyers a {background: url(img/nav/navCaravanBuyers.png)} body.caravanBuyersPage ul#nav li.navCaravanBuyers a {width:149px; background:url(img/nav/navCaravanBuyers.png) 0 -40px;} body.caravanBuyersPage ul#nav li.navCaravanBuyers:hover > a {background-position:0 -80px;} body.caravanBuyersPage ul#nav li.navCaravanBuyers ul.sub li a {width: auto; background-image:none;} ul#nav li.navCaravanBuyers ul.sub[class] {width: 384px; background:url(img/nav/col3Back.png) left bottom} ul#nav li.navCaravanBuyers ul.sub li.mainLink {width:100%;} ul#nav li.navCaravanBuyers ul.sub[class] {width: 384px; background:url(img/nav/col3Back.png) left bottom} ul#nav li.navCaravanBuyers ul.sub li.subHeader {margin-top:10px} * html ul#nav li.navCaravanBuyers ul.sub li {float:left} * html ul#nav li.navCaravanBuyers ul.sub li.mainLink {width: 350px} ul#nav li.navCaravanBuyers ul.sub li ul.col1 {float:left; width: 205px;} ul#nav li.navCaravanBuyers ul.sub li ul.col2 {float:left; width: 115px;} ul#nav li.navCaravanBuyers ul.sub li ul li {padding-left:0; margin-top:0} * html ul#nav li.navCaravanBuyers ul.sub li ul li {float:none;} /* Entertainment STATE */ ul#nav li.entertainment {width: 150px; margin-right:-12px;} ul#nav li.entertainment a {background: url(img/nav/entertainment.png)} body.entertainmentPage ul#nav li.entertainment a {width:150px; background:url(img/nav/entertainment.png) 0 -40px;} body.entertainmentPage ul#nav li.entertainment:hover > a {background-position:0 -80px;} body.entertainmentPage ul#nav li ul.sub li a {width: auto; background-image:none;} ul#nav li.entertainment ul.sub[class] {width: 334px; background:url(img/nav/col2Back.png) left bottom} ul#nav li.entertainment ul.sub li.subHeader {margin-top:10px} * html ul#nav li.entertainment ul.sub li {float:left} ul#nav li.entertainment ul.sub li.mainLink {width: 300px} ul#nav li.entertainment ul.sub li ul.col1 {float:left; width: 145px;} ul#nav li.entertainment ul.sub li ul.col2 {float:left; width: 155px;} ul#nav li.entertainment ul.sub li ul li {padding-left:0; margin-top:0} * html ul#nav li.entertainment ul.sub li ul li {float:none;} /* JOEL navOwnershipExperience STATE */ ul#nav li.navOwnershipExperience {width: 210px; margin-right:-12px;} ul#nav li.navOwnershipExperience a {background: url(img/nav/navOwnershipExperience.png)} body.ownershipExperiencePage ul#nav li.navOwnershipExperience a {width:210px; background:url(img/nav/navOwnershipExperience.png) 0 -40px;} body.ownershipExperiencePage ul#nav li.navOwnershipExperience:hover > a {background-position:0 -80px;} body.ownershipExperiencePage ul#nav li ul.sub li a {width: auto; background-image:none;} ul#nav li.navOwnershipExperience ul.sub[class] {margin-left: 1px; width: 229px;background:url(img/nav/holidayBackSingle.png) left bottom} ul#nav li.navOwnershipExperience ul.sub li.mainLink {width:100%;} ul#nav li.navOwnershipExperience ul.sub li {clear:both;float:none;} ul#nav li.navOwnershipExperience ul.sub li.subHeader {margin-top:10px} * html ul#nav li.navOwnershipExperience ul.sub li {float:left} * html ul#nav li.navOwnershipExperience ul.sub li.mainLink {width: 300px} ul#nav li.navOwnershipExperience ul.sub li ul.col1 {float:left; width: 115px;} ul#nav li.navOwnershipExperience ul.sub li ul.col2 {float:left; width: 125px;} ul#nav li.navOwnershipExperience ul.sub li ul li {padding-left:0; margin-top:0} * html ul#nav li.navOwnershipExperience ul.sub li ul li {float:none;} /* JOEL navEnquireNow STATE */ ul#nav li.navEnquireNow {width: 139px; margin-right:-12px;} ul#nav li.navEnquireNow a {background: url(img/nav/navEnquireNow.png)} body.enquireNowPage ul#nav li.navEnquireNow a {width:139px; background:url(img/nav/navEnquireNow.png) 0 -40px;} body.enquireNowPage ul#nav li.navEnquireNow:hover > a {background-position:0 -80px;} body.enquireNowPage ul#nav li ul.sub li a {width: auto; background-image:none;} ul#nav li.navEnquireNow ul.sub[class] {margin-left: 1px; width: 229px; background:url(img/nav/holidayBackSingle.png) bottom left} ul#nav li.navEnquireNow ul.sub li {float:none} ul#nav li.navEnquireNow ul.sub li.mainLink {margin-bottom:10px} ul#nav li.navEnquireNow ul.sub li.subHeader {margin-top:10px} * html ul#nav li.navEnquireNow ul.sub li {float:none} * html ul#nav li.navEnquireNow ul.sub li.mainLink {width: 165px;padding-bottom:10px;} ul#nav li.navEnquireNow ul.sub li ul li {padding-left:0; margin-top:0} * html ul#nav li.navEnquireNow ul.sub li ul li {float:none;} /* Experience STATE */ ul#nav li.experience {width: 182px; margin-right:-12px;} ul#nav li.experience a {background: url(img/nav/experience.png)} body.experiencePage ul#nav li.experience a {width:182px; background:url(img/nav/experience.png) 0 -40px;} body.experiencePage ul#nav li.experience:hover > a {background-position:0 -80px;} body.experiencePage ul#nav li ul.sub li a {width: auto; background-image:none;} ul#nav li.experience ul.sub[class] {width: 214px; background:url(img/nav/col1Back.png) left bottom} ul#nav li.experience ul.sub li {margin-top:0; clear:both; width: 100%} ul#nav li.experience ul.sub li.subHeader {margin-top: 10px} /* Account STATE */ ul#nav li.account {width: 132px; margin-right:-12px;} ul#nav li.account a {background: url(img/nav/account.png)} body.accountPage ul#nav li.account a {width:132px; background:url(img/nav/account.png) 0 -40px;} body.accountPage ul#nav li.account:hover > a, ul#nav li.account a:hover {background-position:0 -40px;} /* JOEL caravan Account STATE */ ul#nav li.navAccount {width: 132px; margin-right:-12px;} ul#nav li.navAccount a {background: url(img/nav/account.png)} body.accountPage ul#nav li.navAccount a {width:132px; background:url(img/nav/account.png) 0 -40px;} body.accountPage ul#nav li.navAccount:hover > a {background-position:0 -40px;} /* body.accountPage ul#nav li ul.sub li a {width: auto; background-image:none;} ul#nav li.navAccount ul.sub[class] {margin-left: -118px; width: 229px; background:url(img/nav/holidayBackSingle.png) bottom left} ul#nav li.navAccount ul.sub li ul li {margin-top:0} */ /* For Non-IE browsers and IE7 */ ul#nav li:hover {position:relative;} /* Make the hovered list color persist */ ul#nav li:hover > a {background-position:0 -80px;} /* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */ ul#nav li ul.sub {display:none;} /* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */ ul#nav li:hover > ul.sub {display:block; position:absolute; top:-11px; left:80px;} /* Position the first sub level beneath the top level links */ ul#nav > li:hover > ul.sub {left:0; top:40px; padding:10px 0 20px 19px; height:auto;} /* get rid of the table */ ul#nav table {position:absolute; top:14px; left:0; z-index:100; padding:0;margin:0;} ul#nav table td {border:none;} /* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */ * html ul#nav li a:hover {position:relative;background-position:0 -80px;} * html ul#nav li a:hover ul.sub {padding:10px 0 20px 15px;} /* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */ /* change the drop down levels from display:none; to visibility:hidden; */ * html ul#nav li ul.sub {visibility:hidden; display:block; position:absolute; top:26px; left:110px;} /* make the second level visible when hover on first level link and position it */ * html ul#nav li a:hover ul.sub {visibility:visible; left:0; } /* make the third level visible when you hover over second level link and position it and all further levels */ ul#nav li a:hover ul.sub a:hover ul{visibility:visible; top:-11px; left:80px;} /* HEADER NAVIGATION */ div.interSiteNav {background: #fff} span.buyCaravan {line-height: 1.2em; margin:auto; padding: 1px 0 0 725px; width: 176px; height:17px; display:block; text-indent: -999em; background: #fff} span.buyCaravan a {width: 176px; height:16px; display:block; text-indent: -999em; background:url(img/topNav/buyCaravan.gif) no-repeat} div.bookingInfo {position:absolute; top:32px; right:60px;} span.bookOnline {float:left;line-height: 1.2em; width: 95px; height:25px; display:block; text-indent: -999em;} span.bookOnline a {width: 95px; height:25px; display:block; text-indent: -999em; background:url(img/topNav/bookOnline.png) no-repeat} span.call {float:left;text-indent: -999em;margin:4px 5px 0 5px;width:39px; height: 17px; background:url(img/topNav/call.png) no-repeat} span.phone {float:left;color: #feba2f; font-size: 12pt} .rollover a:hover {background-position: bottom left} ul.topnav {position:absolute; top:58px; right:51px;} ul.topnav li {line-height: 0.9em; float:left; text-indent: -999em; height: 21px; display:block;} ul.topnav li a {line-height: 0.9em; display:block; height: 21px; } ul.topnav li.brochures a {width: 79px; background:url(img/topNav/brochures.png) no-repeat} ul.topnav li.faqs a {width: 60px; background:url(img/topNav/faqs.png) no-repeat} ul.topnav li.contact a {width: 87px; background:url(img/topNav/contact.png) no-repeat} ul.topnav li a:hover {background-position: bottom} /* BREADCRUMB NAV */ ul.breadcrumb {position:absolute; top:-52px; left:30px; font-size:0.9em; color:#0460af; } ul.breadcrumb li {font-weight:bold; float:left; padding:0 5px 0 13px; background:url(img/breadcrumbArrow.gif) no-repeat 2px 6px} ul.breadcrumb li.first {padding-left: 0; background:none} ul.breadcrumb a {color: #6c6c6c; font-weight:bold;} /* TERTIARY NAV */ ul.tertiaryNav {float:left; margin: 0 -14px 0 -15px; display:inline; padding-right: 14px; background: url(img/nav/tertiary/sideShadow.gif) top right no-repeat} ul.tertiaryNav li {float:left; clear:both; width: 271px; height: 28px; border-left: 1px solid #cdcdcd; border-right: 1px solid #cdcdcd; border-bottom: 1px solid #cdcdcd; } ul.tertiaryNav li.first {border-top: 1px solid #cdcdcd;} ul.tertiaryNav li h3 {width: 247px; padding: 5px 0 0 24px; font-size: 1.1em; background:url(img/nav/tertiary/off.gif) no-repeat} ul.tertiaryNav li h3 a {display:block;} ul.tertiaryNav li.down h3 {background:url(img/nav/tertiary/on.gif) no-repeat} ul.tertiaryNav li.open {height: auto; background:url(img/nav/tertiary/onBottom.gif) bottom no-repeat #edf4f8} ul.tertiaryNav li.open h3 {background:url(img/nav/tertiary/open.gif) no-repeat} ul.tertiaryNav li ul {width: 220px; float:left; padding: 1px 0 10px 14px} ul.tertiaryNav li ul li {line-height: 1.9em; font-size: 0.9em; width: auto; height: auto; padding: 0 0 0 30px; border: 0; background:url(img/nav/tertiary/blueArrow.gif) no-repeat 20px 7px} ul.tertiaryNav li ul li a {width: 200px; display:block;} ul.tertiaryNav li ul li.down {font-weight:bold; background:url(img/nav/tertiary/onArrow.gif) no-repeat 20px 7px} ul.tertiaryNav li.openLevel1 {background:url(img/nav/tertiary/downArrow.gif) no-repeat 20px 7px} ul.tertiaryNav li.openLevel1 ul {padding: 3px 0 0 0} ul.tertiaryNav li.openLevel1 a {width: 200px; display:block} ul.tertiaryNav li.openLevel1 li {width: 150px; padding-left: 10px; font-size: 1.0em; background:url(img/nav/tertiary/blueArrow.gif) no-repeat 0 7px} ul.tertiaryNav li.openLevel1 li.down {background: url(img/nav/tertiary/onArrow.gif) no-repeat 0 7px}