/* $Id: index.css,v 1.63 2012/02/08 11:12:43 adam.l Exp $ */ /* =Generic Imports -----------------------------------------------------------------------------*/ #middleOffers #offerTitle, h2.indexHeading{ font-size:1.6em; font-weight:bold; text-transform:uppercase; } #middleOffers{ background: url("../images/pageElements/background/homeOffersBtm.gif") no-repeat left bottom; float:left; height:180px; margin-left:10px; width:320px; } #middleOffers h2{ background: url("../images/pageElements/background/homeOffersTop.gif") no-repeat; font-size:12px; font-weight:bold; padding:10px 15px 0; } #middleOffers h2 a { color:#422C17; } #middleOffers h2 a:hover { color:#ff6b18; } #middleOffers tr.bg{ background-color:#F7F6F2; } #middleOffers td{ border-bottom:#fff 1px solid; font-size:11px; padding:2px 0 2px 15px; } #middleOffers td span{ font-weight:bold; } #middleOffersStatic { background:none; height:180px; margin-left:10px; width:320px; float: left; overflow:hidden; } #middleOffersStatic h2 { background:none; padding:0; } #middleOffersStatic a { display:block; height:180px; overflow:hidden; text-indent:-9999px; width:320px; float: left; } #middleOffersStatic a { background: url("../images/pageElements/background/homeOffersBtn.jpg") no-repeat; } #middleOffersStatic a.agent { background: url("../images/pageElements/background/homeOffersBtnAgent.jpg") no-repeat; } #offerFooter{ border: 1px solid #331A04; background:#C8BEA1; padding:9px; } h2.indexHeading{ color: #180001; font-size:1.4em; margin:0; } /* =Landing Page Section -----------------------------------------------------------------------------*/ #landingLinks { float:left; clear: both; width:660px; height:106px; margin: 10px 0 10px -10px; } #landingLinks a { float:left; width:110px; height:84px; margin-left: 10px; padding: 5px 90px 5px 10px; font-weight: bold; color: #422c17; line-height: 1.4em; text-decoration: none; background-color: transparent; background-repeat: no-repeat; background-position: 0 0; } #landingLinks a.feature01 { background-image: url("../images/partners/palmSprings/btnPalmSprings.jpg"); } #landingLinks a.feature02 { background-image: url("../images/partners/kenya/KenyaBtn.jpg"); } #landingLinks a.feature03 { background-image: url("../images/pageElements/background/btnSeaWorld.jpg"); } #landingLinks a span { font-weight: bold; text-decoration: underline; color: #ff6b18; font-weight: normal; } #landingLinks a.feature01 span { display: block; margin-bottom: 12px } #landingLinks a.feature02 span, #landingLinks a.feature03 span { display: block; margin-top: 12px } #landingLinks a:hover span { color: #422c17; } /* =Features Box -----------------------------------------------------------------------------*/ #offerFeatures { float: left; height: 378px; } .ui-tabs-hide{ display: none; } .ui-tabs-nav { float:right; list-style: none; margin:10px 0; padding: 0; } .one-button { display: none; } .ui-tabs-nav:after { /* clearing without presentational markup, IE gets extra treatment */ display: block; clear: both; content: " "; } .ui-tabs-nav li { float: left; margin: 0px; background:url("../images/pageElements/background/featureBalls.gif") no-repeat; } .ui-tabs-nav li#two-line a span { height: 34px; padding-top: 5px; } .ui-tabs-nav li#offerOfTheWeek a { margin: 0px; width: 142px; border-right: none; } .five.ui-tabs-nav li#offerOfTheWeek a { width: 176px; padding: 0 0 0 0; } .ui-tabs-nav li.ui-tabs-selected { margin-top: 0px; } .ui-tabs-nav li.ui-tabs-selected a:hover{ cursor: default; } .ui-tabs-nav a { display: block; height: 10px; width:14px; } .ui-tabs-nav a { outline: 0; /* prevent dotted border in Firefox */ } .ui-tabs-nav .ui-tabs-selected a, .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active { background:url("../images/pageElements/background/featureBalls.gif") no-repeat -18px 0; } .ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { /* @ Opera, use pseudo classes otherwise it confuses cursor... */ /*cursor: text;*/ } .ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active, .ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { /* @ Opera, we need to be explicit again here now... */ cursor: pointer; } .ui-tabs-disabled { /* opacity: .4; filter: alpha(opacity=40);*/ } /* =Features Box -----------------------------------------------------------------------------*/ #offerTheWeek{ background:#331A04; color:#fff; float:right; height:235px; width:188px; padding:12px 6px 0px 6px; } #offerTheWeek div{ height:200px; overflow:hidden; } img.offerOfTheWeek{ float:left; height:247px; width:510px; } #offerTheWeek div p.center{ text-align:center; text-transform:uppercase; font-weight:bold; font-size:1.2em; } p.center em{ font-style:normal; } #offerTheWeek div strong{ font-size:1.4em; } #offerTheWeek a{ float:right; } /* =Left Column Links -----------------------------------------------------------------------------*/ /*#column-left a.btnWhicker, #column-left a.btnHolidayAuction { background: url("themes/hnjww/images/pageElements/buttons/alanWhickerBtn.jpg") no-repeat; display:block; margin:0 auto 6px; height:0; padding-top:159px; overflow:hidden; } #column-left a.btnHolidayAuction { background: url("themes/hnjww/images/pageElements/buttons/theSunBigCharityAuction.jpg") no-repeat!important; margin-top:-10px; padding-top:180px!important; } */ /* =New HomeBanner -----------------------------------------------------------------------------*/ .homeBanner {margin-bottom:10px; display:block; } #homeBannerControls {margin-top:-10px; margin-bottom:10px; } /* =Index Text -----------------------------------------------------------------------------*/ #contentInnerV1 #indexTxt{ position:absolute; bottom:0; left:0;} #contentInner {float:left; margin-bottom:10px; padding-bottom:200px; position:relative;} #contentInner #indexTxt {width:100%; float:left; clear:both; position:absolute; bottom:0; left:0;} #contentInner #indexTxt .insideIndexTxt {width:100%; float:left; clear:both; } /* =Inspiration -----------------------------------------------------------------------------*/ #inspiration{ background: url("../images/pageElements/background/inspiration.jpg") no-repeat; float:left; padding:0 15px; height:181px; width:290px; } #inspiration h2 { text-indent:-9999px; } #inspiration ul { margin:20px 0 0; } #inspiration li { line-height:1.4em; list-style:none; } #inspiration li a { background: url("../images/pageElements/background/menuLeftColArrowSprite.gif") no-repeat 0 2px; color:#422c17; font-size:11px; padding-left:10px; text-decoration:none; } #inspiration li a:hover { text-decoration:underline; } /* =H&J Recommends -----------------------------------------------------------------------------*/ h3.recommends{ background: url("../images/pageElements/background/recommendTop.gif") no-repeat left bottom; padding-bottom:7px; } #recommends{ background: url("../images/pageElements/background/recommendBtm.gif") no-repeat left bottom; overflow: hidden; zoom: 1; margin-bottom:10px; padding:10px 0 0 20px; } #recommends div { float:left; margin-right:10px; width:200px; } #recommends p { font-size:16px; font-weight:bold; line-height:1.2em; margin:0; } #recommends ul { margin:0 0 10px; } #recommends li { background: url("../images/pageElements/background/menuLeftColArrowSprite.gif") no-repeat 0 -221px; list-style:none; padding-left:15px; } #recommends li:hover { background: url("../images/pageElements/background/menuLeftColArrowSprite.gif") no-repeat 0 5px; } #recommends li.recCountry { background:none; font-size:14px; margin:0; padding:0; } #recommends li.recCountry a:link, #recommends li.recCountry a:active, #recommends li.recCountry a:visited {color: #422c17; text-decoration: none} #recommends li.recCountry a:hover {color: #422c17; text-decoration: underline} #recommends li.recAll { font-weight:bold; margin-top:5px; } #ATOL { clear: both; float: right; margin-left: 40px; margin-bottom: 5px; padding: 0px; width: 212px; height: 71px; background: url("../images/pageElements/background/ATOL.png") no-repeat top left; } #ATOL a { display: block; width: 202px; height: 61px; text-indent: -9999px; } #ATOL a:active { outline: none; } #ATOL a:focus { -moz-outline-style: none; } #TripAdvisor { clear: left; background: url("../images/pageElements/background/emailSignUpTop.gif") no-repeat scroll 0 0 transparent; padding-top: 7px; margin-bottom: 10px } #TripAdvisor .insideTripAdvisor{ background: url("../images/searchPanel/SearchBGBottom.gif") no-repeat scroll 0 bottom transparent; padding:0px 15px 10px; font-size: 12px; } #TripAdvisor .insideTripAdvisor p{ line-height:1.2em; margin-bottom: 0;} /*****************Offers panel********************/ #content .offersPanel {width:650px; background-color:transparent; float:left; clear:both; padding:0px 0px 15px 0px; font-size:100%;} /*Default tab styles*/ #content .offersPanel ul.offersTabLinks {list-style-type:none; width:100%; float:left; clear:both; padding:12px 0px 0px 12px; margin:0px;} #content .offersPanel ul.offersTabLinks li {width:auto; float:left; clear:none; margin-right:10px; } /*js activated styles*/ #content .offersPanel ul.activeTabs {padding:0px 0px 0px 12px; width:638px; } #content .offersPanel ul.activeTabs li {margin:0px; position:relative; left:0px;} #content .offersPanel ul.activeTabs li#tab1 {left:0px; z-index:3;} #content .offersPanel ul.activeTabs li#tab2 {left:-20px; z-index:2;} #content .offersPanel ul.activeTabs li#tab3 {left:-40px; z-index:1;} #content .offersPanel ul.activeTabs li a {outline:0; width:146px; padding-top:30px; float:left; clear:both; background-repeat:no-repeat; background-image:url(../images/home/offerslist/offerstabs.png); background-position:0px 0px;} #content .offersPanel ul.activeTabs li a span {position:absolute; left:-3000px;} #content .offersPanel ul.activeTabs li#tab1 a {background-position:-5px -10px;} #content .offersPanel ul.activeTabs li#tab2 a {background-position:-158px -10px;} #content .offersPanel ul.activeTabs li#tab3 a {background-position:-311px -10px;} #content .offersPanel ul.activeTabs li.active#tab1 a, #content .offersPanel ul.activeTabs li#tab1 a:hover {background-position:-5px -50px;} #content .offersPanel ul.activeTabs li.active#tab2 a, #content .offersPanel ul.activeTabs li#tab2 a:hover {background-position:-158px -50px;} #content .offersPanel ul.activeTabs li.active#tab3 a, #content .offersPanel ul.activeTabs li#tab3 a:hover {background-position:-311px -50px;} #content .offersPanel ul.activeTabs li#tab1.active, #content .offersPanel ul.activeTabs li#tab2.active, #content .offersPanel ul.activeTabs li#tab3.active {z-index:4;} #content .offersPanel ul.activeTabs li#tab1.hover, #content .offersPanel ul.activeTabs li#tab2.hover, #content .offersPanel ul.activeTabs li#tab3.hover {z-index:5;} /*Tab content area*/ #content .offersPanel .offersTab {width:646px; border:solid 2px #edeae8; background-color:#fff; clear:both; padding:0px 0px 0px 0px; margin-top:12px;} #content .offersPanel .offersTab h2 {font-size:167%; width:622px; clear:both; float:left; padding:12px 12px 0px 12px;} #content .offersPanel .offersTab p.pricesBasedOn {color:#333; font-style:italic; width:622px; clear:both; text-align:right; padding:0px 12px 0px 12px; margin-bottom:0;} /*js activated styles*/ #content .offersPanel .tab_content {border-radius:0px 6px 6px 6px; -moz-border-radius:0px 6px 6px 6px; margin-top:0px; padding-bottom:12px; position:relative; top:-2px;} #content .offersPanel .tab_content h2 {position:absolute; left:-3000px; padding:0px; display:inline; width:auto;} /*Lists in the tab content area*/ #content .offersPanel ul.offerBlockList {list-style-type:none; width:634px; float:left; clear:both; margin:0px; padding:0px 0px 0px 12px; overflow:hidden; } #content .offersPanel ul.offerBlockList li.offerBlock {font-size:100%; width:200px; float:left; margin:0px 11px 0px 0px; padding:11px 0px 0px 0px; } #content .offersPanel ul.offerBlockList li.offerBlock .insideOfferBlock {width:196px; border:solid 2px #edeae8; float:left; clear:both; padding:0px; background-color:#f8f6f2; border-radius:6px; -moz-border-radius:6px; } #content .offersPanel ul.offerBlockList li.offerBlock h3 {font-weight:bold; font-size:104%; float:left; clear:both; padding:0px; margin:0px; width:196px;} #content .offersPanel ul.offerBlockList li.offerBlock h3 a {padding:5px 8px 5px 8px; width:180px; float:left; clear:both; display:block; text-decoration:none; color:#422C17;} #content .offersPanel ul.offerBlockList li.offerBlock h3 a:hover { color:#e05f15;} /*If the list is a type with heading images*/ #content .offersPanel ul.withImages li.offerBlock h3 a {padding:5px 8px 107px 8px; background-position:bottom left; background-repeat:no-repeat;} /*Background photo of is 196 x 102, and sits under the h3 as a background-image.*/ #content .offersPanel ul.withImages li.destination-caribbean h3 a {background-image:url(../images/home/offerslist/destinationcaribbean.jpg); } #content .offersPanel ul.withImages li.destination-africa h3 a {background-image:url(../images/home/offerslist/destinationeastafrica.jpg); } #content .offersPanel ul.withImages li.destination-tours h3 a {background-image:url(../images/home/offerslist/destinationescorted.jpg); } #content .offersPanel ul.withImages li.destination-fareast h3 a {background-image:url(../images/home/offerslist/destinationfareast.jpg); } #content .offersPanel ul.withImages li.destination-indianocean h3 a {background-image:url(../images/home/offerslist/destinationindia.jpg); } #content .offersPanel ul.withImages li.destination-multicentre h3 a {background-image:url(../images/home/offerslist/destinationmulticentre.jpg); } #content .offersPanel ul.withImages li.destination-neareast h3 a {background-image:url(../images/home/offerslist/destinationnorthafrica.jpg); } #content .offersPanel ul.withImages li.destination-csa h3 a {background-image:url(../images/home/offerslist/destinationsouthamerica.jpg); } #content .offersPanel ul.withImages li.destination-usa h3 a {background-image:url(../images/home/offerslist/destinationusa.jpg); } #content .offersPanel ul.withImages li.theme-spa h3 a {background-image:url(../images/home/offerslist/theme_spa.jpg); } #content .offersPanel ul.withImages li.theme-beaches h3 a {background-image:url(../images/home/offerslist/themebeaches.jpg); } #content .offersPanel ul.withImages li.theme-cities h3 a {background-image:url(../images/home/offerslist/themecities.jpg); } #content .offersPanel ul.withImages li.theme-romantic h3 a {background-image:url(../images/home/offerslist/themeromantic.jpg); } #content .offersPanel ul.withImages li.theme-weddings h3 a {background-image:url(../images/home/offerslist/themeweddings.jpg); } #content .offersPanel ul.withImages li.theme-honeymoons h3 a {background-image:url(../images/home/offerslist/themehoneymoons.jpg); } #content .offersPanel ul.withImages li.theme-multicentre h3 a {background-image:url(../images/home/offerslist/thememulti.jpg); } #content .offersPanel ul.withImages li.theme-tours h3 a {background-image:url(../images/home/offerslist/themeescorted.jpg); } #content .offersPanel ul.offerBlockList li.offerBlock ul.linksList {padding:0px; margin:0px; width:196px; float:left; clear:both; border-top:solid 2px #f8f6f2; list-style-type:none;} #content .offersPanel ul.offerBlockList li.offerBlock ul.linksList li {padding:0px; margin:0px; width:100%; display:inline; float:left; clear:both; border-bottom:solid 4px #f8f6f2;} #content .offersPanel ul.offerBlockList li.offerBlock ul.linksList li a {width:172px; display:block; clear:both; padding:5px 8px 5px 16px; background-color:#fff; text-decoration:none; color:#e05f15; background-image:url(../images/home/offerslist/linkarrow.gif); background-position:8px 8px; background-repeat:no-repeat; height: 26px; min-height: 26px; height: auto !important;} #content .offersPanel ul.offerBlockList li.offerBlock ul.linksList li a:hover {color:#422C17; background-image:url(../images/home/offerslist/linkarrow_over.gif);} #content .offersPanel ul.offerBlockList li.offerBlock ul.linksList li a span {width:auto; float:left; display:block; cursor:pointer; line-height:1.2;} #content .offersPanel ul.offerBlockList li.offerBlock ul.linksList li a span.place {width:90px; } #content .offersPanel ul.offerBlockList li.offerBlock ul.linksList li a span.deal {width:80px; text-align:right; font-size:90%; color:#422C17; } #content .offersPanel ul.offerBlockList li.offerBlock ul.linksList li a span.deal strong {font-size:108%;} #content .offersPanel ul.offerBlockList li.offerBlock p.viewAll {padding:3px 0px 5px 8px; margin:0px; float:left; clear:both; width:auto;} #content .offersPanel ul.offerBlockList li.offerBlock p.viewAll a {float:left; background-color:transparent; clear:both; display:block; width:180px; padding:27px 0px 0px 0px; background-repeat:no-repeat; background-position:top left;} #content .offersPanel ul.offerBlockList li.offerBlock p.viewAll a span {position:absolute; left:-3000px;} #content .offersPanel ul.offerBlockList li.offerBlock p.viewAllDestinations a {background-image:url(../images/home/offerslist/btnTabViewMore.gif);} #content .offersPanel ul.offerBlockList li.offerBlock p.viewAllDestinations a:hover {background-position:-180px 0px;} /*Button Overides */ #content .offersPanel ul.offerBlockList li.destination-multicentre p.viewAllDestinations a, #content .offersPanel ul.offerBlockList li.theme-multicentre p.viewAllDestinations a {background:url(../images/home/offerslist/btnTabViewMore.gif) 0px -27px;} #content .offersPanel ul.offerBlockList li.destination-multicentre p.viewAllDestinations a:hover, #content .offersPanel ul.offerBlockList li.theme-multicentre p.viewAllDestinations a:hover {background-position:-180px -27px;} #content .offersPanel ul.offerBlockList li.destination-tours p.viewAllDestinations a, #content .offersPanel ul.offerBlockList li.theme-tours p.viewAllDestinations a {background:url(../images/home/offerslist/btnTabViewMore.gif) 0px -54px;;} #content .offersPanel ul.offerBlockList li.destination-tours p.viewAllDestinations a:hover, #content .offersPanel ul.offerBlockList li.theme-tours p.viewAllDestinations a:hover {background-position:-180px -54px;} /*Button Overides */ #content .offersPanel ul.offerBlockList li.offerBlock p.viewAllOffers a {background:url(../images/home/offerslist/btnTabViewMore.gif) 0px -81px;} #content .offersPanel ul.offerBlockList li.offerBlock p.viewAllOffers a:hover {background-position:-180px -81px;} /*ff clear fix*/ #content .offersPanel .offersTab:after, #content .offersPanel ul.offerBlockList li.offerBlock ul.linksList li a:after {clear:both; content:"."; display:block; height:0; visibility:hidden;} /*ie6 fixes, can remove when no longer supported*/ * html #content .offersPanel ul.activeTabs li a, * html #content .offersPanel ul.offerBlockList li.offerBlock p.viewAll a {height:1px;} * html #content .offersPanel ul.activeTabs li a {background-image:url(../images/home/offerslist/offerstabs.gif);}