/* ============================================================
   COINS EN CUIR DU MENU
   ============================================================ */

.sidebar-corner
{
    position: absolute;


    background-image:
        url("/img/medieval_book/metal_corner_300x257.png");


    width: 78px;
    height: 78px;


    background-repeat: no-repeat;
    background-size: contain;

    z-index: 40;

    pointer-events: none;
}


/* ============================================================
   COIN SUPÉRIEUR GAUCHE
   ============================================================ */

.sidebar-corner-top-left
{
    top: -5px;
    left: -5px;

    transform: rotate(0deg);
}


/* ============================================================
   COIN SUPÉRIEUR DROIT
   ============================================================ */

.sidebar-corner-top-right
{
    top: -5px;
    right: -5px;

    transform-origin: center;
    transform: rotate(90deg);
}


/* ============================================================
   COIN INFÉRIEUR GAUCHE
   ============================================================ */

.sidebar-corner-bottom-left
{
    bottom: -5px;
    left: -5px;

    width: 70px;
    height: 70px;


    transform-origin: center;
    transform: rotate(270deg);
}


/* ============================================================
   COIN INFÉRIEUR DROIT
   ============================================================ */

.sidebar-corner-bottom-right
{
    bottom: -5px;
    right: -5px;

    transform-origin: center;
    transform: rotate(180deg);

    width: 70px;
    height: 70px;

}


/* ============================================================
   CADRE SUPÉRIEUR
   ============================================================ */

.sidebar-frame-top
{
    position: absolute;

    top: 0;
    left: 21px;
    right: 21px;

    height: 40px;

    background-image:
        url("/img/medieval_book/frame_leather_vertical.png");

    background-repeat: repeat-x;
    background-position: top left; 
    background-size: auto 22px;

    z-index: 30;
}


/* ============================================================
   CADRE GAUCHE
   ============================================================ */

.sidebar-frame-left
{
    position: absolute;

    top: 21px;
    bottom: 21px;
    left: 0px;

    width: 13px;

    background-image:
        url("img/frame_leather_horizontal_13x320.png");

    background-repeat: repeat-y;
    background-position: top left;
    background-size: 10px auto;

    z-index: 30;
}


/* ============================================================
   CADRE DROIT
   ============================================================ */

.sidebar-frame-right
{
    position: absolute;

    top: 21px;
    bottom: 21px;
    right: 0;

    width: 13px;

    background-image:
        url("img/frame_leather_horizontal_13x320.png");

    background-repeat: repeat-y;
    background-position: top left;
    background-size: 10px auto;

    transform: scaleX(-1);

    z-index: 30;
}


/* ============================================================
   CADRE INFÉRIEUR
   ============================================================ */

.sidebar-frame-bottom
{
    position: absolute;

    left: 21px;
    right: 21px;
    bottom: 0px;

    height: 22px;

    background-image:
        url("/img/medieval_book/frame_leather_vertical.png");

    background-repeat: repeat-x;
    background-position: top left;
    background-size: auto 22px;

    z-index: 30;
}