/* Content CSS Version 0.1 */

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

HTML
{
    min-height:                  100vh;
}

BODY
{
    min-height:                  100vh;
    position:                 relative;

    overflow-y:                 scroll;
}

BODY > HEADER
{
    position: fixed;
    top:      0;
    left:     0;
    right:    0;
}

BODY > HEADER
{
    box-sizing:              border-box;
    height:                  80px;
}

BODY HEADER
{
    display:                 flex;
    justify-content:         space-between;
}

BODY HEADER NAV
{
    display:                 flex;
    align-items:             center;
}

BODY HEADER NAV > A,
BODY HEADER NAV > SPAN,
BODY HEADER NAV > H1
{
    padding:                 0 10px;
    text-decoration:         none;
}

BODY HEADER NAV:first-child > A:first-child,
BODY HEADER NAV:first-child > SPAN:first-child,
BODY HEADER NAV:first-child > H1:first-child
{
    padding-left:            20px;
}

BODY HEADER NAV:last-child > A:last-child,
BODY HEADER NAV:last-child > SPAN:last-child,
BODY HEADER NAV:last-child > H1:last-child
{
    padding-right:           20px;
}

BODY > FOOTER
{
    position:                absolute;
    left:                    0;
    right:                   0;
    bottom:                  0;
}

BODY > FOOTER
{
    box-sizing:              border-box;
    height:                  40px;
}

BODY FOOTER
{
    display:                 flex;
    justify-content:         space-between;
}

BODY FOOTER > NAV
{
    display:                 flex;
    align-items:             center;
}

BODY FOOTER > NAV > A,
BODY FOOTER > NAV > SPAN
{
    display:                 inline;
    padding:                 0 10px;
    text-decoration:         none;
    font-size:               13px;
    font-weight:             300;
}

BODY FOOTER > NAV:first-child > A:first-child,
BODY FOOTER > NAV:first-child > SPAN:first-child
{
    padding-left:            20px;
}

BODY FOOTER > NAV:last-child > A:last-child,
BODY FOOTER > NAV:last-child > SPAN:last-child
{
    padding-right:           20px;
}

BODY > MAIN
{
    min-height:                  100vh;
    box-sizing:              border-box;
    width:                   100%;

    position:                relative;
    padding-top:             80px;
    padding-bottom:          40px;
}

BODY > MAIN
{
    display:                 flex;
}

BODY > MAIN > ASIDE
{
    flex-basis:              auto;
    overflow:                auto;

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

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

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

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

BODY > MAIN > ASIDE > NAV
{
    display:                 flex;
    flex-direction:          column;
    flex-wrap:               no-wrap;
}

BODY > MAIN > ASIDE > NAV > A
{
    box-sizing:              border-box;
    display:                 block;
    height:                  40px;
    line-height:             40px;
    padding-left:            58px;
    padding-right:           20px;
    border-bottom:           solid 1px #999;
    position:                relative;
}

BODY > MAIN > ASIDE > NAV > A:hover
{
    color:                   white;
}

BODY > MAIN > ASIDE > NAV > A.icon:before
{
    position:                absolute;
    left:                    20px;
    font-family:             Awesome;
    text-align:              left;
    vertical-align:          middle;
    font-size:               18px;
}

A.icon.edit:before
{
    content:"\0f044";
}

BODY > MAIN > ARTICLE
{
    flex-grow:               1;
    overflow:                auto;
}

BODY > MAIN > ARTICLE > SECTION
{
    min-height:              70vh;

    display:                 flex;
    flex-direction:          column;
    justify-content:         space-evenly;
    align-items:             center;

    background:              #DDD;
}

BODY > MAIN > ARTICLE > SECTION:nth-child(2),
BODY > MAIN > ARTICLE > SECTION:nth-child(4),
BODY > MAIN > ARTICLE > SECTION:nth-child(6),
BODY > MAIN > ARTICLE > SECTION:nth-child(8),
BODY > MAIN > ARTICLE > SECTION:nth-child(10),
BODY > MAIN > ARTICLE > SECTION:nth-child(12),
BODY > MAIN > ARTICLE > SECTION:nth-child(14),
BODY > MAIN > ARTICLE > SECTION:nth-child(16)
{
    background:              #EEE;
}

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:               600px;
    width:                   100vw;
}

BODY > DIALOG > HEADER
{
    height:                  80px;
    background:              #AFAFAE;
}

BODY > DIALOG > HEADER > NAV > H1
{
    font-size:               24px;
    font-weight:             bold;
    color:                   #777;
}

BODY > DIALOG > FORM
{
    height:                  auto;
    background:              #EFEFEE;
}

BODY > DIALOG > FOOTER
{
    height:                  40px;
    background:              #AFAFAE;
    color:                   white;    
}

FORM DIV.fieldset
{
    padding:                 20px 10px 20px 10px;
    display:                 flex;
    flex-wrap:               wrap;
}

FORM LABEL
{
    display:                 block;
    box-sizing:              border-box;
    width:                   100%;
    padding:                 0 10px;
}

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;
    padding-bottom:          5px;
}

FORM LABEL INPUT
{
    width:                   100%;
}

FORM INPUT
{
    box-sizing:              border-box;
    height:                  40px;
    line-height:             20px;
    padding:                 10px 20px;
    font-size:               14px;
    border:                  solid 1px #aaa;
    outline:                 0;
}

FORM DIV.buttons
{
    box-sizing:              border-box;
    padding:                 20px 20px 20px 20px;
    position:                relative;
}

FORM BUTTON
{
    width:                   100%;
    height:                  40px;
    background:              DarkGray;
    color:                   white;
    font-size:               17px;
    cursor:                  pointer;
    outline:                 0;
    padding:                 0;
    border:                  0;
}

SPAN.desktop
{
    display: inline;
}

A
{
    cursor: pointer;
}