*
{
    box-sizing: border-box;
}

body
{
    grid-template-rows: auto 36px auto;
    grid-template-columns: auto 240px;
    grid-template-areas:
        "header header"
        "main sidebar"
        "main sidebar"
        "info1 info2"
        "footer footer";
    display: grid;
    background-color: white;
    color: black;
    margin: 0px;
    padding: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
}

#header
{
    position: fixed;
    width: 100%;
    grid-area: header;
    background-color: #007FFF;
    color: white;
    margin: 0px;
    padding: 2px;
}

#header_text
{
    justify-content: left;
    text-align: center;
    align-items: center;
    vertical-align: auto;
    font-size: 18px;
    font-weight: bold;
    margin: 0px 0px 0px 0px;
    padding: 0px 4px 0px 0px;
}

#header_text img
{
    position: relative;
    top: -3px;
    margin: 4px;
    padding: 0px;
    text-align: center;
}

#header a, .header_text a:visited, .header_text a:hover
{
    color: white;
    text-decoration: none;
}

#menubar
{
    float: left;
    margin: 0px;
    padding: 2px 0px 2px 0px;
}

#menubar img
{
    float: left;
    margin: 4px 6px 0px 2px;
    height: 16px;
}

.menubar_home_link
{
    display: inline-block;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    margin: 0px 20px 0px 0px;
    padding: 0px 4px 0px 4px;
}

.dropdown_menu
{
    display: inline-block;
    position: relative;
    font-size: 18px;
    font-weight: bold;
}

.dropdown_menu_title
{
    font-size: 18px;
    font-weight: bold;
    margin: 0px 10px 0px 10px;
    padding: 0px 10px 0px 10px;
}

.dropdown_menu_title a
{
    display: block;
    text-decoration: none;
}

.dropdown_menu_item
{
    display: none;
    position: absolute;
    z-index: 1;
    background-color: #006DDB;
    min-width: 160px;
    font-size: 18px;
    font-weight: bold;
    margin: 0px 10px 0px 10px;
    padding: 0px;
}

.dropdown_menu_item a
{
    display: block;
    text-decoration: none;
    margin: 0px;
    padding: 10px;
}

.dropdown_menu_item a:hover { background-color: #007FFF; }
.dropdown_menu:hover .dropdown_menu_item { display: block; }
.dropdown_menu:hover .dropdown_menu_title { background-color: #004B96; }

#header_site_title
{
    float: right;
    font-size: 20px;
    font-weight: bold;
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px 0px;
}

@media only screen and (max-width: 768px)
{
    #header_site_title { display: none; }
}

#main
{
    grid-area: main;
    background-color: white;
    color: black;
    margin: 0px;
    margin-top: 30px;
    padding: 20px;
    grid-template-columns: repeat(auto-fit, 250px);
    grid-gap: 1rem;
    text-align: left;
}

#main #content
{
    min-width: 360px;
    background-color: #FFF;
    color: black;
    margin: 0px;
    padding: 20px;
    text-align: left;
    flex-grow: 1;
}

#infobar_header
{
    background-color: #EEE;
    color: black;
    margin: 0px;
    padding: 4px;
    padding-left: 2px;
    padding-bottom: 10px;
}
#infobar_header h1 { display: inline; margin: 0px; padding-top: 0px; padding-left: 12px; font-weight: normal; }
#infobar_header_text { font-size: smaller; color:#555; }

#tiles
{
    display: grid;
    grid-template-columns: repeat(auto-fit, 270px);
    grid-gap: 1rem;
    margin: 0px;
    padding: 0px;
}

.tile
{
    width: 100%;
    height: 360px;
    border: 2px solid lightslategray;
    border-radius: 1rem;
    background-color: #EEE;
    color: black;
    padding: 12px;
    margin: 0px;
    display: flex;
    flex-flow: column;
    align-items: center;
    text-align: center;
}

.tile:hover
{
    border-color: blue;
}

.tile img
{
    border-radius: 1rem;
    display: block;
    width:100px;
    height: auto;
}

.tile p
{
    margin: 2px;
    padding: 4px;
    text-align: center;
    overflow: hidden;
}

.tile .tile_image { height: 33%; }
.tile .tile_title { height: 18%; font-size: larger; font-weight: bold; }
.tile .tile_title a { color: black; text-decoration: none; }
.tile .tile_title a:visited { color: black; text-decoration: none; }
.tile .tile_title a:hover { color: #4963AF; text-decoration: none; }
.tile .tile_date { height: 10%; font-size: 80%; color: #444; }
.tile .tile_date a { color: #666; text-decoration: none; font-weight: bold; }
.tile .tile_date a:hover { color: #4963AF; text-decoration: none; }
.tile .tile_section { border: 1px solid #888; border-radius: 1rem; margin: 0px; margin-left: 6px;padding: 1px; padding-left: 6px; padding-right: 6px; }
.tile .tile_description { height: 26%; text-align: left; width: 90%; }
.tile .tile_button { height: 11%; font-size: small; }

.tile .button
{
    border: none;
    border-radius: 1rem;
    background: #4963AF;
    color: white;
    padding: 4px 14px;
    font-size: larger;
    cursor: pointer;
    text-decoration: none;
}

#grouped { margin-top: 0px; padding: 30px; padding-top: 0px; }

#grouped h3 { margin: 0px; padding-top: 0px; padding-bottom: 0px; }

#sidebar
{
    grid-area: sidebar;
    background-color: white;
    color: black;
    margin: 0px;
    margin-top: 30px;
    padding: 20px;
}

#sidebar nav
{
    background-color: #EEE;
    color: black;
    margin: 0px;
    padding: 20px;
}

#sidebar nav h1,h2,h3,h4,h5,h6
{
    margin: 0px;
    padding: 8px 0px;
    padding-top: 0px;
    font-weight: bold;
}

#sidebar nav select
{
    background-color: #DDD;
    color: black;
    width: 160px;
}

#sidebar nav a, a:visited
{
    color: black;
    text-decoration: none;
    line-height: 2;
}

#info1
{
    grid-area: info1;
    background-color: white;
    padding: 8px;
    line-height: 2;
    margin: 0px;
    padding: 8px;
}

#info1 a { color: black; }
#info1 a:hover { color: blue; }

#info2
{
    grid-area: info2;
    background-color: white;
}

#info2 a { color: black; }
#info2 a:hover { color: blue; }

.taxonomy { font-weight: bold; }

#footer
{
    grid-area: footer;
    background-color: white;
    margin: 0px;
    padding: 20px 8px 20px 8px;
}

#footer a { text-decoration: none; color: #000; margin-left: 0px; }
#footer a:hover { text-decoration: none; color: #000; margin-left: 0px; }

.footer_text
{
    display: flex;
    justify-content: left;
    text-align: center;
    align-items: center;
    font-size: 14px;
}

img { margin: 0px; }

table
{
    border-collapse: collapse;
    empty-cells: show;
}
table,th,td { border: 1px solid black; }
th,td { padding: 8px; }
th { background-color: #EEE;}
tr:nth-child(odd) { background-color: #FFF; }
tr:nth-child(even) { background-color: #EEE; }

a { color: #4963AF; text-decoration: none; }
a:visited { color: #4963AF; }
a:hover { color: blue; }

div .highlight pre [class*='language']
{ background-color: #272822; color: #EEE; }

.noborder {border:none;color:black;background-color:white;}
.noborder table {border:none;color:black;background-color:white;}
.noborder tbody {border:none;color:black;background-color:white;}
.noborder tr {border:none;color:black;background-color:white;}
.noborder th {border:none;color:black;background-color:white;}
.noborder td {border:none;color:black;background-color:white;}

.anchor_padding { margin: -20px; padding-top: 20px; }

.centered_container
{
    margin: 10px auto;
    max-width: 600px;
    text-align: center;
}

#human_test_text
{
    margin: 0px;
    padding: 4px;
    padding-left: 6px;
    padding-right: 6px;
    font-weight: bold;
    outline: thin solid #007fff;
}

#contact_form_email { color: black; }

.hidden { display: none; }

.green_larger { color:green; font-size: larger; }
.red_larger { color:red; font-size: larger; }