﻿/*-------------------------------
Basic Style Sheet (for version 4 browser)

verion 1.0
author: Leung@eC
---------------------------------*/

/* =Typography
---------------------------------*/
body {
	font-size: 75%;
}

a:hover {
	text-decoration: none
}

* {
	font-family: Arial, Helvetica, sans-serif;
}

.googleSearchBox {
	width:170px !important;
}

#headerNav, #headerNav a:link, #headerNav a:visited {
	letter-spacing: 0px;
	font-size: 9pt;
	text-decoration: none;
}

#headerNav a:hover {
	letter-spacing: 0px;
	text-decoration: underline;
}

#footer, #footer a:link, #footer a:visited {
	letter-spacing: 0px;
	text-decoration: none;
	font-size: 9pt;
	line-height: 18pt;
}

#footer a:hover {
	letter-spacing: 0px;
	text-decoration: underline;
}

#ic1ParagraphContentHeading,
#ic2ParagraphContentHeading,
#ic3ParagraphContentHeading,
#ic4ParagraphContentHeading,
#ic5ParagraphContentHeading,
#livingCultureContentHeading,
#ic5DownloadParagraphTitle,
#ic7DownloadParagraphTitle,
#infoHeading {
	/*font-size: 9pt;*/
	font-size: 1em;
	font-weight: bold;
}

#headerNavRight {
	letter-spacing: 0px;
	padding-top: 0.6em;
}

#ic1ParagraphContentDetails,
#ic2ParagraphContentDetails,
#ic3ParagraphContentDetails,
#ic4ParagraphContentDetails,
#ic5ParagraphContentDetails,
#livingCultureContentDetails,
#virtualTour
#infoDetails {
	/*font-size: 9pt;*/
	font-size: 1em;
	line-height: 16pt;
	word-spacing: 1pt;
}

#ic5DownloadParagraphContent {
	font-size: 1em;
	line-height: 13pt;
	word-spacing: 1pt;
}

#testimonialContentDetails, #tourDetailContentDetails, #getThereDetailContentDetails {
	font-size: 1em;
	line-height: 15pt;
	word-spacing: 1pt;
}

#ic1ParagraphImgCaption,
#ic2ParagraphImgCaption,
#ic3ParagraphImgCaption,
#ic4ParagraphImgCaption,
#ic5ParagraphImgCaption,
#livingCultureImgCaption {
	font-size: 8pt;
}

#testimonialContentHeading {
	font-size: 18pt;
	font-weight: bold;
}

#tourDetailContentHeading, #getThereDetailContentHeading {
	font-size: 18pt;
	font-weight: bold;
}

#tourDetailTitle, #getThereDetailTitle {
	font-weight: bold;
}

#ii1ParagraphContentHeading,
#ii2ParagraphContentHeading {
	font-size: 1em;	
	line-height: 16pt;
	font-weight: bold;
}

#ii1ParagraphContentDetails,
#ii2ParagraphContentDetails {
	font-size: 1em;
	line-height: 16pt;
	word-spacing: 1pt;
}

#ii1ParagraphImg a,
#ii2ParagraphImg a,
#ii1ParagraphContentDetails a,
#ii2ParagraphContentDetails a {
	text-decoration: none;
}

#ii1ParagraphImg a:hover,
#ii2ParagraphImg a:hover,
#ii1ParagraphContentDetails a:hover,
#ii2ParagraphContentDetails a:hover {
	text-decoration: underline;
}

#ii1ParagraphImgCaption {
	font-size: 1em;	
	font-weight: bold;
	/* Fix height of two lines */
	line-height: 1.2em;
	height: 2.5em;
	overflow: hidden;	
}

#ii2ParagraphImgCaption {
	font-size: 1em;	
	font-weight: bold;
}

#ii1ParagraphImgDescription {
	font-size: 1em;
	/*text-align: left;*/
}

#ii2ParagraphImgDescription {
	font-size: 1em;
	line-height: 16pt;
	text-align: justify;
}

#ii1ParagraphImgDescriptionCenter {
	width: 155px;
	text-align: center;
	margin-bottom: 7px;
	/* Fix height of two lines */
	line-height: 1.2em;
	height: 2.4em;
	overflow: hidden;
}

#ii1ParagraphImgDescriptionLeft {
	float: left;
}

#ii1ParagraphImgDescriptionRight {
	float: right;
}

.innerContentTable {
	border-collapse: collapse;
	/*border-spacing: 1px;*/
	margin-left: 1px;/*No idea why FF doesn't show left border unless give it a space, table width = 505 - 1*/
	/*background-color: #D4D0C8;*/
}

.innerContentTable td{
	border: 1px solid #D4D0C8;
	background-color: #FFF;
	padding: 4px;
}

/*
.innerContentTable {
	border-collapse: seperate;
	border-spacing: 1px;//IE 6 does not support this!
	background-color: #D4D0C8;
}

.innerContentTable td{
	background-color: #FFF;
	padding: 4px;
}
*/
/* =Color
---------------------------------*/
#headerNav, #headerNav a:link, #headerNav a:visited, #headerNav a:hover {
	color: #555;
}

#footer, #footer a:link, #footer a:visited, #footer a:hover {
	color: #555;
}

#ic1ParagraphContentDetails,
#ic2ParagraphContentDetails,
#ic3ParagraphContentDetails,
#ic4ParagraphContentDetails,
#ic5ParagraphContentDetails,
#testimonialContentDetails,
#tourDetailContentDetails,
#getThereDetailContentDetails,
#ii1ParagraphContentDetails,
#ii1ParagraphImgDescription,
#ii2ParagraphContentDetails,
#ii2ParagraphImgDescription,
#quickTimeDetail,
#infoDetails,
#ic5DownloadParagraphContent {
	color: #404041;
}

#ic1ParagraphImgCaption,
#ic2ParagraphImgCaption,
#ic3ParagraphImgCaption,
#ic4ParagraphImgCaption,
#ic5ParagraphImgCaption {
	/*color: #404041;*/
	color: #666666;
}

#livingCultureImgCaption,
#livingCultureContentDetails,
#livingCultureContentHeading {
	color: #ffffff;
}

#testimonial {
	background-color: #eee;
}

#tourDetailContainer,
#getThereDetailContainer {
	background-color: #eee;
}

/* =Layout
---------------------------------*/
body {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
}

#wrapper {
	width: 896px;
	min-width: 896px;
	margin:0 auto;
}

#topLeftCornorBox {
	top: 0px;
	/*
	width: 82px;
	min-width: 82px;
	*/
	width: 72px;
	min-width: 72px;
	height: 27px;
	float: left;
	position: relative;
	background-color: #fff;
	display:none;
}

#mainCol {
	/*float: left;*/
	position: relative;
	background-color: #fff;
}

#header {
	width:896px;
	height:75px;
}

#logo {
	float: left;
	postition: relative;
	margin-right: 18px;
}

#headerNav {
	width: 685px;
	float: left;
	text-decoration: none;
	padding-top: 41px;
}

#subWrapper {
	width: 882px;
	background-image: url(/thai/images/main-nav-vert-dotline.gif);
	background-repeat: repeat-y;
	background-position: 168px 0px;
	overflow: hidden;
	clear:both;
}

#mainNavCol {
	float: left;
	position: relative;
	width: 168px;
	margin-right: 18px;	
	min-height:0;
	/*
	padding-bottom: 32767px;
	margin-bottom: -32767px;
	*/
}

#mainContentCol{
	min-height:0;
	float: right;
	/*
	position: relative;
	overflow: hidden;
	*/
	/*
	background-image: url(/thai/images/main-nav-vert-dotline-long.gif);
	background-repeat: no-repeat;
	background-position: 520px 193px;	
	*/
	/*IE only*/
	_padding-bottom: 32767px;
	_margin-bottom: -32767px;
	/*
	padding-bottom: 1000px;
	margin-bottom: -1000px;
	*/	
}

#pageTop {
	width: 695px;
	height: 158px;
}

#mainContentWrapper {
	background-image: url(/thai/images/main-nav-vert-dotline.gif);
	background-repeat: repeat-y;
	background-position: 520px 0px;
	width: 695px;	
	float: left;
	margin-top: 35px;
	min-height:0;
	height: 1%;
	/*
	display: block;
	position: relative;
	*/
	/*IE only*/	
	_padding-bottom: 32767px;
	_margin-bottom: -32767px;
	
}

#mainContent {
	float: left;
	position: relative;
	width: 505px;
	margin-right: 15px;
}

#recommendation {
	padding-bottom: 20px;
}

#printUtil {
	/* width: 160px;*/
	display: none;
	/*margin-bottom: 30px;*/
}

#promoBanner {
	width: 160px;
	/*padding-bottom: 20px;*/
}

#promotionArea {
	float: right;
	position: relative;
	width: 160px;
	/*margin-left: 15px;*/
}

#imagebannerobject,
#flashbannerobject {
	padding-bottom: 20px;
	display: block;
	clear: both;
}

#internalAds {
	padding-left: 25px;
	padding-top: 25px;
	/*display: none;*/
}
#externalAds {
	padding-left: 13px;
	padding-top: 10px;
}

#externalAds img {
	width:140px;
	height:80px;
}

#adItem {
	width:160px;
	height:65px;
}

#flashInternalAdobject,
#flashExternalAdobject {
	/*padding-left: 10px;*/
	width:140px;
	height:80px;
}
#footer {
	/*
	margin-left: 187px;
	width: 505px;
	background-image: url(/thai/images/hongkong-logo.jpg);
	background-position: right top;
	background-repeat: no-repeat;
	display: none;
	*/
	width: 685px;
	display: block;
	clear: both;
	/*margin-top: 50px;*/
	padding-top: 50px;
	padding-bottom: 30px;
	margin-left: 168px;
	padding-left: 18px;
	position: relative;
	z-index: 1000;
	background:transparent url(/thai/images/main-nav-vert-dotline.gif) repeat-y 539px;
    /* IE Only */
    _background: none;
}

/*
#footerRss {
	background-image: url(/thai/images/rss-icon-12.jpg);
	background-position: top left;
	background-repeat: no-repeat;
	padding-left: 15px;
}
*/

#rssImgFix {
	vertical-align: middle;
	display: inline-block;
	height: 18pt;
}

#pageBanner {
	margin-bottom: 20px;
}

#ic1ParagraphContentDetails {
	margin-bottom: 20px;
}

#ic2ParagraphWithImg {
	width: 505px;
	margin-bottom: 20px;
}

#ic2ParagraphWithoutImg {
	width: 505px;
	margin-bottom: 20px;
}

#ic2ParagraphContent {
	width: 300px;
	float: left;
	position: relative;
}

#ic2ParagraphImgs {
	width: 190px;
	float: right;
	position: relative;
}

#ic2ParagraphContentHeading {
}

#ic2ParagraphContentDetails {
	width: 300px;
}

#ic2ParagraphImg {
	width: 190px;
}

#ic2ParagraphImgCaption {
	width: 190px;
	margin-bottom: 10px;
}

#ic3Paragraph {
	width: 505px;
	margin-bottom: 20px;
}

#ic3ParagraphContent {
}

#ic3ParagraphContentHeading {
}

#ic3ParagraphImgs {
	width: 190px;
	float: right;
	position: relative;
}

#ic3ParagraphImg {
	margin-left: 5px;
}

#ic3ParagraphImgCaption {
	margin-left: 5px;
	margin-bottom: 5px;
}

/*
.ic4ParagraphContentHeadingNoWrap,
.ic4ParagraphContentDetailsNoWrap {
	float: left;
	width: 310px;
}
*/

.ic4ParagraphContentDetailsNoWrap {
	/*margin-left: 15px;*/
}

.ic4ParagraphContentDetailsNoWrap ul {
	list-style-position: inside;
	/*padding-left: 30px;*/
	/*text-indent: -1em;*/
}

.ic4ParagraphContentDetailsNoWrap li {
	/*text-indent: -10px;*/
}

#ic4ParagraphImgs {	
	width: 190px;
	/*width: 250px;*/
	float: right;
	position: relative;
}

#ic4ParagraphImg {
	margin-left: 5px;
}

#ic4ParagraphImgCaption {
	margin-left: 5px;
	margin-bottom: 5px;
}

#ic5DownloadParagraph {
	width: 483px;
	/*margin-bottom: 20px; Clients said too much space*/
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 6px;
	padding-right: 16px;
	float: left;
	clear: both;
}

#ic5DownloadParagraphImage {
	width: 84px;
	float: left;
}

#ic5DownloadParagraphContent {
	width: 399px;
	float: left;
}

#ic7DownloadParagraph {
	width: 252px;
	/*margin-bottom: 40px;*/
	margin-bottom: 20px;
	float: left;
}
/*
#ic7DownloadParagraphImage {
	width: 90px;
	float: left;
}

#ic7DownloadParagraphContent {
	width: 160px;
	float: left;
}
*/
/*
#ic4ParagraphWithImg {
	width: 505px;
	margin-bottom: 20px;
}

#ic4ParagraphWithoutImg {
	margin-bottom: 20px;
}

#ic4ParagraphContent {
	width: 300px;
	float: right;
	position: relative;
}

#ic4ParagraphImgs {
	width: 190px;
	float: left;
	position: relative;
}

#ic4ParagraphContentHeading {
}

#ic4ParagraphContentDetails {
	width: 300px;
}

#ic4ParagraphImg {
	width: 190px;
}

#ic4ParagraphImgCaption {
	width: 190px;
	margin-bottom: 10px;
}
*/
/*
#ic5Paragraph {
	width: 505px;
	margin-bottom: 20px;
}

#ic5ParagraphContent {
}

#ic5ParagraphContentHeading {
}

#ic5ParagraphImgs {
	width: 190px;
	float: left;
	position: relative;
}

#ic5ParagraphImg {
}
*/
/*
#ic5ParagraphImgCaption {
	margin-bottom: 5px;
}
*/
#livingCultureWithImg {
	float: left;
	width: 485px;
	margin-bottom: 20px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 10px;
	padding-right: 10px;
}

#livingCultureWithoutImg {
	width: 505px;
	margin-bottom: 20px;
}

#livingCultureContent {
	width: 285px;
	float: right;
	position: relative;
}

#livingCultureImgs {
	width: 190px;
	float: left;
	position: relative;
	padding-right: 10px;
}

#livingCultureContentHeading {
	padding-bottom: 10px;
}

#livingCultureContentDetails {
	width: 285px;
}

#livingCultureImg {
	width: 190px;
}

#livingCultureImgCaption {
	width: 190px;
	margin-bottom: 10px;
}

#testimonial, #tourDetailContainer, #getThereDetailContainer {
	float: left;
	width: 485px;
	margin-bottom: 20px;
	padding: 10px;
}

#tourDetailContentHeading, #getThereDetailContentHeading {
	line-height: 1;
}

#tourDetailRow, #getThereDetailRow {
	margin-bottom: 5px;
	clear: both;
}

#tourDetailTitle, #getThereDetailTitle {
	float: left;
	width: 100px;/* plus #tourDetail's width plus margin = 485 */
}

#tourDetail {
	float: left;
	width: 375px;/* plus this margin plus #tourDetailTitle's width = 485 */
	margin-left: 10px;
}

#getThereDetail {
	float: left;
	/*width: 385px;*//* plus #getThereDetailTitle's width = 485 */
	/*width: 100%;*/
	width: 485px;
	overflow: hidden;
	text-overflow: ellipsis;
}

#ii1ParagraphImg {
	width: 160px;
	float: left;
	/*margin: 10px 0 10px 0;*/
	/*margin: 0 0 20pt 0;*/
	/*margin-bottom: 26px;*/
}

#ii2ParagraphImg {
	width: 505px;
}

#ii2ParagraphImgFile {
	margin-right: 12px;
	float: left;
	/*display: inline;
	position: relative;*/
	width: 160px;
	height: 130px;
}

#ii1ParagraphImgCaption {
	margin-top: 5px;
	margin-left: 2px;
	margin-right: 2px;
}

#ii2ParagraphImgCaption {	
	width: 330px;
	overflow: hidden;
	/*
	height: 1.5em;
	line-height: 1.5em;
	margin-top: 4px;
	*/
}

#ii1ParagraphImgDescription {
	margin-top: 5px;
	margin-left: 2px;
	margin-right: 2px;
}

#ii2ParagraphImgDescription {
	margin-top: 4px;
	width: 330px;
	overflow: hidden;
}

#ii2ParagraphSeperator {
	clear: both;
	height: 40px;
}

.ii1OpenParagraph,
.ii2OpenParagraph {
	clear: both;
	margin-bottom: 30px;
}

.ii1ClosureParagraph,
.ii2ClosureParagraph {
	clear: both;
	/*margin-top: 20px;*/
	padding-bottom: 30px;
}

#trip-planner-legend .legend {
	background-color:#BE1AD2;
}

#attractions-legend .legend {
	background-color:#53C5DF;
}

#shopping-legend .legend {
	background-color:#FE0D90;
}

#dottedLineHorizontal {
	background-image: url('/thai/images/grey-dotted-line-horizontal.gif');
	background-repeat: repeat-x;
	background-position: 0px 0px;
	/*width: 505px;*/
	height: 1px;
	overflow: hidden;
}

/* =Form
---------------------------------*/

/* =QuickTime movie http://realdev1.realise.com/rossa/rendertest/quicktime.html
---------------------------------*/
* html object.mov {
    display: none;
}

/* For sitmap page */
.sectionBox,
.sectionBox a {
	margin-bottom: 20px;
	text-decoration: none;
}

.legendBox a {
	font-family: Arial, Helvetica, sans-serif;
	color: #666666;
	font-size: 12px;	
	text-decoration: none;
}

/*
.sitemapLayer1 {
	overflow: hidden;
	display:block;
}
*/
.sitemapLayer1,
.sitemapLayer1 a {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	padding: 5px;
	color: #FFFFFF;
	font-weight: bold;
}

.sitemapLayer2,
.sitemapLayer2 a {
	font-family: Arial, Helvetica, sans-serif;
	color: #666666;
	font-size: 12px;
	padding-left: 10px;
}

.sitemapLayer3,
.sitemapLayer3 a {
	font-family: Arial, Helvetica, sans-serif;
	color: #666666;
	font-size: 11px;
	padding-right: 5px;
	margin-top: 0;
	margin-bottom: 0;
}

.sitemapLayer2,
.sitemapLayer3 {
	line-height: 1.6em;
}

#nav_text {	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
}

/*Plan Your trip*/
#trip-planner-legend .legend
{
	background-color: #BE1AD2;
}

#trip-planner-box
{
	border: 1px solid #BE1AD2;
}

#trip-planner-legend a:hover,
#trip-planner-box a:hover
{
	color: #BE1AD2;
	text-decoration: underline;
}

#trip-planner-title
{
	background-color: #BE1AD2;
}

/* About HKTB */
#about-hktb-legend .legend
{
	background-color: #042778;
}

#about-hktb-box
{
	border: 1px solid #042778;
}

#about-hktb-legend a:hover,
#about-hktb-box a:hover
{
	color: #042778;
	text-decoration: underline;
}

#about-hktb-title
{
	background-color: #042778;
}

/* Attractions */
#attractions-legend .legend
{
	background-color: #53C5DF;
}

#attractions-box
{
	border: 1px solid #53C5DF;
}

#attractions-legend a:hover,
#attractions-box a:hover
{
	color: #53C5DF;
	text-decoration: underline;
}

#attractions-title
{
	background-color: #53C5DF;
}

/* Dining */
#dining-legend .legend
{
	background-color: #FF6101;
}

#dining-box
{
	border: 1px solid #FF6101;
}

/*
#dining-legend a,
#dining-box a
{
	text-decoration: none;
}
*/

#dining-legend a:hover,
#dining-box a:hover
{
	color: #FF6101;
	text-decoration: underline;
}

#dining-title
{
	background-color: #FF6101;
}

/* Events */
#events-legend .legend
{
	background-color: #6604B9;
}

#events-box
{
	border: 1px solid #6604B9;
}

#events-legend a:hover,
#events-box a:hover
{
	color: #6604B9;
	text-decoration: underline;
}

#events-title
{
	background-color: #6604B9;
}

/* Interactive */
#interactive-legend .legend
{
	background-color: #00BDAC;
}

#interactive-box
{
	border: 1px solid #00BDAC;
}

#interactive-legend a:hover,
#interactive-box a:hover
{
	color: #00BDAC;
	text-decoration: underline;
}

#interactive-title
{
	background-color: #00BDAC;
}

/* Local Tours */
#local-tours-legend .legend
{
	background-color: #D50D0D;
}

#local-tours-box
{
	border: 1px solid #D50D0D;
}

#local-tours-legend a:hover,
#local-tours-box a:hover
{
	color: #D50D0D;
	text-decoration: underline;
}

#local-tours-title
{
	background-color: #D50D0D;
}

/* Mice */
#mice-legend .legend
{
	background-color: #2C87E1;
}

#mice-box
{
	border: 1px solid #2C87E1;
}

#mice-legend a:hover,
#mice-box a:hover
{
	color: #2C87E1;
	text-decoration: underline;
}

#mice-title
{
	background-color: #2C87E1;
}

/* Shopping */
#shopping-legend .legend
{
	background-color: #FE0D90;
}

#shopping-box
{
	border: 1px solid #FE0D90;
}

#shopping-legend a:hover,
#shopping-box a:hover
{
	color: #FE0D90;
	text-decoration: underline;
}

#shopping-title
{
	background-color: #FE0D90;
}

/* Things To Do */
#things-to-do-legend .legend
{
	background-color: #90C330;
}

#things-to-do-box
{
	border: 1px solid #90C330;
}

#things-to-do-legend a:hover,
#things-to-do-box a:hover
{
	color: #90C330;
	text-decoration: underline;
}

#things-to-do-title
{
	background-color: #90C330;
}

/* Misc */
#misc-legend .legend
{
	background-color: #C70035;
}

#misc-box
{
	border: 1px solid #C70035;
}

#misc-legend a:hover,
#misc-box a:hover
{
	color: #C70035;
	text-decoration: underline;
}

#misc-title
{
	background-color: #C70035;
}
