﻿@import url("css/reset.css");

/***
	Index
	=================
	1. General Styles
	2. Header
		2.1. Top Navigation
		2.2. Navigation

	3. Adv Section
	4. Main Section

	5. Content&left

	6. Footer Section
		6.1. Footer top
		6.2. Footer
	        6.3. Footer bottom
	7. Teacher photo
        8. Styling Lists
	=================
***/


/***     1. General Styles     ***/
body {
	color: #373737;
	background-image: url(images/main-bg.gif);
	background-repeat: repeat-x;
	font-size: 12px;
	line-height: 18px;
	background-position: center top;
	background-color: #FFFFFF;
}


a {
	color:#373737;
	text-decoration:none;
}
a:hover { text-decoration:underline; }

h1 {
	color: #b30101;
	text-decoration: none;
	font-weight: normal;
	font-size: 24px;
	font-family: "微軟正黑體", "華康中黑體", "書法家中黑體", Arial, "新細明體";
	text-align: left;
	line-height: 30px;

} 
h2 {
	text-transform:none;
	color: #970000;
	text-decoration: none;
	font-weight: normal;
	font-size: 16px;
	background-image: url(images/wordbg.png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 35px;
	line-height: 35px;
	padding-left: 20px;
	margin-bottom: 20px;
}



h3 {
	font-size: 12px;
	color: #656565;
	line-height: 16px;
padding:5px 0; 
margin:0 0 5px 0; 
border-bottom:1px solid #dadada; 
border-top:1px solid #dadada;}

h3 a {
	font-size: 12px;
	color: #656565;
	text-decoration: none;
	}
	
h3 a:hover {
	font-size: 12px;
	color: #656565;
	text-decoration: underline;
	}


.word {
	font-size: 12px;
	line-height: 18px;
	color: #373737;
}

.word-english {
	font-size: 12px;
	line-height: 18px;
	color: #373737;
	font-family: Arial, Helvetica, sans-serif;
}

.teachername-english {
	font-size: 15px;
	line-height: 20px;
	color: #373737;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
}

.numberword {
	font-size: 18px;
	line-height: 20px;
	color: #373737;
	font-weight: normal;
	font-family: "微軟正黑體", "華康中黑體", "書法家中黑體", Arial, "新細明體";
}


.teachername {
	font-size: 15px;
	line-height: 20px;
	color: #373737;
	font-weight: bold;
}
 
.title {
	font-size: 15px;
	line-height: 22px;
	color: #373737;
	font-family: "書法家中黑體", "華康中黑體", "新細明體";
}

.writeword {
	font-size: 12px;
	line-height: 18px;
	color: #fff;
}

 
p {
	font-size: 12px;
	line-height: 18px;
}

.english {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 13px;
	line-height: 24px;
}
.japanese {
	font-size: 13px;
	line-height: 24px;
}

p.clr, .clr { clear:both; padding:0; margin:0; background:none; }


/*- Widget Title - */
.wtitle { padding:0 0 10px 0; margin:0; }
.wtitle h1 {
	margin:0;
	padding:5px 0;
	color:#970000;
	text-align:left;
	border-bottom:1px solid #dadada;
	font-family: "微軟正黑體", "華康中黑體", "書法家中黑體", Arial, "新細明體";
	font-size: 24px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}


.pic img {
	display:block;
	padding:7px;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 15;
	background-color: #FFFFFF;
}




.line {
	clear: both;
	border-bottom: 1px solid #ddd;
	margin-top: 25px;
	margin-bottom: 40px;
}

.float-left {
	float: left;
	margin-right: 10px;
	margin-bottom: 10px;
}

.float-right {
	float: right;

}

.align-right {text-align: right; }
.align-center {text-align: center; }

/*-- 心理測驗 --*/
.psyche{
   
    background-image:url(images/psyche/psyche-top.jpg);
	height:400px;
	padding-top:200px;
	padding-left:170px;
 }
 
/*--英語俱樂部 --*/
.club{
    width:729px;
	padding:40px 0;

}
.club p{
    width:452px;
	font-family:"華康中黑體", "新細明體"; 
	line-heght:100px;
	color:#656565;
	font-size:11pt;
}

.club img{   
	padding-left:7px;
    padding-top:12px;
}

/*--測驗介紹 --*/
#test{
    width:729px;
	padding:40px 0;
}
#test a{
    display:block;
    padding-top:3px;
	font-family:"華康中黑體";
	font-size:12pt;
	text-align:center;
	letter-spacing:12px;
	line-height:20px;
	color:#666;
	text-decoration: none;
}
#test a:hover{
   color:#660000;
   background-color:#FF9999;
}

#test p{
    padding:6px;
    text-align:center;
	line-height: 20px;
}


/***     2. Header     ***/
#header-wrapper {
	height:200px;
	background-image: url(images/main-bg.gif);
	background-repeat: repeat-x;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	background-position: center top;
	background-color: #FFFFFF;
}
#header { width:1000px; margin:0 auto; position:relative; z-index:2; }




/*     2.1.Top Navigation     */
	#top {
	padding-top: 8px;
	padding-right: 6px;
	padding-bottom: 0;
	padding-left: 0px;
	text-align: right;
	color: #FFFFFF;
}
#top a {
	font-size: 12px;
	color: #fff;
	text-decoration: none;
}
#logo { position:absolute; top:18px; left:0; }
#header-word {
	position:absolute;
	right:0;
	top:41px;
	font-family: "微軟正黑體", "華康中黑體", "書法家中黑體", "新細明體";
	font-size: 4em;
	color: #FFFFFF;

	font-weight: bold;
	line-height: normal;
}


	

	/*     2.2.Navigation  整體設置    */
		#navigation-wrapper {
	position:absolute;
	width:1000px;
	left:0;
	top: 144px;
	z-index: 9999;
}
	
.menu {
	height:45px;
	background-image: url(images/tabright.gif);
	background-repeat: repeat-x;
	background-position: top;
	z-index: auto;
	bottom: 0px;
	width: 1000px;
	list-style-image: none;
	list-style-type: none;
	padding: 0px;
	margin: 0px;
	left: 5px;
	right: 5px;
	}
.menu li {
	display:block;
	position:relative;
	float: left;
	background-image: url(images/tabright.gif);
	background-repeat: no-repeat;
	background-position: right top;
	}
	
/* 設置選單區塊*/
.menu li dl {
	margin:0;
	padding:0;
	
	}
.menu li dl:hover {
	visibility: inherit;
	background-image: url(images/tabright01.gif);
	background-repeat: repeat-x;
	background-position: 0px 0px;
}
	


/* 設置主選單dt */
.menu li dt {
	overflow: hidden;
	}

.menu li dt a {
	font-size:15px;
	color:#535352;
	font-weight:normal;
	text-decoration: none;
	height: 32px;
	display: block;
	padding-top: 14px;
	padding-right: 10px;
	padding-left: 10px;
	width: 146px;
	text-align: center;
}

.menu li dt a:hover {
	visibility: inherit;
	background-image: url(images/tabright01.gif);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	text-decoration: none;
	color: #FFF;
}

.menu #current a{
	visibility: inherit;
	background-image: url(images/tabright01.gif);
	background-repeat: repeat-x;
	background-position: 0px 0px;
	text-decoration: none;
	height: 32px;
	color: #FFF;
}


/* 設置子選單dd */
.menu li dd {
	float:none;
	background-color:#313131;
	height:25px;
	width: auto;
	display: block;
	margin:0;
	padding-top: 9px;
	padding-right: 10px;
	padding-bottom: 0;
	padding-left: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #fff;
}
.menu li dd.last {
	border-bottom:0;
	}
	
.menu li dd a {
	color:#FFF;
	font-size: 12px;
	padding-right: 10px;
	padding-left: 10px;
}

.menu li dd a:hover {
	background-position: 0px 4px;
	background-image: url(images/sub-arrow.gif);
	background-repeat: no-repeat;
	text-decoration: none;
}
/*隱藏子選單*/
.menu li dd { display:none;}
/* 滑鼠滑入顯示子選單 */
.menu li:hover dd, .menu li a:hover dd { display:block;}
/*ie6 hack*/
.menu li:hover,.menu li a:hover { border:0;}
.menu table { border-collapse:collapse;
	padding:0; 
	text-align:left;
	}
	
		


	

	
	
/***     3. Adv Section     ***/
.theme-default #slider {
	width:1000px; /* Make sure your images are the same size */
	height:290px; /* Make sure your images are the same size */
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	z-index: 1;
}
.theme-default1 #slider1 {
	width:850px; /* Make sure your images are the same size */
	height:566px; /* Make sure your images are the same size */
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	z-index: 1;
}
.theme-default2 #slider1 {
	width:850px; /* Make sure your images are the same size */
	height:566px; /* Make sure your images are the same size */
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	z-index: 1;
}
.theme-default3 #slider3 {
	width:639px; /* Make sure your images are the same size */
	height:960px; /* Make sure your images are the same size */
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	z-index: 1;
}




/***     4. Main Section     ***/
#main-wrapper {
	width:1000px;
	background:#FFF;
	overflow:hidden;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 20px;
	padding-bottom: 20px;
}

#main {
	float: right;
	width: 730px;
}
#main_word {
	margin-bottom: 10px;
	margin-top: 10px;
}

#right {
	float: right;
	width: 310px;
}
#right_word {
	margin-bottom: 5px;
}


#clear_both {
	clear: both;
}





/***     5. Content&left     ***/
   #left {
	float: left;
	width: 250px;
	font-size: 12px;
	color: #656565;
}
#left_photo {
	padding-bottom: 30px;
}

#left_contact {
	padding-bottom: 15px;
	background-color: #f4f4f4;
	margin-bottom: 30px;

}


.content {
	margin-bottom: 30px;
	padding-bottom: 15px;
}


#course {
	margin-bottom: 10px;
	padding-bottom: 20px;
}





/* corplogo */
#corplogo {
overflow: hidden; width: 1000px; height: 65px}



/***     6. Footer Section     ***/

	/*     6.1. Footer top     */
	#footer-top-wrapper {
	height:30px;
	background-image: url(images/footer-bg.gif);
	background-repeat: repeat-x;
	background-position: top;
	}


	#footer-top {
	width:1000px;
	padding-top:10px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
	#footer-top a { color:#FFF; }


	#footer-navigation li { display:block; float:left; margin-right:5px; }
	#footer-navigation span {
	margin-right:5px;
	color: #FFF;
}
	#back-top {
	float:right;
	background:url(images/back-top.png) no-repeat right;
	padding-right:26px;
}

	/*     6.2. Footer     */
	#footer-wrapper {
	overflow:hidden;
	background-color: #2e2e2e;
}
	#footer {
	width:1000px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	padding-bottom: 0px;
}

	.footer-widget { width:325px; }
	.footer-widget a { color:#fff;  }

	.footer-widget.right { float:right; }
	.footer-widget li {
	margin-bottom: 2px;
}
	/*     6.3. Footer bottom    */
	#footer-bottom-wrapper {
	height:25px;
	background-color: #2e2e2e;
}
	#footer-bottom {
	width:1000px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
}
	.footer-bottom-left {
	float:left;
	color: #FFF;
}
	.footer-bottom-left a {
	color: #FFF;
}
	.footer-bottom-left a:hover {
	text-decoration:none; 
}






/*     7 TEACHER-PHOTO    */
#teacher-photo {
	width: 710px;
	height: 100px;
		margin: 0 auto;
}



#teacher ul.teachermenu
{
	width: 100%;
	list-style: none;
	margin: 0;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}


#teacher ul.teachermenu li
{
	margin: 0px;
	float: left;
	width: 83px;
	height: 93px;
	overflow: hidden;
	position: relative;
	margin: 0px;
	padding-right: 5px;

}


#teacher ul.teachermenu li a:hover img
{
    position: absolute;
    left: 0px;
    top: -93px;
}


/*     8 Styling Lists    */
/*- List -*/
.list { height:30px; color:#373737; font:normal 12px/13px;  clear:both; padding:0 0 10px 0; }
.list li { float:left; margin:0; padding:0 5px 0 0; }
.list li a { display:block; float:left; padding:9px 10px; text-align:center; text-decoration:none; color:#373737; }
.list li a:hover { color:#373737; background:#f0f0f0; padding:8px 9px; border:1px solid #dadada; }
.list li a.active { color:#373737; background:#f0f0f0; padding:8px 9px; border:1px solid #dadada; }
div.tabs_list { border:1px solid #dadada; padding:0; margin:0; }
div.tabs_list ul {
	list-style:none;
	text-align:left;
	padding: 10px;
}
div.tabs_list ul li { font:normal 12px ; padding:0; margin:0; }
div.tabs_list ul li a {
	font-size: 11px;
	font-weight: bold;
	color: #49190e;
	text-decoration: underline;
	font-family: Arial, Helvetica, sans-serif;
	background-image: url(images/more.gif);
	background-repeat: no-repeat;
	background-position: right;
	padding-right: 10px;
	float: right;
}


/*     9 holder-QA    */
.holder {width:715px; margin:5px; padding:5px; border:1px solid #ddd; background:#f8f8f8;}


a.hid {
	color:#373737;
	text-decoration:none;
	outline-style:none;
	position:relative;
	z-index:500;
	font-size: 16px;
}
a.hid em {
	display:none;
	font-size: 12px;
	line-height: 16px;
}
a.hid:hover {text-decoration:none;}
a.hid:active, a.hid:focus {background:#f8f8f8;}
a.hid:active span, a.hid:focus span {display:none;}
a.hid:active em, a.hid:focus em {
	display:block;
	background:#f8f8f8;
	color:#373737;
	width:715px;
	font-style:normal;
	cursor:default;
	margin:5px;
	padding:5px;
	position:absolute;
	border:1px solid #ddd;
	border-width:0 1px 1px 1px;
	left: -5px;
	top: -5px;
}


/*     10QA     */

#qa {
	background-image: url(images/working-holiday/Q.gif);
	line-height: 3em;
	padding-left: 40px;
	background-repeat: no-repeat;
	background-position: left 5px;
	font-size: 14px;
	font-family: "微軟正黑體", "華康中黑體", "書法家中黑體", Arial, "新細明體";
}
#qa a:link {
text-decoration: none
}
#qa a:visited {
text-decoration: none
}
#qa a:hover {
	text-decoration: none;
	color: #6C0005;
}
#qa a:active {
text-decoration: none
}
#aq {
	background-image: url(images/working-holiday/A.gif);
	line-height: 22px;
	padding-left: 40px;
	background-repeat: no-repeat;
	color: #373737;
	font-size: 12px;
	padding-top: 5px;
	margin-bottom: 5px;
}


/* Table 1 Style */
table.table1{
    font-size: 12px;
    line-height: 18px;
    font-style: normal;
    border-collapse:separate;
}

.table1 td{
    padding:2px;
    border: 1px solid #FFFFFF;

}

/*     12VIDEO     */
ul.playlist {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 250px;
	float: right;
}
ul.playlist li {
	margin: 2px;
	float: right;
}
ul.playlist li a img {
	border: 0;
	vertical-align: middle;
}

.tv {
	width: 730px;
	height: 380px;
	background-color: #050007;
}
.video {
	float: left;
	width: 480px;
	height: 380px;
}
