*{margin:0;padding:0;border:0}
body{background-color:#f7f7f7;font-family:arial;font-size:12px;color:#000}
a{text-decoration:none;color:#000}

/* navigation */
div#navigation{position:fixed;top:0;left:0;z-index:100;width:250px;height:100%;background-color:#fff}
div#navigation .logo{display:block;margin:0 auto;width:150px}
div#navigation ul.menu{margin:20px 20px 0px 20px;list-style:none}
div#navigation ul.menu li{display:block}
div#navigation ul.menu li +li{border-top:1px solid #eee}
div#navigation ul.menu li a{position:relative;display:block;padding-left:30px;height:36px;line-height:36px;font-weight:bold;color:#666}
div#navigation ul.menu li a:hover{color:#000}
div#navigation ul.menu li img{position:absolute;top:8px;left:0;width:20px}

div#user{position:fixed;top:0px;left:300px;z-index:200;width:calc(100% - 300px);height:50px;border-bottom:1px solid #e5e5e5}
div#user ul.menu{position:absolute;top:15px;right:20px;list-style:none}
div#user ul.menu li{float:left;height:20px;line-height:20px}
div#user ul.menu li +li{margin-left:20px;padding-left:20px;border-left:1px solid #bbb}
div#user ul.menu li span{font-weight:bold}
div#user ul.menu .icon{display:block;width:20px;height:20px;background-image:url(../images/icon-setting.png);background-color:#eee}
div#user ul.menu .icon.active{width:22px;height:32px;border:1px solid #999;border-bottom-width:0;background-position:-24px 0;background-color:#fff}
div#user ul.menu .list{right:0}

div#user ul.website{position:absolute;top:15px;left:0px;list-style:none}
div#user ul.website li{float:left;height:20px;line-height:20px}
div#user ul.website .list{left:0}

div#user div.list{display:none;position:absolute;top:32px;padding:10px;width:150px;border:1px solid #ccc;background-color:#fff}
div#user div.list ul{list-style:none}
div#user div.list ul li.separate{margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid #eee}
div#user div.list ul li a{display:block;margin:0 -10px;padding:5px 20px;color:#999}
div#user div.list ul li a:hover{background-color:#eee;color:#000}

/* content */
div#content{margin:100px 50px 20px 300px}
div#content h1{position:relative;margin-bottom:40px;color:#000;font-size:16px}
div#content h1 ul{position:absolute;top:0;right:0;list-style:none}
div#content h1 ul li{float:left}
div#content h1 ul li +li{margin-left:2px}
div#content h2{position:relative;margin-top:40px;margin-bottom:10px;padding-bottom:10px;border-bottom:2px solid #eee;color:#000;font-size:12px}
div#content h2 img{display:inline-block;margin-right:5px;vertical-align:middle;height:20px}

div#content ul.gallery{list-style:none}
div#content ul.gallery li{position:relative;float:left;margin:5px;width:200px;}
div#content ul.gallery li div{position:absolute;top:5px;left:5px}
div#content ul.gallery li div a{float:left;padding:3px;background-color:#fff;opacity:0.8}
div#content ul.gallery li div a:hover{opacity:1}
div#content ul.gallery li div a +a{margin-left:1px}
div#content ul.gallery li img{display:block}
div#content ul.gallery li img.photo{width:100%}

div#content ul.photo{list-style:none}
div#content ul.photo li{position:relative;float:left;margin:2px;padding:10px;background-color:#fff;border-radius:10px}
div#content ul.photo li.main{border-color:#999}
div#content ul.photo li div{position:absolute;z-index:50;top:15px;left:15px}
div#content ul.photo li div a{float:left;padding:3px;background-color:#fff;opacity:0.8}
div#content ul.photo li div a:hover{opacity:1}
div#content ul.photo li div a +a{margin-left:1px}
div#content ul.photo li img{display:block;width:100%}
div#content ul.photo li span{position:relative;display:block;width:100%;height:128px}
div#content ul.photo li span a{position:absolute;top:calc(50% - 17px);left:calc(50% - 32px);display:block;width:60px;height:30px;line-height:30px;border:2px solid #666;color:#000;font-size:14px;font-weight:bold;text-transform:uppercase;text-align:center}

div#content ul.tags{margin-top:10px;list-style:none}
div#content ul.tags li{display:inline-block;margin-right:3px}
div#content ul.tags li a{display:block;padding:3px 5px;border-radius:3px;background-color:#ddd;color:#666;font-size:10px}
div#content ul.tags li a:hover{background-color:#666;color:#fff}



div#content table{width:100%;border-collapse: collapse}
div#content table tr:hover td{background-color:#f5f5f5}
div#content table th{border-bottom:2px solid #ddd;text-align:left;color:#999}
div#content table td{border-bottom:1px solid #e5e5e5;vertical-align:top}
div#content table th,
div#content table td{padding:8px 5px}
div#content table td b{font-size:14px}
div#content table .center{text-align:center}
div#content table .right{text-align:right}
div#content table .inactive{background-color:#fffbda}
div#content table .success{background-color:#ccff99}
div#content table .archive{opacity:0.3}
div#content input[type=text],
div#content input[type=password],
div#content input[type=file],
div#content input[type=date],
div#content input[type=time],
div#content textarea,
div#content select{padding:9px;border:1px solid #ddd;border-radius:5px;background-color:#fff;width:274px;font-family:arial;font-size:12px;color:#666}
div#content input[type=submit] {font:bold 12px arial;height:30px;cursor:pointer}
div#content input[disabled],
div#content select[disabled] {color:#999}
div#content input[type=checkbox] {margin-right:5px}
div#content input[type=date]{width:100px}
div#content input[type=time]{margin-left:5px;width:75px}
div#content select{padding:7px;width:290px}
div#content select option{padding:0 7px;}
div#content textarea{height:100px}
div#content input.w840,
div#content textarea.w840{width:840px}
div#content form dl{position:relative;clear:left;float:left;width:1000px}
div#content form dl +dl{margin-top:15px}
div#content form dl.border{margin-top:30px;padding-top:30px;border-top:1px solid #e5e5e5}
div#content form dl.buttons{padding:20px 0;border-top:1px solid #e5e5e5}
div#content form dl dt{float:left;padding:5px 10px 5px 0;width:140px;color:#999;font-weight:bold}
div#content form dl dt span{font-weight:normal;color:#ff0000}
div#content form dl dd{position:relative;float:left;width:840px}
div#content form dl dd.text{padding:5px 0}
div#content form dl dd input{float:left}
div#content form dl dd strong{display:block;margin-bottom:5px}
div#content form dl dd div.list +strong{margin-top:30px}
div#content form dl dd div.list +div.list{border-top:1px solid #eee;padding-top:5px;margin-top:5px}
div#content form dl dd div.list.bock{width:100%}
div#content form dl label.error{position:absolute;right:0;top:0;width:300px;height:30px;line-height:30px;border-bottom:1px solid #ee0000;color:#ee0000;font-weight:bold}
div#content form dl +h2{margin-top:30px}
div#content .button{float:left;background-color:#000;color:#fff;border-radius:5px;font-size:12px;font-weight:bold;height:30px;line-height:30px;padding:0 15px}
div#content .button +.button{margin-left:10px}
div#content .button.light{background-color:#eee;color:#000;border-color:#ccc}
div#content .button.green{background-color:#fff;color:#66cc00;border-color:#ccc}
div#content .button.nt{background:#e5097f;background:linear-gradient(80deg,rgba(229, 9, 127, 1) 0%, rgba(231, 156, 194, 1) 50%, rgba(99, 235, 215, 1) 100%);}
div#content .button.red{background-color:#fff;color:#ee0000;border-color:#ccc}
div#content .button.small{height:21px;line-height:21px;padding:0 5px}
div#content .paging{margin-top:20px;color:#999}
div#content .paging a{color:#000}
div#content .paging a:hover{border-bottom:1px dotted #000}
div#content .status{position:relative;display:block-inline;padding:3px 6px;border-radius:2px}
div#content .status .dot{position:absolute;top:5px;right:-8px;width:10px;height:10px;border-radius:5px}

div#content label.option{float:left;cursor:pointer;width:16.666666%;text-align:center}
div#content label.option .input{position:absolute;cursor:pointer;left:-50px;height:0;width:0}
div#content label.option .name{margin:2px;padding:8px;border:1px solid #eee;color:#999;display:block;border-radius:4px}
div#content label.option .name img{display:inline-block;margin-right:5px;vertical-align:middle;width:20px}
div#content label.option .input:checked ~ .name{background-color:#000;border-color:#000;color:#fff;font-weight:bold}
div#content label.option.green .input:checked ~ .name{background-color:#97dc82;border-color:#000;color:#fff;font-weight:bold}
div#content label.option.blue .input:checked ~ .name{background-color:#86cadb;border-color:#000;color:#fff;font-weight:bold}
div#content label.option.red .input:checked ~ .name{background-color:#fc3737;border-color:#000;color:#fff;font-weight:bold}
div#content label.option.yellow .input:checked ~ .name{background-color:#eccf78;border-color:#000;color:#fff;font-weight:bold}

.switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 13px;
  width: 13px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
   border-radius: 50%;
}

input:checked + .slider {
  background-color: #ff0000;
}

input:focus + .slider {
  box-shadow: 0 0 1px #ff0000;
}

input:checked + .slider:before {
  -webkit-transform: translateX(13px);
  -ms-transform: translateX(13px);
  transform: translateX(13px);
}

/* Rounded sliders */
.slider.round {
  
}

.slider.round:before {
  border-radius: 50%;
}



div#content .message{overflow:hidden;padding:20px 0;border-bottom:1px solid #eee}
div#content .message .info{margin-bottom:10px;color:#999}
div#content .message .type{float:left;width:200px}
div#content .message .type b{font-size:14px}
div#content .message .text{float:left;width:200px}
div#content .message .data{float:left;width:calc(100% - 400px)}


div#content.login{position:absolute;top:50%;left:50%;margin-top:-200px;margin-left:-200px;padding:50px;width:300px;border:1px solid #eee;background-color:#fff}
div#content.login h1{margin-bottom:20px;padding-bottom:20px;border-bottom:2px solid #eee}
div#content.login form dl{width:300px}
div#content.login form dl dt{display:none}
div#content.login form dl dd{width:300px}
div#content.login form dl dd a{position:absolute;right:0}
div#content.login form dl label.error{width:200px}
div#content.login form input[type=text],
div#content.login form input[type=password] {width:284px}

div#content.login .header{position:absolute;top:-100px;left:0;padding:10px 0;width:100%;background-color:#fff}
div#content.login .header .logo{display:block;margin:0 auto;height:80px}

/* message */
.message{}
.message p{margin-bottom:20px;padding:10px;border-bottom-width:1px;border-bottom-style:solid}
.message p.success{background-color:#ccff99;border-color:#99ff66;color:#669900}
.message p.fail{background-color:#ffcc99;border-color:#ff3300;color:#ff3300}

/* other */
.break{clear:left}
.break.mb50{margin-bottom:50px}

/* color */
.bgcolor.black{background-color:#000;color:#fff}
.bgcolor.green{background-color:#97dc82;color:#fff}
.bgcolor.blue{background-color:#86cadb;color:#fff}
.bgcolor.yellow{background-color:#eccf78;color:#fff}
.bgcolor.red{background-color:#fc3737;color:#fff}