@charset "utf-8";
/* CSS Document */

/*General style */
body {
	font-family: Arial,Verdana, Helvetica, sans-serif;
	font-size: small;
	color: #333333;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	background-color: #ffffff;
	/*white-space: pre; Note: I try to use PRE tag to keep all space format but it doesn't work on IE while it is work on Firefox but I have to use BR tag to get text to a new line. So better not use it */
}

/* Division Style */
#container {
	width: 770px;  
	background: #e3c3a8;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
}

#header {
	background-image:url(images/header.gif);
	background-color:#FFFFFF;
	background-repeat: no-repeat;
	background-position: left;
	height: 121px;
	/*	padding: 0 10px 0 20px;  /* this padding matches the left alignment of the elements in the divs that appear beneath it. If an image is used in the #header instead of text, you may want to remove the padding. */
/*Don't use	"background-attachment: fixed;" because firefox doesn't support */

} 

#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 7px 5px; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
}

#mainContentHP {/*format for main section in homepage only   for normal page see below "main" setting*/
	margin:0;
	padding: 0 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background-color:#e3c3a8;
	background:url(images/ButtomBG.gif);
	background-repeat:no-repeat;
	height:296px;
	}

#footer { /*fomat for homepage bottom background only*/
	padding: 2px 10px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background-color:#FFFFFF;
	white-space:pre;
	font-size:11px;
	text-align:center
	
}


/*Menu rollover effect from http://www.ssi-developer.net*/

table.menu{
/*	border:1px solid #000000;*/
	display:block;
	color:#FFFFFF;
	font-size:17px;

}

div.menu{
	background:#AD2A24;
	margin:0;
	padding:0;
}

div.menu a{/*The outer div "div.menu a" is where we specify our base styles and it also acts as a workaround for crappy NS4x which does not like borders on links. */
	color:#FFFFFF;
	background:#ffffff;
	text-decoration:none;
	text-align:left;
	font-size:12px;
	line-height:23px;
	font-family: Arial,Verdana, Helvetica, sans-serif;
	white-space: pre;
	padding:5px 5px;/*padding top&bottom and then left&right*/
}

div.menu a:link{
	color:#FFFFFF;
	background:#AD2A24;
}
div.menu a:active{
	color:#FFFFFF;
	background:#AD2A24;
}
div.menu a:visited{
	color:#FFFFFF;
	background:#AD2A24;
}
div.menu a:hover{
	color:#FFFFFF;
	background:#D65C60;
}
/*end menu rollover effect setting*/



/*Normal page setting - for the setting with which doesn't share with homepage setting*/
#infoBar {
	text-align:right;
	padding: 8px 20px 0px 0px;/*format by clock wise start from top > right > bottom and then left*/
	font-family:Geneva, Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#333333;
	white-space:pre
}

#main {/*didn't use because doen't do anything better but worse!*/
	margin:0;
	border-right-width:2px;
	border-right-style:solid;
	border-right-color:#e3c3a8;
	padding:2em 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	background-color:#fff;
	height:auto
}
#sidePart1{
	width:100%;
	border-width:0;
	border-spacing:0;
	padding:1em 3px 0 12px;
	background-image:url(images/sidePart01.gif);
	background-repeat:repeat-y;
	color:#996666;
}
#sidePart2{
	width:100%;
	border-width:0;
	border-spacing:0;
	padding:0;
	background-image:url(images/sidePart02.gif);
	background-repeat:no-repeat
}
#endSubpage {
/*	background-color:#FFFFFF;   */
	background-image:url(images/bottomSubpage.gif);
	background-repeat:no-repeat;
	height:100px;
	white-space:pre;
	font-size:11px;
	text-align:center;
}


/* Class style */
.noGapPlease{/*Try to get rid of  mysterious whitespace between the div but Not Work ah!*/
	border-width:0;
	border-spacing:0;
	margin:0;
	padding:0;
	

}

.SolidBorder{
	border:thin solid;
	border-color:#AFDDAE; 
	color:#003366;
	margin:0;
}

.DotBottomBorder{
	border-bottom:thin dotted #669933
}
	
/*font&header format*/

h1{
	font-size:22px;
	color: #333333;
}
h2{
	font-size:18px;
	color: #333333;
}
h3{
	font-size:16px;
	color: #333333;
}
h4{
	font-size:12px;
	color: #333333;
}
h5{
	font-size:11px;
	color: #333333;
}
h6{
	font-size:9px;
	color: #333333;
}

p{
	text-align:justify;
	color:#444444;
}

.red{
	color:#990000
}

/*link format*/
a:link{
	color:#996666;
}
a:visited{
	color:#663333;
}
a:hover{
	color:#993333;
}
a.naked{
	text-decoration:none;
	font-weight:bold;
}