/*
CSS file for Hongkongpost.com
Author	: Laurence Lim (webmaster)
Date	: Jul 12, 2006
Version	: 1.1

CSS hireachy
----body
----img
----container
--------clfHeader
------------clfHeader img
------------clfLogoHkpost
------------clfLogoBrandHk
--------clfNavigation
------------clfNavigationLeft
------------clfNavigationRight
----------------clfNavigationRight form
----------------clfNavigationRight p
----------------clfNavigationRight label
----------------clfNavigationRight input
--------clfMainBody
------------clfSideBar
----------------clfMenu
--------------------clfMenu ul
--------------------clfMenu li a
--------------------clfMenu li a:hover
--------------------clfMenu ul li ul
--------------------clfMenu ul li ul li a
--------------------clfMenu ul li ul li a:hover
--------------------clfMenu a currentTab
----------------promotionIcons
--------------------promotionIcons a
------------clfContent
----------------clfContent h1 title
----------------clfContent p textLargePurple
----------------clfContent p textNormalPurple
----------------clfContent p textSmallPurple
----------------clfContent p textLargeGreen
----------------clfContent p textNormalGreen
----------------clfContent p textSmallGreen
----------------clfContent p textLargeBlue
----------------clfContent p textNormalBlue
----------------clfContent p textSmallBlue
----------------clfContent p textLargeRed
----------------clfContent p textNormalRed
----------------clfContent p textSmallRed
--------clfFooter
------------clfFooterLeft
------------clfFooterRight
[bug fix section]
----ieFix
*/

body {
	background-color: #FFFFFF;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 80%;
	margin: 0;
	padding: 0;
	width:1003px; /*set space for scroll bar in 1024w screen*/
	margin: 0 auto;
}

a:hover {
	text-decoration:none;
}

a:focus {
	text-decoration:none;
}

img {
	border: 0;
}

.bg {
	background:none;
	/*background: url(../../img/bg.gif) no-repeat;*/
}

#container {
	max-width:1003px;
	min-width: 900px;
}

	#clfHeader {
		background-image: url(../../img/header/bg_header.gif);
		height: 65px;
	}

	#clfHeader img {
		display: block;
	}

		#clfLogoHkpost {
			float: left;
			width:auto;
		}

		#clfLogoBrandHk {
			float: right;
			width:auto;
		}
		
		#clfLogoBrandHk img {
			display:inline;
			vertical-align:middle;
		}
		
		#clfLogoBrandHk2 {
			float: right;
			width:auto;
		}

	#clfNavigation {
		background: url(../../img/header/bg_nav.gif) repeat-x;
		height: 22px;
		margin-bottom: 2px;
	}

		#clfNavigationLeft {
			float: left;
			width:auto;
			height: 20px;
		}
		
		#clfNavigationMid {
			float: left;
			width:auto;
			height: 20px;
			padding:0px 0px 2px 0px;
		}

		#clfNavigationRight {
			float: right;
			width:auto;
			height: 20px;
		}

			#clfNavigationRight form {
				margin: 0px;
			}

			#clfNavigationRight p {
				margin: 0;
			}

			#clfNavigationRight label {
				display: none;
			}

			#clfNavigationRight input {
				font-size: 9px;
				height: 12px;
				margin:1px 0px 5px 0px;
				width: 105px;
				color:#333333;
				vertical-align:top;
			}

	#clfMainBody {
		margin-bottom: 5px;
	}

		#clfSideBar {
			float: left;
			margin: 0;
			width: 145px;
		}
		
			#clfMenu {
				margin-bottom: 5px;
				font-family: Verdana, Arial, Helvetica, sans-serif;
				font-size: 90%;
				font-weight: bold;
			}
		
				#clfMenu ul {
					height: 1%;
					list-style: none;
					margin: 0;
					padding: 0;
				}

				#clfMenu li a {
					background-color: #DDEEFF;
					border-bottom: 1px solid #99CCFF;
					border-right: 1px solid #2266BB; 
					border-top: 1px solid #F6F6FF; 
					color: #000066;
					display: block;
					height: 1%;
					padding: 4px;
					text-decoration: none;
				}
		
				#clfMenu li a:hover {
					background-color: #008260;
					border-top: 1px solid #000000; 
					border-right: 1px solid #FFFFFF; 
					border-bottom: 1px solid #FFFFFF; 
					color: #FFFFFF; 
				}
				
				#clfMenu li a:focus {
					background-color: #008260;
					border-top: 1px solid #000000; 
					border-right: 1px solid #FFFFFF; 
					border-bottom: 1px solid #FFFFFF; 
					color: #FFFFFF; 
				}

				#clfMenu ul li ul {
					height: 1%;
					list-style: none;
					margin: 0;
					padding: 0;
				}

				#clfMenu ul li ul li a {
					background-color: #F7F7FF;
					border-bottom: 1px solid #99CCFF;
					border-right: 1px solid #2266BB; 
					border-top: 1px solid #F6F6FF; 
					color: #006644; 
					display: block;
					height: 1%;
					padding: 4px 4px 4px 10px;
					text-decoration: none;
				}

				#clfMenu ul li ul li a:hover {
					background-color: #008260;
					border-top: 1px solid #000000; 
					border-right: 1px solid #FFFFFF; 
					border-bottom: 1px solid #FFFFFF; 
					color: #FFFFFF; 
				}
				
				#clfMenu ul li ul li a:focus {
					background-color: #008260;
					border-top: 1px solid #000000; 
					border-right: 1px solid #FFFFFF; 
					border-bottom: 1px solid #FFFFFF; 
					color: #FFFFFF; 
				}

				#clfMenu a.currentTab {
					background-color: #432683;
					border-top: 1px solid #000000; 
					border-right: 1px solid #FFFFFF; 
					border-bottom: 1px solid #FFFFFF; 
					color: #FFFFFF;
				}

			#promotionIcons {
				text-align: center;
			}
		
				#promotionIcons a {
					display: block;
					margin: 2px;
				}
		
				#promotionIcons p {
					margin: 0px;
				}
		
		#clfContent {
			margin-left: 150px;
			margin-right: 0px;
			width:850px;
			min-height:400px;
			background: url(../../img/bg.gif) no-repeat;
		}
		
			#ePDelivery {
				width: 515px; 
				height: 375px;
				margin: 0;
				padding: 0;
				position: relative;
				display: none;
			}
			
			#orgChart {
				width: 615px; 
				height: 435px;
				margin: 0;
				padding: 0;
				position: relative;
				display: none;
			}
	
			h1.title {
				background: url(../../img/title/bg_title.gif) no-repeat bottom left;
				border-bottom: 2px solid #CCCCCC;
				background-color: transparent;
				color: #008260;
				display: block;
				font-size: 100%;
				line-height: 30px;
				margin: 0 0 30px 0;
				padding: 30px 0 0 30px;
			}

			hr {
				color: #CCCCCC;
				background-color: transparent;
			}

			ul.index li {
				margin-bottom: 15px;
				padding: 0;
			}

			ol.lowerAlpha {
				list-style: lower-alpha;
			}

			ol.upperAlpha {
				list-style: upper-alpha;
			}

			ol.lowerRoman {
				list-style: lower-roman;
			}

			ol.upperRoman {
				list-style: upper-roman;
			}

			a.goBack {
				font-size: 80%;
				padding: 5px;
			}

			a:hover.goBack {
				background-color: #FFFFCC;
				padding: 5px;
			}
			
			a:focus.goBack {
				background-color: #FFFFCC;
				padding: 5px;
			}

			.imgAlignLeft {
				float: left;
				/*width:inherit;*/
				margin: 0 5px 0 0;
			}

			.imgAlignRight {
				float: right;
				/*width:inherit;*/
				margin: 0 0 0 5px;
			}
			
			.textAlignLeft {
				text-align: left;
			}

			.textAlignCenter {
				text-align: center;
			}

			.textAlignRight {
				text-align: right;
			}
			
			.easyPrint {
				text-align: right;
				vertical-align:middle;
			}
			
			.easyPrintLink {
				display: none;
				text-align: right;
				vertical-align: middle;
			}

			.textCaption {
				font-size: 90%;
			}

			.textLargeBlack {
				color: #000000;
				font-size: 120%;
				font-weight: bold;
			}

			.textNormalBlack {
				color: #000000;
				font-size: 100%;
				font-weight: bold;
			}

			.textSmallBlack {
				color: #000000;
				background-color: transparent;
				font-size: 80%;
				font-weight: normal;
			}
			
			.textSmallGrey {
				color:#333333;
				font-size: 80%;
				font-weight: normal;
			}
			
			.textNormalWhite {
				color: #FFFFFF;
				font-size: 95%;
				font-weight: bold;
			}

			.textLargePurple {
				color: #432683;
				background-color: transparent;
				font-size: 120%;
				font-weight: bold;
			}

			.textNormalPurple {
				color: #432683;
				background-color: transparent;
				font-size: 100%;
				font-weight: bold;
			}

			.textSmallPurple {
				color: #432683;
				background-color: transparent;
				font-size: 80%;
				font-weight: normal;
			}

			.textLargeGreen {
				color: #008260;
				background-color: transparent;
				font-size: 120%;
				font-weight: bold;
			}

			.textNormalGreen {
				color: #008260;
				background-color: transparent;
				font-size: 100%;
				font-weight: bold;
			}

			.textSmallGreen {
				color: #008260;
				background-color: transparent;
				font-size: 80%;
				font-weight: normal;
			}

			.textLargeBlue {
				color: #0000AA;
				font-size: 120%;
				font-weight: bold;
			}

			.textNormalBlue {
				color: #0000AA;
				font-size: 100%;
				font-weight: bold;
			}

			.textSmallBlue {
				color: #0000AA;
				font-size: 80%;
				font-weight: normal;
			}

			.textLargeOrange {
				color: #B83B04;
				font-size: 120%;
				font-weight: bold;
			}
			
			.textLargeRed {
				color: #B80000;
				font-size: 120%;
				font-weight: bold;
			}

			.textNormalRed {
				color: #B80000;
				font-size: 100%;
				font-weight: bold;
			}
			
			.textNormalRed2 {
				color: #B80000;
				font-size: 100%;
			}

			.textSmallRed {
				color: #B80000;
				font-size: 80%;
				font-weight: normal;
			}
			.textInvisible {
				display:none;
			}
			#pdaSitemapLink {
				display:none;
			}
			#pdaHidden {
				position:absolute;
				width:1px;
				height:1px;
				overflow:hidden;
			}
			
	table.imgTable{
	width:60%;
	padding:5px;
	margin-left:auto;
	margin-right:auto;
	}
	
	table.imgTable td{
	width:50%;
	padding:5px;
	text-align:center;
	font-size:85%;
	vertical-align:bottom;
	}
	
			

	#clfFooter {
		border-top: 1px dashed #888888;
		clear: both;
		font-size: 100%;
		margin-left: 150px;
		padding: 2px 0px 30px 0px;
	}

		#clfFooterLeft {
			float: left;
			width:auto;
		}

		#clfFooterRight {
			float: Right;
			width:auto;
		}

/* Bug fix for IE/Win */

/* Hides from IE5-mac \*/
* html .ieFix {
	height: 1%;
}
/* End hide from IE5-mac */

/*hoverAd*/
.hoverAdIndex {
	background:none;
	font-size: 14px;
	right: 20px;
    margin: 350px 0px 0px 0px;
    padding: 0px;
	position:absolute;
    width: 350px;
	z-index: 9997;
}

.hoverAd {
	background:none;
	font-size: 14px;
	right: 20px;
    margin: 120px 0px 0px 0px;
    padding: 0px;
	position:absolute;
    width: 350px;
	z-index: 9997;
}

.NoticeNews {
    background-image:url(../../../../img/misc/hkp_bg.jpg);
	background-repeat:no-repeat;
	background-color: #f7f8fc;
	border:solid #666666 1px;
    color: #000000;
    font-size: 14px;
	margin: 15px 0px 15px 0px;
    padding: 5px 5px 15px 5px;
	width: 350px;
	min-height:100px;
	line-height:16px;
    z-index: 9998;
	text-align:left;
	-moz-box-shadow: 0px 0px 15px 5px #999;
	-webkit-box-shadow: 0px 0px 15px 5px #999;
	box-shadow: 0px 0px 15px 5px #999;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#999999');
}

.NoticeNews p.header {
	margin-top:30px;
	padding:0px;
	line-height:normal;
	font-weight:bold;
	font-size:120%;
	text-align:center;
	color:#008260;
}

.NoticeNews p.firstPara {
	margin-top:30px;
	padding:0px;
	line-height:normal;
	font-size:100%;
	color:#000000;
}

.closeBtn {
    border:solid #666666 0px;
	background:none;
    font-size:14px;
	right:0px;
	margin:0px;
    padding:0px;
	height:17px;
	z-index:9999;
	float:right;
}

.closeBtn a img {
	vertical-align:top;
}

/* font resize*/
.fontResize {
	font-size:12px;
	vertical-align:middle;
	padding: 0px 5px 0px 5px;
	font-family:Arial, Helvetica, sans-serif;
	}
	
.fontResize_s {
	font-size:12px;
	font-weight:bold;
	color:#000000;
	text-decoration:none;
	}
	
.fontResize_s:hover {
	font-size:12px;
	font-weight:bold;
	color:#B80000;
	text-decoration:none;
	}
	
.fontResize_s:focus {
	font-size:12px;
	font-weight:bold;
	color:#B80000;
	text-decoration:none;
	}	
	
.fontResize_m {
	font-size:16px;
	font-weight:bold;
	color:#000000;
	text-decoration:none;
	}
	
.fontResize_m:hover {
	font-size:16px;
	font-weight:bold;
	color:#B80000;
	text-decoration:none;
	}
	
.fontResize_m:focus {
	font-size:16px;
	font-weight:bold;
	color:#B80000;
	text-decoration:none;
	}	

.fontResize_l {
	font-size:19px;
	font-weight:bold;
	color:#000000;
	text-decoration:none;
	}
	
.fontResize_l:hover {
	font-size:19px;
	font-weight:bold;
	color:#B80000;
	text-decoration:none;
	}
	
.fontResize_l:focus {
	font-size:19px;
	font-weight:bold;
	color:#B80000;
	text-decoration:none;
	}	
	
.skipContent {
	padding:3px 0px 5px 7px;
	display:none;
}