@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Muli);
/* CSS Document */
body, html {height:100%;}
body {
    height:100%;
	margin:0;
	padding:0;
	font-size:14px;
	font-family:Arial, Helvetica, "微軟正黑體", "Microsoft JhengHei", sans-serif;
	background-color:#333;
}
a{
	text-decoration:none;
	color:#333;
	outline:none;
}
img{vertical-align:middle; border:none;}
input, select, radio{vertical-align:middle;}
input, select{
	padding:5px;
	box-sizing: border-box;
	outline:none;
}
textarea{
	padding:5px;
	box-sizing: border-box;
	vertical-align:top;
	outline:none;
	resize: none;
}

.w50{width:50px;}
.w100{width:100px;}
.w200{width:100px;}
.w400{width:400px;}


/*=[structure]==============================*/
#pageWrapper { 
	display: table; 
	margin: 0;
	width: 100%;
	height: 100%;
}
header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:60px;
	padding:20px;
	box-sizing: border-box;
	background-color:#555;
	color:#FFF;
}
header #logo{font-size:18px;}
header span{ float:right;}
header a{color:#FFF;}
#col_left{
	display: table-cell; 
	height: 100%;/*for firefox*/
	width:250px;
	padding:60px 0 0;
	box-sizing: border-box;
	border-right:1px #DDD solid;
	background-color:#f8f8f8;
}
#col_right{
	display: table-cell; 
	height: 100%;/*for firefox*/
	margin-left:-200px;
	padding:60px 20px 20px;
	background-color:#FFFFFF;
}

/*=[loginbox]==============================*/
#loginBox{
	position:absolute;
	top:100px;
	left:0;
	right:0;
	width:320px;
	padding:20px;
	border:1px #333 solid;
	border-radius:5px;
	box-sizing: border-box;
	background:#FFF;
	margin:auto;
}
#loginBox h3{
	text-align:center;
	margin:10px 0 20px;
	color:#369;
	margin:10px;
	font-size:16px;
}
#loginBox input{
	width: 100%;
	padding:10px;
	margin-bottom: 10px;
	border:1px #aaa solid;
	box-sizing: border-box;
	vertical-align: top;
}
#loginBox input[name=username]{
	background:url(../images/icon_account.png) right center no-repeat;
}
#loginBox input[name=password]{
	background:url(../images/icon_password.png) right center no-repeat;
}
#loginBox input[name=captcha]{
	width: 200px;
}
#loginBox #captchaImg{
	cursor: pointer;
	vertical-align: top;
}
#loginBox input[type=submit]{
	color:#69C;
	background-color:#D8F0F3;
	border:1px #69C solid;
	cursor:pointer;
	font-weight:bold;
}

/*=[navigation]==============================*/
#nav_icon{ display:none;}
nav#mainnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
nav#mainnav ul li {
	margin: 0;
	padding: 10px 20px;
	border-bottom:1px #DDD solid;
}
nav#mainnav ul li:hover {
	background-color: #EEE;
}
nav#mainnav ul li.current {
	background:#EEE;
}
nav#mainnav ul li a {
	color: #337ab7;
}
nav#mainnav ul li a:hover {
	color: #337ab7;
}
nav#mainnav ul ul {
	display: none;
	margin-top: 10px;
}
nav#mainnav ul ul li {
	border:none;
}

#toolbar{margin:10px 0; font-size: 16px;}
#toolbar a{color:#337ab7;}
#toolbar #addBtn,
#toolbar #excelBtn,
#toolbar #wordBtn,
#toolbar #backBtn{
	float: right;
	cursor: pointer;
}

.searchWrapper{
	float:right;
	font-size:14px;
	padding:0 5px 5px;
}
.searchWrapper input{
	width:140px;
}
.searchWrapper .btn_search{
	padding:8px;
	color:#FFF;
	background-color:#888;
	display:inline-block;
	cursor:pointer;
	vertical-align: middle;
}

/*=[tabs]==============================*/
.tabs{
	width:100%;
	margin-bottom:10px;
	border-bottom:1px #bbb solid;
}
.tabs .tab{
	display:inline-block;
	min-width: 100px;
	padding:5px 10px;
	margin-bottom:-1px;
	box-sizing: border-box;
	border:1px #bbb solid;
	border-bottom:none;
	color:#333;
	background-color:#f8f8f8;
	text-align:center;
}
.tabs .tab.current{
	border-bottom:1px #FFF solid;
	background-color:transparent;
	font-weight:bold;
}

/*=[addform]==============================*/
#addform{
	padding:5px;
	margin-bottom:5px;
	background-color:#f8f8f8;
	border:1px #DDD solid;
	display:none;
}
#addform input[type=submit]{
	border: none;
	padding: 5px 20px;
	color: #FFF;
	background-color: #369;
	cursor: pointer;
}

/*=[editform]==============================*/
#editform{
	padding:5px;
	margin-bottom:5px;
	background-color:#f8f8f8;
	border:1px #DDD solid;
}
#editform input[type=submit]{
	border: none;
	padding: 5px 20px;
	color: #FFF;
	background-color: #369;
	cursor: pointer;
}
	
/*=[data table]==============================*/
.tableBorder{
    border-collapse: collapse;
	border: 1px #ccc solid;
	background-color:#FFF;
}
.tableBorder th{color:#333; padding: 10px;}
.tableBorder td{border: 1px #ccc solid; padding: 10px;}

/*=[pagination]==============================*/
.pagiWrapper{padding: 10px 0;}
.pagiWrapper ul{
	margin: 0;
	padding: 0;
	float: right;
}
.pagiWrapper ul li{
	border:1px #CCC solid;
	border-right: none;
	padding: 5px;
	min-width: 20px;
	height:20px;
	text-align: center;
	list-style: none;
	display: inline-block;
	vertical-align:top;
}
.pagiWrapper ul li:last-child{border-right:1px #CCC solid;}
.pagiWrapper ul li a{color:#333;}
.pagiWrapper ul li.active{
	color:#FFF;
	background-color:#337ab7;
}

/*=[icons]==============================*/
.fa{color:#337ab7;}
.fa-trash-o{color:#C00;}
.fa-bars{color:#FFF;}

/*=[upload photo]==============================*/
/*input[type="file"] {display: none;}*/
.upload_pic{display: none;}
.upload {
	color:#FFF;
	background-color:#337ab7;
    display: inline-block;
    padding: 5px 20px;
    cursor: pointer;
}
.upload .fa{color:#FFF;}




/*=[sort]==============================*/
a.sort_current{color:#06C;}
a.sort_current::after {
    content: " ▼";
}
a.sort_current2{color:#06C;}
a.sort_current2::after {
    content: " ▲";
}

/*=[common]==============================*/
.hide{ display:none !important;}
.right{text-align:right;}
.floatRight{float:right;}
.center{text-align:center;}
.clear{clear:both;}
.line{height:1px;background-color:#CCC;}
.status_close{color: #AAA;}

@media screen and (max-width: 800px) {
	.w400{width:100%;}
	#pageWrapper { 
		display: block; 
		height: auto;
	}
	header{
		position:static;
		height: auto;
		padding:10px;
	}
	header span{
		float:none;
		display:block;
		padding-top:10px;
	}
	#nav_icon{
		display:inline-block;
		float:right;
	}
	#col_left {
		display: block;
		padding:0;
		border-right:none;
		
		position: fixed;
		z-index:1;
		top:0;
		left:-260px;
		overflow: hidden;
	
		width: 260px;
		height: 100%;
		box-sizing: border-box;
		overflow-y: auto;
		
		border-right:1px #CCC solid;
	}
	#col_right{
		display: block;
		height: auto;
		margin-left:0;
		padding:10px;
	}
	#toolbar b{display: block; margin-bottom: 10px;}
	.tabs .tab{
		display:inline-block;
		min-width: auto;
		padding:5px 10px;
		margin-bottom:-1px;
		box-sizing: border-box;
		border:1px #bbb solid;
		border-bottom:none;
		color:#333;
		background-color:#f8f8f8;
		text-align:center;
	}
	
	.rwd-table {min-width: 100%; border:none;}
	.rwd-table tr {display: block; border: 1px #bbb solid; margin-bottom: 10px;}
	.rwd-table th {display: none;}
	.rwd-table td {display: block;}
	.rwd-table th, .rwd-table td {text-align: left; padding: 5px;}
	.rwd-table td:before {
		content: attr(data-th) ": ";
		font-weight: bold;
		width: 60px;
		display: inline-block;
		color:#369;
		font-weight:bold;
	}
	
	.pagiWrapper ul{
		margin: 10px 0 0;
		padding: 0;
		float: none;
	}

}
@media screen and (max-width: 400px) {
	#loginBox{
		top:80px;
		width:90%;
		padding:10px;
	}
	#loginBox input[name=captcha]{width: 180px;}
}