body {
    background: #3b627e url('/images/BackgroundCheck.gif') top left fixed repeat;
    margin: 0;
    padding: 10px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: smaller;
}

h2,h3,h4 {
    margin: 5px;
}

.footer {
    text-align: center;
    font-size: x-small;
    margin-top: 20px;
}

.footer img{
    float: right;
}

.footer .divider {
    padding: 0 4px;
}

.Content {
    border: 2px solid black;
    border-radius: 5px;
    background-color: white;
    padding: 20px;
    margin: auto;
    overflow: auto;
    max-width: 1000px;
}

#SiteLogo {
    float: left;
    width: 500px;
}



.PrimaryNavigation {
    margin: 10px 0;
}


@media only screen and (max-width: 600px) {
    body {
        padding: 2px;
    }

    .Content {
        margin: 0px;
        padding: 5px;
    }

    #SiteLogo {
        width: 100%;
    }

    .PrimaryNavigation {
        margin-top: 5px;
    }
}

.ASCArt {
    display: none;
}

/************************** Home page **************************/

.gridArticle {
  display: flex;
  flex-wrap: wrap;
}

.gridArticle img {
    width:100%;
    height:auto;
}

/* Hover title over image */
.gridArticle .overlay {
    position: absolute; 
    top: 5px; 
    left: 10px; 
    right: 0; 
    /* transform: translate(0, -30%); */
    text-align: left; 
    color: #fff; 
    text-shadow: 2px 2px 6px #000000;
    font-size:xx-large;
    font-family:monospace;
}

.gridArticle .overlay .date {
    font-size:medium;
    display:block;
    padding-top:5px;
}

.gridArticle .primary {
    width:100%;
    position: relative; 
    display: inline-block;
}

.gridArticle .secondary {
    /* The width is set to 33% because we want to fit three columns in our row. */
    width: 33.3333%;
    position: relative; 
    display: inline-block;  
}

.gridArticle .secondary .overlay {
    top:5px;   
    left:5px;
    font-size:medium;
}

.gridArticle .secondary .overlay .title {
    font-weight:bold;
}


@media only screen and (max-width: 600px) {
    .gridArticle .secondary {
        width:100%;
    }
}


/************************** Article **************************/

.article img {
    width:100%;
    height:auto;
}

.article .tag {
    display:inline-block;
    border:1px solid #cac0c0;
    padding:4px;
    margin:0 4px 4px 0;
    background-color:#EEEEEE;
}

.article .tag a {
    text-decoration:none;
    color:inherit;
}

/************************** Breadcrumb **************************/

.breadcrumb {
    padding: 8px 0;
    color: #7a7676;
}

.breadcrumb .divider {
    padding: 0 4px;
}

/************************** Article body **************************/

.article-body {
    padding: 20px 0;
}

.article-body p {
    line-height: 1.5;
}

.article-body img {
    width: 100%;
    display: block;
}

.article-body iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
}

/* The original site's block-grid only goes side-by-side above a 1024px
   viewport (its column-span scales x3 below that, forcing full width) -
   matched here rather than picking an arbitrary breakpoint of our own. */
.two-col-images {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    align-items: start;
}

.two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 20px;
    align-items: start;
}

.two-col-column > :first-child {
    margin-top: 0;
}

@media only screen and (min-width: 1024px) {
    .two-col-images,
    .two-col {
        grid-template-columns: 1fr 1fr;
    }
}