/**************************************************************************************************/
/* Reset all tags to a default state, so that all browsers start with the same foundation.        */
/**************************************************************************************************/
* { margin:0; padding:0; border:0; box-sizing:border-box; }

/**************************************************************************************************/
/* Overrides of the standard HTML tags.                                                           */
/**************************************************************************************************/
html, body { height:100%; }
body       { font-family:Verdana, Palatino, Arial, times, serif; font-size:1.0em; color:black; background-color:black; overflow:hidden; }
h1         { font-size:1.6em; margin-bottom:0.2em; padding:0.2em 0; text-align:center; }
h2         { font-size:1.3em; padding:0.2em 0 0.2em 0.3em; text-align:left; }
h3         { font-size:1.1em; padding:0.2em 0 0.2em 0.3em; text-align:left; font-weight:bold; }
p          { padding:0 0.7em 1.5em 0.7em; text-align:justify; font-size:1.0em; line-height:1.3em; }
a          { text-decoration:none; font-weight:bold; color:red; }
a:hover    { text-decoration:underline; }
img        { width:100%; height:auto; margin-bottom:-5px; text-decoration:none; }
ul         { margin:0 0 15px 30px; padding:0; border:0; }
ol         { margin:0 0 15px 35px; padding:0; border:0; }
li         { text-align:justify; margin:0px; padding:3px; text-align:justify; font-size:1.0em; line-height:1.3em; }

/**************************************************************************************************/
/* Core layout of the pages. The idea is that there are filler margins on the left and right, so  */
/* that the scrollable content is in the middle, with a fixed maximum width, so that content      */
/* remains readable on large screens.                                                             */
/**************************************************************************************************/
.pg_container   { width:100%; height:100%; background-color:black; }
    .pg_menu    { background-color: black; height:2.5em; }
    .pg_margin  { float:left; width:calc(50% - 350px); height:calc(100% - 2.5em); }
    .pg_content { float:left; width:100%; max-width:700px; height:calc(100% - 2.5em); overflow:hidden; background-color:white; overflow-y:auto; }

/**************************************************************************************************/
/* Custom texts                                                                                   */
/**************************************************************************************************/
.dom_color1      { background-color:rgb(221, 61, 49); }
.dom_color2      { background-color:rgb(1, 100, 168); }
p.center         { text-align:center; }
p.list           { padding-bottom:0.3em }
.menu_btn        { float:left; width:calc((100% - 18px) / 8); margin:5px 1px 5px 1px; padding:6px; font-size:0.8em; text-align:center; border:1px solid black; border-radius:5px; background-color:gold; }
.bdr             { border:1px black solid; }
.shw             { box-shadow:2px 2px 6px black; }
.top             { margin-top:5px; }
.rnd             { border-radius:5px; }
.header_logo     { float:left; width:12%; margin-bottom:11px; padding-top:20px; }
.header_title    { float:left; width:76%; margin-bottom:11px; padding-top:12px; font-size:1.8em; text-align:center; }
.header_nasg     { float:left; width:12%; margin-bottom:11px; padding-top:7px; }
.header_sep      { clear:both; border-bottom:1px solid black; }
.col_l           { float:left; width:45%; }
.col_r           { float:left; width:55%; }
.col_time        { float:left; width:15%; }
.col_desc        { float:left; width:85%; }
.small           { font-size:0.9em; }
div.clr          { clear:both; }
div.img_l        { float:left;  display:block; width:25%; margin:7px; }
div.img_c        { clear:both;                            margin:0 0.7em 0.7em 0.7em; }
div.img_r        { float:right; display:block; width:25%; margin:7px; }
div.img_text     { font-style:italic; font-size:0.7em; text-align:center; }
div.img_text img { margin-bottom:1px; font-style:italic; font-size:0.7em; text-align:center; }
.important       { margin:15px 15px 25px 15px; font-size:1.1em; text-align:justify; background-color:beige; border:1px solid red; border-radius:10px; box-shadow:6px 6px lightgrey; }

/**************************************************************************************************/
/* Overrides for smaller screens.                                                                 */
/**************************************************************************************************/
@media only screen and (max-width:700px)
{
    .pg_margin  { width:0; height:0; display:none; }
    .pg_content { width:100%; }
    .menu_btn   { font-size:0.7em; padding:6px 1px 6px 1px; }
}
@media only screen and (max-width:450px)
{
    body        { font-size:0.8em; }
    h1          { font-size:1.3em; }
    h2          { font-size:1.2em; }
    h3          { font-size:1.1em; }
    p           { font-size:0.8em; }
    a           { font-weight:normal; }
    li          { font-size:0.8em; }
    .pg_margin  { width:0; height:0; display:none; }
    .pg_content { width:100%; }
    .menu_btn   { font-size:0.6em; padding:6px 1px 6px 1px; }
}

/**************************************************************************************************/
/* Overrides for printing the page.                                                               */
/**************************************************************************************************/
@media only print
{
    .pg_margin  { width:0; height:0; display:none; }
    .pg_content { width:100%; background-color:white; }
}

/**************************************************************************************************/