/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * shared css rules
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
* {
  margin:0px;
  padding:0px;
  }

body {
  color:#333;
  background: #fff;
  font-size:62.5%;
  }
  body, select, input, textarea { font-family: Helvetica, Arial, Geneva, sans-serif; }

a {
  color:#3E758A;
  text-decoration:none;
  }
  a:hover { color:#2B3438; }
  a * { cursor:pointer; }
  a.link {
    padding-left:18px;
    background:url(/images/icons/link.png) no-repeat left center;
    }
  a.red { color:#c00; }
    a.red:hover {
      color:#fff;
      background-color:#c00;
      }
  a.small {
    font-size:11px;
    text-decoration:underline;
    }
  a.official {
    padding:2px;
    line-height:20px;
    text-decoration:underline;
    }
  
div.clear {
  clear:both;
  height:0px;
  }

img.avatar {
  float:left;
  width:7em;
  height:7em;
  border:1px solid #DDD;
  margin:0px 10px 0px 0px;
  }
img.flag {
  border:none;
  height:11px;
  margin-top:2px;
  }

input[type=text], input[type=password], textarea {
  color:#111;
  overflow:auto;
  font-size:13px;
  line-height:14px;
  padding:2px 4px;
  font-weight:normal;
  outline-color:#B8D8E6;
  border:1px solid #ccc;
  background:#fdfdfd no-repeat right center;
  }
  textarea { resize:none; }
  input[type=text]:hover, input[type=password]:hover, textarea:hover { background-color:#F8F8F8; }
  input[type=text]:focus, input[type=password]:focus, textarea:focus { background-color:#E6F8FF; border-color:#B8D8E6; }
  input[type=text].disabled, input[type=password].disabled, textarea.disabled { background-color:#E4E4E4; }
  input[type=text].loading, input[type=password].loading, textarea.loading, div.loading {
    background-repeat:no-repeat;
    background-position:right center;
    background-image:url(/images/spinner.gif);
    }
  input[type=submit], input.submit, a.submit {
    color:#fff;
    font-size:14px;
    cursor:pointer;
    font-weight:bold;
    padding:1px 3px 2px;
    border:3px solid #0A759E;
    background-color:#0A759E;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    }
    input[type=submit]:hover, input.submit:hover, a.submit:hover {
      border-color:#0C99CE;
      background-color:#0C99CE;
      }
  input.processing, input.processing:hover {
    border-color:#ccc !important;
    background-color:#ccc !important;
    }
  input.blurred { color:#999; }

p {
  font-size:1em;
  line-height:1.25em;
  }
  p.note {
    color:#999;
    margin-top:5px;
    }
  p.title {
    height:14px;
    overflow:hidden;
    }

div.note {
  width:90%;
  padding:5px;
  border:1px solid #eaead9;
  background-color:#fffef5;
  }

ul { list-style:none; }

h1, h2, h3, h4, h5, h6 { font-weight:normal; }
h4 {
  color:#0C99CE;
  font-size:9px;
  text-transform: uppercase;
  line-height:20px;
  }
  
h4 { color:#0c99ce; }
  h4.playlist { color:#DB5200; }
  h4.member { color:#6d6d6d; }
   
  h5 { font-size:14px; }
  h6 { 
  	font-size:12px;
  	font-size:9px;
  	text-transform: uppercase;
   }

.center { text-align:center; }
 
.country a { border-bottom:none; }
.title a, .artist a { font-weight:bold; }
.title a { color:#0A759E; }
.title a:hover { color:#0C99CE; }
.title.playlist a { color:#A83F00; }
.title.playlist a:hover { color:#DB5200; }
.user a, .artist a { font-weight:bold;}
.user a, .artist a, .label a, .media a { color:#181818}
.user a:hover, .artist a:hover, .label a:hover, .media a:hover { color:#6d6d6d; }

div.more-profile, div.less-profile {
  display:block;
  position:relative;
  }
  div.less-profile {
    height:10em;
    overflow:hidden;
    }
a.more-profile, a.less-profile {
  display:block;
  position:absolute;
  bottom:0px;
  right:0px;
  padding:1px 4px;
  color:#0A759E;
  background-color:#E6F8FF;
  border:1px solid #DAEBF2;
  outline:none;
  font-size:9px;
  }

strong.access {
  color:#fff;
  font-weight:normal;
  padding:2px 2px 0px 2px;
  text-transform:uppercase;
  }
  strong.access.public {
    background-color:#249E0A;
    border:1px solid #29B80B;
    border-right-color:#1E8508;
    border-bottom-color:#1E8508;
    }
  strong.access.private {
    background-color:#cc0000;
    border:1px solid #d90000;
    border-right-color:#b30000;
    border-bottom-color:#b30000;
    }
  strong.access.download {
    background-color:#0A759E;
    border:1px solid #0B88B8;
    border-right-color:#086285;
    border-bottom-color:#086285;
    }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * navigation
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#nav-main, #nav-filters, #nav-view, div.controls {
  cursor:default;
  font-size:12px;
  line-height:12px;
  font-weight:bold;
  text-transform:uppercase;
  }
  #nav-main a, #nav-filters a, #nav-view a { border:none; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * navigation top row
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#nav-main { height:28px; }

/* navigation top row tabs */
#nav-main-tabs li {
  float:left;
  margin-right:2px;
  text-align:center;
  }
  #nav-main-tabs li a {
    height:28px;
    outline:none;
    display:block;
    color:#A3A3A3;
    padding:0px 10px 0px 0px;
    background:url(/images/interface/tab_right.png) no-repeat right bottom;
    }
    #nav-main-tabs li a span {
      height:19px;
      display:block;
      padding:9px 0px 0px 10px;
      background:url(/images/interface/tab_left.png) no-repeat left bottom;
      }
      #nav-main-tabs li a:hover { background-position:right -28px; color: #777;  }
      #nav-main-tabs li a:hover span { background-position:left -28px; }
      #nav-main-tabs li a.active { background-position:right top !important; }
      #nav-main-tabs li a.active span { background-position:left top !important; color:#fff; }

/* navigation top row search */
#nav-main-search { float:right; }
  #nav-main-search input {
    color:#0A759E;
    font-size: 14px;
    width:150px;
    padding:4px 0px 3px 20px;
    background: #E6F8FF url(/images/icons/search.png) no-repeat 4px center;
    border-color: #BAC9CE;
    }
    #nav-main-search input:hover { background-color:#D9F4FF; }
    #nav-main-search input:focus { background-color:#D9F4FF; border-color:#A3C1CC; color: #0C99CE; }
    #search-submit {
      width:24px;
      height:24px;
      float:right;
      display:block;
      margin-left:5px;
      background:url(/images/buttons/ok.png) no-repeat left top;
      }
      #search-submit:hover { background-position:left bottom; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * navigation second row (main filters)
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#nav-filters {
  height:25px;
  padding:7px 5px 5px 10px;
  background:#000 url(/images/interface/bg_menu.png) repeat-x left top;
  }

/* navigation filter buttons */
#nav-filters-buttons { float:left; }
  #nav-filters-buttons li {
    float:left;
    text-align:center;
    margin-right:5px;
    }
    #nav-filters-buttons li a {
      color:#999;
      height:23px;
      outline:none;
      display:block;
      padding:0px 8px 0px 0px;
      background:url(/images/interface/subtab_right.png) no-repeat right top;
      }
    #nav-filters-buttons li a span {
      height:16px;
      display:block;
      padding:7px 0px 0px 8px;
      background:url(/images/interface/subtab_left.png) no-repeat left top;   
      }
      #nav-filters-buttons li a:hover { background-position:right -23px; color: #BDBDBD;}
      #nav-filters-buttons li a:hover span { background-position:left -23px; }
      #nav-filters-buttons li a.active { background-position:right bottom; }
      #nav-filters-buttons li a.active span { background-position:left bottom; color:#000; }
      #nav-filters-buttons li a.filter {
        width:23px;
        height:23px;
        padding:0px;
        }
        #nav-filters-buttons li a.filter.my { background-image:url(/images/interface/fairtilizing.png); }
        #nav-filters-buttons li a.filter.fanof { background-image:url(/images/interface/favorites.png); }

/* navigation filter inputs */
#nav-filters-inputs {
  float:right;
  margin:3px 0px 0px 5px;
  }
  #nav-filters-inputs li, #nav-view-inputs li {
    float:left;
    margin-left:6px;
    }
    #nav-filters-inputs li.delete {
      margin-left:0px;
      padding:3px 4px 4px 3px;
      background-color:#ccc;
      }
    #nav-filters-inputs li.delete a {
      width:12px;
      height:12px;
      border:none;
      display:block;
      background:url(/images/buttons/delete.png) no-repeat left top;
      }
      #nav-filters-inputs li.delete a:hover { background-position:left bottom; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * navigation third row (secondary filters)
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#nav-view {
  height:20px;
  padding:5px;
  overflow:hidden;
  line-height:25px;
  background:#BBB url(/images/interface/grad.png) repeat-x left top;
  border-top:1px solid #CCC;
  border-bottom:1px solid #AAA;
  }

/* navigation filter inputs */
#nav-view-inputs {
  color:#888;
  overflow:hidden;
  font-weight:normal;
  font-size:0.8em;
  margin:0px 0px 0px 4px;
  }

  /* filters */
  #nav-view-inputs li a.filter {
    width:20px;
    height:20px;
    display:block;
    background:no-repeat left top;
    }
    #nav-view-inputs li a.filter:hover   { background-position:left center; }
    #nav-view-inputs li a.filter.active  { background-position:left bottom; }
    #nav-view-inputs li a.filter.my      { background-image:url(/images/interface/fairtilizing.gif); }
    #nav-view-inputs li a.filter.friend  { background-image:url(/images/interface/friends.gif); }
    #nav-view-inputs li a.filter.fanof   { background-image:url(/images/interface/fanof.gif); }
    #nav-view-inputs li a.filter.isfan   { background-image:url(/images/interface/followers.gif); }
    #nav-view-inputs li a.filter.private { background-image:url(/images/interface/private_tracks.gif); }

  /* timeframe */
  #nav-view-inputs li a.timeframe {
    color:#aaa;
    height:14px;
    outline:none;
    display:block;
    margin-top:2px;
    font-size:11px;
    line-height:11px;
    padding:0px 5px 0px 0px;
    background:url(/images/interface/timeframe_right.png) no-repeat right top;
    }
    #nav-view-inputs li a.timeframe:hover { color:#000; }
    #nav-view-inputs li a.timeframe.active { background-position:right bottom; }
    #nav-view-inputs li a.timeframe span {
      height:11px;
      display:block;
      padding:3px 0px 0px 5px;
      background:url(/images/interface/timeframe_left.png) no-repeat left top;
      }
    #nav-view-inputs li a.timeframe.active span {
      color:#fff;
      background-position:left bottom;
      }

  /* alphabet box */
  #nav-view-inputs li div.select {
    color:#999;
    font-size:11px;
    line-height:11px;
    font-weight:bold;
    padding:4px 3px 2px;
    background-color:#fff;
    border:1px solid #e4e4e4;
    border-right-color:#fdfdfd;
    border-bottom-color:#fdfdfd;
    }
    #nav-view-inputs li div.select a, #nav-view-inputs li div.select span { padding:2px 1px; }
      #nav-view-inputs li div.select a { color:#999; }
      #nav-view-inputs li div.select span { color:#ddd; }
      #nav-view-inputs li div.select a.active, #nav-view-inputs li div.select a:hover { color:#000; }

  /* links */
  #nav-view-links {
    float:right;
    height:29px;
    margin:1px 3px 0px 0px;
    }
    #nav-view-links li { float:left; }
    #nav-view-links li a {
      width:20px;
      height:20px;
      outline:none;
      display:block;
      background:no-repeat center center;
      }
      #nav-view-links a span { display:none; }
      #nav-view-links li.rss a { background-image:url(/images/icons/subscribe.gif); }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * header links bar
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
div.header {
  float:right;
  height:22px;
  margin-bottom:7px;
  background:url(/images/interface/bg_profile_r.png) no-repeat right top;
  }
  div.header ul {
    float:left;
    padding-left:5px;
    background:url(/images/interface/bg_profile_l.png) no-repeat left top;
    }
    div.header ul li {
      float:left;
      height:16px;
      font-size:12px;
      line-height:12px;
      margin-right:6px;
      padding:6px 6px 0px 0px;
      border-right:1px solid #e9e9e9;
      }
      div.header ul li.avatar, div.header ul li.last {
        border:none;
        padding-right:0px;
        }
      div.header ul li.avatar {
        padding-top:2px;
        margin-right:2px;
        }
  div.header a {
    border:none;
    display:block;
    padding:0px 2px;
   	color:#3E758A;
    }
    div.header a:hover {
    	color:#2B3438;
      }
	  div.header ul li.inbox span {
        color:#c00;
        padding-left:3px;
        }
    div.header a img {
      width:16px;
      height:16px;
      border:1px solid #ddd;
      }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * footer links
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
div.footer {
  padding:10px;
  font-size:12px;
  }
  div.footer div {
    font-weight:normal;
    text-transform:uppercase;
    }
div.footer ul { float:right; }
  div.footer ul li {
    float:left;
    font-size:12px;
    margin-left:12px;
    }
    div.footer a { border:none; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * control divs in the header and footer
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
div.controls {
	clear:both;
  height:30px;
  position:relative;
  background-color:#f3f3f3;
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
  }
  div.controls div.left, div.controls div.right { position:absolute; }
    div.controls div.left { left:0px; }
    div.controls div.right { right:0px; }
  div.controls.private {
    border-top:none;
    border-bottom-color:#f5cccc;
    background-color:#fae5e5;
    }
    div.controls.public {
    border-top:none;
    border-bottom-color:#F5EDCC;
    background-color:#FAFAE5;
    }

    div.controls.private div.left,  div.controls.public div.left { padding:10px 0px 0px 7px; }
    div.controls.public a { font-weight: bold; }
    div.controls.private span, div.controls.public span {
      font-weight:normal;
      text-transform:none;
      padding-left:5px;
      }
  div.controls span.inbox {
    display:block;
    margin-top:10px;
    color:#c00;
    font-size:11px;
    font-weight:normal;
    }
    
    
    div.controls.private .status .error {
	background-color:#FF0000;
	border:1px solid #CC0000;
	color:#FFFFFF;
	font-weight:bold;
	text-transform: uppercase;
	}

  /* information */
  div.controls div.info {
    color:#222;
    margin:10px;
    font-size:12px;
    font-weight:normal;
    text-transform:none;
    }
    div.controls div.info span.blocktitle {
      color:#444;
      font-weight:bold;
      text-transform:uppercase;
      }
    div.controls div.info a { border:none; }
    div.controls div.info span, div.controls div.info strong {
      float:left;
      display:block;
      font-weight:normal;
      margin-right:5px;
      }
    div.controls div.info strong { color:#444; }
    div.controls div.info span.search {
      padding-right:5px;
      border-right:1px solid #ccc;
      }
    div.controls div.info a.delete {
      float:left;
      display:block;
      width:12px;
      height:12px;
      margin-top:-1px;
      background:url(/images/buttons/delete.png) no-repeat left top;
      }
      div.controls div.info a.delete:hover { background-position:left bottom; }

  /* actions */
  div.actions a {
    float:left;
    display:block;
    height:17px;
    font-size:11px;
    line-height:11px;
    padding:0px 6px 0px 0px;
    border:none;
    background:url(/images/interface/button_right.jpg) no-repeat right top;
    }
    div.actions a span {
      height:13px;
      display:block;
      color:#0a759e;
      padding:4px 0px 0px 6px;
      background:url(/images/interface/button_left.jpg) no-repeat left top;
      }
      div.actions a:hover { background-position:right bottom; }
      div.actions a:hover span { background-position:left bottom; }
      div.actions a.submit {
        height:10px;
        font-weight:bold;
        padding:1px 3px 0px;
        border:3px solid #0A759E;
        background:#0A759E;
        -moz-border-radius:3px;
        -webkit-border-radius:3px;
        }
        div.actions a.submit:hover {
          border-color:#0C99CE;
          background-color:#0C99CE;
          }
        div.actions a.submit span {
          color:#fff;
          height:10px;
          padding:0px;
          background:none;
          }
  div.controls div.actions a {
    margin:7px 5px;
    }

  div.controls div.warning {
    margin-top:6px;
    line-height:20px;
    padding-left:24px;
    background:#fff0b3 url(/images/icons/error.png) no-repeat left top;
    }


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * pagination inside the control div
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
div.pagination {
  color:#BBB;
  font-size:12px;
  padding:0px 5px;
  margin:10px auto;
  text-align:center;
  }
  div.pagination.charting { text-align:left; }
  div.pagination span, div.pagination a {
    outline:none;
    font-weight:bold;
    margin:0px 1px;
    padding:4px 3px 2px;
    border:1px solid;
    }
    div.pagination span {
      color:#cc7c00;
      border-color:#cc7c00;
      background-color:#fff5e6;
      }
    div.pagination a {
      color:#999;
      border-color:#d3d3d3;
      background-color:#fcfcfc;
      }
      div.pagination a:hover {
        color:#0d94cc;
        border-color:#35a0cc;
        background-color:#e6f8ff;
        }
      div.pagination a.prev, div.pagination a.next {
        border:0px;
        cursor:pointer;
        padding:3px 4px 2px;
        background:no-repeat center top;
        }
        div.pagination a.prev { background-image:url(/images/icons/prev.png); }
        div.pagination a.next { background-image:url(/images/icons/next.png); }
          div.pagination a.prev:hover, div.pagination a.next:hover { background-position:center -16px; }


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * container
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#container {
  width:728px;
  padding-left:0;
  position:relative;
  }
  #content {
    font-size:1.2em;
    overflow:hidden;
    }
    #content p { line-height:1.25em; }
    #content div.overlay {
      width:auto;
      font-size:1em;
      border:1px solid #e5e5e5;
      }

div.blockframe {
  border:1px solid #e5e5e5;
  margin-top:15px;
  background:#fff;
  }
  div.right.blockframe.features {
    float:right;
    width:280px;
    height:230px;
    padding:10px;
    position:relative;
    }
  div.blockframe p.links { margin-top:5px; }
  div.blockframe p.links * { vertical-align:middle; }
  div.blockframe div.controls { margin-top:-1px; }
  div.blockframe span.next {
    float:right;
    padding:5px;
    font-size:11px;
    }
  
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * content divs
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
div.help, div.content-right div.help {
  background-color:#FFFFF2;
  border:1px solid #E5E6CF;
  padding:10px;
  }

div.content-left { margin-right:210px; margin-top:20px; }
  div.content-left textarea { width:100%; }
div.content-right {
  float:right;
  width:190px;
  }
  div.content-right div {
    padding:0 8px 15px;
    margin-top:20px;
    border:1px solid #e5e5e5;
    background-color: #F8F8F8;
    }
  div.content-right span.title {
    color:#CC7C00;
    display:block;
    font-size:12px;
    font-weight:bold;
    line-height:12px;
    margin:15px 0 5px;
    padding:3px 0px 3px 18px;
    background:no-repeat left top;
    }
    div.content-right span.title.add { background-image:url(/images/icons/inplaylists.png); }
    div.content-right span.title.fanof { background-image:url(/images/icons/followers.png); }
    div.content-right span.title.isfan { background-image:url(/images/icons/isfan.png); }
    div.content-right span.title.friends { background-image:url(/images/icons/friends.png); }
    div.content-right span.title.playlist { padding-left:0; overflow: hidden; }

  div.content-right span.link {
    display:block;
    text-align:right;
    margin:5px 10px 0px 0px;
    }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * buttons
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
a.button {
  width:30px;
  height:30px;
  border:none;
  outline:none;
  display:block;
  margin-right:2px;
  background:no-repeat left top;
  }
  .small a.button   { width:16px; height:16px; }
  .medium a.button  { width:24px; height:24px; }
  .huge a.button    { width:50px; height:50px; }
  a.button:hover    { background-position:left bottom; }
  a.button.cantadd, a.button.cantplay, a.button.cantvote, a.button.cantshare { cursor:default; }

  /* large buttons */
  a.button.add       { background-image:url(/images/buttons/large/add.png); }
  a.button.added     { background-image:url(/images/buttons/large/added.png); }
  a.button.play      { background-image:url(/images/buttons/large/play.png); }
  a.button.pause     { background-image:url(/images/buttons/large/pause.png); }
  a.button.paused    { background-image:url(/images/buttons/large/paused.png); }
  a.button.vote      { background-image:url(/images/buttons/large/vote.png); }
  a.button.fanof     { background-image:url(/images/buttons/large/fanof.png); }
  a.button.isfan     { background-image:url(/images/buttons/large/isfan.png); }
  a.button.friend    { background-image:url(/images/buttons/large/friend.png); }
  a.button.share     { background-image:url(/images/buttons/large/share.png); }
  a.button.loading   { background-image:url(/images/buttons/large/spinner.gif); }
  a.button.cantadd   { background-image:url(/images/buttons/large/cantadd.png); }
  a.button.cantplay  { background-image:url(/images/buttons/large/cantplay.png); }
  a.button.cantvote  { background-image:url(/images/buttons/large/cantvote.png); }
  a.button.cantshare { background-image:url(/images/buttons/large/cantshare.png); }

  /* medium buttons */
  .medium a.button.add       { background-image:url(/images/buttons/medium/add.png); }
  .medium a.button.added     { background-image:url(/images/buttons/medium/added.png); }
  .medium a.button.play      { background-image:url(/images/buttons/medium/play.png); }
  .medium a.button.pause     { background-image:url(/images/buttons/medium/pause.png); }
  .medium a.button.paused    { background-image:url(/images/buttons/medium/paused.png); }
  .medium a.button.vote      { background-image:url(/images/buttons/medium/vote.png); }
  .medium a.button.fanof     { background-image:url(/images/buttons/medium/fanof.png); }
  .medium a.button.isfan     { background-image:url(/images/buttons/medium/isfan.png); }
  .medium a.button.friend    { background-image:url(/images/buttons/medium/friend.png); }
  .medium a.button.share     { background-image:url(/images/buttons/medium/share.png); }
  .medium a.button.loading   { background-image:url(/images/buttons/medium/spinner.gif); }
  .medium a.button.cantadd   { background-image:url(/images/buttons/medium/cantadd.png); }
  .medium a.button.cantplay  { background-image:url(/images/buttons/medium/cantplay.png); }
  .medium a.button.cantvote  { background-image:url(/images/buttons/medium/cantvote.png); }
  .medium a.button.cantshare { background-image:url(/images/buttons/medium/cantshare.png); }

  /* small buttons */
  .small a.button.add       { background-image:url(/images/buttons/small/add.png); }
  .small a.button.added     { background-image:url(/images/buttons/small/added.png); }
  .small a.button.play      { background-image:url(/images/buttons/small/play.png); }
  .small a.button.pause     { background-image:url(/images/buttons/small/pause.png); }
  .small a.button.paused    { background-image:url(/images/buttons/small/paused.png); }
  .small a.button.vote      { background-image:url(/images/buttons/small/vote.png); }
  .small a.button.fanof     { background-image:url(/images/buttons/small/fanof.png); }
  .small a.button.isfan     { background-image:url(/images/buttons/small/isfan.png); }
  .small a.button.friend    { background-image:url(/images/buttons/small/friend.png); }
  .small a.button.share     { background-image:url(/images/buttons/small/share.png); }
  .small a.button.loading   { background-image:url(/images/buttons/small/spinner.gif); }
  .small a.button.cantadd   { background-image:url(/images/buttons/small/cantadd.png); }
  .small a.button.cantplay  { background-image:url(/images/buttons/small/cantplay.png); }
  .small a.button.cantvote  { background-image:url(/images/buttons/small/cantvote.png); }
  .small a.button.cantshare { background-image:url(/images/buttons/small/cantshare.png); }

  /* huge buttons */
  .huge a.button.add       { background-image:url(/images/buttons/huge/add.png); }
  .huge a.button.added     { background-image:url(/images/buttons/huge/added.png); }
  .huge a.button.play      { background-image:url(/images/buttons/huge/play.png); }
  .huge a.button.pause     { background-image:url(/images/buttons/huge/pause.png); }
  .huge a.button.paused    { background-image:url(/images/buttons/huge/paused.png); }
  .huge a.button.vote      { background-image:url(/images/buttons/huge/vote.png); }
  .huge a.button.fanof     { background-image:url(/images/buttons/huge/fanof.png); }
  .huge a.button.isfan     { background-image:url(/images/buttons/huge/isfan.png); }
  .huge a.button.friend    { background-image:url(/images/buttons/huge/friend.png); }
  .huge a.button.share     { background-image:url(/images/buttons/huge/share.png); }
  .huge a.button.loading   { background-image:url(/images/buttons/huge/spinner.gif); }
  .huge a.button.cantadd   { background-image:url(/images/buttons/huge/cantadd.png); }
  .huge a.button.cantplay  { background-image:url(/images/buttons/huge/cantplay.png); }
  .huge a.button.cantvote  { background-image:url(/images/buttons/huge/cantvote.png); }
  .huge a.button.cantshare { background-image:url(/images/buttons/huge/cantshare.png); }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * album art 
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.image { padding-right:10px; }

.image,        .image a        { width:100px; height:100px; }
.image.tiny,   .image.tiny a   { width:32px;  height:32px;  }
.image.small,  .image.small a  { width:44px;  height:44px;  }
.image.medium, .image.medium a { width:66px;  height:66px;  }
.image.large,  .image.large a  { width:130px; height:130px; }

.image img        { width:90px;  height:90px; border:5px solid #ddd; }
.image.tiny img   { width:30px;  height:30px; border-width:1px; }
.image.small img  { width:40px;  height:40px; border-width:2px; }
.image.medium img { width:60px;  height:60px; border-width:3px; }
.image.large img  { width:120px; height:120px; }

.image a {
  border:none;
  display:block;
  background-color:transparent;
  }
  .image a:hover img { border-color:#c7c7c7; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* shadowed container
* * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
table.shadow { width:100%; }
  table.shadow div.overlay { margin:-30px 0px; }
  table.shadow td {
    background-repeat:no-repeat;
    background-position:left top;
    }
  
  td.c0, td.c1, td.c3, td.c4 { width:30px !important; }
  td.r0, td.r1, td.r3, td.r4 { height:30px !important; }
  
  td.c2 { background-repeat:repeat-x !important; }
  td.r2 { background-repeat:repeat-y !important; }
  
  td.r2.c0 { background-image:url(/images/shadows/shadow_l.png); }
  td.r2.c4 { background-image:url(/images/shadows/shadow_r.png); }
  td.r0.c2 { background-image:url(/images/shadows/shadow_t.png); background-position:center top !important; }
  td.r4.c2 { background-image:url(/images/shadows/shadow_b.png); background-position:center bottom !important; }
  
  td.r0.c0, td.r0.c1, td.r1.c0 { background-image:url(/images/shadows/shadow_tl.png); }
  td.r0.c3, td.r0.c4, td.r1.c4 { background-image:url(/images/shadows/shadow_tr.png); }
  td.r3.c0, td.r4.c0, td.r4.c1 { background-image:url(/images/shadows/shadow_bl.png); }
  td.r3.c4, td.r4.c3, td.r4.c4 { background-image:url(/images/shadows/shadow_br.png); }
  
  td.r0.c1, td.r0.c4, td.r3.c4 { background-position:-30px top !important; }
  td.r1.c4, td.r4.c1, td.r4.c4 { background-position:-30px bottom !important; }
  td.r1.c0, td.r4.c0, td.r4.c3 { background-position:left bottom !important; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * overlay div
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#overlays {
  top:80px;
  left:5px;
  width:100%;
  padding:0px;
  font-size:1.2em;
  position:absolute;
  }
  #overlays div.controls { border-top:none; }
  #overlays.signin {
    width:70%;
    margin-left:15%;
    }
    #overlays.signin fieldset {
      width:auto;
      margin:10px 15px;
      }
    #overlays.signin legend {
      color:#444;
      font-size:14px;
      }

div.overlay {
  width:100%;
  position:relative;
  background-color:#fff;
  border:1px solid #aaa;
  }
  div.overlay div.info {
    margin:20px 20px 10px;
    overflow:hidden;
    }
    div.overlay div.controls div.info { margin:10px; }
    div.overlay div.info p {
      color:#999;
      margin-top:10px;
      }
    div.overlay div.info img {
      width:34px;
      height:34px;
      float:left;
      margin-right:5px;
      }
      div.overlay div.info div.meta { overflow:hidden; }
  div.overlay div.tab-container { margin-top:20px; }
    div.overlay h1, div.overlay h2 {
      color:#6B6B6B;
      font-weight: bold;
      }
    div.overlay h3, div.overlay h4 {
      color:#181818;
      display:block;
      }
      div.overlay h1 { font-size:22px; }
      div.overlay h2 { font-size:16px; }
      div.overlay h3 { font-size:14px; }
      div.overlay h4 { font-size:12px; }
      div.overlay h2 span { color:#999; }

div.overlay ul.playlists a.button { float:right; }
div.overlay ul.playlists li, div.overlay ul.groups li {
  overflow:hidden;
  margin-bottom:2px;
  }
  div.overlay ul.groups li { line-height:20px; }
  div.overlay ul.playlists li { line-height:24px; }

div.overlay-links {
  overflow:hidden;
  padding:10px;
  }
  div.overlay-links a { margin-right:10px; }
    div.overlay-links input {
      float:right;
      font-weight:bold;
      }
div.overlay-delete {
  overflow:hidden;
  padding:10px;
  background:#eee;
  border-top:1px solid #ddd;
  border-bottom:1px solid #ddd;
  }
  div.overlay-delete p {
   background:url(/images/icons/delete.png) no-repeat top left;
   padding-left:17px;
   }
  div.overlay-delete a {
   color:#cc0000;
    }
    div.overlay-delete a:hover {
     color:#ff0000;
      }
div.mask {
  width:100%;
  position:absolute;
  background-color:#fff;
  }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * tabs
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
ul.tabs {
  height:25px;
  font-size:11px;
  line-height:11px;
  font-weight:bold;
  padding-left:10px;
  margin-bottom:-1px;
  text-transform:uppercase;
  }
  ul.tabs li {
    float:left;
    margin-right:3px;
    position:relative;
    }
    ul.tabs li a {
      color:#999;
      height:16px;
      outline:none;
      display:block;
      padding:7px 7px 0px;
      border:1px solid #e5e5e5;
      background-color:#f6f6f6;
      text-decoration:none;
      }
      ul.tabs li a.icon {
        padding-left:22px;
        background:#f6f6f6 no-repeat 4px center;
        }
      ul.tabs li a:hover, ul.tabs li a.active { background-color:#fff; }
      ul.tabs li a.active {
        color:#222;
        border-bottom-color:#fff;
        }
      ul.tabs li a.fair { background-image:url(/images/icons/fairtilizing.png); }
      ul.tabs li a.love { background-image:url(/images/icons/isfan.png); }
      ul.tabs li a.comment { background-image:url(/images/icons/comment.gif); }
      
      
       div.blocktitle { font-size: 12px; font-weight: bold; padding: 10px 10px 5px; background:#F3F3F3;
  text-transform: uppercase;
  }


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * tab panes
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
div.tab-panes { border-top:1px solid #e5e5e5; }
  div.pane {
    overflow:hidden;
    padding:10px 20px;
    background:#fff;
    border: 1px solid #e5e5e5;
    border-top: 0;
    }
    div.pane div.left, div.pane div.right { width:46%; }
      div.pane div.left { float:left; }
        div.pane div.left.inbox { width:77%; }
        div.pane div.left.groups  {
          width:30%;
          line-height:1.4em;
          }
      div.pane div.right { margin-left:50%; }
        div.pane div.right.inbox {
          width:20%;
          margin-left:80%;
          }
        div.pane div.right.groups {
          width:66%;
          margin-left:34%;
          }
    div.pane span.link, div.pane span.more {
      float:right;
      margin-right:5px;
      }
    div.pane span.title, div.pane span.subtitle {
      color:#444;
      display:block;
      font-weight:bold;
      margin-bottom:10px;
      }
    div.pane span.title { text-transform:uppercase; }
    div.pane div.guide {
      padding:15px;
      background-color:#E4E4E4;
      }
      div.pane div.guide ul {
        color:#666;
        list-style:disc;
        margin-left:10px;
        }
        div.pane div.guide ul li {
          font-size:1em;
          line-height:1.2em;
          margin-bottom:0.6em;
          }
    div.pane a.delete {
      float:right;
      border:none;
      display:block;
      width:12px;
      height:12px;
      margin-right:5px;
      background:url(/images/buttons/delete.png) no-repeat left top;
      }

div.pane.admin ul { list-style:normal; }
  div.pane.admin ul li {
    display:block;
    float:left;
    width:48%;
    font-size:16px;
    line-height:20px;
    }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * inbox styles
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
div.inbox table.list { margin:0px 0px 5px 0px; }
  div.inbox table.list td.image {
    width:50px;
    padding-right:0px;
    }
  div.inbox table.new td { background-color:#f8f8f8; }
  div.inbox table.new td.new {
    width:25px;
    color:#2ECE0C;
    font-size:11px;
    }
  div.inbox table.list td.delete {
    width:15px;
    padding-left:0px;
    }
div.inbox ul.list {
  margin:10px 0px 0px;
  border:1px solid #eee;
  background-color:#F8F8F8;
  }
  div.pane div.inbox ul.list li { border:none; }
div.inbox ul.list li div {
  text-align:left;
  line-height:15px;
  }
  div.inbox span.date {
    color:#999;
    float:right;
    font-size:11px;
    margin-top:2px;
    }
  div.inbox span.error {
    color: #CC0000;
    font-weight: bold;
    }
  div.inbox span.news {
    display:block;
    position:relative;
    margin:2px 12px 0px 0px;
    padding:2px 2px 1px 18px;
    background:no-repeat left center;
    }
    div.inbox span.news.comment  { background-image:url(/images/icons/comment.gif); }
    div.inbox span.news.private  { background-image:url(/images/icons/private.png); }
    div.inbox span.news.track    { background-image:url(/images/icons/fairtilizing.png); }
    div.inbox span.news.playlist { background-image:url(/images/icons/fairtilizing.png); }
    div.inbox span.news.friend   { background-image:url(/images/icons/friends.png); }
    div.inbox span.news.follower { background-image:url(/images/icons/followers.png); }
    div.inbox span.news.error    { background-image:url(/images/icons/error.png); }

  div.inbox ul.categories li a {
    border:none;
    outline:none;
    display:block;
    font-size:14px;
    font-weight:bold;
    padding:4px 2px 2px 20px;
    background:no-repeat left center;
    }
    div.inbox ul.categories li a.selected {
      color:#222;
      background-image: url(/images/icons/tick.png);
      }
      
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * form styles
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
fieldset {
  width:100%;
  padding:5px;
  margin:0px 0px 15px;
  border:1px solid #EDEDED;
  }
  legend {
    color:#CC7C00;
    font-size:1.4em;
    margin:10px 5px 0;
    padding:0px 5px;
    }
    legend.strong {
      color:#222;
      font-size:16px;
      font-weight:bold;
      }

table.form { width:100%; }
  table.form td, td.form {
    cursor:default;
    vertical-align:top;
    padding:10px 0px 5px 10px;
    }
    table.form td.submitbutton { padding:0px 20px 50px; }
      table.form td.submitbutton p { margin-top:10px; }
  table.stats td {
    padding:2px 0px 2px 10px;
    }
  table.form label, td.form label {
    color:#333;
    display:block;
    cursor:pointer;
    font-weight:bold;
    margin-bottom:2px;
    }
    td.form a.label {
      font-size:14px;
      font-weight:bold;
      margin-bottom:2px;
      }
    table.form td span, td.form span {
      margin-right:5px;
      vertical-align:middle;
      }
      table.form td div.choices * {
        margin-right:5px;
        vertical-align:middle;
        }
        tr.error * { color:#CC0000 !important; }
      table.form td div.choices label, table.form td.choice label {
        display:inline;
        font-weight:normal;
        }
        table.form td.choice label { margin-left:5px; }
    table.form label span, td.form label span {
      color:#999;
      font-size:11px;
      font-weight:normal;
      }
      td.form label span {
        display:block;
        margin-top:5px;
        }
      table.form label span { margin-left:10px; }
      table.form label span.cancel { cursor:pointer; }
    table.form input { vertical-align:middle; }
    table.form input[type=text], table.form input[type=password], table.form textarea { width:90%; }

  table.form div.private {
    overflow:hidden;
    padding:10px;
    margin-top:10px;
    border:3px solid #e57f7f;
    background-color:#fbeded;
    }
    table.form div.private a.manage {
      display:block;
      margin:10px 0px 15px;
      }
    table.form div.private ul.selection li a { border-color:#fbeded; }
      table.form div.password {
        padding:2px 7px 5px;
        border:1px solid #e57f7f;
        background-color:#fdf6f6;
        }
        table.form div.password input { border-color:#e57f7f; }
        table.form div.password span {
          color:#999;
          display:block;
          margin:5px 0px;
          }

  table.permalink p { margin-bottom:10px; }
  table.permalink input {
    padding:4px 4px 2px;
    font-size:24px;
    line-height:24px;
    }

  .fieldWithErrors {
    color:#CC0000;
    display:inline;
    }
    .fieldWithErrors input, .fieldWithErrors textarea, .fieldWithErrors img, input.error {
      border-color:#E6B8B8 !important;
      background-color:#FFE6E6 !important;
      }
    .fieldWithErrors span {
      color:#CC0000;
      display:block;
      margin:5px 0px 0px;
      }

div.loading, td.loading { background:url(/images/spinner.gif) no-repeat; }
  div.loading { background-position:center center; }
  td.loading { background-position:58px 58px; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * upload status container
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.uploader p { padding:5px 0px; }
  .uploader p.progress {
    width:250px;
    display:block;
    margin:0px auto;
    }
  .uploader p.input {
    text-align:center;
    margin-bottom:5px;
    padding-bottom:0px;
    }
    .uploader p.input input { padding:2px 10px; width:48%; }
.uploader div.center { margin:5px; }
.uploader div.center img {
  border:1px solid transparent;
  border: 5px solid #F1F1F1;
  width: 120px;
  height: 120px;
  }
.uploader div.container {
  height:150px;
  position:relative;
  }
.uploader img.progress {
  margin:10px 0px 0px;
  background:#fff url(/images/uploader/progress.gif) no-repeat +50% 0;
  }
  .uploader span.progress-text {
    font-weight:bold;
    float:right;
    }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * upload file list
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
ul.files {
  width:250px;
  margin:0px auto 5px;
  font-size:11px;
  overflow:auto;
  list-style:none;
  clear:both;
  }
  ul.files li.file {
    height:30px;
    padding:10px 0px;
    border-bottom:1px solid #eee;
    background:url(/images/uploader/file.png) no-repeat 0px 4px;
    }
    ul.files li.file.uploading {
      background-color:#d9dde9;
      background-image:url(/images/uploader/uploading.png);
      }
    ul.files li.file.success { background-image:url(/images/uploader/success.png); }
    ul.files li.file.failed { background-image:url(/images/uploader/failed.png); }
    ul.files li.file .file-remove { display:none; }
    ul.files li.file .file-name, ul.files li.file .file-info {
      display:block;
      margin-left:36px;
      }
    ul.files li.file .file-size {
      float:right;
      margin-right:3px;
      }
    ul.files li.file .file-name {
      height:11px;
      line-height:11px;
      overflow:hidden;
      }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * selectable lists
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
ul.selection {
  display:block;
  overflow:hidden;
  line-height:20px;
  }
  ul.selection li {
    float:left;
    display:block;
    }
    ul.selection li a {
      display:block;
      height:20px;
      color:#0A759E;
      padding:1px 2px;
      margin-right:8px;
      border:1px solid #fff;
      text-decoration:none;
      }
      ul.selection li a:hover {
        border-color:#B8D8E6;
        background-color:#E6F8FF;
        }
      ul.selection li a.selected {
        color:#fff;
        background-color:#0A759E;
        }
      ul.selection li a span {
        color:#999;
        font-size:11px;
        }
        ul.selection li a.selected span { color:#E4E4E4; }
  ul.block.selection li {
    float:none;
    display:block;
    margin-bottom:2px;
    }
    ul.block.selection li a {
      display:block;
      font-weight:bold;
      padding-left:5px;
      }
      ul.block.selection li a span {
        float:right;
        font-weight:normal;
        }

  div.selection-links { margin-bottom:6px; }
    div.selection-links a { padding:0px 3px; }
    
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * tabular lists (comments, tracks, etc)
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
ul.list, table.list {
  width:100%;
  position:relative;
  margin:0px 0px 10px;
  }
  table.list td { vertical-align:top; }
  table.list td.image {
    width:1px;
    padding-left:0px;
    }
  table.list td, ul.list li { border-bottom:1px solid #E4E4E4; }
  table.list td, ul.list li div {
    padding:10px 5px 5px;
    font-size:12px;
    line-height:12px;
    text-align:left;
    }
    table.list table.list td { padding-right:0px; }
  ul.list li {
    width:100%;
    overflow:hidden;
    }
    ul.list li div.buttons { float:right; }
    ul.list li div.image, ul.list li div.buttons a {
      float:left;
      border:none;
      }
      ul.list li div.image {
        padding-top:5px;
        margin-right:5px;
        }
    ul.list li div.handle, ul.list li a.remove { visibility:hidden; }
      ul.list li a.button.remove {
        height:12px;
        margin-top:6px;
        background:url(/images/buttons/delete.png) no-repeat center top;
        }
        ul.list li a.button.remove:hover { background-position:center bottom; }
      ul.list li div.handle {
        float:left;
        cursor:move;
        padding:10px 0px;
        }
        ul.list li:hover div.handle, ul.list li:hover a.remove { visibility:visible; }
  .list p { margin-bottom:5px; }
    .list p span {
      color:#999;
      float:none;
      font-size:11px;
      margin-right:5px;
      }
      .list p span.date { margin-left:5px; }
  table.list td.form { padding-top:10px; }
    table.list td.form textarea {
      display:block;
      margin-bottom:10px;
      }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * small lists
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
 ul.small { overflow:hidden; }
  ul.small li a { border:none; font-weight: bold; }
    ul.small li a img {
      width:30px;
      height:30px;
      float:left;
      border:none;
      background-color:#fff;
      margin:0px 5px 5px 0px;
      border:2px solid #F1F1F1;
      }
      ul.small li a:hover img { border-color:#ddd; }
  ul.small.list li {
    display:block;
    font-size:11px;
    line-height:12px;
    overflow:hidden;
    margin-bottom:5px;
    padding-right: 5px;
    }
    ul.small.list li span {
      display:block;
      margin:1px 0px 0px 30px;
      }
    ul.small.list li a.thumb {
      float:left;
      display:block;
      }
  ul.small.grid { margin-left:10px; }
    ul.small.grid li { float:left; }
      ul.small.grid li a {
        display:block;
        }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * tabular data
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
table.stripe {
  font-size:1.2em;
  border-top:1px solid #ddd;
  border-left:1px solid #ddd;
  }
  table.stripe tr.odd { background-color:#E4E4E4; }
  table.stripe td, table.stripe th {
    padding:5px;
    text-align:left;
    border-right:1px solid #ddd;
    border-bottom:1px solid #ddd;
    }
    table.stripe th { font-weight:normal; }
    table.stripe td { line-height:1.4em; }
      table.stripe td span { margin:0em 0.2em; }
      table.stripe td img.avatar { width:60px; height:60px; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * select / autocompleter menus
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
input.select {
  width:110px;
  height:13px;
  line-height:13px;
  padding-right:20px;
  outline:none;
  cursor:pointer;
  overflow:hidden;
  vertical-align:top;
  background-image:url(/images/icons/more.gif);
  }
ul.menu, ul.menu-choices {
  color:#777;
  z-index:50;
  margin-top:-1px;
  position:relative;
  border:1px solid #ccc;
  background-color:#F1F1F1;
  border-top:none;
  }
  ul.menu { position:absolute; }
  ul.menu li {
    cursor:pointer;
    position:relative;
    font-size:1.2em;
    padding:3px 4px 0px;
    background:transparent none no-repeat scroll 3px 2px;
    }
    ul.menu.country li { padding-left:24px; }
    ul.menu li.selected, ul.menu li.autocompleter-selected {
      color:#fff;
      background-color:#777;
      }
      ul.menu span.code { float:right; }
      ul.menu span.queried { font-weight:bold; }

div.inline-edit textarea {
  width:95%;
  display:block;
  margin:5px 0px 5px 5px;
  }
div.inline-edit span, div.inline-edit input[type=button], div.inline-edit a {
  margin-left:5px;
  vertical-align:middle;
  }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * roar rules
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
div.roar-wrap {
  color:#fff;
  width:100%;
  z-index:999;
  font-size:12px;
  text-align:left;
  margin-top:-10px;
  position:absolute;
  }
  div.roar-bg {
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index:1000;
    position:absolute;
    background-color:#000;
    }
  div.roar {
    width:100%;
    cursor:pointer;
    position:absolute;
    }
    div.roar h3, div.roar p {
      margin:0px;
      padding:10px;
      z-index:1001;
      position:relative;
      }
      div.roar h3 {
        font-size:13px;
        padding-bottom:0px;
        }
    div.roar a {
      color:#fff;
      border-color:#fff;
      font-weight:bold;
      }
      div.roar a:hover {
        color:#0A759E;
        border-color:#0A759E;
        }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * image cropper rules
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
div.cropper-scroller {
  width:220px;
  height:220px;
  border:1px solid #ccc;
  cursor:move;
  overflow:hidden;
  position:relative;
  }
  div.cropper-scroller img { margin-bottom:-4px; }
div.cropper-slider {
  width:200px;
  margin:5px 10px;
  text-align:left;
  background-color:#eee;
  }
  div.cropper-slider div {
    width:12px;
    height:12px;
    cursor:pointer;
    background-color:#333;
    }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Terms and privacy css rules
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

div.terms {
  padding:20px 25px 0px;
  border:1px solid #eee;
  background-color:#f2fbff;
  }
  div.terms h2, div.terms h3 {
    font-weight:bold;
    margin:0px 0px 10px;
    text-transform:uppercase;
    }
    div.terms h1 { margin-bottom:25px; }
    div.terms h2 { color:#0A759E; font-size:18px; }
    div.terms h3 { color:#0C99CE; font-size:14px; }
    div.terms.policy h3 { color:#000; }
    div.terms h2.number {
      height:23px;
      padding:7px 0px 0px 35px;
      background:no-repeat left top;
      }
      div.terms h2.number.one   { background-image:url(/images/about/1.png); }
      div.terms h2.number.two   { background-image:url(/images/about/2.png); }
      div.terms h2.number.three { background-image:url(/images/about/3.png); }
      div.terms h2.number.four  { background-image:url(/images/about/4.png); }
  div.terms div.section {
    overflow:hidden;
    line-height:16px;
    margin-bottom:40px;
    }
  div.terms div.boxed {
    padding:10px;
    margin:0px 0px 10px;
    background-color:#fff;
    border:1px solid #e5e5e5;
    }
  div.terms img.illustrate { float:left; }
  div.terms div.illustrated { margin-left:175px; }
  div.terms strong.head { text-transform:uppercase; }
  div.terms .gray { color:#999; }
  div.terms.policy p, div.terms.policy ul { margin:10px 0px 25px 20px; }
  div.terms p.section { margin-bottom:10px; }
  div.terms p.notes {
    font-style:italic;
    margin-bottom:30px;
    }
  div.terms div.boxed ol.steps {
    margin-left:20px;
    font-weight:bold;
    }
  div.terms tr.alt { background-color:#ddd; }
  div.terms td {
    vertical-align:top;
    padding:5px;
    }
  
.destroyable {
  color:red;
  font-size:14px;
  font-weight:bold;	
  }

div.expandable {
  margin:20px;
  border:1px solid #ddd;
  }
div.expandable-heading, div.expandable-toggle {
  background:#f3f3f3 no-repeat 7px top;
  font-size:18px;
  color:#0A759E;
  height:24px;
  padding-left:5px;
  padding-top:6px;
  }
  div.expandable-toggle {
    cursor:pointer;
    padding-left:30px;
    background-image:url(/images/controls/expand.gif);
    }
    div.expandable.collapsed div.expandable-toggle { background-position:7px bottom; }

div.expandable-panel {
  padding:10px 5px;
  position:relative;
  }
  div.expandable-panel td { padding-right:10px; }
  
div.member-type {
  display:block;
  float:left;
  width:160px;
  text-align:center;
  }
  div.member-type input { margin-top:15px; }
  div.member-type label {
    font-weight:bold;
    clear:both;
    display:block;
    font-size:14px;
    padding:5px 0px 20px;
    }
    div.member-type label span {
      padding-left:18px;
      background:no-repeat left top;
      }
      div.member-type label span.note {
        color:#999;
        padding-left:5px;
        font-weight:normal;
        }
      div.member-type label span.artist { background-image:url(/images/icons/artist.png); }
      div.member-type label span.label { background-image:url(/images/icons/label.png); }
      div.member-type label span.media { background-image:url(/images/icons/media.png); }

div.official-member-types {
  overflow:hidden;
  border:1px solid #CC7C00;
  }
  div.official-member-types p.note { padding:10px 15px; }

div.official-label {
  color:#CC7C00;
  background-color:#fff;
  padding:3px 4px;
  font-size:13px;
  position:absolute;
  top:10px;
  left:370px;
  font-weight:bold;
  }

span.artist-icon, span.label-icon, span.media-icon {
  margin-left:5px;
  padding:2px 0px 2px 16px;
  background:no-repeat left top;
  }
span.artist-icon { background-image:url(/images/icons/artist.png); }
span.label-icon  { background-image:url(/images/icons/label.png); }
span.media-icon  { background-image:url(/images/icons/media.png); }