@charset 'utf-8';

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
* Filename: tabs.css
* Version: 1.0 (2009-07-22)
* Author: Rob Masefield
* Copyright (C) 2009 Cathay Pacific Airways

== STRUCTURE: ====================================================

* Page width: 960 px
* Number of columns: 2
* Primary Colours: #237781 (Lt Green), #004A53 (Dk Green), 
                   #CD4544 (Red), #444444 (Grey)

==================================================================
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */


/* TABS
==========================================*/

ul.tabs 							{ margin: 0; padding: 0; float: left; list-style: none; height: 32px; border-bottom: 1px solid #CCC; 
									  border-left: 1px solid #CCC; width: 100%; }
ul.tabs li 							{ float: left; margin: 0; padding: 0; height: 31px; line-height: 31px; border: 1px solid #CCC; border-left: none; 
									  margin-bottom: -1px; background: #F2F2F2; overflow: hidden; position: relative; }
ul.tabs li a 						{ text-decoration: none; color: #444; display: block; font-size: 12px; padding: 0 20px; border: 1px solid #FFF; outline: none; }
ul.tabs li a:hover 					{ background: #DDD; }	

html ul.tabs li.active, html ul.tabs li.active a:hover  
									{ background: #FFF; border-bottom: 1px solid #FFF; font-weight: bold; }

.tab_container 						{ border: 1px solid #CCC; border-top: none; clear: both; float: left;  width: 100%; background: #FFF;
									  -moz-border-radius-bottomright: 8px; -khtml-border-radius-bottomright: 8px; -webkit-border-bottom-right-radius: 8px;
									  -moz-border-radius-bottomleft: 8px; -khtml-border-radius-bottomleft: 8px; -webkit-border-bottom-left-radius: 8px; }

.tab_content 						{ padding: 20px; font-size: 11px; }

.itineraryLeft						{ float: left; width: 48px; margin-right: 15px; }
.itineraryRight						{ float: left; width: 560px; }

.accommoLeftContainer				{ float: left; width: 150px; margin: 15px 0 20px 0; }
.accommoRightContainer				{ float: right; width: 465px; margin: 15px 0 40px 0; }
.accommoAmenities					{ float: left; width: 215px; margin: 10px 15px 0 0; }
	.accommoAmenities ul li			{ background: none; padding: 2px 0; border-bottom: none; list-style: square; list-style-position: inside; }
	
.extensionLeftContainer				{ float: left; width: 150px; margin: 15px 0 20px 0; }
.extensionRightContainer			{ float: right; width: 435px; margin: 15px 0 20px 0; }


/* EFFECTS
==========================================*/

/* Styles for the Tour Highlights accordion */
.highlightDesc						{ cursor: hand; cursor: pointer; margin: 10px 0 0 0; background: #F2F2F2; padding: 10px; }
	.highlightDesc h3				{ font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #666; font-weight: bold; margin: 0; float: left; }
	.highlightDesc p				{ float: left; }
	.vip							{ background: #F2F2F2 url(../_img/img_vipRibbon.gif) top right no-repeat; }
.highlightAnswer					{ padding: 15px 10px 10px 10px; background: #f9f9f9 url(../_img/bg_highlightBoxShdwTop.gif) top repeat-x; border-bottom: 1px solid #CCCCCC; }
	.highlightAnswerText			{ float: left; width: 510px; }
	.highlightAnswerTextLong		{ float: left; }
.revealIcon							{ float: left; margin-right: 15px; }
.revealIconRight					{ float: right; margin-left: 15px; }

/* Styles for the Accommodation accordion */
.accommoDesc						{ cursor: hand; cursor: pointer; }
.accommoMore						{ padding: 0; }
.revealIconSm						{ float: left; margin-right: 5px; padding-top: 5px; }

.openlanguage						{ color: #444444; }
.closedlanguage						{ color: #444444; }

/* Styles for the Extensions accordion */
.extensionDesc						{ cursor: hand; cursor: pointer; margin: 10px 0 0 0; background: #F2F2F2; padding: 10px; }
	.extensionDesc h3				{ font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #666; font-weight: bold; margin: 0; float: left; }
	.extensionDesc p				{ float: left; }
.extensionAnswer					{ padding: 10px 15px 0 15px; background: #f9f9f9 url(../_img/bg_highlightBoxShdwTop.gif) top repeat-x; border-bottom: 1px solid #CCCCCC; }

/* Styles for the Tour Highlights tool tips */
.tooltipSpan						{ font-weight: bold; color: #237781; cursor: pointer; }
.tooltipThumbnail					{ float: left; margin: 0 15px 10px 0; }
a.close								{ float: right; }