/*
	1. Frame-layout;
	2. Table-layout;
	3. Flex-layout;
	4. Framework-layout: W3C-framework, Bootstrap;
*/
@font-face
{
    font-family: "Tahoma";
    src: url("windows-xp-tahoma.otf.woff2");
}
body
{
    background-image: url('img/bliss.jpg');
    background-size: cover;
    font-family: "Tahoma";
}

#main-window
{
    width: 400px;
    height: 350px;
}

#title-bar
{
    width: 400px;
    height: 35px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    color: white;
    text-shadow: 1px 1px 1px black;
    /*background-color:blue;*/
    background-image: linear-gradient( #77CCFF, #0469EC, #0469EC, #0569FF, #0569FF, #0569FF );
    box-shadow: inset 0px 0px 4px 1px #002195;
}

#title-bar, #window-icon-and-title
{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    #title-bar img
    {
        width: 24px;
        height: 24px;
        margin: 4px;
    }

#window-control-buttons
{
    margin: 4px 8px;
}
/*#window-control-buttons > input[type=button]*/
.control-button
{
    width: 24px;
    height: 24px;
    border: solid 1px;
    border-radius: 5px;
    /*text-align:center;*/
    padding: 0px 0px 3px 0px;
    font-size: 17px;
    font-weight: 700;
    transform: rotateY(180deg);
    background-image: linear-gradient(to bottom left, #55A1FF, #0025B5);
    box-shadow: inset -3px 1px 3px 0px #77A1F5;
    color: white;
}

    .control-button:hover
    {
        background-image: linear-gradient(to bottom left, #75C1FF, #2045D5);
        box-shadow: inset 0px 0px 3px 3px #77A1F5;
    }

    .control-button:active
    {
        background-image: linear-gradient(to bottom left, #55A1CF, #0025B5);
        box-shadow: inset 0px 0px 3px 3px #5781F5;
    }

    .control-button:disabled
    {
        background-image: linear-gradient(to bottom left, #55A1FF, #0025B5);
        box-shadow: inset -3px 1px 3px 0px #5581F5;
        color: lightgrey;
    }

#close-button
{
    background-image: linear-gradient(to bottom left, #C97475, #FF3010);
    box-shadow: inset -3px 1px 3px 0px #C49A9B;
}

    #close-button:hover
    {
        background-image: linear-gradient( to bottom left, #D98855, #FF3020);
        box-shadow: inset 0px 0px 3px 3px #C49A9B;
    }

    #close-button:active
    {
        background-image: linear-gradient( to bottom left, #D95455, #FF3020);
        box-shadow: inset 0px 0px 3px 3px #B48A8B;
    }

/* ----------------------------------------------------------------------------- */
#client-rect
{
    width: 400px;
    height: 312px;
    background-color: rgb(235,233,216);
    display: flex;
}

#border-left, #border-right
{
    width: 5px;
    height: 312px;
    background-color: blue;
}

#border-left
{
    background-image: linear-gradient(to right, #0022BBFF, #0055FFFF, #0022BBFF);
}

#border-bottom
{
    width: 400px;
    height: 5px;
    background-color: blue;
}

#border-bottom
{
    background-color: darkblue;
    background-image: linear-gradient(to right, #0055BBFF, #001177CC);
}

#border-right
{
    background-color: darkblue;
    background-image: linear-gradient(to right, #003377CC, #0077BBFF, #003377CC);
}
/* ----------------------------------------------------------------------------- */

#work-area
{
    width: 390px;
}
/* ----------------------------------------------------------------------------- */
#menu-bar
{
    border-bottom: solid 1px white;
}

    #menu-bar button
    {
        background-color: rgb(235,233,216);
        border: none;
    }

        #menu-bar button:hover
        {
            box-shadow: 1px 1px 0px 0px grey;
        }

        #menu-bar button:active
        {
            box-shadow: inset 1px 1px 0px 0px grey;
        }

/* ----------------------------------------------------------------------------- */
#display
{
    width: 93%;
    margin: 10px;
    text-align: right;
    align-self: center;
}
/* ----------------------------------------------------------------------------- */
.buttons
{
    display: flex;
    justify-content: left;
}

    .buttons button
    {
        width: 50px;
        height: 40px;
        color:darkblue;

        border:solid 1px;
        border-radius:5px;
        box-shadow: inset 0 -3px 5px 1px lightgrey;
    }
        .buttons button:hover
        {
            background-color:lightgray;
            box-shadow:inset 0px 0px 2px 1px #FFAA00;
        }
        .buttons button:active
        {
            box-shadow:inset 0px 0px 2px 1px grey;
        }

.memory-buttons
{
    display: grid;
    grid-template-columns: 50px; /*1 столбик, шириной 50px*/
    grid-template-rows: 40px 40px 40px 40px 40px; /*5 строк, высотой по 40px*/
    /*grid-template-rows: auto auto auto auto auto;*/
    grid-gap: 10px; /*Расстояние (зазор) между ячейками сетки*/
    margin: 0 15px;
}

    .memory-buttons > button, .wide-buttons > button, .operational-buttons > button
    {
        color: red;
        border-color:darkblue;
    }

.wide-buttons
{
    margin: 0 10px;
}

    .wide-buttons > button
    {
        width: 93px;
    }

#square
{
    width: 32px;
    height: 32px;
    margin: 5px;
    border: inset 2px;
}
/* ----------------------------------------------------------------------------- */
.digits-and-operations
{
    display:flex;
}
.digit-buttons
{
    display:grid;
    grid-template-rows:40px 40px 40px 40px;
    grid-template-columns:50px 50px 50px;
    grid-gap:10px;
    margin:10px 9px;
}
.operational-buttons
{
    display:grid;
    grid-template-rows:     40px 40px 40px 40px;
    grid-template-columns:   50px 50px;
    grid-gap:10px;
    margin:10px 0px;
}