style.css

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, img, ins, kbd, q, s, samp,
small, strike, tt, var,
center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

.float-right {
  float:right !important;
}

.float-left {
  float:left !important;
}

.small-font {
  font-size: 10px;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  display: block;
  width: 100%;
  overflow:auto;
}
table th {
  font-weight:600
}
table th, table td {
  padding:6px 13px;
  border:1px solid #eee
}
table tr {
  background-color:#fff;
  border-top:1px solid #ddd
}
table tr:nth-child(2n) {
  background-color:#f8f8f8
}

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 100%;
  height: 100%;
}

body {
  background: #fff;
  font: 14px/1.5 Helvetica, Arial, sans-serif;
  color: #666;
}

.container {
  margin: 0 auto;
  max-width: 740px;
  padding: 0 10px;
  width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  font-family: Helvetica, Arial, sans-serif;
  color: #555;
  font-weight: bold;
  line-height: 1.7;
  margin: 1em 0 15px;
  padding: 0;
}
@media screen and (max-width: 640px) {
  h1, h2, h3, h4, h5, h6 {
    line-height: 1.4;
  }
}

h1 {
  font-size: 27px;
}
h2 {
  font-size: 21px;
}
h3 {
  font-size: 18px;
}
h4 {
  font-size: 16px;
  color: #666;
}
p {
  margin: 13px 0;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
  color: inherit;
}

a {
  color: #4183C4;
  text-decoration: none;
  cursor: pointer;
}
a:hover, a:active {
  color: #4183C4;
}

ul, ol {
  margin: 15px 0;
  padding-left: 30px;
  list-style: none;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

ol ul, ul ol, ul ul, ol ol {
  margin: 0;
}

ul ul, ol ul {
  list-style-type: circle;
}

img {
  max-width: 100%;
}

.clearfix:before, 
.clearfix:after { 
     content: " "; 
     display: table; 
} 
.clearfix:after { 
     clear: both; 
} 

.titlepart {
  margin-bottom: 30px;
  background-color: #f8f8f8;
}

.titlemain {
  padding: 20px 0;
}
@media screen and (max-width: 640px) {
  .titlemain {
    text-align: center;
  }
}

.site-info {
  float: left;
}

.site-info h1 {
  border-bottom: none;
}

@media screen and (max-width: 640px) {
  .site-info {
    float: none;
    display: block;
    margin: 0 auto;
  }
}

.site-name {
  margin: 0;
  color: #555;
  cursor: pointer;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  font-size: 24px;
  letter-spacing: 1px;
}

.site-description {
  margin: -5px 0 0 0;
  color: #777;
  font-size: 12px;
}
@media screen and (max-width: 640px) {
  .site-description {
    margin: 3px 0;
  }
}

nav {
  float: right;
  margin-top: 23px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
}
@media screen and (max-width: 640px) {
  nav {
    float: none;
    margin-top: 9px;
    display: block;
    font-size: 14px;
  }
}
nav a {
  margin-left: 20px;
  color: #333;
  text-align: right;
  font-weight: 300;
  letter-spacing: 1px;
}
@media screen and (max-width: 640px) {
  nav a {
    margin: 0 0px;
    color: #333;
  }
}

.footerpart {
  margin-top: 50px;
  margin-bottom: 20px;
  border-top: 1px solid #eee;
}

footer {
  padding: 15px 0;
  font-size: 12px;
}

.footer-list {
  margin: 0;
  padding: 0;
  list-style:none;
}

.footer-list li {
  display:inline-block;
  line-height: 16px;
}

.footer-list li+li {
  margin-left:10px;
}

.posts > .post {
  padding-bottom: 2em;
  border-bottom: 1px solid #eee;
}

.posts > .post:last-child {
  padding-bottom: 1em;
  border-bottom: none;
}

.post blockquote {
  margin: 1.8em .8em;
  border-left: 2px solid #666;
  padding: 0.1em 1em;
  color: #666;
  font-style: italic;
}
.post .comments {
  margin-top: 10px;
}
.post .read-more {
  text-transform: uppercase;
}

.post-title {
  float: none;
  display: block;
  font-size: 80%;
  font-style: italic;
  margin-bottom: 0px;
  border-bottom: 1px solid #eee;
}
.post-info {
  float: none;
  font-size: 80%;
  font-style: italic;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}
.post-date {
  float: left;
  margin-left: 10px
}
.post-draft {
  float: left;
  color: #ff0000;
  text-transform: uppercase;
}
.post-category {
  float: right;
  margin-right: 10px
}
.post-category a {
  color: inherit;
  font-weight:  bold;
}

.pagination {
  margin-top: 10px;
  text-align: center;
}

.categories > .category-posts {
  padding-bottom: 2em;
  border-bottom: 1px solid #eee;
}

.categories > .category-posts:last-child {
  padding-bottom: 1em;
  border-bottom: none;
}

.category-post-date {
  padding-left: 1em;
  font-size: 10px;
}

.page-post-draft {
  float: right;
  padding-left: 1em;
  font-size: 10px;
  color: #ff0000;
  text-transform: uppercase;
}

.page-post-date {
  float: right;
  padding-left: 1em;
  font-size: 10px;
}

.article-item {
  white-space: nowrap;
  overflow: hidden;
  margin-bottom: 3px;
}

.article-cite {
  float: left;
  width: 125px;
  margin-right: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.article-cite a {
  color: #808080;
  font-size: 13px;
}

.article-links {
  display: block;
  margin-right: 3px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.article-date {
  width: 90px;
  float: right;
  text-align: right;
  color: #808080;
  padding-top: 0.2em;
  font-size: 10px;
  white-space:nowrap;
}

code {
  font-family: 'Bitstream Vera Sans Mono','Courier', monospace;
}

.algo {
  markdown: 1;
  background-color: #f8f8f8;
  border: 1px solid #ccc;
  padding: 6px 10px;
}

.sidebar {
    markdown: 1;
    background-color: #f8f8f8;
    border: 1px solid #ccc;
    padding: 6px 10px;
    margin-left: 20px;
    margin-right: 20px;
}

.highlight pre, pre, .highlight .hll { background-color: #f8f8f8; border: 1px solid #ccc; padding: 6px 10px; border-radius: 3px; }
.highlight .c { color: #999988; font-style: italic; }
.highlight .err { color: #a61717; background-color: #e3d2d2; }
.highlight .k { font-weight: bold; }
.highlight .o { font-weight: bold; }
.highlight .cm { color: #999988; font-style: italic; }
.highlight .cp { color: #999999; font-weight: bold; }
.highlight .c1 { color: #999988; font-style: italic; }
.highlight .cs { color: #999999; font-weight: bold; font-style: italic; }
.highlight .gd { color: #000000; background-color: #ffdddd; }
.highlight .gd .x { color: #000000; background-color: #ffaaaa; }
.highlight .ge { font-style: italic; }
.highlight .gr { color: #aa0000; }
.highlight .gh { color: #999999; }
.highlight .gi { color: #000000; background-color: #ddffdd; }
.highlight .gi .x { color: #000000; background-color: #aaffaa; }
.highlight .go { color: #888888; }
.highlight .gp { color: #555555; }
.highlight .gs { font-weight: bold; }
.highlight .gu { color: #800080; font-weight: bold; }
.highlight .gt { color: #aa0000; }
.highlight .kc { font-weight: bold; }
.highlight .kd { font-weight: bold; }
.highlight .kn { font-weight: bold; }
.highlight .kp { font-weight: bold; }
.highlight .kr { font-weight: bold; }
.highlight .kt { color: #445588; font-weight: bold; }
.highlight .m { color: #009999; }
.highlight .s { color: #dd1144; }
.highlight .n { color: #333333; }
.highlight .na { color: teal; }
.highlight .nb { color: #0086b3; }
.highlight .nc { color: #445588; font-weight: bold; }
.highlight .no { color: teal; }
.highlight .ni { color: purple; }
.highlight .ne { color: #990000; font-weight: bold; }
.highlight .nf { color: #990000; font-weight: bold; }
.highlight .nn { color: #555555; }
.highlight .nt { color: navy; }
.highlight .nv { color: teal; }
.highlight .ow { font-weight: bold; }
.highlight .w { color: #bbbbbb; }
.highlight .mf { color: #009999; }
.highlight .mh { color: #009999; }
.highlight .mi { color: #009999; }
.highlight .mo { color: #009999; }
.highlight .sb { color: #dd1144; }
.highlight .sc { color: #dd1144; }
.highlight .sd { color: #dd1144; }
.highlight .s2 { color: #dd1144; }
.highlight .se { color: #dd1144; }
.highlight .sh { color: #dd1144; }
.highlight .si { color: #dd1144; }
.highlight .sx { color: #dd1144; }
.highlight .sr { color: #009926; }
.highlight .s1 { color: #dd1144; }
.highlight .ss { color: #990073; }
.highlight .bp { color: #999999; }
.highlight .vc { color: teal; }
.highlight .vg { color: teal; }
.highlight .vi { color: teal; }
.highlight .il { color: #009999; }
.highlight .gc { color: #999; background-color: #EAF2F5; }