@font-face {
  font-family: "Latin Moderno Mono";
  src: url("fonts/LMMonoLt10-Regular.eot?#iefix") format("embedded-opentype"),
    url("fonts/LMMonoLt10-Regular.otf") format("opentype"),
    url("fonts/LMMonoLt10-Regular.woff") format("woff"),
    url("fonts/LMMonoLt10-Regular.ttf") format("truetype"),
    url("fonts/LMMonoLt10-Regular.svg#LMMonoLt10-Regular") format("svg");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Latin Moderno Mono";
  src: url("fonts/LMMonoLt10-Oblique.eot?#iefix") format("embedded-opentype"),
    url("fonts/LMMonoLt10-Oblique.otf") format("opentype"),
    url("fonts/LMMonoLt10-Oblique.woff") format("woff"),
    url("fonts/LMMonoLt10-Oblique.ttf") format("truetype"),
    url("fonts/LMMonoLt10-Oblique.svg#LMMonoLt10-Oblique") format("svg");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "Latin Moderno Mono";
  src: url("fonts/LMMonoLt10-BoldOblique.eot?#iefix")
      format("embedded-opentype"),
    url("fonts/LMMonoLt10-BoldOblique.otf") format("opentype"),
    url("fonts/LMMonoLt10-BoldOblique.woff") format("woff"),
    url("fonts/LMMonoLt10-BoldOblique.ttf") format("truetype"),
    url("fonts/LMMonoLt10-BoldOblique.svg#LMMonoLt10-BoldOblique") format("svg");
  font-weight: bold;
  font-style: italic;
}

@font-face {
  font-family: "Latin Moderno Mono";
  src: url("fonts/LMMonoLt10-Bold.eot?#iefix") format("embedded-opentype"),
    url("fonts/LMMonoLt10-Bold.otf") format("opentype"),
    url("fonts/LMMonoLt10-Bold.woff") format("woff"),
    url("fonts/LMMonoLt10-Bold.ttf") format("truetype"),
    url("fonts/LMMonoLt10-Bold.svg#LMMonoLt10-Bold") format("svg");
  font-weight: bold;
  font-style: normal;
}

html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: url("images/bg.png");
  font-family: "Latin Moderno Mono", sans-serif;
}
a {
  color: #000;
}
img {
  max-width: 100%;
}

#wrapper {
  width: 1020px;
  margin: 0 auto;
  padding: 10px;
  box-sizing: border-box;
  max-width: 100%;
}
#header {
  background: url("images/pages.png");
  padding-top: 50px;
  background-size: 100%;
  margin: 0 30px;
}
#mobile-logo {
  display: none;
}
#header-top {
  display: flex;
  margin: 0 20px;
  align-items: center;
}
#menuclick {
  display: none;
}
#logo {
  display: block;
  padding: 0 10px;
}
#top-space {
  width: 728px;
  height: 90px;
  background: #aaa;
  flex-shrink: 0;
}
#menu {
  text-align: center;
  margin-top: 10px;
  position: relative;
}
#menu a {
  background: #b3a98c;
  height: 34px;
  display: inline-block;
  vertical-align: top;
  line-height: 34px;
  padding: 0 2px;
  text-decoration: none;
  font-weight: bold;
}
.tab {
  display: inline-block;
  height: 34px;
  vertical-align: bottom;
  margin-left: -7px;
  position: relative;
}
.tab:before {
  content: url("images/tab-inactive-left.png");
  display: inline-block;
  height: 34px;
}
.tab:after {
  content: url("images/tab-inactive-right.png");
  display: inline-block;
  height: 34px;
}
#menu .tab.active a {
  background: #eaddb8;
}
.tab.active:before {
  content: url("images/tab-active-left.png");
}
.tab.active:after {
  content: url("images/tab-active-right.png");
}
#folder {
  background: #eaddb8;
  border-radius: 20px;
}
@media screen and (max-width: 1000px) {
  #wrapper {
    padding: 0;
  }
  #logo {
    display: none;
  }
  #mobile-logo {
    display: block;
    margin: 0 auto;
    max-width: 300px;
    padding: 20px;
  }
  #header {
    background-image: url("images/pages-mobile.png");
    background-size: 420px;
    background-repeat: repeat-x;
    margin: 0;
  }
  #header-top {
    justify-content: center;
    margin: 0;
  }
  #folder {
    border-radius: 0;
  }
  #header {
    padding-top: 20px;
  }
}
@media screen and (max-width: 900px) {
  #header {
    background-size: 440px;
  }
  #menuclick-wrap {
    text-align: center;
  }
  #menuclick {
    display: inline-block;
    vertical-align: bottom;
    margin: 10px auto 0 auto;
  }
  #menuclick-text {
    background: #dcceaa;
    display: inline-block;
    vertical-align: bottom;
    line-height: 50px;
    font-weight: bold;
    font-size: 1.3em;
  }
  #menuclick:before {
    width: 25px;
    height: 50px;
    content: url("images/menuclick-left.png");
    vertical-align: bottom;
    display: inline-block;
  }
  #menuclick:after {
    width: 25px;
    height: 50px;
    content: url("images/menuclick-right.png");
    vertical-align: bottom;
    display: inline-block;
  }
  #menu {
    display: none;
    margin: 0;
  }
  .tab {
    display: block;
    height: auto;
  }
  #menu a {
    display: block;
    background: #b3a98c;
    height: auto;
    line-height: 1.2em;
    font-size: 1.2em;
    padding: 10px 0;
  }
  .tab:before,
  .tab:after {
    content: "";
    display: none;
  }
}
@media screen and (max-width: 780px) {
  #header {
    background-size: 340px;
  }
  #top-space {
    overflow: hidden;
    width: 300px;
    height: 50px;
  }
}

#middle {
  padding: 30px;
  display: flex;
  justify-content: space-evenly;
}
#middle-left {
  width: 100%;
}
#cc-comicbody {
  text-align: center;
}
#middle-right {
  order: 1;
  width: 160px;
  flex-grow: 0;
  flex-shrink: 0;
  margin-left: 20px;
}
#right-space {
  width: 160px;
  height: 600px;
  background: #ccc;
}
#hiveworks {
  display: block;
  padding: 10px 0;
}
.cc-nav {
  display: flex;
  justify-content: space-evenly;
}
.cc-nav a,
.cc-nav div {
  padding: 10px;
  font-size: 1.3em;
  font-weight: bold;
  text-decoration: none;
}
#ibar {
  padding: 10px;
  height: 49px;
  border-bottom: 3px solid #dcceaa;
  border-top: 3px solid #dcceaa;
  margin: 10px;
}
@media screen and (max-width: 900px) {
  #middle {
    flex-wrap: wrap;
    padding: 20px 0 0 0;
  }
  #middle-right {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin: 0;
  }
  #right-space {
    display: none;
  }
  #hiveworks {
    max-width: 160px;
  }
  #pin {
    margin-left: 10px;
  }
}
@media screen and (max-width: 550px) {
  .cc-navaux {
    display: none;
  }
  .cc-nav a {
    font-size: 1.2em;
    padding: 7px;
  }
}

#bottom {
  padding: 30px;
  display: flex;
}
#bottom-right {
  order: 1;
  width: 300px;
  flex-shrink: 0;
  flex-grow: 0;
  margin-left: 20px;
}
#bottom-left {
  padding: 30px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}
#fastener {
  text-align: center;
  max-width: 100px;
  margin: 0 auto;
  margin-bottom: 20px;
}
#bottom-space {
  width: 300px;
  height: 250px;
  background: #ccc;
}
.cc-newsheader,
.cc-newsheader a {
  text-decoration: none;
  color: #000;
  font-weight: bold;
  text-align: center;
  border-bottom: 2px dashed #000;
  padding-bottom: 10px;
  font-size: 2em;
}
.cc-publishtime {
  text-align: center;
  font-style: italic;
  padding: 20px;
  color: #a4a4a5;
}
#bottom-right a {
  font-weight: bold;
  font-size: 1.2em;
  text-align: center;
  display: block;
  padding-top: 10px;
  text-decoration: none;
}
@media screen and (max-width: 750px) {
  #bottom {
    flex-wrap: wrap;
    padding: 10px;
  }
  #bottom-left {
    order: 2;
  }
  #bottom-right {
    margin: 0 auto;
    padding-bottom: 20px;
  }
}