﻿/*
div,
address,
h2 a   { background: url(test-innerborder2.gif) no-repeat; }
.layout,
li,
.block h3,
form,
p,
.block .content { background: url(test-innerborder.gif) no-repeat!important; }
*/


/* excludes */

html,
body,
.layout
{
	overflow: hidden;
}


/* text */

html,
body
{
	font-family: 微软雅黑, arial, sans-serif, simsun;
}

html,
a,
form,
input,
select
{
	font-size: 12px;
}

img,
input,
select
{
	vertical-align: middle;
}


/* box */

html,
body,
div,
ul,
ol,
li,
form,
address,
h1,
h2,
h3,
h4,
h5,
h6,
p,
img,
label
{
	margin: 0;
	padding: 0;
}

input,
select
{
	margin: 0;
}


/* split */

body            { width: 100%; height: 100%; }
.spin           { width: 77px; height: 100%; }
.sider          { width: 336px; max-width: 100%; height: 100%; overflow-x: hidden; }
.sider .catalog { width: 320px; overflow-y: auto; }
.main           { height: 100%; }
.main .wrapper  { height: 99%; }


/* locate */

.spin   { position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; text-align: center; font-weight: bold; }
.sider  { position: absolute; z-index: 2; top: 0; left: 0; bottom: 0; width: 336px; }
.main   { position: absolute; z-index: 5; top: 0; right: 77px; bottom: 0; left: 320px; }
.topbar { position: absolute; z-index: 6; top: 4px; left: 344px; }

.spin .logo_publish { display: block; padding: 5px 25px; }
.spin img.spin      { float: right; width: auto; height: auto; }
.spin h1            { display: block; margin: 16px auto 0 auto; width: 1em; font-size: 24px; font-style: normal; }
.spin address       { display: block; margin: 60px auto 0 auto; width: 1em; font-size: 18px; font-style: normal; }

.sider .splitter   { clear: right; margin: 0; padding: 0; height: 0px; line-height: 1px; font-size: 1px; }

.sider .switches        { height: 40px; padding-right: 24px; }
.sider .switches div    { float: right; }
.sider .switches input  { display: block; float: left; margin: 9px 0 0 2px; width: 62px; height: 24px; }

.sider .tools                 { clear: right; float: right; padding-top: 10px; padding-bottom: 10px; height: 40px; padding-right: 24px; }
.sider .tools input,
.sider .tools form            { display: block; float: left; }
.sider .tools .back,
.sider .tools .forward,
.sider .tools .rollup,
.sider .tools .rolldown       { width: 22px; height: 24px; }
.sider .tools .home           { width: 27px; height: 24px; }
.sider .tools form .keywords  { margin-top: 2px; padding: 1px 4px; width: 115px; height: 17px; line-height: 21px; }
.sider .tools form .submit    { width: 40px; height: 25px; }
.sider .tools form .nocomment { width: 40px; height: 25px; }
.sider .tools .home,
.sider .tools form .submit,
.sider .tools .rollup         { margin-left: 4px; }
.sider .tools form            { margin-left: 6px; }

.sider .about           { clear: right; position: absolute; bottom: 0; padding-bottom: 10px; text-align: center; width: 320px; font-size: 12px; font-style: normal; }
.sider .about .span_211 { font-weight: bold; }

.topbar { padding: 4px; }

.main .wrapper { z-index: 1; margin: 4px!important; margin-left: 24px!important; overflow-y: auto; }
.main .content { margin: 14px; margin-top: 24px;  }

.catalog                  { clear: right; margin-left: 20px; height: 35%; overflow-y: scroll; overflow-x: hidden; margin-bottom: 5px; }
.catalog ul               { display: block; margin-left: 10px; list-style: none; }
.catalog li               { display: inline; }
.catalog li a             { display: block; padding: 3px 24px 9px 40px; text-align: left; zoom: 1; min-height: 18px; line-height: 25px; overflow: hidden; } 
.catalog li a             { margin: 0 1px 0 0; font-size: 12px; font-weight: normal; }
.catalog li.selected a    { margin-right: 0; font-weight: bold; }
.catalog li.selected li a { margin-right: 1px; font-weight: normal; }


/* bg & sprite */

body
{
	color: black;
}

.sider,
.sider a,
.spin,
.spin a
{
	color: white;
}

body { background: transparent url(bg.gif) repeat scroll 0 0; }

.sider .switches { background: transparent url(bg-toolbar.gif) repeat-x 0 0; }
.sider .splitter { border-top: 1px solid #3a3908; border-bottom: 1px solid #d7d6bf; }
.sider form .keywords { border: 2px solid Linen; }

.spin { background: #3f3400 url(bg-spin.gif) repeat-y 0 0; }
.spin img.logo,
.spin img.logo_publish,
.spin h1,
.spin address { display: none !important; }
/*
.spin .logo_publish { background: transparent url(bg-dark.gif) repeat scroll 0 0; }
*/

.sider .switches input,
.sider .tools .back,
.sider .tools .forward,
.sider .tools .home,
.sider .tools .submit,
.sider .tools .nocomment,
.sider .tools .rollup,
.sider .tools .rolldown
{
	background-color: transparent;
	background-image: url(sprite.gif);
	background-repeat: no-repeat;
	border: none;
	cursor: pointer;
}

.sider .switches .comment             { background-position: 0 0; }
.sider .switches .collate             { background-position: -75px 0; }
.sider .switches .tag                 { background-position: -150px 0; }
.sider .switches .tradsimp            { background-position: -300px 0; }
.sider .switches .largefont           { background-position: -225px 0; }
.sider .switches .comment_checked     { background-position: 0 -25px; }
.sider .switches .collate_checked     { background-position: -75px -25px; }
.sider .switches .tag_checked         { background-position: -150px -25px; }
.sider .switches .tradsimp_checked    { background-position: -300px -25px; }
.sider .switches .largefont_checked   { background-position: -225px -25px; }
.sider .tools .back                   { background-position: 0 -50px; }
.sider .tools .forward                { background-position: -22px -50px; }
.sider .tools .home                   { background-position: -46px -50px; }
.sider .tools .submit                 { background-position: -179px -50px; }
.sider .tools .nocomment              { background-position: -220px -50px; }
.sider .tools .rollup                 { background-position: -75px -50px; }
.sider .tools .rolldown               { background-position: -100px -50px; }
.sider .tools .keywords               { border: 1px solid #553c00; }

.main            { background: transparent url(bg-content-w2.gif) repeat-y 0 0; }}
.main .wrapper   { background: transparent!important; }

.catalog li a                   { color: black; background: transparent url(bg-treenode-w.gif) no-repeat 0 0; text-decoration: none; }
.catalog li.selected a          { color: black; background-position: 0 -30px; }
.catalog li.selected li a       { color: black; background-position: 0 0; }
/*
.catalog li.selected a          { color: black; background-color: Linen; }
.catalog li.selected li a       { color: black; background-color: white; }
.catalog li a                   { background-position: 0 -386px; }
.catalog li a.text              { background-position: 0 -130px; }
.catalog li a.keywords          { background-position: 0 -257px; }
*/
.catalog li a                   { filter: alpha(opacity=70);  'alpha(opacity=70);'  -moz-opacity: 0.7; opacity: 0.7; }
.catalog li.selected a          { filter: alpha(opacity=100); 'alpha(opacity=100);' -moz-opacity: 1.0; opacity: 1.0; }
.catalog li.selected li a       { filter: alpha(opacity=70);  'alpha(opacity=70);'  -moz-opacity: 0.7; opacity: 0.7; }
.catalog li a:hover             { filter: alpha(opacity=60);  'alpha(opacity=60);'  -moz-opacity: 0.6; opacity: 0.6; }
.catalog li.selected a:hover    { filter: alpha(opacity=100); 'alpha(opacity=100);' -moz-opacity: 1.0; opacity: 1.0; }
.catalog li.selected li a:hover { filter: alpha(opacity=60);  'alpha(opacity=60);'  -moz-opacity: 0.6; opacity: 0.6; }

.catalog li .close { float: right; }
.catalog li .close { width: 16px; height: 16px; margin: 0; margin-top: 4px; padding: 0; cursor: pointer; border: none; background: transparent url(close.gif) no-repeat -1px -1px; }
.catalog li .hover { background-position: -1px -19px; }
.catalog li a span {  }

.catalog .text li .close,
.catalog .search li li .close { display: none; }

/* dhcl */

.logo_publish {
	display: none!important;
}

.spin address.publish1 {
	padding-right: 18px!important;
}

.spin .logo {
	display: block; padding: 5px 14px;
	background: transparent url(bg-dark.gif) repeat scroll 0 0; 	
}

.spin address {
	display:block;
	float: right!important;
	font-size:18px;
	font-style:normal;
	margin:20px auto 0!important;
	width:1em;
}


.topbar { background: #dfdebb; }
.topbar a,
.topbar span { font-size: 18px!important; }

.mobile-catalog-toggle,
.mobile-catalog-mask { display: none; }

@media screen and (max-width: 768px) {
	html, body { width: 100%; height: 100%; overflow: hidden; }
	.spin, .topbar { display: none !important; }

	.main {
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: auto;
		height: auto;
		background-position: 0 0;
	}
	.main .wrapper {
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		margin: 0 !important;
		overflow-x: hidden;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.main .content {
		box-sizing: border-box;
		width: 100%;
		margin: 0;
		padding: 18px 16px 48px;
	}

	.sider {
		position: fixed;
		z-index: 60;
		box-sizing: border-box;
		width: min(86vw, 336px);
		max-width: 336px;
		transform: translateX(-105%);
		transition: transform .22s ease;
		box-shadow: 4px 0 14px rgba(0, 0, 0, .35);
	}
	.sider .catalog,
	.sider .about { width: calc(100% - 16px); }
	body.catalog-open .sider { transform: translateX(0); }

	.mobile-catalog-toggle {
		display: block;
		position: fixed;
		z-index: 70;
		left: 0;
		top: 44%;
		box-sizing: border-box;
		width: 30px;
		min-height: 72px;
		padding: 8px 5px;
		border: 1px solid #756f2e;
		border-left: 0;
		border-radius: 0 8px 8px 0;
		background: #827d28;
		color: #fff;
		font-size: 15px;
		line-height: 1.25;
		writing-mode: vertical-rl;
		box-shadow: 2px 2px 7px rgba(0, 0, 0, .25);
	}
	body.catalog-open .mobile-catalog-toggle {
		left: min(86vw, 336px);
		transform: translateX(-100%);
		border-left: 1px solid #756f2e;
		border-right: 0;
		border-radius: 8px 0 0 8px;
	}
	.mobile-catalog-mask {
		display: none;
		position: fixed;
		z-index: 55;
		inset: 0;
		background: rgba(0, 0, 0, .28);
	}
	body.catalog-open .mobile-catalog-mask { display: block; }
}
