/**
 * @title          popins medias
 * @description    medias popins (video, audio, diaporama)
 * @media          screen
 * @required       global-*.css
 */


/**
 * @section        popinMedia
 * @description    popins for displaying visual, audio and video
 * @tree           .popinMedia < body
 */
.popinMedia {
    margin:0 auto;
    width:817px;
}
#js .popinMedia {
    position:absolute; top:10px; left:45px; z-index:101;
    margin:0 auto; outline:0;
    width:auto;
}

.popinMedia dl {
    position:relative;
    margin:0; padding:30px;
    background:#474747 url(/templates/versailles/images/common/bg/popin-media.png) repeat-x 0 100%; color:#FFF;
}
.popinMedia .popinHeader {margin-bottom:1.455em;}
.popinMedia .popinHeader strong {font:normal 18px Georgia, "Times New Roman", Times, serif;}
.popinMedia .closePopin, #core .popinMedia .closePopin {
    position:absolute; top:10px; right:10px;
    padding-right:20px;
    background:url(/templates/versailles/images/common/btn/close-popin-media.png) no-repeat 100% 0; color:#C7D2C4;
    font-size:10px;
    line-height:1.5;
}
.popinMedia .closePopin:hover, #core .popinMedia .closePopin:hover {background-position:100% -15px;}

#js .popinMedia .end {
    display:block;
    overflow:hidden;
    height:10px;
}

/* Visual / Diaporama */
#js #popinMediaVisual, #js #popinMediaDiaporama {width:727px;}
#js #popinMediaVisual .popinChrome, #js #popinMediaDiaporama .popinChrome {
    padding:10px 10px 0;
    background:url(/templates/versailles/images/common/bg/popin-media-shadow-707.png) no-repeat;
}
#js #popinMediaVisual .end, #js #popinMediaDiaporama .end {
    background:url(/templates/versailles/images/common/bg/popin-media-shadow-707.png) no-repeat 0 -990px;
}

#popinMediaVisual .legend, #popinMediaDiaporama .legend {
    background:#D6D9D4 url(/templates/versailles/images/common/bg/popin-media-legend.png) repeat-x 0 100%;
}
#popinMediaVisual .legend p, #popinMediaDiaporama .legend p {
    margin:0; padding:0.7275em 10px;
    color:#313131;
}

/* Video / Audio */
#js #popinMediaVideo, #js #popinMediaAudio {width:534px;}
#js #popinMediaVideo .popinChrome, #js #popinMediaAudio .popinChrome {
    padding:10px 10px 0;
    background:url(/templates/versailles/images/common/bg/popin-media-shadow-514.png) no-repeat;
}
#js #popinMediaVideo .end, #js #popinMediaAudio .end {
    background:url(/templates/versailles/images/common/bg/popin-media-shadow-514.png) no-repeat 0 -990px;
}

#alternatives {background:#E4E6E3; color:#967526;}
#alternatives p {margin:0; padding:0.7275em 10px;}
#alternatives a {color:#967526;}
#alternatives a em {
    font-style:normal;
    text-decoration:underline;
}
#alternatives a:hover, #alternatives a:hover em {text-decoration:none;}

/* Media part */
#mediaHolder {
    position:relative;
    overflow:hidden;
}
#media {background:#1E1E1E;}
#media img, #media object, #media embed {
    display:block;
    margin:0 auto;
}

#popinMediaVideo #media {height:367px;}
#popinMediaAudio #media {height:32px;}

/* Diaporama */
#diaporama {
    position:relative;
    margin:1.455em auto 0;
    width:647px;
}
#diaporamaInner {
    overflow:auto;
    margin:0 auto;
    width:560px; height:90px;
}

#diaporama ul {margin:0;}
#diaporama li {
    float:left;
    padding:2px;
    width:66px; height:46px;
}
#diaporama li a {
    float:left;
    padding:3px;
}
#diaporama li a:hover {background:#C0C6BE;}
#diaporama li.on a {background:#FFF;}
#diaporama li img {display:block;}

/* Diaporama with JS */
#js #diaporamaInner {
    position:relative;
    overflow:hidden;
    height:50px;
}

#js .popinMedia #diaporama ul {position:absolute; top:0;}

#diaporama .off {display:none;}

#diaporama .prev, #diaporama .next {
    position:absolute; top:8px;
    overflow:hidden;
    padding-top:32px;
    width:17px; height:0;
    background:url(/templates/versailles/images/common/btn/popin-media-diaporama.png) no-repeat;
}
#diaporama .prev {
    left:0;
    background-position:0 0;
}
#diaporama .next {
    left:630px;
    background-position:-17px 0;
}
#diaporama .prev:hover {background-position:0 -32px;}
#diaporama .next:hover {background-position:-17px -32px;}

/* Container and Masks */
#popinMediaContainer {
    position:absolute; top:0; left:0; z-index:100;
    overflow:hidden;
}

#popinMediaMask {
    position:absolute; top:0; left:0;
    overflow:hidden;
    width:100%; height:100%;
    background:#000;
}

#imageLoader {
    position:absolute; top:0; left:0;
    width:100%; height:100%;
    background:#1E1E1E; color:#FFF;
}
#imageLoader div {
    position:absolute; top:50%;
    margin-top:-25px; padding-top:35px;
    width:100%;
    background:url(/templates/versailles/images/common/picto/popin-media-image-loader.gif) no-repeat 50% 0;
    text-align:center;
}