@charset "utf-8";

/* ------------------------------------

 * AOWWW.COM style

 * --------------------------------- */

* {

  margin: 0;

  padding: 0;

}
ol, ul {
    list-style-position: inside;
}
.post {

    width: 30%;

    margin: 2rem 3%;

    margin-left: 0;

    float: left;

}

.list .post-content p{

    display: none;

}

.list .post-content.active p:nth-of-type(2) {

  display: block;

  margin-top: 1rem;

  position: absolute;

  width: 22rem;

}

.list .post-content p:first-of-type {

    display: inline-block;

    margin-left: 1rem;

}

.list .post-content>a{position:relative;}

.list .post-content>a:after {

    content: "";

    position: absolute;

    border-right: #ddd solid 1px;

    height: 1rem;

    top: 0.2rem;

    right: -0.6rem;

}

.list h3.archive-title {

    width: 6.8rem;

    position: sticky;

    top: 1rem;

}

.list h3.archive-title span {

    color: #333;

}

#post article.post {

    width: 600px;

    margin: 0 auto;

    float: none;

}

#post {

    overflow: hidden;

}

.df.list h2.post-title {

    margin-bottom: 0;

}

.site-search {

    margin: 0 auto;

    width: 50%;

}

#search input {

    padding: 0.5rem 2rem 0.5rem 0.5rem;

    border-radius: 3rem;

}

.container, .row > [class*="col-"] {

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box; }



.container {

  margin-left: auto;

  margin-right: auto;

  padding-left: 10px;

  padding-right: 10px; }



.row {

  margin-right: -10px;

  margin-left: -10px; }



.row > [class*="col-"] {

  float: left;

  min-height: 1px;

  padding-right: 10px;

  padding-left: 10px; }



.row > [class*="-push-"],

.row > [class*="-pull-"] {

  position: relative; }



/*******************************/



.col-mb-1 {

  width: 8.33333%; }



.col-mb-2 {

  width: 16.66667%; }



.col-mb-3 {

  width: 25%; }



.col-mb-4 {

  width: 33.33333%; }



.col-mb-5 {

  width: 41.66667%; }



.col-mb-6 {

  width: 50%; }



.col-mb-7 {

  width: 58.33333%; }



.col-mb-8 {

  width: 66.66667%; }



.col-mb-9 {

  width: 75%; }



.col-mb-10 {

  width: 83.33333%; }



.col-mb-11 {

  width: 91.66667%; }



.col-mb-12 {

  width: 100%; }



/*******************************/



@media (min-width: 768px) {

  .container {

    max-width: 728px; }



  .col-tb-1 {

    width: 8.33333%; }



  .col-tb-2 {

    width: 16.66667%; }



  .col-tb-3 {

    width: 25%; }



  .col-tb-4 {

    width: 33.33333%; }



  .col-tb-5 {

    width: 41.66667%; }



  .col-tb-6 {

    width: 50%; }



  .col-tb-7 {

    width: 58.33333%; }



  .col-tb-8 {

    width: 66.66667%; }



  .col-tb-9 {

    width: 75%; }



  .col-tb-10 {

    width: 83.33333%; }



  .col-tb-11 {

    width: 91.66667%; }



  .col-tb-12 {

    width: 100%; }



  .col-tb-offset-0 {

    margin-left: 0%; }



  .col-tb-offset-1 {

    margin-left: 8.33333%; }



  .col-tb-offset-2 {

    margin-left: 16.66667%; }



  .col-tb-offset-3 {

    margin-left: 25%; }



  .col-tb-offset-4 {

    margin-left: 33.33333%; }



  .col-tb-offset-5 {

    margin-left: 41.66667%; }



  .col-tb-offset-6 {

    margin-left: 50%; }



  .col-tb-offset-7 {

    margin-left: 58.33333%; }



  .col-tb-offset-8 {

    margin-left: 66.66667%; }



  .col-tb-offset-9 {

    margin-left: 75%; }



  .col-tb-offset-10 {

    margin-left: 83.33333%; }



  .col-tb-offset-11 {

    margin-left: 91.66667%; }



  .col-tb-offset-12 {

    margin-left: 100%; }



  .col-tb-pull-0 {

    right: 0%; }



  .col-tb-pull-1 {

    right: 8.33333%; }



  .col-tb-pull-2 {

    right: 16.66667%; }



  .col-tb-pull-3 {

    right: 25%; }



  .col-tb-pull-4 {

    right: 33.33333%; }



  .col-tb-pull-5 {

    right: 41.66667%; }



  .col-tb-pull-6 {

    right: 50%; }



  .col-tb-pull-7 {

    right: 58.33333%; }



  .col-tb-pull-8 {

    right: 66.66667%; }



  .col-tb-pull-9 {

    right: 75%; }



  .col-tb-pull-10 {

    right: 83.33333%; }



  .col-tb-pull-11 {

    right: 91.66667%; }



  .col-tb-pull-12 {

    right: 100%; }



  .col-tb-push-0 {

    left: 0%; }



  .col-tb-push-1 {

    left: 8.33333%; }



  .col-tb-push-2 {

    left: 16.66667%; }



  .col-tb-push-3 {

    left: 25%; }



  .col-tb-push-4 {

    left: 33.33333%; }



  .col-tb-push-5 {

    left: 41.66667%; }



  .col-tb-push-6 {

    left: 50%; }



  .col-tb-push-7 {

    left: 58.33333%; }



  .col-tb-push-8 {

    left: 66.66667%; }



  .col-tb-push-9 {

    left: 75%; }



  .col-tb-push-10 {

    left: 83.33333%; }



  .col-tb-push-11 {

    left: 91.66667%; }



  .col-tb-push-12 {

    left: 100%; } 

}

/*******************************/

body {

  color: #333;

  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

  font-size: 87.5%;

  background: #FFFBEE;

}

.none {

  display: none !important;

}

.center {

  text-align: center;

  margin-top:3rem;

}

.center h5{

  color: #999;

}



.transparent {

  opacity: 0;

  height: 0;

  overflow: hidden;

}

.df {

  display: flex;

}

ul {

  list-style: none;

}

a {

  color: #2440B3;

  text-decoration: none;

}

a:hover, a:active {

  color: #315efb;

}

pre, code {

  background: #F3F3F3;

  font-family: Menlo, Monaco, Consolas, "Lucida Console", "Courier New", monospace;

  font-size: .92857em;

}

code {

  padding: 2px 4px;

  color: #B94A48;

}

pre {

  padding: 8px;

  overflow: auto;

  max-height: 400px;

}

pre code {

  padding: 3px;

  color: #444;

}

blockquote {

  margin: 1em 0;

  padding-left: 1.5em;

  border-left: 4px solid #eee;

  color: #666;

}

table {

  border: 1px solid #ddd;

  width: 100%;

}

table th, table td {

  padding: 5px 10px;

  border: 1px solid #eee;

}

table th {

  background: #f3f3f3;

}

h1, h2, h3, h4, h5, h6 {

  font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif;

}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], textarea {

  padding: 5px;

  border: 1px solid #E9E9E9;

  width: 100%;

  border-radius: 2px;

  -webkit-box-sizing: border-box;

  -moz-box-sizing: border-box;

  box-sizing: border-box;

}

textarea {

  resize: vertical;

}



.post-meta a:hover, .post-content a:hover, .widget a:hover, .comment-content a:hover {

  border-bottom-color: transparent;

}

/* ------------------

 * Header

 * --------------- */

#header {

  padding: 3rem 0 1rem;

}

#logo {

  color: #333;

  font-size: 2.5em;

}

#logo img {

  max-height: 64px;

}

.description {

  margin: .5em 0 0;

  color: #999;

  font-style: italic;

}

/* Navigation menu */

#nav-menu {

  margin: 25px 0 0;

  padding: 0;

  display: none;

}

#nav-menu a {

  display: block;

  margin-right: -1px;

  padding: 0 20px;

  border: 1px solid #EEE;

  border-bottom: none;

  height: 32px;

  line-height: 32px;

  color: #444;

  float: left;

}

#nav-menu a:hover, #nav-menu .current {

  background: #F6F6F6;

}

/* Search */

#search {

  position: relative;

  margin-top: 15px;

}

#search input {

  padding-right: 30px;

}

#search button {

    position: absolute;

    right: 0.5rem;

    top: 0.2rem;

    border: none;

    padding: 0;

    width: 1.5rem;

    height: 1.5rem;

    background: transparent url(img/icon-search.png) no-repeat center center;

    direction: ltr;

    text-indent: -999em;

}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

  #search button {

    background-image: url(img/icon-search@2x.png);

    -webkit-background-size: 24px 24px;

    -moz-background-size: 24px 24px;

    -o-background-size: 24px 24px;

    background-size: 24px 24px;

  }

}

/* ------------------

 * Main

 * --------------- */



.post-title {

  margin: .83em 0;

  font-size: 1.4em;

}

.post-meta {

  margin-top: -0.5em;

  padding: 0;

  color: #999;

  font-size: .92857em;

}

.post-meta li {

  display: inline-block;

  margin: 0 8px 0 0;

  padding-left: 12px;

  border-left: 1px solid #EEE;

}

.post-meta li:first-child {

  margin-left: 0;

  padding-left: 0;

  border: none;

}

.post-content {

  line-height: 1.5;

}

.post .tags {

  clear: both;

}

.post-near {

  list-style: none;

  margin: 30px 0;

  padding: 0;

  color: #999;

}

.post-near li {

  margin: 10px 0;

}

.archive-title {

  margin: 1em 0 -1em;

  padding-top: 20px;

  color: #999;

  font-size: 1em;

}

.more {

  text-align: center;

}

.more a {

  border: none;

}

.protected .text {

  width: 50%;

}

/* Page nav */

.page-navigator {

  list-style: none;

  margin: 25px 0;

  padding: 0;

  text-align: center;

}

.page-navigator li {

  display: inline-block;

  margin: 0 4px;

}

.page-navigator a {

  display: inline-block;

  padding: 0 10px;

  height: 30px;

  line-height: 30px;

}

.page-navigator a:hover {

  background: #EEE;

  text-decoration: none;

}

.page-navigator .current a {

  color: #444;

  background: #EEE;

}

/* ------------------

 * Comment list

 * --------------- */

#comments {

  padding-top: 15px;

}

.comment-list, .comment-list ol {

  list-style: none;

  margin: 0;

  padding: 0;

}

.comment-list li {

  padding: 14px;

  margin-top: 10px;

  border: 1px solid #EEE;

}

.comment-list li.comment-level-odd {

  background: #F6F6F3;

}

.comment-list li.comment-level-even {

  background: #FFF;

}

.comment-list li.comment-by-author {

  background: #FFF9E8;

}

.comment-list li .comment-reply {

  text-align: right;

  font-size: .92857em;

}

.comment-meta a {

  color: #999;

  font-size: .92857em;

}

.comment-author {

  display: block;

  margin-bottom: 3px;

  color: #444;

}

.comment-author .avatar {

  float: left;

  margin-right: 10px;

}

.comment-author cite {

  font-weight: bold;

  font-style: normal;

}

/* Comment reply */

.comment-list .respond {

  margin-top: 15px;

  border-top: 1px solid #EEE;

}

.respond .cancel-comment-reply {

  float: right;

  margin-top: 15px;

  font-size: .92857em;

}

#comment-form label {

  display: block;

  margin-bottom: .5em;

  font-weight: bold;

}

#comment-form .required:after {

  content: " *";

  color: #C00;

}

/* ------------------

 * secondary

 * --------------- */

#secondary {

  padding-top: 15px;

  word-wrap: break-word;

}

.widget {

  margin-bottom: 30px;

}

.widget-list {

  list-style: none;

  padding: 0;

}

.widget-list li {

  margin: 5px 0;

  line-height: 1.6;

}

.widget-list li ul {

  margin-left: 15px;

}

/* ------------------

 * Footer 

 * --------------- */

#footer {

  padding: 3em 0;

  line-height: 1.5;

  text-align: center;

  color: #999;

}

/* -----------------

 * Error page

 * -------------- */

.error-page {

  margin-top: 100px;

  margin-bottom: 100px;

}

/* -----------------

 * Content format

 *--------------- */

.post-content, .comment-content {

  line-height: 1.5;

  word-wrap: break-word;

}

.post-content h2, .comment-content h2 {

  font-size: 1.28571em;

}

.post-content img, .comment-content img, .post-content video, .comment-content video {

  max-width: 100%;

}

.post-content a img, .comment-content a img {

  background: #FFF;

  position: relative;

  bottom: -4px; /* hidden img parent link border  */

}

.post-content hr, .comment-content hr {

  margin: 2em auto;

  width: 100px;

  border: 1px solid #E9E9E9;

  border-width: 2px 0 0 0;

}

/* -----------------

 * Misc

 *--------------- */

.aligncenter, div.aligncenter {

  display: block;

  margin-left: auto;

  margin-right: auto;

}

.alignleft {

  float: left;

}

.alignright {

  float: right;

}

img.alignleft {

  margin: 0 15px 0 0;

}

img.alignright {

  margin: 0 0 0 15px;

}

/* -----------------

 * Responsive

 *--------------- */

@media (max-width: 767px) {

  body {

    font-size: 81.25%;

  }

  #nav-menu a {

    float: none;

    display: inline-block;

    margin: 0 -2px;

  }

}

@media (max-width: 768px) {

  #header, .post-title, .post-meta {

    text-align: center;

  }

}

@media (min-width: 992px) {

  .container {

    min-width: 760px;

  }

}



@media (min-width: 1024px) {

.container {

  max-width: 1200px;

  min-width: 760px;

}

}

.hidden {

  display: none !important;

  visibility: hidden;

}

.sr-only {

  border: 0;

  height: 1px;

  margin: -1px;

  overflow: hidden;

  padding: 0;

  position: absolute;

  width: 1px;

}

.sr-only.focusable:active, .sr-only.focusable:focus {

  clip: auto;

  height: auto;

  margin: 0;

  overflow: visible;

  position: static;

  width: auto;

}

.invisible {

  visibility: hidden;

}

.row > [class*="col-"] {

  float: none;

}

.site-name.col-mb-12 {

  text-align: center;

}

.site-search.kit-hidden-tb {

  margin: 3rem auto 0;

}

.website-list {

  width: 100%;

}

.nav-list {

  border-left: #eee solid 1px;

  width: 20%;

  padding-left: 3rem;

  margin-left: 3rem;

  margin-top: 1.5rem;

  position: sticky;

  right: 0;

  top:2rem;

  overflow: hidden;

  height: 100%;

}



/*index*/

.website-list ul {

  /*display: flex;

  justify-content: space-around;

  justify-content: flex-start;*/

  display: block;

}

.website-list ul li {

    max-width: 100%;

    margin: 1rem;

    overflow: hidden;

    float: left;

    margin-bottom: 0;

    line-height: 2em;

}

.website-list>div {

  clear: both;

  overflow: hidden;

}

.nav-list li {

  line-height: 2em;

}

.df h3.title {

  margin: 2rem 1rem 0;

  border-bottom: #ddd 1px dotted;

  padding-bottom: 0.5rem;

}

.post-content a {

    display: inline-block;

    border-bottom: 0px #2440B3 dotted;

    margin-top: 0.5rem;

    font-size: 0.875rem;

}

.post .post-meta {

    margin-bottom: 1rem;

}

.website-list .post .post-meta {

    margin-bottom: 0rem;

    margin-top: -1.5rem;

}

.website-list ul.post-meta li {

  max-width: 100%;

  margin: 1rem 0;

  float: none;

}



@media (max-width: 768px) {



.container .df {

  display: block;

}



.website-list {

  width: 100%;

}



#logo {

  font-size: 2em;

}

.df {

  margin-top: 0rem;

}

.nav-list {

  border-top: #eee 1px solid;

  width: calc(100% - 2rem);

  padding-left: 0;

  margin: 1rem;

  padding-top: 1rem;

  border-left: 0;

  position: relative;

}

body {

  padding-left: 0.2rem;

}

#post article.post, .df.list div#main {

  width: calc(100% - 2rem);

  margin: 0 auto;

}

.post {

    width: 100%;

    margin: 1rem auto;

    float: none;

}

.df.list h2.post-title {

    text-align: left;

}

.list h3.archive-title {

    width: auto;

    position: relative;

    top: -1rem;

}

.nav-list li {

    font-weight: bold;

    font-size: 1rem;

}

h3.title {

    font-size: 1rem;

}



}