/* Defines main layout seen by logged in users */

:root
{
    --header-height: 50px;
    --left-column-width: 200px;
    --right-column-width: 200px;
}


body
{
    display: grid;
    grid-template-columns: var(--left-column-width) 1fr/* var(--right-column-width)*/;
    grid-template-rows: var(--header-height) auto;
}

/* Header */
body > #header
{    
    box-sizing: border-box;
    background-color: #282A2E;    
    line-height: 30px;
    vertical-align: middle;        
    height: var(--header-height);
    padding: 10px;        
    box-shadow: 0 0px 5px  003459; 
    position: relative;
    z-index: 1; 
    text-align: left;      
    grid-row: 1; 
    grid-column: 1 / span 3;    
    
}


body > #header span:last-child
{
    float: right;        
    
}

body > #header span:last-child img
{
    width: 30px;
    height: 30px;
    margin-left: 5px;
    border-radius: 20px;
    padding: 1px;
    border: 1px solid #ffffff99;
}

body > #header span:last-child a
{
    text-decoration: none;
    color: inherit;
}

body > #header *
{
    vertical-align: middle;        
}

body > #header img:first-child
{
    width: 35px;
}

#leftColumn, #rightColumn
{        
    float: left;
    background-color: #1d1f21;
    width: var(--left-column-width);
    min-height: calc(100vh - var(--header-height));
    text-align: center;    
    grid-row: 2;
    
}

#leftColumn
{    
    grid-column: 1;
    position: fixed;
    top:  var(--header-height);    
    min-height: calc(100vh - var(--header-height));        
    overflow: scroll;
    scrollbar-width: none;     
}

#leftColumn::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

#rightColumn
{
    /*grid-column: 3;*/
    float: right;    
    display: none
    
    /*box-shadow: -2px 0 5px #39313c;*/
    
}

/* Main page content */
#content
{
    /*margin: 10px calc(var(--right-column-width) + 10px) 0 calc(var(--left-column-width) + 10px);*/
    margin: 10px 10px 10px 10px;
    
    background-color: #282a2e;
    /*border: 1px solid #1481ba96;
    box-shadow: 0 0px 5px  #1481ba; */
    padding: 10px;  
    text-align: center;
    min-width: 340px;
    grid-row: 2;
    grid-column: 2;            

    --beveled-corner-size: 20px;
    clip-path: polygon(var(--beveled-corner-size) 0%, calc(100% - var(--beveled-corner-size)) 0%, 100% var(--beveled-corner-size), 100% calc(100% - var(--beveled-corner-size)), calc(100% - var(--beveled-corner-size)) 100%, var(--beveled-corner-size) 100%, 0 calc(100% - var(--beveled-corner-size)), 0% var(--beveled-corner-size));
}

#menu
{    
    background-color: #282a2e;
    margin: 0 0 20px 0;
    
    --beveled-corner-size: 10px;
    clip-path: polygon(0 0%, calc(100% - var(--beveled-corner-size)) 0%, 100% var(--beveled-corner-size), 100% calc(100% - var(--beveled-corner-size)), calc(100% - var(--beveled-corner-size)) 100%, 0 100%, 0 100%, 0% 0);
}

#menu a
{
    text-decoration: none;
    display: block;
    
    padding: 2px;
    transition: background-color .5s;    
}

#menu > div
{
    margin-top: 10px;
}

#menu a:hover
{
    
    border: solid #d90429;
    border-width: 0 4px 0 4px;    
}

#menu a.currentPage
{
    border: solid #d90429;
    border-width: 0 4px 0 4px;    
    background-color: #212325;
}

/* Adjust the layout for thin screens, like phones in a portrait mode */

@media screen and (orientation:portrait), screen and (max-width: 600px)
{        
    body
    {
        grid-template-columns: auto auto auto;
    }

    /* Left AD column */
    #leftColumn
    {
        grid-column: 1 / span 3;
        min-height: auto !important;
        width: auto;
        position: static;        
    }

    #leftColumn > *:not(#menu)
    {
        display: none !important;
    }

    /* Right AD column */
    #rightColumn
    {
        display: none;        
    }
    
    /* Main page content */
    #content
    {
        grid-column: 1 / span 3;
        grid-row: 3;        
        margin: 10px 0 0 0;
    }

    #menu div a
    {
        font-size: 28px;
    }

    .hideOnSmallScreen
    {
        display: none !important;
    }

}

/* If the screen is not tall enough to fit the whole menu, then don't make the menu sticky */

@media screen and (orientation:landscape) and (max-height: 750px)
{        
    /* Left AD column */
    #leftColumn
    {
        position: static;
    }

}