/* 
    Document   : popups
    Created on : 4-mei-2011, 16:56:52
    Author     : Jan-Willem Arnold DelArte copyright 2011
    Description:
        Special style sheet for the audio video and contact pop up. you thought so
*/



/* pop ups on index.html */
#popups {
    position: relative;
    left: 128px;
    top: 132px;
    width: 380px;
    height: 760px;
   

}
#popups #pu-video {
    position: absolute;
    top: 68px;
    left: 0px;
    display: none;
    font-size: 12px;
    line-height: 140%;
}

#popups #pu-video #pu-video-frame {
    position: absolute;

    width: 366px;
    height: 320px;
    border: 1px solid #528cc7;
    padding: 3px;
    border-radius: 9px;
    background-color:#000000;
    z-index: 1;
   

    border-right-color: #528cc7;
    border-left-color: #528cc7;
    border-bottom-color: #528cc7;
    border-top-color: #528cc7;
}
#index #popups #pu-video #pu-video-frame  {
    /* for IE */
    filter:alpha(opacity=80);
    /* CSS3 standard */
    opacity: 0.8;     
}

#popups #pu-video #pu-video-canvas {
    position: relative;
    top: 28px;
    left: 8px;
    z-index: 2;
    width: 360px;
    height: 288px;
}
#popups #pu-audio {
    position: absolute;
    top: 98px;
    left: 0px;
    width: 366px;
    display: none;
    border: 1px solid #528cc7;
    padding: 3px;
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;
    background-color:#000000;    
    z-index: 1;

    font-size: 12px;
    line-height: 140%;

}
#index #popups #pu-audio {
     /* for IE */
    filter:alpha(opacity=80);
    /* CSS3 standard */
    opacity: 0.8;   
}

#popups #pu-audio #audio-player-space {
    float: left;
    clear: both;
    width: 366px;
}
#popups #pu-audio #audio-player-space audio {
    width: 366px;
}
.audiotrack-infopane-off {
    display: none;

}
.audiotrack-infopane-on {
    display: block;
}

#popups #pu-video-frame .tl {
    text-align: center;
    float: left;
    width: 334px;
}
#popups #pu-audio .tl {
    text-align: center;
    float: left;
}
#popups #pu-audio .audiotrack {
    float: left;
    clear: both;
    font-size: 14px;
    width: 360px;
    padding: 3px 3px 3px 3px;
    background-color: #555555;
    border-bottom: solid 1px #333333;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    cursor: default;
    font-size: 12px;
}
#popups .audiotrack-unplayed {
    color: #d0e2f6;
}
#popups .audiotrack:hover .audiotrack-unplayed {
    color: #f26522;
}
#popups .audiotrack:hover .audiotrack-played {
    color: #f26522;
}

#popups .audiotrack-now-playing {
    color: #f26522;
}
#popups .audiotrack-played {
    color: #999999;
}
#popups #pu-audio .audiotrack:hover {
    background-color: #bfebf8; 
}

#popups #pu-audio .audiotrack .title {
    float: left; 
    margin-left: 6px;

}
#popups #pu-audio .audiotrack .namecomp {
    float: left;
    width: 110px;
    margin-left: 6px;
}
#popups #pu-audio .audiotrack .ensemble {
    float: left;
    
    width: 110px;
}
#popups .pu-txt {
    display: none;

    width: 366px;
    border: 1px solid #528cc7;
    padding: 3px;
    border-radius: 9px;
    -moz-border-radius: 9px;
    -webkit-border-radius: 9px;  
    font-size: 12px;
    line-height: 160%;
    z-index: 1;
    background-color:#000000;

    margin-bottom: 6px;
}
#index #popups .pu-txt {
        /* for IE */
    filter:alpha(opacity=80);
    /* CSS3 standard */
    opacity: 0.8;
}
#popups .pu-txt p {
    font-size: 12px;
    line-height: 160%;

}
#popups .pu-txt .pu-p-title {
    color: black;
    background-color: white;
    /* for IE */
    filter:alpha(opacity=20);
    /* CSS3 standard */
    opacity: 0.2;
    width: 100%;
    clear: both;
    float: left;
    padding-left: 3px;
    font-weight: bold;
    border-radius: 2px;
    -moz-border-radius: 2px;


}
#popups .bar {
    clear: both;
    float: left;
    border-bottom: 1px solid #222233;
    padding-bottom: 2px;
    margin-bottom: 9px;
    width: 100%;

}
#popups .cmd {
    margin-left: 3px;
    font-weight: bold;
    float: left;
    width: 24px;
    cursor: default;
}
#popups .cmd:hover {
    color: #f26522;

}
#popups .tl {
    text-align: center;
    float: left;
    width: 300px;
    font-weight: bold;
    
}

#popups #pu-txt-contact {
    position: absolute;
    top: 308px; 
    clear: both;
    float: left;
}
#popups #am-thumb {
    height: 96px;

}

#popups .contact-left {
    float: left;
    padding-left: 6px;
}
#popups .contact-left a {
    color: white;
}
#popups .contact-left a:link {
    color: white;
}

#popups .contact-left a:visited {
    color: white;
}

#popups .contact-right {
    float: right;
    padding-right: 9px;
}