@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,100italic,300italic,400italic,500,500italic,700,700italic,900,900italic);
@import url(open-iconic.css);
@import url(miniminds.css?v=20191009);
html { font-size:62.5%;}
body {  background:#fff; color:#000; direction: ltr; font-size: 1.2em; font-family:Roboto, Helvetica, sans-serif, "黑體", "LiHei Pro", "Heiti TC", "微軟正黑體","Microsoft JhengHei"; padding: 0; margin:0; -webkit-text-size-adjust:none; word-wrap:break-word; font-weight:400;}
form, input, select, textarea{margin:0; padding:0; font-family:Roboto, Helvetica, sans-serif, "Heiti TC", "微軟正黑體","Microsoft JhengHei";}
textarea, input{ font-size:1.2em}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display:block;}
aside, blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
img{ border:0; -ms-interpolation-mode: bicubic; display: block;}
aside, figure, figcaption, p, ul, ol, li, h1, h2, h3, h4, h5, h6{ margin:0; padding:0}
h1, h2, h3, h4, h5, h6{ font-weight:400;}
a{ color:#333333; text-decoration:none;}
a:hover{ color:#fcfcfc; text-decoration:underline}
.error { height:24px; background-color:#b00;border:1px solid #d00; font-size:1.2em; line-height:24px; color:#fff;padding:0px 10px; margin-left:-2px;}
.error a{ color:#fff;}
textarea{resize: none}
details summary::-webkit-details-marker { display:none; }
details summary{display:none;}
input {border: #ccc 1px solid; padding:2px 6px; color:#000; font-family:Roboto, Helvetica, sans-serif, "黑體", "LiHei Pro", "Heiti TC", "微軟正黑體","Microsoft JhengHei";}
select, option{ color:#000; font-family:Roboto, Helvetica, sans-serif, "黑體", "LiHei Pro", "Heiti TC", "微軟正黑體","Microsoft JhengHei";}
textarea {border: #cecaca 1px solid; font-size:1.4em; padding:2px 6px; color:#000; font-family:Roboto, Helvetica, sans-serif, "黑體", "LiHei Pro", "Heiti TC", "微軟正黑體","Microsoft JhengHei";}

/* Index Page*/
#news-wrap{ margin-left:5%; margin-top:5%; width:45%; height:70%;}
#news-wrap h2{ font-size:2.0em;}
#news-wrap p{ font-size:1.4em;}
#news-wrap a:hover{ color:#225799;}
#news-wrap .news-list{ list-style:none;}
#news-wrap .news-list li{ padding:2em 0; border-bottom:1px dashed #eee; clear:both;}
#news-wrap .news-list li .title{ display:block; font-size:1.6em; line-height:1.5em; color:#225799; margin-bottom:0.5em;}
#news-wrap .news-list li .date{ display:block; float:right; font-size:1.2em; line-height:2em; color:#999;}
#news-wrap .news-list li .desc{ font-size:1.4em; line-height:1.5em;}
#news-wrap .news-list li .desc p{ font-size:1em;}
#news-wrap .news-list li .img{ float:right; display:block; width:50%; margin-left:1em;}
#news-wrap .news-list li .hlink{ font-size:1.4em; line-height:1.5em;}
#news-wrap .news-list li ul li{ margin-left:2em; padding:0.5em 0; border:0; font-size:1.4em;}
#front-wrap{ position:fixed; left:5%; top:15%; width:45%; height:70%; background:#87bc1f;}
#front-wrap .heading{ display:block; position:absolute; top:50%; margin-top:-1em; width:100%; font-size:1.8em; line-height:1em; text-align:center; color:#fff; font-weight:900;}
#login-wrap { font-size:1.4em; line-height:2em; position:absolute; width:283px; right:10%; top:25%; margin-left:-141px;}
#login-wrap img{ padding-bottom:1.5em; margin:0 auto;}
#login-wrap div{ padding-bottom:0.5em;}
#login-wrap label{ display:inline-block; width:68px; padding-left:10px; height:2em; line-height:2em; border:1px solid #87bc1f;  background:#87bc1f; color:#fff;}
#login-wrap input, #login-wrap select{ display:inline-block; width:188px; padding:0 6px; height:2em; line-height:2em; border:1px solid #ccc; vertical-align:top;}
.form-btns{ padding-left:80px;}
.btn-submit{ display:inline-block; padding:0.2em 1em; background:#e77700; color:#fff;}
.btn-submit:hover{ text-decoration:none;}

#register-wrap{ padding-top:40px;}
.user-form{ width:60%; margin:0 auto 36px;;position:relative;}
.user-form .required{ position:absolute; font-size:1.2em; color:#b00; right:0; top:0; line-height:36px;}
.user-form h1{ font-size:2.4em; line-height:1em; color:#333333; font-weight:600; padding:0.75em 0; position:relative;}
.user-form form{ width:100%;}
.user-form form div{ height:2em; margin-bottom:0.5em; font-size:1.2em; line-height:2em;}
.user-form form div label{ display:inline-block; width:25%; min-width:80px; max-width:100px; vertical-align:top;}
.user-form form div label strong{ color:#c8a53d;}
.user-form form div input{ width:70%; min-width:355px; height:1.5em; line-height:1.5em; background:#fff; border:1px solid #d0d0d0;}
.user-form form div input.chk-box{ width:auto; min-width:0; vertical-align:middle; margin:0 5px 0 10px;}
.user-form form div textarea{ width:70%; min-width:355px; height:4.5em; line-height:1.5em; background:#fff; border:1px solid #d0d0d0;}
.user-form form div.txt-area{ height:100px;}
.user-form form div.secure-code{ height:82px; padding-left:96px;}
.user-form .btn-submit{ display:block; background:#333333; height:2em; line-height:2em; color:#fff; font-size:1em; border:0; width:80px;-moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; text-transform:uppercase; font-weight:700; float:left; text-align:center;}
.user-form .btn-submit:hover{ background:#225799}
.user-form .btn-reset{ margin-left:6px; display:block; background:#ababab; height:2em; line-height:2em; color:#fff; font-size:1em; border:0; width:80px;-moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; text-transform:uppercase; font-weight:700; float:left; text-align:center;}
.user-form .btn-reset:hover{ background:#d0d0d0}

/*Header*/
#top-header{ position:fixed; width:100%; padding:5px 0; height:30px; float:left; background:#fff; z-index:50;}
#top-header #top-title{ width:100%; margin-right:-510px; float:left;}
#top-header #top-title h1{ font-size:1.8em; line-height:1.5em; color:#87bc1f; margin:0 220px 0 0; position:static; _position:relative; float:none; margin-left:5px;}
#top-header #top-title h1 img{ vertical-align:middle; display:inline-block; height:1.5em; margin-right:1em;}
#top-header #top-title a{ color:#87bc1f; text-decoration:none}
#top-header #top-title a:hover{ text-decoration:underline}
#top-header #top-logged{ font-size:1.4em; line-height:2em; color:#87bc1f; width:500px; position:relative; float:right; text-align:right; margin-right:5px;}
#top-header #top-logged a{ color:#87bc1f;}

/*Left Nav*/
#nav-menu{position:fixed; width:180px; height:100%; padding-bottom:10px; margin-top:10px; background:#87bc1f; overflow-y:auto; z-index:40; top:30px; position:absolute\9;}
#nav-menu div{ font-size:1.4em; font-weight:normal; line-height:2em; padding:0 5px; cursor:pointer; color:#fff; margin-top:10px; position:relative;}
#nav-menu div.nav-hd{ background:#000; color:#fff; padding:0 10px; margin-top:10px; cursor:default; white-space:nowrap;}
#nav-menu div.nav-hd:hover{background:#000;}
#nav-menu div span{ display:block; background:none}
#nav-menu div .drop-down{ position:absolute; top:0; right:0.5em; width:1.5em; height:2em;}
#nav-menu div:hover{ background-color:#87bc1f;}
#nav-menu div:hover a{ color:#fff;}

#nav-menu div a{ text-decoration:none; display:block; color:#fff;}
#nav-menu div a:hover{ text-decoration:none;}
#nav-menu ul {display:none; width:100%;}
#nav-menu ul li{ font-size:1.4em; line-height:2em; list-style:none; background:#bdd000;}
#nav-menu ul li a{ color:#ffffff; text-decoration:none; display:block; padding:0 4px 0 24px;}
#nav-menu ul li a:hover{ color:#ffffff; background:#e77700;}
#nav-menu ul li a.selected{ color:#ffffff; background-color:#e77700;}
#nav-menu ul li span{ padding:0 4px 0 24px;}
#nav-menu ul li .node, #nav-menu ul li .list, #nav-menu ul li .addnew{ padding:0 4px 0 23px}
/*#nav-menu ul li .node{ background:url(../images/node.gif) 5px center no-repeat; padding:0 4px 0 23px}
#nav-menu ul li .node:hover{ background:url(../images/node.gif) 5px center no-repeat #ccc;}
#nav-menu ul li .list{ background:url(../images/list.gif) 5px center no-repeat; padding:0 4px 0 23px}
#nav-menu ul li .list:hover{ background:url(../images/list.gif) 5px center no-repeat #ccc;}
#nav-menu ul li .addnew{ background:url(../images/add.gif) 5px center no-repeat; padding:0 4px 0 23px}
#nav-menu ul li .addnew:hover{ background:url(../images/add.gif) 5px center no-repeat #ccc;}
#nav-menu ul li .map{ background:url(../images/map.gif) 5px center no-repeat; padding:0 4px 0 23px}
#nav-menu ul li .map:hover{ background:url(../images/map.gif) 5px center no-repeat #ccc;}*/

/*Main*/
#main-cntnr{ width:100%; height:100%; top:40px; position:fixed; clear:both; background:#f7f7f7;}
#col-rht{ right:0; /*margin-left:180px;*/ height:100%; overflow:auto; position:relative; z-index:30;}
#col-rht .container{ position:relative; padding-top:10px}
.sec-hd{ font-size:1.8em; font-weight:normal; color:#333333; line-height:2em; padding:0 10px; /*border-bottom:1px solid #ccc;*/}
.sec-hd .btn{ display:inline-block; font-size:0.833em; line-height:1.5em; padding:0.4em 0.6em; margin:0.25em; background:#3f3f3f; border-bottom:1px solid #000; color:#fff;}
.sec-hd .btn:hover{ opacity:0.8; color:#fff; background:#e77700; border-bottom:1px solid #bd6100; text-decoration:none;}
.sec-hd .btn-highlight{ background:#e77700; border-bottom:1px solid #bd6100;}

.sec-list{}
	.sec-list ul{ margin:0; padding:0; font-size:1.4em; line-height:2em; font-weight:normal;}
	.sec-list ul li{ list-style:none; background:url(../images/manage.gif) 10px center no-repeat; padding-left:30px; border-bottom:1px solid #ddd;}
	.sec-list ul li a{ color:#000; text-decoration:none}
	.sec-list ul li a:hover{color:#333333;}
#msg-box{ padding:2em 30px;}
#msg-box h2{color:#333333; margin-bottom:1em;}
#msg-box p{font-size:1.4em; line-height:1.5em; padding-top:0.5em;}
#msg-box p strong{ display:block;}
#msg-box p span{ display:block; font-size:0.857em; margin-bottom:0.5em; color:#999}
/*List*/
	#field_display_form{ height:2.8em; overflow:hidden; float:right; max-width:48%; margin-bottom:0.5em;}
	#field_display_form div{ font-size:1.4em; font-weight:normal; line-height:2em; padding:0 5px; cursor:pointer; color:#fff; background:#87bc1f; position:relative; margin-bottom:0.5em;}
	#field_display_form div .drop-down{ position:absolute; top:0; right:0.5em; width:1.5em; height:2em; margin:0; font-size:0.8em;}
	#field_display_form span{ display:inline-block; margin:0 1em 0.5em 0; font-size:1.2em;}
	#field_sort_form{ height:2.8em; overflow:hidden; float:right; margin-left:2%; max-width:48%; margin-bottom:0.5em;}
	#field_sort_form div{ font-size:1.4em; font-weight:normal; line-height:2em; padding:0 5px; cursor:pointer; color:#fff; background:#87bc1f; position:relative; margin-bottom:0.5em;}
	#field_sort_form div .drop-down{ position:absolute; top:0; right:0.5em; width:1.5em; height:2em; margin:0; font-size:0.8em;}
	#field_sort_form span{ display:inline-block; margin:0 1em 0.5em 0; font-size:1.2em;}
	.item-list{padding:10px; /*border:1px solid #ccc; border-top:0; background:#f3f3f3;*/ -moz-border-radius-bottomright:20px;-webkit-border-bottom-right-radius:20px; margin-bottom:1.5em;}
		.item-list .toolbars{ height:28px; border:1px solid #ccc; background:#eee; padding-right:10px; -moz-border-radius:8px;-webkit-border-radius:8px; float:left; position:relative; z-index:1000;}
			.item-list .toolbars .btn-toggle{ width:14px; height:28px; background:url(../images/btn_toolbar.gif) center center no-repeat; cursor:pointer; display:block; float:left}
			.item-list .toolbars .tool-menu{ float:left; display:block; white-space:nowrap}
			.item-list .toolbars .tool-menu span{ display:inline-block; padding-right:2px; background:url(../images/br_toolbar.gif) right center no-repeat}
			.item-list .toolbars .tool-menu a{ display:inline-block; width:28px; height:28px;}
			.item-list .toolbars .tool-menu #btn-node{ background:url(../images/node.gif) center center no-repeat}
			.item-list .toolbars .tool-menu #btn-addnew{ background:url(../images/add.gif) center center no-repeat}
			.item-list .toolbars .tool-menu #btn-genCSV{ background:url(../images/excel.gif) center center no-repeat}
			.item-list .toolbars .tool-menu #btn-getCSV{ background:url(../images/add_excel.gif) center center no-repeat}
			.item-list .toolbars .tool-menu #btn-genXLSX{ background:url(../images/xlsx.gif) center center no-repeat}
		.item-list #search-bar{ float:left; position:relative; z-index:1000; text-align:left;}
			.item-list #search-bar span{font-size:1.4em; font-weight:normal;margin:0.15em 0.25em 0.15em 0; padding:0; display:inline-block; vertical-align:top;}
			.item-list #search-bar #keyword{ line-height:1.5em; margin:0;}
			#search-bar input{ line-height:1.5em; margin:0.25em 0; font-size:1.2em; vertical-align:top;}
			#search-bar span input, #search-bar span select{ line-height:1.5em; margin:0 0.5em; font-size:1em; vertical-align:middle;}
			#search-bar span select{ height:1.8em;}
			#search-bar span .ms-options-wrap{ display:inline-block; margin:0 0.5em; min-width:100px}
			#search-bar span .ms-options-wrap input{ margin:0;}
			#search-bar span .ms-selectall:hover{ color:#e77700;}
		.item-list #node-menu{ clear:both; padding:0.5em 0; text-align:right; position:relative; z-index:1100;}
			.item-list #node-menu span{ font-size:1.4em; font-weight:normal;}
			.item-list #node-menu span label{ line-height:1.8em;}
			.item-list #node-menu #node_id{ width: 12em; font-size:1.8em;}
			.item-list #node-menu #job_role{ width: 6em; font-size:1.8em;}
		#total-assigned{ float:left; font-size:1.4em; line-height:28px; padding-left:1em; color:#600; position:relative; z-index:1000;}
		#date-search{ float:left; font-size:1em; padding-bottom:0; position:relative; z-index:1000;}
		#date-search select{ margin:0 1em;}
		.item-list #tbl-tool{ clear:both; padding-top:0.5em; height:2.8em\9; position:relative;}
		.item-list #tbl-tool .btns{ display:inline-block; width:50%; position:absolute\9; left:0; font-size:1.2em;}
		.item-list #tbl-tool .btns span{ font-size:1.167em; font-weight:normal;}
		.item-list #tbl-tool .btns span select{ line-height:1.5em; margin:0 0.5em; font-size:1em; vertical-align:middle;}
		.item-list #tbl-tool .paging{ display:inline-block; width:50%; text-align:right; position:absolute\9; right:0; padding-bottom:0.5em;}
		.item-list #tbl-tool .paging a{ display:inline-block; width:2em; height:2em; margin:0 0.1em; background:#eee; border:1px solid #ccc; font-size:1.4em; line-height:2em; color:#000; text-align:center; text-decoration:none; -moz-border-radius:6px;-webkit-border-radius:6px;}
		.item-list #tbl-tool .paging a.btn-nav{ letter-spacing:-0.1em;}
		.item-list #tbl-tool .paging a:hover{ background:#333333; color:#f0f0f0}
		.item-list #tbl-tool .paging strong{ display:inline-block; width:2em; height:2em; margin:0 0.1em; background:#333333; border:1px solid #333333; font-size:1.4em; line-height:2em; color:#f0f0f0; text-align:center; text-decoration:none; -moz-border-radius:6px;-webkit-border-radius:6px;}
	.item-list  #search-bar .btn{ font-size:1.2em;}
	.item-list .btn{ display:inline-block; padding:0.4em 0.6em; margin:0.25em; background:#3f3f3f; border-bottom:1px solid #000; color:#fff;}
	.item-list .btn:hover{ opacity:0.8; color:#fff; background:#e77700; border-bottom:1px solid #bd6100; text-decoration:none;}
	#tbl-list{ border:1px solid #ccc; -moz-border-radius:6px;-webkit-border-radius:6px; margin:1em 0; font-size:1em; position:relative; z-index:1000; min-width:100%;}
		#tbl-list tr{ background:#f3f3f3}
		#tbl-list tr.odd{ background:#ddd}
		#tbl-list th {background:#333333; text-align:left; white-space:nowrap; font-weight:normal; overflow:hidden;}
			#tbl-list th img{ display:inline-block;}
			#tbl-list th span{ display:block; font-size:1.2em; line-height:1.1em; color:#eee;padding:0.25em; vertical-align:top;}
			#tbl-list th a{ display:inline-block; padding:0.25em 0; vertical-align:top;}
			#tbl-list th span span{ display:inline-block; font-size:1em; line-height:1.1em; color:#eee;padding:0.25em; vertical-align:top; white-space:normal; margin-right:16px;}
			#tbl-list th span.two-rows{height:4em;}
				#tbl-list th span.two-rows span{height:4em;font-size:0.85em; line-height:1.2em; display:inline-block; vertical-align:top}
		#tbl-list td{ padding:0.2em; font-size:1.2em; text-align:left; position:relative; /*word-wrap:break-word; word-break:break-all;*/}
		#tbl-list td.btns{ padding:0.5em 0; font-size:0.8em}
		#tbl-list td.btns .oi{ font-size:1em; color:#fff; line-height:1em; padding:0.25em 0; display:inline-block; cursor:pointer;}
		#tbl-list td.btns .oi:hover{ color:#fff; text-decoration:none;}
		#tbl-list td.btns .oi-pencil .ui-button-text{ background:url(../images/pencil.png) center no-repeat\9;}
		#tbl-list td.btns .oi-eye .ui-button-text{ background:url(../images/eye.png) center no-repeat\9;}
		#tbl-list td.btns .oi-envelope-closed .ui-button-text{ background:url(../images/envelope-closed.png) center no-repeat\9;}
		#tbl-list td.btns .oi-layers .ui-button-text{ background:url(../images/layers.png) center no-repeat\9;}
		#tbl-list td.btns .oi-delete .ui-button-text{ background:url(../images/delete.png) center no-repeat\9;}
		#tbl-list td.btns .oi-circle-x .ui-button-text{ background:url(../images/circle-x.png) center no-repeat\9;}
		#tbl-list td.btns .oi-image .ui-button-text{ background:url(../images/image.png) center no-repeat\9;}
		#tbl-list td.btns input{ vertical-align:top\9;}
		#tbl-list td.btns input.selected{ background:#690}
		#tbl-list td.btns input.ui-widget{ font-size:1.273em\9;}
		#tbl-list td.btns .ui-widget{ /*font-size:1.2em;*/}
		#tbl-list td.btn-dwld {text-align:center}
		#tbl-list td a:hover{ color:#225799;}
		#tbl-list td.btn-dwld a{ display:inline-block; width:24px; height:24px; background:url(../images/icondownload.gif) center center no-repeat; text-indent:-200px; overflow:hidden}
		#tbl-list .btn{ display:inline-block; padding:0.4em 0.6em; margin:0.25em; background:#3f3f3f; border-bottom:1px solid #000; color:#fff;}
		#tbl-list .btn:hover{ opacity:0.8; color:#fff; background:#e77700; border-bottom:1px solid #bd6100;}
		#btnSearch, #clearSearch{ font-size:1em; font-weight:300; vertical-align:top}
		.txt-true{color:#690; font-weight:normal}
		.txt-false{color:#600; font-weight:normal}
		.txt-trial{color:#339; font-weight:normal}
		.txt-enquiry{color:#c90; font-weight:normal}
		.item-list .btn-highlight{ background:#e77700; border-bottom:1px solid #bd6100;}
		.btn-img{ display:inline-block;}
		.btn-view-note{ position:absolute; right:-0.1em; bottom:-0.8em; border-top:1.5em solid transparent; border-left:1.5em solid transparent;  border-right:1.5em solid #ff5e5f;}
		.list-note-wrap{ position:absolute; right:0; bottom:0; width:10em; border:2px solid #ff5e5f; background:#fff; padding:0.5em; display:none; color:#333;}
		#tbl-list .sept-status{ display:inline-block; width:auto; padding:0 0.25em; height:1em; line-height:1em; text-align:center; background:#fff; position:relative;}
		#tbl-list .diagonal{position:absolute;top:100%; left:0; width:117%; transform: rotate(-32deg);transform-origin: 0% 0%;}

	#photo-list{width:100%; clear:both; float:left; background:#333333; margin:10px 0; padding:10px}
		#photo-list .img-fr{ height:120px; overflow:hidden;}
		#photo-list input {vertical-align:middle;}
		#photo-list input.caption{ font-size:1.2em; width:100px;}
		#photo-list .txt-true{color:#fff; background:#690; font-weight:normal; display:inline-block; padding:2px; cursor:pointer}
		#photo-list .txt-false{color:#fff; background:#600; font-weight:normal; display:inline-block; padding:2px; cursor:pointer}
		.sortable { list-style-type: none; margin: 0; padding: 0; }
		.sortable li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 120px; height: 170px; font-size: 1.2em; color:#333; border:1px solid #eee; }
		#photo-list .ui-state-highlight { height: 120px; }
	#ckfinder-list div img{float:none}


/*Edit*/
#detail-tbl{ /*max-width:50%;*/ border:0; font-size:1.2em; line-height:1.5em;}
	#detail-tbl table{ border:0; font-size:1em; line-height:1.5em;}
	#detail-tbl td.row{ padding:0;}
	#detail-tbl td.row th, #detail-tbl td.row td{ border-right:1px solid #f7f7f7;}
	#detail-tbl td.row td input{ width:auto;}
	#detail-tbl th{ text-align:left; vertical-align:top; min-width:100px; max-width:100px; font-size:1em; padding:1 0.25em; color:#fff; background:#87bc1f; font-weight:400; white-space:normal;}
	#detail-tbl td{ text-align:left; vertical-align:top; padding:0 0 0.25em 0; font-size:1em; padding-left:0.5em}
	#detail-tbl input, #detail-tbl textarea{ width:282px;}
	#detail-tbl select{ max-width:282px;}
	#detail-tbl #oh-tb td{ font-size:1em;}
	#detail-tbl #oh-tb input{ max-width:80px}
	#detail-tbl .chk-box{ width:auto; margin:0 5px;}
	#detail-tbl td span{ font-size:1em}
	#detail-tbl td .ui-datepicker table{ font-size:.714em}
	#detail-tbl td .ui-datetime-header span{font-size:1em;}
	#detail-tbl td .ui-datetime th { font-size:.575em; background:none; text-align:center}
	#detail-tbl td .ui-datetime td{ line-height:normal}
	#detail-tbl td .ui-datetime td span{ font-size:.857em; text-align:center;}
	#detail-tbl table th{ line-height:1.5em;}
	#detail-tbl table td{ font-size:0.857em; padding:0.25em 0 0.25em 0.5em;}
	#detail-tbl .btn {display:inline-block; padding:0.4em 0.6em; margin:0.25em 0.25em 0.25em 0; background:#e77700; border:0; color:#fff;}
	#detail-tbl .btn:hover{ opacity:0.8; color:#fff; background:#e77700; text-decoration:none;}
	.btn-img-del{ width:1.2em; height:1.2em; display:block; right:0; top:-0.6em; background:#e77700; color:#fff; font-weight:bold; border-radius:1em; z-index:10; position:absolute; font-size:1em; line-height:1.2em; text-align:center;}
	.btn-img-del:hover{ background:#ff5e5f; text-decoration:none;}

.btns-form{ margin:1em 0; font-size:1.4em;}
.btns-form input{ display:inline-block; padding:0.4em 0.6em; margin:0.25em 0.25em 0.25em 0; background:#e77700; border:0; color:#fff;}
.btns-form input:hover{ opacity:0.8; color:#fff; background:#e77700; text-decoration:none;}

.h-100{ height:80px;}
.h-200{ height:200px;}
.h-300{ height:300px;}
#detail-tbl .multi-box{ float:left; width:200px;}
#detail-tbl .multi-box-btn{ float:left; width:50px;}
#detail-tbl .multi-box-btn input{ width:30px; margin:10px; font-size:0.75em;}

.bck-link{ text-align:right; padding:0.5em 1em 0.5em 0}
	.bck-link a{ font-size:1.4em; font-weight:normal; color:#000; text-decoration:none}
	.bck-link a:hover{ color:#333333;}

#tabs #detail-tbl{ background:#f7f7f7; border:6px solid #f7f7f7; -moz-border-radius:6px;-webkit-border-radius:6px;}
#tabs #detail-tbl td.ckeditors span{ font-size:1em;}
#tabs #detail-tbl th{  font-size:0.857em;}
.ui-widget-content #detail-tbl td{color:#000;}

.btn-del-post, .user-item button{ display:inline-block; padding:0 1em; font-size:1.4em; line-height:1.5em; color:#fff; border:0; border-collapse:collapse; background:#000; margin:0.25em;}
.user-item button.selected{ background:#690;}
.btn-del-post{ float:right; margin:0 0.25em;}

#black_list_form{ font-size:1.2em;}
#black_list_form strong{ display:block;}

#edit-node{ line-height:2em}
#edit-node strong{ line-height:1.5em; margin-bottom:0.5em; display:block;}
#edit-node input, #edit-node textarea{ width:450px;}
#edit-node input.checkbox{ width:auto;}
#edit-node center input{ width:auto}
#tbl-list td.txt-rht{ text-align:right; padding-right:1em}
#tbl-list th span.txt-mid{ text-align:center}

.col-ordr {width:50%; float:left}
	.col-ordr h2{ font-size:1.6em; margin-left:6px}
.ordr-tbl{ width:100%; border:0; font-size:1.2em; line-height:1.5em;}
	.ordr-tbl th{ text-align:left; vertical-align:top; width:40%; font-size:1em; padding:0.25em 0.25em; color:#fff;
	background: #333333;
	-moz-border-radius-topleft:0.5em;-webkit-border-top-left-radius:0.5em;
	-moz-border-radius-bottomleft:0.5em;-webkit-border-bottom-left-radius:0.5em;
	}
	.ordr-tbl td{ text-align:left; vertical-align:top; padding:0 0 0.25em 0; padding-left:0.5em; font-size:1em}

#btn-nav-menu{ display:none;}
#nav-menu{ width:0; z-index:5000;}
#nav-menu div, #nav-menu ul{ width:180px;}
#btn-nav-menu{ font-family:Arial, Helvetica, sans-serif; display:inline-block; width:2em; height:1.5em; font-size:1em; line-height:1.5em; color:#e77700; vertical-align:top; position:relative; top:0.25em; text-align:center; cursor:pointer; z-index:10;}
.ms-options li{ white-space:nowrap;}
.ms-options-wrap > .ms-options{ min-width:100%; width:auto!important;}
@media screen and (max-width: 768px) {
	#find-wrap{ display:none;}
	#front-wrap{ display:none;}
	#desc-logo{ display:none;}
	#login-logo{ display:block;}
	#login-wrap{ right:15%; top:10px; right:auto; left:50%}
	#news-wrap{ margin-left:5%; margin-top:220px; width:90%;}
	#btn-nav-menu{ font-family:Arial, Helvetica, sans-serif; display:inline-block; width:2em; height:1.5em; font-size:1em; line-height:1.5em; vertical-align:top; position:relative; top:0.25em; text-align:center;}
	#top-header #top-title h1{ margin:0; width:60%; overflow:hidden; height:1.5em;}
	#nav-menu{ width:0; z-index:1000;}
	#col-rht{ margin-left:0;}
	.user-form{ width:90%; min-width:300px}
	.user-form .required{ position:absolute; font-size:1.2em; color:#b00; right:0; top:0; line-height:1.5em; margin:0.5em 0; width:50%}
	.user-form form{ width:100%;}
	.user-form form div{ height:auto; margin-bottom:0.5em; font-size:1.2em; line-height:2em;}
	.user-form form div label{ display:block; width:100%; min-width:260px;}
	.user-form form div input{ width:100%; min-width:260px;}
	.user-form form div input.chk-box{ width:auto; min-width:0;}
	.user-form form div textarea{ width:100%; min-width:260px;}
	.user-form form div.txt-area{ height:auto;}
}
@media screen and (max-width: 320px) {
	#nav-menu div, #nav-menu ul{ width:170px;}
	#keyword{ width:26%;}
	#btnSearch, #clearSearch{ font-size:0.7em;}
	#date-search{ float:none; text-align:left;}
	#date-search select{ width:25%; margin-left:0;}
	.user-form form div input{ width:90%;}
	.user-form form div textarea{ width:90%;}
	.item-list #node-menu span{ font-size:1.2em;}
	.item-list #tbl-tool .btns{ width:100%; display:block;}
	.item-list #tbl-tool .paging{ width:100%; float:none;}
	.error{ margin:12px 0 0 -50%;}
}

@media print{
#top-header{ display:none;}
.toolbars{ display:none;}
#node-menu{ display:none;}
#tbl-tool{ display:none;}
#tbl-list{ max-width:100%;}
#col-rht{ height:auto; overflow:visible;}
#main-cntnr{ width:auto; height:auto; overflow:visible; position:relative;}
}