@font-face {
    font-family: 'aCopperGothCapsBold';
    src: url('fonts/acoopergothcaps.eot');
    src: url('fonts/acoopergothcaps.eot?#iefix') format('embedded-opentype'),
         url('fonts/acoopergothcaps.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body, html {
    margin: 0;
    padding: 0;
}

html {
    background: url(img/background.jpg) center top no-repeat black;
    color: white;
    font: 12px Verdana;
}

body {
    margin: 0 auto;
    position: relative;
    width: 975px;

    height: 1650px;
}

img {
    border: none;
}

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

ul li {
    margin-bottom: 2px;
}

ul li a {
    color: white;
    text-decoration: none;
}

ul li a:hover {
    text-decoration: underline;
}

div#moon {
    background: url(img/moon.jpg) no-repeat;
    height: 312px;
    left: 50%;
    margin-left: -156px;
    position: absolute;
    top: 6px;
    width: 312px;
}

div#tracklist {
    position: absolute;
    top: 55px;
    text-shadow: 3px 3px 3px black;
    width: 305px;
}

div#tracklist ul {
    font-weight: bold;
    margin-top: 20px;
}

table#remaining {
    color: #705073;
    font: 32px aCopperGothCapsBold;
    left: 50%;
    margin-left: -110px;
    position: absolute;
    top: 135px;
    width: 220px;
}

table#remaining td {
    text-align: center;
    width: 25%;
}

table#remaining tr.text td {
    color: #290E5D;
    font-size: 12px;
}

a#howto {
    color: white;
    font-size: 22px;
    font-weight: bold;
    right: -50px;
    position: absolute;
    text-align: center;
    text-decoration: none;
    text-shadow: 3px 3px 5px black;
    top: 130px;
    width: 290px;
}

a#howto:hover {
    color: #B482DD;
}

a.cover {
    position: absolute;
    top: 730px;
}

a.cover.album {
    left: 30px;

    -o-transform: rotate(-15deg);
    -moz-transform: rotate(-15deg);
    -webkit-transform: rotate(-15deg);
}

a.cover.movie {
    right: 50px;

    -o-transform: rotate(12deg);
    -moz-transform: rotate(12deg);
    -webkit-transform: rotate(12deg);
}

a.cover span {
    background: url(img/read-about.png) no-repeat;
    display: block;
    height: 79px;
    position: absolute;
    top: 90px;
    width: 156px;
    z-index: -1;
}

a.cover.album span {
    left: 155px;
}

a.cover.movie span {
    background-position: -156px 0;
    left: -127px;
    top: 70px;
}

a.cover.album:hover span {
    background-position: 0 -79px;
}

a.cover.movie:hover span {
    background-position: -156px -79px;
}

a.cover:hover img {
    box-shadow: 0 0 10px #E4C8F0;
}

a#buy {
    background: url(img/buy.png) -348px 0 no-repeat;
    display: block;
    height: 68px;
    left: 285px;
    position: absolute;
    top: 342px;
    width: 348px;
}

a#buy:hover {
    background-position: 0 0;
}

img.text {
    left: 50%;
    margin-left: -445px;
    position: absolute;
    top: 850px;
}

div.info {
    display: none;
    font-size: 11px;
    padding: 10px;
    position: absolute;
    top: 850px;
}

div.info.album {
    background: url(img/bg-album.png) repeat-x;
    left: 60px;
    width: 450px;

    -o-transform: rotate(-4deg);
    -moz-transform: rotate(-4deg);
    -webkit-transform: rotate(-4deg);
}

div.info.movie {
    background: url(img/bg-movie.png) repeat-x;
    height: 600px;
    right: 60px;
    width: 360px;

    -o-transform: rotate(4deg);
    -moz-transform: rotate(4deg);
    -webkit-transform: rotate(4deg);
}