﻿.container { overflow: hidden; }
.dimensions-hidden { display: none; }
.extras-hidden { display: none; }
.extras { clear: both; }
.legend { 	
	font-family: 'HelveticaLight', 'Arial Narrow', Arial, sans-serif;
	font-size: 20px;
	color: black;
	padding: 15px 0 5px 0;
	margin: 0px;
	width: auto;
	font-weight: bold;
	border-bottom: 1px dotted;
	margin-bottom: 10px;
 }
 
.field { overflow: hidden; }
#resJourneyDetails #paxDetails .c1 {float: left; }
#resJourneyDetails #paxDetails .c2 {float: left; }
#resJourneyDetails #paxDetails .c3 { width: 75px; float: left; }
#resJourneyDetails #paxDetails .c4 { width: 75px; float: left; }

#resJourneyDetails #extraDetails .c1 { width: 200px; float: left; }
#resJourneyDetails #extraDetails .c2 { width: 100px; float: left; }
#resJourneyDetails #extraDetails .c3 { width: 75px; float: left; }
#resJourneyDetails #extraDetails .c4 { width: 75px; float: left; }
#resJourneyDetails #extraDetails .cErrata { width: 250px; float: left; }

.buttonRow { float: left; width: 100%; padding-top: 20px; }

/* journey details */

#vehicleDetails .c1, #bookingDetails .c1 { width: auto; float: left; }
/*#vehicleDetails .hc1 {font-family: 'HelveticaLight', 'Arial Narrow', Arial, sans-serif; font-size: 20px; padding: 15px 0 5px 0; font-weight: bold; width: 125px; float: left; }*/
#vehicleDetails .hc2 { font: 13px 'HelveticaLight', Verdana, Arial, Helvetica, sans-serif; font-weight: normal; width: auto; }
#vehicleDetails .hc2 label { color: Red; } 
#vehicleDetails .c2, .depart .c2, .return .c2 { width: auto; /*float: left;*/ clear: left; padding-bottom: 10px; }
#vehicleDetails .c3 { width: auto; clear: left; }
#vehicleDetails .c4 { width: auto; float: left; clear: left; padding-bottom: 10px; }

#passenger_details label, #paxDetails label { width: 50px; }
.fromdateJQueryCtlNonAJAX, .fromdateJQueryCtlAJAX, .todateJQueryCtlNonAJAX, .todateJQueryCtlAJAX { clear: left; }

.img-help-button { position: relative; top: 1px; margin:0px 0px 0px 5px; width: 14px; height: 14px; }
.btnRight { float: right; text-align: right; }

.tli-help-pnl {
    display: block;
    border: 1px solid #106ba4;
    background-color: #F2FBFD;
    position: relative;
    top: 2px;
    color:#004b84;
    font-size:12px;
}

.tli-help-pnl-hidden 
{
    display: block;
    border: 0px;
    font-size:0.1em;
    height: 0px;
    visibility: hidden;
}

.journey, .table-container {	
		display: block;
		position: relative; /* abs wrap */			
		text-align: left;				
		width: 675px; /* 704px;*/
		padding: 8px;
		margin-bottom: 16px;
		margin-top: 2px;
		font-family: Arial, Helvetica, sans-serif;
		background: rgb(207, 230, 255);
		border-radius:10px;
		clear: both;
		float: left;
	}	

table.tickets { background: rgb(7, 77, 116);
border-top: 0;
margin: 0;
padding: 0;
width: 100%;
border: 1px solid rgb(179, 194, 255);
border-spacing: 0px;
	}
	
table.tickets tr th 
{ 
color: white;
padding: 10px; }
	
	#res_AvailabilityAndPrice table.tickets th label {
		position: relative; /* AP */
		display: block;
		padding-right: 18px; /* space for icon */
	}	
	
	#res_AvailabilityAndPrice table.tickets th label .ToolTipIcon {		
		position: absolute;
		top: 0;
		right: 0;
		background: url(/App_Themes/Langkawi/images/help.gif) no-repeat;
		width: 14px;
		height: 14px;
		overflow: hidden;
		text-indent: -9999em; /* hide text */
		cursor: help;
	}	
	
#res_AvailabilityAndPrice #extraDetails .c1, #res_AvailabilityAndPrice #insuranceDetails .c1 { width: 200px; float: left; }
#res_AvailabilityAndPrice #extraDetails .c2, #res_AvailabilityAndPrice #insuranceDetails .c2 { width: 100px; float: left; }
#res_AvailabilityAndPrice #extraDetails .c3, #res_AvailabilityAndPrice #insuranceDetails .c3 { width: 75px; float: left; }
#res_AvailabilityAndPrice #extraDetails .c4, #res_AvailabilityAndPrice #insuranceDetails .c4 { width: 75px; float: left; }
#res_AvailabilityAndPrice #extraDetails .cErrata { width: 250px; float: left; }
#res_AvailabilityAndPrice #extraDetails .SoldOut, #res_AvailabilityAndPrice #cabinDetails .SoldOut { text-align: center; font-weight: bold; }
#res_AvailabilityAndPrice #extraDetails .extras-hidden, #res_AvailabilityAndPrice #cabinDetails .cabins-hidden, #res_AvailabilityAndPrice #extraDetails .insurance-hidden { display: none; }
	
/*******************************************************************
*  BALLOON STYLES
*******************************************************************/

.colTicketRadio .tooltip  
{
    z-index:10;
    display:none; 
    padding:14px 20px; 
    margin-top:-30px; 
    margin-left:28px; 
    width:240px; 
    line-height:16px; 
}

#ferry-plus .ToolTipIcon
{
    font-weight: normal;
    color: white;
    vertical-align: middle;  
    font-size: 11px;  
}

.ticketPrice:hover .tooltip
{
    display:inline; position:absolute; color:#111; border:1px solid #DCA; background:#fffAF0;
}

/* we are placing it under tool tip because we don't want the bottom style to be displayed unless the top one is */
#ferry-plus .tooltip .ToolTipMiddle	
{
	background-image: url(images/Tooltip/balloontop.gif);	
	background-repeat: no-repeat;	
	width: 295px;	
	background-repeat: no-repeat;	
	padding: 20px 10px 0;	
	display: block;
}

#res_AvailabilityAndPrice table.tickets tr td 
{
background: #fff;
color: black;
border: 1px solid rgb(209, 209, 209);
padding: 8px; }

	#res_AvailabilityAndPrice .jouney-time-navigator span,
	#res_AvailabilityAndPrice .jouney-time-navigator a {
		display: block;
	}
	#res_AvailabilityAndPrice .jouney-time-navigator span {
		position: absolute;
		left: 8px;
		top: 8px;		
		/*width: 104px; */
		/*background: url(/App_Themes/Langkawi/OuterSite/images/buttons/date-button-btm.gif) no-repeat 0 100%;*/ /* 3px plus extra 100px height */
		font-size: 0.9em;
		padding-bottom: 3px;
	}
	
	#res_AvailabilityAndPrice .journey-header,
	#bookingList {	
		display: block;	
		/*background: #e6f7fa url(/App_Themes/Langkawi/OuterSite/images/booking-table-top.gif) no-repeat;*/
		padding: 8px 0 9px 0;
		margin: -8px -8px 3px 0px; /* -8px;*/
		width: 100%;
	}				
	
	/*#res_AvailabilityAndPrice .jouney-time-navigator span a {
		font-weight: bold;
		text-decoration: none;
		text-align: center;
		background: url(/App_Themes/Langkawi/OuterSite/images/buttons/date-button-top.gif) no-repeat 0 0;	
		padding: 6px 6px 3px 18px;		
	}*/
	#res_AvailabilityAndPrice .jouney-time-navigator span a {
		color: #7a9c1f;
	}
	#res_AvailabilityAndPrice .jouney-time-navigator span a:hover,
	#res_AvailabilityAndPrice .jouney-time-navigator span a:focus,
	#res_AvailabilityAndPrice .jouney-time-navigator span a:active {
		text-decoration: underline;
	}	
	#res_AvailabilityAndPrice .jouney-time-navigator span.btnEarlierJourney { /* 'next.. */
		left: auto;
		right: 8px;	
	}
	.journey .journey-header .legend {
	/* chrome styles */
		display: block;
		width: 280px; /* override */	
		padding: 0;
    font-size: 1.3em; /* override */	
		text-align: center;	
		margin: 3px 220px 0; /* override */			
	}		


/* start order stage 3 */
#res_PaxVehDetails table th {background-color: #6b92bd; color: white; font-weight:bold; padding:5px 8px 5px 8px; vertical-align:top;white-space:nowrap;text-align: left;}
#res_PaxVehDetails table th Label {padding-top: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; }
#res_PaxVehDetails table th input {padding-top: 0px; padding-bottom: 0px; margin: 0px; padding-left: 0px; padding-right: 0px; }
#res_PaxVehDetails table td {padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; }
#res_PaxVehDetails table td select {margin: 0px 0px;}
#res_PaxVehDetails table td input {margin: 0px 0px;}
#res_PaxVehDetails .colType { padding-right: 5px; width: 120px; min-width: 120px; max-width: 120px; }
#res_PaxVehDetails .colMake { width: 160px; min-width: 160px; max-width: 160px; } 
#res_PaxVehDetails .colModel { width: 160px; min-width: 160px; max-width: 160px; }
#res_PaxVehDetails .colReg { width: 160px; min-width: 160px; max-width: 160px; }
#res_PaxVehDetails .colRef, #res_PaxVehDetails .colPO, #res_PaxVehDetails .colPhone, #res_PaxVehDetails .colEmail { width: 140px; float: left; padding-top: 0.1px; }
#res_PaxVehDetails .c1 { padding-right: 5px;}
#res_PaxVehDetails .c3 { padding-left: 5px; float: none; width: 170px }
#res_PaxVehDetails .c4 { float: none; width: 170px }
#res_PaxVehDetails tr td { background-color: White; color: red; padding: 10px;}

#res_PaxVehDetails .typeDesc,
#res_PaxVehDetails .colType span  { /* was .type */
		display: block;
		text-align: right;
		font-weight: bold;
		padding-left: 7px;
        padding-top: 3px;
        color: Black;				
	}					
#res_PaxVehDetails .colType div  {
        width: 120px; min-width: 120px; max-width: 120px; word-break: break-all; word-wrap: break-word;				
	}	
#res_PaxVehDetails .colMake div,
#res_PaxVehDetails .colMake select  {
        width: 160px; min-width: 160px; max-width: 160px;				
	}					
#res_PaxVehDetails .colModel div  {
        width: 160px; min-width: 160px; max-width: 160px;
    }	
#res_PaxVehDetails .colReg div  {
        width: 160px; min-width: 160px; max-width: 160px;				
	}									
/* end order stage 3 */


#please-wait-msg p
{
    font-weight: bold;
    color: #a7001d;
}
#please-wait-msg
{
    font-weight: bold;
    color: #a7001d;
    border: 1px solid #a7001d;
    padding: 10px 30px 20px 30px;
    margin: 20px 30px 0px 20px;
    text-align: center;
    display: none;
    clear: both;
}

#loginBox label
{
    width: auto;
}

#loginBox .c2
{
    float: none;
    width: auto;
}

#res_CustomerDetails .row
{
    margin-left: 0;
}
/* stop payment panel clearing if errors */
#res_CustomerDetails #mainpayment .container 
{
 overflow: visible;
}

#loginBox .btnRow
{
    clear: left;
}

#forgotPassword .c1, #customerLogin .c1
{
    clear: left;
    width: auto;
}

#res_CustomerDetails #loginBox .c2, #res_CustomerDetails #newCustomers .c2, #forgotPassword .c2, #customerLogin .c2
{
    clear: left;
    width: auto;
}

#res_CustomerDetails .row label, #bookingDetails .row label, .smallprint .row label
{
    width: auto;
}

#res_CustomerDetails .TotalCost
{
	/*color: #00abcd;*/
	font-weight: bold;
	padding-top: 0;
	margin-top: 0;	
}

#res_CustomerDetails #newCustomers input[type='text'] { width: 200px; }

#payments .c1img {float: left; width: 180px; }
#res_CustomerDetails #payments .c2 { clear: left; width: auto; }
#paymentControl { clear: left; }
#paymentControl .c1 { width: auto; }

/* Agent Login */
#agentLogin .c3 { clear: left; width: auto; float: left; }
#agentLogin #loginBox .c2
{
    clear: left;
    float: left;
    width: auto;
}

/* */

/* Agent Bookings */
/* number of agent columns differs so size must change */
#agentDetails #bookingList .c { padding: 0px 5px 0px 5px; }
#agentDetails #bookingList .c1 { width: 90px; font-weight: bold; float: left; }
#agentDetails #bookingList .c2 { width: 122px; float: left; }
#agentDetails #bookingList .c3 { width: 80px; text-align: left; float: left; }
#agentDetails #bookingList .c4 { width: 60px; text-align: right; float: left; }
#agentDetails #bookingList .c5 { width: 150px; text-align: center; float: left; }
#agentDetails #bookingList .c6 { width: 65px; text-align: center; float: left; }
#agentDetails #bookingList .c7 { width: 40px; text-align: center; float: left; }
/**/

/* Booking details */
#bookingDetails #sessionBasket, .smallprint { overflow: hidden; }
/**/

/* Customer login */
#customerLogin .c3 { width: auto; clear: left; }
/**/

/* Customer details */
#customerDetails #newCustomers .c1 { width: auto; clear: left; }
#customerDetails #newCustomers .c2 { width: auto; clear: left; }
#customerDetails #newCustomers .c3 { width: auto; clear: left; }
#customerDetails .row label { width: auto; }
/**/

/* Customer bookings */
#customerDetails #bookingList .c { padding: 0px 5px 0px 5px; }
#customerDetails #bookingList .c1 { width: 90px; font-weight: bold; float: left; }
#customerDetails #bookingList .c2 { width: 140px; float: left; }
#customerDetails #bookingList .c3 { width: 80px; text-align: left; float: left; }
#customerDetails #bookingList .c4 { width: 150px; text-align: right; float: left; }
#customerDetails #bookingList .c5 { width: 150px; text-align: center; float: left; }
/**/

/* MuliVoucher */
#ferry-plus #multiVoucherList { width: 680px; padding-top: 10px; }
#ferry-plus #multiVoucherList .row, #ferry-plus #multiVoucherList .alt { display: block; padding: 3px; margin: 1px 0px 1px 0px; border: 0px solid #106ba4; background-color: #f3faff; }
#ferry-plus #multiVoucherList .alt { background-color: #e3eaef; }
#ferry-plus #multiVoucherList .head { margin-bottom: 1px; font-weight: bold; border-bottom: 1px solid #00529B; background-color: #fff;}
#ferry-plus #multiVoucherList .c { padding: 0px 5px 0px 5px; }
#ferry-plus #multiVoucherList .c1 { width: 30px; text-align: right; }
#ferry-plus #multiVoucherList .c2 { width: 300px; text-align: center;}
#ferry-plus #multiVoucherList .c3 { width: 150px; text-align: center; }
#ferry-plus #multiVoucherList .c4 { width: 50px; text-align: center; }
#ferry-plus #multiVoucherList .c5 { width: 100px; text-align: center; }

.ErrorScrollBox { 
color: #D63301 !important;
background-color: #FFCCBA;
background-image: url('images/error.png');
border: 1px solid;
margin: 10px 0px;
padding: 15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}


.ErrorScrollBox ul {color: Red; }

.flderror { clear: left; display: block; color: Red; padding: 0px 0px 0px 20px; }

#res_PaxVehDetails .c2 { width: auto; clear: left; }

/*******************************************************************
*  Help Ctrls
*******************************************************************/

.tli-help-ctl
{
    display: inline;
}

.tli-help-pnl {
    display: block;
    border: 1px solid #106ba4;
    background-color: #F2FBFD;
    position: relative;
    top: 2px;
    color:#004b84;
    font-size:12px;
	border-radius: 3px;
}

.tli-help-pnl-hidden 
{
    display: block;
    border: 0px;
    font-size:0.1em;
    height: 0px;
    visibility: hidden;
}

.tli-help-content {
    padding: 5px;   
}

.tli-help-close 
{ display: block;
  margin: 1em 0em 0em 0em;
  text-align: right;
}


#resJourneyDetails label, #resJourneyDetails p
{
color: black;
}

/*ReturnJourneyTime & OutJourneyTime*/

#ReturnJourneyTime, #OutJourneyTime
{
font-size: 11px;
text-align: center;
margin-top: 5px;
color: red;
font-weight: bold;
background-color: #BAD8FF;
}

/* Vehicle */
#vehicleDetails, #paxDetails
{
border-radius: 5px;
margin-top: 30px;
}


/* pop up*/

.tli-help-content
{
font-family: arial;
}

/* Depart*/
.depart
{
border-radius: 5px;
margin-right: 40px;
}


/* Return*/
.return
{
}

.inline-set, .vehicleDetails .field 
{
color:black
}

/*Sidebar Info*/

.sidebar-info
{
margin: 20px 0px;
}

#resJourneyDetails .flderror, #agentLogin .flderror, #customerLogin .flderror
{
color: red;
background-color: #FFCCBA;
background-image: url('images/error.png');
border: 1px solid;
margin: 10px 0px;
padding: 15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
float: left;
}

#res_AvailabilityAndPrice, #res_PaxVehDetails, #res_CustomerDetails
{
float: left;
background: rgb(207, 230, 255);
border-radius: 5px;
padding: 10px 30px 30px 30px;
-webkit-box-shadow: 0 15px 20px -15px rgba(0,0,0,0.8);
-moz-box-shadow: 0 15px 20px -15px rgba(0,0,0,0.8);
box-shadow: 0 15px 20px -15px rgba(0,0,0,0.8);
border: 1px solid #6b92bd
}

.journey-header .legend
{
border-bottom: 0px;
}

#ctl00_ContentPlaceHolder1_tliHavePromoCode_lblTranslatedItem
{
float: left;
margin: 4px;
}

#payments .chk-left
{
padding: 20px 0px;
}

#ctl00_ContentPlaceHolderSideBar_SummaryBasket_details_outward h6 img
{
height: 61px !important;
position: absolute;
width: 241px !important;
top: 0px;
left: -17px;
padding-top: 10px;
}

.errata-message-summary, .errata-message-summary-show
{
    color: Red;
}