* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   list-style-type: none;
   text-decoration: none;

   font-family: 'bookman old style';
   font-size: 16px;
}

body {
   background-color: #f0f8ff;
}

body p {
   padding: 5 10 10;
}

#sitetitle {
   margin:5 10 10;
   color:#b8860b;
   font-size:1.5em;
   font-weight:bold;
   text-align:center;
   text-shadow:rgba(0,0,0,.4) 2px 1px 1px;
}

/*****************************************
 * Header
 *****************************************/
header {
   background: #f0fff8;
   border-bottom:2px solid #c0c0c0;
}

#header-container {
   width: 100%;
   margin: auto; 
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   z-index: 10;
}

#logo-container {
   margin: 5 5 3 3;
   display: flex;
   flex-wrap: nowrap;
   align-items: flex-end;
}

#logo {
   width: 50px;
   height: 50px;
   margin-right: 5;
   display: block;
}

#schoolname {
   color: #808080;
   padding-left: 8;
   height: 34px;
   display: block;
   border-left: 1px solid navy;
}

#schoolname > b {
   color: #b0b0b0;
   display: block;
   font-size: 1em;
   white-space: nowrap;
}

#schoolname > i {
   color: #80c080;
   display: block;
   font-size: .8em;
   font-style: italic;
   white-space: nowrap;
}

/*.login {width:420;background-color: lightgreen;}*/
.student_main {background-color: lightyellow;}
.message {color: red;}
.login {
   width:420px;
   background-color:lightgreen;
   display:flex;
   flex-flow:row wrap;
   justify-content: center;
   grid-gap:10px;
}


/*****************************************
 * Menu
 *****************************************/
.main-menu {
   margin-left:auto;
   margin-right:auto;
   margin-bottom:0px;
   display:flex;
   justify-content:flex-start;
}

nav > ul {
   margin:0;
   padding:0;
   display:flex;
   flex-wrap:wrap;
   justify-content:flex-start;
   flex-direction:column;
   list-style:none;
}

nav > ul > li {
   flex:0 1 auto;
   margin:0;
   padding:0;
   position:relative;
   transition:all linear 0.1s;
   white-space:nowrap;
}

nav > ul > li:first-of-type {
   border-left:none;
}

nav > ul > li > a {
   color:black;
   text-align:left;
   text-decoration:none;
   text-transform:uppercase;
   letter-spacing:1px;
   white-space:nowrap;
   padding:5 20 5 20;
   /*border-bottom:2px solid #dedede; */
   border-bottom:2px solid rgba(0,0,0,0);
   display:flex;
   justify-content:flex-start;
   flex:0 1 auto;
   overflow:visible;
   transition:all linear 0.1s;
}

nav > ul > li:hover > a {
   background-color:rgba(0,0,0,.10);
   border-bottom:2px solid rgba(0,0,0,.10);
}

nav > ul > li > a:hover {
   border-bottom:2px solid orange;
}

nav > ul > li a + div {
   background:#dedede;
   display:none;
}

nav > ul > li:hover a + div {
   display:block;
}

nav > ul > li a + div > ul {
   list-style-type:none;
}

nav > ul > li a + div > ul > li {
   margin:0;
   padding:0;
   border-bottom:1px solid rgba(0,0,0,.15);
}

nav > ul > li a + div > ul > li:last-of-type {
   border-bottom:2px solid rgba(0,0,0,.15);
}


nav > ul > li a + div > ul > li:hover {
   background-color:rgba(0,0,0,.15);
   border-bottom-color:orange;
}

nav > ul > li a + div > ul > li > a {
   color:black;
   display:block;
   letter-spacing:1.5px;
   padding:5 20 5 20;
   text-decoration:none;
   text-transform:none;
}

/*****************************************
 * Animation Container
 *****************************************/
.animations-container {
   display:flex;
   justify-content:flex-start;
   flex-direction:column;
   flex-wrap:wrap;
}

.animation-item {
   border:1px solid #ffffff;
   flex:1;
}

.left-animation {
   overflow: hidden;
}

.right-animation {
   overflow: hidden;
}

/*
.grid-container {
   display:flex;
   justify-content:center;
}

.grid {
   display:flex;
   justify-content:center;
   flex-flow:row wrap;
   align-items:center;
}
*/

.staff-container {
   background-color:#f0f8ff;
   display:flex;
   flex-flow:row wrap;
   justify-content: space-between;
   grid-gap:10px;
}

.staff {
   border:1px solid #e0e080;
   border-radius: 10px;
   padding:5;
   display:flex;
   background:#e0ffc0;
   /*flex-grow:1;*/
}

.staff-photo > img {
   border:3px solid #e0e080;
   border-radius: 10px;
   width:85px;
   height:110px;
   background:#f0f8cf;
}

.staff-info {
   padding:5 20 10 10;
   width:230px;
   height:110px;
}

.staff-info name {
   display:block;
   font-weight:bold;
   font-style:italic;
   font-size:.9em;
}

.staff-info dsgn {
   display:block;
   font-weight:bold;
   font-style:italic;
   font-size:.8em;
}

.staff-info qual {
   display:block;
   font-size:.8em;
}

.staff-info exp {
   display:block;
   font-size:.8em;
}

.news-item {
   width:500px;
   height:150px;
   padding:5 3 5;
   display:flex;
   flex-grow:1;
}

.news-item-photo > img {
   border:3px solid #e0e0e0;
   border-radius: 20px 0 0 20px;
   width:100px;
   height:150px;
   background:white;
}
.news-item-info {
   padding:20;
   width:390px;
   height:150px;
   background:#8888d0;
   color:white;
   border-radius: 0 20px 20px 0;
}

.news-item-info name {
   display:block;
   font-weight:bold;
   font-style:italic;
}

.news-item-info msg {
   display:block;
}

footer {
   display:flex;
   justify-content:space-between;
}

.footer-item {
   border:1px solid #fff;
   background-color:#f0fff8;
   flex:1;
}

.footer-two > div {
   margin-left:40px;
}

.signup {
   margin-left:auto;
}

.marquee {
   color:red;
   background:rgb(0,0,0,.05);
   height: 30px; 
   overflow: hidden;
   position: relative;
}

.marquee p {
   color: indigo;
   letter-spacing:1.5px;
   font-size:20px;
   position: absolute;
   width: 100%;
   height: 100%;
   margin: 0;
   line-height: 20px;
   text-align: left;
   white-space: nowrap;
   /* Starting position */
   -moz-transform:translateX(100%);
   -webkit-transform:translateX(100%); 
   transform:translateX(100%);
   /* Apply animation to this element */ 
   -moz-animation: marquee 25s linear infinite;
   -webkit-animation: marquee 25s linear infinite;
   animation: marquee 25s linear infinite;
}
@-moz-keyframes marquee {
   0% { -moz-transform: translateX(100%); }
   100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes marquee {
   0% { -webkit-transform: translateX(100%); }
   100% { -webkit-transform: translateX(-100%); }
}
@keyframes marquee {
   0% { 
      -moz-transform: translateX(100%);
      -webkit-transform: translateX(100%);
      transform: translateX(100%); 
   }
   100% { 
      -moz-transform: translateX(-100%);
      -webkit-transform: translateX(-100%);
      transform: translateX(-100%); 
   }
}

th, td {
   padding:1px 5px 1px 5px;
}

.borderedtable {
   border:3px solid orange;
   border-spacing:2px;
   border-collapse:collapse;
   margin:auto;
   margin-top:10;
   margin-bottom:10;
}

.borderedtable tr:nth-child(even) {
   background-color:rgba(0,0,0,.04);
}

.borderedtable th {
   font-weight:bold;
   border:1px solid orange;
}

.borderedtable td {
   border:1px solid orange;
   font-size:.9em;
}

label {
   display:block;
   margin:20px 0 0;
}

input {
   position:absolute;
}

.hide {
   opacity:1;
   height:auto;
   overflow:hidden;
}

.hide p {
   padding:10px;
   margin:0
}

input[type=checkbox]:checked + div {
   opacity:0;
   max-height:0;
   border:none;
}

.slide3 {
   margin-top:10;
   margin-left:auto;
}

.follow{border-top:1px solid blue;margin:0}

.animate-fading{animation:fading 2s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
.animate-opacity{animation:opac 1.6s}@keyframes opac{from{opacity:0} to{opacity:1}}
.animate-bottom{position:relative;animation:animatetop .8s}@keyframes animatetop{from{top:100px;opacity:0} to{top:0;opacity:1}}
.animate-right{position:relative;animation:animateleft .8s}@keyframes animateleft{from{left:100px;opacity:0} to{left:0;opacity:1}}
.animate-left{position:relative;animation:animateright .8s}@keyframes animateright{from{right:100px;opacity:0} to{right:0;opacity:1}}
.animate-top{position:relative;animation:animatebottom .8s}@keyframes animatebottom{from{bottom:100px;opacity:0} to{bottom:0;opacity:1}}
.animate-zoom {animation:animatezoom 1.2s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
.animate-input{transition:width .8s ease-in-out}.animate-input:focus{width:100%!important}

.container {
   display:flex;
   flex-wrap:wrap;
   flex-direction:row;
   justify-content:flex-start;
   align-items:stretch;
}

.left {order:1; flex-basis:100%;}
.middle {order:3; flex-basis:100%;}
.right {order:2; flex-basis:100%;}

/*====================================
MEDIA QUERIES
====================================*/
@media (min-width: 480px) {
   p {
      color: brown;
   }

   m {
      color: blue;
   }

   #header-container {
      justify-content: space-between;
      align-items: center;
   } 

   .animations-container {
      flex-direction:row;
   }

   .main-menu {   
      flex-direction: row;
      justify-content: flex-start;
      align-items: flex-start;
   }

   nav > ul {
      flex-direction:row;
   }

   nav > ul > li {
      border-left:1px solid #000000;
   }

   nav > ul > li a + div {
      position:absolute;
      z-index:10;
   }
}

@media (min-width: 768px) {
   p {
      color: green;
   }

   m {
      color: blue;
   }

   #header-container {
      flex-direction: row;
      justify-content: flex-start; 
   } 

   #logo-container {
      margin-right: 40;
   }
}