@CHARSET "UTF-8";
/* TABLETS & PHONES
---------------------------------------------
/*
    ╔═══╗
    ║   ║
    ╠═══╣
    ╩   ╩

Tablets and phones all orientations */
@media only screen and (max-device-width: 1280px) and (orientation:portrait) and (max-device-width: 9in), only screen and (max-device-width: 1280px) and (orientation:landscape) and (max-device-width: 11in) {
    #mq:before {
        content:"AMT";
    }
    /*conteneur généraux
    _________________________________________________________________*/
    .cli-button-floating {
        display:none;
    }

    /* STACK (CAPTIONS, CHAPTERS, KEYWORDS, DOCUMENTS-LIST)
    _________________________________________________________________*/
    .cli-chapter ul, .cli-keyword ul, .cli-document ul {
        padding: 0 1px 0 0;
    }
    .cli-chapter li, .cli-keyword li, .cli-document li {
        border-top: 1px solid #fff;
        border-bottom: 1px solid #e8e8e8;
    }
    .cli-chapter li>a, .cli-keyword li>a, .cli-document li>span {
        padding:7px 8px;
        line-height: 24px;
    }
    a.timecode {
        padding-top:10px;
        padding-bottom:10px;
        line-height: 16px;
    }
    a.timecode:before,a.timecode:after {
        border-top-width: 18px;
        border-bottom-width: 18px;
    }

    /* CAPTIONS
    --------------------------------*/
    #listHolder .ui-tabs-nav a.caption {
    }
    .cli-caption-content {
        padding:.5em;
        font-size:inherit;
    }
    .cli-caption-content a {
        padding:.6em .3em;
        line-height:2.4em;
    }
    /* CHAPTERS
    -----------------------------------------*/
    .cli-chapter a.currentChapter:before {
        left:0;
        margin-top:-6px;
        border-width:6px 0 6px 7px;
    }

    /* DOCUMENTS LIST
    --------------------------------*/
    .colibri-documents-list span {
        margin-right: 39px;
        padding-right: 48px;
        margin-right:0;
    }
    .colibri-documents-list li > a {
        z-index: 1;
        width:38px;
        height:400px;
        top: auto;
    }
    .colibri-documents-list li > a.url {
        background-position:-85px 9px;
    }
    .colibri-documents-list li > a.pdf {
        background-position:-21px 9px;
    }
    .colibri-documents-list li > a.image {
        background-position:-11px 9px;
    }
    .colibri-documents-list li > a.media,
    .colibri-documents-list li > a.audio {
        background-position:-53px 9px;
    }
    .colibri-documents-list li > a.undefined {
        background-position:-117px 9px;
    }
    .colibri-documents-list li > a.swf {
        background-position:-149px 9px;
    }

    /* ANNEXES
    _________________________________________________________________*/
    #annexHolder ul {
    }
    #annexHolder li {
    }
    #annexHolder a.annex-item{
        padding: 10px 5px;
        border-bottom: 1px solid #e8e8e8;
    }

    /* DOCUMENTS
    _________________________________________________________________*/
    #docFullscreenBtn {
        opacity:1;
    }
    #documentTimeline{
        display:none;
    }
    #documentToolBar, #documentToolBar:hover{
        height:auto !important;
        left:5px;
        right:5px;
        bottom:40px !important;
    }
    #buttonGoLeft, #buttonGoRight{
        display: block;
        float: left;
        width: 50px;
        height: 50px;
        border-radius: 4px;
        background:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkNhbHF1ZV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjI5cHgiIGhlaWdodD0iMTAwcHgiIHZpZXdCb3g9Ii0wLjUgLTAuNSAyOSAxMDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgLTAuNSAtMC41IDI5IDEwMCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8ZyBpZD0iQ2FscXVlXzIiIGRpc3BsYXk9Im5vbmUiPg0KCTxyZWN0IHg9Ii01IiB5PSItNSIgZGlzcGxheT0iaW5saW5lIiBvcGFjaXR5PSIwLjYiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIiB3aWR0aD0iNDIiIGhlaWdodD0iMjYiLz4NCjwvZz4NCjxnIG9wYWNpdHk9IjAuNSI+DQoJPGc+DQoJCTxwb2x5Z29uIHBvaW50cz0iMTIuNSwxNi41IDI1LjUsMjYuNSAxMi41LDM2LjUgMTIuNSwzNC41IDEyLjUsMjYuNSAxMi41LDE4LjUgCQkiLz4NCgk8L2c+DQoJPGc+DQoJCTxyZWN0IHg9IjEuNSIgeT0iMjIuNSIgd2lkdGg9IjgiIGhlaWdodD0iOCIvPg0KCTwvZz4NCjwvZz4NCjxnPg0KCTxwb2x5Z29uIGZpbGw9IiNGRkZGRkYiIHBvaW50cz0iMTIuNSwxNC41IDI1LjUsMjQuNSAxMi41LDM0LjUgCSIvPg0KCTxyZWN0IHg9IjEuNSIgeT0iMjAuNSIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjgiIGhlaWdodD0iOCIvPg0KPC9nPg0KPGcgb3BhY2l0eT0iMC43NSI+DQoJPHBhdGggZD0iTTEyLjUsMTQuNWwxMywxMGwtMTMsMTBWMTQuNSBNMTEuNSwxMi40Njl2MjQuMDYzTDI3LjE0LDI0LjVMMTEuNSwxMi40NjlMMTEuNSwxMi40Njl6Ii8+DQoJPHBhdGggZD0iTTkuNSwyMC41djhoLTh2LThIOS41IE0xMC41LDE5LjVoLTEwdjEwaDEwVjE5LjVMMTAuNSwxOS41eiIvPg0KPC9nPg0KPGcgb3BhY2l0eT0iMC41Ij4NCgk8Zz4NCgkJPHBvbHlnb24gcG9pbnRzPSIxNS4xNCw4Ni40NjkgMi4xNCw3Ni40NjkgMTUuMTQsNjYuNDY5IDE1LjE0LDY4LjQ2OSAxNS4xNCw3Ni40NjkgMTUuMTQsODQuNDY5IAkJIi8+DQoJPC9nPg0KCTxnPg0KCQk8cmVjdCB4PSIxOC4xNCIgeT0iNzIuNDY5IiB3aWR0aD0iOCIgaGVpZ2h0PSI4Ii8+DQoJPC9nPg0KPC9nPg0KPGc+DQoJPHBvbHlnb24gZmlsbD0iI0ZGRkZGRiIgcG9pbnRzPSIxNS4xNCw4NC41IDIuMTQsNzQuNSAxNS4xNCw2NC41IAkiLz4NCgk8cmVjdCB4PSIxOC4xNCIgeT0iNzAuNSIgZmlsbD0iI0ZGRkZGRiIgd2lkdGg9IjgiIGhlaWdodD0iOCIvPg0KPC9nPg0KPGcgb3BhY2l0eT0iMC43NSI+DQoJPHBhdGggZD0iTTE1LjE0LDg0LjVsLTEzLTEwbDEzLTEwVjg0LjUgTTE2LjE0LDg2LjUzMVY2Mi40NjlMMC41LDc0LjVMMTYuMTQsODYuNTMxTDE2LjE0LDg2LjUzMXoiLz4NCgk8cGF0aCBkPSJNMTguMTQsNzguNXYtOGg4djhIMTguMTQgTTE3LjE0LDc5LjVoMTB2LTEwaC0xMFY3OS41TDE3LjE0LDc5LjV6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==") 50% -50px no-repeat;
    }
    #buttonGoRight {
        float:right;
        background-position: 50% 0;
    }

    .isFullScreen #documentHolder {
        bottom: 0;
    }
    .isFullScreen #documentToolBar {
        height: auto !important;
        bottom: 50% !important;
    }
}/*end MQ*/





/* TABLETS
---------------------------------------------
/*
    ══╦══   ╔═══╗
      ║     ║   ║
      ║     ╠═══╣
      ╩     ╩   ╩

Tablets, all orientations */
@media only screen and (max-device-width: 1280px) and (orientation:portrait) and (min-width: 6in) and (max-device-width: 9in), only screen and (max-device-width: 1280px) and (orientation:landscape) and (min-width: 8in) and (max-device-width: 11in) {
    #mqt:before {
        content:"TA - ";
    }
}/*end MQ*/

/*
    ══╦══   ║
      ║     ║
      ║     ║
      ╩     ╚════

tablet landscape */
@media only screen and (max-device-width: 1280px) and (orientation:landscape) and (min-width: 8in) and (max-device-width: 11in) {
    #mqt:after {
        content:"TL";
    }
    /* DOCUMENTS
    _________________________________________________________________*/
    #buttonGoLeft, #buttonGoRight{
        border:1px solid rgba(0,0,0,.1);
        background-color: rgba(0,0,0,.05); 
        opacity: .45;
    }
}/*end MQ*/
/*
    ══╦══   ╔════╗
      ║     ║    ║
      ║     ╠════╝
      ╩     ║

tablet portrait */
@media only screen and (max-device-width: 1280px) and (orientation:portrait) and (min-width: 8in) and (max-device-width: 9in){
    #mqt:after {
        content:"TP";
    }
}/*end MQ*/




/* PHONES
---------------------------------------------
/*
    ╔═══╦═══╗   ╔═══╗
    ║   ║   ║   ║   ║
    ║   ║   ║   ╠═══╣
    ╩   ╩   ╩   ╩   ╩

mobile All */
@media only screen and (max-width: 8in) and (max-device-width: 8in){
    #mqm:before {
        content:"MA - ";
    }
    body{
        font-size:14px !important;
        line-height:1.5em;
        background: #bbb;
    }
    :focus {
        outline:none;
        box-shadow:none;
    }
    /* unactive theme and templates
    _________________________________________________________________*/
    div.mainFrame{
    border:0 !important;
    }
    .header, #titleHolder, .title {
    display:none;
    }

    /*conteneur généraux
    _________________________________________________________________*/
    #mainWrapper {
        height:100%;
    }
    div.container, #mainFrame { 
        width:100%;
        height:100%;
    }
    #playerWrapper, #documentWrapper, #listHolder, #annexHolder {
        border:0 !important;
    }
    div#playerWrapper, div#documentWrapper{
        position:relative;
        width:100%;
        height:100%;
        top:auto;
        left:auto;
        z-index:0;
        background:#000;
        color:#eee;
    }
    #playerWrapper {
        z-index:1;
    }
    div#documentWrapper {
        overflow:hidden;
    }
    div#stackWrapper, div#stackWrapper:hover{
        position:fixed;
        z-index: 3;
        top:0;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        bottom:0;
        width: 100%;
        padding-right: 60px;
        left: -100%;
        transition:left .25s;
        -webkit-transition:left .25s;
    }
    div#listHolder {
        width: auto;
        height: 100%;
        margin-top:0 !important;
        box-shadow: 0 1px 10px rgba(0,0,0,0.7);
        font-size:14px;
    }
    div#stackSwitch {
        display: block;
        background:url(../images/mobile-icons.png) 5px 50% no-repeat;
        position:absolute;
        z-index: 0;
        right:-60px;
        width:60px;
        height: 60px;
    }
    #stackWrapper.opened, #stackWrapper.opened:hover {
        left:0;
        background-color: rgba(0,0,0,.7);
    }
    #stackWrapper.opened #stackSwitch {
        background-position:-65px 50%;
        right:0;
        transition:right .25s;
        -webkit-transition:right .25s;
    }

    #generatedByMomindum{
        display: none;
    }

    /* STACK (CAPTIONS, CHAPTERS, KEYWORDS, DOCUMENTS-LIST)
    _________________________________________________________________*/
    .cli-chapter li>a, .cli-keyword li>a, .cli-document li>span {
        padding:15px 8px;
    }
    /* DOCUMENTS LIST
    --------------------------------*/
    .cli-document li>span {
        padding-right: 48px;
    }
    .colibri-documents-list li > a {
        width: 54px;
        background-color:#f8f8f8 !important;

    }
    .colibri-documents-list li > a.url {
        background-position:-80px 18px;
    }
    .colibri-documents-list li > a.pdf {
        background-position:-16px 18px;
    }
    .colibri-documents-list li > a.image {
        background-position:-6px 18px;
    }
    .colibri-documents-list li > a.media,
    .colibri-documents-list li > a.audio {
        background-position:-48px 18px;
    }
    .colibri-documents-list li > a.undefined {
        background-position:-112px 18px;
    }
    .colibri-documents-list li > a.swf {
        background-position:-144px 18px;
    }


    .svg .colibri-documents-list li > a {
        background-size: 352px 32px;
    }
    .svg .colibri-documents-list li > a.url {
        background-position:-181px 11px;
    }
    .svg .colibri-documents-list li > a.pdf {
        background-position:-53px 11px;
    }
    .svg .colibri-documents-list li > a.image {
        background-position:11px 11px;
    }
    .svg .colibri-documents-list li > a.media,
    .svg .colibri-documents-list li > a.audio {
        background-position:-117px 11px;
    }
    .svg .colibri-documents-list li > a.undefined {
        background-position:-245px 11px;
    }
    .svg .colibri-documents-list li > a.swf {
        background-position:-309px 11px;
    }

    /* DOCUMENTS
    _________________________________________________________________*/
    #documentHolder {
        background:none;
    }
    #documentContainer a {
        color:#fff;
    }
    #docFullscreenBtn{
        display:none;
    }
    #documentToolBar, #documentToolBar:hover{
        left:0;
        right:0;
    }

    /* ANNEXES
    _________________________________________________________________*/
    /*doc : 
        the animation manage the fadeOut of each annex on mobile device.
        Due to impossibility to animate display block to none and the fact that
        a opacity:0 let the possibility to click on the link, we have to trick with the height property.

        NB: li tag got a trick with top property and must be set in float because on some browsers
        the parent tag keep the full size and stay over the video.
    */
    div#annexHolder{
        position:fixed;
        z-index:1;
        top:4px;
        right:4px;
        left:65px;
        bottom:auto;
        width:auto;
        height:0;
        overflow: visible;
        background:none;
        font-size:1em;
    }
    div.cli-annex-content, div#annexHolder ul {
        position: static;
        width:auto;
        overflow: visible;
    }
    @-webkit-keyframes fadeOut {
        0% {opacity:.9;height:3em;margin-bottom:3px;}
        90% {opacity:0; height:3em;margin-bottom:3px;}
        100% {opacity:0; height:0;margin-bottom:0;}
    }
    @keyframes fadeOut {
        0% {opacity:.9;height:3em;margin-bottom:3px;}
        90% {opacity:0; height:3em;margin-bottom:3px;}
        100% {opacity:0; height:0;margin-bottom:0;}
    }
    #annexHolder li {
        display: block;
        float:right;
        clear:right;
        overflow: hidden;
        max-width: 100%;
        background:#fff;
        border:0;
        border-radius:3px;
        box-shadow:0 1px 5px 1px rgba(0,0,0,0.6);
        -webkit-animation: fadeOut 4s ease-in 4s forwards;
        animation: fadeOut 4s ease-in 4s forwards;
        opacity:.9;
        margin-bottom:3px;
    }
    #annexHolder li:hover{
        -webkit-animation-play-state:paused;
        animation-play-state:paused;
    }
    #annexHolder a.annex-item{
        display:block;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        padding:0 1em 0 .75em;
        line-height:3em;
        height:3em;
        color:#000;
        border:0;
    }
}/*end MQ*/
/*
    ╔═══╦═══╗   ║
    ║   ║   ║   ║
    ║   ║   ║   ║
    ╩   ╩   ╩   ╚════

mobile landscape */
@media only screen and (orientation:landscape) and (max-width: 8in) and (max-device-width: 8in){
    #mqm:after {
    content:"ML";
    }
    /*conteneur généraux
    _________________________________________________________________*/
    #playerWrapper #playerHolder,
    #documentWrapper #documentHolder{
        padding:0 !important;
        height: 100%;
    }

    #stackSwitch {
        top:50%;
        margin-top:-30px;
    }

    /* BOUTONS SCROLLING
    _________________________________________________________________*/
    #scrollButtons {
        position:fixed;
        z-index: 2;
        overflow: hidden;
        right:0;
        width:60px;
        top:50%;
        margin-top:-65px;
    }
    #scrollButtons div {
        position: relative;
        margin:10px 5px;
        width:50px;
        height:50px;
        border-radius: 5px;
        background:rgba(0,0,0,0.2) url('../images/mobile-icons.png') no-repeat;
        box-shadow: inset 0 1px 1px 0 rgba(0,0,0,0.4);
        opacity:.5;
    }
    #scrollButtons div.show {
        background-color: rgba(255,255,255,0.15);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1), 0 1px 1px 0 rgba(0,0,0,0.4);
        opacity:1;
    }
    #scrollButtons #gotoVideo {
        background-position: -140px 0;
    }
    #scrollButtons #gotoSlides {
        background-position: -210px 0;
    }


}/*end MQ*/
/*
    ╔═══╦═══╗   ╔════╗
    ║   ║   ║   ║    ║
    ║   ║   ║   ╠════╝
    ╩   ╩   ╩   ║

mobile portrait */
@media only screen and (orientation:portrait) and (max-width: 8in) and (max-device-width: 8in){
    #mqm:after {
        content:"MP";
    }
    /*conteneur généraux
    _________________________________________________________________*/
    div#mainFrame {
        position: absolute;
        top:0;bottom:0;left:0;right:0;
        margin: 0 auto;
    }
    div#stackWrapper, div#stackWrapper:hover{
        padding-right: 15px;
    }
    #stackSwitch{
        top:0;
    }
    #stackWrapper.opened #stackSwitch {
        right:14px;
        background-color: rgba(0,0,0,.7);
    }

    div#documentWrapper {
        border-bottom-color: #000;
        box-shadow: 0 1px 1px rgba(0,0,0,.4);
    }
    div#documentContainer {
        margin:0;
    }

    div#playerHolder, div#documentHolder {
        height:100%;
        padding:0 !important;
    }
    div#playerWrapper, div#documentWrapper, div#mainFrame {
        -webkit-transition: all 200ms linear;
        transition: all 200ms linear;
    }
    div#playerWrapper {
        box-shadow: 0 0 1px rgba(0,0,0,.4);
        border-bottom: 1px solid #999;
    }
    /* ratios video et doc égaux (par défaut)
    --------------------------------*/
    div#playerWrapper,
    .video4by3.doc4by3 div#playerWrapper,
    .video16by9.doc16by9 div#playerWrapper,
    div#documentWrapper,
    .video4by3.doc4by3 div#documentWrapper,
    .video16by9.doc16by9 div#documentWrapper {
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        height: 50%;
    }

    /* tout 4/3 ou video 4/3 et doc inconnu
    --------------------------------*/
    .video4by3 div#mainFrame,
    .doc4by3.video4by3 div#mainFrame {
        width: 100vw;
        height: 150vw;
        max-height: 100vh;
        max-width: 66.667vh;
    }
    /* tout 16/9
    --------------------------------*/
    .video16by9.doc16by9 div#mainFrame {
        width: 100vw;
        height: 112.5vw;
        max-height: 100vh;
        max-width: 88.889vh;
    }
    /* mixte ou video 16/9 et doc inconnu
    --------------------------------*/
    .video16by9 div#mainFrame,
    .video16by9.doc4by3 div#mainFrame,
    .video4by3.doc16by9 div#mainFrame {
        width: 100vw;
        height: 131.25vw;
        max-height: 100vh;
        max-width: 76.19vh;
    }
    /* video 16/9 et doc 4/3
    --------------------------------*/
    .video16by9 div#playerWrapper,
    .video16by9.doc4by3 div#playerWrapper {
        height: 42.857%;
    }
    .video16by9 div#documentWrapper,
    .video16by9.doc4by3 div#documentWrapper {
        height: 57.143%;
    }

    /* video 4/3 et doc 16/9
    --------------------------------*/
    .video4by3.doc16by9 div#playerWrapper {
        height: 57.143%;
    }
    .video4by3.doc16by9 div#documentWrapper {
        height: 42.857%;
    }

}/*end MQ*/






/*
IPAD SPECS !
used for a better display on screens with ratio 3/4
*/
@media only screen and (max-width: 8in) and (device-width:768px) and (device-height:1024px) and (orientation:portrait){
    
}/*end MQ*/






/*
HIGH RESOLUTION SCREENS
for screens like retina: the goal is to adapt images sizes.
*/
/*@media only screen and (-webkit-min-device-pixel-ratio:2), only screen and (min--moz-device-pixel-ratio:2) {
    .colibri-documents-list li > a {
        

    }
}*//*end MQ*/




/* 
Iphone App modal invitation 
*/
#gotoApp {
    position: fixed;
    z-index: 1000;
    top:0;
    left:0;
    right:0;
    bottom:0;
    padding-top: 1em;
    background: rgba(0,0,0,.3);
}
#gotoAppContent{
    position: absolute;
    left: 1em;
    right:1em;
    background: #fff;
    color:#444;
    border-radius: 7px;
    box-shadow: 0 3px 10px rgba(0,0,0,.4);
    -webkit-animation: apppopup .3s;
    animation: apppopup .3s;
}
#gotoAppContent p {
    font-size:16px;
    padding:1.5em 1.5em 0;
}
#gotoAppContent div {
    padding:1.5em;
}
#gotoAppContent button {
    display: block;
    box-sizing:border-box;
    margin:4px 0 0;
    font-size:16px;
    height:50px;
    width:100%;
}
@-webkit-keyframes apppopup {
    from {margin-top: -100%;}
    to {margin-top: 0;}
}
@keyframes apppopup {
    from {margin-top: -100%;}
    to {margin-top: 0;}
}



/* MOBILE DEBUG TOOL ^_^ ////////////////////////////////////*/
#devTools,#switchDevTools{
    position:fixed;
    z-index:9000;
    top:0;
}
#devTools{
    margin-top:60px;
    left:0;
    right:0;
    bottom:0;
    overflow: auto;
    font-size:11px;
    border-top:3px solid #00699B;
    background:rgba(0, 64, 111, 0.92);
    color:#8ff;
    transition:all 0.2s;
    -webkit-transition:all 0.2s;
}
#switchDevTools {
    margin-top:7px;
    left:50%;
    width:60px;
    margin-left: -30px;
    line-height:45px;
    border-radius:8px;
    border:1px solid #00699B;
    text-align:center;
    transition:all 0.2s;
    -webkit-transition:all 0.2s;
}
#switchDevTools:after{
    content:"";
    display: inline-block;
    border-color:#00699B transparent;
    border-style: solid;
    border-width: 10px 20px 0px;
}
#mobileConsole div, #mobileConsole p{
    margin:0;
    padding:4px;
    border-bottom:1px solid #00406F;
}
#mq {
    color:#0ee;
}
#mq span, #mq:before {
    background: rgba(0,125,255,.4);
    padding:4px;
}

#devTools.closed{
    top:100%;
    margin-top:0;
}
#switchDevTools + #devTools.closed{
    margin-top:-3px;
}
#switchDevTools.closed{top:100%;margin-top:-55px;}
#switchDevTools.closed:after{border-width: 0 20px 10px;}

/* ///////////////////////////////////////////////////////// */