/* Author:       Matt Wolf                  */
/* Date:         11-23-19                   */
/* Description:  stie styles for goose lake assc.           */

/*font imports*/
@import url(../fonts/appleberry.css);
@import url(../fonts/overlock.css);

/* Eric Meyers reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, main, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
    display: block;
}

body {
    line-height: 1;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

    blockquote:before, blockquote:after,
    q:before, q:after {
        content: '';
        content: none;
    }

table {
    border-collapse: collapse;
    border-spacing: 0;
}
/*********************************************************************************************************************************/
/*start of css for page*/

/* start for normal flow */
/*mobile view port*/
body {
    background-image: url(../images/marb072.jpg);
    background-position: left;
    background-repeat: repeat;
}

#wrapper {
    width: 320px;
    margin-top: -25px;
    padding-top: 25px;
    margin-left: auto;
    margin-right: auto;
    background-color: rgba(205,205,205,.7);
}

#signUpTab {
    margin-left: 38px;
}

header {
    height: 50px;
    background-color: rgba(100,100,100,.7);
    text-align: center;
}

    header h1, header h2 {
        z-index: 5;
    }

#bannerFig {
    margin: 0%;
    width: 100%;
}

#topImage {
    margin-left: 0%;
    max-width: 100%;
    width: inherit;
    box-shadow: none;
    min-height: 100px;
    max-height: 250px;
}

h1, h2, .listingArticleHeading {
    font-family: "AppleberryRegular",Arial,sans-serif;
    opacity: 1;
    text-shadow: 2px 3px 3px rgb(200,200,200);
}

h1 {
    font-size: 1.5em;
}

h2, .listingArticleHeading {
    font-size: 1.2em;
}

h3, legend, .listSectionHeading {
    padding: 5px 0px;
    font: bold 1em "AppleberryRegular","Times New Roman",serif;
}

h4 {
    padding: 5px 0px;
    font: bold 1em "AppleberryRegular","Times New Roman",serif;
}

#login {
    background-color: rgba(190,190,190,.8);
    box-shadow: 5px 3px 7px rgb(50,50,50 );
    border: black 2px solid;
    position: absolute;
    right: 0px;
    top: 0px;
    margin: 0px;
    margin-right: 5px;
    margin-top: 5px;
    padding: 5px;
    border-radius: 5px;
}

/*this should go in the next rule but i am fighting it , li.listSectionHeading  */
.listingArticleHeading {
    font-family: Arial, serif;
}

nav {
    height: 180px;
}
.photo-grid{
	margin-top:20px;
	padding-left: 5px;
	padding-right: 5px;
}
#sponsors {
    visibility: hidden;
    min-width: 0%;
    min-height: min-content;
    height: 0px;
}

#map {
    margin-left: -10px;
    height: 400px;
    width: 100%;
    border: none;
}

#pdfs{
	margin-top:50px;
}
.pdfTitle {
    margin-top: 25px;
}

.pdfLink {
    text-align: center;
    width: 100%;
    display: block;
}

iframe {
    display: none;
}

nav ul {
    width: 85%;
    margin-left: 7.5%;
}

nav li {
    background-color: rgba(190,190,190,.8);
    margin-top: 10px;
    padding-top: 5px;
    padding-bottom: 5px;
    text-align: center;
    border-radius: 15px;
    box-shadow: 5px 3px 7px rgb(50,50,50 );
}

li a {
    font: normal 1em "AppleberryRegular","Times New Roman",serif;
}

table {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

caption {
    font-size: 3em;
}

th {
    border: solid black;
    width: 14.28571429%;
    padding: 1%;
    font-weight: bold;
    background-color: darkcyan;
}

td {
    border: solid black;
    width: 14.28571429%;
    padding: 1%;
}

ol {
    list-style: lower-alpha;
    padding-left: 25px;
}

    ol li {
        padding-left: 5px;
    }

figcaption {
    padding-top: 8px;
}

a, a::before, a::after {
    text-decoration: none;
    color: rgb(20,20,20);
}

a:hover {
    color: rgba(20,20,20, .8);
    text-decoration: underline;
}

img {
    border-radius: 4px;
    box-shadow: 2px 5px rgba(50,50,50,.8);
}

footer p, footer ul, footer li, footer span {
    padding: 5px;
    text-align: left;
    font: 1em "OverlockRegular", Helvetica, sans-serif;
}

article, aside, #boardMembers {
    margin: 30px 0px;
    padding: 15px 10px;
}

#boardMembers {
    border: 1px solid black;
	margin-right: 5px;
	border-radius: 10px;
}

aside li, article p {
    font: 1em "Times New Roman",serif;
}

#messageFromPres {
    clear: both;
    width: 100%;
}

#forSale p {
    border: solid black 1px;
}

#forSale a {
    text-decoration: underline;
}

.submittedImage {
    margin-top: 20px;
    width: 100%;
    height: 100%;
}

.oneTwenty {
    width: 120px;
    display: inline-block;
    margin-top: 15px;
}

#newsLetterSignUp legend, #contactForm legend {
    margin-left: auto;
    margin-right: auto;
    font-size: 1.5em;
}

label.signUpCB {
    float: left;
    clear: both;
}

#contactForm, #newsLetterSignUp, .signInAndSignUp {
    background-color: rgba(175,175,175,.7);
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 25px;
    border-radius: 25px;
    margin-bottom: 25px;
    margin-left: 2%;
    margin-right: 2%;
}

#logo {
    visibility: hidden;
    height: 1px;
    width: 1px;
}

#videoOfTheLaunch {
    margin: 0px;
    padding: 0px;
}

.photoright figcaption, .photoleft figcaption, .photocenter figcaption {
    margin-left: 75px;
}

img {
    width: 100%;
    height: 100%;
}

#lakeLevelSection {
    clear: both;
}

.pdf {
    text-align: center;
}

.pdfTitle {
    text-align: center;
}

.vintageDocument img {
    margin-left: auto;
    margin-right: auto;
}

#historyOfLake h2, #historyOfLake h4 {
    text-align: center;
}

#historyOfLake h2 {
    margin-left: auto;
}

#lakeLevelImgFig {
    width: 60%;
    margin-left: 20%;
    margin-top: 10px;
}

figcaption {
    margin-left: 47%;
}

#lakeLevels {
    display: none;
}


/*pasted bootstrap*/
#upload {
    opacity: 0;
}

#upload-label {
    
    top: 50%;
    left: 1rem;
    transform: translateY(-50%);
}

.image-area {
    border: 2px dashed rgba(255, 255, 255, 0.7);
    padding: 1rem;
    position: relative;
}

.image-area::before {
    content: 'Uploaded image result';
    color: #fff;
    font-weight: bold;
    text-transform: uppercase;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    z-index: 1;
}

.image-area img {
    z-index: 2;
    position: relative;
}

/* this is to clear anything that we have done that may effect the google map   */
#map img, #map div, #map iframe, #map p, #map {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    box-shadow: none;
}
/******************************************************************************************************************/
/* screen width greater then 1024px */
@media screen and (min-width:1024px) {
    #wrapper {
        margin-left: auto;
        margin-right: auto;
        width: 75%;
        min-width: 900px;
    }

    header {
        height: 100px;
        align-content: center;
    }

    .photoright figcaption, .photoleft figcaption, .photocenter figcaption {
        margin-left: 125px;
    }

    #sponsors {
        visibility: visible;
        display: block;
	height:150px ;
    }

    h1 {
        font-size: 3em;
    }

    h2 {
        font-size: 2em;
    }

    h3 {
        font-size: 1.75em;
    }

    h4 {
        font-size: 1.5em;
    }

    figure {
        margin-top: 45px;
    }

    figcaption {
        margin-bottom: 25px;
        width: 90%;
    }

    nav {
        clear: both;
        margin-left: 0px;
        margin-right: 0px;
        height: 80px;
    }

    nav ul {
        max-width: 100%;
        width: 100%;
        margin-left: 3.333333333333333333%;
    }

    nav li {
        margin-left: 5px;
        margin-right: 0px;
        padding-top: 10px;
        padding-bottom: 10px;
        float: left;
        min-width: 125px;
        width: 18%;
        text-align: center;
        border-radius: 5px;
        box-shadow: 5px 3px 7px rgb(50,50,50 );
        font-size: 1.2em;
    }
	 
	 .ic-icon-svg--inbox{
		height: 34px;
		position: inherit;
		float: right;
		padding-right: 15px;
		padding-top: 0;
		margin-top: -50px;
	 }

    #welcome {
        float: left;
        width: 50%;
		padding-left:10%;
    }
	#welcome h3{
		text-align:center;
	}
    .rightmain {
        float: right;
        clear: right;
        padding-right: 25px;
    }

    .left {
        float: left;
        width: 38%;
        clear: left;
        padding-left: 25px;
    }

    .right {
        float: right;
        width: 38%;
        clear: right;
        padding-right: 25px;
    }

    #contactForm, #newsLetterSignUp {
        max-width: 400px;
    }

    #map {
        width: 100%;
    }

    #boardMember {
        margin-right: 50px;
    }

    iframe {
        display: inherit;
    }

    .pdf {
        margin: 0%;
    }

    img {
        margin-left: auto;
        margin-right: auto;
    }

    #sponsors {
        visibility: visible;
        float: left;
        width: 15%;
        clear: left;
        margin-left: 15px;
    }

    #sponsors img {
        border: none;
        box-shadow: none;
    }

    footer .left {
        float: left;
    }

    footer p {
        clear: both;
    }

    figure {
        margin-top: 45px;
        width: 50%;
        height: 50%;
    }

	.photo-grid{
		display: grid;
		width:100%;
		grid-template-columns: auto auto;
		padding: 10px;
	}
	
	.submittedImageFig{
		margin-top: 20px;
		width: 90%;
		height: 90%;
		margin-right: auto;
		padding-left: 12px;
	}

    address {
        font-size: 1.1em;
    }

    footer {
        margin-left: auto;
        margin-right: auto;
        height: 155px;
        text-align: center;
        clear: both;
    }

    footer article h3 {
        text-align: left;
        margin-left: 25px;
        font-size: 2em;
    }

    footer p, footer ul, footer li {
        padding: 5px;
        margin-left: 15px;
    }

    #footerNav {
        margin-left: 25%;
    }

    #footerNav li {
        float: left;
    }

    footer p {
        clear: both;
        margin-left: 35%;
    }

    #map {
        min-width: 270px;
    }

    #newsLetterSignUp {
        margin-left: 15px;
    }

    #contactForm {
        margin-right: 15px;
    }

    #logo {
        visibility: visible;
        height: 100px;
        width: 100px;
        margin: 0px;
        padding: 0px;
        margin-left: 25px;
    }

    #logo img {
        width: 100%;
        height: 100%;
        padding: 0px;
        margin: 0px;
    }

    .tab {
        display: inline;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 15px;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        background-color: cadetblue;
        cursor: pointer;
    }

    #signInUpDiv {
        margin-left: auto;
        margin-right: auto;
        width: 500px;
        padding-top: 25px;
        padding-bottom: 25px;
        border: black solid 4px;
        border-radius: 25px;
    }

    .signInAndSignUp {
        margin-left: auto;
        margin-right: auto;
        max-width: 400px;
        background-color: rgb(175,175,175);
        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 25px;
        border-bottom-left-radius: 25px;
        border-bottom-right-radius: 25px;
        border-top-left-radius: 25px;
        margin-bottom: 25px;
    }
    /* this is to clear anything that we have done that may effect the google map   */
    #map img, #map div, #map iframe, #map p, #map {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        box-shadow: none;
    }
}
/*end of 1024 media query*/


/******************************************************************************************************************/
/* screen width greater then 1280px */
@media screen and (min-width:1280px) {
    #wrapper {
        max-width: 1000px;
    }
}


/*print query*/
@media print {
    body {
        background: rgb(255,255,255);
    }

    #wrapper {
        width: 100%;
        background: rgb(255,255,255)
    }

    article, aside, footer, header, h1, h2, h3, a, p, ul, li {
        background: rgb(255,255,255);
        color: rgb(0,0,0);
    }

    ol li {
        margin-left: 15px;
    }

    nav, figure {
        display: none;
    }
}