/* CSS Document */
@media screen, print {
/* =General page settings
----------------------------------------------- */
* { margin:0; padding: 0; }

html { height: 100%; }

body {
/*	behavior:url("csshover.htc"); */
	font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, PMingLiU, MingLiU, 新細明體, 細明體;
	text-align: center;			/* set this to 'center' so ie6 can place the whole page to the center properly */
	margin:0.5em 0 1em;
	color: #292a1c;
	background-color:#666666;
	font-size:0.9em;
	line-height:140%;
}

/*
p, dl, dt, dd, form, input, textarea, blockquote, pre, table { margin: 0 0 0.8em 0; }
*/
/* =Headings - Generic styles
----------------------------------------------- */
h1, h2, h3, h4, h5, h6 { background: transparent; color: #5F5F5F; font-weight: normal; margin: 0 0 .8em 0; }

h1 { font-size: 1.4em; }

h2 { font-size: 1.3em; font-weight:bold;}

h3 { font-size: 1.2em; font-weight:bold;}

h4 { font-size: 1.1em; font-weight:bold;}

h5 { font-size: 1.0em; font-weight:bold;}

h6 { font-size: 1em; }

a, a:link, a:visited {
	color: #006699;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	border:none;
	vertical-align:middle;
}

b {
	color:#CC3300;
	font-weight:500;
	font-size:100%;
}

ul {
	list-style:outside square;
}

li {
	display:list-item;
}

hr {
	color:#999999;
	height:1px;
	width:100%;
	margin:0px;
	}

#outerWrapper {
	width:57em;
	margin: 0px auto;
	height:100%;
	background-color:#b3b0a1;
	}

#innerWrapper {
	width:55em;
	color: #292a1c;
	text-align: left;
	vertical-align: top;
	margin:0 0 0 2em;
	padding:0;
	}

/* =Banner
----------------------------------------------- */
#bannerWrapper {
	background: #fefacd url(/images/headerTop_left.png) no-repeat 0 0;
	height:130px;
	}

#headerRight {
	float:right;
	background: #fefacd url(/images/headerTop_right.png) no-repeat 0 0;
	height:130px;
	width:280px;
	margin:0 auto;
	padding:0;
	text-indent:-9999px;
	}


/* The mainWrapper divides to two parts: for the left column background: use % to keep liquid
	 contentBkgdLeft.png is a 2000 x n px and 400 px on its left with the desired left column background
----------------------------------------------- */
#mainWrapper {
	background: url(/images/contentBkgdLeft.png) 20% 0;
}

/* =TOC: the first column
----------------------------------------------- */
#leftSectionWrapper {
	color: #666;
	margin-right: 80%;
	}

#tocWrapper {
	margin-bottom: 2em;
	text-align:left;
/*	position:relative;*/
	}

#tocWrapper ul {
/*	width:11em;	*/				/* has to specify the width here, otherwise IE will behavior incorrectly */
	list-style:none;
	margin: 0; 
	padding:0;
}

#tocWrapper li {
	line-height:2em;
	text-align:left;
	text-indent:2.5em; 
	}

#tocWrapper li li {
	text-indent:3em; 
	}

#tocWrapper li li li {
	text-indent:3.5em; 
	}

#tocWrapper li a {
	display:block;
/*	padding:0;
	width:10em; */
	height:2em;
	font-weight: 500;
	color:#666666;
	text-decoration:none;
	background: transparent url(/images/btn_tocnav_blank.png) 0.5em 50% no-repeat; 
}

#tocWrapper li li a {
	background: transparent url(/images/black_square.gif) 2em 50% no-repeat; 
}

#tocWrapper li li li a {
	background-image: none; 
}

#tocWrapper li a:hover, #tocWrapper li a:focus, #tocWrapper li a:active {
	background-color: #f0f0ee;
}


/* = Change to English
----------------------- */
#inEnglish {
	height:2em;
/*	padding-top:5px;
	line-height:27px;*/
	line-height:2em;
	text-align:center;
}
#tocWrapper>#inEnglish { padding-top:0px; line-height:2em;}
 
#inEnglish a {
	height:2em;
	line-height:2em;
	color:#000080;
	font-size: 0.9em;
	text-decoration: none;
}

#inEnglish a img {
	margin:0 auto;
}


/* = picture
----------------------- */
#picWrapper {
	width:100%;
	margin:0.3em 0 1.5em 0;
	font-size:1em;
	}

/* = Dynamic Nav
----------------------- */
#tocNavWrapper {
/*	min-height:2em;
	text-align:center;*/
	font-size:1.1em;
	}

#tocNav {
	position:relative;
	top:0px;
	}

/*
#tocNavWrapper ul li.pageselected a {
	background-position: -500px 50%;
}

#tocNavWrapper a {
	color:#666666;
	text-decoration:none;
}
*/
#tocNavWrapper li a:hover, #tocNavWrapper li a:focus, #tocNavWrapper li a:active, #tocNavWrapper ul li.pageselected a {
	color:#2181C1;
	background-image: url(/images/btn_toc_nav.png); 
}

ul#tocNav li.pageselected {
	background-color:#D2E2E3;
	}

/* = Static Nav
----------------------- */
#tocFixNavWrapper {
	margin:0.5em 0 0 0;
	font-size:1.1em;
	}

#tocFixNav {
	position:relative;
	top:0px;
	}

ul#tocFixNav li a:hover, ul#tocFixNav li a:focus, ul#tocFixNav li a:active, ul#tocFixNav li.pageselected a {
	color:#B93135;
	background-image: url(/images/btn_toc_fixnav.png); 
}

ul#tocFixNav li li a:hover, ul#tocFixNav li li a:focus, ul#tocFixNav li li a:active {
	color:#B93135;
	background-image: url(/images/black_square.gif); 
}

ul#tocFixNav li li li a:hover, ul#tocFixNav li li li a:focus, ul#tocFixNav li li li a:active {
	color:#B93135;
	background-image: none; 
}

ul#tocFixNav li.pageselected li a {
	color:#666666;
	background-image: url(/images/black_square.gif); 
	}

ul#tocFixNav li.pageselected li.pageselected a {
	color:#B93135;
	}

ul#tocFixNav li.pageselected li.pageselected li a {
	color:#666666;
	background-image: none; 
	}

ul#tocFixNav li.pageselected li li a:hover, ul#tocFixNav li.pageselected li li a:focus, ul#tocFixNav li.pageselected li li a:active, ul#tocFixNav li.pageselected li li.pageselected a {
	color:#B93135;
}

ul#tocFixNav li.pageselected li a:hover, ul#tocFixNav li.pageselected li a:focus, ul#tocFixNav li.pageselected li a:active {
	color:#B93135;
}

ul#tocFixNav li ul {
	display:none;
	
	}

ul#tocFixNav li.pageselected ul, ul#tocFixNav li:hover ul {
	display:block;
	}

ul#tocFixNav li.pageselected {
	background-color:#D2E2E3;
	}

/* = Google Search
----------------------- */
#googleSearch {
	margin:0 auto;
	width:10em;
	height:3em;
	text-align:center;
	position:relative;
	top:0px;
	background: transparent url(/images/google_search_logo.gif) center top no-repeat;
	}

#googleSearch input#gSrch {
	position:absolute;
	left:0;
	bottom:0;
	width: 8em;
	background: #eee;
	border: 1px solid #999;
	color: #000;
	line-height:1.5em;
	height:1.5em;
}
/*#googleSearch form>input#gSrch { padding-top:4px; height:16px; }  others */

#googleSearch input#gSrchBtn {
	position:absolute;
	right:0;
	bottom:1px;
	text-indent: -9999px;
/*	margin-top:15px;
	margin-bottom:13px; *//* IE */
}
/*#googleSearch form>input#gSrchBtn { margin-bottom:10px; } *//* others */

#googleSearch input {
	font-size:1em;
	font-weight:500;
}

input.buttons {
	background: none no-repeat 0 0;
	border: none;
	cursor: pointer;
	display: block;
	float: left;
	height: 20px;		/* don't use em; the graphic size is fixed */
	overflow: hidden;
	padding: 0;
	margin: 0;
	text-indent: -9999px;
	width: auto;
}

input.search { background-image: url(/images/btn_search.gif); width: 22px; }
input.search:hover { background-position: 0 -20px; }

/* = Amazon Donation
----------------------- */
#amazonDonation {
	margin:3em 0.7em;
	text-align:left;
	color:#333333;
/*	font-family: Geneva, Verdana, Arial, Helvetica, sans-serif;*/
	font-size:.8em;
	line-height:120%;
}

#amazonDonation a img {
	margin:0 auto;
}

/* for the right column background: use % to keep liquid
	 contentBkgdRight.png is a 2000 x n px and 560 px on its right with the desired right column background */
#rightSectionWrapper {
	float: right;
	width: 80%;
/* uncomment this if the third column is needed
	background: url(/images/contentBkgdRight.png) 65% 0; */
}

/* =Top Navigation
----------------------------------------------- */
#dropMenuWrapper {
	width:100%;
	height:2em;
	line-height:2em;
 	background: transparent url(/images/topnav_up_bkgd.png) repeat-x 0 100%; 
	font-size: 1.1em;
	font-weight:600;
	text-align:center;
	overflow:visible;
	}
	
#h_menu {margin:0 auto; }
#h_menu ul {display:inline; list-style: none; min-height:2em;}
#h_menu li {padding:0; margin:0; float:left; position:relative; z-index:1000; }
#h_menu a {padding:0; margin:0; text-align:center; text-decoration:none; /*text-indent:-9999px; */ }

#h_menu ul li {display: inline; /*width:90px;*/ height:2em; line-height: 2em;}
#h_menu ul li a {display: inline-block; /*width:90px;*/  padding:0px 0.5em; height:2em; line-height: 2em; color:#666666; border-left:#d1d1cb 1px solid;}
#h_menu ul li:hover a,
#h_menu ul li.pageselected>a {background: transparent url(/images/topnav_down_bkgd.png) repeat-x 0 100%; color:#ffffff; } 

#h_menu ul li ul {display: none; border:none; font-weight:500;}
#h_menu ul li ul li {display: none;  height:1.8em; line-height:1.8em;}
#h_menu ul li ul li a {display: none; border:none; height:1.8em; line-height:1.8em;} /* jing: has to set a smaller font-size here for IE6; for unknown reason IE6 display a bigger (> 1.3em defined in "#h_menu a") size of font here; I have to re-declare a smaller font size here to make the font size in the dropdwon menu looks consistant to the font size in the menu bar. */
/*#h_menu ul li ul li>a {font-size: 1.2em; } *//* jing: has to set the font-size back to 1.3em for other browsers */
#h_menu ul li:hover ul {display:block; width:10em; position:absolute; top:2em; left:0px; border:solid 1px #ddd; border-top:none;border-bottom:none;}
#h_menu ul li:hover ul li {display:block; width:10em;}
#h_menu ul li:hover ul li a {display:block; width:10em; text-align:left; color:#666666; padding:0px; text-indent:1em; background: transparent url(/images/topnav_up_bkgd.png) repeat-x 0 100%;}
#h_menu ul li:hover ul li a:hover {background-image: url(/images/topnav_down_bkgd.png); color:#ffffff;}


/* = Main Content
----------------------- */
#centerWrapper {
/*	position:absolute;
	bottom:0;
	top:32px;
	height:100%;*/
	text-align:center;
}

#mainContent {
/*	background:url(/images/shadow_right.gif) repeat-y 100% 0; */
/*	background:url(/images/shadowRight.png) repeat-y 100% 0; */
	background-color:#ffffff;
	font-size:1.05em;
	line-height:1.5em;
	font-weight:500;
	width:90%;
	margin:1.5em auto 3em;
	text-align:center;
	position:relative;
	}


/* =Footer
----------------------- */
#footerWrapper {
	clear:both;
	background-color:#eeeeee;
	}

#footer {
	font-size:0.8em;
	line-height:1.4em;
	text-align:center;
	color:#333333;
	padding:5px 0px;
	}

/* = List
----------------------------------------------- */
.listTitle {
	font-size:1.2em;
	line-height:150%;
	font-weight:bold;
	color:#CC9933;
}

.englishListTitle {
	font-weight:bold;
	font-family: 'Trebuchet MS', 'Lucida Grande', gothic, verdana;
	letter-spacing:0.05em;
}

.list {
	list-style:outside square;
	font-family: 'Trebuchet MS', 'Lucida Grande', gothic, verdana;
	padding-left:5px;
	font-size:1.0em;
	text-align:left;
}

.list li {
	margin: 5px 0 0 15px;
/*	padding:0px 20px 0 0px; */
}

.importList {
	color:#ff0000;
}

.newList {
/*	background:transparent url(/images/new.gif) 0 0;*/
	font-size:80%;
	color:#cccc00;
}

.date_Time {
	color:#B16976;
}

.englishChar {
	font-family:Verdana, Arial, Helvetica, sans-serif;
}



/* = Table
----------------------------------------------- */
.table_body {
/*	font-family: Gothic, Verdana, Arial, Helvetica, sans-serif;*/
	vertical-align:top;
 	font-size : 0.9em;
	}

.table_title {
	background-color:#999999;
	color : #ffffff;
 	font-size : 1.1em;
	font-weight : bold;
	text-align : left;
	height:1.5em;
	line-height:1.5em;
	padding:5px;
}

.table_header {
	background-color:#ffffe0;
	color : #666666;
 	font-size : 1.1em;
	font-weight : bold;
	text-align : center;
	height:1.5em;
	line-height:1.5em;
	padding:5px;
}

.row1_title { 
	background-color:#fafafa;
	color : #333333;
	text-align : left;
 	font-size : 1em;
	font-weight : bold;
	line-height:1.3em;
	padding:5px;
}

.row1_info { 
	background-color:#fafafa;
	color : #333333;
 	font-size : 1em;
	line-height:1.3em;
	text-align : left;
	padding:5px;
}


.row2_title {
	background-color:#f2f2f2;
	color : #333333;
	text-align : left;
 	font-size : 1em;
	font-weight : bold;
	line-height:1.3em;
	padding:5px;
}

.row2_info {
	background-color:#f2f2f2;
	color : #333333;
 	font-size : 1em;
	line-height:1.3em;
	text-align : left;
	padding:5px;
}


.calendar_table_header {
	background-color:#ffffe0;
	color : #666666;
 	font-size : 1.1em;
	font-weight : bold;
	text-align : center;
	height:1.3em;
	line-height:120%;
	padding:3px;
/*	border:solid 1px #999999;*/
}

.calendar_cell_empty {
	background-color:#efefef;
/*	border:solid 1px #cccccc;*/
	height:60px;
}

.calendar_cell {
	background-color:#ffffff;
	color:#333333;
/*	font-family : Arial, Gothic, Verdana, Helvetica;*/
 	font-size : 1em;
	line-height:1.1em;
	text-align : right;		/* for displaying date */
	font-weight: normal;
	width:80px;
/*	border:solid 1px #ddddd0; */
	min-height:30px;
}

.calendar_cell_date {
	background-color:#999999;
	color:#ffffff;
}

.calendar_event_detail {
	background-color:#f8f8f8;
	color : #666666;
	text-align : left;
	padding:2px;
	font-weight:normal;
}

.calendar_event_detail_nonMBS { 
	background-color:#eeeee0;
	color : #666666;
	text-align : left;
	padding:2px;
	font-weight:normal;
}

.calendar_event_detail_important { 
	background-color:#e0eeee;
	color : #666666;
	text-align : left;
	padding:2px;
	font-weight:normal;
}

.calendar_teacher {
	color:#999999;
	width:100%;
}

.calendar_item_name {
	color:#101010;
}

/* = ie bug fix solution 
----------------------------------------------- */
.clearfix:after {
  content: ".";
  clear: both;
  height: 0;
  visibility: hidden;
  display: block;
}

.clearfix {
  display: inline-block; /* Fixes IE/Mac */
}

/* Hides from IE-mac \*/
* html .clearfix,
* html .clearfix * {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

}

@media print {
body {
	background-color: #ffffff;
	}
	
#outerWrapper {
	background-color:#ffffff;
	}

}