/*   GLOBAL DEFAULTS
----------------------------------------------------------*/

form 
{
    background-color: #ADD8E6;  /* Light Blue standard for the site */
}


body
{
    background-color: #ADD8E6;  /* Light Blue standard for the site */
}

a:link, a:visited {
    color: #034af3;
}

a:hover {
    color: #1d60ff;
    text-decoration: none;
}

a:active {
    color: #034af3;
}

p {
    margin-bottom: 10px;
    line-height: 1.6em;
}


/*   HEADINGS
----------------------------------------------------------*/

/*  font-family defaults to     Windows   Times New Roman  or  Segoe UI
                                macOS     Helvetica
                                Linux     Liberation Serif or  DejaVu

            Using default fonts might make the display look off

               Arabic       "Tahoma", "Amiri", "Arial", "Scheherazade"
               Thai         "Tahoma", Leelawadee", "Noto Sans Thai"
               Russian      "Arial", "Verdana", "Georgia", "Times New Roman"
    Chinese/Japanese/Korean "Simsun", "MS Mincho", "Noto Sans CJK", "Yu Gothic"

            Look at Google Fonts or Noto Series for language support

*/

h1, h2, h3, h4, h5, h6 
{
    /* font-family: "Segoe UI", "helvetical Neue", Arial, Sans-Serif; */
    color: #666666;
    margin-bottom: 0px;
}

h1 { font-size: 1.8em; font-weight: 400; }      /* overrides for basic settings            */
h2 { font-size: 1.6em; font-weight: 600; }      /* see also  .header h1   and  .footer h1  */
h3 { font-size: 1.3em; font-weight: 500; }
h4 { font-size: 1.1em; font-weight: 400; }
h5, h6 { font-size: 1em; font-weight: 300; }   /* consider using h5 and h6 for special formatting  */

.rightColumn > h1, .rightColumn > h2,
.leftColumn > h1, .leftColumn > h2 
{
    margin-top: 0px;
}                            /* this is for a direct child of an element with those classes       */
                             /* By default h1 etc have a 1em size which makes lining up difficult */
                             /* DIRECT child means not encapsulated.  It must be the next level   */



/*   MAIN PAGE STRUCTURE
----------------------------------------------------------*/

.page
{
    width: auto;
    margin: auto;
    border: 1px solid Red;
    background-color: Aqua;
}

.top-navigation
{
    width: auto;
    background-color: Aqua;
    padding: 10px;
    border-bottom: 1px solid Red;
    text-align: left;
}

.side-navigation
{
    float: left;
    width: 160px;
    background-color: Aqua;
    padding: 10px;
}

.main-display
{
    margin-left: 180px;
    padding: 20px;
    padding-right: 50px;
    background-color: Aqua;
    height: auto;
    width: auto;
}

.display-area
{    
    padding: 10px;
    margin-bottom: 20px;
    margin-right: 300px;
    background-color: Aqua;
}

.footer
{
    clear: both;
    text-align: center;
    padding: 10px;
    font-size: 28px;
    color: Blue;
    background-color: Aqua;
    width: auto;
}

.topButton
{
    display: inline-block;
    width: 140px;
    height: 40px;
    margin: 5px auto;
    font-size: 14px;
    background-color: Blue;
    color: White;
    border: 2px solid Yellow;
    cursor: pointer;
}

.navButton
{
    display: block;
    width: 140px;
    height: 40px;
    margin: 5px auto;
    font-size: 14px;
    background-color: White;
    color: Blue;
    border: 2px solid Yellow;
    cursor: pointer;
}

.navButton:hover
{
    background-color: #00CED1;
    color: White;
}

.slideContainer
{
    background-color: White;
}

.slider
{
    background-color: White;
}