@charset "utf-8";
/* CSS Document */

/********************************Common****************************/
.placeholder { color: #888; }
.fleft { float: left; }
.fright { float: right; }

.photo_name {min-height:40px;max-height:40px;}

span.color {display: inline-block;height: 14px; margin: 0; vertical-align: middle; width: 14px;}

.delete_btn {
	background: url(../images/delete.png) no-repeat;
	width: 25px;
	height: 25px;
	border: 0px;
	cursor: pointer;
	display: block;
	outline: none;
}

.breadcrumb { margin-bottom: 0 !important; }

input.longinput { width: 80%; }
input[type=checkbox] { vertical-align: bottom; }
textarea {
	width: 600px;
	height: 80px;
	background: #F6F6F6;
	border: 1px solid #A7A7A7;
}
a, button { outline: 0 none !important; }
img { vertical-align: bottom; }

#loading {
	display: none;
	text-align: center;
}

.btn-primary, .btn-success, .btn-info, .btn-warning, .btn-danger { color: #FFF !important; }

input.error-field, select.error-field, textarea.error-field { background-color: #F99; }

a.copy, a.edit, a.delete, a.submit_r, a.zoom, a.download, a.add, a.delivery { display: inline-block; width: 20px; height: 20px; cursor: pointer; vertical-align: bottom; }
a.copy:hover, a.edit:hover, a.delete:hover, a.submit_r:hover, a.zoom:hover, a.download:hover, a.add:hover, a.delivery:hover { background-position: 0px -20px; }
a.copy { background: url(../images/copy.png) no-repeat; }
a.edit { background: url(../images/edit.png) no-repeat; }
a.delete { background: url(../images/a_delete.png) no-repeat; }
a.submit_r { background: url(../images/arrow_submit.png) no-repeat; }
a.zoom { background: url(../images/zoom.png) no-repeat; }
a.download { background: url(../images/download.png) no-repeat; }
a.add { background: url(../images/add.png) no-repeat; }
a.delivery { background: url(../images/delivery.png) no-repeat; }

.readonly {	border: solid gainsboro 1px; background-color: whitesmoke; color: #888; }

span.jmsg, div.jmsg { display: none; }

del { padding-right: 20px; }
mark { color: red; }

img { border: 0; }

.error { border-color: red !important; box-shadow: 0 0 8px red !important; }

tr.highlight td { background-color: #FCC; }

/************************Sexy tooltips*****************************/
.tooltip { border-bottom: 1px dotted #000000; color: #000000; outline: none; text-decoration: none; position: relative; }
.tooltip span { margin-left: -299em; position: absolute; }
.tooltip:hover span {
	border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
	font-family: Calibri, Tahoma, Geneva, sans-serif;
	position: absolute; left: 50px; z-index: 99;
	margin-left: 0; width: 250px;
}
.tooltip:hover span.classicleft { margin-left: -200px; }
.tooltip:hover em { font-family: Candara, Tahoma, Geneva, sans-serif; font-size: 1.2em; font-weight: bold; display: block; padding: 0.2em 0 0.6em 0; }
.classic, .classicleft { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }
.classic, .classicleft {background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334;	}
.help { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.info { background: #9FDAEE; border: 1px solid #2BB0D7;	}
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }
/************************Sexy tooltips*****************************/

/********************************Common****************************/



body {
	margin: 0;
	padding: 0 !important;
	background: #F6F6F6;
	color: #333;
	font-family: Arial, Helvetica, sans-serif;
	zoom: 100%;
	font-size: 12px;
}

body.noframe .navbar, body.noframe .breadcrumb { display: none !important; }

#container {
	width: 100%;
}

/********************************header****************************/
#header { width: 100%; }
#logo {
	margin: 20px;
	margin-bottom: 0;
	height: 38px;
	font-size: 38px;
	font-weight: bold;
	font-family: '微軟正黑體', Arial, Helvetica, sans-serif;
}
#header_menu { float: right; padding: 10px; }
/********************************header****************************/


#content { margin: 0 auto; padding: 0 10px; position: relative; z-index: 1; }

/********************************Content Index****************************/
#content .setting .setting_title {
	float: left;
	padding-top: 44px;
	*padding-top: 65px;
	width: 160px;
	height: 76px;
	font-size: 32px;
}
#content .setting .setting_option ul { margin: 0; padding: 0; }
#content .setting .setting_option ul li {
	margin: 10px;
	*margin: 25px 10px;
	padding-top: 35px;
	list-style: none;
	font-size: 18px;
	float: left;
	width: 220px;
	height: 85px;
	text-align: center;
	border: 1px solid #666;
	border-radius: 10px;
	-moz-transition: all 0.5s linear;
	-webkit-transition: all 0.5s linear;
	behavior: url(css/PIE.php) /9;
	*behavior: '';
}
#content .setting .setting_option ul li:hover {
	box-shadow: 3px 5px 5px #999 ;
	-webkit-box-shadow: 3px 5px 5px #999 ;
	border-bottom-right-radius: 30% 15%;
	box-shadow: 0 \9;
}
#content .setting .setting_option ul li a { color: #333; text-decoration: none; }
#content .setting .setting_option ul li a:hover { color: #09F; text-decoration: underline; }
#content .setting .setting_option ul li .desc { font-size: 12px; }
#order_num {
	position: absolute;
	top: -50px;
	left: 190px;
	_left: 80px;
	background: #F6F6F6;
	width: 38px;
	height: 20px;
	padding: 9px 0px;
	text-align: center;
	border: 1px solid #666;
	border-radius: 30px;
	behavior: url(css/PIE.php) /9;
	*behavior: '';
}
/********************************Content Index****************************/

.imgBox { position: relative; }
.imgBox div { width: 100%; height: 100%; }
.xls, .xlsx { background: url(../images/xls.png) no-repeat center center; }
.ppt, .pptx { background: url(../images/ppt.png) no-repeat center center; }
.doc, .docx { background: url(../images/doc.png) no-repeat center center; }
.pdf { background: url(../images/pdf.png) no-repeat center center; }
.txt { background: url(../images/txt.png) no-repeat center center; }
.zip { background: url(../images/zip.png) no-repeat center center; }
.rar { background: url(../images/rar.png) no-repeat center center; }

.multipage {
	margin-top: 10px;
	text-align: right;
	box-shadow: 1px 1px 4px #AAA;
	border-radius: 4px;
	display: inline-block;
	*display: inline;
}
.multipage a {
	padding: 3px 8px;
	border: 1px solid #DDDDDD;
	border-width: 1px 1px 1px 0;
	text-decoration: none !important;
	color: #08C;
	font-size: 13px;
	float: left;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.multipage a:first-child { border-left-width: 1px; }
.multipage a:hover, .multipage .onpage {
	background-color: #08C;
	color: #F5F5F5;
}

.options { padding: 5px 0px; }
.options button { margin: 5px 10px 5px 0px; }
.contentTable a { color: #FFF; }
.ui-widget-content .contentTable a { color: #FFF; }
.contentTable a:hover { color: #6FF; }
.contentTable table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #888;
	font-size: 13px;
}
.contentTable table th {
	background: #AAA;
	background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(0,0,0,0.1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(0,0,0,0.1)));
	background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(0,0,0,0.1) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(0,0,0,0.1) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(0,0,0,0.1) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(0,0,0,0.1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#1a000000',GradientType=0 );
	color: #FFF;
	text-align: left;
	padding: 2px 5px;
}
.contentTable table td {
	text-align: left;
	padding: 2px 5px;
	border: 1px solid #666;
}

.contentTable table#attr th, .contentTable table#attr td { text-align: center; }

#search_box, .field_box {
	margin: 20px 0px 10px 0px;
	padding: 5px;
	border: 1px solid #AAA;
	box-shadow: 1px 1px 5px #AAA;
	-webkit-box-shadow: 1px 1px 5px #AAA;
	font-size: 13px;
}
#search_box .search_title, .field_box .field_title {
	position: relative;
	background-color: #FFF;
	padding: 3px 6px;
	border: 1px solid #AAA;
	left: 10px;
	top: -15px;
}
#search_box input[type=text] {
	width: 120px;
}
#search_box input[dateinput=date] {
	width: 80px;
}
#search_box table td { padding: 5px; }
#search_box table td button { margin-right: 5px; }
.field_box .field_title { font-size: 16px; top: -16px; }
.field_box ul { margin: 0; padding: 0; }
.field_box ul li { width: 80px; margin-right: 10px; display: inline-block; list-style: none; }

#tabs table td {
	padding: 5px;
}

.shop_template { margin: 0; padding: 0; }
.shop_template li { position: relative; margin: 0; padding: 0; list-style: none; text-align: center; display: inline-block; width: 220px; }
.shop_template li img { width: 200px; border: 5px solid #F93; }
.shop_template li:hover img { position: absolute;  width: 400px; top: -453px; left: -100px; z-index: 10; border-color: #63F; }

.input .tabs { background: #F6F6F6; }
.input textarea { min-height: 150px; width: 80%; }

.required label:first-child:after { color: red; font-weight: bold; content: ' *'; }

.show_upload { max-height: 315px; overflow-y: scroll; }
.show_upload .widthInsert button { display: inline-block; }
.saveSort, .sortFile { padding-bottom: 1px !important; }
/********************************Content****************************/




/******************** New **************************/
div.center, p.center, img.center {
  display: block;
  float: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

.table { box-shadow: 1px 1px 5px #AAA; -webkit-box-shadow: 1px 1px 5px #AAA; }

.navbar-inverse .nav-collapse .dropdown-menu li { position: relative; }

.floatAction { position: absolute; top: 6px; right: 5px; z-index: 1; }
#sidebar { width: 210px; position: absolute; left: 0; margin-left: 15px; opacity: 1; -moz-transition: all linear 0.3s; z-index: 1; }
#sidebar .sidebar-nav { padding: 0 !important; box-shadow: 0 0 10px #BDBDBD; -webkit-box-shadow: 0 0 5px #AAA; }
#sidebar .nav-header { padding: 5px 13px; border-bottom: 1px solid #DDD; color: #555; }
#sidebar .sidebar-nav li { position: relative; }
#sidebar .sidebar-nav .active .menu_option {
	background: #0088cc; /* Old browsers */
	background: -moz-linear-gradient(top,  #4188bf 0%, #0088cc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4188bf), color-stop(100%,#0088cc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #4188bf 0%,#0088cc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #4188bf 0%,#0088cc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #4188bf 0%,#0088cc 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #4188bf 0%,#0088cc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4188bf', endColorstr='#0088cc',GradientType=0 ); /* IE6-9 */
	color: #FFF !important;
}
#sidebar .sidebar-nav .menu_option { border-width: 0 0 1px; padding-left: 30px; -moz-transition: 0.3s linear all; }
#sidebar .sidebar-nav .menu_option:hover { padding-left: 40px; }

#content { margin-left: 230px; transition: margin linear 0.3s; -moz-transition: margin linear 0.3s; -webkit-transition: margin linear 0.3s; -ms-transition: margin linear 0.3s; }

#tabs.ui-tabs .ui-tabs-panel { padding-left: 0; padding-right: 0; }

.box .box_header {
	border:none;
	border-bottom: 1px solid #DEDEDE;
	border-radius:3px 3px 0 0;
	-webkit-border-radius:3px 3px 0 0;
	padding: 5px;
	font-weight:bold;
	font-size:16px;
	color: #FFF;
}
.box_header {
	background: #0088cc; /* Old browsers */
	background: -moz-linear-gradient(top,  #4188bf 0%, #0088cc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4188bf), color-stop(100%,#0088cc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #4188bf 0%,#0088cc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #4188bf 0%,#0088cc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #4188bf 0%,#0088cc 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #4188bf 0%,#0088cc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4188bf', endColorstr='#0088cc',GradientType=0 ); /* IE6-9 */
}
.box .box_content table td, .box .box_content table th { padding: 5px; vertical-align: top; }
.box .box_content form table th { text-align: right; padding-right: 10px; padding-top: 10px; }

.form_actions {
  background-color: #F5F5F5;
  border-top: 1px solid #E5E5E5;
  margin-bottom: 18px;
  margin-top: 18px;
  padding: 17px 20px 18px;
}
.table-striped th {
	background: #0088cc; /* Old browsers */
	background: -moz-linear-gradient(top,  #4188bf 0%, #0088cc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4188bf), color-stop(100%,#0088cc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #4188bf 0%,#0088cc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #4188bf 0%,#0088cc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #4188bf 0%,#0088cc 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #4188bf 0%,#0088cc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4188bf', endColorstr='#0088cc',GradientType=0 ); /* IE6-9 */
	color: #FFF; border-left: none !important;
}
.table-striped th a { color: #FFF; text-decoration: underline; }

.box_list { margin: 10px; margin-left: 0; }
.box_list .box { padding: 5px; float: left; background-color: #E8E8E8; box-shadow: 1px 1px 6px #AAA; -webkit-box-shadow: 1px 1px 6px #AAA; border: 1px solid #CCC; width: 200px; margin: 0 20px 20px 0; }
.box_list .box .img { width: 200px; height: 170px; overflow: hidden; position: relative; text-align: center; }
.box_list .box .img img { width: 200px; height: 170px; vertical-align: middle; }
.box_list .box .img .options { background-color: #FFF; opacity: 0.8; filter: Alpha(opacity=80); height: 30px; width: 100%; position: absolute; bottom: -40px; left: 0; }
.box_list .box .img .title { background-color: #FFF; opacity: 0; filter: Alpha(opacity=0); padding: 5px 0; width: 100%; position: absolute; top: 0; left: 0; }

.inputtable { min-width: 100%; }
.inputtable > .clearfix > label { float: left; width: 20%; max-width: 120px; padding-top: 4px; }
.inputtable .input { float: left; width: 78%; transition: all linear 0.3s; }
.inputtable .input label { width: auto; }
.inputtable .clearfix { margin-bottom: 10px; }



@media (max-width: 979px) {
	#sidebar { opacity: 0; }
	#content { margin-left: 0; }
	.btn-group.pull-right { display: none; }
}

@media (min-width: 980px) {
	.inputtable { min-width: 700px !important; }
}

@media (max-width: 480px) {
	.inputtable label, .inputtable .input { width: 100% !important; }
	.inputtable .input label { width: auto !important; }
}

@media (max-width: 768px) {
	.fieldset.flash { width: 90%; }
}




#footer {
	width: 100%;
	position: absolute;
}

.footerBottom {
	bottom: 0;
}

#copyright {
	text-align: right;
	padding: 5px 15px 5px;
	color: #333;
	font-size: 12px;
}


/********************************dev****************************/
.dbInfo{
	Background: LightYellow;
	Font-Size: 10pt;
	Font-Family: Tahoma;
	Border: Solid Gold 1px;
	Color: Black;
	Padding: 3px;
	Margin-Right: 10px;
}
.tbName{
	Color: Purple;
}
.fldName{
	Color: Blue;
}
.selReq{
	Color: Green;
}

/*************************uploaded_img************************/

.boxAlbum { float: left; width: 110px; padding: 5px; border: solid darkgray  1px; background-color: lightgray ; margin-right: 5px; margin-bottom: 5px; }

.boxAlbum .imgBox { height: 100px; padding-bottom: 5px; text-align: center; vertical-align: middle; }
.boxAlbum .imgBox img { max-width: 100%; max-height: 100%; }

.show_upload { padding: 0 15px; }

.show_upload button { margin: 0 auto; display: block; }