﻿
/************************ 基础 ***********************/
html
{
	scroll-behavior: smooth;
}

body 
{
	margin				:	0px;
	padding				:	10px;
	background-color	:	#fff;
	
	font-family			:	"微软雅黑";
	font-size			:	14px;
}


a:link{
	color			:	#666666;
	text-decoration	:	none;
}
a:visited {
	color			:	#666666;
	text-decoration	:	none;
}
a:hover{
	color			:	#666666;
	text-decoration	:	underline;
}

/***** 左上角主标题 *****/
.MainLogo
{
	margin: 0 0 10px 0;
	width: 240px;
	height: 60px;
	background-color: #2d8cf0;
	border-radius: 8px;
	overflow: hidden;
	
	box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.05);

	display:flex;
    justify-content:center;
    align-items:center;
	flex-direction:column;
}

.MainLogo img
{
	height: 50px;
}

/********************** 左侧导航面板 ******************/
.LeftPanel
{
	position: fixed;
	left: 10px;
	top: 10px;
	width: 250px;
	height: calc( 100% - 20px );
	overflow: auto;
}

.LeftPanel summary
{
	cursor: pointer;
}
.LeftPanel summary:hover
{
	background-color: #5cadff;
	color:#fff;
}

.LeftPanel summary:hover a
{
	background-color: #5cadff;
	color:#fff;
}


/********** 第一层折叠面板 ***********/
.LeftPanel > details
{
	width				:	240px;
	margin				:	0px 0px 5px 0;
	padding				:	0px;
	
	border-radius		:	8px;
	overflow: hidden;
}
.LeftPanel > details:hover
{
	background-color: #f8f8fd;
}

.LeftPanel > details > summary
{
	padding-left: 10px;
	height: 36px;

	justify-content:flex-start;
    align-items:center;
    display:flex;

	color: #515a6e;
    font-weight: bold;
    font-size: 16px;
	
}

/* 右侧小箭头 */
.LeftPanel > details > summary .Arrow
{
	position: absolute;
	right: 20px;
	transition: all .5s ease;
}

.LeftPanel > details[open] > summary .Arrow
{
	transform: rotate(90deg);
}

.LeftPanel > details > nav
{
	margin: 0 20px 0px 20px;

	width: calc( 100% - 40px );
    overflow: hidden;
	transition: all .5s ease;
}

.LeftPanel > details > summary::marker 
{
	color: #B6B6B6; 
	transition: all .5s ease;
}
.LeftPanel > details > summary::-webkit-details-marker 
{
	color: #B6B6B6; 
	transition: all .5s ease;
}

/********** 第二层折叠面板 ***********/
.LeftPanel > details > nav > details 
{
	margin-top: 5px;
	transition: all .5s ease;
}

.LeftPanel > details > nav > details > summary
{
	padding-left: 25px;
	height: 28px;
	line-height: 28px;
	vertical-align: middle;
	color: #515a6e;
	border-radius: 8px;
	overflow: hidden;
	font-weight: bold;
}

.LeftPanel > details > nav > details > summary a
{
	color:#666;
}
.LeftPanel > details > nav > details > nav
{
	padding-left: 20px;
	transition: all .5s ease;
}

.LeftPanel > details > nav > details > nav > ul
{
	margin-top: 0px;
	padding-top: 0px;
}
.LeftPanel > details > nav > details > nav > ul li
{
	color: #2d8cf0;
	margin: 8px 0;
}
.LeftPanel > details > nav > details > nav > ul li a
{
	color: #2d8cf0;
}
/********************** 左侧滚动条 ********************/

/********** 小滚动条 **********/
.LeftPanel::-webkit-scrollbar    /*滚动条整体样式*/ 
{
    position: absolute;
    width : 6px;  /*高宽分别对应横竖滚动条的尺寸*/
    height: 6px;
    opacity:0.8;
    transition: opacity 0.5s ease;
}

.LeftPanel:hover::-webkit-scrollbar    /*悬停样式*/
{
    width : 6px;
    height: 6px;
    opacity:0.8;
    transition: opacity 0.5s ease;
}

.LeftPanel:hover::-webkit-scrollbar-thumb  /*悬停时滚动条里面小方块*/
{    
    border-radius: 8px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
    background   : rgba(50, 50, 50, 0.5);
    min-height: 12px !important;
    transition: opacity 0.5s ease;
}

.LeftPanel::-webkit-scrollbar-thumb  /*滚动条里面小方块*/
{    
    border-radius: 8px;
    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0);
    background   : rgba(50, 50, 50, 0);
    min-height: 12px !important;
    transition: opacity 0.5s ease;
}

.LeftPanel:hover::-webkit-scrollbar-track    /*悬停时滚动条里面轨道*/
{
    border-radius: 10px;
    box-shadow: inset 0 0 4px #808695;
    transition: opacity 0.5s ease;
}

.LeftPanel::-webkit-scrollbar-track    /*滚动条里面轨道*/
{
    border-radius: 10px;
    transition: opacity 0.5s ease;
}

/********************** 右侧内容面板 ******************/
.RightPanel
{
	position: relative;
	left: 250px;
	top: 0px;
	width: calc( 100% - 250px );
	overflow: auto;
	padding-right: 10px;
}

/************************ 窗口 ***********************/
.Windows
{
	width				:	auto;
	margin				:	0 10px 10px 10px;
	padding				:	0px;
	border				:	solid 1px #ddd;
	
	border-radius		:	8px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.05);
}

.Windows .Title 
{
	width				:	auto;
	min-height			:	40px;
	line-height			:	40px;
	vertical-align		:	middle;
	margin				:	0px;
	padding				:	5px 20px 5px 20px;
	
	color				:	#515a6e;
	font-weight			:	bold;
	font-size			:	18px;
	
	background-color	:	#f8f8fd;
	text-align: center;
}

.Windows .Content 
{
	width				:	auto;
	margin				:	0px;
	padding				:	0 20px 20px 20px;
	background-color	:	#f8f8fd;
	
	color: #515a6e;
	
}

/************************ 段落区域 ***********************/
.Windows .Part
{
	color				:	#666666;
	padding-bottom		:	30px;
	
}

.Windows .Part .Left
{
	font-size: 16px;
	font-weight			:	bold;
	float				:	left;
}


.Windows .Part .Right
{
	float				:	right;
}

.Windows .Area
{
	overflow			:	hidden;
	padding				:	5px;
	color				:	#333333;
	font-weight			:	normal;
	text-indent			:	2em;
	
	border-radius		:	5px;
	border				:	solid 1px #dddddd;
	background-color	:	#ffffff;
	
}

.Windows .Area b
{
	font-weight			:	bold;
	color				:	#2d8cf0;		
}


/************************ 表格区域 ***********************/
.Windows .Grid
{
	width				:	100%;
	background-color	:	#ffffff;
	border				:	solid 1px #cccccc;
	overflow			:	hidden;
	border-radius		:	5px;
}

.Windows .Grid table
{
	width				:	100%;	
	border				:	hidden;
	border-collapse		:	collapse;  
	border-spacing		:	0;
	min-height			:	30px;
}

.Windows .Grid table .Tag
{
	height				:	25px;
	color				:	#333333;
	font-weight			:	bold;
	padding				:	5px 0px;
	text-indent			:	1em;
}

.Windows .Grid th
{
	width				:	10em;
	background-color	:	#f8f8f8;
	vertical-align		:	middle;
	text-align			:	center;
	font-weight			:	bold;
	color				:	#2d8cf0;
	overflow			:	hidden;
	border-left			:	solid 1px #cccccc;
	border-bottom		:	solid 1px #dddddd;
	padding				:	7px;
}

.Windows .Grid td
{
	overflow			:	hidden;
	background-color	:	#ffffff;
	border-bottom		:	solid 1px #dddddd;
	text-indent			:	2em;
	padding: 10px 20px;
}

.Windows .Grid td p
{
	margin			:	12px 0;
}

.Windows .Grid .Index
{
	padding				:	0px;
}

.Windows .Grid .Index ul
{
	margin				:	0px;
	padding				:	0px;
}

.Windows .Grid .Index li
{
	list-style-type		:	none;
	min-width			:	10em;
	padding				:	0px;
	margin-top			:	3px;
	margin-bottom		:	3px;
}

.Windows .Grid ol
{
	margin				:	5px;
}

.Windows .Grid ul
{
	margin				:	0xp;	
}

.Windows .Grid li
{
	padding				:	2px;	
}
