* {
  box-sizing: border-box; }

a {
  text-decoration: none; }
  a:link {
    color: #03c; }
  a:visited {
    color: #639; }
  a:hover {
    background: #ed8; }
  a:active {
    color: #f3c; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  color: #f0f0f0;
  background: #333; }

span.accent {
  color: #e68; }

li {
  margin-top: 0.5em;
  margin-bottom: 0.5em; }

.navi-list {
  margin: 0 0 0 -1em;
  padding: 0;
  text-align: right;
  list-style-type: none;
  *zoom: 1; }
  .navi-list li {
    display: inline-block;
    padding-left: 1em;
    font-family: "Josefin Sans", sans-serif; }
  .navi-list:before, .navi-list:after {
    display: table;
    content: " "; }
  .navi-list:after {
    clear: both; }

ul.tags-list {
  font-family: "Josefin Sans", sans-serif;
  display: inline;
  padding: 0; }
  ul.tags-list li {
    display: inline;
    margin-left: 0 !important; }
    ul.tags-list li:before {
      margin-right: 1ex;
      content: ",";
      color: #666; }
    ul.tags-list li:first-child:before {
      content: none; }

.doc-list a {
  border-style: none !important; }
.doc-list .mdate {
  font-family: "Josefin Sans", sans-serif; }
  .doc-list .mdate a {
    color: #e68 !important; }
  .doc-list .mdate:after {
    content: "\00bb";
    margin: 0 1ex 0 0.5ex; }
.doc-list .tags-list {
  font-family: "Josefin Sans", sans-serif;
  font-size: 80%;
  color: #666; }
  .doc-list .tags-list:before {
    content: "["; }
  .doc-list .tags-list:after {
    content: "]"; }

span.version {
  font-size: 80%;
  color: #666; }

span.date {
  font-family: "Josefin Sans", sans-serif; }

.changelog span.date:after {
  content: "-";
  color: #666;
  margin: 0 0.5em; }

.ptcm3-dlkey {
  color: #e68;
  font-weight: bold;
  font-family: "Josefin Sans", sans-serif; }
  .ptcm3-dlkey:before {
    content: "[ DLkey: ";
    color: #666;
    font-weight: normal;
    margin-left: 1em; }
  .ptcm3-dlkey:after {
    content: " ]";
    color: #666;
    font-weight: normal;
    margin-right: 1em; }

#page-header-wrap {
  padding: 0 3em;
  color: #333;
  background: #ececf0;
  border-top: solid 0.6em #e68; }

#page-header {
  margin: 0 auto;
  padding: 3em 0 3em 0;
  width: 100%;
  max-width: 1200px;
  *zoom: 1; }
  #page-header h1 {
    margin: 0;
    padding: 0;
    font-size: 150%;
    font-weight: normal;
    font-family: "Josefin Sans", sans-serif;
    float: left; }
  #page-header nav {
    float: right; }
  #page-header a:link, #page-header a:visited {
    color: #03c; }
  #page-header:before, #page-header:after {
    display: table;
    content: " "; }
  #page-header:after {
    clear: both; }

#page-main-wrap {
  padding: 0 3em;
  color: #333;
  background: #e8e8f0; }

#page-main {
  margin: 0 auto;
  padding: 3em 0;
  width: 100%;
  max-width: 1200px;
  border-top: 1px solid rgba(0, 0, 0, 0.1); }

#article-header {
  margin: 0 0 3em 0;
  padding-left: 1ex;
  border-left: 1ex solid #e68;
  border-radius: 0.3ex; }
  #article-header h1 {
    margin: 0;
    font-size: 1.5em;
    font-weight: normal;
    line-height: 1; }

#article-info {
  list-style-type: none;
  margin: 0;
  padding: 0; }
  #article-info li {
    margin-left: 1em;
    display: inline-block;
    color: #666;
    font-family: "Josefin Sans", sans-serif; }
    #article-info li:first-child {
      margin-left: 0; }
    #article-info li span {
      color: #e68;
      font-weight: bold; }
      #article-info li span:after {
        content: ": "; }

#article-main {
  line-height: 1.7; }
  #article-main h1 {
    margin: 1.5em 0 1.5em 0;
    font-size: 1.5em;
    font-weight: bold;
    line-height: 1; }
    #article-main h1:before {
      content: "";
      margin: 0 0 3em 0;
      width: 4ex;
      display: block;
      border-top: 1px solid rgba(0, 0, 0, 0.3); }
    #article-main h1:first-child:before {
      content: none; }
  #article-main h2 {
    margin-top: 1.5em;
    font-size: 1.2em;
    font-weight: bold;
    color: #666; }
  #article-main code {
    padding: 0 0.5ex;
    background: #ccd;
    font-family: monospace;
    border-radius: 0.3ex; }
  #article-main pre code {
    padding: 1ex;
    background: transparent; }
  #article-main pre {
    padding: 1ex;
    border-radius: 0.3ex;
    color: #dfd;
    background: #343; }
  #article-main a {
    border-bottom: 1px dashed rgba(0, 0, 0, 0.3); }
  #article-main > ul {
    padding-left: 0;
    margin-left: 0; }
    #article-main > ul li {
      list-style-type: none; }
      #article-main > ul li ul li:before {
        content: "\25b9"; }
    #article-main > ul li:before {
      content: "\25b8";
      color: #666;
      vertical-align: center;
      padding-right: 0.5em; }

#article-navi .navi-list {
  margin: 0;
  text-align: center; }
  #article-navi .navi-list:before {
    content: "";
    display: block;
    margin: 4em auto 2em auto;
    width: 20%;
    border-top: 1px solid rgba(0, 0, 0, 0.3); }
  #article-navi .navi-list li {
    padding: 0 0.5em; }

ul#option {
  padding: 0;
  margin: 0; }
  ul#option li {
    list-style-type: none; }
  ul#option li:before {
    display: none; }

#page-footer-wrap {
  color: #f0f0f0;
  background: #333;
  margin: 0;
  padding: 0 3em; }

#page-footer {
  margin: 0 auto;
  padding: 1.5em 0;
  width: 100%;
  max-width: 1200px; }
  #page-footer .navi-list {
    text-align: left; }
  #page-footer a:link, #page-footer a:visited {
    color: #f0f0f0; }
  #page-footer a:hover {
    background: #000; }