/*

Design by TEMPLATED

http://templated.co

Released for free under the Creative Commons Attribution License

*/



body {

	margin: 0;

	padding: 0;

	background: #EFEFEF url(images/main-bg.jpg) repeat;

	font-family: custom-serif;

	font-size: 16px;

	font-weight: 200;

	color: #000000;

}



h1, h2, h3 {

	margin: 0;

	padding: 0;

	font-weight: 300;

	color: #221D1D;

}



h1 {

	font-size: 2em;

}



h2 {

	font-size: 2.4em;

}



h3 {

	font-size: 1.6em;

}



p, ul, ol {

	margin-top: 0;

	line-height: 180%;

}



ul, ol {

}



a {

	text-decoration: none;

	color: #091478;

}



a:hover {

}

@font-face{

    font-family: custom-serif;

    src: local("DFKai-sb"), local("DFKai-sb");

    unicode-range: U+0040-007A;

}



@font-face{

    font-family: custom-serif;

    src: local("DFKai-sb"), local("DFKai-sb");

    unicode-range: U+4E00-9FFF;

}

	

@font-face{

    font-family: custom-serif;

    src: local("Times New Roman"), local(Times);

    unicode-range: U+0030-0039;

}





#wrapper {

	padding: 0;

	background: url(images/main-image-bg.jpg) no-repeat center top;

}



/* Header */



#header {

	width: 940px;

	height: 150px;

	margin: 0 auto;

}



/* Logo */



#logo {

	width: 960px;

	height: 150px;

	margin: 0px auto 30px auto;

	color: #000000;

}



#logo h1{

	margin: 0;

	padding: 0;

}



#logo h1 {

	line-height: 150px;

	letter-spacing: -1px;

	text-align: center;

	text-transform: lowercase;

	font-size: 1.8em;

}





#logo a {

	border: none;

	background: none;

	text-decoration: none;

	color: #054175;

}



/* Search */



#search {

	float: right;

	width: 280px;

	height: 60px;

	padding: 20px 0px 0px 0px;

	background: #323435;

	border-bottom: 4px solid #0974C4;

}



#search form {

	height: 41px;

	margin: 0;

	padding: 10px 0 0 20px;

}



#search fieldset {

	margin: 0;

	padding: 0;

	border: none;

}



#search-text {

	width: 170px;

	padding: 6px 5px 2px 5px;

	border: none;

	background: #000000;

	text-transform: lowercase;

	font: normal 11px Arial, Helvetica, sans-serif;

	color: #464032;

}



#search-submit {

	width: 50px;

	height: 23px;

	border: 1px solid #525252;

	background: #525252;

	font-weight: bold;

	font-size: 10px;

	color: #000000;

}









/* Menu */



#menu {

	overflow: hidden;

	width: 1000px;

	padding: 0px 0px;

	margin: 0px auto 30px auto;

	background: #064C8A;

	border-radius: 20px 0px 20px 0px;

	font-size: 20px;

	color: #000000;

}



#menu ul {

	position: relative;

	margin: 0px 0px 0px 0px;

	padding: 0px 0px;

	list-style: none;

	line-height: normal;

	text-align: center;

	

}



#menu ul li {

	padding: 10px 5px 5px 10px;/*內距*/

	margin-right: 10px; /*文字間距*/

	margin-top: 15px;  /*與上方文字間距*/

	display: inline-block; /*排列方式*/

	

}



#menu ul li a, #menu ul li span {

	text-decoration: none;

	color:#FFFFFF;

	letter-spacing: -1px;

	font-size: 1em;

	font-family:custom-serif;

	

	

}



/*多選項-主選項*/

#menu ul li span b {

	margin-left: 6px; /*間距*/

	font-size: 1em; /*字型大小*/

	position: relative;

	

}





/*選項框*/

.dropotron {

	background: rgba(36,148,218,0.9);  /*選項框底色*/

	border-bottom: solid 1px #1f71a8;  /*選項框下框線*/

	text-shadow: 2px 1px 1px #005791;  /*字體陰影*/

	list-style: none;       /*項目樣式*/

	margin: 0;   /*與上方元素間距*/

	padding: 15px 10px 15px 10px;  /*元素內距*/

	min-width: 200;   /*最小寬度*/

	border-radius: 5px;  /*圓角*/

	font-family:custom-serif;   /*字形*/

}



.dropotron a, .dropotron span {

	color: #FFFFFF;

	text-decoration: none;

	letter-spacing: -1px;

	display: block;

	width: 100%;

	position: relative;

	

}





.dropotron li {

	padding: 3px 15px 3px 10px;

	margin: 2px 0 2px 0;

	border-radius: 3px;

}





/* Page */



#page {

	overflow: hidden;

	width: 940px;

	margin: 0px auto;

	padding: 30px 30px;

	background: #FFFFFF;

	border: 1px solid #D4D4D4;

}



/* Content */



#content {

	float: left;

	width: 600px;

	padding: 10px 0px 0px 0px;

}



.post {

}



.post .title {

	margin-bottom: 10px;

	padding: 12px 0px 20px 0px;

	letter-spacing: -1px;

	color: #101010;

}



.post .title a {

	color: #101010;

	border: none;

}



.post .meta {

	height: 30px;

	border-bottom: 1px solid #292929;

	margin: 0px;

	padding: 0px 0px 0px 0px;

	text-align: left;

	font-family: custom-serif;

	font-size: 13px;

	font-weight: bold;

}



.post .meta .date {

	float: left;

	height: 24px;

	padding: 3px 15px;

	color: #BBBBBB;

}



.post .meta .posted {

	float: right;

	height: 24px;

	padding: 3px 15px;

	color: #BBBBBB;

}



.post .meta a {

	color: #BBBBBB;

}



.post .entry {

	padding: 0px 0px 20px 0px;

	padding-bottom: 20px;

	text-align: justify;

}



.links {

	padding-top: 20px;

	font-size: 12px;

	font-weight: bold;

}







/* Calendar */



#calendar {

}



#calendar_wrap {

	padding: 20px;

}



#calendar table {

	width: 100%;

}



#calendar tbody td {

	text-align: center;

}



#calendar #next {

	text-align: right;

}



/* Footer */



#footer {

	overflow: hidden;

	width: 1000px;

	height: 200px;

	margin: 0 auto;

	padding: 40px 0 15px 0;

	border-top: 1px solid #D4D4D4;

}



#footer p {

	margin: 0;

	padding-top: 20px;

	line-height: normal;

	text-align: center;

	color: #000000;

}



#footer a {

	color: #000000;

}



#three-columns {

	overflow: hidden;

	width: 1000px;

	margin: 0px auto;

	padding: 30px 0px;

	border-bottom: 1px solid #D4D4D4;

	color: #000000;

}



#three-columns h2 {

	padding: 0px 0px 20px 0px;

	font-size: 30px;

	color: #000000;

}



#three-columns #column1 {

	float: left;

	width: 290px;

	margin-right: 40px;

}



#three-columns #column2 {

	float: left;

	width: 290px;

}



#three-columns #column3 {

	float: right;

	width: 300px;

}



.link-style {

	display: inline-block;

	margin-top: 10px;

	padding: 5px 15px;

	background: #064C8A;

	border-radius: 10px 0px 10px 0px;

	color: #FFFFFF;

}



.link-style2 {

	display: inline-block;

	margin-top: 10px;

	padding: 10px 25px;

	background: #064C8A;

	border-radius: 10px 0px 10px 0px;

	font-size: 20px;

	color: #FFFFFF;

}



#welcome {

	width: 1000px;

	margin: 0px auto;

	padding: 30px 0px;

	border-bottom: 1px solid #D4D4D4;

	color: #000000;

	border-top: 1px solid #D4D4D4;

}



#welcome h2 {

	padding: 0px 0px 20px 0px;

}



#welcome h2 a {

	color:#FF7744;

}



#welcome a {

	color: #000000;

}

/*

#banner {

	overflow: hidden;

	width: 1000px;

	margin: 0px auto;

	padding: 30px 0px;

	border-top: 1px solid #D4D4D4;

	border-bottom: 1px solid #D4D4D4;

}

*/



#page-bottom {

	

	position:relative;

	background: #064C8A ;

	border: solid 1px #ceeaff;

	padding: 10px 45px 0 45px;

	overflow: hidden;

	width: 1000px;

	margin: 0px auto 30px auto;

	color:#FFFFFF;

}



#page-bottom a {

	color: #F5F5F5;

}



#page-bottom h2, #page-bottom h3, #page-bottom h4 {

	color: #FFFFFF;

}



#page-bottom ul {

	list-style: none;

}



#page-bottom ul li {

	border-top: dotted 1px #8F8F8F;

	padding: 15px 0 15px 0;

}



#page-bottom ul li.first {

	padding-top: 0;

	border-top: 0;

}



#page-bottom-content {

	width: 1000px;

	float: left;

	font-family:custom-serif;

	margin:15px 0px 20px -10px;

	

}



table { 

  border-color:#92bdce;

  font-family:custom-serif; 

  font-size:18px; 

} 



ul.pagination {

    display: inline-block;

    padding:0;

    margin: 0;

	position:relative;

	right:-40%;

}



ul.pagination li {display: inline;}



ul.pagination li a {

    color: black;

    float: left;

    padding: 8px 16px;

    text-decoration: none;

}



ul.pagination li a.active {

    background-color: #9BB7D0;

    color: white;

}



ul.pagination li a:hover:not(.active) {background-color: #ddd;}



#td TextVerticalAlign{

	font-family: custom-serif;

}

	.yotubeLogo{

		position: relative;

		display: block;

		height: 1.5em;

		width: 1.5em;

		transition: 0.3s;

		cursor: pointer;

	}

	.yotubeLogo img{

		height: 100%;

	}

	.yotubeLogo:hover{

		transform: scale(1.03);

	}

	.yotubeLogo::before{

		content: attr(data-directions);

		position: absolute;

		bottom: 110%;

		left: 100%;

		background-color: #000000e0;

		color: #fff;

		padding: 10px 30px;

		border-radius: 5px;

		white-space: nowrap;

		opacity: 0;

		visibility: hidden;

		transition: opacity 0.3s;

		z-index: 1;

		pointer-events: none;

		border: 1px solid gray;

	}

	.yotubeLogo:hover::before {

		opacity: 1;

		visibility: visible;

	}