/* ----------------------------- Page Layout ---------------------------- */
main.article-page {
    margin-top: 2.2rem;
}

/* ------------------------------ Header Styles ---------------------- */
header {
    width: 100%;
}

header.article-header img {
    width: 115%;
    margin-left: -6%;
    margin-right: -6%;
    padding: 0;
}

header.article-header div#titleWrapper  {
    position: absolute;
    z-index: 10;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    color: #000000;
}

.topLeft {
    top: 1rem;
    left: 1rem;
}

.topRight {
    top: 1rem;
    right: 1rem;
}

header.article-header div#titleWrapper h1, header.article-header div#titleWrapper h2 {
    position: relative;
    z-index: 11;
    padding-top: 1rem;
    text-align: center;
    font-family: 'Arial Rounded MT Bold', 'Helvetica Rounded', Arial, Helvetica, sans-serif;
    font-size: 3rem;
    margin: 0;
}

div#titleWrapper h1.wide {
    font-size: 2.5rem !important;
}

div#titleWrapper h1.tooWide {
    font-size: 2.0rem !important;
    line-height: 2.0rem !important;
}


header.article-header div#titleWrapper h2 {
    text-align: right;
    margin: 0;
    font-size: 1.5rem;
}

.hdrLink {
    color: #000000;
}

a.hdrLink:hover {
    color: #6b2000;
}


/* ----------------------------- CSS Grid Style ------------------------- */
section.summaryList {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 2rem;
    grid-row-gap: 1rem;
    grid-template-areas: 
        "card card card";
}



/* ------------------------------- Card block styles --------------------- */
.card {
    grid-area: article !important;
}


.summary {
    display: block;
    border: 1px solid #b7410e;
    border-radius: 5px;
    margin: 0.2rem;
    margin-bottom: 0.5rem;
    break-inside: avoid;
    page-break-inside: avoid;
    overflow: hidden;
    background: #f0f0f0;
}


.article-header {
    position: relative;
}

.article-header img {
    width: 100%;
}

.title-wrapper {
    position: absolute;
    top: 0.5rem;
    left: 0;
    width: 100%;
    width: 100%;
    text-align: center;
}

.title-wrapper div.shade {
    background: #ffffff;
    opacity: 0.5;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
}

.title-wrapper h1 {
    position: relative;
    z-index: 3;
    color: #b7410e;
    font-family: Helvetica, Tahoma, 'Geneva', 'Trebuchet MS', Arial, Verdana, sans-serif;
    font-size: 1.5rem;
    padding: 0.25rem;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
}

.title-wrapper h1 a {
    text-decoration: none;
    color: #b7410e;
}

.title {
    color: #b7410e;
    font-family: Helvetica, Tahoma, 'Geneva', 'Trebuchet MS', Arial, Verdana, sans-serif;
    font-size: 1.2rem;
    width: 100%;
    text-align: left;
    margin-top: -0.5rem;
    margin-bottom: 0;
}

.title a {
    color: #b7410e;
    text-decoration: none;
}

.title a:hover {
    color:#6b2000;
    text-decoration: none;
}

h2 {
    color: #b7410e;
    font-family: Helvetica, Tahoma, 'Geneva', 'Trebuchet MS', Arial, Verdana, sans-serif;
    font-size: 1rem;
    text-align: center;
    width: 100%;
    margin-top: 0;
}

h2.body {
    text-align: left;
    margin-bottom: 0;
    padding-bottom: 0;
}

h2.body + p {
    padding-top: 0;
    margin-top: 0;
}

.subtitle {
    color: #b7410e;
    font-family: Helvetica, Tahoma, 'Geneva', 'Trebuchet MS', Arial, Verdana, sans-serif;
    font-size: 0.85rem;
    width: 100%;
    text-align: right;
    margin-top: -0.5rem;
}

.summary article {
    padding: 0.5rem;
    line-height: 1.5rem;
    font-size: 1rem;
}

a.more {
    text-decoration: none;
    width: 100%;
    display: block;
    text-align: center;
    color: #b7410e;
}

a.more:visited {
    color: #6b2000;
}

/* -------------------------------- Calendar Styles ------------------------------------ */
a  {
    text-decoration : none;
}

#cal h1 {
    width: 100%;
    color: #6b2000;
    font-family: Helvetica, Tahoma, 'Geneva', 'Trebuchet MS', Arial, Verdana, sans-serif;
    font-size: 1.2rem;
    text-align: center;
    margin: 0;
    padding: 0.5rem;
}

#cal table {
    border: 1px solid #b7410e;
    width: 100%;
    background: #eee5e9;
    border-collapse: collapse;
}

#cal table th {
    background-color:  #6b2000;
    color: #eee5e9;
    font-family: Helvetica, Tahoma, 'Geneva', 'Trebuchet MS', Arial, Verdana, sans-serif;
    font-size: 1rem;
    height: 1.2rem;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #6b2000;
}

#cal table td {
    font-family: Helvetica, Tahoma, 'Geneva', 'Trebuchet MS', Arial, Verdana, sans-serif;
    color: #6b2000;
    font-size: 1rem;
    height: 1.2rem;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #6b2000;
}

#cal td.evt {
    background-color: #efc88b;
}

td.dt-fade {
    background-color: #acacac;
}

@media only screen and (max-width: 1024px )
{
    section.summaryList {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-column-gap: 2rem;
        grid-row-gap: 1rem;
        grid-template-areas: 
            "card card";
    }
}

@media only screen and (max-width: 740px )
{
    section.summaryList {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-row-gap: 1rem;
        grid-template-areas: 
            "card";
    }
       
}