/* *** Default's *** */
*
{
    margin: 0; /* css reset, consider Eric Meyer’s CSS Reset */
    padding: 0; /* css reset, consider Eric Meyer’s CSS Reset */
}
html
{   
    width: 100%; /* make the document 100% */
    height: 100%; /* make the document 100% */
    /*font-size: 10%; /**/
}
body
{  
    width: 100%; /* make the body 100% of the document */
    height: 100%; /* make the body 100% of the document */
    font-size: 100%; /**/
    font-family: 'Times New Roman';
}
p
{
    font-size: 2em; /**/
}
hr
{
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
}
br
{
    font-size: 0.4em;
    /*border: 1px solid black; /* for test purpose only */
}
a:link img, a:visited img
{
    border: none; /**/
}
a:hover img
{
    border: none; /**/
}
/* ### ID's ### */
#form1 {
    height: 100%; /**/
    width: 100%; /**/
    /*border: 2px solid red; /* for test purpose only */
    /*font: 10em; /**/
}
#appWindow
{
    position: relative; /**/
    margin: auto;
    /*left: 23%; /**/
    top: 20%; /**/
    width: 50%; /**/
    /*margin-top: -4%; /**/
    /*margin-left: -4%; /**/
    min-width: 550px; /**/
    /*height: 50%; /**/
    /*max-height: 50%; /**/
    border: 2px solid grey; /**/
}
#top            /* make top div 100% wide and 30% high*/
{
    width: 100%; /**/
    height: 40%; /**/
    min-height: 120px; /**/
    max-height: 40%; /**/
    overflow: hidden; /**/
    margin-top: 12px;
    /*border: 2px solid Blue;  /* for test purpose only */
}
#top div        /* all divs in top div */
{
    position: relative; /* position elements to make z-index work */
    float: left; /**/
    height: 100%; /**/
}
#topLeft        /**/
{
    width: 38%; /**/
    min-width: 170px; /**/
    z-index: 10; /**/
    /*border: 1px solid green;  /* for test purpose only */
}
#topCenter
{
    /*display: flex; /**/
    width: 23%; /**/
    min-width: 100px; /**/
    /*z-index: 50; /**/
    /*justify-content: center; /**/
    /*align-content: center; /**/
    text-align: center; /**/
    /*border: 1px solid red;  /* for test purpose only */
}
#smiley
{
    width: 96%;
    min-width: 80px;
    max-width: 100px;
}
#topRight
{
    width: 38%; /**/
    min-width: 170px; /**/
    z-index: 10; /**/
    /*border: 1px solid green;  /* for test purpose only */
}
#middle
{
    /*clear: both; /**/
    width: 100%; /**/
    /*height: 40%; /**/
    min-height: 10%; /**/
    /*max-height: 40%; /**/
}
#chooseText
{
    /*border: 2px solid magenta;  /* for test purpose only */
}

#bottom
{
    width: 100%; /**/
    /*height: 60%; /**/
    white-space: nowrap; /**/
    /*max-height: 60%; /**/
    /*overflow: hidden; /**/
    /*font-size: 2em; /**/
    /*border: 2px solid red;  /* for test purpose only */
}

/* ... Class's ... */
.tableFullSize
{
    width: 100%; /**/
    height: 100%; /**/
    /*vertical-align: middle; /**/
    /*border: 2px solid Black;  /* for test purpose only */
}
.imgAlignLeft
{
    text-align: left; /**/
}
.imgAlignRight
{
    text-align: Right; /**/
}
.imgAlignBottom
{
    vertical-align: bottom; /**/
}
.imgAlignTop
{
    vertical-align: top; /**/
}



/* ... Class's ... */
.button
{
    width: 30%; /**/
    height: 100%; /**/
    min-height: 50px; /**/
    margin: 2%;
    font-size: 2em; /**/
    font-family: 'Times New Roman';
    /*border-radius: 8px; /**/

}
.buttonMiddle
{
    margin-left: 0%; /**/
    margin-right: 0%; /**/
}
.center
{
    text-align: center;
    align-self: center;
    align-content: center;
    align-items: center;
}
.flagsImg
{
    width: 32px; /**/
    height: 31px; /**/
    
}