@import url("../css/normalize.css");

/* HTML5 Boilerplate */
html, button, input, select, textarea {color:#333;}
body{font-size:1em; line-height:1.4; 
	font-family:Arial, Helvetica, "Microsoft JhengHei", "PMingLiU", sans-serif;
	background:url(../images/bg.png) repeat-x;
	-webkit-font-smoothing:antialiased;
}

::-moz-selection {background:#b3e0fc; text-shadow:none;}
::selection {background:#b3e0fc; text-shadow:none;}

hr{display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0;}

/* 移除圖片底下間隙 */
img{vertical-align: middle;}

/* 移除fieldset預設樣式 */
fieldset{border:0; margin:0; padding:0;}

/* 只允許文字區域垂直調整大小 */
textarea{resize:vertical;}

a{text-decoration:none;}
a, a:hover, a:active, a:focus {outline:0;}
a:visited{color:#8c41a1;}


/* Clearfix: contain floats */
.clearfix:before,
.clearfix:after {
    content: ""; /* 1 */
    display: table; /* 2 */
}
.clearfix:after{clear: both;}
/* For IE 6/7 only */
.clearfix{*zoom: 1;}

/* --- GLOBAL --- */
.wrap{width:980px; margin:0 auto; }
.JhengHei{font-family:"微軟正黑體", "Microsoft JhengHei";}
.PMingLiU{font-family:"新細明體", "PMingLiU";}
.floatLeft{float:left;}
.floatRight{float:right;}
.required{color:#c00;}
.explanation{color:#d83d3d; font-weight:normal; font-size:12px;font-family:Arial, "新細明體", "PMingLiU"; line-height:1.4;}
#ui-datepicker-div{font-size:12px;}


/* ---------------------------------------------------------------------------------------------- */
/* --- Header --- */
#header-container{height:175px; position:relative;}
#header-container header{height:135px;}
header .logo-title{margin:0; background:url(../images/tspen-logo.png) no-repeat; width:411px; height:96px; 
	position:absolute; top:20px; left:20px; text-indent:-9999em;}
	
header .top-info{float:right; text-align:right; font-size:12px; margin-right:20px;}
header .top-info{padding:20px 10px 10px 0; color:#ccc;}
header .top-info a{color:#585455;}

header .top-login{position:absolute; top:40px; right:20px; z-index:999; font-size:12px; color:#666;}
header .top-login{background:#efefef; padding:8px 15px;
	border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
header .top-login .member-id{width:110px; padding:5px;}
header .top-login .password{width:100px; padding:5px;}
header .top-login .btn-forgot{padding:3px 8px; vertical-align:0px;}
header .top-login a{color:#666;}
header .top-login a:hover{color:#111;}
header .top-login .btn-login{margin-left:5px;}
/*header .top-login .btn-login:hover{background:#db5106; color:#fff;}*/


/* --- Menu --- */
#header-container nav{z-index:200;}
#menu{height:40px; width:942px; margin:0 auto; padding:0; list-style:none;}
#menu li{float:left; position:relative;}
#menu li a:hover, #menu li a:active{text-decoration:none; }
#menu a {display:block; color:#fff; text-decoration:none; height:58px;}
#menu ul {position:absolute; top:40x; left:0; z-index:101; background:#fff; display:none; opacity:0; padding:0; margin:0;
	box-shadow:0 2px 3px rgba(0,0,0,.3); -moz-box-shadow:0 2px 3px rgba(0,0,0,.3); -webkit-box-shadow:0 2px 3px rgba(0,0,0,.3);}
#menu ul li {position:relative; border-bottom:1px solid #ddd; border-top:none; margin:0; font-size:12px; width:100%; list-style:none;}
#menu ul li a {display:block; padding:8px 10px; height:18px; line-height:18px; color:#333;}
#menu ul li a:hover {background-color:#e9e9e9; color:#d54605;}
#menu ul ul {left:107px; top:0px;}
#menu .menulink{background-image:url(../images/nav.png?20160426); background-repeat:no-repeat; height:40px; text-indent:-9999em;}

/* 學會會訊暨繼續教育 版本 */
/*
#menu .about      {width:94px; background-position:0 0;}
#menu .news       {width:97px; background-position:-94px 0;}
#menu .events     {width:96px; background-position:-191px 0;}
#menu .publication{width:177px; background-position:-287px 0;}
#menu .education  {width:128px; background-position:-464px 0;}
#menu .team       {width:160px; background-position:-592px 0;}
#menu .member     {width:97px; background-position:-752px 0;}
#menu .people     {width:91px; background-position:-849px 0;}

#menu .about:hover      {background-position:0 bottom;}
#menu .news:hover       {background-position:-94px bottom;}
#menu .events:hover     {background-position:-191px bottom;}
#menu .publication:hover{background-position:-287px bottom;}
#menu .education:hover  {background-position:-464px bottom;}
#menu .team:hover       {background-position:-592px bottom;}
#menu .member:hover     {background-position:-752px bottom;}
#menu .people:hover     {background-position:-849px bottom;}
*/
/*學會會訊
#menu .about      {width:104px; background-position:0 0;}
#menu .news       {width:108px; background-position:-104px 0;}
#menu .events     {width:108px; background-position:-212px 0;}
#menu .publication{width:107px; background-position:-320px 0;}
#menu .education  {width:139px; background-position:-427px 0;}
#menu .team       {width:169px; background-position:-566px 0;}
#menu .member     {width:109px; background-position:-735px 0;}
#menu .people     {width:96px; background-position:-844px 0;}

#menu .about:hover      {background-position:0 bottom;}
#menu .news:hover       {background-position:-104px bottom;}
#menu .events:hover     {background-position:-212px bottom;}
#menu .publication:hover{background-position:-320px bottom;}
#menu .education:hover  {background-position:-427px bottom;}
#menu .team:hover       {background-position:-566px bottom;}
#menu .member:hover     {background-position:-735px bottom;}
#menu .people:hover     {background-position:-844px bottom;}
*/
#menu .about      {width:94px; background-position:0 0;}
#menu .news       {width:101px; background-position:-94px 0;}
#menu .events     {width:102px; background-position:-195px 0;}
#menu .member     {width:104px; background-position:-297px 0;}
#menu .education  {width:131px; background-position:-401px 0;}
#menu .publication{width:153px; background-position:-532px 0;}
#menu .team       {width:164px; background-position:-685px 0;}
#menu .people     {width:91px; background-position:-849px 0;}

#menu .about:hover      {background-position:0 bottom;}
#menu .news:hover       {background-position:-94px bottom;}
#menu .events:hover     {background-position:-195px bottom;}
#menu .member:hover     {background-position:-297px bottom;}
#menu .education:hover  {background-position:-401px bottom;}
#menu .publication:hover{background-position:-532px bottom;}
#menu .team:hover       {background-position:-685px bottom;}
#menu .people:hover     {background-position:-849px bottom;}


/* --- Sub Menu --- */
.sub-menu h3{margin:0; background:#db5106; color:#fff; font-size:21px; width:160px; height:45px; line-height:40px; text-indent:1em;
	border-top-left-radius:5px; border-bottom-left-radius:5px; 
	-moz-border-top-left-radius:5px; -webkit-border-bottom-left-radius:5px;}
.sub-menu ul{margin:0 0 24px; padding:0; list-style:none;}
.sub-menu ul li a{display:block; border-bottom:1px solid #ccc; 
	background-image:url(../images/btn-icon-arr2.png); 
	background-position:95% 50%;
	background-repeat:no-repeat;
	font-size:12px; font-weight:bold; color:#666; padding:12px;}
.sub-menu ul li a:hover, .sub-menu ul li .current{
	color:#db5006; background-color:#fff2eb; border-color:#f5b693;
	background-image:url(../images/btn-icon-arr.png); }


/* --- Container --- */
#content-container{ 
	height:auto!important;min-height:400px;height:400px;
	padding-top:28px; padding-bottom:30px;
	position:relative;}
.page-left{float:left; width:160px; margin-left:10px;}
.page-right{float:right; width:800px; margin-right:10px;}
.page-right .content{width:760px; padding:20px 20px 20px 30px; line-height:180%; color:#424242;}
.page-right .content .s-title{color:#db5106; font-size:18px; font-family:"微軟正黑體", "Microsoft JhengHei"}


/* --- title & breadcrumb --- */
.title-breadcrumb{background:url(../images/title-bg.png) no-repeat; height:45px;}
.title-breadcrumb h2{margin:0; font-size:21px; line-height:45px; padding-left:30px;}
.title-breadcrumb small{float:right; text-align:right; font-size:12px; color:#777; font-weight:normal; padding-right:20px;}
.title-breadcrumb a{color:#777; text-decoration:none;}


/* --- Search Block --- */
.search-block{border:1px solid #b4d7ed; padding:10px; background:#def2ff; font-size:12px;}


/* --- Menu Tabs --- */
.menu-tabs{margin:0; padding:0; list-style:none; font-size:12px; border-bottom:1px solid #ddd; margin-bottom:20px;}
.menu-tabs li{float:left; margin-bottom:-1px; position:relative; display:block;}
.menu-tabs li a{display:block; padding:5px 15px;}
.menu-tabs li.active a, 
.menu-tabs li.active a:hover{
	color:#db5006; background-color:#fff; border:1px solid #ddd; border-bottom-color:transparent; cursor:default;}
.menu-tabs li a:hover{border-color:#ddd #ddd #ddd; text-decoration:none; background-color:#f4f4f4; color:#db5006;}
.menu-tabs li a{margin-right:2px; border:1px solid transparent; border-radius:4px 4px 0 0; color:#555;}


/* --- Alert --- */
.alert{border:1px solid #b4d7ed; background:#def2ff; 
	font-size:13px; color:#1388d3;
	text-align:center; padding:20px 20px; 
	border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
.alert h4{margin:0; font-size:16px;}
.alert a{color:#333;}
.alert.alert-warning{background:#fcf8e3; border-color:#f0ddb6; color:#c48519;}

/* --- Quick Links --- */
.left-quick-links{margin:0; padding:5px 0; list-style:none; }
.left-quick-links li{margin:8px 0; text-align:center;}
.left-quick-links a{border:1px solid #ddd; display:block; width:160px; overflow:hidden;
	border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
.left-quick-links a:hover{border:1px solid #e99b70;}


/* --- Left Banners ---- */
.left-banners{margin:0; padding:5px 0; list-style:none; display:none;}
.left-banners ul{margin:0; padding:5px 0; list-style:none;}
.left-banners ul li{margin:8px 0; text-align:center;}
.left-banners ul li a{display:inline-block; width:155px; overflow:hidden; border:1px solid #ccc;
	border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
.left-banners ul li a:hover{box-shadow:0 0 3px rgba(0,0,0,.3);}


/* --- Page --- */
.page{font-size:12px; padding:3px; margin:14px 0px; text-align:center;}
.page span a, .page span a:hover, .page .current, .page .disabled{padding:3px 4px; margin:2px;
	border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;}
.page a{color:#333; border:1px solid #aaa; cursor:pointer; text-decoration:none; }
.page a:hover{color:#db5006; background:#fff2eb; border:1px solid #f5b693;}
.page .current{color:#333; font-weight:bold;}
.page .disabled{color:#ddd; border:1px solid #ddd;}


/* --- Footer --- */
footer{
	border-top:3px solid #d54605;
	background:url(../images/footer-bg.png) center 0 no-repeat;
	color:#666; font-size:12px; line-height:180%;
	padding:15px 0 20px;}
footer a, footer a:visited{color:#666;}
footer a:hover{color:#111;}
footer address{ font-style:normal; padding-left:20px; text-align:center;}
footer .upgrade-browser{clear:both; margin:5px auto; color:#d13333; text-align:center;}
footer .upgrade-browser strong{color:#d13333; border-bottom:1px dotted #d13333;}
footer i{margin-right:5px; vertical-align:-2px;}
footer .i-address{background:url(../images/footer-icon-address.png) no-repeat; width:13px; height:13px; display:inline-block;}
footer .i-fax{background:url(../images/footer-icon-fax.png) no-repeat; width:13px; height:13px; display:inline-block;}
footer .i-tel{background:url(../images/footer-icon-tel.png) no-repeat; width:13px; height:13px; display:inline-block;}
footer .i-email{background:url(../images/footer-icon-email.png) no-repeat; width:13px; height:13px; display:inline-block;}


/* --- Form --- */
/* --- Input, Select, Textarea --- */
input[type=text], input[type=password], input[type=email], input[type=tel], input[type=date], textarea, select{
	box-sizing:border-box;
	display:inline-block;
	padding:4px 6px;
	font-size:13px; 
	line-height:16px;
	color:#555;
	background:#fff;
	border:1px solid #bbb; 
	border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;
	box-shadow:inset 0 1px 1px rgba(0,0,0,.05); 
	-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.05); 
	-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05); 
	-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
select{padding:4px; border:1px solid #ccc;}
select option{background:#fff;}
input[type=text]:focus, input[type=password]:focus, input[type=email]:focus, input[type=date]:focus, textarea:focus, select:focus{
	outline:0;
	border:1px solid #67cfff; 
	webkit-appearance:none;
	border-color:rgba(82,168,236,.8);
	-moz-box-shadow:0 0 8px rgba(82,168,236,.6);
	box-shadow:0 0 8px rgba(82,168,236,.6);
}
input[type=file]{margin-bottom:3px !important;}
input.bir{width:100px;}
/* --- ! --- */


/* --- Buttons --- */
input[type=submit], input[type=button], input[type=reset], .btn{
	-webkit-appearance:none;
	display:inline-block; *display:inline; *zoom:1;
	font-weight:bold; font-size:13px; color:#333; line-height:1.3;
	text-align:center; vertical-align:middle;
	white-space:nowrap;
	padding:5px 12px;
	-webkit-user-select:none;
	background:#fff;
	border:1px solid #aaa;
	border-radius:3px; -moz-border-radius:3px; -webkit-border-radius:3px;
	box-shadow:0 1px 3px rgba(0%,0%,0%,.1); -moz-box-shadow:0 1px 3px rgba(0%,0%,0%,.1); -webkit-box-shadow:0 1px 3px rgba(0%,0%,0%,.1);
	cursor:pointer;
	text-decoration:none;
}
input[type=submit]:hover, input[type=button]:hover, input[type=reset]:hover, .btn:hover{
	background:#ebebeb;
	color:#333;
	text-decoration:none;
	
}
input[type=submit]:active, input[type=button]:active, input[type=reset]:active, .btn:active{
	box-shadow:inset 0 2px 5px rgba(0,0,0,.2);
	-moz-box-shadow:inset 0 2px 5px rgba(0,0,0,.2);
	-webkit-box-shadow:inset 0 2px 5px rgba(0,0,0,.2);
}
	/* 主要 */
	input.btn-primary, .btn-primary{background:#db5106; color:#fff; border-color:#bf4300;}
	input.btn-primary:hover, .btn-primary:hover{background:#c24400; color:#fff;}
	/* 刪除 */
	input.btn-delete, .btn-delete{background:#d9534f; color:#fff; border-color:#ce3a35;}
	input.btn-delete:hover, .btn-delete:hover{background:#c34440; color:#fff;}
	/* 文字連結 */
	input.btn-link, .btn-link{background:#ffffff; color:#fff; border-color:#ffffff;}
	input.btn-link:hover, .btn-link:hover{background:#ffffff; color:#06C; text-decoration:underline;}

.buttons{text-align:center; padding-top:15px; clear:both;}
.buttons input[type=submit], .buttons input[type=button], .buttons input[type=reset], .buttons .btn{
	padding:8px 25px;
	line-height:normal;
}
/* --- ! --- */


/* --- Table --- */
.table{border-top:2px solid #f5b693; border-bottom:1px solid #f5b693;}
.table caption{text-align:left; color:#111; font-size:16px; font-weight:700;}
.table th, .table td{padding:5px; line-height:1.3;}
.table thead th{
	border:1px solid #f6d6c4; border-top:2px solid #f5b693; border-bottom:1px solid #f5b693; 
	background:#fff2eb; font-size:12px; color:#c44500; vertical-align:bottom;
	padding-top:8px;}
.table tbody td{border:1px solid #ddd; font-size:13px; vertical-align:top; word-break:break-all; padding:6px 5px;}
.table tbody tr:nth-child(odd){background:#f7f7f7;}
.table tbody tr:hover{background:#fff3c9;}
.table .none{text-align:center; color:#999; background:#fff;}
.table a{color:#0698e0; }
.table a:hover{color:#111;}
.table a.top{color:#c00;}
.table a.top:hover{color:#111;}
.table .title{margin:0;}
.table input{margin:0 2px;}

.table.table-vertical th{padding:8px 5px;}
.table.table-vertical tbody th{
	text-align:left; vertical-align:top;
	border:1px solid #f6d6c4; border-bottom:1px solid #f5b693; 
	background:#fff2eb; font-size:12px; color:#db5106;}
.table.table-vertical tbody tr{background:#fff;}
section.content-block{border:1px solid #ddd; padding:10px; font-size:13px; line-height:1.5;}