/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * rules for explorable lists like tracks, playlists, users
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#tracks {  }
table.track {
  width:727px;
  padding:10px;
  margin:2px 0 0;
  border:1px solid;
  border-color:#eee #e5e5e5 #e5e5e5 #eee;
  background: #fff;
  }

  table.track td {
	padding-top: 0;
    vertical-align:top;
    }
  table.track p { cursor:default; }

div.pane table.track {
  margin:0px 0px 5px 0px;
  padding-bottom:5px;
  border-bottom:1px solid #f1f1f1;
  }

/* rank
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
table.track td.rank {
  width:3.5em;
  text-align:right;
  font-weight:bold;
  padding-right:3px;
  }
  td.rank div.rank {
    color:#cc7c00;
    font-size:16px;
    padding:5px 2px 2px 0px; 
    background:#faf5eb url(/images/bg_rank.png) repeat-x;
    }
  .rank div.when {
    color:#888;
    font-size:11px;
    font-weight:normal;
    }
  .rank div.rise, .rank div.drop, .rank div.new, .rank div.hot {
    display:block;
    font-size:11px;
    margin:5px 0px;
    background:no-repeat right 1px;
    }
    .rank div.rise, .rank div.new { color:#249E0A; }
    .rank div.drop, .rank div.hot { color:#cc0000; }
    .rank div.rise, .rank div.drop { padding-right:8px; }
    .rank div.rise { background-image:url(/images/icons/rise.gif); }
    .rank div.drop { background-image:url(/images/icons/drop.gif); }

/* small tracks rank
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
div.inline.rank {
  width:2.5em;
  float:left;
  font-weight:bold;
  margin-right:7px;
  }
  div.inline.rank div.rank {
    color:#cc7c00;
    font-size:16px;
    background:#faf5eb url(/images/bg_rank.png) repeat-x;
    }
  div.inline.rank div {
    padding:0px;
    text-align:right;
    }
  div.inline.rank div.rise, div.inline.rank div.drop {
    padding-right:8px;
    }

/* image action links
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
td.image-actions {
  color:#999;
  text-align:center;
  }
  td.image-actions a {
    outline:none;
    height:14px;
    display:block;
    color:#0a759e;
    margin:0px 10px 5px 0px;
    border:1px solid #fff;
    }
    td.image-actions div:hover a, td.image-actions a:hover {
      color:#0d94cc;
      border-color:#daebf2;
      background-color:#e6f8ff;
      }

/* title and artist
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
div.title, div.artist {
  font-size:1.4em;
  padding:5px 0px 0px 2px;
  height:20px;
  line-height:20px;
  overflow:hidden;
  }
table.show div.title, div.artist {
  font-size:1.5em;
  font-weight:bold;
  }
  div.title.medium { font-size:1em; }
  div.title.user { padding-bottom:10px; }
    div.title span.profile {
      padding:1px 0px 0px 18px;
      background:no-repeat left center;
      }
      div.title span.artist.profile { background-image:url(/images/icons/artist.png); font-weight:bold; }
      div.title span.label.profile { background-image:url(/images/icons/label.png); }
      div.title span.media.profile { background-image:url(/images/icons/media.png); }
    table.track div.title span.country {
      margin-left:5px;
      padding:2px 7px 0px;
      border-left:1px solid #eee;
      }

div.artist.medium { font-size:0.9em; }
div.artist a {
  padding-right:5px;
  background-color:#fff;
  }
  div.artist span.country a {
    margin-top:-2px;
    padding-left:10px;
    border-left:1px solid #c8cad0;
    }

/* meta information
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
div.meta {
  overflow:hidden;
  padding:3px 0px;
  line-height:20px;
  }
  div.meta span {
    background:no-repeat 0px 1px;
    float:left;
    display:block;
    color:#888;
    margin-right:5px;
    padding:0px 7px 0px 2px;
    border-right:1px solid #e4e4e4;
    }
    div.meta span.city, div.meta span.duration, div.meta span.genres, div.meta span.intro { border-right:none; }
    div.meta span.intro {
      color:#888;
      margin-right:0px;
      }
    div.meta span.artist.profile, div.meta span.label.profile, div.meta span.media.profile { padding-left: 18px; }
      div.meta span.artist.profile { background-image:url(/images/icons/artist.png); }
      div.meta span.label.profile { background-image:url(/images/icons/label.png); }
      div.meta span.media.profile { background-image:url(/images/icons/media.png); }
      div.meta span.genres a {
        color:#888;
        font-size:10px;
        margin-right:5px;
        position:relative;
        padding:2px 2px 1px;
        border:1px solid #eee;
        background-color:#fcfcfc;
        }
        div.meta span.genres a:hover {
          color:#0d94cc;
          border-color:#daebf2;
          background-color:#e6f8ff;
          }

/* information and description
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
table.track div.info {
  padding:0px;
  background-color:#f1f1f1;
  border-top:1px solid #888;
  border-bottom:1px solid #ddd;
  }
  table.track div.info p.tags {
    padding-left:15px !important;
    background:url(/images/icons/tag.gif) no-repeat left top;
    }
  table.track div.info div.info-bar {
    color:#888;
    height:24px;
    background-color:#f1f1f1;
    }
    table.track div.info div.info-bar * { cursor:pointer; }
    table.track div.info div.info-bar p {
      margin:0px;
      height:14px;
      overflow:hidden;
      padding:6px 5px 0px;
      }
  table.track div.info div.description { padding:0px; }
    table.track div.info div.content {
      margin-bottom:5px;
      padding:7px 10px 5px 10px;
      background-color:#f8f8f8;
      border-top:1px solid #ddd;
      border-bottom:1px solid #ddd;
      }
    table.track div.info a.show {
      width:35px;
      height:24px;
      float:right;
      outline:none;
      display:block;
      border-left:1px solid #eee;
      background:url(/images/buttons/show.gif) no-repeat left top;
      }
      table.track div.info-bar:hover a.show, table.track div.info-bar a.show:hover { background-position:left bottom; border-bottom:none; }
      table.track div.info a.show.active { background:#f1f2f3 url(/images/buttons/show.gif) no-repeat left bottom; }
  table.track div.info div.info {
    font-size:11px;
    color:#888;
    padding-left:14px;
    margin-left:5px;
    background:url(/images/icons/upload.gif) no-repeat left 2px;
    border:0;
    }
    table.track div.info div.info a.comment {
      float:right;
      display:block;
      padding-right:10px;
      }
  div.info span.icon {
    float:left;
    display:block;
    margin-top:-2px;
    padding:2px 0px 2px 15px;
    background:no-repeat left top;
    }
    div.info span.icon a {
      padding:0px 5px;
      border-right:1px solid #e1e4eb;
      }
    div.info span.fair { background-image:url(/images/icons/fairtilizing.png); }
    div.info span.love { background-image:url(/images/icons/isfan.png); }

/* links
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
table.track div.links {
  padding:5px 0px;
  vertical-align:middle;
  font-size:11px;
  }
  div.links ul {
    float:left;
    height:20px;
    line-height:20px;
    overflow:hidden;
    }
    div.links ul li {
      float:left;
      height:16px;
      }
      div.links ul li input {
        overflow:hidden;
        vertical-align:middle;
        }
        div.links ul li input[type=checkbox] { margin-right:5px; }
    div.links ul li a {
      outline:none;
      color:#0a759e;
      position:relative;
      border:1px solid #fff;
      margin:2px 12px 0px 0px;
      padding:2px 2px 1px 18px;
      background:no-repeat left center;
      }
      div.links ul li a:hover {
        color:#0d94cc;
        border-color:#daebf2;
        background-color:#e6f8ff;
        }
      div.links ul li a.abuse     { background-image:url(/images/icons/abuse.gif); }
      div.links ul li a.comment   { background-image:url(/images/icons/comment.gif); }
      div.links ul li a.permalink { background-image:url(/images/icons/permalink.gif); }
      div.links ul li a.share     { background-image:url(/images/icons/share.gif); }
      div.links ul li a.external  { background-image:url(/images/icons/link.gif); }
      div.links ul li a.edit      { background-image:url(/images/icons/edit.gif); }
      div.links ul li a.download  {
        color:#fff;
        font-weight:bold;
        border-color:#086285;
        border-left-color:#0c88b8;
        border-top-color:#0c88b8;
        background-color:#0a759e;
        background-image:url(/images/icons/download.png);
        }
      div.links ul li a.download:hover { background-color:#0c99ce; }
      div.links ul li a.download.downloaded {
        background:#999;
        border-color:#888;
        padding-left:2px;
        }

/* status indicators
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.status a {
  outline:none;
  background:no-repeat left center;
  }
.status .error {
  color:#cc4d00;
  font-weight:bold;
  border:1px solid #ccbfb8;
  background-color:#ffefe6;
  padding:2px 2px 1px 18px;
  background-image:url(/images/icons/abuse.gif);
  }
.status .private {
  color:#fff;
  padding:2px 2px 1px 2px;
  text-transform:uppercase;
  background-color:#cc0000;
  border:1px solid #d90000;
  border-right-color:#b30000;
  border-bottom-color:#b30000;
  }
.status .public {
  color:#fff;
  padding:2px 2px 1px 2px;
  text-transform:uppercase;
  background-color:#249E0A;
  border:1px solid #29B80B;
  border-right-color:#1E8508;
  border-bottom-color:#1E8508;
  }

div.pane div.status {
  float:right;
  padding:7px 3px;
  font-size:11px;
  }

/* statistics and buttons
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
table.track td.stats {
  width:10em;
  font-size:11px;
  line-height:11px;
  }
  table.track td.stats div {
    clear:both;
    color:#aaa;
    height:30px;
    text-align:right;
    margin-bottom:2px;
    overflow:hidden;
    }
    table.track td.stats div span {
      width:64px;
      height:23px;
      float:right;
      display:block;
      font-size:11px;
      padding:5px 2px 0px 0px;
      border:1px solid #eee;
      }
      td.stats div span strong {
        color:#686868;
        display:block;
        }
      table.track td.stats div span img { margin:1px 2px 10px; }
   table.track td.stats div a.button {
      float:right;
      margin:0px 2px 0px 2px;
      background-color:#fff;
      }

div.track-frame {
  margin-top:10px;
  border:1px solid #ddd;
  }
  div.track-frame div.controls { border-bottom:0px; }

div.public_track_info { background-color:#F5EDCC; }
div.private_track_info { background-color:#f5cccc; }
  div.public_track_info p, div.private_track_info p {
    padding:5px;
    text-align:center;    
    }

   div.public_track_info textarea, div.private_track_info textarea {
      width:704px;
      padding:5px;
      margin:0px auto;
      overflow:hidden;
      line-height:1.4em;
      }

div.private_track_login {
  padding:10px 20px 20px;
  margin-bottom:-20px;
  background:url(/images/interface/bg_private.png) repeat-x left top;
  }
div.private_track_login div.private { margin:15px 0px; }
  div.private_track_login div.private h1 {
    color:#cc0000;
    margin-top:15px;
    }
  div.private_track_login div.inputs { overflow:hidden; }
    div.private_track_login div.inputs input { float:left; }
      div.private_track_login div.inputs input.password {
        font-size:18px;
        margin-right:5px;
        }
  div.private_track_login div.inputs label {
    display:block;
    font-size:14px;
    margin-bottom:10px;
    }
    div.private_track_login div.inputs label span.invalid { color:#cc0000; }