/*
This is a comment in your stylesheet
 */
body, head{
    background-color: white;
    font-family: Arial, Helvetica, sans-serif;
    color: black;
}

nav{
    display: block;
    background: radial-gradient(circle,rgba(238, 238, 238, 1) 0%, rgba(255, 255, 255, 1) 100%);
    color: black;
    font-size: 12pt;
    font-family: Arial, Helvetica, sans-serif;
    padding: 14px 16px;
    border: 1px solid black;
    border-radius: 8px;
    margin-top: 6px;
    margin-bottom: 12px;
}

nav a{
    text-decoration: none;
    color: black;
    background: linear-gradient(0deg, rgba(238, 238, 238, 1) 0%, rgba(255, 255, 255, 1) 100%);
    padding: 7px 8px;
    text-shadow: 2px 2px 2px grey;
    text-align: center;
}

nav a:hover{
    background: linear-gradient(0deg, rgba(248, 248, 248, 0.8) 0%, rgba(255, 255, 255, 0.8) 100%);
}

.titleImage{
    float: left;
    margin-right: 10px;
}

h1{
    background-color: transparent;
    color: black;
    font-size: 18pt;
    font-family: OpenSans;
    font-weight: bold;
    text-shadow: 2px 2px 2px grey;
    text-align: left;
}

h2{
    background-color: transparent;
    color: black;
    font-size: 16pt;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
    border-bottom: 1px solid lightgrey;
}

h3{
    background-color: transparent;
    color: black;
    font-size: 12pt;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
}

footer{
    background-color: white;
    color: black;
    font-size: 10pt;
    font-family: Arial, Helvetica, sans-serif;
    text-decoration: underline;
    text-align: center;
}

footer a:link, footer a:hover, footer a:focus {color: black;}

footer a:visited{ color: blue; }

footer a:active {color: red; }

.gallery{
    display: grid;
    grid-template-columns: 45fr auto;
    grid-template-rows: auto auto auto;
}

.twoColumnWrapper{
    display: grid;
    grid-template-columns: 60fr 30fr;
    grid-template-rows: auto;
    grid-template-areas: "leftColumn    rightColumn";
}

.leftColumn{
    grid-area: leftColumn;
}

.rightColumn{
    grid-area: rightColumn;
}

.threeColumnWrapper{
    display: grid;
    grid-template-columns: 25fr 35fr 30fr;
    grid-template-rows: auto;
    grid-template-areas: "leftColumnFirst   centerColumnSecond   rightColumnThird";

}

.leftColumnFirst{
    grid-area: leftColumnFirst;
}

.centerColumnSecond{
    grid-area: centerColumnSecond;
}

.rightColumnThird{
    grid-area: rightColumnThird;
}

.forwardCard{
    background: linear-gradient(0deg, rgba(238, 238, 238, 1) 0%, rgba(255, 255, 255, 1) 100%);
    color: black;
    padding: 12px 12px;
    border: 1px solid black;
    border-radius: 8px;
    margin: 10px 12px;
}

.forwardCard:hover{
    background: linear-gradient(0deg, rgb(248, 248, 248) 0%, rgb(255, 255, 255) 100%);
    border: 1px solid lightgrey;
    box-shadow: 2px 2px 2px grey;
    border-radius: 8px;
    opacity: 80%;
    margin: 12px 12px;
}

.emphasisText{
    color: rgb(128, 0, 0);
    font-style: italic;
    font-family: OpenSans;
}

.letterList{
list-style-type: lower-alpha;
}

.upperLetterList{
list-style-type: upper-alpha;
}

.squareList{
list-style-type: square;
}

.customList{
list-style-image: url(../IMG/radio-selected.png);
}

.customList li:hover{
list-style-image: url(../IMG/radio-selected-hover.png);
}

.fragmentAnchor{
    all:inherit;
}



table{
    margin: auto;
    text-align: center;
}

tr{
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

th{
    font-family: OpenSans;
    font-weight: bold;
border-top: 1px solid black;
    border-bottom: 1px solid black;
}

td{
    font-style: italic;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.leftTitleColumn{
font-family: OpenSans;
    font-weight: bold;
border-top: 1px solid black;
    border-bottom: 1px solid black;
    width: 100px;
    font-size: 16px;
}

.rightTitleColumn{
font-family: OpenSans;
    font-weight: bold;
border-top: 1px solid black;
    border-bottom: 1px solid black;
    width: 30px;
    font-size: 16px;
}

.leftDataColumn{
font-style: italic;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    width: 100px;
    font-size: 12px;
}

.rightDataColumn{
font-style: italic;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    width: 30px;
    font-size: 12px;
}

@font-face{
    font-family: OpenSans;
    src: url("../Fonts/OpenSans-Regular.ttf");
}

@font-face{
    font-family: OpenSans;
    font-style: italic;
    src: url("../Fonts/OpenSans-Italic.ttf");
}

@font-face{
    font-family: OpenSans;
    font-weight: bold;
    src: url("../Fonts/OpenSans-Bold.ttf");
}