/* @import url(//fonts.googleapis.com/css?family=Open+Sans);  */
@import url(//fonts.googleapis.com/css?family=Raleway);

:root {

    --body-bg-color: #000;
    --body-text-color: LightGray;
    --box-shadow-color: Black;
    --center-column-background-color: #333;

    --gray-button-background-color:#CCC;
    --gray-button-text-color: Black;

    --heading-bar-background-color: #555;
    --heading-bar-text-color: White;
    --heading-bar-text-size:2vw;

    --image-border-color: Gray;
    --image-border: 2px solid var(--image-border-color);

    --link-color: LightBlue;
}


html,
body {
    color: var(--body-text-color);
    font-family: 'Raleway', sans-serif;
    font-size: calc(0.75em + 0.7vw);
    height: 100%;
    /* Replace Raleway's text figures (letters which reach below the line) with Lining figures */
    /* See https://www.codesmite.com/article/fixing-raleway-and-similar-fonts-numerals */
    -webkit-font-feature-settings: "lnum";
    -moz-font-feature-settings: "lnum";
    font-feature-settings: "lnum";
    margin-top:0; /* get rid of white line at top */
}


html,
body {
    background-color: var(--body-bg-color)
}


@media screen {
    body {
        font-size: 85%;
    }
}

.container {
    margin: auto;
    text-align: justify;
    height: 100%;
    /* This keeps the container at the designated width, no matter the padding, margins etc. It works on Divs only */
    box-sizing: border-box;
    max-width: 1100px;
}

.widePage {
    max-width:1500px;
}

.centerColumn {
    border-top: 10px solid #fdfdfd;
    /*	border-radius:10px; */
    padding: 3vw;
    height: auto;
    box-shadow: 0 0 1.0rem rgba(0, 0, 0, 0.35);
    background: var(--center-column-background-color);
    margin-top: -10px;
    margin-bottom: -10px;
}

.noUnderline {
    text-decoration: none;
}

.centered {
    text-align: center;
}

.centeredItem, .centeredText, .centeredTable {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.centeredTable {
    display: table;
}

.centeredText {
    text-align: center;
}

p.quote {
    color: var(--body-text-color);
}

.niceyNice {
    color: var(--body-text-color);
    font-size: 125%;
}

h1.fontWeightNormal {
    font-weight: 100;
}

h1.centeredAndFontWeightNormal {
    font-weight: 100;
    text-align: center;
}

h2.fontWeightNormal {
    font-weight: 100;
}

h2.centeredAndFontWeightNormal {
    font-weight: 100;
    text-align: center;
}

h2.tightBottom {
    color: var(--body-bg-color);
    margin-bottom: 2px;
    margin-top: 25px;
}

h3.fontWeightNormal {
    font-weight: normal
}

/* This is the correct order: Link, Visited, Hover, Active */
a {
    font-weight: 600;
}

a:link {
    color: var(--link-color);
}

a:visited {
    color: var(--link-color);
}

a:hover {
    color: Red;
}

a:active {
    color: Red;
}


/* This is the correct order: Link, Visited, Hover, Active */
.linkSpan {
    color: var(--link-color);
    font-weight: 600;
    text-decoration: underline;
}

.linkSpan:visited {
    color: var(--link-color);
    text-decoration: none;
}

.linkSpan:hover {
    color: Red;
    text-decoration: underline;
    cursor: pointer;
}

.linkSpan:active {
    color: Red;
    text-decoration: none;
}


/* Place this after the other link-related tags */
.currentLink a:link,
.currentLink a:visited,
.currentLink a:hover,
.currentLink a:active {
    color: Red;
}

/* Style button like a link */
.buttonToLink {
    background: none;
    border: none;
    box-shadow: none;
    color: var(--link-color);
    text-decoration: underline;
    display: inline;
    margin: 0;
    padding: 0;
}

.buttonToLink:visited {
    color: var(--link-color);
}

.buttonToLink:hover {
    color: red;
    border: none;
    background: none;
    box-shadow: none;
    cursor: pointer;
}

.buttonToLink:active {
    color: Red;
}

a.noImageBorder img {
    border: none;
}

a.green {
    color: green;
}

a.red:hover {
    color: var(--body-text-color);
    text-decoration: none;
}

a.red:active {
    color: #DDD;
    text-decoration: none;
}

.redHover {
    color: var(--body-text-color);
}

.redHover:hover {
    color: red;
}

p.test {
    margin: 50px;
}

td.centerJustify {
    text-align: center;
}

img {
    border: var(--image-border);
    box-shadow: 2vw 2vw 5vw #000;
}

.middleWayImage {
    max-width:95%;
    margin-left:auto;
    margin-right:auto;
    display:block;
}

img.thumbnail {
    color: white;
    border: var(--image-border);
}

img.leftMargin {
    float: right;
    margin-left: 10px;
    max-height: 85vh; /* prevent tall images from exceeding viewport */
}

img.rightMargin {
    float: left;
    margin-right: 10px;
    max-height: 85vh; /* prevent tall images from exceeding viewport */
}

img.rightAndBottomMargin,
img.far-left {
    float: left;
    margin-right: 10px;
    /* margin-bottom: 7px */
    max-height: 85vh; /* prevent tall images from exceeding viewport */
}

img.centeredImage {
    margin-left:auto;
    margin-right:auto;
    display:block;
}

.nicePic {
    max-width: 80%;
    max-height: 85vh; /* prevent tall images from exceeding viewport */

    /*box-shadow: 10px 10px 50px var(--box-shadow-color);*/

    border: 25px solid var(--image-border-color);
    margin-bottom: -10px;
}

.niceParagraph {
    text-align: center;
    font-size: 90%;
}

table.leftAndBottomMargin {
    margin-left: 10px;
    max-height: 85vh; /* prevent tall images from exceeding viewport */
}

img.leftAndBottomMargin,
img.far-right {
    float: right;
    margin-left: 10px;
    max-height: 85vh; /* prevent tall images from exceeding viewport */
}

img.noBorder {
    border: none;
}

img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
    max-height: 85vh;
}

/*img.beforeAndAfterPhotoAfter,*/
/*img.beforeAndAfterPhotoBefore {*/
/*    max-height:85vh;*/
/*    margin-top:-5px;*/
/*    margin-bottom:15px;*/
/*    border: 2px solid var(--image-border-color);*/
/*}*/

img.beforeAndAfterPhotoAfter {
    max-width: 85%;
}

img.beforeAndAfterPhotoBefore {
    max-width: 70%;
}

h1 {
    color: var(--body-text-color);
    font-size: 135%;
}

h2 {
    color: #CCCCCC;
    font-size: 135%;
}

h3 {
    color: var(--body-text-color);
    font-size: 135%;
}

h4 {
    color: var(--body-text-color);
    font-size: 135%;
}

table.center {
    width: 70%;
    margin-left: 15%;
    margin-right: 15%;
}

table.centerSmaller {
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
}

.justified {
    text-align: justify;
}

.leadIn {
    color: var(--body-text-color);
    font-size: 150%;
}

.niceImageBorder img {
    border: var(--image-border);
    box-shadow: 4vw 4vw 10vw var(--box-shadow-color);
    margin-bottom: 4vw;
}


.niceImageBorderSmall img {
    box-shadow: 10px 10px 5px var(--box-shadow-color);
    border: 15px solid white;
    margin-bottom: 10px;
}

.noImageBorder img {
    border: none;
}

.noImageBorder {
    border: none;
    box-shadow: none;
}
.quote {
    color: var(--body-text-color);
}

.highleading {
    line-height: 200%;
}

.thumbnails a img {
    border: 2px solid gray;
    text-decoration: none;
}

.thumbnails a:link img {
    border: var(--image-border);
    text-decoration: none;
}

.thumbnails a:visited img {
    border: var(--image-border);
    text-decoration: none;
}

.thumbnails a:hover img {
    color: white;
    border: 2px solid white;
    text-decoration: none;
}

.thumbnails a:active img {
    border: 2px solid gray;
    text-decoration: none;
}

.bigshots a img {
    border: var(--image-border);
    text-decoration: none;
}

.bigshots a:link img {
    border: var(--image-border);
    text-decoration: none;
}

.bigshots a:visited img {
    border: var(--image-border);
    text-decoration: none;
}

.bigshots a:hover img {
    border: 3px solid white;
    text-decoration: none;
}

.bigshots a:active img {
    border: var(--image-border);
    text-decoration: none;
}

.thumbnailsWithGoldBorder a img {
    border: 4px solid var(--image-border-color);;
}

.thumbnailsWithGoldBorder a:link img {
    border: 4px solid var(--image-border-color);
}

.thumbnailsWithGoldBorder a:visited img {
    border: 4px solid var(--image-border-color);
}

.thumbnailsWithGoldBorder a:hover img {
    border: 4px solid red;
}

.thumbnailsWithGoldBorder a:active img {
    border: 4px solid var(--image-border-color);
}

.adjusted {
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 120px;
    margin-top: 12px;
    margin-bottom: -11px;
}

.smallText {
    font-size: 0.8vw;
}

.redText {
    color: red;
    font-size: 1.5vw;
}

.goldText {
    color: var(--body-text-color);
}


.wrapper {
    min-height: 100%;
    height: auto;
    height: 100%;
    margin: 0 auto -20px;
    /* the bottom margin is the negative value of the footer's height */
}

.footer,
.push {
    height: 20px;
    /* .push must be the same height as .footer */
}

.footer {
    text-align: center;
}

.quotation {
    color: White;
    font-style: italic;
    line-height: 120%;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
    font-size: 90%;
}

.dialogTarget {
    color: #673427;
    font-weight: 600;
}

.fadeIn {
    animation: myFadeIn 4s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-direction: normal;
    /* Firefox */
    -moz-animation: myFadeIn 4s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    /* Safari and Chrome */
    -webkit-animation: myFadeIn 4s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    /* Opera */
    -o-animation: myFadeIn 4s;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: 1;
    -o-animation-direction: normal;
}


@keyframes myFadeIn {
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0.1;
    }

    /* this lets the image load */
    100% {
        opacity: 1;
    }
}

@-moz-keyframes myFadeIn

    /* Firefox */
{
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0.1;
    }

    /* this lets the image load */
    100% {
        opacity: 1;
    }

}

@-webkit-keyframes myFadeIn

    /* Safari and Chrome */
{
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0.1;
    }

    /* this lets the image load */
    100% {
        opacity: 1;
    }
}

@-o-keyframes myFadeIn

    /* Opera */
{
    0% {
        opacity: 0;
    }

    20% {
        opacity: 0.1;
    }

    /* this lets the image load */
    100% {
        opacity: 1;
    }
}


.blurIn {
    animation: myBlurIn 3s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-direction: normal;
    /* Firefox */
    -moz-animation: myBlurIn 3s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: 1;
    -moz-animation-direction: normal;
    /* Safari and Chrome */
    -webkit-animation: myBlurIn 3s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-direction: normal;
    /* Opera */
    -o-animation: myBlurIn 2s;
    -o-animation-timing-function: linear;
    -o-animation-iteration-count: 1;
    -o-animation-direction: normal;
}


@keyframes myBlurIn {
    0% {
        filter: blur(4px);
    }

    25% {
        filter: blur(3px);
    }

    /* this lets the image load */
    50% {
        filter: blur(2px);
    }

    75% {
        filter: blur(1px);
    }

    100% {
        filter: blur(0px);
    }
}

@-webkit-keyframes myBlurIn

    /* Safari and Chrome */
{
    0% {
        -webkit-filter: blur(4px);
    }

    25% {
        -webkit-filter: blur(3px);
    }

    /* this lets the image load */
    50% {
        -webkit-filter: blur(2px);
    }

    75% {
        -webkit-filter: blur(1px);
    }

    100% {
        -webkit-filter: blur(0px);
    }
}

@-o-keyframes myBlurIn

    /* Opera */
{
    0% {
    blur(3 px);
    }

    20% {
    blur(1 px);
    }

    /* this lets the image load */
    100% {
    blur(0 px);
    }
}


.headingTintBar {
    color:var(--heading-bar-text-color);
    background-color: var(--heading-bar-background-color);
    background-image: none;
    padding: 12px;
    padding-left: 10px;
    padding-top: 10px;
    margin-top: 20px;
    margin-bottom: -5px;
    font-size: 150%;
    font-weight: bold;
    text-align: center;
    border-radius: 5px;
}

.headingBarContainer {
    margin-top: 30px;
    border: 2px solid var(--heading-bar-background-color);
    border-radius: 1.1vw;
}

.headingBarTitle, .headingBarTitleSeparator {
    color:var(--heading-bar-text-color);
    background-color: var(--heading-bar-background-color);
    text-align: center;
    height: 4.5vw;
    font-size: var(--heading-bar-text-size);
    line-height: 2.3;
}

.headingBarTitle {
    border-radius: 1vw 1vw 0vw 0vw; /* just the upper left and right */
}

.headingBarContent {
    padding-left: 1%;
    padding-right: 1%;
}

#header {
    /*	font-size:85%; */
    height: 8%;
}


.thickListItem {
    margin-top: 12px;
}

input.rounded {
    padding: 3px;
    background: #DDD;
    border-radius: 4px;
}

input:hover {
    background: #E5E5E5;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .7);
}

.niceImageBorder img.arrows {
    height: 30px;
    border: none;
    box-shadow: none;
    opacity: 0.3;
}


.niceImageBorder img.arrows:hover {
    opacity: 1.0;
    transition: 0.3s;
}

.bigger {
    font-size: 135%;
    font-weight: bold;
}

.inactiveText {
    opacity: 0.5;
}

.inactiveText a {
    pointer-events: none;
    /* Disables the button completely. Better than just cursor: default; */
    font-weight: normal;
}

.bigtime {
    font-size: 115%;
    font-weight: bold;
}

.importantIcon {
    height: 40px;
    margin-bottom: -12px;
}

.tableHeadings th {
    padding: 10px;
}

.bwOnHover:hover {
    filter: grayscale(100%);
}

.growOnHover:hover {
    transition: 0.3s;
    transform: scale(1.05);
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
}

.orderedListWithMoreLineSpacing {
    line-height: 150%;
}

.growingImage:hover {
    transition: 1.6s ease-in;
    -webkit-transform: scale(1.3);
}

/* This handles when hover is over: it slowly restores image to original size */
.growingImage {
    transition: 0.2s ease-in;
    -webkit-transform: scale(1.0);
}

a.grayButton, .graySubmitButton {
    text-align: center;
    display: inline-block;
    color: var(--gray-button-text-color);
    text-decoration: none;
    padding: 1%;
    padding-left: 2%;
    padding-right: 2%;
    font-weight: bold;
    margin: 2%;
    background-color: var(--gray-button-background-color);
    border-radius: 2vw;
}

a.grayButton:hover, .graySubmitButton:hover {
    background-color: white;
    color: var(--gray-button-text-color);
    color:black;
}

/* Style the Copyright button to look like the anchor tags */

.graySubmitButton {
    font-size: 100%;
    font-weight: normal;
}

.graySubmitButton:hover {
    cursor: pointer;
    box-shadow: none;
}

.grayButton:visited, .graySubmitButton:visited {
    color: var(--gray-button-text-color);
    background-color: var(--gray-button-background-color);
}

.flash:hover {
    opacity: 1;
    -webkit-animation: flash .3s;
    animation: flash .3s;
}

@-webkit-keyframes flash {
    0% {
        opacity: .3;
    }

    100% {
        opacity: 1;
    }
}

@keyframes flash {
    0% {
        opacity: .3;
    }

    100% {
        opacity: 1;
    }
}

.embeddedVideo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 8px;
    margin-bottom: 8px;
    max-width: 100%;
    max-height: 85vh;
    box-shadow: 8px 8px 20px var(--box-shadow-color);
}

.linkImage {
    max-width: 85%;
    margin-top: -5px;
    margin-bottom: 25px;
    box-shadow: 2vw 2vw 4vw var(--box-shadow-color);
}

.underLabel,
.underLabelSmall {
    text-align: center;
    color: gray;
    margin-top: 1vw;
    margin-bottom: 1vw;
    font-size: 125%;
}

.underLabelSmall {
    font-size: 100%;
}
.kenTable {
    color:black;
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    background-color: rgba(249, 249, 249, 0.7);
    font-size:85%;
}

th, td {
    border:1px solid white;
    text-align: center;
    padding:2px;
}

th {
    background-color: var(--center-column-background-color);
    color: var(--link-color);
}

/*odd and even row striping on tables*/
tr:nth-child(odd){
    background: rgba(222, 222, 222, 0.5)
}

tr:nth-child(even){
    background: rgba(255, 255, 255, 0.5)
}

tr:hover {
    background: #AAA;
}

/* Prevent table header <td> from changing background on mouseover */
tr:nth-child(1):hover {
    background: rgba(222, 222, 222, 0.5)
}