:root
{
    --width-body-menu:            3.0rem;
    --width-main-aside:           3.0rem;
    --width-body-menu-extended:  12.0rem;
    --width-main-aside-extended: 12.0rem;
    --width-nav-link-icon:        3.0rem;
    --width-nav-link-padding:     1.0rem;
    --width-menu-aside-break:     1000px;
    --width-max-dialog:           600px;

    --height-scroll-padding:      4.0rem;
    --height-body-header:         3.0rem;
    --height-body-footer:         3.0rem;
    --height-menu-nav-link:       3.0rem;
    --height-body-line-height:    1.6;
    --height-link-icon:           3.0rem;

    --color-body-header-bg:       #111;
    --color-body-footer-bg:       #444;
    --color-body-menu-bg:         #ddd;
    --color-body-menu-border:     #999;
    --color-main-aside-bg:        #AAA;
    --color-main-article-bg:      #E9E9E9;
    --color-form-bg:              #EEE;
    --color-dialog-header-bg:     #AFAFAE;
    --color-dialog-form-bg:       #EFEFEE;
    --color-dialog-footer-bg:     #AFAFAE;
    --color-text-light:           white;
    --color-text-dark:            #222;
    --color-text-link:            #FFF;
    --color-text-link-hover:      white;

    --opacity-text-link-hover:    0.7;
}

/* Web APP CSS Version 0.6 */

/* CSS RESET */

BODY,
BODY > MAIN,
BODY > HEADER,
BODY > FOOTER,
BODY > MENU,
BODY > DIALOG,
BODY > DIALOG > HEADER,
BODY > DIALOG > FORM,
BODY > DIALOG > FOOTER
{
    outline:                 0;
    margin:                  0;
    border:                  0;
    padding:                 0;
}

/* BODY */

HTML
{
    height:                      100%;
    scroll-padding-top:          var(--height-scroll-padding);
}

BODY
{
    height:                      100%;
    position:                    relative;
    line-height:                 var(--height-body-line-height);
}

BODY *
{
    font-family:                 sans-serif;
}

BODY PRE
{
    font-family:                 monospace;
}

/* BODY MENU */

BODY > MENU
{
    position: absolute;

    top:                     0;
    left:                    0;
    bottom:                  0;
    width:                   var(--width-body-menu-extended);

    background:              var(--color-body-menu-bg);
    color:                   var(--color-text-dark);
}

BODY > MENU::-webkit-scrollbar
{
    display:                 none;
}

BODY > MENU > NAV > A
{
    border-bottom:           solid 1px var(--color-body-menu-border);
}

/* BODY HEADER */

BODY > HEADER
{
    position:                fixed;
    box-sizing:              border-box;
    top:                     0;
    left:                    var(--width-body-menu-extended);
    right:                   0;
    height:                  var(--height-body-header);

    background:              var(--color-body-header-bg);
    color:                   var(--color-text-light);
}

BODY > FOOTER
{
    position:                fixed;
    box-sizing:              border-box;
    left:                    var(--width-body-menu-extended);
    right:                   0;
    bottom:                  0;
    height:                  var(--height-body-footer);

    background:              var(--color-body-footer-bg);
    color:                   var(--color-text-light);
}

BODY > MAIN
{
    min-height:              auto;
    box-sizing:              border-box;

    padding-top:             0rem;
    padding-bottom:          0rem;

    position:                fixed;
    top:                     var(--height-body-header);
    left:                    var(--width-body-menu-extended);
    right:                   0px;
    bottom:                  var(--height-body-footer);
}

BODY > MAIN
{
    display:                 flex;
    flex-direction:          row;
}

BODY > MAIN > *
{
    height:                  100%;
}

BODY > MAIN > ASIDE
{
    flex-basis:              var(--width-main-aside-extended);
}

BODY > MAIN > ASIDE::-webkit-scrollbar
{
    display:                 none;
}

BODY > MAIN > ASIDE NAV > A
{
    border-bottom:           solid 1px var(--color-body-menu-border);
}

BODY > MAIN > ARTICLE
{
    flex-grow:               1;
    overflow:                scroll;
    margin:                  0.0rem;

    background:              var(--color-main-article-bg);
    color:                   var(--color-dark-text);
}

/* BODY > DIALOG */

BODY > DIALOG
{
    position:                fixed;
    top:                     0;
    left:                    0;
    right:                   0;
    bottom:                  0;
    width:                   100vw;
    height:                  100vh;

    background:              rgba( 0, 0, 0, 0.6 );
    display:                 none;
}

BODY > DIALOG
{
    flex-direction:          column;
    justify-content:         center;
    align-items:             center;
}

BODY > DIALOG > HEADER,
BODY > DIALOG > FORM,
BODY > DIALOG > FOOTER
{
    max-width:               var(--width-max-dialog);
    width:                   100vw;
}

BODY > DIALOG > HEADER NAV > BIG
{
    margin:                  0 1.0rem;
    font-size:               1.5rem;
    font-weight:             bold;
    color:                   #777;
}

BODY > DIALOG > HEADER
{
    height:                  5.0rem;
    background:              var(--color-dialog-header-bg);
}

BODY > DIALOG > FORM
{
    height:                  auto;
    background:              var(--color-dialog-form-bg);
}

BODY > DIALOG > FOOTER
{
    height:                  2.5rem;
    background:              var(--color-dialog-footer-bg);
    color:                   white;    
}

.default_forms FORM
{
    background:              var(--color-form-bg);
}

FORM
{
    padding-bottom:          1.0rem;
}

FORM DIV.fieldset
{
    padding:                 0 0.5rem;
    display:                 flex;
    flex-wrap:               wrap;
}

FORM LABEL
{
    display:                 block;
    box-sizing:              border-box;
    width:                   100%;
    margin:                  0.75rem 0 0;
    padding:                 0 0.5rem;
}

FORM LABEL.half_width
{
    width:                   50%;
}

FORM LABEL.third_width
{
    width:                   33.3333333333%;
}

FORM LABEL.quarter_width,
FORM LABEL.fourth_width
{
    width:                   25%;
}

FORM LABEL.fifth_width
{
    width:                   20%;
}

FORM LABEL.sixth_width
{
    width:                   16.666666666%;
}

FORM LABEL EM
{
    display:                 block;
    font-size:               1.0rem;
    line-height:             2.0rem;
}

FORM LABEL INPUT
{
    width:                   100%;
}

FORM LABEL INPUT[type=radio],
FORM LABEL INPUT[type=checkbox]
{
    width:                   25px;
}

FORM LABEL INPUT[type=radio]    + SPAN,
FORM LABEL INPUT[type=checkbox] + SPAN
{
    vertical-align: top;
    display:        inline-block;
    line-height:    40px;
    margin:         3px 0;
}

FORM INPUT
{
    box-sizing:              border-box;
    line-height:             1.5rem;
    padding:                 .75rem 1.0rem;
    font-size:               1.0rem;
    border:                  solid 1px #aaa;
    outline:                 0;
}

FORM INPUT:not([type=checkbox]):not([type=radio])
{
    height:                  3.0rem;
}

FORM DIV.buttons
{
    box-sizing:              border-box;
    margin:                  2.0rem 1.0rem 2.0rem 1.0rem;
    position:                relative;
    display:                 flex;
    justify-content:         space-evenly;
}

FORM DIV.buttons *
{
    flex-grow: 1;
}

FORM BUTTON
{
    height:                  3.0rem;
    background:              DarkGray;
    color:                   white;
    font-size:               1.0rem;
    cursor:                  pointer;
    outline:                 0;
    padding:                 0;
    border:                  0;
}

FORM SELECT
{
    width:100%;
}

FORM SELECT
{
    /* -webkit-appearance:none; */
    /* -moz-appearance:none; */

    position:relative;
    display:block;
    margin:0;
    height:40px;
    padding:0 0 0 20px;
    background:#f0f0f0;
    color:#555;

    width:100%;
    appearance:none;
    -moz-appearance:none;
    -webkit-appearance:none;

       border-top:solid 1px #cccccc;
      border-left:solid 1px #cccccc;
    border-bottom:solid 1px #a6a6a6;
     border-right:solid 1px #a6a6a6;

    outline:none;

    text-indent:0.01px;
    text-overflow:' ';


    font-size:inherit;
    line-height:40px;
}

FORM SELECT:after
{
    content:"X";

    position:absolute;
    right:0;
    top:0;
    bottom:0;
    link-height:40px;
}

FORM SELECT:required
{
    box-shadow:none;
}

@-moz-document url-prefix()
{
    FORM SELECT
    {
        vertical-align:baseline;
    }
}

HEADER,
FOOTER
{
    display:         flex;
    justify-content: space-between;
    align-items:     center;
}

HEADER NAV,
FOOTER NAV
{
    display:         flex;
    justify-content: flex-start;
    align-items:     center;
}

MENU,
ASIDE
{
    display:                 flex;
    flex-direction:          column;
    justify-content:         flex-start;

    /* Overflow interferes with sticky */
    overflow:                initial;
    overflow-x:              hidden;

    flex-grow:               0;
    flex-shrink:             0;

    -ms-overflow-style:      none;
    scrollbar-width:         none;
}

ASIDE
{
    background:              var(--color-main-aside-bg);
    color:                   var(--color-dark-text);
}

MENU  NAV,
ASIDE NAV
{
    display:         flex;
    flex-direction:  column;
    justify-content: flex-start;
    flex-wrap:       no-wrap;
}

@media only screen and (max-width:1000px)
{
     MENU.auto_collapse,
    ASIDE.auto_collapse
    {
        position:            absolute;
        top:                 0px;
        bottom:              0px;
        z-index:             1;

        transition:          width 1s;
    }

    MENU.auto_collapse
    {
        width:               var(--width-body-menu);
    }

    HEADER.auto_collapse,
      MAIN.auto_collapse,
    FOOTER.auto_collapse
    {
        left:                var(--width-body-menu);
    }

    ASIDE.auto_collapse
    {
        width:               var(--width-main-aside);
    }

    ASIDE.auto_collapse + ARTICLE
    {
        margin-left:         var(--width-main-aside);
    }

    MENU.auto_collapse.use_hover:hover,
    MENU.auto_collapse.use_hover.hover
    {
        width:               var(--width-body-menu-extended)  !important;
    }

    ASIDE.auto_collapse.use_hover:hover,
    ASIDE.auto_collapse.use_hover.hover
    {
        width:               var(--width-main-aside-extended) !important;
    }
}

NAV > A,
NAV > SPAN
{
    box-sizing:              border-box;
    display:                 block;
    line-height:             var(--height-menu-nav-link);
    padding-left:            var(--width-nav-link-padding);
    padding-right:           var(--width-nav-link-padding);
    position:                relative;
    overflow:                hidden;
    white-space:             nowrap;
    cursor:                  pointer;
}

NAV > A:any-link
{
    color:                   inherit;
    text-decoration:         none;
}

NAV > A:any-link:hover
{
    opacity:                 var(--opacity-text-link-hover);
}

NAV > A H1
{
    margin:                  0;
}

A.icon
{
    position:     relative;
    padding-left: var(--width-nav-link-icon);
    min-height:   var(--height-link-icon);
    display:      block;
}

A.icon.right
{
    position:      relative;
    padding-left:  var(--width-nav-link-padding);
    padding-right: var(--width-nav-link-icon);
}

A.icon:before
{
    font-family: Awesome;

    position:    absolute;
    top:         0;
    left:        0;
    bottom:      0;
    width:       var(--width-nav-link-icon);
    text-align:  center;
}

A.icon.right:before
{
    left:        unset;
    right:       0;
}

A.icon.edit:before  { content:"\0f044"; }
A.icon.login:before { content:"\0f2f6"; }
A.icon.menu:before  { content:"\0f0c9"; }

H1, H2, H3, H4, H5, H6
{
    margin:  1.0rem;
    padding: 0;
}

H1 { font-size: 2.0rem; line-height: 2.0rem; }
H2 { font-size: 1.8rem; line-height: 1.8rem; }
H3 { font-size: 1.6rem; line-height: 1.6rem; }
H4 { font-size: 1.4rem; line-height: 1.4rem; }
H5 { font-size: 1.2rem; line-height: 1.2rem; }
H6 { font-size: 1.0rem; line-height: 1.0rem; }

P
{
    margin:      0.75rem 1.0rem;
    line-height: 1.5rem;
}

.default_tables TABLE
{
    box-sizing:  border-box;
    margin:      1.0rem 0;
    padding:     0 1.0rem;
    width:       100%;
    line-height: 1.5rem;
}

.default_tables TABLE THEAD TR TH
{
    text-align:  left;
}