body             {background-color: white;
                  font-family: Verdana, Arial;
                  font-size: 16px;
                 }

em               {font-style: normal; color: black; background:#dddd55}

img              {max-width: 100%; height: auto}

input.btn        {color:#fff;
                  background-color: rgb(62%, 7.5%, 18.75%);
                  border: 1px;
                  font-size: 15px;
                  font-family: Verdana;
                  vertical-align: middle;
                  height: 24px;
                  cursor: pointer;
                 }

input.btnhov     {background-color: rgb(93%, 82%, 4.5%);
                 }

/* CSS for menu
   define colors for: menu background
                      sub menu background
                      font - clickable
                      font - not authorized
                      border
*/


ul#navigation
{   /* start of menu */
    margin: 0px -40px;     /* respectively top margin and left margin */
    position:fixed;         /* fixed ensures no_scroll */
    top: 0;                 /* ensures that the menu stays at the top*/
    float:left;             /* ensures the menu items stay in the correct position */
}


ul#navigation li
{   /* controls the main menu list items */
    display:inline;           /* ensures the menu items are listed left-to-right */
    font-size:32px;           /* font size */
    font-family: Verdana;     /* Verdana, Helvetica? */
    margin:00;
    padding:0;                /* space between items */
    float:left;               /* ensures equal spacing between the different menu items */
    position:relative;        /* ensures that the submenu appears underneath the correct hovered item */

    border-left:1px solid black;

}


ul#navigation li a
{   /* controls the descedent main menu list items */
    padding:5px 25px;         /* menu items padding (vertical, horizontal resp.) */
    color:#000000;            /* black menu item text;*/
    text-decoration:none;
    display:inline-block;
    border-top:1px solid lightgrey;
    border-bottom:1px solid lightgrey;
//  background: rgb(244,244,244);                                     /* background of the menu */
    background: lightblue;                                            /* background of the menu */
    -webkit-transition:color 0.2s linear, background 0.2s linear;
    -moz-transition:color 0.2s linear, background 0.2s linear;        /* transition resets the opacity and visibilty back to default in the given amount of time */
    -o-transition:color 0.2s linear, background 0.2s linear;
    transition:color 0.2s linear, background 0.2s linear;
}


ul#navigation li:first-child
{   /* codes for the left border of the menu */
    border-left: 1px solid lightgrey;
}


ul#navigation li:last-child
{   /* codes for the right border of the menu */
    border-right: 1px solid lightgrey;
}


ul#navigation li a:hover
{   /* ensures that there is a hover */
    background: rgb(244,244,244);          /* background for hover */
    color:#FFFFFF);                        /* white for text */
}


ul#navigation li:hover > a
{   /* This sets the background color for the menu and submenu hover
     * for QSAPI blue color look-a-like use background: dodgerblue
     */
    // background: rgb(0, 108, 108);
    background: lightblue;
    color: white;
}


ul#navigation li.navigation_noauth:hover > a
{   /* ensures that there is no hover color over not authorized menu items */
    background: null;
}


ul#navigation li.navigation_nohover:hover > a
{   /* ensures that there is no hover color on certain main menu items */
    background: rgb(244,244,244);
    color: black;

}


ul#navigation li.navigation_noauth_wsep:hover > a
{   /* ensure that there is no hover color over not authorized
     * menu items with separator line
     */
    background: null;
}


ul#navigation li:hover > ul
{   /* This codes for the Drop-Down Navigation that appears when your mouse hovers over the menu */
    visibility:visible;    /* Makes sure that the menu becomes visible */
    opacity:1;             /* use value 0-0.99 to make transparant */
}


ul#navigation ul, ul#navigation ul li ul
{   /* This controls the submenu list, not the list items in the submenu */
    list-style: none;
    margin: 0;
    padding: 0;
    visibility:hidden;      /* This makes sure that the submenu only appears when you hover over the desired main menu item */
    position: absolute;
    z-index: 99999;
    width:200px;
    background: rgb(244,244,244);                /* background for submenu*/
    border-top:1px solid lightgrey;
    border-right:1px solid lightgrey;
    border-left:1px solid lightgrey;
    box-shadow:0 2px 2px -1px /* rgba(0, 0, 0, 0.055)*/ lightgrey;         /* bottom border of submenu */
    opacity:0;
    -webkit-transition:opacity 0.2s linear, visibility 0.2s linear;
    -moz-transition:opacity 0.2s linear, visibility 0.2s linear;
    -o-transition:opacity 0.2s linear, visibility 0.2s linear;         /* transition resets the opacity and visibilty back to default in the given amount of time */
    transition:opacity 0.2s linear, visibility 0.2s linear;
    /* The trasition delay feature is what makes the menu less jitery.
       It essentially delays the reaction timeof the menu when the user switches between different menu items.
       Increase the time to make the menu less jittery, decrease the time to make it more jittery.*/
    transition-delay: 0.3s;
}


ul#navigation ul
{   /* starting position (top left coordinate) of sub menu */
    top: 27px;
    left: 1px;     /* sub menu 1px to the right */
}


ul#navigation ul li ul
{   /* This determines the starting position of the sub sub menu */
    top: 0;
    left: 201px;   /* NB: one extra compared to with of sub menu */
}


ul#navigation ul li
{   /* Controls the dividers of the submenu
    clear:both;   /* No floating elements allowed on either side of the dividers */
    width:100%;   /* Ensures that the dividers cover the whole length of the submenu */
}


ul#navigation ul li a
{   /* This controls the submenu list elements */
    background: none;    /* Another background for the submenu */
    padding:7px 15px;      /* Aubmenu items padding (vertical, horizontal resp.) */
    color:#000000;         /* Black submenu text*/
    text-decoration:none;
    display:inline-block;
    border-top:0 none;      /* This makes sure that there aren't borders between each individual element in the submenu */
    border-bottom:0 none;   /* This makes sure that there aren't borders between each individual element in the submenu */
    float:left;
    clear:both;             /* This makes sure that floating text doesnt appear at either side */
    width:170px;
}


ul#navigation ul li a:not(:only-child):after
{    /* adds an arrow when an item in the submenu has a submenu
     * limitation;  this does not work correctly if _noauth or _wsep item
     */
    content: '  \25BA';
}


ul#navigation ul li.navigation_wsep
{   /* submenu item
     * authorized plus added line separator
     */
    border-bottom:1px solid black;         /* add separator line, use different color than background color */
}


ul#navigation ul li.navigation_noauth a
{   /* submenu item
     * no authorization
     */
    background:none;           /* assists in disabling hover */
    color:rgb(201,201,201);    /* grey out no-auth text */
}


ul#navigation ul li.navigation_noauth_wsep a
{   /* submenu item
     * no authorization plus added line separator
     */
    background:none;               /* assists in disabling hover */
    color:rgb(201,201,201);        /* grey out no-auth text */
    border-bottom:1px solid black; /* add separator line, use different color than background color */
}