@font-face {
    font-family: 'ARMB';
    src: url("fonts/ArialBold.ttf");
}
@font-face {
    font-family: 'Arial2';
    src: url("fonts/Arial2.ttf");
}

html {
    width:100%;
    height:100%;   
    background-color:#fff;
}
body {
    width:100%;
    min-height:100%;
    background:#eee url(/images/hatch.png);
    color:#58585a;
    font-family:'Arial', 'Arial2', sans-serif;
    overflow-y:scroll;
    display:flex;
}

div#width-wrapper {
    max-width:1000px;
    background-color:#fff;
    min-height:100%;
    width:95%;
    margin:0 auto;
    box-shadow:0 0 10px #999;
    display:flex;
    flex-direction:column;
}

/* HEADER */
header {
    height:120px;
    display:flex;
    position:relative;
    padding:0 2em;
    color:black;
}
img#logo {
    margin:10px;
    width:100px;
    height:100px;
}
h1 {
    height:fit-content;
    font-family:'ARMB';
    font-size:2em;
    position:relative;
    display:inline-block;
    top:50%;
    transform:translate(0,-50%);
}
main hr {
    margin: 1.5em 3em;
}
nav {
    display:flex;
    padding:0em 2em;
}
nav a {
    height:2.5em;
    background-color:transparent;
    font-size:0.9em;
    width:100%;
    text-align:center;
    text-decoration:none;
    color:#58585a !important;
    text-transform:uppercase;
    position:relative;
}
nav a p {
    position:relative;
    top:50%;
    transform:translate(0, -50%);
}
hr {
    margin:0;
    border:1px solid #f7941e;
}

main {
    margin:2em 2em 0em 2em;
    display:flex;
    flex-direction:column;
    flex-grow:1;
    color:black;
}

h2,h3,h4,h5,h6 {
    font-family:'ARMB';
    font-weight:normal;
    margin-bottom:0.5em;
    margin-top:0.5em;
}
h2 {
    font-size:1.5em;
}
h3 {
    font-size:1.2em;
}

.center {
    text-align:center;
}

iframe.calendar {
    width:100%;
    flex-grow:1;
}

a {
    display:inline;
}
a:link {
    color:dodgerblue;
}
b {
    font-weight:bold;
}

.box {
    margin:1em;
    padding:1em;
    border:2px solid #ccc;
    background-color:#eee;
}

p {
    margin-bottom:1.3em;
    line-height:1.3em;
}


/* Image boxes & alignment */
.imgbox {
    display:flex;
    flex-direction:column;
    width:33%;
    flex-shrink:0;
    text-transform:uppercase;
    font-size:0.9em;
    margin:1em;
}
.imgbox>div {
    padding:0.5em;
    margin-top:1em;
    border:2px solid #ccc;
    background-color:#eee;
}
.imgbox img {
    width:100%;
}
.flex {
    display:flex;
}

li {
    list-style-type:disc;
    list-style-position:inside;
    margin-bottom:0.3em;
}
.banner {
    width:calc(100% + 4em);
    position:relative;
    left:-2em;
    border-top:2px solid #f7941e;
}

.box.code {
    font-family:monospace;
}