@import url("reset.css");

*{ color:#333;}
body,html{
	background-color:#f4f0e4;
	font-size:14px;
	font-family:Arial, "微軟正黑體", sans-serif;
	width:100%;
	height:100%;
}
body{
	background:url(../images/wrapper_bg.png) repeat-x left top;}
/*-----#WRAPPER---------*/
#WRAPPER{ 
	width:960px;
	margin:0 auto ;
	padding:0 10px 100px;
	min-width:960px;
	height:auto;
	min-height:900px;
	background-color:#FFF;
	box-shadow:1px -5px 3px #888,-1px -5px 3px #888;
	background:url(../images/header_bg.png) repeat-x left top #fff;
	}	

/*-----#HEADER---------*/
#HEADER{
	width:960px;
	margin:0 auto;
	background:url(../images/header_bg.png) repeat-x left top;
	height:120px;
	overflow:hidden;}
#HEADER h1{
	float:left;

}
#HEADER h1 a{
	display:block;
	width:330px;
	height:120px;
	background:url(../images/logo.png) no-repeat left top;
	text-indent:-9999px;	
}


/*-----#TOP_FUNCTION---------*/

#TOP_FUNCTION{
	float:right;
	}
#TOP_FUNCTION ul{
	overflow:hidden;
	margin:10px 0px 0px;
	}


#TOP_FUNCTION li{
	float:left;
	
	}
#TOP_FUNCTION li:last-child{border-right:none;}
#TOP_FUNCTION li a{
	display:block;
	line-height:1em;
	font-size:1em;
	color:#004f7f;
	text-decoration:none;
	padding:0 10px 0;
	border-right:1px solid #004f7f;
	line-height:1.1em;
	
	}
#TOP_FUNCTION li:last-child a{ border-right:none;}
#TOP_FUNCTION li a:hover{
	text-decoration:underline;
	}
/*-----#SEARCH---------*/	
#SEARCH{
	float:right;
	margin-top:70px;
	margin-right:-100px;
	overflow:hidden;}
.SEARCH_teacher{
	overflow:hidden;
	float:left;}	
#SEARCH .searchinput, .SEARCH_teacher .searchinput{
	width:150px;
	height:20px;
	padding-left:15px;
	border: 1px solid #ccc;
	border-right:none;
	border-radius: 5px 0 0 5px;
	float:left;
	}
#SEARCH .searchbutton, .SEARCH_teacher .searchbutton {
	float:right;
	padding:0 25px;
	width:50px;
	height:30px;
	outline: none;
	cursor: pointer;
	background: url(../images/search.png) no-repeat center center #f2f2f2;
	border: 1px solid #cccccc;
	border-radius: 0 5px 5px 0;
	}
	/* Fixes submit button height problem in Firefox */
.tfbutton::-moz-focus-inner {
	  border: 0;
	}
.searchbutton:hover{ box-shadow:inset 0px 2px 3px #fff,inset 0px -2px 3px #e5e4e4;}
/*-----nav---------*/	
nav{
	width:95%;
	border:1px solid #888;
	margin:0 auto;
	border-radius:5px;
	height:55px;
	background:url(../images/nav_bg.png) repeat-x center top;
	box-shadow:0px 0px 3px #888;
	margin-top:10px;
}
nav ul{
	overflow:hidden;
	margin-left:15px;}
nav ul li{
	float:left;
	background:url(../images/nav_b.png) no-repeat right center;}
nav ul li:last-child{background:none;}
nav ul li a{
	text-decoration:none;
	display:block;
	line-height:55px;
	font-size:1.2em;
	letter-spacing:0.1em;
	font-weight:bold;
	color:#333;
	text-shadow:1px 1px 1px #fff;
	padding:0 10px 0 15px;

	}
nav ul li a:hover{
	color:#004f7f;
	background:url(../images/nav_bg_hover.png) repeat-x left top;}
	
	
ul.dropdown-menu{}
ul.dropdown-menu li{ float:none; background:none; margin-bottom:5px;}
ul.dropdown-menu li a{ font-size:1.1em; text-shadow:1px 1px 0 #FFF;  border-bottom:1px dashed #e2e2e2; border-top:1px solid #fff; text-decoration:none;}
ul.dropdown-menu li a:hover{ background: url(../images/sub_nav_bg.png) repeat-x left bottom #e6e8e8 ; border-bottom:1px solid #CCC; border-top:1px solid #d2d2d2; border-top:1px solid #f2f2f2;}

/*-----#SLIDER---------*/	
#SLIDER{
	position:relative;	
	width:95%;
	margin:30px auto;
}
#SLIDER_SHOW{
	width:910px;
	height:240px;
	overflow:hidden;
	position:relative;
	}
#SLIDER_BOX{
	position:absolute;
	top:0;
	left:0;
	}
#SLIDER_BOX{ width:4550px;}
#SLIDER_BOX ul{}
#SLIDER_BOX li{ float:left;}
#PREV{ position:absolute; top:180px; left:0px;}
#NEXT{ position:absolute; top:180px; left:866px;}

/*-----#CONTENT---------*/
#CONTENT{
	margin:0 auto;
	padding:0 25px 30px;
	overflow:hidden;
	width:100%;}
/*-----#CONTENT_L---------*/	
#CONTENT_L{ float:left; width:26%; margin-left:3px;}
/*-----#CALENDAR---------*/
#CALENDAR{}
.slection_title{
	font-size:2.3em;
	font-weight:bold;	
	line-height:50px;
}
.slection_title h2{color:#0b88c4; letter-spacing:-0.1em}
.slection_content{
	margin:10px 0}
	
.slection_content ul{}
.slection_content li{ background:url(../images/calendar_li.png) no-repeat left center; margin: 10px 0 20px 5px;}
.slection_content li a{ text-decoration:none ; letter-spacing:0.2em; border-bottom:1px dashed #CCC; padding:5px 0 5px 25px;}
.slection_content li a:hover{ color:#0b88c4; background:url(../images/calendar_li.png) no-repeat left center#eaf8ff; }

/*-----#BANNER---------*/

#BANNER{padding-top:10px; margin-bottom:50px;}
#BANNER ul{}
#BANNER li{ margin:10px 0;}

/*-----#CONTENT_R---------*/	
#CONTENT_R{ float:left; width:70%; overflow:hidden;}

/*-----#HORNER---------*/
#HORNER{ float:left; width:45%;}

.horner_content{ border-bottom:1px dashed #d2d2d2; padding:5px 5px 10px 5px;}
.horner_content:nth-child(odd){background-color:#f2f2f2; }
.horner_content img{ float:left; border:1px solid #adadad; margin-right:5px;}
.horner_content h4{color:#3399cc; font-weight:bold; padding:3px 0;}
.horner_content p{font-size: 0.8em; line-height: 1.2em;}
.horner_content p>a{color:#3399cc; text-decoration:none;}
.horner_content p>a:hover{color:#3399cc; text-decoration:underline;}
/*-----#NEWS---------*/
#NEWS{ float: right; width:50%;}
	
/*-----footer---------*/	
footer{
	position:fixed;
	z-index:999;
	left:0;
	bottom:0;
	width:100%;
	height:117px;
	background:url(../images/footer_bg.png) repeat-x left bottom;}
/*-----#FOOTER---------*/
#FOOTER a{ float:right; margin-top:75px;}
#FOOTER{
	clear:both;
	overflow:hidden;
	height:117px;
	width:960px;
	margin:0 auto;}	

/*-----COPYR---------*/
#COPYR{
	float:right;
	width:330px;
	height:117px;
	background:url(../images/footer_img.png) no-repeat center bottom;}
#COPYR ul{ padding:20px 0px 0px 45px;}
#COPYR li{ margin:3px 0px ; font-size:0.85em;}


/*-----icon---------*/
.icon{width:44px; height:44px;float:left; margin-right:5px; display:block;}
.icon_calendar{background:url(../images/calendar.png) no-repeat center center;}
.icon_horner{background: url(../images/horner.png) no-repeat center center;}
.icon_news{background: url(../images/news.png) no-repeat center center;}
.icon-title{background: url(../images/title.png) no-repeat left center; width:25px; height:15px;}
.icon_arrow_r{ background:url(../images/arrow-right-thick.png) no-repeat left center; width:18px; height:14px; display: inline-block;}
.icon_gallery{ background:url(../images/gallery.png) no-repeat center; width:24px; height:24px;  display:block;}


/*-----width---------*/
.w_p10{ width:10%;}
.w_p15{ width:15%;}
.w_p20{ width:20%;}
.w_p25{ width:25%;}
.w_p30{ width:30%;}
.w_p40{ width:40%;}
.w_p50{ width:50%;}
.w_p60{ width:60%;}
.w_p70{ width:70%;}
.w_p80{ width:80%;}
.w_p90{ width:90%;}
.w_p100{ width:100%;}