/* Playlist-specific styles */
@import url(../css/playlist.css);

/* Main interface styles */
#preloader {
    border: 2px solid #e4e4e4;
    font-size: 1.2em;
    margin: 100px auto;
    padding: 20px;
    text-align: center;
    width: 750px;
}

#container {
    height: 660px;
    margin: 0px auto;
    width: 981px; }

#header_menu { position: relative;}

#map_container {
    position: relative;
    width: 981px; }

.map {
    background: #ccc url(../images/journey/placeholder_map.png) no-repeat bottom left;
    color: #000;
    left: 0px;
    height: 461px;
    position: absolute;
    top: 0px;
    width: 406px; }

#playlist_container {
    background: #000 url(../images/journey/playlist_container_bg.png) no-repeat top right;
    border-bottom: 1px solid #0082ce;
    left: 406px;
    height: 506px;
    overflow-y: hidden;
    position: absolute;
    top: 0px;
    width: 578px; }

#more_info_container {
    background: transparent url(../images/journey/more_info_bg.png) repeat-x 0px 0px;
    font-size: 0.8em;
    height: 506px;
    padding: 10px;
    position: static;
    /*width: 575px;*/
    z-index: 100; }

    #more_info_container h1 {
        color: #666;
        font-size: 15px;
        font-weight: bold; }

    #more_info_container .track_names {
        color: #000;
        margin: 10px; }

    #more_info_container .track_name {
        font-size: 15px;
        font-weight: bold;
        color: #000; }

#playlist_tabs {
    background: #000 url(../images/journey/playlist_tabs_bg.png) no-repeat 0px 0px;
    height: 58px;
    width: 578px; }

    #playlist_tabs h1 {
        float: left;
        font-size: 18px;
        font-weight: bold;
        margin: 5px 20px; }

    #playlist_tabs button {
        background-color: #000;
        border: none;
        cursor: pointer;
        height: 58px;
        width: 67px }

#pl_show_0 { background: #000 url(../images/journey/pl_show_0.png) no-repeat 0px 0px; margin-left: 58px; }
#pl_show_1 { background: #000 url(../images/journey/pl_show_1.png) no-repeat 0px 0px; }
#pl_show_2 { background: #000 url(../images/journey/pl_show_2.png) no-repeat 0px 0px; }

#playlist_tabs .focus0 { background-position: 0px -58px; margin-left: 58px; }
#playlist_tabs .focus1 { background-position: 0px -58px; }
#playlist_tabs .focus2 { background-position: 0px -58px; }

.status_message {
    font-size: 1em;
    font-weight: bold;
    margin: 125px auto;
    text-align: center;
    width: 400px; }

.playlist {
    background-color: #000;
    float: left;
    height: 448px;
    overflow-y: hidden;
    overflow-x: hidden;
    width: 516px; }

#user_playlist {
    float: left;
    height: 448px;
    overflow-x: hidden;
    overflow-y: auto;
    width: 62px; }

#journey_header {
    background: #ccc url(../images/journey/journey_header_bg.jpg) no-repeat 0 0;
    height: 45px;
    width: 406px; }

    #journey_header h1 {
        color: #333;
        float: left;
        font-size: 24px;
        font-weight: bold;
        line-height: 45px;
        margin: 0px 10px; }

    #journey_header button { 
        background: #ccc url(../images/journey/change_journey_button.jpg) no-repeat 0 0;
        border: none;
        color: #fff;
        cursor: pointer;
        float: right;
        height: 29px;
        margin: 8px 10px 0px 0px;
        width: 116px;}

#music_header {
    background: #ccc url(../images/journey/music_header_bg.jpg) no-repeat top right;
    height: 45px;
    left: 406px;
    line-height: 45px;
    position: absolute;
    top: 0px;
    width: 578px; }

    #music_header h1 {
        color: #333;
        float: left;
        font-size: 24px;
        font-weight: bold;
        line-height: 45px;
        margin: 0px 10px }

#journey_summary {
    background-color: #333;
    color: #fff;
    height: 55px;
    left: 0px;
    position: absolute;
    top: 452px;
    width: 406px; }

    #journey_summary p,
    #journey_summary h1 { margin-left: 5px; }

    #journey_summary p { font-size: 0.8em; }
    #journey_summary #summary_track_count { 
        float: right;
        margin: 0px 5px; }

#map_switcher {
    background: #ccc url(../images/journey/modules_bg.png) no-repeat 0 0;
    border-bottom: 1px solid #0082ce;
    display: none;
    height: 100px;
    position: absolute;
    text-align: center;
    top: 406px;
    width: 406px; }

#show_0,
#show_1,
#show_2 {
    background-color: transparent;
    border: none;
    cursor: pointer;
    float: left;
    height: 100px;
    margin: 0px 2px;
    width: 75px; }

#show_0 { background: #ccc url(../images/journey/show_0_bg.png) no-repeat 0px 0px; }
a#show_0:hover { background: #ccc url(../images/journey/show_0_bg.png) no-repeat 0px -100px; }

#show_1 { background: #ccc url(../images/journey/show_1_bg.png) no-repeat 0px 0px; }
a#show_1:hover { background: #ccc url(../images/journey/show_1_bg.png) no-repeat 0px -100px; }

#show_2 { background: #ccc url(../images/journey/show_2_bg.png) no-repeat 0px 0px; }
a#show_2:hover { background: #ccc url(../images/journey/show_2_bg.png) no-repeat 0px -100px; }

#map_switcher a.focus0 { background: #ccc url(../images/journey/show_0_bg.png) no-repeat 0px -100px; }
#map_switcher a.focus1 { background: #ccc url(../images/journey/show_1_bg.png) no-repeat 0px -100px; }
#map_switcher a.focus2 { background: #ccc url(../images/journey/show_2_bg.png) no-repeat 0px -100px; }

#module_arrow_left,
#module_arrow_right {
    border: none;
    cursor: pointer;
    height: 100px;
    width: 35px; }

#module_arrow_left {
    background: transparent url(../images/journey/module_arrow_left.png) no-repeat 0px 0px;
    float: left;
    margin-right: 50px; }

#module_arrow_left:hover {
    background: transparent url(../images/journey/module_arrow_left.png) no-repeat 0px -100px;
    float: left; }

#module_arrow_right {
    background: transparent url(../images/journey/module_arrow_right.png) no-repeat 0px 0px;
    float: right; }

#module_arrow_right:hover {
    background: transparent url(../images/journey/module_arrow_right.png) no-repeat 0px -100px;
    float: right; }

#playlist_tools {
    float: right; }

    #playlist_tools #email_playlist,
    #playlist_tools #export_playlist,
    #playlist_tools #print_playlist {
        border: none;
        cursor: pointer;
        float: left;
        height: 45px;
        margin-right: 20px;
        width: 33px; }

    #playlist_tools #email_playlist { background: #ccc url(../images/journey/email_playlist.png) no-repeat 0px 0px; }
    #playlist_tools #export_playlist { background: #ccc url(../images/journey/export_playlist.png) no-repeat 0px 0px; }
    #playlist_tools #print_playlist { background: #ccc url(../images/journey/print_playlist.png) no-repeat 0px 0px; }

    #playlist_tools #email_playlist:hover { background-position: 0px -45px; }
    #playlist_tools #export_playlist:hover { background-position: 0px -45px; }
    #playlist_tools #print_playlist:hover { background-position: 0px -45px; }

.email_playlist_div {
    background-color: #000;
    border: 2px solid #0082ce;
    padding: 20px;
    position: absolute;
    width: 400px;
    z-index: 5; }

.email_playlist_headline {
    font-size: 1.2em;
    font-weight: bold;
    margin: 10px 0px; }

#email_playlist_form .text_input {
    display: block;
    width: 250px; }

#email_playlist_form .text_area {
    display: block;
    height: 80px;
    width: 250px; }

#email_playlist_form .playlist_submit {
    background-color: #fff;
    border: 1px solid #0082ce;
    cursor: pointer;
    margin: 10px 0px;
    width: 200px; }

.email_playlist_message { color: #fc0;}

#close_email_playlist, #close_popup {
    background: #000 url(../images/journey/close_icon_black_bg.png) no-repeat 0px 0px;
    border: none;
    cursor: pointer;
    float: right;
    height: 23px;
    width: 23px;  
    margin: 5px 25px 0px 0px; }

#disclaimer {
    font-size: 0.7em;
    margin: 0px auto;
    width: 981px;}