*
{
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
}
body 
{
  font-family: verdana, sans-serif;
  font-size: 11px;
  background: #ffeccb;
}
a:link, a:visited, a:visited 
{
  color: #1a5678;
  text-decoration: none;
}
a:hover
{
  text-decoration: underline;
}
#container 
{
  background: url('data:image/png;base64,\
    iVBORw0KGgoAAAANSUhEUgAAAxEAAAAQBAMAAACb/e9tAAAAGFBMVEUAAACYmJifn5/AwMDhzrHo\
    6Ojp6en////xDC8aAAAAa0lEQVR4XmNwcXFhD6UZCC8nDEZBEYuLi8NoTGABozExGhNpNAPp5YTB\
    KCgejYnRmBgFozGBF4zGxGhMQGOCTYlmQNmYMBgFhrCYYBhgMApYIDEx8GAUDI2YGI2JUTAaE6Mx\
    MQpGY2IUOAAAlH8etbVqgoYAAAAASUVORK5CYII=') 0px bottom no-repeat, url('data:image/png;base64,\
    iVBORw0KGgoAAAANSUhEUgAAAxEAAAAPBAMAAABpfV8jAAAAD1BMVEUAAACfn5/hzrHo6Oj///8e\
    r/KbAAAAPklEQVR4Xu3RQQkAIBQFMBGDyKugBQT7ZzLCP3nbKqwlGeubfWucnkwTJjBhAhMFE5gw\
    gYmSCUyYwETNhIkH9iuvtRL8R/cAAAAASUVORK5CYII=');
  width: 785px;
  margin: 8px auto 0px;
  position: relative;
  min-height: 480px;
}
header h1 a {
  display: block;
  width: 185px;
  height: 110px;
  position: absolute;
  left: 7px;
  top: 7px;
  color: transparent;
  line-height: 999px;
  overflow: hidden;
}
nav#topnav ul
{
  position: absolute;
  top: 53px;
  right: 8px;
  text-transform: lowercase;
}
nav#topnav li {
  display: inline;
  font-weight: bold;
  margin: 4px;
}
section#sidebar
{
  position: absolute;
  top: 118px;
  left: 11px;
  width: 170px;
}
section#sidebar #search 
{
  font-size: 10px;
  font-weight: bold;
}
section#sidebar #search input[type=text]
{
  border: 1px solid black;
  width: 135px;
}
section#sidebar #search input[type=submit]
{
  background: url('data:image/gif;base64,\
    R0lGODlhHAAUAPcAABpWeLXAx+jo6Obx+P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
    AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAHAAUAAAIngAFCBQI\
    oKDBgwgTFhwoAACBhxAjSpw4AMBAhxMzZhwQwGJDiANCihxJcmSAjh8flly58mRBkCxjinSJUaZN\
    jh1rjkQo8iBJmip7AghZkOjQikdDAiWw82hRpEZN5gwaFarVp0qnMhVa9SlWnC+3CjU4NmnWsCy/\
    slxK0qfNk1pvrnWZUm5JuB4d4oTLt69flAT3/h2Ml6HCw4cZCggIADs=');
  width: 28px;
  height: 20px;
  text-indent: 50px;
  color: transparent;
  overflow:hidden;
  border: 0px;
  cursor: pointer;
}

section#sidebar nav#sidenav 
{
  margin-top: 20px;
}
section#sidebar li {
  list-style: none;
  border-top: 1px solid black;
  width: 172px;
}
section#sidebar li:last-of-type {
  border-bottom: 1px solid black;
}
section#sidebar li a {
  display:block;
  font-weight: bold;
  padding-top: 5px;
  padding-bottom: 2px;
  text-transform: lowercase;
}
section#sidebar li a:hover {
  background: #c0c0c0;
  text-decoration: none;
}
section#content {
  margin-left: 195px;
  margin-top: -50px;
  width: 580px;
  padding-bottom: 20px;
}
section#content h2 {
  border-bottom: #8AABBC 1px solid;
  color: #13425f;
  font-size: 23px;
  font-weight: bold;
  height: 29px;
  /*width: 553px;*/
  padding-left: 25px;
  margin-bottom: 10px;
  text-transform: lowercase;
}
ul.filelist {
  width: 100%;
  margin: 0px auto 10px;
  list-style:none;
}
ul.filelist li {
  border-bottom: 1px solid #CBCBCB;
}
ul.filelist li.file a,
ul.filelist li.file > span {
  background: #E8E8E8;
  color: black;
  display: block;
  width: 100%;
  padding: 2px;
  position: relative;
}
ul.filelist li.file a .filename,
section#fileinfo h3 span,
section#preview .archive-contents ul li span {
  background: url('data:image/gif;base64,\
    R0lGODlhEAAQAKL/AP///zk5OWtra4yMjMDAwM7Ozufn5wAAACH5BAEAAAQALAAAAAAQABAAAANI\
    SLrcvuMVQGsxsc1KJ9ZcVxREpmxhoAbMNqKK0ALFOlSGvEx1IQgc3alDCAArQgJKZQjOKIGbc2dp\
    TodQKfIZ2u4Gv7CYtUgAADs=') no-repeat;
  display: inline-block;
  height: 16px;
  padding-left: 18px;
  word-break: break-word;
  width: calc(100% - 50px);
}
section#preview .archive-contents ul li span {
  width: calc(100% - 55px);
}
ul.filelist li.file.directory a .filename,
section#preview .archive-contents ul li.directory span {
  background: url('data:image/gif;base64,\
    R0lGODlhEAAQAKL/AP/erf/crsDAwLigfVdLOyslHQAAAAAAACH5BAEAAAIALAAAAAAQABAAAANJ\
    KGKm/s6UMZiy0IAyqxkBdgEkR1FBFZGseTYj23bwIt9frd1kRei8nuG3Cvp0hAHv+GAkZczMUAk4\
    FiCXqfWKXQy/nG6EERYkAAA7') no-repeat;
}
ul.filelist li.file.directory.parent a .filename {
  background: url('data:image/gif;base64,\
    R0lGODlhEAAQAKL/ACEhITExMVpaWoSEhIyMjMDAwAAAAAAAACH5BAEAAAUALAAAAAAQABAAAANG\
    WLrcDcBJYEyUi1aLi9AVIHTEZhBdUW4oabbDoMjKWo1ELAitEpiegDAwWghMg6HQYSIqHSDRsLew\
    nYRFx3EzyEoIYHAjAQA7') no-repeat;
}
ul.filelist li.file.archive a .filename,
section#fileinfo h3.archive span,
section#preview .archive-contents ul li.archive span {
  background: url('data:image/gif;base64,\
    R0lGODlhEAAQAKL/AP///2tra5ycnMDAwO9aWmsQEEoAAAAAACH5BAEAAAMALAAAAAAQABAAAANF\
    OLrcHi6CKWKb1K45JtReEBSVhSlCyXwYVX1KQXTtIBAFIxPtROC6Hw8jzC12gtYNeCQEegOZUWGA\
    QAUBg6Smioi+XUUCADs=') no-repeat;
}
ul.filelist li.file.image a .filename,
section#fileinfo h3.image span,
section#preview .archive-contents ul li.image span {
  background: url('data:image/gif;base64,\
    R0lGODlhEAAQAKL/AP///2tra4yMjMDAwO9aWoRjMe/WOQAAACH5BAEAAAMALAAAAAAQABAAAAND\
    OLrczuU8JwqRc5WI8yjGIXjDYWykIJyFA7xvGQIjA8eHBATNDZQwnm1AqwV7Ad/RllTueoWAVHAT\
    LpzLhUDK7bYWCQA7') no-repeat;
}
ul.filelist li.file.music-stream a .filename,
ul.filelist li.file.music-module a .filename,
section#fileinfo h3.music-stream span,
section#fileinfo h3.music-module span,
section#preview .archive-contents ul li.music-stream span,
section#preview .archive-contents ul li.music-module span {
  background: url('data:image/gif;base64,\
    R0lGODlhEAAQAKL/ADk5OWtra4yMjMDAwM7OzgAAAAAAAAAAACH5BAEAAAMALAAAAAAQABAAAAM8\
    OLpM/C8AAZcTIIOqsM6cFoxglUlfKKLqNBAlBBKCpw6j/dQZEeAxRQ7kCfqAG9oIUtwoCI6H8seR\
    RqsJADs=') no-repeat;
}
ul.filelist li.file.video a .filename,
section#fileinfo h3.video span,
section#preview .archive-contents ul li.video span {
  background: url('data:image/gif;base64,\
    R0lGODlhEAAQAKL/ADk5OWtra4yMjMDAwM7Ozufn5wAAAAAAACH5BAEAAAMALAAAAAAQABAAAANL\
    SLpM8y/ISYOAIwzAOxACgAHBB14bh2kf5IAiRLajCrEoBI9S4fupWCTYsYR4JtCjs9rkXkdZKbe0\
    DWm66LL3KwSbns5OVwqTSpgEADs=') no-repeat;
}
ul.filelist li.file.text a .filename,
section#fileinfo h3.text span,
section#preview .archive-contents ul li.text span {
  background: url('data:image/gif;base64,\
    R0lGODlhEAAQAKL/AP///zk5OWtra4yMjMDAwM7Ozufn5wAAACH5BAEAAAQALAAAAAAQABAAAANF\
    SLrcvuMVQGsxsc1KJ9ZcVxREpkxBmgJqwHhGbFCK8LJtZdgLLMcU3gnXWgkJvt/siCoab0oZgEks\
    Tm8hzrEk6Hq9rkUCADs=') no-repeat;
}
ul.filelist li.file.disk-image a .filename,
ul.filelist li.file.c64 a .filename,
section#fileinfo h3.disk-image span,
section#fileinfo h3.c64 span,
section#preview .archive-contents ul li.disk-image span,
section#preview .archive-contents ul li.c64 span {
  background: url('data:image/gif;base64,\
    R0lGODlhEAAQAKL/AP///zk5OWtra4yMjMDAwM7Ozufn5wAAACH5BAEAAAQALAAAAAAQABAAAANL\
    SLrcvuMVQGsxsc1KJ9ZcVxREpmxhoAbMRAhGIbhvC8CDcFOGYOsCYMW3mOQMtaHtFZspizeMkEI8\
    7YI7qu2Y1EJDnKoiFyyXWYsEADs=') no-repeat;
}
ul.filelist li.file a .filename {
  color: #1a5678;
}
ul.filelist li.file a .filesize {
  position: absolute;
  right: 2px;
  text-align: right;
}
.filename .path {
  color: #888;
}
ul.filelist li.file a:hover {
  background: white;
}
ul.filelist li.header {
  background: #CBCBCB url('data:image/gif;base64,\
    R0lGODlhCAAPALMAAMvLy////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
    AAAAACwAAAAACAAPAAAEFDDISSuoAVyqt+weuIkXaZ5oqq4RADs=') top left no-repeat;
  padding-left: 8px;
  font-weight: bold;
  word-break: break-word;
}
ul.filelist li:last-of-type {
  border-bottom: 0px;
}
ul.filelist li:last-of-type:after {
  border-top: 1px solid #CBCBCB;
  content:" ";
  height: 14px;
  display: block;
  background: #E8E8E8 url('data:image/gif;base64,\
    R0lGODlhCQAOALMAAOjo6P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
    AAAAACwAAAAACQAOAAAEFhDISau9OONwA6/eN4UiQIrnl3Jr60UAOw==') bottom right no-repeat;
}

#content section {
  background: #e8e8e8;
  margin-bottom: 10px;
}
#content section > h3
{
  background: #CBCBCB url('data:image/gif;base64,\
    R0lGODlhCAAPALMAAMvLy////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
    AAAAACwAAAAACAAPAAAEFDDISSuoAVyqt+weuIkXaZ5oqq4RADs=') top left no-repeat;
  padding-left: 8px;
  border-bottom: 1px solid white;
  font-size: 11px;
}
#content section p {
  padding: 5px;
}

#frontpage article {
  float: left;
  margin-left: 10px;
  width: 265px;
}
#frontpage-reminder {
  text-align: center;
  margin: 10px;
}
section#fileinfo h3 {
  word-break: break-word;
}

section#fileinfo dt {
  font-weight: bold;
  text-transform: lowercase;
}
section#fileinfo dd {
  margin-bottom: 10px;
}
section#fileinfo > div {
  display: table;
  width: 100%;
  padding: 5px;
}
section#fileinfo > div > * {
  display: table-cell;
  width: 50%;
}
section#fileinfo #download #mirrors #mainDownload {
  font-weight: bold;
  font-size: 120%;
}

section#preview audio,
section#preview video {
  width: 100%;
}
section#preview pre {
  padding: 5px;
  white-space: pre-wrap;
  word-wrap: break-word;
}
section#preview img#imgPreview {
  max-width: 500px;
}
section#preview .archive-contents {
  height: 110px;
  overflow-y: auto;
  resize: vertical;
}
section#preview .archive-contents ul {
  list-style: none;
}
section#preview .archive-contents ul li {
  padding: 3px 6px;
}
section#preview .archive-contents ul li span {
  font-weight: bold;
}
#pagination ul {
  text-align: center;
}
#pagination li {
  display: inline;
}
#pagination li a {
  display: inline-block;
  padding: 3px 5px;
  font-weight: bold;
}
#pagination li.current a {
  background: #1a5678;
  color: white;
}

/*
#pagination li:after {
  content: " | ";
}
#pagination li:last-of-type:after {
  content: "";
}
*/
#faq {
  padding: 0px 10px;
}
#faq dl {
  padding: 0 10px;
}
#faq dt {
  font-weight: bold;
  margin-top: 10px;
}
#faq dd {
  margin-left: 10px;
}
#faq dd p {
  margin-top: 10px;
}
#faq dd ol, #faq dd ul {
  padding-left: 20px;
}
#faq h3 {
  background: url('data:image/gif;base64,\
    R0lGODlhCAASALMAAOjo6P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
    AAAAACwAAAAACAASAAAEFzDIGQCVwNKsMZ9c5oVVaJ5oqq5s66oRADs=') top left no-repeat, url('data:image/gif;base64,\
    R0lGODlhCAASALMAAOjo6P///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA\
    AAAAACwAAAAACAASAAAEFhDISau9OOvNOw1WAH4iWUpiiqYlm0YAOw==') bottom right no-repeat #e8e8e8;
  padding-left: 10px;
  font-size: 17px;
  margin-top: 20px;
}
#faq .anchor {
  display: none;
  font-size: 80%;
}
#faq *:hover .anchor {
  display: inline-block;
  margin-left: 5px;
}
#faq pre {
    background: #eee none repeat scroll 0 0;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    margin-top: 10px;
    padding: 5px;
    overflow-x: auto;
}

header {
  background: url("header.png");
  height: 121px;
}
footer {
  text-align: center;
  font-size: 9px;
  margin-bottom: 20px;
}
#frontpage {
  display: inline-block;
}
#frontpage article li a {
  height: 19px;
}
#frontpage article .filename {
  display: inline-block;
  max-width: 210px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#screenshot img, #preview img {
  display: block;
  margin: 10px auto 0px;
}
#screenshot {
  padding-bottom: 10px;
}

#module-player small {
  display: block;
}
#module-seekbar {
  border: 1px solid black;
  display: inline-block;
  height: 20px;
  vertical-align: middle;
  width: calc(100% - 100px);
}
#module-seekbar-cursor {
  background: #1a5678;
  height: 100%;
}
#module-seekbar-cursor.loading {
  background: #b5c0c7;
}
#module-player {
  padding: 5px;
}
#module-player-loading {
  margin: 1px 5px;
  font-style: italic;
  display: block;
  position: absolute;
}
.breadcrumbs {
  text-align: right;
  list-style: none;
  font-size: 80%;
}
.breadcrumbs li {
  display: inline-block;
  margin-left: 3px;
}
.breadcrumbs li a.selected {
  font-weight: bold;
}
ul.filetree {
  padding-left: 15px;
}
ul.filetree li {
  position: relative;
  background: rgba(0,0,0,0.05);
  list-style: none;
}
ul.filetree li:nth-child(2n) {
  background: rgba(0,0,0,0.075);
}
ul.filetree li span.filename {
  padding: 3px;
  display: inline-block;
}
ul.filetree li span.filesize {
  position: absolute;
  right: 5px;
  top: 2px;
}
ul.filetree li:not(:last-of-type) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
section#content > ul.filetree {
  margin-right: 10px;  
}
@media screen and (max-width: 1000px)
{
  body {
    background: white;
    margin: 0;
    padding: 0;
  }
  #container
  {
    width: 100%;
    margin: 0;
    background: white;
    min-height: auto;
  }
  header {
    background: white;
    height: auto;
  }
  header h1 a {
    color: black;
    display: block;
    width: auto;
    height: auto;
    line-height: inherit;
    position: relative;
    top: auto;
    left: auto;
    text-align: center;
    margin: 10px;
  }
  nav#topnav ul {
    position: relative;
    top: auto;
    left: auto;
    text-align: center;
    margin: 20px;
  }
  section#sidebar {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
  }
  section#sidebar nav#sidenav {
    display: none;
  }
  section#sidebar #search {
    text-align: center;
  }
  section#content {
    margin: 0;
    padding: 5px;
    width: 100%;
  }
  section#content h2 {
    height: auto;
    padding-left: 0px;
    font-size: 15px;
    margin-top: 20px;
  }
  #content section {
  }
  ul.filelist {
  }
  footer {
    margin: 20px;
  }
  ul.filelist li.file.image a .filename
  {
    word-wrap: break-word;
  }
  #screenshot img, #preview img
  {
    max-width: calc(100vw - 20px);
  }
}
@media screen and (max-width: 600px)
{
  section#fileinfo > div > * {
    display: block;
  }
}