body {
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: $body-color;
  overflow-x: hidden;
}

// Main
// --------------------------------------------------
.entry,
.hentry {
  @include clearfix;
  h1, h2, h3, h4, h5, h6, p, li {
    word-wrap: break-word;
  }
}

.body-title {
  display: block;
}

.hentry-dark {
  background-color: $header-color;
}

.entry-content {
  @include font-size(16);
  word-wrap: break-word;
  word-break: break-all;
  // Dotted line underlines for links
  p > a,
  li > a {
    border-bottom: 1px dotted lighten($link-color, 50);
    &:hover {
      border-bottom-style: solid;
    }
  }
}

///sections

.content-header-title {
  text-align: center;
  margin: 30px 0 0;
  h1 {
    margin: 10px 20px;
    font-weight: 700;
    @include font-rem(32);
    color: lighten($base-color, 20);
    @media #{$medium} {
      @include font-rem(48);
    }
    @media #{$large} {
      @include font-rem(60);
    }
  }
  h2 {
    margin: 0;
    @include font-rem(18);
    text-transform: uppercase;
    color: lighten($base-color, 40);
    @media #{$medium} {
      @include font-rem(24);
    }
  }
  p {
    color: lighten($base-color, 20);
  }
}

// Feature Image Caption
.image-credit {
  position: absolute;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  max-width: 440px;
  padding: 10px 15px;
  background-color: rgba($base-color, 0.5);
  color: $white;
  @include font-rem(12);
  text-align: right;
  @include border-radius(3px, 0, 0, 3px);
  z-index: 10;
  @media #{$medium} {
    max-width: 760px;
  }
  @media #{$large} {
    max-width: 960px;
  }
  a {
    color: $white;
    text-decoration: none;
  }
}

// Single Post and Page
// --------------------------------------------------
.entry-meta {
  @include font-rem(12);
  margin-left: 10px;
  color: lighten($base-color, 60);
  a {
    color: lighten($base-color, 60);
  }
  .vcard {
    &:before {
      content: "bye";
    }
  }
  .tag {
    display: inline-block;
    margin: 4px;
    color: $white;
    @include rounded(3px);
    background-color: lighten($base-color, 50);
    span {
      float: left;
      padding: 2px 6px;
    }
    .count {
      background-color: lighten($base-color, 40);
      @include border-radius(3px, 3px, 0, 0);
    }
    &:hover {
      background-color: lighten($base-color, 40);
    }
  }
  .entry-reading-time {
    float: right;
  }
}

header .entry-meta {
  display: none; // hide header meta on small screens
  @media #{$medium} {
    display: block;
  }
}

#post,
#page {
  .entry-content {
    margin: 30px 2px 20px 2px;
    padding: 10px 15px;
    background-color: $white;
    box-shadow: 0 0 0 0, 0 6px 12px rgba($black, 0.1);
    @include rounded(3px);
    @media #{$medium} {
      margin-left: 10px;
      margin-right: 10px;
      padding: 20px 30px;
    }
    @media #{$large} {
      max-width: 800px;
      margin: 30px auto 30px auto;
      padding: 50px 80px;
      > p:first-child {
        @include font-size(20);
      }
    }
  }
  #disqus_thread {
    margin: 40px 2px 20px 2px;
    padding: 10px 15px;
    background-color: $white;
    box-shadow: 0 0 0 1px rgba($border-color, 0.1), 0 6px 12px rgba($black, 0.1);
    @include rounded(3px);
    @media #{$medium} {
      margin-left: 10px;
      margin-right: 10px;
      padding: 20px 30px;
    }
    @media #{$large} {
      max-width: 800px;
      padding: 50px 80px;
      margin: 0 auto 30px auto;
    }
  }
  .entry-meta {
    margin: 50px 30px 30px;
    text-align: center;
  }
}

.entry-tags {
  display: block;
  margin-bottom: 6px;
}

.tag-heading,
.year-heading {
  margin-top: 0;
}

.tag-list{
  line-height: 1.5;
}

// Go to the exact location of bookmarks in tags, categories
.anchor-bookmark {
  display: block;
  height: $menu-height; /*same height as header*/
  margin-top: -$menu-height; /*same height as header*/
  visibility: hidden;
}

// Permalink icon for link post
.permalink {
  margin-right: 7px;
}

// Post Pagination Module
.pagination {
  margin: 20px 10px;
  text-align: center;
  ul {
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
  }
  li {
    padding-left: 4px;
    padding-right: 4px;
  }
  .current-page {
    font-weight: 700;
  }
}

// Read More Module
.read-more {
  position: relative;
  margin: 40px 2px 20px 2px;
  padding: 40px 15px 25px;
  background-color: $white;
  box-shadow: 0 0 0 1px rgba($border-color, 0.1), 0 6px 12px rgba($black, 0.1);
  @include rounded(3px);
  @media #{$medium} {
    margin: 50px 10px 20px 10px;
    padding: 50px 40px 25px;
  }
  @media #{$large} {
    max-width: 800px;
    padding: 50px 80px;
    margin: 60px auto;
  }
  text-align: center;
  @include clearfix;
}

.read-more-header {
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 35px;
  a {
    @extend .btn;
  }
}

.read-more-content {
  @include font-size(16);
  // Dotted line underlines for links
  p {
    text-align: left;
  }
  p > a,
  li > a {
    border-bottom: 1px dotted lighten($link-color, 50);
    &:hover {
      border-bottom-style: solid;
    }
  }
  h3 {
    margin: 0;
    @include font-rem(28);
    a {
      color: $text-color;
    }
    @media #{$medium} {
      @include font-rem(36);
    }
  }
}

.list-inline {
  padding-left: 0;
  margin-left: -5px;
  list-style: none;
}

.list-inline > li {
  display: inline-block;
  padding-right: 5px;
  padding-left: 5px;
}

.read-more-list {
  border-top: solid 2px lighten($base-color, 80);
}

.list-item {
  width: 100%;
  text-align: left;
  h4 {
    @include font-rem(18);
    margin-bottom: 0;
  }
  span {
    display: block;
    @include font-rem(14);
    color: lighten($base-color, 50);
  }
  @media #{$medium} {
    width: 49%;
    float: left;
    &:nth-child(2) {
      text-align: right;
    }
  }
}

// Post Index
// --------------------------------------------------
#post-index {
  #main {
    margin: 30px 2px 20px 2px;
    @media #{$medium} {
      margin-left: 20px;
      margin-right: 20px;
    }
    @media #{$large} {
      max-width: 800px;
      margin-top: 50px;
      margin-left: auto;
      margin-right: auto;
    }
  }
  article {
    background-color: $white;
    box-shadow: 0 0 0 0, 0 6px 12px rgba($base-color, 0.1);
    @include rounded(3px);
    margin-bottom: 20px;
    padding: 15px;
    @media #{$medium} {
      padding: 30px;
    }
    @media #{$large} {
      margin-bottom: 30px;
      padding: 30px 80px;
    }
  }
}

.entry-image-index {
  margin-top: -25px;
  margin-left: -15px;
  margin-right: -15px;
  margin-bottom: 10px;
  position: relative;
  @media #{$medium} {
    margin-top: -30px;
    margin-left: -30px;
    margin-right: -30px;
    margin-bottom: 15px;
  }
  @media #{$large} {
    margin-top: -50px;
    margin-left: -80px;
    margin-right: -80px;
    margin-bottom: 20px;
  }
  img {
    @include border-radius(3px, 0, 0, 3px); // round image corners
  }
}

// Footer
// --------------------------------------------------
.footer-wrapper {
  @include clearfix;
  margin: 2em auto;
  text-align: center;
  color: lighten($text-color, 20);
  a {
    color: lighten($text-color, 20);
  }
}

// Browser Upgrade
// --------------------------------------------------
.upgrade {
  padding: 10px;
  text-align: center;
}

// Google Search
// --------------------------------------------------
#goog-fixurl {
  ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
    li {
      list-style-type: none;
    }
  }
}

#goog-wm-qt {
  width: auto;
  margin-right: 10px;
  margin-bottom: 20px;
  padding: 8px 20px;
  display: inline-block;
  @include font-rem(14);
  background-color: $white;
  color: $text-color;
  border-width: 2px !important;
  border-style: solid !important;
  border-color: lighten($primary, 50);
  @include rounded(3px);
}

#goog-wm-sb {
  @extend .btn;
}

// Header
// --------------------------------------------------
.entry-header {
  width: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 50px;
  @media #{$medium} {
    background-color: $header-color;
    min-height: 260px;
  }
}

.header-title {
  margin-top: 0;
  width: 100%;
  overflow: hidden;
  line-height: 1;
  display: none;
  @media #{$medium} {
    @include flexbox();
    @include align-items(center);
    @include justify-content(center);
    @include flex-direction(column);
    min-height: 200px;
    margin-top: 60px;
  }
  h2 {
    color: $white;
  }
  h1 {
    font-weight: 700;
    margin-bottom: 20px;
    @include font-rem(32);
    color: $white;
    text-shadow: 1px 1px 4px rgba($base-color, 0.6);
    display: block;
    a {
      color: $white;
    }
    @media #{$medium} {
      @include font-rem(26);
    }
    @media #{$large} {
      @include font-rem(36);
    }
  }
  h1.post-title {
    display: block;
    @media #{$medium}{
      display: none;
    }
  }
  p {
    color: $white;
  }
}

.header-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: $menu-height;
  z-index: 20;
  ul {
    margin: 0 auto;
    list-style-type: none;
    height: 100%;
    padding: 0;
    @media #{$large} {
      max-width: 900px;
    }
  }
}

.header-menu-top {
  background-color: $menu-top;
  box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.4);
}

.header-menu-overflow {
  background-color: $menu-overflow;
  z-index: 100;
  box-shadow: 0px 6px 5px rgba(0, 0, 0, 0.4);
  display: none;
}

.header-menu-overflow ul li a {
  color: $white;
}

.header-menu-top .sub-item {
  background-color: $menu-top;
}

.header-menu-overflow .sub-item {
  background-color: $menu-overflow;
}

.header-item,
.header-item-title {
  float: right;
  padding-left: 20px;
  padding-right: 20px;
  border-top-color: transparent;
  border-top-style: solid;
  border-top-width: 5px;
  box-sizing: border-box;

  a {
    vertical-align: middle;
    display: table-cell;
    height: $menu-height - 2;
    font-size: 12px;
  }
}

///sections
.logo {
  width: $menu-height;
  height: $menu-height;
  float: left;
  padding: 10px;
}

.header-item-container {
  height: 100%;
}

.header-item {
  height: 100%;
  @media #{$large} {
    display: block;
  }
}

.header-item-title {
  float: left;
  border-top-width: 0px;
  height: 100%;
  a.title {
    font-size: 1.5rem;
    padding-left: 5px;
    vertical-align: middle;
    height: $menu-height - 2;
    @media #{$medium}{
      display: table-cell;
    }
  }
}

.header-item.active,
.header-item:hover {
  border-top-color: $header-margin;
}

.header-item:hover .header-submenu {
  display: block;
  position: absolute;
}

.header-submenu {
  display: none;
  border-top: 2px solid $header-margin;
  width: 200px;
  z-index: 100;
  list-style-type: none;
  transform: translateX(-25%);
}

.sub-item {
  position: relative;
  padding-left: 10px;
  width: 100%;
  border-bottom: 1px solid gray;
  border-left: 1px solid;
  height: 50px;
  text-decoration: none;
}

.sub-item a {
  vertical-align: middle;
  display: table-cell;
  height: 50px;
}

.sub-item:hover {
  border-bottom-color: $header-margin;
  border-left-color: $header-margin;
}

.button-twitter {
  color: $white;
  position: fixed;
  margin-top: $menu-height / 2 - 20;
  margin-right: 10px;
  top: 0;
  right: 0;
  z-index: 10000000000;
  @media #{$large}{
    top: auto;
    bottom: 0;
  }

  span {
    display: none;
    @media #{$medium}{
      display: inline;
    }
  }
}

footer {
  font-size: 13px;
}