#category_wrapper {
  width: 28%;
  float: left;
}

#docs_wrapper {
  width: 70%;
  float: right;
  margin-right: 9px;
}

#doc-header {
  width: 100%;
  margin-bottom: 5px;
  border-bottom: 1px solid #ccc;
}

#doc-header th {
  background: rgb(240,240,240) !important;
}

#doc-outer {
  max-height: 100%;
  overflow: auto;
}

td {
  padding: 3px 0px;
  font-size: 0.9em;
  border-top: 1px solid #ccc;
}

td:hover {
    font-size: 0.9em;
    font-weight: bold;
}

.doc-link {
  width: 50px;
}

.doc-title {
  width: auto;
}

.doc-type {
  width: 120px;
  text-align: right;
}

#doc-type {
  text-align: right;
}

.doc-type-img {
  cursor: pointer;
  width: 25px;
  padding: 2px;
  margin-top: 2px;
}

label > input { /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}

label > input + img { /* IMAGE STYLES */
  cursor: pointer;
  border: 2px solid transparent;
}

label > input:checked + img { /* (RADIO CHECKED) IMAGE STYLES */
  border: 2px solid lightblue;
}

label > input {
  width: 30px;
  height: 30px;
  margin-bottom: 5px;
}

#screenshot {
  position:absolute;
  border:1px solid #ccc;
  background:#333;
  padding:5px;
  display:none;
  color:#fff;
}

#screenshot img {
  width: 250px;
}

/******************** 320X480 (IPHONE/ANDROID) *******************************/
@media screen and (max-width:480px) {
  #docs_wrapper {
    width: 100%;
  }

  .post-page-content table, .table-parent {
    overflow: auto;
  }

  #category_wrapper, #doc-header {
    margin: 0px !important;
    padding: 0px !important;
    line-height: 0px !important;
    display: none !important;
    border: 0px;
  }
}

/******************** 4k Retina Display ***************************************
@media screen and (min-width:2000px) {
  #category_wrapper ul, ol {
    font-size: 15pt;
  }

  td, td:hover {
    padding: 6px 0px;
    font-size: 14pt;
    border-top: 1px solid #ccc;
  }

  .doc-link {
    width: 100px;
  }

  .doc-link img {
    width: 32px !important;
  }

  #doc-header img {
    width: 40px !important;
  }

  #screenshot img {
    width: 500px;
  }
  */
}