* {
  box-sizing: border-box;
}



/* reset CSS */
/*表格的设置*/
/*
<table>: 表格
<thead>: table header 表头区
<th>: table headings 表头单元格内容
<tbody>: 表格内容区
<tr>: table row 表行
<td>: table data 单元格内容
*/
table {
/*  display: block;*/  
  font-size: 100%;
  /* width: 100%; /*表格宽度*/ 
  border-collapse: collapse;/*使用单一线条的边框*/
  empty-cells: show; /*单元格无内容依旧绘制边框*/
  overflow-x: auto;  /*显示滚动条*/
  
  /*white-space: nowrap; /*表格内容强制不换行*/
   
   /*  margin: auto;/*表格整体居中*/
}
/* end reset CSS */


.table-area {
    overflow: auto;
}

table tr:nth-child(2n) {
  background-color: #f6f8fa; /*隔行变色*/
}

table tr {
  background-color: #fff;
  border-top: 1px solid #c6cbd1;
}
table tr:hover {
    background: #efefef; /*鼠标悬浮时该行改变背景色*/
}

/*表头样式 th*/
table th {
    white-space: nowrap; /*表头内容强制在一行显示*/
    font-weight: bold; /*加粗*/
    text-align: center !important; /*内容居中，加上 !important 避免被 Markdown 样式覆盖*/
    background: rgba(158,188,226,0.2); /*背景色*/
} 
table th,
table td {
  margin: 0;
  padding: 6px 13px;
  border: 1px solid #dfe2e5;
}

details {
  border: 1px solid #aaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  font-style: italic;
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
}

body {
  font-family: 'lucida grande', 'lucida sans unicode', lucida, helvetica,
    'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
  font-size: 18px;
}

body.mobile {
  font-size: 30px;
}

p,
li {
  line-height: 1.8;
}

h1 {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Helvetica, STKaiti,
    SimSun, serif;
}

h2 {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Helvetica, STKaiti,
    SimSun, serif;
  margin-bottom: 60px;
  margin-bottom: 40px;
  padding: 5px;
  border-bottom: 2px LightGrey solid;
  width: 98%;
  line-height: 150%;
  color: #666666;
}

h3 {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Helvetica, STKaiti,
    SimSun, serif;
  margin-top: 40px;
  margin-bottom: 30px;
  border-bottom: 1px LightGrey solid;
  width: 98%;
  line-height: 150%;
  color: #666666;
}

h4 {
  font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Helvetica, STKaiti,
    SimSun, serif;
  margin-top: 40px;
  margin-bottom: 30px;
  border-bottom: 1px LightGrey solid;
  width: 98%;
  line-height: 150%;
  color: #666666;
}

.box {
  padding: 2% 8% 5% 8%;
  border: 1px solid LightGrey;
}

li {
  margin-left: 10px;
}

blockquote {
  margin-left: 20px;
  padding: 0 20px 0 50px;
  margin-bottom: 15px;
  border-left: 2px solid #8dc23c;
}

blockquote p {
  line-height: 48px;
  font-style: italic;
  color: #888;
}

/*  并排代码块*/
pre code, pre, code {
  white-space: pre;   /*文本中的空白会被浏览器保留*/
  overflow-x: scroll; /*添加水平方向的滚动条 注意区分auto , 但是测试感觉都一样*/
  overflow-y: scroll; /*注意区分auto , 但是测试感觉都一样*/
  word-break: keep-all; /*在恰当的断字点进行换行：*/
  word-wrap: initial; /*允许长单词换行到下一行*/
}
/*这一段是我自己加的,这样我能是两个代码块并排,并且拥有滑动的效果*/
pre {
  font-family: Inconsolata, Consolas, 'DEJA VU SANS MONO', 'DROID SANS MONO',
    Proggy, monospace;
  font-size: 75%;
  line-height: 1.45;
  font-weight: 500;
  background-color: #f4f4f4!important;
  border: 1px solid #e0e0e0!important;
  border-radius: 4px!important;
  padding: 4px;
  position: relative;
  display: block;
  width: 100%;
  overflow: auto;
  /*文本框--这里是代码框 添加 阴影*/
  box-shadow:0 0 10px #555; 
  margin-top: 10px;
  margin-bottom: 10px;
  -webkit-box-shadow: 0 0 10px #555;

}

pre > code {
/*  padding: 12px !important;
*/  display: block;
}

code {
  width: 100%;
  font-family: Inconsolata, Consolas, 'DEJA VU SANS MONO', 'DROID SANS MONO',
    Proggy, monospace;
  white-space: pre;
  padding: 1px 5px;
  font-size: 1em;
}

li code,
p code {
  background-color: #eff0f1;
  border-radius: 3px;
  /*以下两句才可以---自动换行*/
  white-space: normal;
  word-break: break-all;
}

p {
  word-break:break-all; /* 超链接以及文本强制换行*/
}
/*a {
  text-decoration: none;
  cursor: crosshair;
  border-bottom: 1px dashed orange;
  color: #930ee4;
  word-break:break-all;
}*/
.title a {
  display: block;
}

details a {
  margin-top: 1.5rem;
}

a:hover {
  background-color: LightGrey;
}

img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  display: block;
  /*  box-shadow: 0 0 10px #555;*/  
  box-shadow:0 0 10px #555; 
  border-radius: 6px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  -webkit-box-shadow: 0 0 10px #555;
}

img.displayed {
  text-align: center;
  display: block;
}

hr {
  color: LightGrey;
}

p.notice {
  color: #aa4433;
  font-size: 14px;
}

div.tweet p {
  font-size: 16px;
  border: 1px solid #aaa;
  border-left: 10px solid #f28500;
  padding: 2px 0.5em 2px 0.5em;
  margin-bottom: 20px;
  background-color: #fbfbfb;
}

div.tweet i {
  color: brown;
  font-size: 14px;
  font-style: normal;
  border: 1px solid #aaa;
  margin-right: 0.5em;
  padding: 0px 2px;
}

div.outer {
  margin: 2% 5% 2% 5%;
}

body.mobile div.outer {
  margin: 2% 5% 2% 5%;
}

div.inner {
  margin: 0.5em auto;
  max-width: 90%;  /*调整 div 显示的最大宽度*/
  padding: 2% 5% 2% 5%;/*文章内容与 div 之间的距离,上右下左;*/
  border: 1px solid LightGrey;
  background-color: white; /*整个div的背景色*/
  border-radius:15px;
  box-shadow: 0 10px 35px 2px rgba(0, 0, 0, .15),
    0 5px 15px rgba(0, 0, 0, .07),
    0 2px 5px -5px rgba(0, 0, 0, .1) !important;
  /*box-shadow: 2px 2px 10px #909090;*/
}

body.mobile div.inner {
  margin: 1.5em;
  padding: 4% 8% 4% 8%;
}

div.ad-banner {
  margin: 0% 14%;
}

body.mobile div.ad-banner {
  margin: 0;
}

.side-ad.mobile {
  display: none;
}

body.mobile .side-btn {
  display: none;
}

.side-btn {
  position: fixed;
  background-color: #fbf6ec;
  /*  
  -ms代表【ie】内核识别码
  -moz代表火狐【firefox】内核识别码
  -webkit代表谷歌【chrome】/苹果【safari】内核识别码
  -o代表欧朋【opera】内核识别码*/
  -ms-transform: translate(calc(-3vw - 100%), 0);
  -webkit-transform: translate(calc(-3vw - 100%), 0);
  transform: translate(calc(-3vw - 100%), 0);
  top: 50vh;
}
.side-btn a {
  display: block;
  color: #a57474; 
  /*home 链接的颜色*/
}
.back {
  -ms-transform: rotate(7deg);
  -webkit-transform: rotate(7deg);
  transform: rotate(7deg);
}
.side-btn a:hover {
  -ms-transform: rotate(-7deg);
  -webkit-transform: rotate(-7deg);
  transform: rotate(-7deg);
  color: #930ee4;
}

kbd {
  /* Copy from stackoverflow.com */
  display: inline-block;
  margin: 0 0.1em;
  padding: 0.1em 0.6em;
  font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  color: #242729;
  text-shadow: 0 1px 0 #fff;
  background-color: #e1e3e5;
  border: 1px solid #adb3b9;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(12, 13, 14, 0.2), 0 0 0 2px #fff inset;
  white-space: nowrap;
}

#edit-button {
  font-size: 1em;
  float: right;
  margin: 0 1rem;
  background: #cfd7ff;
  border: 1px solid #4e57ef;
  box-shadow: 3px 4px 0px #4e57ef;
}

pre .btn {
  -webkit-transition: opacity 0.3s ease-in-out;
  -o-transition: opacity 0.3s ease-in-out;
  transition: opacity 0.3s ease-in-out;
  opacity: 0;
  padding: 2px 6px;
  position: absolute;
  right: 4px;
  top: 4px;
  background-color: rgb(250, 251, 252);
  border: 1px solid rgba(27, 31, 35, 0.12);
  box-shadow: rgb(27 31 35 / 4%) 0px 1px 0px, rgb(255 255 255 / 25%) 0px 2px 0px inset;
}

pre:hover .btn,
pre .btn:focus {
  opacity: 1;
}

/*访问过*/
/*.btn:link {
  opacity: 1;
  background:#ccc !important;

}
.btn:visited {
  opacity: 1;
  background:blue !important;
}*/
/*鼠标滑过*/
.btn:hover{
  opacity: 1;
}
.btn:active{
  opacity: 1;
  background:blue !important;
}
/*.btn:active::before {
  display: block;
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: blue;
}*/

pre .clippy {
  margin: 0;
  margin-top: -3px;
  position: relative;
  top: 3px;
  width: 13px;
  display: inline;
  border-radius: unset;
  -webkit-box-shadow: 0 0 0px #555;
}

footer {
  padding-top: 10px !important;
}

.tags {
  font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
    sans-serif;
  letter-spacing: 0;
  font-weight: 400;
  font-style: normal;
  padding: 0;
  list-style: none;
  list-style-image: none;
}

.tags > li {
  display: inline-block;
  border: none;
  color: rgba(0, 0, 0, 0.68);
  background: rgba(0, 0, 0, 0.05);
  padding: 5px 10px;
  border-radius: 3px;
}

.tags > li:hover {
  background-color: LightGrey;
}

.link {
  color: inherit;
  text-decoration: none !important;
  cursor: pointer;
}

#singe-h2 > time > span {
  color:#888;
  font-size: 70%;
}


#singe-h2 > div > ul {
   font-size: 50%;
}

.navbar.navbar-default.navbar-static-top a{
    border-bottom: none;
}

.div-content{
  width: 100%;
  display: table;
}
.div-content .inner-left{
  background-color: rgba(35,242,229,0.6); /*整个div的背景色*/
  border-radius:15px;
  box-shadow: 0 10px 35px 2px rgba(0, 0, 0, .15),
    0 5px 15px rgba(0, 0, 0, .07),
    0 2px 5px -5px rgba(0, 0, 0, .1) !important;
float: left;
width: 20%;
top: 20%;
right: 0;
display: table-cell;
position:fixed;
}


.slidemy{
font-weight: bold;
color: #930ee4;
}

.div-content .inner{
overflow:auto;
}

nav#TableOfContents {
  width: 350%;
}
/*设置目录字体*/

nav#TableOfContents li{
  list-style-type:none; /*取消列表前面的黑点*/
}

nav#TableOfContents ul{
  margin:0px 0px 0px 4px;
  padding:0px 0px 0px 4px;
  font-size: 90%;
}