@import url('http://fonts.googleapis.com/css?family=Lato:300,400,700');
@import url('http://weloveiconfonts.com/api/?family=fontawesome');

@media screen {
  html, body, h2, h3, #content, #top {font-weight: 300;}

  html {
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical;
    -ms-overflow-y : scroll;
    -o-overflow-y : scroll;
  }

  body {
    background-image: url("img/bg.png");
    font: 16px Lato, sans-serif;
    background-color: #FFF;
    margin: 0 auto 0 auto;
    color: #333;
  }

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

    a:hover {text-decoration: underline;}

  p {
    margin: 10px 0 10px 0;
    padding: 0;
  }

  img {outline: none !important;border: none !important;}

  h2 {
    margin: 0;
    padding: 12px 10px 12px 10px;
    font-size: 16px;
    text-transform: uppercase;
    border-bottom: 1px solid #DDD;
    background-color: #F6F6F6;
  }

  h3 {
    background-image: url("img/open.png");
    background-repeat: no-repeat;
    background-position: 10px center;
    cursor: pointer;
    border-bottom: 1px solid #DDD;
    padding: 10px 10px 10px 35px;
    height: 20px;
    font-size: 16px;
    margin: 0;
  }

  #top, #content {
    background-color: #FFF;
    border: 1px solid #DDD;
    margin: 25px auto 0 auto;
    width: 760px;
    padding: 0;
    color: #666;
    -moz-box-shadow: 3px 3px 5px -3px #BBB;
    -webkit-box-shadow: 3px 3px 5px -3px #BBB;
    box-shadow: 3px 3px 5px -3px #BBB;
    overflow: hidden;
  }

  #top {text-align: center;}

  #top p {padding: 0 80px 0 80px;}

  #more {position: relative;}

  #more-toggle {
    color: #D14;
    cursor: pointer;
    display: inline-block;
    margin-bottom: 10px;
    background-image: url("img/open.png");
    background-repeat: no-repeat;
    background-position: 0 center;
    background-color: #FFF;
    text-indent: 20px;
    position: relative;
    width: 91px;
  }

  #more-toggle:hover {text-decoration: underline;}

  #more-content {display: none;padding-bottom: 8px;}

  #more-content p {
    padding: 0 20px 5px 20px;
    margin: 0 0 0 0;
  }

  #content {margin-bottom: 25px;}

  #nav {
    border-bottom: 1px solid #DDD;
    padding: 0 0 1px 10px;
    text-transform: none;
    position: relative;
    font-size: 14px;
    color: #D14;
    height: 17px;
    overflow: hidden;
  }

  #nav span {cursor: pointer;margin-right: 20px;}

  #toggle {
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 0px;
  }

  .item-content {
    padding: 0 10px 0 0;
    border-bottom: 1px solid #DDD;
    overflow: hidden;
    display: none;
    -webkit-box-shadow: inset 0 -10px 10px -10px #EAEAEA;
    -moz-box-shadow: inset 0 -10px 10px -10px #EAEAEA;
    box-shadow: inset 0 -10px 10px -10px #EAEAEA;
  }

  .item-content a {
    display: inline-block;
    margin-right: 15px;
    background-image: url("img/dl.png");
    background-repeat: no-repeat;
    background-position: 0 2px;
    text-indent: 20px;
    outline: none;
  }

  a.item-view {
    background-image: url("img/view.png");
    background-position: 0 1px;
    text-indent: 23px;
  }

  a.cover {
    width: 150px;
    height: 150px;
    padding: 10px;
    background-image: none;
    margin-right: 10px;
    border-right: 1px solid #DDD;
    text-indent: 0;
    float: left;
    outline: none;
  }

  .selected {
    background-image: url("img/close.png") !important;
    background-color: #F6F6F6;
  }

  .unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  .current {font-weight: bold;}

  .hidden {display: none;}
}