﻿/*  Contents 


1. Generic Styling
2. Layout
3. Header and Footer
4. Generic Elements (boxes, etc)
4.1 Sidebar Boxes
5. Wait Message
6. Warning


Blue - #0099ff
Orange - #fd9717
Green - #84c72c

*/



/* 1. Generic Styling */
html {background:#fff;margin:0;}
body {margin:0;background:#e7e6de url(/images/headerbg.png) repeat-x;}
body, td, th, input, select, p {font-family:Arial;font-size:12px;}
p {line-height:1.4em;}
a img {border:none;outline:none;}
a {outline:none;}
.clear {height:0;position:relative;clear:both;zoom:1;}

div.modalpopup {position:absolute;z-index:250;background:#fff;padding:10px;}


/* 2. Layout */
#divAll {width:960px;margin:0 auto;padding:0 20px;}
#divHeader {position:relative;top:10px;height:131px;}
#divFooter {background:#fff url(/images/footerbg.png) repeat-x;min-height:100px;padding-bottom:20px;}
#divFooterContent {position:relative;width:960px;margin:0 auto;}
#divMain {margin-top:20px;}
#divSidebar {float:left;width:285px;margin-right:15px;}
#divContent {float:left;width:660px;min-height:500px;position:relative;} 
#divOverlay {position:absolute;top:0;left:0;z-index:30;width:100%;background-color:#000;}


/* 3. Header and Footer */

/* 3.1 Header */
#divHeader a.logo {display:block;width:297px;height:48px;text-indent:-10000px;background:url(/images/header_logo.png) no-repeat;}

#divHeader #spTelNumber {position:absolute;top:5px;left:360px;width:269px;height:34px;display:block;text-indent:-10000px;background:url(/images/header_phoneNumber.png) no-repeat;}
#divHeader #spAfterSales {position:absolute;top:56px;left:5px;color:#555;font-weight:bold;font-size:13px;}
#divHeader span.blue {color:#3682f4;}

#divHeader span.orange {color:#fd9717;}

#divHeaderLinks {position:absolute;top:5px;right:2px;width:315px;}
#divHeaderLinks a {text-indent:-10000px;margin-left:8px;display:block;float:left;width:32px;height:32px;}
#divHeaderLinks .abta {background:url(/images/icon_abta.png) no-repeat;width:68px;}
#divHeaderLinks .atol {background:url(/images/icon_atol.png) no-repeat;}
#divHeaderLinks .twitter {background:url(/images/icon_twitter.png) no-repeat;}
#divHeaderLinks .facebook {background:url(/images/icon_facebook.png) no-repeat;margin-right:0px;}
#divHeaderLinks .like {background:url(/images/icon_like.png) no-repeat;width:74px;}
#divHeaderLinks .youtube {background:url(/images/icon_youtube.png) no-repeat;margin-left:-15px;}

#divLike {margin:5px;float:left;}

#divSearchWebsite {position:absolute;top:45px;right:0;}
#divSearchWebsite a.button_search {float:left;display:block;text-indent:-10000px;}
#divSearchWebsite #txtSiteSearch {float:left;padding:4px;width:212px;margin:5px 5px 0 0;color:#555;}



/* 3.1.1 Nav */
#divNav {position:absolute;bottom:5px;}
#divNav a {float:left;display:block;text-indent:-10000px;}
#divNav span {float:left;display:block;color:#fff;position:relative;}
#divNav #spTradeLogin {line-height:40px;text-indent:10px;}
#divNav #aTradeLogout {position:absolute;right:10px;top:0;text-indent:0;color:#fff;}

/* 3.1.2 Trade Login */        
#divTradeLogin {position:absolute;z-index:250;background:#fff;width:350px;padding:20px;}
#divTradeLogin a {display:block;position:absolute;top:5px;right:5px;height:14px;width:20px;text-indent:-10000px;
                       background:url(/images/close.gif) no-repeat 0 0;}
#divTradeLogin a:hover {background:url(/images/close.gif) no-repeat 0 -14px;}
#divTradeLogin h3 {color:#0099ff;font-size:16px;margin:0 0 20px;}
#divTradeLogin div {margin:10px 0;}
#divTradeLogin label {color:#555;display:block;float:left;width:100px;position:relative;top:3px;}
#divTradeLogin input.textbox {padding:2px;color:#555;}
#divTradeLogin #txtAbta {width:50px;}

#divTradeLoginError {height:40px;margin:0;font-size:12px;border:solid 2px #fd9717;padding:10px 10px 10px 50px;color:#555;background:url(/images/warning.gif) no-repeat 10px 10px;
                     line-height:1.4em;}

.error {background:#f2d6de;}

/* 3.2 Footer */
#divFooterNav {padding:10px 0 15px;height:28px;}
#divFooterNav a {font-size:12px;color:#fff;text-decoration:none;padding:0 10px;}
#divFooterNav a:hover {text-decoration:underline;}
#divFooterNav span {position:absolute;right:10px;color:#fff;}
#divFooterNav span a {padding:0;}

#spFooterHeader {display:block;color:#fff;font-size:30px;font-weight:bold;margin:-10px 0 0 10px;float:left;}
#imgFooterLogos {float:left;margin:-10px 0 0 30px;}
#spFooterTelephone {position:absolute;top:40px;right:10px;font-weight:bold;font-size:30px;color:#fff;}
#spFooterAfterSales {position:absolute;top:75px;right:10px;font-weight:bold;font-size:13px;color:#fff;}

#divFooterLinks {width:960px;text-align:center;margin:60px 0 10px;}
#divFooterLinks a {padding:0 10px;border-right:solid 1px #555;color:#555;text-decoration:none;line-height:11px;height:11px;}
#divFooterLinks a:hover {text-decoration:underline;}
#divFooterLinks a.last {border-right:none !imporant;}

#divFooter #spAddress {display:block;width:960px;text-align:center;font-size:11px;color:#555;}


/* 4. Generic Elements (boxes, etc) */

/* 4.1 Sidebar Boxes */
div.sidebarBox {position:relative;width:265px;background:url(/images/sidebarboxbg.png) no-repeat bottom left;padding:45px 10px 10px;
                margin-bottom:15px;color:#555;}
div.sidebarBox h3.top {position:absolute;top:0;left:0;height:40px;width:285px;margin:0;background:url(/images/sidebarBoxHeader.png) no-repeat;
                       line-height:40px;padding-left:10px;color:#fff;font-size:15px;overflow:hidden;}



/* 4.2 Content Boxes */
div.contentBox {position:relative;width:640px;background:url(/images/contentboxbg.gif) no-repeat bottom left;padding:45px 10px 10px;
                margin-bottom:15px;}
div.contentBox h3.top {position:absolute;top:0;left:0;height:40px;width:660px;margin:0;text-indent:-10000px;}
div.contentBox div.top {position:absolute;top:0;left:0;width:660px;height:5px;background:url(/images/contentboxtop.png) no-repeat;}

div.contentBoxAlt {position:relative;width:640px;background:url(/images/contentboxbg.gif) no-repeat bottom left;padding:50px 10px 10px;
                margin-bottom:15px;}
div.contentBoxAlt h3.top {height:30px;width:650px;padding:10px 0 0 10px;position:absolute;top:0;left:0;background:url(/images/contentboxtop.png) no-repeat;
                          color:#73bcff;font-size:30px;font-weight:normal;margin:0;}
                   
/* 4.3 Buttons */
input.button_large {background:url(/images/sprite.png) no-repeat 0 0;padding:0 0 0 12px;border:none;height:40px;width:160px !important;
                 color:#fff !important;font-weight:bold;cursor:pointer;text-align:left;font-size:12px !important;line-height:40px;}
input.button_medium {background:url(/images/sprite.png) no-repeat 0 -47px;padding:0 0 0 12px !important;border:none;height:42px;width:122px !important;
                 color:#fff !important;font-weight:bold;cursor:pointer;text-align:left;font-size:12px !important;}
input.button_small {background:url(/images/sprite.png) no-repeat 0 -181px;padding:0 0 0 12px;border:none;height:40px;width:84px !important;
                 color:#fff !important;font-weight:bold;cursor:pointer;text-align:left;font-size:12px !important;line-height:40px;}
input.button_orange {background:url(/images/sprite.png) no-repeat 0 -94px;padding:0 0 0 12px;border:none;height:40px;width:102px !important;
                 color:#fff !important;font-weight:bold;cursor:pointer;text-align:left;font-size:12px !important;line-height:40px;}
input.button_large_orange {background:url(/images/sprite/button_large_orange.png) no-repeat;padding:0 0 0 12px;border:none;height:40px;width:150px !important;
                 color:#fff !important;font-weight:bold;cursor:pointer;text-align:left;font-size:12px !important;line-height:40px;}
input.button_extraLarge {background:url(/images/sprite/button_extraLarge.png) no-repeat 0 0;padding:0 0 0 12px;border:none;height:40px;width:200px !important;
                 color:#fff !important;font-weight:bold;cursor:pointer;text-align:left;font-size:12px !important;line-height:40px;}
                 
/* 5 Wait Message */
div.waitmessage {position:absolute;margin:0 auto;display:block;padding:20px;z-index:120;background:#fff;}
div.waitmessage img {margin:0 auto;}
div.waitmessage h3 {background:url(/images/working.gif) no-repeat;font-size:12px;text-indent:30px;margin:20px 0 0 0;
    line-height:16px;color:#555;}
    


/* 6 Warning */
#divInfo {position:relative;width:930px;height:40px;background:#fff;margin:15px 0;padding:15px;background:url(/images/warningboxbg.gif) no-repeat;}
#divInfo ul {list-style-type:none;padding:0;margin:0;}
#divInfo li {padding-left:55px;font-size:14px;line-height:40px;color:#555;}

#divInfo.information ul {background:url(/images/info.gif) no-repeat;min-height:40px;}
#divInfo.warning ul {background:url(/images/warning.gif) no-repeat;min-height:40px;}

#divInfo #aCloseInfo {position:absolute;top:8px;right:10px;width:20px;height:14px;background:url(/images/close.gif) no-repeat 0 0;}
#divInfo #aCloseInfo:hover {background:url(/images/close.gif) no-repeat 0 -14px;}


/* 7 Sales Message */
#divSalesMessage {padding:10px !important;color:#555;}
#divSalesMessage.top {margin-bottom:20px;}
#divSalesMessage span.message {display:block;min-height:40px;background:url(/images/info.gif) no-repeat;padding-left:50px;}



/* 8 Star Rating */
span.icon_starRating {display:block;text-indent:-10000px;padding:2px 0;height:16px;}
span.starRatingBlue {display:block;text-indent:-10000px;padding:2px 0;height:16px;background:url(/images/starRating.png) no-repeat;}

span.star0 {width:0;}
span.star0half {width:8px;}            
span.star1 {width:16px;}
span.star1half {width:28px;}
span.star2 {width:36px;}
span.star2half {width:48px;}
span.star3 {width:56px;}
span.star3half {width:68px;}
span.star4 {width:76px;}
span.star4half {width:88px;}
span.star5 {width:96px;}

span.starRatingSmall {background:url(/images/starRatingSmall.png) no-repeat;display:block;text-indent:-10000px;padding:2px 0;height:11px;}
span.starRatingOrange {background:url(/images/starRatingSmallOrange.png) no-repeat;display:block;text-indent:-10000px;padding:2px 0;height:11px;}
              
span.star1small {width:11px;}
span.star1halfsmall {width:20px;}
span.star2small {width:25px;}
span.star2halfsmall {width:33px;}
span.star3small {width:38px;}
span.star3halfsmall {width:47px;}
span.star4small {width:52px;}
span.star4halfsmall {width:61px;}
span.star5small {width:66px;}




/* 9 Payment Options */
#divPaymentOptions {padding-top:55px !important;}
#divPaymentOptions #spCreditCards {display:block;padding-left:102px;color:#333;font-weight:bold;margin-bottom:15px;}
#divPaymentOptions p {font-size:11px;color:#333;margin:0 0 10px 0;}
#divPaymentOptions img {margin-top:10px;}
#divPaymentOptions span.icon_creditCards {display:block;text-indent:-10000px;}




/* 10 Customer Satisfaction */
#divCustomerSatisfaction {background:url(/images/customersatisfactionbg.png) no-repeat bottom left !important;padding-top:50px;}
#divCustomerSatisfaction span {display:block;height:21px;line-height:21px;font-size:12px;color:#327ae0;text-indent:30px;margin-bottom:10px;}
#divCustomerSatisfaction p {float:right;width:170px;font-size:11px;color:#333;margin:40px 0 0;}



/* 11 More Hotels */
#divMoreHotels {padding:30px 10px 10px;}
#divMoreHotels h3 {display:block;width:285px;height:40px;position:absolute;top:0;left:0;font-size:14px;color:#fff;
                   background:url(/images/sidebarBoxHeader.png) no-repeat;line-height:40px;text-indent:10px;margin:0;overflow:hidden;}
#divMoreHotels h4 {float:left;clear:both;display:block;width:265px;color:#444;margin:20px 0 0;font-size:14px;}
#divMoreHotels a {display:block;width:265px;float:left;color:#0099ff;text-decoration:none;margin:2px 0;}
#divMoreHotels a:hover {text-decoration:underline;}
#divMoreHotels a.destination {width:50%;}


/* 12 Progress Bar */
#divProgressBar {position:absolute;top:0;left:0;width:650px;height:45px;padding:8px 5px 5px;z-index:1;}

#spComplete {position:absolute;top:15px;left:5px;display:block;z-index:3;}
#spEmpty {position:absolute;top:15px;right:5px;display:block;z-index:2}

/* Hotel */
#divProgressBar.Hotel_PropertyResults #spComplete {width:90px;}
#divProgressBar.Hotel_BookingSummary #spComplete {width:260px;}
#divProgressBar.Hotel_Payment #spComplete {width:420px;}
#divProgressBar.Hotel_Confirmation #spComplete {width:650px;}

#divProgressBar div.Hotel {position:relative;float:left;width:25%;text-align:center;z-index:5;}

/* Flight Plus Hotel */
#divProgressBar.FlightPlusHotel_FlightResults #spComplete {width:70px;}
#divProgressBar.FlightPlusHotel_PropertyResults #spComplete {width:200px;}
#divProgressBar.FlightPlusHotel_BookingSummary #spComplete {width:310px;}
#divProgressBar.FlightPlusHotel_Payment #spComplete {width:440px;}
#divProgressBar.FlightPlusHotel_Confirmation #spComplete {width:650px;}

#divProgressBar div.FlightPlusHotel {position:relative;float:left;width:20%;text-align:center;z-index:5;}

/* Flight Only */
#divProgressBar.Flight_FlightResults #spComplete {width:90px;}
#divProgressBar.Flight_BookingSummary #spComplete {width:260px;}
#divProgressBar.Flight_Payment #spComplete {width:420px;}
#divProgressBar.Flight_Confirmation #spComplete {width:650px;}

#divProgressBar div.Flight {position:relative;float:left;width:25%;text-align:center;z-index:5;}


/* Cruise */
#divProgressBar.Cruise_CruiseResults #spComplete {width:90px;}
#divProgressBar.Cruise_BookingSummary #spComplete {width:260px;}
#divProgressBar.Cruise_Payment #spComplete {width:420px;}
#divProgressBar.Cruise_Confirmation #spComplete {width:650px;}

#divProgressBar div.Cruise {position:relative;float:left;width:25%;text-align:center;z-index:5;}



/* Nodes */
span.progressBar_nodePrevious {display:block;text-align:center;color:#fff;padding:2px 0 0;margin:0 auto;}
span.progressBar_nodePreviousText {position:relative;top:5px;color:#aaa;}

span.progressBar_nodeCurrent {display:block;text-align:center;color:#fff;padding:2px 0 0;margin:0 auto;}
span.progressBar_nodeCurrentText {color:#333;}

span.progressBar_nodeEmpty {display:block;text-align:center;color:#777;padding:2px 0 0;margin:0 auto;}
span.progressBar_nodeEmptyText {position:relative;top:5px;color:#aaa;}



/* 13 Sprite */
.sprite {background-image:url(/images/sprite.png);background-repeat:no-repeat;}

/* buttons */
.button_large { background-position: 0 0; width: 160px; height: 42px; } 
.button_medium { background-position: 0 -47px; width: 122px; height: 42px; } 
.button_orange { background-position: 0 -94px; width: 102px; height: 40px; } 
.button_search { background-position: 0 -139px; width: 48px; height: 37px; } 
.button_small { background-position: 0 -181px; width: 84px; height: 40px; }

/* headers */
.header_EmailUs{ background-position: 0 -226px; width: 285px; height: 40px; } 
.header_PayDeposit{ background-position: 0 -271px; width: 660px; height: 40px; } 
.header_bookingSummary{ background-position: 0 -316px; width: 285px; height: 40px; } 
.header_cardHolderDetails{ background-position: 0 -361px; width: 660px; height: 40px; } 
.header_confirmPayment{ background-position: 0 -406px; width: 660px; height: 40px; } 
.header_flightFilter{ background-position: 0 -451px; width: 285px; height: 40px; } 
.header_hotelFilter{ background-position: 0 -496px; width: 285px; height: 40px; } 
.header_hotelRequests{ background-position: 0 -541px; width: 660px; height: 40px; } 
.header_latestSearches{ background-position: 0 -586px; width: 660px; height: 40px; } 
.header_leadGuestDetails{ background-position: 0 -631px; width: 660px; height: 40px; } 
.header_passengerDetails{ background-position: 0 -676px; width: 660px; height: 40px; } 
.header_paymentDetails{ background-position: 0 -721px; width: 660px; height: 40px; } 
.header_paymentOptions{ background-position: 0 -766px; width: 285px; height: 40px; } 
.header_paymentSummary{ background-position: 0 -811px; width: 660px; height: 40px; } 
.header_promotionCode{ background-position: 0 -856px; width: 660px; height: 40px; } 
.header_property{ background-position: 0 -901px; width: 660px; height: 40px; } 
.header_satisfaction{ background-position: 0 -946px; width: 285px; height: 40px; } 
.header_search{ background-position: 0 -991px; width: 285px; height: 40px; } 
.header_telNumber{ background-position: 0 -1036px; height: 32px; } /* Remove Width */
.header_termsAndConditions{ background-position: 0 -1073px; width: 660px; height: 40px; } 
.header_thankYou{ background-position: 0 -1118px; width: 285px; height: 40px; } 
.header_topDestinations{ background-position: 0 -1163px; width: 285px; height: 40px; } 
.header_weather{ background-position: 0 -1208px; width: 285px; height: 40px; } 
.header_yourDetails{ background-position: 0 -1253px; width: 660px; height: 40px; } 
.header_yourReservation{ background-position: 0 -1298px; width: 660px; height: 40px; } 

/* tabs */
.home_tab { background-position: 0 -1343px; width: 128px; height: 36px; } 
.home_tab_selected { background-position: 0 -1384px; width: 128px; height: 36px; } 

/* icons */
.icon_creditCards { background-position: 0 -1425px; width: 257px; height: 22px; } 
.icon_creditCards_Large { background-position: 0 -1452px; height: 58px; } /* remove Width */
.icon_tick { background-position: 0 -1515px; height: 21px; } /* remove width */


/* logos */
.logo_abta { background-position: 0 -1541px; width: 68px; height: 30px; } 
.logo_expressBookers { background-position: 0 -1576px; width: 363px; height: 55px; } 
.logo_sfc { background-position: 0 -1636px; width: 22px; height: 30px; } 


/* nav bar */
.nav_contactUs { background-position: 0 -1671px; width: 99px; height: 40px; } 
.nav_contactUs:hover { background-position: 0 -1716px; width: 99px; height: 40px; } 
#divNav.ContactUs #aContactUs { background-position: 0 -1761px; width: 99px; height: 40px; }

.nav_destinations { background-position: 0 -1806px; width: 106px; height: 40px; } 
.nav_destinations:hover { background-position: 0 -1851px; width: 106px; height: 40px; } 
#divNav.Destinations #aDestinations { background-position: 0 -1896px; width: 106px; height: 40px; } 

.nav_home { background-position: 0 -1941px; width: 103px; height: 40px; } 
.nav_home:hover { background-position: 0 -1986px; width: 103px; height: 40px; } 
#divNav.Default #aHome { background-position: -665px 0; width: 103px; height: 40px; }

.nav_hotelDeals { background-position: -665px -45px; width: 102px; height: 40px; } 
.nav_hotelDeals:hover { background-position: -665px -90px; width: 102px; height: 40px; } 
#divNav.HotelDeals #aHotelDeals { background-position: -665px -135px; width: 102px; height: 40px; }

.nav_holidayOffers { background-position: -665px -180px; width: 117px; height: 40px; } 
.nav_holidayOffers:hover { background-position: -665px -225px; width: 117px; height: 40px; } 
#divNav.HolidayOffers #aHolidayOffers { background-position: -665px -270px; width: 117px; height: 40px; }

.nav_riverCruises { background-position: -665px -315px; width: 113px; height: 40px; } 
.nav_riverCruises:hover { background-position: -665px -360px; width: 113px; height: 40px; } 
#divNav.RiverCruises #aRiverCruises { background-position: -665px -405px; width: 113px; height: 40px; } 

.nav_tradeLogin { background-position: -665px -450px; width: 232px; height: 40px; } 
.nav_tradeLogin_hover { background-position: -665px -495px; width: 232px; height: 40px; } 
#divNav.LoggedIn #spTradeLogin { background-position: -665px -540px; width: 232px; height: 40px; } 

#divSearch #divSearchModes.FlightPlusHotel #aFlightPlusHotel { background-position: -665px -585px; height: 53px; } 
#divSearch #divSearchModes.Flight #aFlights { background-position: -665px -585px; height: 53px; } 
#divSearch #divSearchModes.Hotel #aHotels { background-position: -665px -585px; height: 53px; } 
#divSearch #divSearchModes.Cruise #aRiverCruises { background-position: -665px -585px; height: 53px; }
