/* 01/06/21 Created a new header using KSUs Zurb Foundation 
            Started with the Office

    06/29/22 Created Orange theme based on blue but replace blue #003976 with orange #4f2c1d
            --bgsu-orange: #FD5000;
            --bgsu-orange-hover: #FF7300;
            --bgsu-brown: #4F2C1D;
            --bgsu-gold: #F5C163;
            --bgsu-tan: #B99B80;
            --bgsu-rose: #E3A492;
            --bgsu-coral: #F37B6C;
            --bgsu-seafoam: #ff7200;
            --bgsu-teal: #FD5000;

    11/30/22 Changed the new light yellow highlight color #FFFFDB (used to be #FAFFBD),
             to the BG website official light tan color #F5E7D8 per request
*/
html
{
    font-size: 16px;
}
body {
    font-size: 100%; /* This helps if using em font sizing.  100% is 16px*/
}
.homepagenotice {
    font-size: medium;
    font-weight: normal;
    padding: 12px 4px; /* 8 for top and bottom, 4 for left and right */
    background-color: #F5E7D8;
    border: solid;
    border-width: 1px;
    border-color: #4F2C1D; /* 11/30/22 changed from orange #fd5000 to dark brown when changed the background color to tan  */
    max-width: 1500px;
    display: table;
}
.homepagetext {
    max-width: 1500px;
}

.login-button {
    background-color: #fd5000; /* BG orange */
    border: 2px solid #4f2c1d; /* BG brown */
    color: white;
}

    .login-button:hover, button:focus, .button:hover, .button:focus {
        background-color: #fd5000; /* BG orange */
        border: 2px solid #4f2c1d; /* BG brown */
        color: #4f2c1d; /* BG brown */
    }

.blueheader {
    min-width: 100% !important; /* This made the header take the full width of the screen*/
    background-color: #fd5000;
    color: white;
    border: none; /* Put the gold border as a separate row so that it was maintained without regard to column sizes */
}
.bluebackground { /* 01/13/22 Added for UT logo */
    background-color: #fd5000; /* Kent Blue  */
    color: white;
}

.LogoBackgroundBG { /* 01/13/22 Added for BG logo */
    background-color: #fd5000; /* BG orange */
    color: white;
    max-width: 332px;
}

.blueheaderbottomborder {
    /*border-bottom: 5px solid #4f2c1d;*/ /* Put the gold border as a separate row so that it was maintained without regard to column sizes */
    /*display: inline-block;
    border-top: 0;
    border-left: 0;
    border-right: 0;
    width: 100%;*/
    display: none; /* Line not needed for BG */
}

.TTTheaderContainer {
    width: 100%;
    border: 20px;
    background-color: #fd5000;
    text-align: left;
    padding-left: 12px;
    height: fit-content; /* 04/27/22 It was expanding to the height of the screen.  This made it fit. */
}

.headercontainer {
    display: flex;
    flex-direction: row;
    gap: 0;
    width: 100%;
}

.logocontainer {
    flex-shrink: 0; /* Do not resize the links column */
    flex-grow: 0;
    flex-basis: 316px;
    flex-direction: unset;
    max-width: 316px;
   /* height: 100%;  This actually caused a gap when the menu wrapped*/
    max-height: 100%;
}


.menucontainer {
    padding-left: 1rem;
    flex-basis: 0; /* use the full available width */
    flex-grow: 1; /* auto expand as space is available */
}

.menucontainer table {
    display: table;
}

@media screen and (max-width: 900px) {
    .headercontainer {
        flex-direction: column;
    }
    .menucontainer {
        padding-left: 4px;
    }
    .blueheadermenu {
        padding-left: 0;
        margin-left: 0;
    }
    .logocontainer {
        max-width: 100%;
        width: 100%;
        max-height: 110px;
    }
}

.Welcome {
    font-size: 1.1em; /* 06/16/22 Make a bit bigger.  Bold was hard to read. */
    padding-top: 2px;
    padding-bottom: 4px;
    padding-left: 12px;
    color: white;  
}
.logo {
    height: auto;
    max-height: 110px;
    width: 80%;
}
    .logo img {
        height: 100%;
        max-height: 110px;
        width: auto;
        padding: 8px;
        /*padding-top: 12px;*/
        padding-left: 20px;
    }
.Logoff {
    font-weight: bold;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-left: 12px;
}

.Logoff a {
    font-family: "Roboto Slab",Georgia,"Times New Roman",Times,serif;
    /*font-size: small;*/
    width: auto;
    color: white;
    background-color: #fd5000;
    text-rendering: optimizeLegibility;
    font-style: normal;
    font-weight: lighter;
    text-transform: none;
    text-decoration: underline;
    text-decoration-color: #aeeae5;
    text-decoration-style: solid;
    text-align: right;
    padding-bottom: 0px;
}
    .Logoff a:hover {
        color: white;
        text-decoration: underline;
        text-decoration-color: #4f2c1d;
    }


.blueheadermenu {
    /* 
                The next two lines were key to getting the menu to center and still wrap items if the 
                window was narrowed.  If the menu was set to center or was set to 100% width, they would not wrap.
            */
    display: inline-block;
    justify-content: left;  /* 01/17/22 Was center */
    font-size: 1em;
    /*margin-left: 24px;*/
}


.TTTheaderRow a, .TTTheaderRow a:hover {
    font-family: NationalBold,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-weight: 700;
    text-align: left;
    width: auto;
    color: white !important;
    background-color: #fd5000;
    text-rendering: optimizeLegibility;
    font-style: normal;
    text-transform: none;
    text-decoration: underline;
    text-decoration-style: solid;
    line-height: 1;
    font-size: 1.2em;
}
.TTTheaderRow a {
    text-decoration-color: #f5c163; /* Used to underline links at bg */
}
    .TTTheaderRow a:hover {
        text-decoration-color: white;
    }
.TTTheader {
    margin: 0;    
    padding-top: 16px;
    padding-left: 12px;
    padding-bottom: 12px;
    text-align: left; /* 01/17/22 Was center */
    width: 100%;
    display: block;
}

    .TTTheader a {
        font-family: NationalBold,"Helvetica Neue",Helvetica,Arial,sans-serif;
        font-weight: 700;
        text-align: left;
        width: auto;
        color: white !important;
        background-color: #fd5000;
        text-rendering: optimizeLegibility;
        font-style: normal;
        text-transform: none;
        text-decoration: underline;
        text-decoration-color: #aeeae5;
        text-decoration-style: solid;
        line-height: 120%;
        font-size: 1.2em;
    }

        .TTTheader a:hover {
            color: white;
            text-decoration: underline;
            text-decoration-color: #4f2c1d;
        }

.blueheaderlogo {
    width: 100%;
    max-width: 185px;
    height: auto;
}
.utheaderlogo {
    width: 100%;
    max-width: 200px;
    height: auto;
    padding-top: 8px;
    padding-left: 8px;
}



/* *********************************************************************** */
/*header {*/
  /*padding: 1.5em;*/
  /*margin: 0 auto;*/
  /*padding-top: 1.25em;*/ 
  /*text-align: center;
}

.header a {
  width: 285px;
  display: inline-block;*/    /* 12/19/20 Was block           */
  /*margin: 0 auto;
}


.header-blue {
  background-color: #002664;
  background-image: -webkit-gradient(linear, 14% 14%, 14% 86%, color-stop(0, #002147), color-stop(0.21, #002751), color-stop(1, rgba(0, 60, 120, 0.96)));
  background-image: -webkit-linear-gradient(-90deg, #002147 0%, #002751 21%, rgba(0, 60, 120, 0.96) 100%);
  background-image: -webkit-linear-gradient(270deg, #002147 0%, #002751 21%, rgba(0, 60, 120, 0.96) 100%);
  background-image: linear-gradient(180deg, #002147 0%, #002751 21%, rgba(0, 60, 120, 0.96) 100%);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff002147,endColorstr=#f4003c78,GradientType=0)";
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff002147,endColorstr=#f4003c78,GradientType=0);
}

.logo-white {
  background-image: url(images/Kent-State-Logo-White-Fallback@1x.png);
  background-repeat: no-repeat; 
}*/

/* Retina-Quality White Logo */

/*@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi){
    .logo-white {
        background-image: url(images/Logos/kent_state_university_Horizontal_124-White-cpm.png);*/ /* 12/19/20 was  background-image: url(images/Kent-State-Logo-White-Fallback@2x.png); */
        /*background-repeat: no-repeat;
        background-size: 100%;
    }
}

.logo-blue span {
  display: block; 
  width: 0; 
  height: 0; 
  overflow: hidden;
}

.logo {
  height: 60px;*/                 /* 12/19/20 was 88px;       */
  /*width: 185px;*/                 /* 285px;                   */
  /*background-size: 100%;
  margin: 10px;*/                 /* 12/19/20 was  0px auto;  */
/*}*/


/* Small Screen Sizes */


/*@media screen and (max-width: 40em) {
  .header {
    padding-top: 0.75em;
  }

  .header a {
    height: 2.7em;
    margin: 0 auto;
    width: 10em;
  }

  .logo {
    width: 10em;
    margin-right:0;
    margin-left:0;
    margin: 0 auto;
    height: 3em;
  }
}*/