@charset"utf-8";
/* 
===================================================================
Producer: Apple Tsao
Update: 2010.06.04
-------------------------------------------------------------------
Index:

--Basic Structure
--Links
--Header
--Navigation
--Main content
--Side column
--Form
--Footer
--Others
--CSS Hack
===================================================================
*/

/*瀏覽器樣式初始化*/
html
{
scrollbar-face-color: #E7E2D6;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #cccccc;
scrollbar-darkshadow-color: #777777;
scrollbar-shadow-color: #cccccc;
scrollbar-arrow-color: #777777;
scrollbar-track-color: #E2E2E3;
}
html, body {height:100%; margin: 0; padding: 0; }
html,body,div,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,p,form,fieldset,input,textarea,blockquote,th,td{
  margin: 0;
  padding: 0;
}

img {border:0;}

h1, h2, h3, h4, h5, h6 {
	font-size: 100%;
	font-weight: normal;
}

body {
	background-color:#000;
	color:#FFF;
	line-height: 1.5em;
	font-family: Arial, Helvetica,"新細明體",sans-serif;
}

strong {
	font-weight:bold;
}

em {
background-color:#666;
font-style:normal;

}

/*Basic Structure*/
#container-home {
	/*border:#99CC00 1px solid;*/
	width:1000px;
	height:600px;
	margin: 0 auto;
	background:url(../images/bg_home.jpg) top right no-repeat;
	border-left:#CCC 1px solid;
	border-right:#CCC 1px solid;	
}


#container-pop {
	width:1000px;
	margin: 0 auto;
	background:url(../images/bg_home.jpg) top right no-repeat;
	border-left:#CCC 1px solid;
	border-right:#CCC 1px solid;	
}

#container {
	/*border:#99CC00 1px solid;*/
	width:1000px;
	height:600px;
	margin: 0 auto;
	border-left:#CCC 1px solid;
	border-right:#CCC 1px solid;
	/*background:url(../images/bg.jpg) top right no-repeat;*/
}


/*Links*/
a { 
	color: #FFF;
	text-decoration: none;
}

a:focus {
  color:#B6C4C4;
  text-decoration: none;
}

a:hover {
  color: #B6C4C4;
}

a:visited, a:active {
  /*color: #96C;*/
  text-decoration: none;
}

/*Header*/
#header-home {
	margin:0;
	padding:0;
	width:100%;
}

#header {
	margin:0;
	padding:0;
	width:100%;
	background-color:#60534A;
}

/*POP UP content*/

#popup{
	margin:0 0 0 50px;
	padding:0;
	width:90%;
}


#popup h1{
	font:Arial, Helvetica, sans-serif;
	font-size:16px;
	font-weight:bold;
	text-decoration:underline;
	margin:0;
	padding:1em 0;
	line-height:1.5em;
}

#popup h3{
	font:Arial, Helvetica, sans-serif;
	font-size:16px;
	margin-top:30px;
	padding:0.75em 0em;
	line-height:1.5em;
	color: #FF0;
}

#popup h4{
	font:Arial, Helvetica, sans-serif;
	font-size:16px;
	margin:0;
	padding:0.75em 0em;
	line-height:1.5em;
	color: #CC9900;
}

#popup ol{
	margin:1em 4.5em;
	padding:0;
	list-style:decimal;
}

/*Main content*/
#content{
	margin:0;
	padding:0;
	width:100%;
}



#left-col{
	margin:1em 0 0 50px;
	padding:0;
	width:200px;
	float:left;
	/*border:#FFF 1px solid;*/
}

#right-col{
	margin:0;
	padding:0;
	width:720px;
	float:right;
	/*border:#FFF 1px solid;*/
}

#right-col-page{
	margin:0;
	padding:0;
	width:650px;
	height:430px;
	float:right;
	background:url(../images/page_bg.jpg) top right no-repeat;
	/*border:#FFF 1px solid;*/
}

#article{
	width:470px;
	height:295px;
	/*border:#FFF 1px solid;*/
	margin: 50px 0 30px 50px;
	padding:0 20px 20px 20px;
	overflow-x: hidden;
	overflow-y:scroll;
	overflow:-moz-scrollbars-vertical !important;
	/*position: relative;
	top:40px;
	left:110px;*/
}

#article2{
	width:568px;
	height:352px;
	/*border:#FFF 1px solid;*/
	margin: 40px 0 30px 19px;
	padding:0 20px 0px 20px;

}

#article h1{
	font:Arial, Helvetica, sans-serif;
	font-size:16px;
	text-decoration:underline;
	margin:0;
	padding:1em 0;
	line-height:1.5em;
}

#article h2{
	font:Arial, Helvetica, sans-serif;
	font-size:15px;
	margin:0;
	padding:1em 0.75em;
	line-height:1.5em;
	color: #FF0;
}

#article h3{
	font:Arial, Helvetica, sans-serif;
	font-size:15px;
	margin:0;
	padding:0.5em 0em;
	line-height:1.5em;
	color: #FF0;
}

#article p{
	font:Arial, Helvetica, sans-serif;
	font-size:13px;
	text-decoration:none;
	margin:0;
	padding:0.5em 0 0.5em 1em;
	line-height:1.6em;
}

#article ul{
	margin:0;
	padding:0.5em 0 0.5em 1em;
	list-style:disc;
}

#article ol{
	margin:0;
	padding:0.5em 0 0.5em 1.5em;
	list-style: decimal;
}

#article li{
	font:Arial, Helvetica, sans-serif;
	font-size:13px;
	text-decoration:none;
	margin:0;
	padding:0.5em 0 0.5em 1em;
	line-height:1.6em;
}
/*fieldset*/

fieldset {
  padding:1.5em 1em;
  margin:0;
  -moz-border-radius:8px;
}

legend {
	font-weight: normal;
	color: #333;
	padding: 0.1em 0.5em;
	margin: 0;
	/*margin-left: -1em;*/
}

fieldset ul {
  padding: 0 1em 0.75em 2em;
  margin: 1em 0 ; 
}


fieldset li {
color:#666;
line-height:1.6em;
padding: 0em;
}

/*table*/
table.report {
	width: 100%;
	color:#FFF;	
	/*font-size:12px;*/	
	line-height:1.6em;	
}

table.report th {
	padding:3px 5px;
	background-color:#6B4E22;
	font-weight:normal;
	text-align:center;
}


table.report td {
	border-bottom: 1px dotted #960;
	padding:8px 5px;
	margin:0;
	vertical-align:top;
}

#courselist ul{
	margin:0;
	padding:0;
	list-style:none;
}

#courselist ul li{
	margin:0 0 0 1.5em;
	padding:0;
	list-style: disc;
	line-height:1.6em;
}


/*Form*/

/*Footer*/

/*Others*/
#copyright{
	float:right;
	padding:0.5em 4em 0.5em 0;
	margin:0;
	font-size:12px;
}

/* slightly enhanced, universal clearfix hack */
.clearfix:after { 
	content:" "; 
	display:block; 
	height:0; 
	clear:both; 
	visibility:hidden; 
} 
.clearfix {display:inline-block;} 
/* Hide from IE Mac \*/ 
.clearfix {display:block;} 
/* End hide from IE Mac */ 

/* CSS Navigation */

#vmenu {
	 width: 150px;
	 height: 168px;
	 background: url(../images/menu_level01.gif);
	 margin: 0;
	 padding: 0;
	 position: relative;
}

#vmenu li {
	margin: 0; 
	padding: 0; 
	list-style: none; 
	position: absolute; 
	left: 0;	
}

#vmenu li, #vmenu a {
	height: 24px; 
	display: block;
}


#home {top:0;  width: 150px;text-indent: -5000px;}
#about {top:24px; width: 150px;text-indent: -5000px;}
#course {top:48px; width:150px;text-indent: -5000px;}
#testimony {top: 72px; width: 150px;text-indent: -5000px;}
#end {top:96px; width: 150px;text-indent: -5000px;}
#book {top:120px; width:150px;text-indent: -5000px;}
#happiness {top: 144px; width: 150px;text-indent: -5000px;}

#home a:hover {background: transparent url(../images/menu_level01.gif) -150px 0px no-repeat;}
#about a:hover {background: transparent url(../images/menu_level01.gif) -150px -24px no-repeat;}
#course a:hover {background: transparent url(../images/menu_level01.gif) -150px -48px no-repeat;}
#testimony a:hover {background: transparent url(../images/menu_level01.gif) -150px -72px no-repeat;}
#end a:hover {background: transparent url(../images/menu_level01.gif) -150px -96px no-repeat;}
#book a:hover {background: transparent url(../images/menu_level01.gif) -150px -120px no-repeat;}
#happiness a:hover {background: transparent url(../images/menu_level01.gif) -150px -144px no-repeat;}


#home.selected {background: transparent url(../images/menu_level01.gif) -150px 0px no-repeat;}
#about.selected {background: transparent url(../images/menu_level01.gif) -150px -24px no-repeat;}
#course.selected {background: transparent url(../images/menu_level01.gif) -150px -48px no-repeat;}
#testimony.selected {background: transparent url(../images/menu_level01.gif) -150px -72px no-repeat;}
#end.selected {background: transparent url(../images/menu_level01.gif) -150px -96px no-repeat;}
#book.selected {background: transparent url(../images/menu_level01.gif) -150px -120px no-repeat;}
#happiness.selected {background: transparent url(../images/menu_level01.gif) -144px -72px no-repeat;}

#vmenu2 {
	 width: 130px;
	 height: 72px;
	 margin: -144px 0 0 155px;
	 padding: 0;
	 position: relative;
	 background:url(../images/menu_level02-1.gif);
}

#vmenu2 li {
	margin: 0; 
	padding: 0; 
	list-style: none; 
	position: absolute; 
	left: 0;	
}

#vmenu2 li, #vmenu2 a {
	height: 24px; 
	display: block;
}

#about01 {top:0;  width: 130px;text-indent: -5000px;}
#about02 {top:24px; width: 130px;text-indent: -5000px;}
#about03 {top:48px; width:130px;text-indent: -5000px;}

#about01 a:hover {background: transparent url(../images/menu_level02-1.gif) -130px 0px no-repeat;}
#about02 a:hover {background: transparent url(../images/menu_level02-1.gif) -130px -24px no-repeat;}
#about03 a:hover {background: transparent url(../images/menu_level02-1.gif) -130px -48px no-repeat;}


#about01.selected {background: transparent url(../images/menu_level02-1.gif) -130px 0px no-repeat;}
#about02.selected {background: transparent url(../images/menu_level02-1.gif) -130px -24px no-repeat;}
#about03.selected {background: transparent url(../images/menu_level02-1.gif) -130px -48px no-repeat;}


#vmenu3 {
	 width: 130px;
	 height: 150px;
	 margin: -120px 0 0 155px;
	 padding: 0;
	 position: relative;
	 background:url(../images/menu_level02-2.gif);
}

#vmenu3 li {
	margin: 0; 
	padding: 0; 
	list-style: none; 
	position: absolute; 
	left: 0;	
}

#vmenu3 li, #vmenu3 a {
	height: 24px; 
	display: block;
}

#course01 {top:0;  width: 130px;text-indent: -5000px;}
#course02 {top:24px; width: 130px;text-indent: -5000px;}
#course03 {top:48px; width:130px;text-indent: -5000px;}
#course04 {top:72px; width:130px;text-indent: -5000px;}
#course05 {top:96px; width:130px;text-indent: -5000px;}

#course01 a:hover {background: transparent url(../images/menu_level02-2.gif) -130px 0px no-repeat;}
#course02 a:hover {background: transparent url(../images/menu_level02-2.gif) -130px -24px no-repeat;}
#course03 a:hover {background: transparent url(../images/menu_level02-2.gif) -130px -48px no-repeat;}
#course04 a:hover {background: transparent url(../images/menu_level02-2.gif) -130px -72px no-repeat;}
#course05 a:hover {background: transparent url(../images/menu_level02-2.gif) -130px -96px no-repeat;}

#course01.selected {background: transparent url(../images/menu_level02-2.gif) -130px 0px no-repeat;}
#course02.selected {background: transparent url(../images/menu_level02-2.gif) -130px -24px no-repeat;}
#course03.selected {background: transparent url(../images/menu_level02-2.gif) -130px -48px no-repeat;}
#course04.selected {background: transparent url(../images/menu_level02-2.gif) -130px -72px no-repeat;}
#course05.selected {background: transparent url(../images/menu_level02-2.gif) -130px -96px no-repeat;}


#vmenu4 {
	 width: 130px;
	 height: 72px;
	 margin: -96px 0 0 155px;
	 padding: 0;
	 position: relative;
	 background:url(../images/menu_level02-3.gif);
}

#vmenu4 li {
	margin: 0; 
	padding: 0; 
	list-style: none; 
	position: absolute; 
	left: 0;	
}

#vmenu4 li, #vmenu4 a {
	height: 24px; 
	display: block;
}

#testimony01 {top:0;  width: 130px;text-indent: -5000px;}
#testimony02 {top:24px; width: 130px;text-indent: -5000px;}
#testimony03 {top:48px; width:130px;text-indent: -5000px;}

#testimony01 a:hover {background: transparent url(../images/menu_level02-3.gif) -130px 0px no-repeat;}
#testimony02 a:hover {background: transparent url(../images/menu_level02-3.gif) -130px -24px no-repeat;}
#testimony03 a:hover {background: transparent url(../images/menu_level02-3.gif) -130px -48px no-repeat;}


#testimony01.selected {background: transparent url(../images/menu_level02-3.gif) -130px 0px no-repeat;}
#testimony02.selected {background: transparent url(../images/menu_level02-3.gif) -130px -24px no-repeat;}
#testimony03.selected {background: transparent url(../images/menu_level02-3.gif) -130px -48px no-repeat;}