/*
 * File: stylesheet.css
 *
 * Change History
 *  6/24/2023: Andrew - Migrated from html version of fieldsystem.com
 *  2/13/2025: Andrew - Integrated class definitions for an Activity Toolbar (ActivityToolbar)
 *  5/20/2025: Andrew - Created class definitions to support generating Page Footers
 *
 */

/***
TABLE OF CONTENTS

ActivityToolbar - classes that cooperate to create a Toolbar available for use with Activities
Body - Overrides to establish site preferences
BANNER - classes that cooperate to create a banner and logo bar - To be deprecated
NAVBAR - classes that cooperate to create a horizontal navigation bar
COPYRIGHT - Layout used to produce the copyright message at the footer of each page.
YOUTUBEVIDEO - Layout used to ornament YouTube videos within a page
RELIMG RELDESC - Layout used to create responsive sized video links
ERRORDIALOG - Layout used to display an ErrorMessage within an embedded Dialog Box
ERRORMESSAGE - Layout used to decorate ErrorMessages, which may be wrapped inside another div
FORM-SUBMIT-BUTTON - Layout used to decorate buttons within a form
INFODIALOG - Layout used to display an InfoMessage within an embedded Dialog Box
INFOMESSAGE - Layout used to decorate InfoMessages, which may be wrapped inside another div
ProfileImage - Layout to produce edges and borders for Profile Images
Header - Classes used to implement Activity Headings
PageFooter - Classes used to implement a common Page Footer

***/

/***
COLOR PALETTE (codes are used since some browsers can't agree on color schemes...)

#800000 - burgendy (background for menubars)
#600000 - dark burgendy (hover background for menubars)
chocolate - shadow used for buttons

***/

.ActivityToolbar {
    background-color: #800000;
    white-space: nowrap;
}

.Activitytoolbar-btn {
    background-color: #800000;
    color: white;
    display: inline-block;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
.ActivityToolbar-btn:hover, .ActivityToolbar-dropbtn:focus {
    background-color: #A00000;
    font-weight: bold;
    padding: 14px;
}
.ActivityToolbar-dropdown {
    position: relative;
    display: inline-block;
}
.ActivityToolbar-dropbtn {
    background-color: #800000;
    color: white;
    display: inline-block;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
    white-space: nowrap;
}
.ActivityToolbar-dropbtn:hover, .ActivityToolbar-dropbtn:focus {
    background-color: #A00000;
    font-weight: bold;
    padding: 14px;
}
.ActivityToolbar-item {
    display: inline-block;
    white-space: nowrap;
    text-decoration: none;
}
.activityToolbar-item a:hover {
    background-color: #A00000;
    font-weight: bold;
    padding: 14px;
}
/* The ActivityToolbar-spacedItem is used to add space to the left
   of an ActivityToolbar-item.
   It is designed for the 2nd and successive toolbar items.
   For improved readability, the ActivityToolbar-item content can be
   placed within the ActivityToolbar-spacedItem
*/
.ActivityToolbar-spacedItem {
    display: inline-block;
    white-space: nowrap;
    text-decoration: none;
}
.ActivityToolbar-spacedItem::before {
    content: "|";
    padding: 12px;
    color: white;
}
.ActivityToolbar-submenu {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}
.ActivityToolbar-submenu a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}
.ActivityToolbar-submenu a:hover {
    background-color: #ddd;
}

/* Initial apps reference the ActivityToolbar as an ID, not a class.  Once all of these
 * older references are replaced, the ID specifications can be removed.
 */
#ActivityToolbar {
   overflow: hidden;
   vertical-align: middle;
   height: 44px;
   line-height: 44px;
   background-color: #800000;
   white-space: nowrap;
}

#ActivityToolbar a {
   float: left;
   color: #c0c0c0;
   text-align: center;
   padding-left: 50px;
   text-decoration: none;
   font-size: 17px;
}

#ActivityToolbar a:hover {
    color: white;
}

#ActivityToolbar a.active {
    background-color: #606060;
    color: white;
}

Body {
    background-color: linen;
    font: 12pt/14pt Arial Bold, Helvetica, Gadget, sans-serif;
}

.Copyright {
    /* position: relative;
    top: 50px;
    width: 100%;
    padding-top: 40px;
    */
    font-size: 10px;
}


.ErrorMessage, .ErrorDialog { font-family: Arial, Helvetica, sans-serif; font-size: 12; color: red; font-weight: bold; }
.ErrorDialog {
    border-style: solid;
    border-width: 5px;
    border-radius: 1em;
    clear: both;
    padding: 25px 50px;
    background-color: yellow;
    font-size: 16;
}

.form-submit-button {
    color: white;
    background: #800000;
    border: 1px solid #800000;
    border-radius: 12px;
    border-style: solid;
    border-width: 1px;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
		box-shadow 0.15s ease-in-out;
    box-shadow: 2px 2px 5px chocolate;
    padding: 0.375rem 0.75rem;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
}

.InfoMessage, .InfoDialog { font-family: Arial, Helvetica, sans-serif; font-size: 12; color: #008080 /* teal */ }
.InfoDialog { 
    border-style: solid;
    border-width: 5px;
    border-radius: 1em;
    clear: both;
    padding: 25px 50px;
    background-color: #E0FFFF; /* lightcyan */
    font-size: 16;
}

/** NAVBAR **/

.navbar {
    margin: 0px;
    padding: 0px;
}

ul.navbar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #800000;
}

.navbar .dropdown {
    float: left;
}

.navbar a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 8px 24px;
    font-size: 14px;
    text-decoration: none;
}

.navbar a:hover, .dropdown:hover .dropbtn {
    background-color: #600000;
}

.navbar li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #f1f1f1
}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #600000;
}

/** GLOBAL NAV */

.globalNav {
    float: right;
    display: block;
    /* overflow: hidden; */
}

/* Style for links inside the global navigation bar */
.globalNav a {
    float: right; /* not sure if this is required, or just redundant */
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: normal;
    min-width: 160px;     /* specify by trial and error, helps to establish positioning across languages */
}

/* Style for links inside the global navigation bar during hover (emphasis is needed) */
.globalNav a:hover {
    font-size: 18px;
    font-weight: bold;
}

/** PRIVATE NAV **/

.privateNav {
    color: red;
    background-color: blue;
    display: inline;
}

.privateNav .left {
    color: green;
    background-color: white;
    display: inline;
    float: left;
}

.privateNav .right {
    float: right;
    color: yellow;
    background-color: red;
}

.privateNav:after {
    /* content: "Spock"; */
    clear: both;
}


/** BANNER **/

div.banner {
    display: table;
    padding: 5px;
    width: 100%;
    margin: 5px 30px;
}
div.banner .text {
    vertical-align: middle;
    display: table-cell;
    text-align: justify;
    /* font-family: Arial Bold,Gadget,sans-serif; */
    font-size: 36px;
}
div.banner .img {
    vertical-align: middle;
    display: table-cell;
    padding-right: 20px;
    width: 50px;
}
div.banner.img img {
    width: 100%;
    height: 150px; /* */
    vertical-align: middle;
}

/** Header **/

div.Header {
    display: table;
    /* display: inline-block; padding: 40px 0px 0px 0px; */
    padding: 5px;
    width: 100%;
    margin: 5px 30px;
}

div.Header .Title {
    vertical-aligh: middle;
    display: table-cell;
    text-align: justify;
    font-size: 36px;
    font-weight: bold;
    padding: 0px 0px 15px 0px; /* Top Right Bottom Left */
}

div.Header .Icon {
    float: left;
    padding: 0px 40px 10px 10px; /* Top Right Bottom Left */
}

div.PageFooter {
    overflow:auto;
    /* Enable colors for testing */
    /*
    color: yellow;
    background: red;
    */
}

div.PageFooter .PageFooterLeft {
    float: left;
    padding: 20px 0px 0px 0px; /* top right bottom left */
    /* Enable colors for testing */
    /*
    color: white;
    background: blue;
    */
}

div.PageFooter .PageFooterRight {
    float: right;
    padding: 0px 32px 32px 0px; /* top right bottom left */
    /* Enable colors for testing */
    /*
    color: grey;
    background: green;
    */
}

/** RELIMG RELDESC **/

div.relimg {
    border: 1px solid #ccc;
}

div.relimg:hover {
    border: 1px solid #777;
}

div.relimg img {
    width: 100%;
    height: auto;
}

div.reldesc {
    padding: 15px;
    text-align: center;
}

.responsive {
    box-sizing: border-box;
}

.responsive {
    padding: 0 6px;
    float: left;
    width: 24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
        width: 49.99999%;
        margin: 6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
        width: 100%;
    }
}

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

/** YOUTUBEVIDEO **/

.YouTubeVideo {
    margin-bottom: 20px;
    box-shadow: 4px 4px grey;
}

/** ProfileImage **/

.ProfileImageIcon {
    /*              top-left  top-right  bottom-right  bottom-left */
    border-radius:  12px      12px       12px          12px;
    /* border-radius: 16px; */
    background: #FFFFFF;
    border: 1px solid #800000;
    padding: 0px;
    width: 32px;
    height: 32px;
}

.ProfileImageMedium {
    /*              top-left  top-right  bottom-right  bottom-left */
    border-radius:  48px      48px       48px          48px;
    /* border-radius: 64px; */
    background: #FFFFFF;
    border: 1px solid #800000;
    padding: 0px;
    width: 128px;
    height: 128px;
}