/*FONTS AND FORMATTING*/

@font-face {
      font-family: pencilpete; /* CAN BE ANYTHING YOU WANT */
      src: url("/assets/fonts/Pencilpetefont-844B.otf");
}
@font-face {
      font-family: sara;
      src: url("/assets/fonts/SaraScribbles.ttf");
} 
@font-face {
      font-family: chalk;
      src: url("/assets/fonts/Chalk Board.ttf");
}
@font-face {
      font-family: tuck;
      src: url("/assets/fonts/TuckShop-Regular.otf");
}    
@font-face {
      font-family: 'Trebuchet_Internal';
      src: url("/assets/fonts/Trebuchet_MS_Bold_Italic.ttf");
      font-style: italic;
      font-style: bold;
}
@font-face {
      font-family: 'Trebuchet_Internal';
      src: url("/assets/fonts/Trebuchet_MS_Bold.ttf");
      font-style: bold;
}
@font-face {
      font-family: 'Trebuchet_Internal';
      src:url("/assets/fonts/Trebuchet_MS_Italic.ttf");
      font-style: italic;
}
@font-face {
      font-family: 'Trebuchet_Internal';
      src:url("/assets/fonts/Trebuchet_MS.ttf");
}
head,body {
      font-family: Trebuchet_Internal;
      font-size: 95%;
      line-height: 115%
}
h1, h2 {
      margin: 0px;
      border:0px;
      padding: 5px 0px 10px 0px;
      line-height: 90%;
}
h3 {
      margin: 0px;
      border:0px;
      padding: 0 0 10px 0;
}
img {
      border: none; 
      vertical-align: middle;
}
hr {
      clear:both;
}
ul {
      text-decoration: none;
      list-style: none;
      margin:0;
      padding:0;
}

/*BANNERS*/

/*top banners*/
.title {
      display:flex;
      flex-flow:row;
      justify-content:space-between;
      align-items:center;
      border-radius: 6px;
}
.banner {
      color:rgb(80, 80, 80);
      display:none;
      font-size:80%;
}
.section-banner img {
      max-width:460px;
}

/*right banner*/
.right {
float:right;
vertical-align:top;
text-align:right;
width:120px;
margin:10px 0 0 0;
}

/*MENU*/

/*navigation*/
#menu-main {
      display:flex;
      text-align:center;
      align-items:center stretch; 
      margin: 0;
      padding: 6px 0;
      padding-left:5px;
	background-color: #008000;
      border-radius: 6px;
      justify-content:space-between;  
}
#menu-bar ul {
      column-count:6;
      column-gap:0;
}
#menu-bar li img{
      margin: 2px 5px;
}
.no-divline{
     margin-right: 11px;
}
#menu-bar li a {
      display:inline-block;
      height:100%;
}
#menu-bar li a:hover {
      filter:brightness(150%);
      backdrop-filter:brightness(101%);
}
/*login section*/
#log-info {
      text-align:right;
      margin-right:10px;
      padding: 0;
      min-width: 70px;
}
#log-info p {
      margin:1px 0;
      font-size:110%;
      font-weight: bold;
}
#log-info a {
      text-decoration: none;
}
#log-info a:hover {
      color: #FF0000;
      text-decoration: none;
}
.logname {
      color: #800000;
}
#login-line {
      display:none;
      border-top:0.5px solid black;
      border-bottom: none;
      width:95%;
}


/*MEDIA QUERIES*/

@media screen and (max-width: 1228px) {
      .title {
          flex-flow:column-reverse;
      }  
      .title-bann, .section-banner {
          text-align:center;
          width:50%
      }
      .section-banner img, .title-bann img {
          width:100%;
          max-width:none;
      }
      .banner {
            display:block;
      }      
}
@media screen and (max-width: 960px) {
      .title-bann, .section-banner {
            width:60%
      }
      #menu-main {
            padding-left:0;
      }
      #menu-bar ul {
            column-count:3;
      }
      #menu-bar {
            padding-left: 70px;
            margin-left:auto;
            margin-right:auto;
      }
      #log-info {
            max-width: 70px;
      }
      #stacked-line {
            display:none;
      }
      .no-divline-stacked{
            margin-right: 11px;
      }
}
@media screen and (max-width: 768px) {
      #menu-bar ul {
            column-count:3;
            column-gap: 5px;
      }
      .title-bann, .section-banner {
            width:80%
      }
}
@media screen and (max-width: 600px) {
      .title-bann, .section-banner {
            width:100%;
      }
      #menu-main {
            flex-flow:column-reverse;
      }
      #menu-bar {
            padding-left: 11px;
      }
      #menu-bar ul {
            column-count:3;
            column-gap: 0;
      }
      #log-info {
            text-align:center;
            align-items:top;
            margin-right:0;
            max-width:100%;
      }
      #login-line {
            display:block;
      }
      
}
@media screen and (max-width: 440px) {
      #menu-bar li img:first-child {
            display:none;
      }
      .banner {
            font-size:70%;
      }
}