body {
    margin:0;
    padding:0;
    font-family:Barlow,sans-serif;
    min-height:100%;
    position:relative;
}

#outer-masthead {
    overflow:hidden;
/*    height: 400px;*/
}

#masthead {
    background-color: #400000;
    background: linear-gradient(to right, black, #330000);
    color:cyan;
    width:100%;
    margin:0;
    float:left;
}

#masthead img {
    border: 0
}

#masthead a {
    text-decoration: none;
}

#topmenus {
    transform:skewX(-7deg); 
    transform-origin:top right; 
    display:inline-block; 
    float:left; 
    text-align:right; 
    margin-left:3em;
    min-width:10em;
}

#topmenus .menuitem a {
    text-decoration: none;
    color:#008080;
}

#topmenus .menuitem {
    border-left:10px #400000 solid;
    display:inline-block;
}

#topmenus .menuactiveitem {
    border-left:50px #800000 solid;
}

#topmenus .menuitem a {
    transition: padding 0.2s;
    transition-timing-function:ease-out;
}

#topmenus .menuitem a:hover {
    border-left:10px #800000 solid;
    padding-right:1px;
    text-decoration:underline;
}

#topmenus .menuitem a:active {
    color:cyan;
}

#topmenus .menuactiveitem a {
    color: cyan;
}

#topmenus .menuactiveitem a:hover {
    border-left:none;
}

#crazy-part {  /*stores the overflowing logo which takes the user home*/
    transform:rotate(7deg);
    float:left; display:inline-block; position:absolute;
}

#crazy-part a {
    display:inline-block;
    transition: padding 0.2s;
    transition-timing-function:ease-out;
    padding-top:0px;
}

#crazy-part a:hover {
    padding-top:1px;
}

#tagline { /*this also prints the title*/
    border-left:80px #400000 solid;
    float:right;
    color: #004040;
    transform:skewX(-7deg); 
    transform-origin:top right; 
    padding-left:0.2em;
    font-size:210%;
    display:block;
}

#tagline a {
    color: #008080;
}

#tagline a:hover {
    text-decoration:underline;
}


#secondmenu {
    text-align:center;
    padding:1em;
    font-size:150%;
    transform:skewX(-7deg); 
    transform-origin:top right; 
}

#secondmenu .menuitem a {
    color: #004040;
}

#secondmenu .menuactiveitem, #secondmenu .menuactiveitem a {
    color: #008080;
    text-decoration:none;
}

#thirdmenu {
    padding-right:1em;
    padding-bottom:2em;
    float:left;
    position:relative;
    z-index:100;
    clear:both;
    overflow:hidden;
    margin-right:2em;
}

#thirdmenu .menuactiveitem {
    font-weight: bold;
}

#thirdmenu a {
    text-decoration:none;
}

#thirdmenu a:hover {
    text-decoration:underline;
}

#content {
    padding:1.5em;
    padding-bottom:5em;;
    overflow:auto;
}

h1 {
    color: #004040;
    text-align:center;
    font-size: 60px;
    font-weight: normal;
    padding-top:0;
    margin-top:0.5em;;
    transform:skewX(-7deg); 
    transform-origin:bottom left; 
    z-index:50;
    position:relative;
}

h2 {
    color: #004040;
    font-size:150%;
    font-weight:normal;

}

hr {
    border-top:0;
    border-bottom:1px #008080 solid;
}

#footer {
    text-align:center;
    border-top:1px solid;
    font-size:90%;
    position:relative;
    width:100%;
    margin-top:5em;
    color:#004040;
    padding-top:0.5em;
    clear:both;
}

#footer a {
    color: inherit;
    text-decoration: underline;
}

table {
    border-collapse: collapse;
    margin: 1em 0;
}

th, td {
    border: 1px solid #a0d0d0;
    padding: 0.35em 0.8em;
    text-align: left;
    vertical-align: top;
}

th {
    background-color: #e8f6f6;
    color: #004040;
}

td:first-child tt {
    white-space: nowrap;
}