@charset "utf-8";

/* Customize form element by emily */
.image-container {position: relative;}
.image-container input[type="file"] {display: inline-block;width:350px;}
.image-container .add-image {width: 22px; margin-left:10px;position: relative; cursor: pointer;}
.image-container .add-image:hover {opacity: .7;}
#crop-btn, .crop-btn {margin-bottom:5px;}
.image-old {max-width: 20%;}
#image-div, #image-old, #image-canvas, .image-div, .image-old, .image-canvas {padding:5px; border:1px solid #aaa; background:#eee;width:auto; margin:5px 0 15px;}
#image-div, #image-canvas, .image-div, .image-canvas {display: none; width:100%;position: relative;max-width: 100%;}
img.table-img {max-height:30px;}
form.noborder {border:0;background:#fff;}
#image-div.width50, #image-old.width50 .image-div.width50, .image-old.width50 {max-width:80%;clear:both;}

/* Customize items */
a{color:#767676;text-decoration:none;cursor: pointer;}
a:hover,a:focus{color:#c9810e;text-decoration:underline;}
html, body {width:100%;height:100%;margin:0;padding:0;}

#container {width:100%;height:100%;font-size: 13px;position: relative;}
#container .navbar .brand {padding:3px 20px;line-height: 30px; font-size:11px; vertical-align: bottom;}
#container .dropdown-menu>li>a:hover, #container .dropdown-menu>.active>a:hover {/*background-color:#ff686b;*/}
#content, #footer {position:relative;clear:both;}
#content {background:#fff;position: relative;}
#content-login {background:#eee;}
#content .breadcrumb {margin:0;}
#footer {padding: 10px; text-align:center;background:#e0e0de;font-size:12px;}

.row-fluid, .row-fluid [class*="span"] {height:100%;position: relative;}
.col1-inner img {max-width: 100%;}
.label {background-color:#aaa;}
.btn-link{color:#000;}

.col1 {background:#eee;}
.login {width:500px;margin:8% auto;}
#login-form {width:300px;margin:0 auto;}
#login-form label {display:inline-block;margin-right: 10px;}
#login-form legend {border: 0;}
#login-form .form-actions {background: transparent;text-align:center;}

.nav .nav-header {color:#888;}
.cms-logo {width:100%;padding:20px 0 0;height:115px;text-align:center;font-size:10px;color:#666;position:relative;z-index:0;}
.menu {background:#cecece;height: 100%;}
.menu li.active a, .menu li.active a:hover {background: #eee;}
.menu a, .menu a:link, .menu a:visited {color:#242424;}
.menu a:hover, .menu a:focus, .menu li.active a {color: #dc0011;}

.menu ul.nav {padding:10px 30px;}

.menu ul.nav li a:hover, .menu ul.nav li a.selected {color: #dc0011;}
.menu ul.dropdown-menu li a:hover {background: #f3caca}

/* Common */
.hint {font-size: 90%;color: #ff9900;width: 100%;clear: both;padding: 15px 0 5px 15px;}

/* Form */
.table {background: #e7e7e7;}
.grid-view .table th {background: #818181;color:#fff;font-size:15px;font-weight:normal;}
.grid-view .table th a {color:#fff;}

fieldset table,
form.well {margin-top: 20px;padding: 20px;}
form legend {color:#999;margin-bottom: 10px; font-size:18px;line-height: 30px;}
form.well .form-actions {position: relative; margin: 40px 0 30px; padding-top:20px; border-top: 1px solid #ccc;}
.form-content {padding: 20px 30px 30px 0;}
.form-content p.hint, .form-content p.hint-act {font-size:90%;color:#ff9900;width:100%;clear:both;padding:0;}
.form-content p.hint-act {color:#666;font-weight: bold;font-size:80%; text-transform: uppercase;}
.form-content p.hint:before {content: '* ';}
.form-content .tab-content p.hint {color:#eee;}
label.radio {display:inline-block;margin-right:10px;}
.info {width:99%;height:150px;margin:5px 0;border:1px solid #ddd;position: relative;overflow: hidden;}
.info input[type="file"] {position:relative;top:70px;left:5px;z-index: 1;width:35%;opacity:.6;cursor:pointer;}
.info .pic {float:left;width:35%;height:150px;border-right:1px solid #ddd;background:#aaa;color:#fff;text-align: center;cursor: pointer;position: relative;}
.info .pic .image-div {width:100%;position: absolute;top:0;}
.info .pic .image-div span {position: absolute;bottom:0;right:0;}
.info .pic .image-div .thumb {height:150px;}
.info .title, .info .desc {float:left;width:64%;}
.info .title input {width:90%;}
.info .desc textarea {width: 90%;height:100px;}
.info .del {position:absolute;top:60px;right:5px;height:20px;}
.img-btn {width:100%;height:30px;}
.img-btn a {margin-right: 10px;}

.filtergroup-box {width:100%;position: relative;}
.chosen-container-multi .chosen-choices li.search-choice:hover {cursor:pointer;border:1px solid #000;}
fieldset.wrap {position: relative;margin: 0 0 5%;}
fieldset.wrap .view-row {float:left;width:100%;position: relative;}
fieldset.wrap .view-row.header {height:36px;font-weight: bold;}
fieldset.wrap .form-row {float: left;width: 45%;height: 70px;position: relative;}
fieldset.wrap .form-row label {width:100%;}
fieldset.wrap .content {width:100%; max-height:600px; overflow:hidden; overflow-y: auto;}
fieldset.wrap .content .form-row {height: 20px;clear:both;}
fieldset.wrap .content .form-row .form-group, fieldset.wrap .content .form-row .form-group .checkbox {margin: 0;}
fieldset.wrap legend a {float: right;line-height:20px;margin-left:10px;font-size: 20px;}
filedset .grid-view .table th {background: #eee; color:#333;}

.form-row {width:100%;margin:5px 5% 0 0;}
.view-row .index-grid {float:left;width: 100%;margin:5px 0;}
.view-row .index-grid .colname {float:left;width:15%;font-weight: bold;margin:}
.view-row .col10 {width: 10%;}
.view-row .col20 {width: 20%;}
.form-row .col30 {width: 30%;}
.view-row .col40 {width: 40%;}
.view-row .col50 {width: 50%;}
.view-row .col60 {width: 60%;}
.view-row .col70 {width: 70%;}
.view-row .col80 {width: 80%;}
.view-row .col90 {width: 90%;}

.breadcrumb a {color:#000;}
.breadcrumb a:hover {color:#c9810e;}

.container {position: relative;}
.container .submenu {position:absolute; right: 16px;top: 6px;}

.color-group ul{list-style-image:none;list-style-position:outside;list-style-type:none;margin:0;padding:0;}
.color-group li{padding: 2px 20px 4px 0px;float:left;width: 20px;}

/* View */
.detail-view.table-striped th{width: 15%;}
.detail-view.table-striped td{width: 85%;max-width: 85%;}
.detail-view.table-striped {margin:20px 0;}
.table-striped tbody>tr:nth-child(odd)>th {color:#000;}
.color-box {width:20px;height:20px;display:inline-block;position:absolute;}
.color-box-checked {width:20px;height:20px;display:inline-block;position:absolute;background-image:url("/img/check.png");background-size:20px;}

#spec-box {margin:20px 0;}
#spec-box span {font-weight: bold;}
.spec-item {width: 100%;margin:0;}
.spec-item li {list-style-type: none;padding:0;float:left; font-weight:bold;width: 10%;margin-right: 10px;}
.spec-item li input {display:inline;width:50%;}

.expand-btn {cursor: pointer;}

/* Nav-bar */
.navbar-inner {
min-height: 40px;
padding-left: 20px;
padding-right: 20px;
background-color: #76ccbf;
background-image: -moz-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #ffffff, #f2f2f2);
background-image: -o-linear-gradient(top, #ffffff, #f2f2f2);
background-image: linear-gradient(to bottom, #ffffff, #76ccbf);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff2f2f2', GradientType=0);
border: 1px solid #76ccbf;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.065);
}

/* Utilities */
.overlay {
  display: none;
  width: 100%;
  height: 100%;
  z-index: 10;
  top: 0;
  left: 0;
  text-align: center;
  position: fixed;
  color:#000;
  background-color: #fff;
  opacity: 0.8
}
.overlay span {
  line-height: 36px;
  font-size: 30px;
  font-weight: bold;
}
.overlay img, .overlay span {
  position: relative;
  top: 47%;
}
.overlay img {
	margin-top: -10px;
}

.select2-container.form-control {max-width: 100%;}

@media (min-width: 980px) {
	#content {margin-top:20px;margin-left: 12%;}
	nav { min-width:150px; width:12%; height: 100%;}
	nav .container {width:100%;height: 100%;}
	nav .container .collapse {height: 100%;}
	.navbar >.container .navbar-brand {padding:15px 30px; margin-bottom: 20px;clear:both;}
	.navbar-nav>li {display: block;float: none;clear: both;}
	.navbar-nav {clear: both;}
	.container {margin-left: 10px;}
}

@media (min-width: 1200px) {
	.container {width: 99%;}
}

@media (max-width: 979px) {
	.navbar >.container .navbar-brand {padding:5px 15px;}
}