/* down version */
.slidemenu .handle { cursor: pointer; }
.slidedownmenu {
    position: absolute;
    width: 100%;
    left: 0;
    background-color: #fff;
}
.slidemenu.slidedownmenu .slidemenu-0 {
}
.slidedownmenu .handle {
    -webkit-user-select: none;
    position: absolute;
    bottom: 0px;
    left: 0;
    width: 100%;
    height: 28px;
    border-top: 1px solid #532500;
    border-bottom: 1px solid #111;
    background: url('css/handle.png') no-repeat 50% 50%, -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.1, #666), color-stop(0.8, #222));
    /*    -webkit-box-shadow:0 0 5px rgba(0,0,0,0.7);*/
    background: url('css/handle.png') no-repeat 50% 50%, -moz-linear-gradient(top, #999, #666 2%, #222);
    background: url('css/handle.png') no-repeat 50% 50%, -o-linear-gradient(top, #999, #666 2%, #222);
}
.slidedownmenu .content {
    background-color: red;
    padding: 10px; box-sizing: border-box;
    padding-bottom: 38px;                    /* handle height */
}

/* playerKiosque */

.playerKiosque .slidemenu.slidedownmenu .handle {
    height: 6px;
    border-top: 0px none transparent;
    border-bottom: 0px none transparent;
    background: none;
    background-color: #e8e5e0;
}
.playerKiosque .slidemenu.slidedownmenu .subhandle {
    position: relative;
    background-position: 0% 0%;
    background-image: var(--icon-open-down);
    left: 50%;
    transform: translateX(-50px); 
    width: 100px;
    height: 40px;
    top: 100%;
}
.playerKiosque .slidemenu.slidedownmenu .content {
    padding-bottom: 16px;                    /* handle height */
    background-color: #e8e5e0;
}
    
/* ----------------------------------------------------------------------------------- */
/* up version */
/*.slidemenu.slideupmenu {
    position: absolute;
    top: 100%;
	left: 0;
	right: 0;
    overflow: visible;				/ * nécessaire pour faire apparaitre le handle * /
    box-sizing: border-box;
}*/
.slidemenu.slideupmenu .slidemenu-0 {
    position: relative; box-sizing: border-box;
}
.slidemenu.slideupmenu .handle {
}
.slidemenu.slideupmenu .content {
	box-sizing: border-box;
}
.playerKiosque .slidemenu.slideupmenu .handle {
    position: absolute;
	width: 100%;
    top: -6px;                            /* le handle doit être intégré dans content via un padding car le calcul du décalage est fait comme ça: contentHeight - handleHeight */
    height: 6px;
    background-color: var(--background-color-handle);
}
.playerKiosque .slidemenu.slideupmenu .subhandle {
    background-position: 0% 0%;
    left: 50%;
    transform: translateX(-50px);
    width: 100px;
    height: 40px;
    position: relative;
    top: -40px;
}
.playerKiosque .slidemenu.slideupmenu .content {
    background-color: var(--background-color-slideMenu);
}
@media (max-width: 500px) {
    .playerKiosque .slidemenu.slideupmenu .content {
        padding: 2px; opadding-top: 6px; padding-left: 6px;
    }
}
/* ----------------------------------------------------------------------------------- */
/* left version */
/*.slidemenu.slideleftmenu {
    position: absolute;
}*/
.slidemenu.slideleftmenu .slidemenu-0 {
    position: relative;
    box-sizing: border-box;
}

.slidemenu.slideleftmenu  .handle {
    position: absolute;
    display: inline-block;
    top: 0px;
    left: 100%;
    height: 100%;
}

.playerKiosque .slidemenu.slideleftmenu  .handle {
    width: 6px;											/* this.handle.clientWidth */
    background-color: var(--background-color-handle);
}
.playerKiosque .slidemenu.slideleftmenu .subhandle {
    position: relative;
    top: 50%;
    transform: translateY(-50px);
    height: 100px;
    left: 6px;
    width: 40px;
    background-position: 0% 0%;
}

/* container de tout ce qu'il y a dans le panneau amovible gauche */
#dialog-list {
    obackground-color: var(--background-color-slideMenu);
    obackground-color: #e0e0e0;
	padding: 0.1em;
	box-sizing: border-box;
}

#dialog-article .dialog-content-0 {
    background-color: var(--background-color-slideMenu);
    background-color: var(--background-color-article);			/* à définir */
    background-color: #f8f8f8;
}
.slideleftmenu .dialog-content-0 {
}
.slideleftmenu .subhandle {
    background-image: url('/player/icons/icon-open-left-green-white-2.png');
	background-size: contain;
	background-repeat: no-repeat;
}
.slideupmenu .subhandle {
    background-image: url('/player/icons/icon-open-white-2.png');
	background-size: contain;
	background-repeat: no-repeat;
}
.playerKiosque .slidemenu.slideleftmenu.slidetopleft .subhandle {
    top: 100px;
}
.playerKiosque .slidemenu.slideleftmenu .content {
    background-color: var(--background-color-slideMenu);
}