/*******************************************************
*
*       ttw-music-player CSS
*       HTML5 Music Player
*       http://www.codebasehero.com/2011/06/html-music-player/
*
*       Music Playerƒvƒ‰ƒOƒCƒ“—pCSS
*       ƒlƒbƒgƒ‰ƒWƒI—p‰ü•Ï”Å
*
*******************************************************/

.ttw-music-player {
    max-width: 600px;
    margin: 0 auto;
    padding:20px;
    background: url(./images/bg.jpg) repeat #222;
}

.ttw-music-player .player {
    width: 100%;
}


/*-----------------------------------------
    Album Cover
-----------------------------------------*/
.ttw-music-player .album-cover {
    display: block;
    width: 100%;
}
.ttw-music-player .album-cover img {
    width: 100%;
    box-shadow: 0px 1px 4px rgba(0, 0, 0, .75);
}


/*-----------------------------------------
    Track Info
-----------------------------------------*/
.ttw-music-player .track-info {
    margin:12px 0 0 0;
}
.ttw-music-player .track-info p {
    margin:0 0 6px 0;
}

/* タイトル */
.ttw-music-player .player .title {
    color: #efefef;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .8);
    font-weight: bold;
    font-size:12pt;
}

/* アーティスト名 */
.ttw-music-player .artist-outer {
    display: none; /*とりあえず非表示*/
    color: #727272;
    font-style: italic;
}
.ttw-music-player .artist {
    color: #999;
    margin-left: 4px;
}

/* ☆☆☆☆☆ */
.ttw-music-player .rating {
    display: none; /*とりあえず非表示*/
    width: 75px;
    height: 16px;
}
.ttw-music-player .rating-star {
    width: 15px;
    height: 16px;
    display: block;
    float: left;
    background: transparent url(./images/rating-off.png) no-repeat center center;
    cursor: pointer;
}
.ttw-music-player .rating-star:hover,
.ttw-music-player .rating-star.on,
.ttw-music-player .rating-star.hover {
    background: transparent url(./images/rating-on.png) no-repeat center center;
}


/*-----------------------------------------
    Player
-----------------------------------------*/
.ttw-music-player .player-controls {
    margin: 12px 0 0 0;
    padding:10px 0;
    border-radius: 6px;
    background: transparent url(./images/player-bg.png) repeat 0 0;
    overflow:hidden;
}

.ttw-music-player .player-controls div {
    display:inline-block;
    vertical-align:middle;
    cursor: pointer;
}

.ttw-music-player .player-controls .main {
    width: 150px;
    height: 53px;
    margin: 0 0 0 15px;
    padding:0;
}
.ttw-music-player .previous, .ttw-music-player .next {
    width: 37px;
    height: 38px;
    margin: 0 2px 0 0;
}
.ttw-music-player .play, .ttw-music-player .pause {
    width: 51px;
    height: 53px;
    margin: 0 2px 0 0;
}

.ttw-music-player .previous,
.ttw-music-player .next,
.ttw-music-player .play,
.ttw-music-player .pause {
    background-image:url(./images/player_buttons.png);
    background-repeat:no-repeat;
}
.ttw-music-player .previous {
    background-position:0px -120px;
}
.ttw-music-player .next {
    background-position:0px -180px;
}
.ttw-music-player .play {
    background-position:0px 0px;
}
.ttw-music-player .pause {
    background-position:0px -60px;
}
.ttw-music-player .previous:hover {
    background-position:-60px -120px;
}
.ttw-music-player .next:hover {
    background-position:-60px -180px;
}
.ttw-music-player .play:hover {
    background-position:-60px 0px;
}
.ttw-music-player .pause:hover {
    background-position:-60px -60px;
}

.ttw-music-player .progress-wrapper {
    position: relative;
    height: 9px;
    width: 135px;
    background: transparent url(./images/player-progress.png) repeat-x 0 0;
    margin: 11px 10px 10px 0;
    border-radius: 4px;
}
.ttw-music-player .progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 9px;
    width: 135px;
    cursor: pointer;
}
.ttw-music-player .elapsed {
    position: absolute;
    top: 1px;
    left: 1px;
    height: 6px;
    border-radius: 3px;
    width: 60%;
    background: transparent url(./images/player-elapsed.png) repeat-x 0 0;
}
.ttw-music-player .unused-controls {
    display: none !important;
}


/*-----------------------------------------
    Description
-----------------------------------------*/
.ttw-music-player .description {
    clear: both;
    margin: 0;
    padding:0 15px;
    font-size:9pt;
    color: #999;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}
.ttw-music-player .description.showing{
    margin: 15px 0;
}


/*-----------------------------------------
    Track List
-----------------------------------------*/
.ttw-music-player .tracklist {
    padding: 10px 15px;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .15), 0 1px 0 rgba(255, 255, 255, .04);
    border-radius: 6px;
    background: transparent url(./images/tracklist-bg.png) repeat 0 0;
    color: #999;
    font-size:9pt;
}

.ttw-music-player .tracklist ol {
    margin: 0;
    padding: 0;
    overflow:hidden;
}
.ttw-music-player .tracklist li {
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
    background: transparent url(./images/tracklist-item-bg.png) repeat-x bottom left;
    padding: 10px 0 10px 0;
    list-style-position: inside;
    cursor: pointer;
    overflow: hidden;
}
.ttw-music-player .tracklist li:hover {
    color: #eee;
}
.ttw-music-player li:last-child{
    background: none;
}
.ttw-music-player .show-more-button li:last-child{
    background: transparent url(./images/tracklist-item-bg.png) repeat-x bottom left;
}

.ttw-music-player .tracklist .title {
    /*width: 370px;*/
    display: inline-block;
    vertical-align:middle;
    padding: 0 0 0 8px;
}
/*
.ttw-music-player li:nth-child(1n + 10) .title{
    padding-left:7px;
}
*/
.ttw-music-player .tracklist .duration {
    float: right;
    padding: 0 8px 0 0;
}

.ttw-music-player li.playing {
    color:#fff !important;

}

.ttw-music-player .tracklist .rating {
    display:none;
}
.ttw-music-player .buy {
    display:none;
}

.ttw-music-player .more {
    display:none;
    font-style: italic;
    font-size: 11px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
    padding: 10px 0;
    margin: 10px 0;
    cursor: pointer;
    text-align: center;
    border-radius: 6px;
    background: transparent url(./images/tracklist-more.png) repeat 0 0;
}
.ttw-music-player .more:hover {
    color: #eee;
    box-shadow: inset 0px 0px 20px rgba(0, 0, 0, .2);
}
.ttw-music-player .show-more-button .more{
    display:block;
}


/*-----------------------------------------
    Transitions
-----------------------------------------*/
.ttw-music-player .more,
.ttw-music-player .album-cover .highlight,
.ttw-music-player .tracklist li,
.ttw-music-player .buy {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.ttw-music-player .player:after {
    clear: both;
    content: '.';
    display: block;
    font-size: 0;
    line-height: 0;
    visibility: hidden;
    width: 0;
    height: 0;
}