/* Main Elements: h div header footer  */
h1, h2, h3, body {font-size: 16px;}




    body { 
      color: var(--body-color);
      background-color: var(--body-bg-color);
      }
      
    header {
        margin: 0;
        padding: 0;
    }
  
    h1, 
    h2 {
        width: 96%;
        border-radius: 4px;
        margin: 4px 8px 4px 8px;
        padding: 8px;
        color: var(--major-color);
        background-color: var(--major-bg-color);
    }
    
    h2 {
        font-size: 1.25em;
    }
    
    h1:hover, 
    h2:hover{
        background-color: var(--major-bg-hover-color);
    } 
    
    h2.admin {
      background-color: var(--minor-bg-color);
    }
    
    h2.admin:hover {
      background-color: var(--minor-bg-hover-color);
    }
    
    
    div.form, 
    div.admin,  
    div.secdiv{
      color: var(--div-color);
      background-color: var(--div-bg-color);
    }
  
  
    li {
        margin: 6px 0 0 0;
    }
       
    div.secdiv, div.messages {
      display: none;
      width: 96%;
      border-radius: 4px;
      margin: 4px 8px 4px 8px;
      padding:8px;
    }
    
    div.messages {
      display: block;
    }
    
    div.show {
      display: block;
    }
    
    div.subsec {
      margin: 4px 0 0 0;
    }
    
    div.form {
      width: 96%;
      border-radius: 4px;
      margin: 4px 8px 4px 8px;
      padding:8px;
    }

    
    div.formbuttons{
      margin-top: 8px;
      text-align: center;
      border-radius: 4px;
    }
    
    footer {
      margin-top: 1em;
      font-style: italic;
      font-size: 75%;
      text-align: center;
    }
    
    footer p{
        margin: 4px;
        padding: 0px;
    }

 
/* ============= FORM ELEMENTS  =============*/    
    input[type=text],
    input[type=password],
    input[type=email] {
      width: 96%;
    }    
    
    input[type=submit], 
    input[type=reset] {
      width: 60%;
      margin: 4px;
      padding: 4px;
      font-size: 1em;
      font-weight: bold;
      text-align: center;
      border-radius: 12px;
      color: var(--minor-color);
      background-color: var(--minor-bg-color);
    }
    
    input[type=submit]:hover, 
    input[type=reset]:hover {
      background-color: var(--minor-bg-hover-color);
    }
    
    div.login [type=text],     
    div.login [type=password]{
      width: 96%;
    }    
    div.login [type=submit],     
    div.login [type=reset]  {
      width: 40%;
    } 
    form.h3 input[type=text] {
         width: 50%;
    }
    form.h3 input[type=submit],
    form.h3 input[type=reset] {

        width: 20%;
        margin: 4px;
        padding: 4px;
        font-size: 0.875em;
        font-weight: bold;
        text-align: center;
        border-radius: 6px;
    }
     
/* ======= END FORM ELEMENTS======== */

/* List Elements */
    
    section {
      margin: 0;
      padding: 0;
    }
        
    span.subsec {
      display: block;
      float: left;
      width: 140px;
      margin: 0 0 0 0;
      padding: 0;
    }
    span.li {
     padding: 2px 6px 0 6px;
    }
    
    span.link {
      margin: 0 0 0 0;
    }
    span.edit {
      margin: 0 10px 0 0;
    }
    span.desc {
      display: block;
      width: 80%;
      margin-top: 1em;
    } 
    td, th{
      padding: 2px;
      vertical-align: top;
    }
    
 /*=============== LINKS + LINKS COLOR ==============*/
   a:link, 
   a:visited {
      text-decoration: none;
      color: var(--body-color);
   }

    a:link, 
    a:visited, 
    .link a:link, 
    .link a:visited, 
    .admin a:link,
    .admin a:visited{
       padding: 2px 6px 0 6px;
       border: 1px solid var(--div-bg-color);
       border-radius: 4px;
    }      
      
    .link a:hover {
      text-decoration: none;
      color: var(--div-color);  
      background-color: var(--major-bg-hover-color); 
      border: 1px solid var(--link-border-color);   
    }
    
    .admin a:hover {
      text-decoration: none;
      color: var(--div-color);
      background-color: var(--minor-bg-hover-color);
      border: 1px solid var(--link-border-color);  
    }
    
    footer .admin a:link, 
    footer .admin a:visited {
        border: 0px solid #ccc;
    }
    
    h1.admin a:link,
    h1.admin a:visited {
         color: #fff;
         border: 1px solid var(--major-bg-color);
    }
    h1.admin a:hover {
        border: 1px solid #ccc;
        background-color: var(--major-bg-hover-color);
    }
       
    
/* ========== COLOR ============  */
     
    .messages {
        color: darkred;
    }
/* =========== Addendum =========*/
h3 {
    font-size: .875;
    width: 50%;
    border-radius: 4px;
    margin: 4px 8px 4px 8px;
    padding: 4px;
    background-color: var(--minor-bg-color);
    color:            var(--minor-color);
}

h3:hover {
    background-color: var(--minor-bg-hover-color);
}

div.h3div {
    display: none;
}

h1 table {
    width: 96%;
}
td#home {
    width: 48%;
    font-size: 1.5em;
}

td#logout {
    width: 47%;
    font-size: 0.875em;
    text-align: right;
}