
/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0;padding:0; }
table { border-collapse:separate;border-spacing:0; }
fieldset,img { border:0; }
address,caption,cite,code,dfn,em,strong,th,var { font-style:normal;font-weight:normal; }
caption,th { text-align:center; }
h1,h2,h3,h4,h5,h6 { font-weight:normal; margin: 0.5em 0; }
q:before,q:after { content:''; }
abbr,acronym { border:0; }

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

body {
   margin: 10px auto;
   line-height: 1.4;
   padding:0 10px;
   background: #111;
   color: #eee;
   font-family: monospace;
   font-size: 12px;
   overflow-wrap: break-word;
}

table {
   width: 100%;
}

li { margin-left: 1em; }

pre {
   white-space: pre-wrap;
}

a, a:link, a:active, a:visited {
   color: #cddc39;
   text-decoration: none;
}

a:hover {
   color: inherit;
   text-decoration: underline;
}

header a#home {
   color: inherit;
}

footer {
   clear: both;
   border-top: 1px solid #444;
   padding: 8px 0;
   margin: 8px 0;
   text-align: right;
   font-size: 80%;
}

.pager a, .pager span {
   display: inline-block;
   padding: 2px 8px;
   margin: 4px 0;
}

.pager a {
   background: #444;
}

.pager span {
   visibility: hidden;
}

.code-thumb {
   display: inline-block;
   height: 180px;
   width: 180px;
   overflow: hidden;
   border: 1px solid #444;
   padding: 4px;
   background: #222;
   font-size: 80%;
   position: relative;
}

.code-thumb img {
   background: #888;
   position: absolute;
}

.code-thumb .meta {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   top: 128px;
   padding:  5px 5px 3px;
   background: rgba(0,0,0,0.9);
}

.code-thumb .title {
   display: block;
   font-weight: bold;
   line-height: 14px;
   height: 28px;
   overflow: hidden;
   margin-bottom: 2px;
}

.code-thumb .user {
   display: block;
   line-height: 12px;
   font-size: 9px;
   max-height: 12px;
   overflow: hidden;
}

.user-info .avatar {
   float: left;
   margin: 0 8px 8px 0;
}

.user-info hr {
   clear: both;
}

.code-main .meta {
   width: 465px;
   margin: 1em 0;
   padding: 32px 1em 16px;
   background: #222;
   box-shadow: 0 0 8px #000, 0 24px 4px #333 inset;
}

/* code page */

.swf-col {
   width: 480px;
   padding: 0 8px;
   margin: 0 -8px;
   overflow-x: hidden;
   float: left;
}

.as3-col {
   margin-left: 480px;
   tab-size: 4;
   word-break: break-all;
}

.code-main .embed-code {
   margin-top: 1em;
   text-align: right;
}

.code-main .embed-code input {
   background: transparent;
   border: 1px dashed #444;
   background: #333;
   color: #888;
}

.code-main .description {
   margin-bottom: 8px;
   margin-top: -12px;
   font-size: 90%;
}

.code-main .mtime {
   float: right;
   color: #888;
   font-size: 90%;
}

/* fork trees */

.fork-tree, .fork-tree .forks {
   display: block;
   margin: 2px;
   box-shadow: 0 0 8px rgba(0,0,0,.25);
   background: rgba(255,255,255,0.025);
}

.fork-tree .node {
   padding: 3px 4px;
   box-shadow: 0 24px 4px rgba(255,255,255,0.1) inset;
}

.fork-tree .user {
   font-size: 90%;
}

.fork-tree .forks {
   margin: 0 2.5%;
}

.fork-tree .preview, .fork-tree .meta {
   display: inline-block;
   vertical-align: top;
}

.fork-tree .crop {
   overflow: hidden;
   height: 48px;
}

.fork-tree .preview {
   display: inline-block;
}

.fork-tree .preview img {
   position: relative;
   top: -40px;
}

a.preview:focus {
   box-shadow: 0 0 4px 3px #38b5dc;
}

/* embed */

body.embed {
   margin: 0;
   padding: 0;
   width: 465px;
}

body.embed.stopped .when-playing, body.embed:not(.stopped) .when-stopped {
   display: none;
}

body.embed img, body.embed object {
   position: absolute;
   top: 0;
}

body.embed #overlay {
   opacity: 0.65;
}

body.embed #overlay:hover {
   opacity: 0.5;
}

#embed-footer {
   margin-top: 465px;
   padding: 2px 4px;
}

/* comments */

.comment {
   font-size: 90%;
}

.comment .time {
   color: #888;
}

.comment .text {
   margin: 0.5em 0.5em 0.5em 1.5em;
}

/* tags */

.tags {
   text-align: justify;
   font-size: 90%;
}

a.tag {
   display: inline-block;
   background: #333;
   border: 1px solid #444;
   margin: 3px 0;
   padding: 1px 8px;
}

/* jsdifflib */

table.diff {
   table-layout: fixed;
   overflow-wrap: break-word;
   border-collapse: collapse;
   border: 1px solid #444;
   white-space: pre-wrap;
}
table.diff tbody th {
   border: 1px solid #444;
   color: #886;
   padding: 0 .4em;
   text-align: right;
   vertical-align: top;
   font-size: 90%;
}
table.diff thead {
   border-bottom: 1px solid #444;
   background: #333;
}
table.diff thead th {
   width: 40px;
}
table.diff thead th.texttitle {
   width: auto;
   text-align: left;
   padding: 1em 0;
}
table.diff tbody td {
   padding: 0 .4em;
   vertical-align: top;
   font-size: 90%;
   border-bottom: 1px solid #222;
}
table.diff .empty {
   background-color: #222;
}
table.diff .replace {
   background-color: #651;
}
table.diff .delete {
   background-color: #633;
}
table.diff .skip {
   background-color: #222;
   border: 1px dashed #666;
}
table.diff .insert {
   background-color: #363;
}
table.diff th.author {
   text-align: right;
}