body {
    font-family: Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: none;
    font-size: 100%;
}

#Background {
    position: fixed;
    /*background: white url(images/DSC_3746_3000w.jpg) no-repeat center;*/
    background: white url(images/DSC_4124_3000w.JPG) no-repeat center;
    background-size: cover;
    z-index: -2;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

#BackgroundShader {
    position: fixed;
    background-color: rgba(255,255,255,.7);
    z-index: -1;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
}

/* general */
.noshrink {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.hidden {
    display: none !important;
}

.widemodediv {
    display: block;
}

.narrowmodediv {
    display: none;
}


/* Header */
.logo {
    /*padding-left: 113px;*/
}

.page {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
}

.pagecontents {
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.fundsblock {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    /*-webkit-flex-wrap: wrap;*/
    /*flex-wrap: wrap;*/
    -webkit-justify-content: center;
    justify-content: center;
    margin: 1em 0;
}

.menubar {
    margin: 5px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    -webkit-align-self: flex-start;
    align-self: flex-start;
}

.menubar img {
    width: 113px;
}

.menubar span {
    display: none;
}

.menubar2 {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    margin: 1em 0;
}

.menubar2 a {
    color: black;
    text-decoration: none;
    font-weight: bold;
}

.menubutton {
    background-color: lightskyblue;
    border: .2em solid lightblue;
    border-radius: .6em;
    color: black;
    width: 6em;
    height: 1.5em;
    margin: .1em;
}

.menubutton > div {
    margin-top: .25em;
    text-align: center;
}

.menubutton:not(.nohover):hover {
    background-color: lightblue;
    border-color: lightblue;
}

.menubutton.nohover {
    text-decoration: none;
    font-weight: bold;
    border-color: deepskyblue;
}

.menubutton2 {
    background-color: lightskyblue;
    border: .2em solid lightblue;
    border-radius: .6em;
    color: black;
    width: 8em;
    height: 1.5em;
    margin: .1em;
}

.menubutton2 > div {
    margin-top: .25em;
    text-align: center;
}

.menubutton2:not(.nohover):hover {
    background-color: lightblue;
    border-color: lightblue;
}

.menubutton2.nohover {
    text-decoration: none;
    font-weight: bold;
    border-color: deepskyblue;
}

.announcementblock {
    color: red;
    /*text-decoration: underline;*/
    padding: 30px 30px;
    text-align: center;
}

.announcement {
    padding: 0 0 .25em 0;
    font-size: 1.5em;
}

.announcement-big {
    padding: 0 0 1em 0;
    font-size: 3em;
}

.content {
    margin: 5px;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
}

.content > div {
}

/* Weather */
.weather {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: center;
    justify-content: center;
    padding: .5em;
    /*border: 2px solid;*/
    background-color: rgba(0,0,0,.03);
    font-size: .8em;
    margin: 1em 0;
}

.weatherblock {
    padding: .5em;
}

.weatherblockiconright {
    align-content: center;
    padding: 0 10 0 0;
}

.weatherblockiconleft {
    align-content: center;
    padding: 0 0 0 10;
}

.weathercurrent, .weatherforecast {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    padding-top: .5em;
}

.weatherobs {
    padding-left: .5em;
}

.weathericon > img {
    width: 60px;
}

.weatherobs span {
    font-size: .7em;
}

.weatherheading {
    font-weight: bold;
    /*display: block;*/
    /*padding-left: .5em;*/
}

.weatheritem {
    /*padding: .5em;*/
}

.weatherrecent {
    /*display: none;*/
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    /*-webkit-flex-wrap: wrap;*/
    /*flew-wrap: wrap;*/
    /*border-left: 1px solid;*/
    /*overflow: hidden;*/
    /*padding-top: .5em;*/
}

#RecentInfo {
    width: 1.2em;
    vertical-align: top;
}

#WeatherRecent {
    padding-top: .5em;
    width: 170px;
    height: 87px;
}

.weatherlinks {
    /*max-height: 100px;*/
    /*min-width: 190px;*/
    /*width: 190px;*/
    /*border-left: 1px solid;*/
    /*padding-left: .5em;*/
    padding-top: .5em;
}

a.weatherlink {
    text-decoration: none;
    color: blue;
    font-weight: bold;
    padding-top: 5px;
    display: block;
}

a.weatherlink:hover {
    color: lightblue;
}

.wubugimg {
    width: 170px;
}

#HelpPopup {
    display: none;
    position: absolute;
    border: 2px solid black;
    padding: 5px;
    background: rgb(255,255,255);
    color: black;
}

/* Cams */
.content > :not(.cams) {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.cams {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: center;
    justify-content: center;
}

.cams > div {
    margin: 3px;
}

.cams img {
    width: 100%;
    height: auto;
    border: 2px solid;
    box-sizing: border-box;
}

.refreshtag {
    color: white;
    font-size: .7em;
    background-color: black;
    padding: 2px 5px;
    position: relative;
    float: right;
    top: -1.7em;
    margin-bottom: -1.7em;
    height: 1.3em;
    /*width: 30px;*/
    text-align: center;
}

.refreshtag2 {
}

.top-cams > div {
    max-width: 600px;
    /*max-height: 337.5px;*/
}

.middle-cams > div:not(.space){
    /*max-width: 340px;*/
    /*max-height: 272px;*/
    max-width: 398px;
    /*max-height: 337.5px;*/
}

.middle-cams-two > div:not(.space){
    /*max-width: 340px;*/
    /*max-height: 272px;*/
    max-width: 600px;
    /*max-height: 337.5px;*/
}

.bottom-cams > div:not(.space){
    /*max-width: 340px;*/
    /*max-height: 272px;*/
    max-width: 500px;
    /*max-height: 337.5px;*/
}

/*.clubhousecam {*/
/*max-width: 450px !important;*/
/*}*/

.middle-cams > div.space {
    -webkit-flex-shrink: 2;
    flex-shrink: 2;
    max-width: 81px;
}

.middle-cams-two > div.space {
    -webkit-flex-shrink: 2;
    flex-shrink: 2;
    max-width: 81px;
}

.middle-cams > div.space > div {
    width: 81px;
    height: auto;
}

.middle-cams-two > div.space > div {
    width: 81px;
    height: auto;
}

.bottom-cams > div.space {
    -webkit-flex-shrink: 2;
    flex-shrink: 2;
    max-width: 248px;
}

.bottom-cams > div.space > div {
    width: 248px;
    height: auto;
}

.content h2 {
    /*font-size: 1.5em;*/
    /*font-weight: bold;*/
    padding: .5em;
    margin: 0;
    text-align: center;
}

.content h3 {
    padding: .5em;
    margin: 0;
    text-align: center;
}

.zoomheading {
    font-size: .8em;
    text-align: center;
}

.postcamsrow {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    align-content: center;
    width: 100%;
}

.postcamsrow > div.space {
    -webkit-flex-shrink: 2;
    flex-shrink: 2;
    -webkit-flex-grow: 3;
    flex-grow: 3;
}

.postcamsrow > div.space.small {
    -webkit-flex-shrink: 4;
    flex-shrink: 4;
    -webkit-flex-grow: 1;
    flex-grow: 1;
}


/* Events List */
.eventslist {
    margin-top: 1.5em;
}

.eventslist p {
    margin: 0;
}

.eventslist > h2, .eventslist > h3, .eventslist > p {
    text-align: center;
    padding: 0;
}

.eventslist a {
    color: red;
}

.eventslist .blacklink {
    color: black;
}

.eventslist ul {
    list-style: none;
    padding: 0;
    text-align: center;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.eventslist li {
    margin: 2px;
    padding: 1em;
    background-color: lightgray;
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
}

.eventslist .eventdate {
    font-weight: bold;
}

.eventslist .eventname {
    color: red;
    font-weight: bold;
}

.propwash {
    max-width: 300px;
    min-width: 150px;
}

.newsletters {
    color: black;
}

.newsletters > h2, .newsletters > h3 {
    text-align: center;
    padding: 1em;
}

.newsletters a {
    color: red;
}

.newsletteryears {
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    justify-content: center;
}

.newsletteryear {
    color: black;
}

.newsletteryear ul {
    list-style: none;
    padding: 0 0 2em;
    text-align: center;
    margin: 0;
}

.newsletteryear li {
    margin: 2px;
    padding: 1em;
    background-color: lightgray;
}

p.policy {
    font-size: .7em;
    text-align: center;
}

/*Popup Window*/
#popupWindowContainer {
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: 100;
}

.popupWindowBacker {
    position: absolute;
    background-color: black;
    opacity: .90;
}

.popupWindowImg {
    position: absolute;
    border: 3px solid gray;
    background-color: black;
    background-repeat: no-repeat;
    background-size: contain;
    background-origin: content-box;
    opacity: 0;
}

.refreshHeading {
    display: block;
    position: absolute;
    color: white;
    background-color: rgba(0,0,0,.66);
    font-size: 1em;
    padding: .2em 0;
    bottom: 0px;
    /*left: 50%;*/
    /*transform: translateX(-50%);*/
    text-align: center;
}

.refreshCounter{
    /*font-weight: bold;*/
}

.popupWindowHide {
    display: none;
}

@media screen and (max-width: 940px) {
    .logo {
        padding-left: 0;
    }
    .pagecontents {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    .menubar {
        -webkit-align-self: center;
        align-self: center;
        -webkit-flex-direction: row;
        flex-direction: row;
        -webkit-justify-content: center;
        justify-content: center;
    }
    .menubar > div {
        margin: 5px;
        padding: .5em;
        background-color: lightblue;
        border: 2px solid darkblue;
        border-radius: 10px;
    }
    .menubar > div > div {
        text-align: center;
    }
    .menubar a {
        color: black;
        text-decoration: none;
        font-weight: bold;
    }
    .menubar img {
        display: none;
    }
    .menubar span {
        display: inline;
    }
}

@media screen and (max-width: 567px) {
    .logo {
        width: 100%;
        height: auto;
    }
    .weather {
        -webkit-flex-direction: column;
        flex-direction: column;
    }
    .weatherrecent {
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        border-left: 0;
        /*border-top: 1px solid;*/
    }
    .weatherlinks {
        border-left: 0;
        /*border-top: 1px solid;*/
    }
    .wubugimg {
        max-width: 210px;
    }
    .weatherblockiconright {
        display: flex;
        justify-content: center;
    }
    .weatherblockiconleft {
        display: flex;
        justify-content: center;
    }
    .widemodediv {
        display: none;
    }
    .narrowmodediv {
        display: block;
    }
    .cams {
        /*flex-direction: column;*/
        -webkit-align-items: center;
        align-items: center;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .eventslist {
        width: 100%;
    }
    .propwash {
        max-width: none;
        min-width: none;
    }
    .eventslist ul {
        /*font-size: .5em;*/
        -webkit-flex-wrap: nowrap;
        flex-wrap: nowrap;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        -webkit-align-items: stretch;
        align-items: stretch;
    }
    .middle-cams > div:not(.space){
        max-width: 600px;
    }
    .middle-cams-two > div:not(.space){
        max-width: 600px;
    }
    .bottom-cams > div:not(.space) {
        max-width: 600px;
    }
    .middle-cams > div.space {
        display: none;
    }
    .middle-cams-two > div.space {
        display: none;
    }
    .bottom-cams > div.space {
        display: none;
    }
    /*.clubhousecam {*/
    /*max-width: inherit !important;*/
    /*}*/
    .refreshHeading {
        font-size: .7em;
    }
    .postcamsrow {
        /*-webkit-flex-direction: column;*/
        /*flex-direction: column;*/
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
    }
    .postcamsrow > div.space {
        display: none;
    }
}