/*生成博客目录的CSS*/
 #uprightsideBar{
     font-size:12px;
     font-family:Arial, Helvetica, sans-serif;
     text-align:left;
     position:fixed;/*将div的位置固定到距离top:50px，right:0px的位置，这样div就会处在最右边的位置，距离顶部50px*/
     bottom:145px;
     left:28px;
     width: auto;
     height: auto; 
 }
 #sideBarTab{
     float:left;
     width:30px; 
     //border:1px solid #008080;
     border-right:none;
     text-align:center;
 }
 
 #sideBarContents{
     float:left;
     overflow:auto; 
     overflow-x:hidden;!important;
     //width:200px;
     max-height:460px;
     border:1px solid #008080;
     border-right:none; 
 }
 #sideBarContents dl{
     margin:0;
     padding:0;
 }
 
 #sideBarContents dt{
     margin-top:5px;
     margin-left:5px;
 }
 
 #sideBarContents dd, dt {
     cursor: pointer;
 }
 
 #sideBarContents dd:hover, dt:hover {
     color:#A7995A;
 }
 #sideBarContents dd{
     margin-left:20px;
 }
 /***********************************博客园标签云***********************************************************/
 #catListTag-canvas{
     position:relative; width:100%; height:270px; margin:0 auto ; 
 }
 #catListTag-canvas li {
     position:absolute; top:0px; left:0px; font-family: Microsoft YaHei; 
     color:#000; 
     font-weight:bold; 
     text-decoration:none; 
     padding: 3px 6px; 
 }
 
 /**************************************************
 去广告
 **************************************************/
 #ad_t2,#cnblogs_c1,#cnblogs_c2{
 display:none;
 visibility：hidden;
 }
 
 /**************************************************
 第一部分：所有的模板都使用的公共样式。公告样式是为了更好的向前和向后兼容。
 如果不符合你皮肤的要求，你可以在后面通过更高的优先级覆盖着这些样式，但是
 你不能删除这些样式。
 **************************************************/
 
 #EntryTag {
     margin-top: 20px;
     font-size: 9pt;
     color: gray;
 }
 
 .topicListFooter {
     text-align: right;
     margin-right: 10px;
     margin-top: 10px;
 }
 
 #divRefreshComments {
     text-align: right;
     margin-right: 10px;
     margin-bottom: 5px;
     font-size: 9pt;
 }
 
 
 /*****第一部分结束*******************************/
 
 
 /**************************************************
 第二部：公共样式（全局样式）。公共会对所有页面的标签都起作用。这个部分你
 可以随意的更改，并不会牵扯到其他的皮肤模板。但是每次更改都要注意你的皮肤
 模板所有页面的变化。因为它们是全局的。
 **************************************************/
 
 * {
     margin: 0;
     padding: 0;
 }
 
 html {
     height: 100%;
 }
 
 body {
     color: #000000;
     background: #CFD8DD;
     font-family: '文泉驿微米黑', 'Noto Sans CJK SC', 'Segoe UI', sans-serif;
     font-size: 16px;
 }
 
 table {
     border-collapse: collapse;
     border-spacing: 0;
 }
 
 fieldset,
 img {
     border: 0;
 }
 
 ul {
     word-break: break-all;
 }
 
 li {
     list-style: none;
 }
 
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-size: 100%;
     font-weight: normal;
 }
 
 a {
     outline: none;
 }
 
 a:link {
     color: black;
     text-decoration: none;
 }
 
 a:visited {
     color: black;
     text-decoration: none;
 }
 
 a:hover {
     color: #F60;
     text-decoration: none;
 }
 
 a:active {
     color: black;
     text-decoration: none;
 }
 
 .clear {
     clear: both;
 }
 
 
 /*****第二部分结束*******************************/
 
 
 /**************************************************
 第三部分：各个页面元素的样式。你可以根据需要随意的更改，并不会牵扯到其他
 的皮肤模板。这个部分是最能展现你想象力的部分。其中头部和侧边栏部分是此皮
 肤公共的部分。而每个页面特有的部分会有相应的注释和说明。
 **************************************************/
 
 
 /*****home和头部开始**************************/
 
 #header {
     margin-bottom: 1.2rem;
 }
 
 #blogTitle {
     height: 100px;
     margin-top: 3em;
     background-color: teal;
 }
 
 #blogTitle .title{
     padding:21px;
 }
 
 #blogTitle h1,
 #blogTitle h2 {
     width: 1200px;
     display: block;
     margin: 0 auto;
 }
 
 #blogTitle h1 {
     margin-top: 4em;
 }
 
 a.headermaintitle,
 #blogTitle h2 {
     text-decoration: none;
     font-size: 2.4rem;
     color: white;
     font-weight: 900;
     text-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
 }
 
 #blogTitle h2 {
     font-weight: 500;
     font-size: 1.2rem;
 }
 
 #navigator {
     background-color: #009688;
     position: fixed;
     width: 100%;
     height: 3em;
     top: 0;
     left: 0;
     right: 0;
     overflow: hidden;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
     opacity: 0.8;
     z-index: 10086;
 }
 
 #navList {
     display: block;
     width: 1200px;
     margin: auto;
     text-align: center;
 }
 
 #navList li {
     display: inline-block;
     line-height: 3em;
     transition: background-color 0.4s;
 }
 
 #navList li:hover {
     background-color: rgba(255, 255, 255, 0.2);
 }
 
 #navList li a {
     text-decoration: none;
     color: white;
     padding: 1em;
 }
 
 .blogStats {
     display: none;
 }
 
 
 /*****home和头部结束**************************/
 
 
 /*****主页文章列表开始**************************/
 
 #main {
     width: 920px;
     margin: auto;
     font-size: 0;
 }
 
 #mainContent,
 #sideBar {
     font-size: 1rem;
     width: 920px;
     display: inline-block;
 }
 
 .day {
     width: 900px;
     margin-bottom: 2rem;
     background-color: #ffffff3d;
     box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
     padding: 0.6rem 1rem;
     box-sizing: border-box;
     border-radius: 2px;
 }
 
 .dayTitle {
     color: #009688;
     float: right;
 }
 
 .postTitle::before,
 .entrylistPosttitle::before {
     content: '|';
     color: #009688;
     font-size: 1.3rem;
     font-weight: 900;
     display: inline-block;
 }
 
 .postTitle a,
 .entrylistPosttitle a {
     text-decoration: none;
     font-size: 1.3rem;
     color: #009688;
     transition: margin-left 0.4s;
 }
 
 .postTitle a:hover {
     margin-left: 1.2rem;
 }
 
 .postCon,
 .entrylistPostSummary {
     margin: 1em;
 }
 
 .postCon .c_b_p_desc_readmore {
     padding-left:5px;
     color:#008080 !important;
 }
 
 .postTitle:not(:nth-child(2)) {
     padding-top: 0.6rem;
 }
 
 .postDesc:not(:nth-last-child(2))::after {
     user-select: none;
     color: white;
     font-size: 8px;
     display: block;
     width: calc(100% + 2rem);
     content: '-';
     position: relative;
     right: 1rem;
     box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
     border-radius: 2px;
     z-index: 2;
 }
 
 .postSeparator {
     width: calc(100% + 3rem);
     position: relative;
     right: 1.5rem;
     height: 2rem;
     display: block;
     background-color: #CFD8DD;
 }
 
 .topicListFooter {
     #width: 900px;
 }
 
 .topicListFooter a {
     padding: 0.6rem 1rem;
     color: white;
     background-color: #009688;
     box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
 }
 
 /*****主页文章列表结束**************************/
 
 
 /*****侧边栏开始********************************/
 
 #sideBar {
     width: 280px;
     vertical-align: top;
 }
 
 .newsItem,
 #blog-calendar,
 #leftcontentcontainer > div > div {
     margin-bottom: 2rem;
     background-color: #ffffff3d;
     box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
     box-sizing: border-box;
     border-radius: 2px;
     padding: 0.4rem 0.6rem;
     overflow: hidden;
 }
 
 .newsItem h3,
 #blog-calendar::before {
     display: block;
     color: white;
     background-color: #009688;
     width: 100%;
     padding: 0.4rem 0.6rem;
     position: relative;
     right: 0.6rem;
     bottom: 0.4rem;
     box-sizing: content-box;
 }
 
 #blog-calendar::before {
     content: '日历';
 }
 
 #blogCalendar td,
 #calender th {
     position: relative;
     color: black;
     padding: 0.1rem 0.6rem;
 }
 
 .CalTitle td:nth-child(2) {
     padding: 0 3.1rem !important;
 }
 
 #blogCalendar th.CalDayHeader {
     color: dimgrey;
 }
 
 #blogCalendar td.CalOtherMonthDay {
     color: grey;
 }
 
 #blogCalendar td a u {
     text-decoration: none;
     color: teal;
 }
 
 #blogCalendar td.CalTodayDay {
     z-index: 1;
 }
 
 #blogCalendar td.CalTodayDay,
 #blogCalendar td.CalTodayDay a u {
     color: white !important;
 }
 
 #blogCalendar td.CalTodayDay::before {
     top: -0.05rem;
     right: 0.2rem;
     position: absolute;
     display: block;
     content: 'O';
     color: #009688;
     background-color: #009688;
     border-radius: 1rem;
     width: 1.8rem;
     height: 1.8rem;
     z-index: -1;
 }
 
 #leftcontentcontainer > div > div {
     padding: 0;
 }
 
 .catListTitle {
     color: white;
     background-color: #009688;
     padding: 0.4rem 0.6rem;
 }
 
 #leftcontentcontainer li {
     padding: 0.2rem 0.4rem;
     transition: background-color 0.4s;
 }
 
 #leftcontentcontainer li:not(:last-child) {
     border-bottom: 1px solid rgba(0, 0, 0, 0.15);
 }
 
 #leftcontentcontainer li:hover {
     background-color: rgba(0, 0, 0, 0.1);
 }
 
 #leftcontentcontainer ul li a {
     color: black;
     display: inline-block;
     width: 100%;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }
 
 #leftcontentcontainer ul li a {
     color: black;
     display: inline-block;
     width: 100%;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
 }

.syntaxhighlighter{
    background: none !important;
    border: 1px solid #009688;
    border-radius: 10px;
}

.syntaxhighlighter .line.alt1 {
    background-color: #fff0 !important;
}

.syntaxhighlighter .line.alt2 {
    background-color: #f4f4f466 !important;
}

.syntaxhighlighter.collapsed .toolbar {
     background: none !important;
    border-radius: 10px !important;
}
}
 
 .recent_comment_title,
 .recent_comment_body {
     border: none !important;
     margin: 0 !important;
 }
 
 #sidebar_search_box {
     padding: 0.4rem 0.6rem;
 }
 
 input.input_my_zzk {
     border: none;
     border-bottom: 2px solid teal;
     width: 11rem;
     background-color: #ffffff3d;
 }
 
 input.btn_my_zzk {
     color: white;
     border: none;
     outline: none;
     display: inline-block;
     background-color: teal;
     padding: 0.4rem 0.6rem;
     cursor: pointer;
     box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2);
     vertical-align: bottom;
     height: unset !important;
     border-radius: 2px;
 }
 
 #sidebar_toptags ul li {
     padding: 0.3rem 0.4rem;
 }
 
 #sidebar_toptags ul li a {
     display: inline-block;
     vertical-align: bottom;
     width: unset
 }
 
 
 /*****侧边栏结束********************************/
 
 
 /* 文章查看部分 */
 
 #post_detail,
 .feedbackItem,
 #comment_form_container,
 #divCommentShow > div,
 #under_post_news,
 #under_post_kb,
 .entrylistItem,
 #myposts,
 #ad_t2 {
     width: 900px;
     margin-bottom: 2rem;
     background-color:  #ffffff3d;
     box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
     padding: 0.6rem 1rem;
     box-sizing: border-box;
     border-radius: 2px;
 }

.feedbackItem {
    padding:0.6rem 1rem 2.6rem 1rem;
}

#comment_form_container, #under_post_news, #under_post_kb{
     width: unset !important;
}
 
 #post_detail .postDesc::after {
     display: none;
 }
 
 
 /* 文章后的作者信息，支持/反对 */
 
 #author_profile {
     width: 150px;
     float: left;
     margin-top: 10px;
 }
 
 #green_channel {
     float: right;
     position: relative;
     border: none;
     right: 150px;
 }
 
 #div_digg {
     float: right;
     position: relative;
     left: 360px;
 }
 
 #digg_tips {
     display: none;
 }
 
 
 /* 评论区 */
 
 .feedback_area_title,
 #commentform_title,
 .entrylistTitle,
 .myposts_title {
     font-size: 1.2rem;
     color: white;
     background-color: #009688;
     width: 900px;
     padding: 0.4rem 0.6rem;
     box-sizing: border-box;
     margin-bottom: 1rem;
 }
 
 .feedbackItem {
     margin-bottom: 1rem;
     position: relative;
 }
 
 .feedbackListSubtitle {
     color: white;
     font-size: 0;
 }
 
 .feedbackManage {
     z-index: 5;
     font-size: 1rem;
     position: absolute;
     bottom: 0.6rem;
     right: 1rem;
 }
 
 a.layer {
     font-style: italic;
     position: absolute;
     font-size: 1.6rem;
     color: black;
     opacity: 0.1;
     top: 6px;
     right: 1rem;
     z-index: 1;
 }
 
 .comment_date {
     font-size: 1rem;
     position: relative;
     left: 0.5em;
     color: gray;
 }
 
 .blog_comment_body {
     margin: 8px;
 }
 
 .comment_vote {
     text-align: left;
     position: relative;
     right: 0.6rem;
 }
 .comment_textarea,.feedbackItem{
     background-color: #ffffff3d;
     width:unset !important;
 }
 
 a[id^='a_comment_author'] {
     font-size: 1rem;
     float: left;
 }
 
 .louzhu::before,
 .comment_my_posted b::before,
 .new-comment-title a:nth-child(2)::before {
     color: white;
     font-size: 1rem;
     content: '博主';
     display: inline-block !important;
     background-color: darkblue;
     padding: 0 0.2rem;
     border-radius: 4px;
     vertical-align: bottom;
 }
 
 .louzhu::before {
     margin-left: 0.5rem;
 }
 
 .sendMsg2This {
     display: none;
 }
 
 legend > a::before {
     content: '查看';
 }
 
 .comment_quote,
 .postBody blockquote {
     position: relative;
     border: none;
     border-left: 10px solid lightgray;
     background-color: rgba(0, 0, 0, 0.05);
 }
 
 #comment_form {
     position: relative;
 }
 
 #comment_nav {
     width: unset !mportant;
     margin: 2rem 0;
 }
 
 
 /* 发布评论 */
 
 #comment_nav > a,
 #span_refresh_tips,
 #btn_comment_submit,
 #commentbox_opt a {
     padding: 0.6rem 0.8rem;
     background-color: #009688;
     color: white !important;
     margin: 0.3rem;
     box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15);
     border-radius: 2px;
 }
 
 #span_refresh_tips {
     display: none;
 }
 
 #commentform_title,.feedback_area_title {
     background-image: none;
     position: relative;
     #right: 1rem;
     #bottom: 0.6rem;
     width: unset !important;
     margin-bottom: 0;
 }
 
 #tip_comment {
     position: absolute;
     top: 0.1rem;
 }
 
 #tbCommentAuthor {
     background: none;
     border: none;
     padding: 0;
     font-size: 1rem;
     width: calc(100% - 3rem);
 }
 
 .comment_my_posted > img {
     display: none;
 }
 
 .comment_my_posted b::before {
     margin-right: 0.5rem;
     font-weight: 500;
     content: '发布中';
     background-color: skyblue;
 }
 
 .new-comment-title .comment_date {
     display: none;
 }
 
 .new-comment-title a:nth-child(2) {
     float: left;
 }
 
 .new-comment-title a:nth-child(2)::before {
     margin-right: 0.5rem;
     content: '已发布';
     background-color: lightgreen;
 }
 
 .new-comment-title a {
     float: right;
 }
 
 #tbCommentBody {
     height: 10rem;
     #width: 860px;
     font-size: 1rem;
     font-family: 'Monaco', '文泉驿微米黑', '微软雅黑';
     resize: none;
 }
 
 #btn_comment_submit {
     border: none;
     width: unset;
     height: unset;
     font-size: 1rem;
 }
 
 #commentbox_opt a:last-child {
     background-color: gray;
 }
 
 #comment_form_container > p:nth-last-child(2) {
     color: gray;
     bottom: 2rem;
     position: relative;
     float: right;
 }
 
.blog_comment_body{
font-size: 13px !important;
color: #009688;
}
 
 /* 随笔档案（按时间分类） */
 
 .entrylistPosttitle a {
     margin-left: 0.3rem;
 }
 
 .entrylistPosttitle a:hover {
     margin-left: 1.5rem;
 }
 
 
 /* 随笔标签 */
 
 #myposts {
     margin: 0;
     padding: 0;
 }
 
 .myposts_title {
     font-size: 1.2rem !important;
 }
 
 .PostList {
     font-size: 1rem !important;
     padding: 1rem;
     margin: 0 !important;
     border-bottom: 1px solid gray;
 }
 
 .PostList:nth-last-child(2) {
     border: none;
 }
 
 .postDesc2 {
     float: right;
 }
 
 
 /* 页尾footer */
 
 #footer {
     text-align: center;
     margin-bottom: 3rem;
 }
 
 
 /* 比较影响页面一致性的广告 */
 
 #ad_c1,
 #ad_c2 {
     display: none
 }
 
 
 /*****第三部分结束*******************************/
 
 
 /**************************************************
 第四部分：文章内容常用标签格式。这个部分是设置作者写作内容的部分。例如：
 如果作者的文章用有p标签，则可通过这个对这些文章中的p标签进行设置。前面
 的“.postBody”明确的指出了这里样式的作用范围。仅仅适用于文章主体部分。
 建议这个不要设置过于详细的细节。因为，一些样式，一篇文章比较适合的话，
 并不能保证所有的文章都适合。
 **************************************************/
 
 
 /*文章内部常用标签格式*/
 
 #EntryTag,
 #post_next_prev {
     font-size: 1rem;
 }
 
 #cnblogs_post_body code {
     font-family: 'Monaco', 'Consolas', monospace, '文泉驿微米黑', '微软雅黑' !important;
     white-space: pre;
 }
 
 .postBody img {
     max-width: 100% !important;
 }
 
 .postBody blockquote {
     position: relative;
     border: none;
     border-left: 10px solid lightgray;
     background-color: rgba(0, 0, 0, 0.05);
 }
 
 .cnblogs_code{
     background-color: #f5f5f500;
 border: 1px solid #009688;
 }
 .cnblogs_code div{
 background-color: #f5f5f500;
 }
 .cnblogs_code_toolbar a:hover, .cnblogs_code_toolbar a:link, .cnblogs_code_toolbar a:visited, .cnblogs_code_toolbar a:active, .cnblogs_code_toolbar a:link img, .cnblogs_code_toolbar a:visited img{
 background-color: #f5f5f500!important;
 }
 
 .cnblogs_code_collapse {
 border: #009688 1px solid;
 background-color: #ffffff00;
 }
 /*****第四部分结束*******************************/
 
 
 /**************************************************
 第五部分：响应式视图布局。
 **************************************************/
 
 @media screen and (max-width:1200px) {
     #navigator {
         width: 100%;
         overflow: scroll;
     }
     #navList {
         margin: 0;
         width: max-content;
     }
     #blogTitle h1,
     #blogTitle h2 {
         margin-left: 2rem;
         width: max-content;
     }
     #main {
         width: 100%;
         padding: 0 1rem;
         box-sizing: border-box;
     }
     .dayTitle,
     #comment_form_container > p:nth-last-child(2),
     .postText2 {
         display: none;
     }
     #mainContent,
     #sideBar,
     .day,
     .feedback_area_title,
     .entrylistTitle,
     .myposts_title,
     .feedbackItem,
     #post_detail,
     #comment_form_container,
     #divCommentShow > div,
     #under_post_news,
     #under_post_kb,
     .entrylistItem,
     #myposts,
     #comment_nav,
     #ad_t2 {
         width: 100% !important;
     }
     #green_channel {
         width: max-content;
         float: none;
         right: 0;
     }
     #div_digg {
         position: inherit;
     }
     #blogCalendar td.CalTodayDay {
         background-color: teal;
     }
     #blogCalendar td.CalTodayDay::before {
         display: none;
     }
     #commentform_title {
         width: calc(100% + 2rem);
     }
     #tbCommentBody {
         width: calc(100% - 0.5rem);
     }
     .commentbox_title {
         width: 300px;
     }
     .commentbox_title_right {
         float: none;
     }
     .PostList {
         padding: 0.5rem 0.5rem 0;
     }
     .postDesc2 {
         display: block;
         margin-top: 1rem;
     }
 }
 
 @media screen and (max-width:1200px) and (min-width:900px) {
     #main,
     #mainContent,
     #sideBar,
     #blogTitle h1,
     #blogTitle h2 {
         width: 900px;
     }
 }
 /*****第五部分结束*******************************/