style.css

* {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 100%;
  font-weight: inherit;
  font-style: inherit;
  text-decoration: none;
  list-style: none;
  }

html {
  font: 14px "Lucida Grande", "Lucida Sans Unicode", sans-serif;
  font-weight: normal;
  font-style: normal;
  background: url(images/bg.png) #67a7c7 repeat-x fixed;
  color: #fff;
  }

h1 { font-size:180%; }
h2 { font-size:140%;
  }
h1, h2, h3, h4 {
  font-weight: bold;
  margin-bottom: 20px;
  }
body {
  padding: 15px;
  margin: 0;
  }

h1 a {
  left: 10%;
  height: 47px;
  width: 0;
  padding-left: 275px;
  background: url(images/pto.png) no-repeat;
  overflow: hidden;
  display: block;
  }

a {
  color: #acd1e3;
  }

a:hover {
  text-decoration: underline;
  }

em {
  font-style: italic;
  }

#page {
  width: 90%;
  margin: 0 auto;
  position: relative;
  }

  #page a {
    color: #0489B7;
    }

section {
  display: block;
  color: black;
  background-color: white;
  padding: 1em;
  border-radius: 0.5em;
  margin-top: 1em;
  min-height: 300px;
  }

input[size="10"] {
  width: 12ex;
  }

p {
  margin: 0.5em 0 1em 0;
  }

form ul li {
  padding-left: 1em;
  list-style-type: disc;
  list-style-position: inside;
  }

span.ui-timepickr {
  background-color: #FCFDFD;
  border: 1px solid #A6C9E2;
  border-radius: 5px;
  }

button#filter {
  padding: 0.2em;
  }

#menu {
  position: absolute;
  right: 3em;
  top: 1em;
  }

  #menu li {
    display: inline;
    margin-left: 3em;
    }

    #menu li a {
      color: #ACD1E3;
    }

#views {
  background-color: rgba(102, 204, 255, 0.5);
  padding: 0.5em 0 0.5em 0;
  border-top-left-radius: 0.5em;
  border-top-right-radius: 0.5em;
  cursor: default;
  }

  #views li {
    padding-left: 0.5em;
    padding-right: 0.5em;
    }

    #views li.view {
      /*-moz-user-select: none;*/
      float: right;
      border-right: 1px solid black;
      margin-top: 3px;
      }

    #views li:first-child {
      border-right: none;
      }

      #views li a {
        text-decoration: none;
        color: black;
        cursor: pointer;
        padding: 0.25em;
        }

      #views li a:hover {
        background-color: #DDD;
        }

#loading {
  display: none;
  }

  #loading.loading {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 4px;
    height: 0;
    padding: 0;
    padding-top: 16px;
    width: 16px;
    overflow: hidden;
    background: url(images/throbber.png) no-repeat;
    }

#formats {
  background-color: #BDDCE6;
  color: #000;
  padding: 0.5em 0.5em 0 1em;
  /*-moz-user-select: none;*/
  cursor: default;
  }

  #formats ul {
    display: inline;
    }

    #formats ul li {
      display: inline;
      padding: 0.25em 1em 0.25em 1em;
      }

    #formats ul li.active {
      background-color: white;
      border-top-left-radius: 0.4em;
      border-top-right-radius: 0.4em;
      }

td {
  vertical-align: top;
  padding: 0.25em;
  }

tr td:first-child label {
  font-weight: bold;
  }

strong { font-weight:bold; }

#pto {
  padding-top: 0.25em;
  background-color: white;
  color: black
  }

  #pto tr td {
    padding: 0.3em;
    }

  #pto tbody tr:nth-child(even) {
    background: rgba(192, 192, 192, 0.7);
    }

  #pto th {
    background: rgba(128, 128, 128, 0.5) no-repeat right center;
    padding-right: 24px;
    text-align: center;
    }

    #pto th.header {
      cursor: pointer;
      background-image: url(images/sort.gif);
      }
    #pto th.headerSortDown { background-image: url(images/desc.gif); }
    #pto th.headerSortUp { background-image: url(images/asc.gif); }
    #pto th.headerSortDown, #pto th.headerSortUp {
      background-color: rgba(128, 128, 128, 1);
      }
    #pto th.action {
      padding: 0 24px 0 24px;
      }

  #pto td.action,
  #pto #no-match {
    text-align: center;
    }

div.clearer {clear: both; line-height: 0; height: 0;}

/* For Django form errors */
.errorlist li {
    color: red;
    list-style-type: none;
}

#content a.anchor {
    display:none;
}

@media only screen and (max-width: 1300px) {
  body { padding:5px }
  #page { width: 95% }
}

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
    body { padding:3px }
    #page { width: 96% }
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    body { padding:1px }
    #page { width: 98% }
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    body { padding:3px }
    #page { width: 100% }
    section { border-radius:0; padding:0.3em; }
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
    body { padding:1px }
    #page { width: 100% }
    section { border-radius:0; padding:0.1em; }
    .extra-info { margin:5px; }
}


.flash {
  position: absolute;
  right:20px;
  top:50px;
  background-color:#fff;
  border:1px solid #ccc;
  width:400px;
  float:right;
  padding:6px;
  font-size:80%;
  border-radius: 0.4em;
}

.flash p, .flash a.close {
  margin:0.5em;
}

.flash .close {
  float: right;
}

.flash .legend {
  border-radius: 3px;
  background-color: #3366CC;
  color: white;
  margin:2px;
  padding:2px;
}