/**
 * @copyright Copyright (c) 2010, Dan Bettles 
 * @author Dan Bettles <dan@danbettles.net>
 */

body {
    font: .8em Helvetica, Arial, sans-serif;
    color: #4f4f4f;
    background-color: #e1f7fa;
    margin: 0;
    padding: 0;
}

h1,
h3 {
    letter-spacing: -.07em;
    margin-top: 0;
}

h1 {
    font-size: 3em;
    color: #999;
    margin: 0 0 20px;
    padding: 0 0 3px;
    border-bottom: 3px solid #3fd8ea;
}

/*Audible*/
h2 {
    position: absolute; left: -1000em; top: -1000em; display: block; width: 0; height: 0; font-size: 0;
}

h3 {
    font-size: 2em;
}

p {
    margin-top: 0;
}

a,
a:link,
a:visited,
a:hover {
    font-weight: bold;
    color: #02a0c7;
    text-decoration: none;
}

a:hover {
    color: #016390;
    text-decoration: underline;
}

.audible {
    position: absolute; left: -1000em; top: -1000em; display: block; width: 0; height: 0; font-size: 0;
}

#wrapper {
    width: 960px;
    text-align: center;
    margin: 0 auto;
}

#content {
    float: left;
    width: 920px;
    text-align: left;
    background-color: #fff;
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #d9eff2;
    border-radius: 10px 10px;  /*CSS 3*/
    -moz-border-radius: 10px 10px;  /*Mozilla*/
    -webkit-border-radius: 10px 10px;  /*Safari et al*/
}

#author {
    float: left;
    width: 300px;
    background: url('../image/avatar.png') 0 0 no-repeat;
    margin: 0 20px 0 0;
    padding: 320px 0 0;
}

#mixes {
    float: right;
    width: 600px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#mixes .mix {
    text-shadow: 1px 1px 0 #fff;
    background-color: #f0f7f7;
    margin: 20px 0 0;
    border: 1px solid #d2e2e2;
    border-radius: 10px 10px;  /*CSS 3*/
    -moz-border-radius: 10px 10px;  /*Mozilla*/
    -webkit-border-radius: 10px 10px;  /*Safari et al*/
}

#mixes li.first {
    margin-top: 0;
}

#mixes .mix h3 {
    float: left;
    width: 339px;
    vertical-align: middle;
    color: #777;
    margin: 0 0 10px;
    padding: 10px 10px 0;
}

/*Audible*/
#mixes .mix h3 .low,
#mixes .mix h3 .author {
    position: absolute; left: -1000em; top: -1000em; display: block; width: 0; height: 0; font-size: 0;
}

#mixes .mix .classification {
    float: right;
    width: 219px;
    font-weight: bold;
    line-height: 2em;  /*Same as the mix title*/
    text-align: right;
    vertical-align: middle;
    color: #888;
    margin: 0 0 10px;
    padding: 10px 10px 0;
}

#mixes .mix .links {
    clear: both;
    margin: 0 0 10px;
    padding: 0 10px 0;
}

#author .links a,
#mixes .mix .links a {
    padding-right: .5em;
}

#mixes .mix .tracklist {
    list-style: none;
    margin: 0 10px 10px 10px;
    padding: 0;
    border-top: 2px solid #0ca6b5;
}

#mixes .mix .tracklist li {
    color: #999;
    padding: .5em;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #ccc;
}

#mixes .mix .tracklist li .seq {
    float: right;
    font-weight: bold;
    color: #c4c2c2;
    padding-left: 2em;
}