/* TAGS */
a { /* Used for menu bar at the top of the screen */
 color: white;
 background-color: transparent;
 text-decoration: none;
 }
 
body, div {
 margin: 0;
 padding: 0;
 }

body {/* Disable scrollbars and ensure that the body fills the window */
 height: 100%;
 overflow: hidden;
 width: 100%;
 }
 


img{
 display: block;
 margin-left: auto;
 margin-right: auto;
 max-width:600px;
 padding-top: 20px;
 }

  input:required:invalid, input:focus:invalid {
    background-image: url(Images/invalid.png);
    background-position: right top;
    background-repeat: no-repeat;
  }

  input:required:valid {
    background-image: url(Images/valid.png);
    background-position: right top;
    background-repeat: no-repeat;
  }

li {
 float: left;
 }

li a {
 color: white;
 display: block;
 padding: 0px 16px;
 text-align: center;
 text-decoration: none;
 }

li a:hover {/* Change the link color to #111 (black) on hover */
 background-color: #111;
 }

p{
 color: green;
 font-family: "Arial Rounded MT Bold", Arial, sans-serif;
 font-size: 16px;
 font-stretch: extra-expanded;
 padding-left: 40px;
 padding-right: 40px;
 }

table {
 margin-left: 40px;
 margin-right: 40px;
 width: 90%;
 }

table, th, td {
 border: 1px solid black;
 border-collapse: collapse;
 }

th, td {
 padding: 15px;
 }

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 overflow: hidden;
 }

/* CLASSES - reusable */

.box {
 background-color: teal;
 color: white;
 display: inline-block;
 float: left;
 margin-left: 0px;
 margin-top: 0px;
 vertical-align: top;
 width: 200px;
 }

.button {
 background-color: maroon;
 border: none;
 border-radius: 12px;
 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
 color: white;
 cursor: pointer;
 display: block;
 font-size: 16px;
 margin: 4px 2px;
 margin-left: auto;
 margin-right: auto;
 padding: 10px;
 text-align: center;
 text-decoration: none;
 }
 
  p .checkmark {
 color: maroon;
 }

.downloadButton {
 background-color: maroon;
 border: none;
 border-radius: 12px;
 box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
 color: white;
 cursor: pointer;
 font-size: 16px;
 margin: 4px 2px;
 padding: 10px;
 xtext-align: left;
 text-decoration: none;
 }
 
.notification {
 color:black;
 }

.pageName, .pageSubname {
 float: center;
 font-size: 36;
 padding: 5px;
 text-align: center;
 width:100%;
 }

.pageSubname {
 font-size: 16;
 width: 100%;
 }

.sectionName, .sectionSubname {
 xbackground-color: white;
 background-color: #D4F2FB;
 color: teal;
 float: center;
 font-family: "Arial Rounded MT Bold", Arial, sans-serif;
 font-size: 30;
 font-weight: bold;
 padding: 5px;
 text-align: center;
 width:100%;
 }

.sectionSubname {
 font-size: 16;
 }

.topic {
    color: maroon;
}

.twoColmns table{
 border:0;
 }

.wingsCredit {
    color: black;
    text-decoration: underline;
}

/* IDs - once per page */

#Downloads img {
 margin-left: 25px;
 max-height: 100px;
 }

#header { /* Provide scrollbars if needed and fix the header dimensions */ 
 background-image: url("../Images/Sectional.jpg");
 height: 200px;
 overflow: auto;
 position: absolute;
 width: 100%;
 }

#headerBar {
 position: absolute;
 background-color: teal;
 width: 100%;
 }

#main {  /* Provide scrollbars if needed, position below header, and derive height from top/bottom */
 bottom: 0;
 overflow: auto;
 overflow-x: hidden;
 position: absolute;
 top: 200px;
 width: 100%;
 }

#siteMenu {
 float: right;
 width:45%;
 padding-right: 15px;
 text-align: right;
 }

#siteName {
 float: left;
 padding-left: 15px;
 width:45%;
}


#disabled::after{
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
#disabled::before{
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
#wingsCredit {
    color: black;
    text-decoration: underline;
}