/* 引入自定义光标 */
	@media screen and (min-width:0px) {
		/* 默认光标 */
		*{cursor:url("https://files.cnblogs.com/files/blogs/671158/Arrow2.ico"),auto;}

			/* 可点击光标 */
		#sideCatalogBtn,
		#info_table td,
		#fry_sidebar,
		.upToNav,
		.delete_btn,
		.search_btn,
		.search_btn2,
		a img,
		a span,
		a,
		i{
			cursor:url("https://files.cnblogs.com/files/blogs/671158/Hand2.ico"),
			pointer;
		}
			/* 可输入光标 */
		#zzk_q{cursor:url("https://files.cnblogs.com/files/blogs/671158/IBeam.ico"),text;}
	}
		
	
	/* 设置全局变量 */
	@media screen and (min-width:0px) {
		/* 此处为主题颜色和资源链接,根据自己的喜好,修改即可 */
		:root {
			/* 主题色 */
			--ThemeColor: #00a1d6;
			/* 字体色 */
			--TextColor1: #141418;
			/* 侧边栏标题 */
			--TextColor2: #5f5f6b;
			/* 页脚 */
			--TextColor3: #97979f;
			/* 分割线色 */
			--DividColor: #e7eaf0;
			--BlockColor: #fff;
			/* 板块色 */
			--BackgroundColor: #f4f6fa;
			
			/* 字体级别 */
			/* 正文标题 */
			--text1: 26px;
			/* 侧边栏名字 */
			--text2: 22px;
			/* 首页栏标题 */
			--text3: 18px;
			/* 侧边栏标题 */
			--text4: 13px;
			/* body部分 */
			--textNoraml: 16px; 
			/* 背景图 */
			--BackgroundImg: url("https://w.wallhaven.cc/full/rd/wallhaven-rddgwm.jpg") ;
			--Avatar: url("https://files.cnblogs.com/files/blogs/671158/portrait.ico");
			/* 背景图透明层 */
			--ImgShadow: rgba(0, 0, 0, 0.19);
			--BackgroundHeight: 40vh; /* 背景图高度*/
			--distant1: 10vh;/* 头像和名字距离顶部高度*/
			/*图片显示效果*/
			--ImgBrightness:brightness(200%);
		}
	}
	
	/* 设置全局样式 */
	@media screen and (min-width:0px) {
	
		/* 去广告 */
		/*通过查看页面HTML元素名称得到ID*/
		#ad_c1,
		#ad_c2,
		#ad_t2,
		#under_post_news,
		#ad_t2,
		#cnblogs_c1,
		#cnblogs_c2,
		#under_post_kb,
		#bannerbar,
		#under_post_card1,
		#under_post_card2,
		.c_ad_block
		{
			display: none !important;
		}
	
		* {
			box-sizing: border-box; /*定义了box大小的计算方式，当我们指出width和height时，表示这个数据包含了border,margin*/
			text-decoration: none; /*不要下划线*/
		}
		body {
			background-color: var(--BackgroundColor);
			margin: 0;
			padding: 0;
			font-size: var(--textNoraml);
		}
		code{
			font-family: consolas;
			color: var(--TextColor1);
		}
		a {
			
			color: inherit;
		}
		a:hover {
			color: var(--ThemeColor)
		}
		img {
			max-width: 100%;
		}
	}
	
	/* 总体布局 */
	@media screen and (min-width:0px) {
		#home {
			margin: 0;
			padding: 0;
			font-size: var(--textNoraml) !important;
		}
	
		#home #header {
			min-width: 1200px;
			margin-bottom: 20px;
			display: block;
			
		}
	
		#home #main {
			display: flex;
			margin-bottom: 100px;
		}
	
		#home #footer {
			margin-top: 20px;
			text-align: center;
		}
	}
	
	/* blogTitle：header中大背景图片部分 */
	@media screen and (min-width:0px) {
		#header {
			background-color: var(--BlockColor);
		}
		
		/* 主背景图片 */
		#header:before {
			/* 需要设置content，否则before不会被插入 */
			content: "";
			width: auto;
			height: var(--BackgroundHeight); /*高度被设置为全局变量screen的高度*/
			background-image: var(--BackgroundImg);
			background-position: center;
			/* 把背景图像扩展至足够大，以至于能够覆盖整个区域 */
			background-size: cover;
			display: block;
			/* text-align: center; */
			z-index: 1;
			filter: var(--ImgBrightness);
		}
		/* 在背景图与其上文字、头像之间夹了一层深色的密格，让文字和头像在背景之上容易被辨认 */
		#header:after {
			content: "";
			display: block;
			height: var(--BackgroundHeight);
			width: 100%;
			left: 0;
			right: 0;
			top: 0;
			position: absolute;
			/* 图片是密格 */
			background-image: url("https://img2018.cnblogs.com/blog/1646268/201908/1646268-20190806130657359-228955661.png");
			/* 在密格的基础上设置不透明度 */
			background-color: var(--ImgShadow);
			z-index: 2;
		}
		/* 包含头像，链接，名字，签名 */
		#header #blogTitle {
			z-index: 9999;
			position: absolute;
			left: 0;
			right: 0;
			top: var(--distant1);
			text-align: center;
		}
		
		/* 头像 */
		#header #blogLogo {
			background-image: var(--Avatar);
			width: 80px;
			height: 80px;
			background-size: contain;
			border-radius: 50%;
			border: 4px solid #fff;
		}
		/* 我的名字显示在大背景图片之上 */
		/* 名字下面有一行可以显示个性签名 */
		#header #blogTitle h1,
		#header #blogTitle h1 a {
			margin: 0;
			padding: 0;
			color: #fff;
			
		}
		
		/* 划定了区域，设置了样式，但没有内容 */
		#header #blogTitle h2 {
			margin: 0;
			padding: 0 10px 20px;
			font-size: var(--textNormal);
			color: #fff;
			min-height: 60px;
			line-height: 1.5;
			/* 以下两行将显示的行数限定在5以下 */
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 5;
			/* 如果溢出，使用省略号 */
			text-overflow: ellipsis;
			overflow: hidden;
			font-weight: normal;
			box-sizing: content-box !important;
		}
		
		/* 指向主页的链接，名字，个性签名的层级：2 */
		#blogTitle #lnkBlogLogo,
		#blogTitle h1,
		#blogTitle h2 {
			z-index: 2;
			position: relative;
		}

	}
	/* 导航栏，header的另一部分 */
	@media screen and (min-width:0px) {

	
		#navigator {
			width: 100%;
			height: 60px;
			padding: 0 20px;
			max-width: 1200px;
			margin: 0 auto;
			display: flex;
			z-index: 9999;
		}
	
		#navigator #navList {
			margin: 0;
			padding: 0;
			overflow-x: auto;
			flex: auto;
			display: inline-flex;
		}


		#navigator #navList li {
			list-style-type: none;
			float: left;
			margin: 0;
			padding: 0;
			display: inline-block;
		}
	
		#navigator #navList li a {
			line-height: 60px;
			color: inherit;
			
			margin-right: 20px;
			white-space: nowrap;
	
		}

		/* 不显示订阅 */
		#navigator #navList #blog_nav_rss{
			display: none ;
		}


		/* 导航栏按钮中的文字 */
		#navigator #navList li span {
			line-height: 60px;
			color: inherit;
			
			margin-right: 20px;
			white-space: nowrap;
	
		}

		/* 鼠标指向导航栏按键时的效果 */
		#navigator #navList li:hover a {
			color: #00a1d6;
			border-bottom: 3px solid #00a1d6;
			padding-bottom: 16px;
		
		}
	
		
		#blog_nav_css{
			display: none;
		}
	
		/* 导航栏选项的前置图标，但是图标导入失败，现在只有颜色 */
		#blog_nav_sitehome:before {
			content: "\e62d";
			color: #fb7299;
			/*font-size:20px;*/
			font-family: iconfont;
		}
		/* 主页 */
		#blog_nav_myhome:before {
			content: "\e626";
			color: #00c091;
			/*font-size:20px;*/
			font-family: iconfont;
		}
		/* 新随笔 */
		#blog_nav_newpost:before {
			content: "\e628";
			color: #3c9ed1;
			/*font-size:20px;*/
			font-family: iconfont;
		}
		/* 联系 */
		#blog_nav_contact:before {
			content: "\e624";
			color: #f3a034;
			/*font-size:20px;*/
			font-family: iconfont;
		}
		/* 管理 */
		#blog_nav_admin:before {
			content: "\e627";
			color: #23c9ed;
			/*font-size:20px;*/
			font-family: iconfont;
		}
	
		/* 扩展按钮：更改主题 */
	
	
		#blog_nav_theme:before {
			content: "\f1de";
			margin-right: 6px;
			color: #00c091;
			font-family: FontAwesome;
		}
	
		
		/*搜索框*/
		@media screen and (min-width:0px){
			#auto_div {
				display: none;
			}
		
			.side_search {
				float: left;
				position: relative;
				height: 31px;
				margin-left: 25px;
				display: inline-block;
			}
		
			.search_input {
				width: 210px;
				vertical-align: middle;
				height: 30px;
				line-height: 30px;
				border: 1px solid #999;
				border-radius: 2px 2px 2px 2px;
				padding: 4px 7px;
				background-color:  var(--DividColor);
				color: var(--TextColor1);
			}
		
			.delete_btn {
				background-color: rgba(0, 0, 0, 0);
				margin-left: -6px;
				border: 0px;
				/* opacity: 0;透明度设置，但是同时作用于文字和背景颜色，不能分开 */
				border-radius: 0 3px 3px 0;
				display: inline-block;
				vertical-align: middle;
				color: red;
				font-weight: bold;
				width: 38px;
				font-size: 25px;
				height: 38px;
				padding-bottom: inherit;
			}
		
			.search_btn {
				border-radius: 3px 3px 3px 3px;
				background: #4d90fe;
				margin-left: -7px;
				border: 1px solid #4d90fe;
				display: inline-block;
				vertical-align: middle;
				color: #f3f7fc;
				font-weight: bold;
				width: 100px;
				font-size: 18px;
				height: 41px;
			}
		
				.search_btn:hover {
					background: #1874CD
				}
		
			.search_btn2 {
				border-radius: 3px 3px 3px 3px;
				background: #F0CB85;
				border: 1px solid #F0CB85;
				display: inline-block;
				vertical-align: middle;
				color: #f3f7fc;
				font-weight: bold;
				width: 100px;
				font-size: 18px;
				height: 41px;
			}
		
				.search_btn2:hover {
					background: #DEB887
				}
		
		
		}

		/* 不显示文章状态 */
		#navigator .blogStats {
			display: none;
		}


	}

	/* 主要内容 main ，包含mainContent和sideBar*/
	@media screen and (min-width:0px) {
	
		#main #mainContent {
			grid-column-start: 1;
			grid-column-end: 2;
			/* 如果没有下面这行100%，会给侧边栏留位置，因为grid默认50% */
			width: 100%;
			min-height: 500px;
			background-color:var(--BlockColor);
		}
	
		#main #sideBar {
			position:fixed;
			width: auto;
			height: 100%;
			z-index: 10000;
			top:0;
			bottom: 0;
			right: 0;
			background-color: var(--BackgroundColor);
			/* 使用阴影来处理边界 */
			box-shadow: -3px 0 3px rgb(26 26 26 / 10%);
			/* 为了体现出阴影，将边框隐藏 */
			border-left-style:hidden;
			
		}
		
	}

	/* 博文正文 */
	@media screen and (min-width:0px) {

		/*设置标题的样式*/
		/*如果有需要，还可以设置副标题的样式，为postTitle2*/
		.post .postTitle {
			font-size: 40px;
			word-break: break-all;
			line-height: 1.8;
			margin: 0;
			padding: 10px 0;
			text-align: center;
		}
		
		.post .postBody {
			line-height: 1.7;
			color: var(--TextColor1);
			margin-left: 100px;
			margin-right: 100px;
			margin-bottom: 200px;
		}
	
		.post .postBody .cnblogs-markdown a {
			color: var(--ThemeColor);
		}
	
		.post .postBody h1 {
			font-size: 32px !important;
			margin-top: 24px !important;
			margin-bottom: 16px !important;
			border-bottom: 1px solid var(--DividColor);
			line-height: 1.25;
			padding-bottom: .3em
		}
	
		.post .postBody h2 {
			font-size: 24px !important;
			border-bottom: 1px solid var(--DividColor);
			margin-top: 24px !important;
			margin-bottom: 16px !important;
			line-height: 1.25;
			padding-bottom: .3em
		}
	
		.post .postBody h3 {
			font-size: 20px !important;
			margin-top: 24px !important;
			margin-bottom: 16px !important;
			line-height: 1.25;
		}
	
		.post .postBody h4 {
			font-size: 16px !important;
			margin-top: 24px !important;
			margin-bottom: 16px !important;
			line-height: 1.25;
		}
	
	
		.post .postBody h5 {
			font-size: 14px !important;
			margin-top: 24px !important;
			margin-bottom: 16px !important;
			line-height: 1.25;
		}
	
		.post .postBody h6 {
			font-size: 13.6px !important;
			margin-top: 24px !important;
			margin-bottom: 16px !important;
			line-height: 1.25;
		}
	
		.post .postBody p {
			margin: 17px auto
		}
		/* 引用的内容 */
		.post .postBody blockquote {
			border: none;
			color: #6a737d;
			margin: 20px 0;
			padding: 0 0 0 10px;
			min-height: 20px;
			background: 0 0;
			border-left: 4px solid;
		}
	
		.post .postBody #blog_post_info_block {
			display: none;
		}
	
		#cnblogs_post_body {
			margin: 20px 0;
		}
	
		#cnblogs_post_body blockquote ul li {
			color: #6a737d !important;
		}
	
		#cnblogs_post_body img {
			margin: 0 auto;
		}
	
		.post .postBody em {
			padding-right: 3px
		}
	
		.post .postBody strong {
			margin: 0 3px
		}
	
		.post .postBody img {
			max-width: 100% !important;
			display: block;
			border-radius: 3px
		}
	
		.post .postBody ol li,
		.post .postBody ul li {
			margin: 3px 0;
			font-size: 15px;
		}
	
		.post .postBody ol li p,
		.post .postBody ul li p {
			margin: 0 !important
		}
	
		#cnblogs_post_body table {
	
			display: block;
			padding: 2px;
			width: 100%;
		}
	
		.post .postBody table {
			font-size: 15px;
			border-collapse: collapse;
			border-spacing: 0;
			empty-cells: show;
			border: none !important;
			overflow: auto;
			width: 100%;
			word-break: keep-all !important;
		}
	
		.post .postBody table th {
			font-family: inherit;
			font-size: inherit;
			background-color: var(--BackgroundColor) !important;
			white-space: nowrap;
			font-weight: 600;
			border: 1px solid var(--DividColor) !important;
			padding: 8px 16px !important
		}
	
		.post .postBody table tr:nth-child(2n) {
			background-color: var(--BackgroundColor) !important;
		}
	
		.post .postBody table tr {
			background-color: var(--BlockColor) !important;
		}
	
		.post .postBody table td {
			border: 1px solid var(--DividColor) !important;
			padding: 8px 16px !important;
		}
	
		
		/* horizontal rule 水平分割线 */
		.post .postBody hr {
			background-color: var(--DividColor);
			border: 0;
			height: .25em;
			margin: 24px 0;
			padding: 0;
		}
	
		/* 圆、方块，用来营造markdown风格 */
		#cnblogs_post_body ul ul li {
			list-style-type: circle;
		}
	
		#cnblogs_post_body ul ul ul li {
			list-style-type: square !important;
		}
	
		.post .postBody ul ul ul {
			list-style-type: square !important;
		}
	
		.post .postBody ul ul {
			list-style-type: circle !important;
		}
	
		.post .postBody ul {
			list-style-type: disc !important;
		}
	
		/*不显示postDesc*/
		.post .postDesc {
			display: none;
		}
	
		/********** 代码语法高亮 **********/
		.cnblogs-markdown .hljs,
		.cnblogs-markdown .matlab-code,
		.cnblogs_Highlighter pre {
			white-space: pre;
			display: block;
			color: var(--TextColor1);
			border-radius: 4px;
			overflow-x: auto;
			background: var(--BackgroundColor) !important;
			border: none !important;
			font-family: consolas !important;
			padding: 1em !important;
			font-size: 14px !important;
			position: relative;
		}
	
		.cnblogs-markdown code,
		.cnblogs-post-body code ,
		#cnblogs_post_body pre.codeblock
		{
			border: none !important;
			background: var(--BackgroundColor) !important;
		}
		
		
		/* 就算不是用markdown 也具有以下类*/
		.hljs {
			display: block;
			overflow-x: auto;
			padding: 0.5em;
			color: var(--TextColor1);
			background:var(--BackgroundColor);
			font-family: Consolas !important;
		}
	
		.hljs-comment,
		.hljs-quote {
			color: #a0a1a7;
			font-style: italic;
		}
	
		.hljs-doctag,
		.hljs-keyword,
		.hljs-formula {
			color: #a626a4;
		}
	
		.hljs-section,
		.hljs-name,
		.hljs-selector-tag,
		.hljs-deletion,
		.hljs-subst {
			color: #e45649;
		}
	
		.hljs-literal {
			color: #0184bb;
		}
	
		.hljs-string,
		.hljs-regexp,
		.hljs-addition,
		.hljs-attribute,
		.hljs-meta-string {
			color: #50a14f;
		}
	
		.hljs-built_in,
		.hljs-class .hljs-title {
			color: #c18401;
		}
	
		.hljs-attr,
		.hljs-variable,
		.hljs-template-variable,
		.hljs-type,
		.hljs-selector-class,
		.hljs-selector-attr,
		.hljs-selector-pseudo,
		.hljs-number {
			color: #986801;
		}
	
		.hljs-symbol,
		.hljs-bullet,
		.hljs-link,
		.hljs-meta,
		.hljs-selector-id,
		.hljs-title {
			color: #4078f2;
		}
	
		.hljs-emphasis {
			font-style: italic;
		}
	
		.hljs-strong {
			font-weight: bold;
		}
	
		.footnotes hr{
			display: none!important;
		}
	
	}

	/* 侧边栏 */
	@media screen and (min-width:0px) {
	
		.first_content
		{
			
			font-weight: 500;
			text-align: center;
			width: 100%;
			display: inline-block;
			margin: 50px auto;
			
		}
		.first_content b
		{
			display: inline-block;
			text-align: center;
		}
		#sidebar_catagories,
		#sidebar_first,
		#sidebar_news,
		#sidebar_toptags,
		#sidebar_imagecategory,
		#sidebar_recentcomments,
		#sidebar_topcommentedposts {
			background-color: var(--BackgroundColor);
			padding: 10px 20px;
			border-radius: 4px;
			margin-bottom: 20px;
			width: 277px;
			/* display: none !important; */
			
		}
		#leftcontentcontainer,
		#blog-calendar
		{
			display: none;
		}
		
		#sideBar #sideBarMain{
			background-color: var(--BackgroundColor);
		}
		/* 侧边小节标题 h3 */
		#sideBar h3 {
			line-height: 2.4;
			width: 100%;
			margin: 0px;
			font-size: var(--text4);
			color: var(--TextColor2);
			border-left-color:#fa7d00;
			border-left-width: 4px;
			border-left-style: solid;
			border-bottom: none;
			padding-left: 7px;
		}
		h3.listTitle {
			margin-bottom: 5px;
		}
	
		.sidebar-block ul {
			list-style-type: none;
			padding: 0 !important;
			line-height: 2;
		}
	
		.sidebar-block ul a:hover {
			color: var(--ThemeColor)
		}
		#blog-news {
			padding: 10px 15px;
			text-align: center;
		}
		#portrait {
			display: inline-block;
			width: 100%;
			text-align: center;
		}
		/* #portrait:hover {
			cursor: pointer;
		} */
		#portrait img {
			min-height: 80px;
			max-height: 80px;
			border: rgba(255, 255, 255, 0.4) 4px solid;
			border-radius: 50%;
			-webkit-transition: 0.4s;
			-webkit-transition: -webkit-transform 0.4s ease-out;
			transition: transform 0.4s ease-out;
			-moz-transition: -moz-transform 0.4s ease-out;
			/* 暂时不支持点击侧边栏头像 */
			/* cursor: pointer; */ 
		}
		/* #portrait img:hover {
			transform: rotateZ(360deg);
		} */
		
		/* 侧边栏名字 */
		.name
		{
			text-align: center;
			margin-top: 20px;
			margin-bottom: 20px;
			font-size: var(--text2);
			font-family: "Courier New";
		}
		#signature
		{
			text-align: center;
			font-family: "Times New Roman";
		}
	
		/* 暂时不支持点击侧边栏头像 */
		/* .attention {
			height: 90px;
			width: calc(100% - 30px);
			line-height: 90px;
			position: absolute;
			z-index: 10001;
			cursor: pointer;
		}
		.attention span {
			color: #fff;
			margin: 4px;
			background: rgba(0, 0, 0, 0.4);
			width: 80px;
			height: 80px;
			display: inline-block;
			border-radius: 40px;
			display: none;
			cursor: pointer;
		}
		.attention:hover span {
			display: inline-block;
		}
		.attention:hover:hover {
			background-size: cover;
			color: #999;
		} */
	
		#info_table {
			width: 75%;
			margin: 0 auto;
			text-align: center;
			margin-top: 10px;
			margin-bottom: 10px;
		}
		#info_table .popper_box {
			width: 200px;
		}
		#info_table .popper_box_con {
			width: 200px;
		}
		#info_table .popper_box_con_li {
			width: 70%;
			display: block;
		}
		#info_table tr {
			height: 2rem;
		}
	
		/*链接中图片的颜色，现在只有侧边栏含有带图片的链接*/
		a img{
			height: 30px;
			width: 30px;
			-webkit-border-radius:6px;
			border-radius:6px;
			color: var(--TextColor1);
		}
	
	
	}

	/* 评论区 ,目前不显示 */
	@media screen and (min-width:0px) {
		#comment_form {
			display: none;
		}
	}
	
	/* 页脚  */
	@media screen and (min-width:0px) {
		#footer {
			width: 100%;
			text-align: center;
			color: var(--TextColor3);
		}
	}
	
	/* 首页 */
	@media screen and (min-width:0px) {
		/*day包含一天之中的所有提交*/
		#mainContent .day {
			padding: 20px;
			background-color: var(--BlockColor);
			border-radius: 0px;
			margin-bottom: 20px;
			box-shadow: 0 0.05rem 1rem rgba(51, 51, 51, .05);
		}
		/*dayTitle包含一天之中的一次提交*/
		.day .dayTitle {
			line-height: 2.4;
			width: 100%;
			font-size: var(--text3);
			color: var(--TextColor1);
		}
	
		.dayTitle a:before {
			content: '\f073';
			font-family: FontAwesome;
			margin-right: 10px;
			margin-left: 0px;
		}
		/* 包含标题文字在内的一块区域 */
		.day .postTitle {
			border-top: 1px solid var(--DividColor);
			margin-top: 10px;
			padding: 10px 0;
	
		}
		/* postTitle2是标题的文字部分 */
		.day .postTitle .postTitle2 {
			word-wrap: break-word;/*允许长单词换到下一行*/
			font-size: var(--text2);
			line-height: 1.5;
			padding-left: 10px;
			word-break:break-all; 
			border-left: 4px solid var(--ThemeColor);
		}
	
		.day .postTitle .postTitle2:hover {
			color: var(--ThemeColor);
		}
		/* 首页每一项的摘要部分 */
		.day .postCon .c_b_p_desc {
			color: var(--TextColor2);
			line-height: 24px;
			padding: 2px;
			word-break:break-all;
			/* text-align:justify; */
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 5;
			/* text-overflow: ellipsis; */
			overflow: hidden;
		}
		/* 每一条后续的信息：发布时间，查看数量，推荐数量等，不显示 */
		/* 不显示“查看更多”选项，这和直接点击文章标题功能重复，属于多余的部件 */
		.day .postDesc ,
		.day .c_b_p_desc .c_b_p_desc_readmore{
			display: none;
		}
		
	}
	
	/* 右侧按钮样式 */
	@media screen and (min-width:0px) {
	
		@media screen and (min-width: 0px) {
			/* 返回顶部 */
			.upToNav {
				position: fixed;
				right: 10px;
				bottom: 10px;
				background-color: var(--BlockColor);
				border: 1px solid var(--DividColor);
				border-radius: 50%;
				padding: 10px;
			
				z-index: 10001;
				height: 38px ;
				width: 38px ;
			}
	
			.upToNav:hover,
			#sideCatalogBtn:hover,
			#fry_sidebar:hover
			{
				background-color: var(--ThemeColor);
				border: 1px solid var(--ThemeColor);
				color: #fff;
	
			}
	
	
			/* 打开侧边栏的按钮 */
			#fry_sidebar {
				position: fixed;
				right: 10px;
				/* 距离底部的高度 */
				bottom: 60px; 
				background-color: var(--BlockColor);
				border: 1px solid var(--DividColor);
				border-radius: 50%;
				padding: 10px;
			
				z-index: 10001;
				height: 38px ;
				width: 38px ;
			}
	
			
	
	
			
	
			/*目录按钮*/
			#sideCatalogBtn{
				position: fixed;
				right: 10px;
				/* 距离底部的高度 */
				bottom: 110px; 
				background-color: var(--BlockColor);
				border: 1px solid var(--DividColor);
				border-radius: 50%;
				padding: 10px;
				z-index: 10001;
				height: 38px ;
				width: 38px ;
			}
	
			/*当按钮被按下时，按钮的颜色，目前没有更改*/
			#sideCatalogBtn.sideCatalogBtnDisable,	/*类选择器和id选择器组合使用*/
			#fry_sidebar.BtnDisable
			{
				background-color:var(--ThemeColor); 
			}
	
		}
	
	}

	/*自动生成的侧边目录，结构上位于body的末尾*/
	@media screen and (min-width:0px) {
		/*定义整个目录框架的大小*/
			/* 一定需要这个，否则不显示，但区域大小可以和catalog不一致 */
			#sideToolbar
			{
				position: fixed;
				top: 70px;/*距离页面底部的距离，不能设置过小，否则按钮看不到无法关闭*/
				bottom: 300px;
				left:80%;
				width: 250px;
				height: auto;
				
			}
		
			/*目录周围及内部的总体样式*/
			#sideCatalog
			{
				padding-bottom: 100px;
				background-color:rgba(0, 0, 0, 0.3); /*半透明背景*/
				width: 250px;
				height: 300px;
				margin-left: -100px;
			}
			#sideCatalog-sidebar
			{
				display: none;
			}
			/*目录形成的范围*/
			#sideCatalog-catalog
			{
				position: relative;
				overflow: scroll;
				height: 300px;
				padding-left: 1px;
				/* background-color: var(--BackgroundColor); */
				background-color: rgba(0, 0, 0, 0.19);
				/* 超长滚动条 */
				overflow-y: scroll;
				z-index: 10000;
			}
		
			/*ul中所有被激活的li的背景*/
			#sideCatalog-catalog ul .active
			{
				background-color: #808080;
			}


			#sideCatalog a
			{
				font-weight: bold;
				text-decoration-color: var(--TextColor1);
			}
			#sideCatalog-catalog a:link
			{
				color:var(--TextColor1);
			}
			
			#sideCatalog span:first-child
			{
				font-family: Arial;
				font-weight: bold;
				padding-left: 0;
				color: #999;
			}

			#sideCatalog li
			{
				position: relative;
		
				margin: 0;
				padding: 0 7px;
		
				text-align: left;
			}
			/*设置h1级别目录的缩进和左边距*/
			#sideCatalog li.h1Offset
			{
				font-size: 14px;
				padding-left: 1px;
			}
			/*设置h2级别目录的缩进和左边距*/
			#sideCatalog li.h2Offset
			{
				font-size: 13px;
				padding-left: 6px;
			}
			/*设置h3级别目录的缩进和左边距*/
			#sideCatalog li.h3Offset
			{
				font-size: 12px;
				padding-left: 11px;
			}
			/*划过li时的背景*/
			#sideCatalog li:hover
			{
				background-color: #f5f5f5;
			}

		
	}

	/*侧边滚动条*/
	::-webkit-scrollbar/*-webkit代表使用webkit作为内核的浏览器才能生效*/
	{
		width:10px!important;
		height:10px!important;
		-webkit-appearance:none;
	}
	/* 滚动条上的滑块 */
	::-webkit-scrollbar-thumb
	{
		height:5px;border:1px solid transparent;
		border-top:none;
		border-bottom:none;
		-webkit-border-radius:6px;/*这一行是实现圆角滚动条的关键*/
		border-radius:6px;
		background-color:rgba(0,0,0,.3);
		background-clip:padding-box;
	}