* {
    font-family: Georgia, Verdana, "Book Antiqua", "MS sans-serif";
    box-sizing: border-box;
}

body {
    color: black;
    border-collapse: collapse;
    margin: auto;
    width: 75%;
}

h1, h2, h3 {
    color: #333366; /* #000000 */
}


a:link { color: blue; font-size: 12pt; }
a:visited { color: green; font-size: 12pt; }
a:active { color: green; font-size: 12pt; }
a:hover { color: red; font-size: 12pt; }


table { 
    border: 0;
    border-collapse: collapse;
    width: 100%;
    margin: auto;
    padding: 0;
}
.small {
    font-size: 10pt; 
    text-align: left;
}
.smallC {
    font-size: 10pt;
    text-align: center;
}
.smallR {
    font-size: 10pt;
    text-align: right;
}
.xsmall { 
    font-size: 8pt; 
    margin: -2px 0 0;
    text-align: center;
}
.centertext, .centertextV, .subscribe {
    align-content: center;
    text-align: center;
    display: block;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
}
.subscribe {
    background-color: lightgray;
}

.footer {
    font-size: x-small;
    text-align: center;
}

.imgTitle {
    border: 0;
    width: 386px;
    height: 77px; /* 72 */
}

.formImbedded {
    text-align: center;
    background-color: lightgray;
}

td {
    vertical-align: top;
}


.mensa { 
    list-style-image: url(graphics/bullet.gif);
}


iframe {
    border: 0;
    width: 100%;
    height: 150px;
    margin: 0;
}

.calendartitle { font-size: 9pt; color: #333366; cursor: default; font-weight: bold; }
.calendarday   { font-size: 8pt; color: #333366; cursor: default; }
.calendarevent { font-size: 8pt; color: #0000FF; cursor: pointer; font-weight: bold; }
.calendartoday { font-size: 8pt; color: fuchsia; cursor: default; font-weight: bold; }

.divCallOut {
    float: right;
    width: 25%;
}
.tableCallOut {
    text-align: center;
    background-color: lightgray;
}

hr {
    width: 80%;
}

.showNarrow { /* showNarrow when screen is small, and hide showWide too*/
    display: none;
    visibility: hidden;
}
.showWide {
    display: inline;
    visibility: visible;
}

.titleFont {
    text-align: center;
    font-family: Diner, 'Comic Sans MS', Tahoma, Verdana, Arial, sans-serif;
}
a.title, a.title:hover, a.title:visited, a.title:active {
    font-size: calc(16px + 4vw); /* calc(16px + 4vw); */
    text-decoration: none;
    color: navy;
}



/* new frameset definitions */
header {
    background-color: #333366;
    padding: 0px;
    font-family: titleFont;
    text-align: center;
    width: 100%;
    height: calc(10px + auto);
}

nav {
    color: white;
    background-color: dimgray;
    text-align: center;
    width: 100%;
    min-width: 124px;
    display: block;
    padding: 2px 0px 2px 0px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    overflow: hidden;
    font-size: 13px;
    font-family: Tahoma, Georgia, Book Antiqua;
}
    nav a:link, nav a:active, nav a:visited {
        color: white;
        background-color: dimgray;
        text-decoration: none;
    }
    nav a:hover {
        color: navy;
        background-color: goldenrod;
    }
    
section::after, aside::after {
    content: "";
    display: table;
    clear: both;
}

article {
    width: 79%;
    float: left;
    padding: 2px;
}

aside {
    font-size: 12px;
    width: 20%;
    min-width: 100px;
    float: right;
    text-align: right;
}
    aside a:hover, aside a:link, aside a:active, aside a:visited {
        font-size: 12px;
    }

footer, footer a:link, footer a:hover, footer a:link, footer a:active, footer a:visited {
    width: 100%;
    padding: 20px 0px 5px 0px;
    text-align: center;
    font-size: x-small;
}


/* //////////////////////////////////// */
/* MOBILE */
@media (max-width: 600px) {
    body {
        width: 96%;
    }
    header, nav, article, aside, footer {
        width: 100%;
        height: auto;
    }
    aside {
        padding-top: 16px;
        text-align: center;
    }

    nav {
        display: block;
        padding: 1px 0px 1px 0px;
        position: -webkit-sticky;
        position: sticky;
        font-size: 11px;
    }

    .imgTitle {
        width: 320px;
        height: 62px;
    }

    .smallAuto {
        font-size: xx-small;
    }

    brauto, .brauto {
        display: inline;
    }

    blockquote, ul, .mensa {
        margin-left: 4px;
        margin-right: 4px;
    }

    .showNarrow { /* showNarrow when screen is small, and hide showWide too*/
        display: inline;
        visibility: visible;
    }
    .showWide {
        display: none;
        visibility: hidden;
    }
    .mensa {
        list-style-image: url(graphics/bullet.gif);
    }
}