/*
 *  Layout A - Standard
 *  Layout B - Mac / iOS
 *  Layout Z - One day, use for North
 */


/* Space for the tabs to sit
body.layout_z{ padding-left: 20px; }
body.layout_b{ padding-top: 20px; } */

/* Place the tabs
body.layout_b div.sidepanel > table > tbody > tr > td.menu{ vertical-align: top; }
body.layout_b div.sidepanel > table > tbody > tr > td.menu > div.interior{ margin-top: -4px; margin-left: 5px; }

body.layout_a div.sidepanel > table > tbody > tr > td.menu{ padding-top: 100px; }
*/

/* Define the Sidepanels
body div.sidepanel{
    position: fixed;
    z-index: 100;
    height: 100%;

    top: 0;
    margin-top: -1px;
} */

/*
body div.sidepanel.west{ left: 0; margin-left: -1px; }
body div.sidepanel.east{ right: 0; margin-right: -1px; }
*/

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

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


.sidepanel{ position: fixed; z-index: 99999; }

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


.sidepanel.contents{
    background-color: white; /* Black*/
    /* overflow-x: hidden; /* Disable horizontal scroll */
    /* overflow-y: hidden; /* Disable vertical scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */

    vertical-align: top;

    width: 0;
    padding: 0 !important;
}

.sidepanel.contents.east{ border-left: 2px solid lightsteelblue; }
.sidepanel.contents.west{ border-right: 2px solid lightsteelblue; }
.sidepanel.contents.north{ border-bottom: 2px solid lightsteelblue; }
.sidepanel.contents.south{ border-top: 2px solid lightsteelblue; }

.sidepanel.contents.north, .sidepanel.contents.south{ height: 0; width: 100%; }
.sidepanel.contents.east, .sidepanel.contents.west{ height: 100%; width: 0; }

.sidepanel.contents.north, .sidepanel.contents.west{ left: 0; top: 0; }
.sidepanel.contents.south, .sidepanel.contents.east{ right: 0; bottom: 0; }


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

.sidepanel.contents .interior{
    display: none;

    height: 100%;
    padding: 15px;

    overflow-y: scroll;
}

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

.sidepanel.menu{
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidepanel */
}

.sidepanel.menu.north, .sidepanel.menu.south{
    height: 25px;
    width: calc( 100% - 100px );

    top: 50px;
}
.sidepanel.menu.north{
    top: 0;
    left: 50px;
}
.sidepanel.menu.south{
    bottom: 0;
    left: 50px;
}


.layout_a .sidepanel.menu.east, .layout_b .sidepanel.menu.east{
    margin: 3px -2px 3px 0;
    right: 0;
}
.layout_a .sidepanel.menu.west, .layout_b .sidepanel.menu.west{
    margin: 3px 0 3px -2px;
    /* left: 5px; */
    left: 0;
}


.layout_a .sidepanel.menu.east, .layout_a .sidepanel.menu.west,
.layout_b .sidepanel.menu.east, .layout_b .sidepanel.menu.west{
    height: calc( 100% - 100px );
    width: 25px;

    top: 50px;
}
.layout_a .sidepanel.menu.east{
    writing-mode: sideways-lr;
    text-align: end;
}
.layout_a .sidepanel.menu.west{
    writing-mode: sideways-rl;
}

.layout_b .sidepanel.menu.west{ margin-left: -5px; }

.layout_b.alt .sidepanel.menu.west{ margin-top: -2px !important; padding: 0 !important; }
.layout_b.alt .sidepanel.menu.west .interior{ margin-top: -2px !important; padding: 0 !important; }

.layout_b.alt .sidepanel.menu.east, .layout_b.alt .sidepanel.menu.west{
    height: 25px;
    width: 50%;

    top: 0;
}

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

/* body.layout_a, body.layout_b{ padding-left: 30px; padding-right: 30px; } */
body.layout_b.alt{ padding-left: 15px; padding-right: 15px; }

.layout_b .sidepanel.menu .interior{ display: inline-grid; }

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

/* Decorate the tabs */
.sidepanel.menu button{
    background-color: lightsteelblue;
    border-color: slategrey;
    margin: 3px;
}
.sidepanel.menu button.open{ font-weight: bold; }
.sidepanel.menu button:hover{ background-color: steelblue; }
.sidepanel.menu button.highlight{ background-color: pink; border-color: deeppink; }
.sidepanel.menu button.highlight:hover{ background-color: hotpink; }


.sidepanel.menu a.tab{

    background-color: lightsteelblue;
    border: slategrey solid 2px;
    border-radius: 0 15px 15px 0;
    margin: 3px;
    padding: 5px
}

.sidepanel.menu a.tab.open{ font-weight: bold; }
.sidepanel.menu a.tab:hover{ background-color: steelblue; text-decoration: none; }
.sidepanel.menu a.tab.highlight{ background-color: pink; border-color: deeppink; }
.sidepanel.menu a.tab.highlight:hover{ background-color: hotpink; }


.sidepanel.menu a.tab span.icon{ padding-top: 5px; }
.layout_a .sidepanel.menu a.tab span.icon{ writing-mode: lr; }
.layout_a .sidepanel.menu a.tab .text{ padding-top: 5px; padding-bottom: 5px; }
.layout_b .sidepanel.menu a.tab .text{ display: none; }

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