/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ Reset
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
*{
  padding: 0px;
  margin:  0px;
  border:  0px;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ Body, font and margins
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
html{
  font-size: 62.5%; /* 62.5% of 14px = 10px */
}

body{
  background-color: RGB(218,236,255);
  font-size: 1.2rem;
  font-family: verdana, arial, sans-serif;
  color: RGB( 39, 51, 75);
}

p, h1, h2, h3, form{
    margin:0.8rem;
}


/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ Grid
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.container{
  display: grid;
  grid-template-columns: 11.5rem auto;
  padding: 0.2rem;
  grid-row-gap: 0.8rem;
  grid-column-gap: 0.8rem;
  min-width: 80rem;
  max-width: 100rem;
  margin: 0 auto; /* center */

  grid-template-areas: 
  "header header"
  "menu content"
  "footer footer";
}
  
.header{
    grid-area: header;
    height:3.8rem;
    background-color: RGB(182,217,255);
    border: 1px solid RGB( 39, 51, 75);    
}

.menu{
    grid_area: menu;
    min-height: 35rem;
    background-color: RGB( 39, 51, 75);
    border: 1px solid RGB(182,217,255);
    padding: 0.8rem;
}

.content{
    grid-area: content;
    background-color: RGB(218,236,255);   
    border: 1px solid RGB(182,217,255);   
}

.footer{
    grid-area: footer;
/*    height:2.5rem;  */
    background-color: RGB(182,217,255);
    border: 1px solid RGB( 39, 51, 75);
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++  Main menu in header
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
ul.main-menu{
  list-style: none; /* no bullets */
  margin-left: 0.8rem; /* position from the left */
  margin-top: 0.7rem; /* position from the top */
/*  overflow:hidden; /* Required? for the menu to overlap the rest of the text */
}

ul.sub-menu{
  list-style: none; /* no bullets */
}

li.main-menu{
  float: left;
  width: 9.5rem;
  text-align: left;

  border-style: solid;
  border-color: RGB( 39, 51, 75);
  border-width: 1px;
}

/* The border-width property can have from one to four values
(for the top border, right border, bottom border, and the left border)*/

li.main-menu ul.sub-menu{
  position: relative;
/*  z-index: 99;  */
  display: none; /* hide the dropdown */
}

li.main-menu:hover ul.sub-menu{
  display: block; /* display the dropdown */
}

a.main-menu{
  display: block;
  padding: 0.2rem;
  color: RGB( 39, 51, 75);
  background: RGB(218,236,255);
  text-decoration: none;
}

a.main-menu:hover{
  color: RGB(182,217,255);
  background: RGB( 39, 51, 75);
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++ Left Menu and links
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
hr.menu-left{
  border: 1px solid RGB(218,236,255);
  margin-left: 0;
  margin-right: 0;
}

a.menu-left:link{
  text-decoration: none;
  color:RGB(218,236,255);
}
a.menu-left:visited{
  text-decoration: none;
  color:RGB(218,236,255);
}
a.menu-left:active{
  text-decoration: none;
  color:RGB(218,236,255);
}
a.menu-left:hover{
  text-decoration: none;
  color:RGB( 39, 51, 75);
  background-color:RGB(218,236,255);
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ Horizontal line
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
hr{
  border: 1px solid RGB( 39, 51, 75);
  height: 0.4rem;
  background-color: RGB(182,217,255);
  color: RGB( 39, 51, 75);
  margin: 0.8rem;
}

hr.form{
  width: 20rem;
  margin: 0.8rem 0;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ Forms
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
input, textarea, select{
  font-family: inherit;
  font-size: inherit;
  border: 1px solid RGB( 39, 51, 75);
  margin: 0.4rem;
  padding: 0.3rem;
}

input[type="text"], input[type="password"], input[type="email"], textarea{
  width: 20rem;
}

select{
  min-width: 25rem;
}

textarea{
  vertical-align: top;
}

input[type="submit"]{
  background-color: RGB(182,217,255);
  color:RGB( 39, 51, 75);
}

input[type="submit"]:hover{
  border: 1px solid RGB(182,217,255);
  background-color: RGB( 39, 51, 75);
  color:RGB(218,236,255);
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ Pictures
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
img.boxed{
  border: 1px solid RGB( 39, 51, 75);
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
* List
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
ol.main{
  margin-left: 3.7rem;
}

ul.main{
  margin-left: 3.0rem;
  list-style-type: square;
}

li.main{
  margin-right: 3.7rem;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ Tables
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
table{
  border-collapse:collapse;
  margin: 0.8rem;
}

tr{
  background-color:RGB(182,217,255);
}

tr:nth-child(odd){
  background-color:RGB(167,203,240);
}

th{
  text-align: center;
  background-color: RGB( 39, 51, 75);
  color: RGB(218,236,255);
  padding: 0.2rem 0.7rem 0.2rem 0.2rem; 
}

td{
  vertical-align: top;
  padding: 0.2rem 0.7rem 0.2rem 0.2rem; 
}

td.mask_class {
  font-style: italic;
  color: RGB(  0, 96,  0);
}
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++ Links in Tables
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
a.html_table{
  text-decoration: none;
  color:RGB( 39, 51, 75);  
}

a.html_table:hover{
  background-color:RGB(218,236,255);
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ Bold, red, yelllow, light and small
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
.red{
  color: red;
}

.yellow{
  color: yellow;
}

.bold{
  font-weight: bold;
}

.small{
  font-size: 1.0rem;  
}
.light{
  background-color: RGB(218,236,255);
  padding: 0.2rem;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+ help
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
div.hidden{
  display: none;

}

div.unhidden{
  background-color: RGB(182,217,255);
  border: 1px solid RGB( 39, 51, 75); 
  padding: 0.2rem;
  margin: 0.8rem;
}

a.help{
  color: RGB(218,236,255);
}