/*
    Default styles
*/



*
{
    font-size       : inherit;
    margin          : 0;
    padding         : 0;
}



p
{
    padding-bottom  : 0.5em;
    padding-top  : 0.5em;
    text-align      : justify;
}



ul
{
    padding         : 0 0 0.5em 1em;
}



ol
{
    padding         : 0 0 1em 1em;
}



ul li,
ol li
{
    padding-left    : 0.5em;
    text-align      : justify;
    padding-bottom  : 0.5em;
}



code
{
    display         : block;
    white-space     : pre-wrap;
}



h1,h2,h3,h4,h5,h6
{
    padding-bottom     : 0.1em;
    padding-top        : 0.5em;
    color              : #7c7c7c;
    font-weight        : 300;
    line-height        : 1.1;
}



h1 {font-size:1.6em;}
h2 {font-size:1.3em;}
h3 {font-size:1.2em;}
h4 {font-size:1.1em;}
h5 {font-size:1.0em;}
h6 {font-size:0.9em;}



var
{
    font-weight         : bolder;
}



html
{
    display             : flex;
    flex-direction      : column;
    min-height          : 100%;
    min-width           : 100%;
    font-size           : 1.0em;
    font-family         : Ubuntu, Arial, 'libra sans', sans-serif;
    background-color    : white;
    justify-content     : center;
    align-items         : center;
}



body
{
    display             : flex;
    flex-direction      : column;
    min-height          : 100%;
    min-width           : 100%;
    flex                : 1 1;
    justify-content     : center;
}



a
{
    word-wrap           : break-word;
    display             : inline-block;
}


.Gliph
{
    background-size:1em;
    background-repeat:no-repeat;
    background-position:0em center;
    vertical-align:middle;
    min-height:1em;
    padding-left:1.5em;
}



.GliphInput
{
    padding-left:2em;
    background-size:1em;
    background-repeat:no-repeat;
    background-position:0.5em center;
}



.Gliph:empty
{
    width:1em;
    display:inline-block;
}



@media (max-width:1024px)
{
    p
    {
        padding-bottom  : 0.5em;
        text-align      : left;
    }



    ul li,
    ol li
    {
        text-align      : left;
    }
}



/******************************************************************************
    Interface
*/

.UserSelectNone
{
    -webkit-user-select     : none; /* Chrome all  Safari all */
    -moz-user-select        : none; /* Firefox all */
    -ms-user-select         : none; /* IE 10+ */
    user-select             : none; /* Likely future */
}



/*
    Mistake
*/
.TextError
{
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-style: wave;
}



/*
    Correct
*/
.TextCorrect
{
  text-decoration: underline;
  text-decoration-color: green;
  text-decoration-style: solid;
}

/*
    CSS for pusa.catlair.net
*/


.WindowBack
{
   position             : fixed;
   display              : flex;
   justify-content      : center;
   align-items          : center;
   top                  : 0;
   left                 : 0;
   right                : 0;
   bottom               : 0;
   background-color     : #0000007C;
}



.WindowDock
{
    position            : fixed;
    display             : flex;
    z-index             : 1;
    padding             : 1em;
    right               : 1em;
    bottom              : 1em;
}



.WindowDock .WindowAnchor
{
    padding-left        : 0.5em;
    padding-right       : 0.5em;
}



.MenuPopup
{
    box-shadow          : 0 0 1em #0000007c;
    border-radius       : 0.2em;
    padding             : 1em;
    background-color    : white;
}



.WindowForm
{
    position            : absolute;
    background-color    : white;
    min-width           : 20em;
    min-height          : 10em;
}



.WindowConfirm
{
    margin              : 0.5em;
    padding             : 0.5em;
}



.WindowConfirm .WindowAction
{
    margin              : 0.5em 0.5em 0.5em 0.5em;
}



.WindowDialog
{
    position            : absolute;
    background-color    : white;
    min-width           : 20em;
    min-height          : 10em;
    padding             : 0;
    display             : flex;
    flex-direction      : column;
    overflow            : hidden;
}



.WindowTitle
{
    padding             : 0.1em 0.1em 0.1em 1em;
    background-color    : #EEEEEE;
    align-items         : center;
}



.WindowTitle .WindowBtn
{
    margin              : 0.1em;
    border              : 0;
    width               : 1em;
    height              : 1em;
    background-position : center;
    background-size     : 60%;
    background-repeat   : no-repeat;
}



.WindowTitle .WindowBtnClose
{
    background-image    : url('?image=Cancel.png&scalex=64&scaley=64&colorize=000000FF');
}



.WindowTitle .WindowBtnMinimize
{
    background-image    : url('?image=Minus.png&scalex=64&scaley=64&colorize=000000FF');
}



.WindowTitle .WindowBtnMaximize
{
    background-image    : url('?image=Plus.png&scalex=64&scaley=64&colorize=000000FF');
}



.WindowTitle
{
    display             : flex;
}



.WindowTitle .WindowLabel
{
    flex                : 1 1 0;
}



.WindowDialogItem
{
}



.WindowActions
{
    display             : flex;
    justify-content     : center;
}



.WindowActions button
{
    margin              : 0.5em 0.2em 0.5em 0.2em;
}



.WindowDialog .WindowClient
{
    display             : flex;
    justify-content     : center;
    align-items         : start;
    flex                : 1 1 0;
    max-width           : 80vh;
    padding             : 1em;
    flex-direction      : column;
}



@media (max-width:1024px)
{
    .WindowDialog
    {
        justify-content     : center;
        display             : flex;
        min-width           : 100vw;
        min-height          : 100vh;
    }

    .WindowDialog .WindowClient
    {
        flex                : initial;
    }
}

/*
    Tags styles
*/
a,
.Man
{
    cursor              : pointer;
    text-decoration     : underline;
    color               : #006907;
}


.Anchor
{
    position:relative;
    top:-3em;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
}



h1
{
    color               : black;
    font-size           : 2em;
}



h2
{
    font-size           : 1.5em;
}



html
{
}



/*
    Header
*/
.Header
{
    padding             : 1em 1em 0 1em;
    display             : flex;
    flex-direction      : row;
}



.Header .Logo
{
    height              : 4em;
    background-image    : url( PusaLogo.png?&scalex=64 );
    background-size     : contain;
    background-position : left center;
    background-repeat   : no-repeat;
    flex                : 0 0 15em;
    padding-left        : 5em;
}



.Header .Name
{
    padding-top         : 0.5em;
    flex                : 1 0 10em;
    font-size           : 1.3em;
}



.Header .Slogan
{
    min-width           : 4em;
    font-size           : 0.82em;
}



.Menu
{
    display             : flex;
    flex-wrap           : wrap;
    justify-content     : center;
    align-items         : end;
    position            : sticky;
    top                 : 0;
    background-color    : #ffffffee;
    padding             : 0.5em;
    box-shadow          : 0 0.3em 0.2em #00000022;
}



.Menu .Space
{
    min-width           : 3em;
    flex                : 1 1;
}



.Menu .Item
{
    padding             : 0.3em 1.0em 0.3em 1.0em;
    border-radius       : 0.2em;
}



.Menu .Active
{
    cursor              : pointer;
    color               : white;
    background-color    : black;
}



.Menu .Item
{
    border-bottom       : 1px solid #00000000;
}



.Menu .Item:hover
{
    cursor              : pointer;
    border-bottom       : 1px solid #006907;
}



.Bottom
{
    display             : flex;
}



.Bottom *
{
    padding             : 1em;
}



.Bottom .Space,
.Header .Space
{
    flex                : 1 1;
}



.Header .Baner
{
    padding             : 1em;
    min-height          : 2em;
    width               : 4em;
    background-position : center;
    background-repeat   : no-repeat;
    background-size     : auto 1.5em;
}



/*
    Frame
*/


select,
textarea,
input
{
    border-radius       : 0.2em;
    padding             : 0.3em;
    border              : 1px solid gray;
    background-color    : silver;
    box-sizing          : border-box;
}


textarea
{
    width               : 100%;
}




button
{
    border-radius       : 0.2em;
    padding             : 0.2em 1.0em 0.2em 1.0em;
    border              : 0em solid;
    background-color    : black;
    color               : white;
}



button:disabled
{
    background-color    : grey;
    border              : 0 solid;
    color               : silver;
}



.Frame
{
    max-width           : 50em;
    margin              : 1em;
    flex                : 1 1 0;
    display             : flex;
    justify-content     : center;
    flex-direction      : column;
    padding             : 0 3em 1em 3em;
}



.Frame .Image
{
    width               : 100%;
    min-height          : 80vh;
    background-size     : contain;
    background-position : center;
    background-repeat   : no-repeat;
    -webkit-print-color-adjust  : exact;
    -moz-print-color-adjust     : exact;
    -ms-print-color-adjust      : exact;
    print-color-adjust          : exact;
}



.Frame .Links
{
    display             : flex;
    flex-wrap           : wrap;
    justify-content     : space-between;
}



.Frame .Links a
{
}


/*
    The code sections
*/

.Code
{
    display             : flex;
    overflow-x          : auto;
}

.Code .Numbers
{
    font-family         : monospace;
    text-align          : right;
    margin-right        : 1em;
    opacity             : 0.5;
    min-width           : 3em;
}

.Code .Lines
{
    font-family         : monospace;
    white-space         : pre;
}

.Code .Lines .Comment
{
    opacity             : 0.5;
}

.Abstract, .HTML, .PHP, .JS
{
    padding             : 0.5em;
    margin-bottom       : 0.5em;
    margin-top          : 0.5em;
    border-radius       : 0.3em;
}


.Abstract
{
    background-color    : #001133;
    color               : #FFFFFF;
}

.HTML
{
    background-color    : #c65a00;
    color               : #FFFFFF;
}

.PHP
{
    background-color    : #006907;
    color               : #FFFFFF;
}

.JS
{
    background-color    : #7C0033;
    color               : #FFFFFF;
}

.PHP:before
{
    content             : "php";
}

.HTML:before
{
    content             : "html";
}

.JS:before
{
    content             : "JS";
}




/*
*/

.Log
{
    background-color    : white;
    box-shadow          : 0em 0em 1em #00000055;
}



.LogLine
{
    font-size           : 1.3em;
}


.Language
{
    display             : flex;
}


.Mermaid
{
    width               : fit-content;
}



@media (min-width:0px) and (max-width:640px)
{
    .Header
    {
        flex-direction      : column;
    }



   .Header .Logo
    {
        flex                : 0 0 4em;
    }



    .Header .Framework
    {
        display             : none;
    }



    .Frame
    {
        padding             : 0 0 0 0;
    }



    .Frame .Links
    {
        flex-direction      : column;
    }



    .Frame .Links a
    {
        padding             : 0.5em 0 0.5em 0;
    }



    .HTML .Line:nth-child(odd),
    .PHP .Line:nth-child(odd)
    {
        background-color    : #ffffff11;
    }


    .Bottom
    {
        display             : flex;
        flex-direction      : column;
        padding-bottom      : 1em;
        font-size           : 0.8em;
    }

    .Bottom *
    {
        padding             : 0 1em 1em 1em;
    }


    .Menu
    {
        flex-direction      : column;
        position            : static;
        align-items         : stretch;
    }


    .Top
    {
    }


    .Toolbar
    {
        flex-direction      : column;
    }


    .Form .Line
    {
        flex-direction      : column;
    }


    .Form .Line .Left
    {
        flex                : 0 0 auto;
    }
}




.Log
{
    z-index             : 10;
    overflow            : auto;
    position            : fixed;
    right               : 1em;
    top                 : 1em;
    max-width           : 70%;
    max-height          : 80%;
    font-size           : 0.8em;
}



.LogLine
{
    background-position : 1em center;
    background-repeat   : no-repeat;
    background-size     : 2em 2em;
    padding             : 0.5em 1em 0.5em 3.5em;
    min-height          : 2em;
    align-items         : center;
}



.LogTime
{
    font-size           : 0.5em;
}



.LogMessage
{
}



.LogErr
{
    background-image    : url(?&image=icons/Error.png&scalex=64);
}



.LogInf
{
    background-image    : url(?&image=icons/Info.png&scalex=64&colorize=0000FFFF);
}



.LogWar
{
    background-image    : url(?&image=icons/Warning.png&scalex=64&colorize=FF7C00FF);
}



.LogDeb
{
    background-image    : url(?&image=icons/Debug.png&scalex=64);
}



.PostIndicator
{
    font-size           : 12px;
    text-align          : center;
    padding             : 32px;
    z-index             : 9999;
    position            : fixed;
    top                 : 50%;
    left                : 50%;
    width               : 1em;
    height              : 1em;
    background-image    : url('?image=icons/Loader.png');
    background-position : center center;
    background-repeat   : no-repeat;
    margin-left         : -32px;
    margin-top          :-32px;
    -webkit-transition  : opacity 0.2s ease-in-out;
    -moz-transition     : opacity 0.2s ease-in-out;
    transition          : opacity 0.2s ease-in-out;
}



.Log .Value
{
    font-weight: bolder;
}