body {
	font:12px/1.5 tahoma,arial,"宋体";	margin: 0px; color: #333; line-height: 20px;background-color:#fff;
}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
audio,canvas,video {display: inline-block;}
a{
	color:#666;text-decoration:none;
}
p{margin:0;}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td{padding:0;margin:0;}
ul,li,ol,dd,dt,dl{list-style:none;}
input, button, select, textarea{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
.clearfix::before {
	line-height: 0; display: table; content: "";
}
.clearfix::after {
	line-height: 0; display: table; content: "";
}
.clearfix::after {
	clear: both;
}

/*-------------------------------顶部导航------------------------------*/


.hdbg{ width:100%; height:114px;background: url(../images/hdbg1.png) center top no-repeat; }
/*-------------------------------内容部分------------------------------*/
#page{border-top:1px solid #ddd}
.modal-header h4{ font-size:12px}
#content{ height:900px}
.naveditor{
	margin:0 auto;width:100%;
}
.naveditor .Biaochi {
	background: url("../images/ruler.gif") no-repeat right 0px; width:54px; height: 150px; left:50%; position: absolute; z-index: 1000; margin-left:-600px; z-index:1
}

#csseditor {
	height:400px; position: relative;background-position: 50% 0;overflow:visible;background-repeat:no-repeat;
}
#ft {
    width:1000px;color: #666; height: 255px; margin:20px auto; background:#fff; }
#ft .toolbar {
	margin:0px auto; position: relative; width:1000px;
}
.row::before {
	line-height: 0; display: table; content: "";
}
.row::after {
	line-height: 0; display: table; content: "";
}
.row::after {
	clear: both;
}
.toolbar .btns-bar {
	top:0px; right: 0; position: absolute;width:120px;
}
.toolbar .btns-bar .btn{
	cursor:pointer;float:left;display:inline;background-color:#1a1a1a;color:#fff;line-height:20px;padding:4px 12px;margin-left:5px;
}
.toolbar .btns-bar .btn a{
	color:#fff;
}
.toolbar .btns-bar .copy-json-code-btn{background:#fb0000;}
.toolbar .btns-bar .copy-json-code-btn i{background-position:-147px -218px;}
.toolbar .btns-bar .copy-css-code-btn{background:#f74343;width: 120px;height:40px;float: left; cursor:pointer; line-height:40px; text-align:center; color:#fff}
.toolbar .btns-bar .copy-css-code-btn:hover{background:#f00;}
.toolbar .btns-bar .back-close{background:url("http://img.alicdn.com/imgextra/i1/1026768645/TB2i_E2jXXXXXaJXpXXXXXXXXXX-1026768645.png") no-repeat;width: 154px;height: 51px;float: left;}
.toolbar .btns-bar .back-close:hover{background:url("http://img.alicdn.com/imgextra/i3/1026768645/TB202pijpXXXXbaXXXXXXXXXXXX-1026768645.png") no-repeat;}
#open-tools.btn-open i{background-position:-363px -290px;}
#open-tools{display:none;bottom:0;position:absolute;right:20px;cursor:pointer;background-color:#1a1a1a;color:#fff;line-height:20px;padding:4px 12px;}
.tooltip {line-height: 1.4; font-size: 11px; display: block; visibility: visible; position: absolute; z-index: 1030; opacity: 0;}
.in.tooltip {opacity: 0.8;}
.top.tooltip {padding: 5px 0px; margin-top: -3px;}
.right.tooltip {padding: 0px 5px; margin-left: 3px;}
.bottom.tooltip {padding: 5px 0px; margin-top: 3px;}
.left.tooltip {padding: 0px 5px; margin-left: -3px;}
.tooltip-inner {padding: 8px; border-radius: 4px; text-align: center; color: rgb(255, 255, 255); text-decoration: none; max-width: 200px; background-color: rgb(0, 0, 0); -webkit-border-radius: 4px; -moz-border-radius: 4px;}
.tooltip-arrow {border-style: solid; border-color: transparent; width: 0px; height: 0px; position: absolute;}
.top.tooltip .tooltip-arrow {border-width: 5px 5px 0px; left: 50%; bottom: 0px; margin-left: -5px; border-top-color: rgb(0, 0, 0);}
.right.tooltip .tooltip-arrow {border-width: 5px 5px 5px 0px; left: 0px; top: 50%; margin-top: -5px; border-right-color: rgb(0, 0, 0);}
.left.tooltip .tooltip-arrow {border-width: 5px 0px 5px 5px; top: 50%; right: 0px; margin-top: -5px; border-left-color: rgb(0, 0, 0);}
.bottom.tooltip .tooltip-arrow {border-width: 0px 5px 5px; left: 50%; top: 0px; margin-left: -5px; border-bottom-color: rgb(0, 0, 0);}
.toolbar ul {margin: 0px; padding:0px 0 5px 0; clear: both;display: block; border-bottom:1px solid #ddd}
.toolbar .nav-tabs  li {}
.nav-tabs::before {line-height: 0; display: table; content: "";}
.nav-tabs::after {line-height: 0; display: table; content: "";}
.nav-tabs::after {clear: both;}
.nav-tabs li {margin-right:3px;float: left;}
.nav-tabs li a {color: #999; display: block;height:40px;line-height:40px;background:#ebebeb;width: 173px;text-align: center;}
.nav-tabs li a:hover {background:#333c48;color: #fff;}
.nav-tabs  li.active  a {background:#333c48;color: #fff;}
.nav-tabs  li.active  a:hover {color:#fff;}
.toolbar .tab-content {margin: 20px 0px 0 0;overflow: auto;}
.tab-content .tab-pane {display: none;}
.tab-content .active {display: block;}
table {border-collapse: collapse; max-width: 100%; border-spacing: 0;}
.toolbar td {list-style: none; height: 35px;}
.toolbar td label {text-align: right; margin-right: 10px; display: inline-block; cursor: auto; width:110px;}
.toolbar td .help {color: rgb(153, 153, 153); font-size: 12px;}
.toolbar input{width:156px;padding: 4px 3px; color: #666;  font-size: 12px; vertical-align: middle; display: inline-block;}
.toolbar select{width:164px;padding: 4px 3px; color: #666;  font-size: 12px; vertical-align: middle; display: inline-block;}
.tab-content tr{ display:block}
.tab-content .unit{ padding-left:2px}
.toolbar #tabcont-1 td{ width:250px}
.toolbar #tabcont-1 label{width:100px;}
.toolbar #tabcont-1 input{width:117px;}
.toolbar #tabcont-1 select{width:125px;}
.toolbar #tabcont-1 .tr4{ padding-bottom:5px; border-bottom:1px solid #e2e2e2; margin-bottom:5px; display:block}
.toolbar #tabcont-1 .tr8{ padding-bottom:5px; border-bottom:1px solid #e2e2e2; margin-bottom:5px; display:block}
.toolbar #tabcont-2 td{ width:333px}
.toolbar #tabcont-2 .tr3{ padding-bottom:5px; border-bottom:1px solid #e2e2e2; margin-bottom:5px; display:block}
.toolbar #tabcont-3 td{ width:250px}
.toolbar #tabcont-3 label{width:100px;}
.toolbar #tabcont-3 input{width:117px;}
.toolbar #tabcont-3 select{width:125px;}
.toolbar #tabcont-3 .tr4{ padding-bottom:5px; border-bottom:1px solid #e2e2e2; margin-bottom:5px; display:block}
.toolbar #tabcont-3 .tr8{ padding-bottom:5px; border-bottom:1px solid #e2e2e2; margin-bottom:5px; display:block}
.toolbar #tabcont-4 td{ width:250px}
.toolbar #tabcont-4 label{width:100px;}
.toolbar #tabcont-4 input{width:117px;}
.toolbar #tabcont-4 select{width:125px;}
.toolbar #tabcont-4 .tr4{ padding-bottom:5px; border-bottom:1px solid #e2e2e2; margin-bottom:5px; display:block}



.toolbar input.long,.toolbar textarea.long{width:490px;padding: 4px 3px;font-size:12px;}
.toolbar input,.toolbar select,.toolbar textarea{border:1px solid #ccc;}
.toolbar input:focus,.toolbar select:focus,.toolbar textarea:focus{border-color:#49AFCD;}
.modal-backdrop {opacity: 0.3;-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity= 30 );filter: progid:DXImageTransform.Microsoft.Alpha(opacity= 30 );left: 0px; top: 0px; right: 0px; bottom: 0px; position: fixed; z-index: 1040; background-color: rgb(0, 0, 0);}
.modal-backdrop.fade.in{opacity: 0.3;-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity= 30 );filter: progid:DXImageTransform.Microsoft.Alpha(opacity= 30 );}
.modal-body textarea{color:#555;display:inline-block;line-height:20px;font-size:12px;border:1px solid #ccc;}
.fade{transition:opacity 0.15s linear 0s;opacity: 0;-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity= 0 );filter: progid:DXImageTransform.Microsoft.Alpha(opacity= 0 );}

.modal {
	background: none repeat scroll 0 0 rgba(34, 34, 34, 0.5);padding:10px; border-image: none; left: 50%; top: 10%; width: 560px; margin-left: -280px; position: fixed; _position: absolute; z-index: 9999;
}
.hide{
	display:none;
}

.fade.modal {
	transition:opacity 0.3s linear, top 0.3s ease-out; top: -25%; -moz-transition: opacity .3s linear, top .3s ease-out; -webkit-transition: opacity .3s linear, top .3s ease-out; -o-transition: opacity .3s linear, top .3s ease-out;
}
.modal.fade.in {
	top: 100px;
}
.fade.in{
	opacity: 1;-ms-filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100 );filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100 );
}
.modal .modal-contentbox{
	overflow:hidden;background-color:#fff;
}
.modal-header {
	position:relative;background-color:#2d2d2d; padding: 0px 0px 0px 10px; height: 28px; color: #fff; line-height: 25px; font-size: 12px;
}
.modal-header .close {
	top: 4px; width: 20px; height: 20px; right: 4px; overflow: hidden; text-decoration: none; vertical-align: middle; position: absolute; cursor: pointer;font-size:20px;line-height:20px;text-align:center;
}
.modal-body {
	padding:10px; color:#5d5d5d;
}
.modal-form {
	margin-bottom: 0px;
}
.modal-footer {
	padding: 14px 15px 15px; border-radius: 0px 0px 6px 6px; text-align: right; margin-bottom: 0px; border-top-color: rgb(221, 221, 221); border-top-width: 1px; border-top-style: solid; box-shadow: inset 0px 1px 0px #fff; background-color: rgb(245, 245, 245); -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; -webkit-box-shadow: inset 0 1px 0 #fff; -moz-box-shadow: inset 0 1px 0 #fff;
}
.modal-footer::before {
	line-height: 0; display: table; content: "";
}
.modal-footer::after {
	line-height: 0; display: table; content: "";
}
.modal-footer::after {
	clear: both;
}
.modal-footer .btn {
	background-color: #E6E6E6;
    background-image: none;
    background-repeat: repeat-x;
    border: 1px solid #CCCCCC;
    color: #333333;
    cursor: pointer;
    display: inline-block;
    filter: none;
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 0;
    text-align: center;
    text-shadow: none;
    vertical-align: middle;
	padding:2px 6px;
}
.modal-footer .copy-btn {
	background-color:#1a1a1a;color:#fff;
}
#ft .intro{
	margin:20px;display:none;line-height:22px;
}
.alert {
	padding: 8px 35px 8px 14px; border-radius: 4px; border: 1px solid rgb(251, 238, 213); border-image: none; margin-bottom: 20px; text-shadow: 0px 1px 0px rgba(255,255,255,0.5); background-color: rgb(252, 248, 227); -webkit-border-radius: 4px; -moz-border-radius: 4px;
}
.alert {
	color: rgb(192, 152, 83);
}
.alert h4 {
	color: rgb(192, 152, 83);
}
.alert h4 {
	margin: 0px;
}
.alert .close {
	top: -2px; right: -21px; line-height: 20px; position: relative;float:right;font-size:20px;border:0 none;cursor:pointer;background:none;
}
.pointout{
	display:inline-block;padding-left:5px;vertical-align:middle;
}