/* 
    Name: Beatport Dark Theme
 Purpose: Change Beatport colours to light-on-dark, like it used to be
  Author: Ben Quextal <quextal@quextal.com>
     URL: http://userstyles.org/styles/50808 
 Version: 1.3
    Date: 2012/12/03
 MyStuff: http://quextal.com
*/

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain("www.beatport.com") {
  /* Where an rgb() color specification has been used, these are colours used
     elsewhere on Beatport that I've grabbed using Color Picker. Otherwise
     they're my choices */
  #body {
    background-color: black !important;
  }
  .bg-light-grey {
    background-color: #404040 !important;
  }
  .bg-white {
    background-color: #606060 !important;
  }
  .txt-grey-medium {
    color: #606060 !important;
  }
  .txt-grey a {
    color: #a0a0a0 !important;
  }

  div.playGroup ul, div.track-grid ul, .playRow, .pageBottom, li.unit-renderer-row {
    background-color: #303030 !important;
  } 
  li.unit-renderer-row h3 a, .playRow a {
    color: white !important;
  }

  .top-download-row,
  table.track-grid tr {
    border-color: #808080 !important;
  }
  .altRow-0, .alt-row {
    background-color: #404040 !important;
  }
  .altRow-1 {
    background-color: #383838 !important;
  }
  table.track-grid tr.track-grid-content td,
  table.track-grid tr.track-grid-content td a,
  h2, 
  h2 a, 
  h3,
  h5 {
    color: #eee !important;
  }
  /* Beatport have used <td> instead of <th> for header.
     I'll style both in case they fix it. */
  tr.track-grid-header td,
  tr.track-grid-header th {
    background-color: rgb(126,168,44) !important;
    color: #fef !important;
  }
  tr.track-grid-header td *,
  tr.track-grid-header th * {
    color: #fef !important;
  }
  .btn-context-nav {
    color: #eee !important;
  }
  .selected {
    color: rgb(164,224,71) !important;
  }
  /* itemRenderer classes (used for lists of charts, releases etc): 
       title: The title of the item
       list: List of artists or genres usually
       minor: Release date or other minor item
  */
  .itemRenderer-title {
    color: #eee !important;
  }
  .itemRenderer-list a {
    color: rgb(117,210,255) !important;
  }
  .itemRenderer-minor {
    color: #808080 !important;
  }
  .itemRenderer-minor a {
    color: #bbb !important;
  }
  /* View All / Genre Top 100 button */
  .viewAll-wrapper {
    background-color: #404040 !important;
  }
  .btn-view-all {
    color: #eee !important;
    background-color: #404040 !important;
  }
  /* Filter Menu */
  .filter-menu {
    background: #808080 !important;
  }
  .filter-header, 
  .filter-menu-filters {
    background: #404040 !important;
  }
  .filter-group {
    color: rgb(164,224,71) !important;
    background-color: #222 !important;
  }
  .filter-group .filter-title {
    color: #ccc !important;
  }
  .filter-group ul {
    background-color: #404040 !important;
  }
  .filter-group li a {
    color: #eee !important;
  }
  .pagination-header {
    background-color: #808080;
    color: black !important;
    font-size: 1.5em;
  }
  .slide-paginator,
  #cart-pricing-summary {
    background-color: rgb(126,168,44) !important;
    border: 1px solid white !important;
  }
  .cart-recommendations {
    background-color: black !important;
  }
  #coupon-form {
    background-color: black !important;
  }
  #coupon-form p {
    background-color: #202020 !important;
    border: 1px solid white !important;
    color: white !important;
  }
  /* Nasty, this has an inline style so has to be specified precisely here in order to override it */
  #coupon-form p label {
    color: white !important;
  }
  li.playRow div {
    background-color: #404040 !important;
  }
  .account-layout .left-column li a {
    color: white !important;
  }
  .account-layout .left-column li.selected a {
    color: black !important;
  }
}