@font-face {
    font-family: 'OpenSans Regular';
    src: url('../fonts/OpenSans-Regular.eot');
    src: url('../fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/OpenSans-Regular.woff2') format('woff2'),
         url('../fonts/OpenSans-Regular.woff') format('woff'),
         url('../fonts/OpenSans-Regular.ttf') format('truetype'),
         url('../fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Source Code Pro Regular';
    src: url('../fonts/SourceCodePro-Regular.eot');
    src: url('../fonts/SourceCodePro-Regular.eot?#iefix') format('embedded-opentype'),
         url('../fonts/SourceCodePro-Regular.woff2') format('woff2'),
         url('../fonts/SourceCodePro-Regular.woff') format('woff'),
         url('../fonts/SourceCodePro-Regular.ttf') format('truetype'),
         url('../fonts/SourceCodePro-Regular.svg#Source Code Pro Regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html, body {
  font-family: 'OpenSans Regular', 'Helvetica Neue', Helvetica, 'Times New Roman', Arial, sans-serif;
  font-size: 16px;
  line-height: 28px;
  letter-spacing: 1px; 
  -webkit-font-smoothing: antialiased;        /* 字体抗锯齿 */
  -webkit-text-stroke-width: 0.2px;           /* 设置或检索对象中的文字的描边宽度。可取小数和 medium（描边宽度中等），thick（描边宽度粗），thin（描边宽度细）关键字。默认值为 0 */
  -moz-osx-font-smoothing: grayscale;         /* 字体抗锯齿 */  
}

code,
kbd,
samp {
  font-family: 'Source Code Pro Regular', monospace, monospace;
  font-size: 1em;
}

/** Links */
a { color: #2a7ae2; text-decoration: none; }
a:visited { color: #1756a9; }
a:hover { color: #111; text-decoration: underline; }

#main {
  margin:0;
  width: 90%; 
  padding-left: 5%;
  padding-top: 1em;
 padding-bottom: 1em; 
}

h2 {
  display: grid;
  font-size: 1.5em;
  -webkit-margin-before: 0.3em;
  -webkit-margin-after: 0.3em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold;
}

.post_info {
  color: #828282;
}

.post_info .fa {
padding-right: 5px;
}

.homePoster {
  max-height: 400px;
  overflow: hidden;
  margin: 7px 0 0 0;
}

.homePoster img {
url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEXm5OMJBBTiAAAAAXRSTlPM0jRW/QAAAApJREFUeJxjYgAAAAYAAzY3fKgAAAAASUVORK5CYII=');
}

.post_desc {
  font-color: #fff;
}

audio {
  width: 100%;
}

video { /* video size */
  max-width: 100% !important;
  height: auto;
}

img {
  max-width: 100%;
}

blockquote { 
  background: #f9f9f9; 
  border-left: 10px solid #ccc; 
  margin: 1.5em 0px; 
  padding: 0.5em 10px; 
  quotes: "\201C""\201D""\2018""\2019"; 
}  
blockquote p { 
  display: inline; 
  width: 100%;
}
p.date {
  color: #ccc;
  text-align: center;
}
#main li {
  list-style: square;
}

.prevPost {float:left}
.nextPost {float:right}
.prevPost, .nextPost {
  margin: 5px 0 5px 0;
}

.prevPost, .nextPost {
  border: #DDDDDD 1px solid;
  padding: 3px;
  margin: 5px 0 5px 0;
}

.archives ul {
  padding-left: 0px;
}

.archives li {
  list-style-type: none !important;
}

#hr_dotted {
  clear: both;
  margin: 15px 0;
  height: 0px;
  width: 100%;
  overflow: hidden;
  border: none;
  background: transparent;
  border-bottom: 1px dotted #ddd;
  padding: 0;
}

.index {
  padding-top: 0.2em;
}

#post {
  padding: 0.5em;
  border-style: solid;
  border-width: 1px;
  border-color: #f7f7f7;
  margin-bottom: 2em;
}

#post .post_info, #post .homePoster, #post h2, #post .post_desc {
padding-left: 12px;
padding-right: 12px;
}

/* Remove margins and padding from the list, and add a black background color */
ul.topnav, .footer-nav {
  list-style-type: none;
  margin: 0;
  padding-left: 5%;
  padding-right: 5%;
  overflow: hidden;
  background-color: #333;
}

.footer-nav {
  color: white;
  height: 56px;
  vertical-align: middle;
  line-height: 56px;
}

/* Float the list items side by side */
ul.topnav li {
  float: left; 
}

/* Style the links inside the list items */
ul.topnav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}

/* Change background color of links on hover */
ul.topnav li a:hover {background-color: #555;}

/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width: 680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 5%;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }

.poster {
  display: block;
  width: 100%;
  overflow: hidden;
}

.poster img {
  max-width: 100%;
  height: auto;
  top: 0;
  z-index: 1;
}

}

@media screen and (min-width: 680px) {
.poster {
  display: block;
  height: -moz-calc(100% - 56px); /* Firefox */
  height: -webkit-calc(100% - 56px); /* WebKit */
  height: -o-calc(100% - 56px); /* Opera */
  height: calc(100vh - 56px); /* Standard */
  overflow: hidden;
}

.poster img {
  width: 100%;
  height: auto;
  top: 0;
}
}

.cryptedmail:after {
  content: attr(data-name) "@" attr(data-domain) "." attr(data-tld);
}

.highlighter {
  background-color: #B4E7F8;
}
.highlighter_underline {
  border-bottom: 4px solid #B4E7F8;
}