/* font color #FF00FF  sort of matches purple fish */
/* font color #0044cc  blue */
img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

body {
    background-color: white;
    font-family: arial, verdana, sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

/* Style the header */
.header {
    background-color: #f1f1f1;
    padding: 20px;
    text-align: center;
}

/* Style the top navigation bar */
#navbar {
    overflow: hidden;
    background-color: #000066;
}

/* Style the topnav links */
#navbar a {
    float: left;
    display: block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change color on hover */
#navbar a:hover {
    background-color: #0044cc;
    color: white;
}

.mbs-icon { height: 20px; width: 20px; }

header table { margin-top: 20px; margin-bottom: 20px; }

header h1 { color: #0044cc; }

header img { width: 100px; margin-right: 20px; }

.content {
    /* margins were in-effective */
    padding: 16px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll
 * position (from www.w3schools.com/howto/howto_js_navbar_sticky.asp) */
.sticky { position: fixed; top: 0; width: 100%; }

/* Add some top padding to the page content to prevent sudden quick
 * movement (as the navigation bar gets a new position at the top of the
 * page (position:fixed and top:0)  (from w3schools) */
.sticky + .content { padding-top: 60px; }

hr { width: 80%; text-align: center; }
hr.end { width: 100%; }

main h3, main h4, main h5, main h6, main th { color: #0044cc; }

blockquote.box h4 { margin-top: 5px; }

table.outlined {
    border-style: solid; border-width: 1px; border-collapse: collapse;
}

table.outlined th, table.outlined td {
    border-style: solid; border-width: 1px;
    padding: 5px;
}

main th { background-color: #EDEBF6; text-align: left; }
/* main th { background-color: #EEF0FF; text-align: left; } */

blockquote.aside {
    border-style: solid; border-width: 2px; border-color: #0044cc;
    background-color: #eeeeee;
    padding: 5px;
}

.box, .thinbox { border-color: #0044cc; }

.sidenote { font-size: 75%; }

.inherited, td.inherited { background-color: #edebe9; color: #999999; }

.inherited code, td.inherited code { color: #8888ff; }

.prev { float: left; font-style: italic;
        margin-left: 20px; margin-right: 20px;
}

.next { float: right; font-style: italic;
        margin-left: 20px; margin-right: 20px;
}

.attribution { text-align: center; font-size: 50%; font-style: italic; }