@charset "utf-8";


html { box-sizing:border-box }

*,
*:before,
*:after { box-sizing:inherit }

body { font: 16px/1.3 Verdana, Arial, Helvetica, sans-serif; color: #000; background: linear-gradient(90deg, #cff, #9cf); text-align: center; margin: 0px; padding: 0px; border-style: none; }

html { -ms-text-size-adjust:100%; -webkit-text-size-adjust:100% }

.responsive { height: auto; width: 100%; }

.datetime { font: 100% Georgia, "Times New Roman", Times, serif; color: #fff; background:linear-gradient(to top, #330 0%, #669 50%); padding: 1em; margin-right: auto; margin-left: auto; }

#logo { color: #000; background: #fff; text-align: center; display: block; margin-right: auto; margin-left: auto; width: 60%; border: medium solid #666666; border-radius: 16px; }

a {
        font-size: 18px;       /* Change this to your desired size */
        text-decoration: none; /* Optional: remove underline */
        color: blue;           /* Optional: link color */
    }



.current { color: #000000; background: #fff; font: 1em Verdana, Arial, Helvetica, sans-serif; }
/*
.topnav { font: 16px Verdana, Arial, Helvetica, sans-serif; text-align: center; margin-right: auto; margin-left: auto; }

#topnav { font: 16px Verdana, Arial, Helvetica, sans-serif; text-align: center; margin-right: auto; margin-left: auto; }

#toplinks { color: #00f; text-align: center; width: auto; padding: .5rem;
margin-right: auto; margin-left: auto; background: #fff; border: thin solid #666; border-radius: 1rem; font: 18px Arial, Helvetica, sans-serif; }

#toplinks .middle { background: #FFFFF0; text-align: center; width: auto; margin-right: auto; margin-left: auto; }


#toplinks a:link { width: auto; color: #00f; height: auto; margin: 4px; padding: 4px; }

#toplinks a:visited { color: #909; padding: 4px;  margin: 4px; }

#toplinks a:hover { width: auto; color: #00f; height: auto; margin: 4px; padding: 4px; }

#toplinks a:active { color: #f00; text-decoration: none;  margin: 4px;  padding: 4px;	}

#toplinks a:focus { color: #f00; text-decoration: underline;  margin: 4px;  padding: 4px;	}
*/

header, img { text-align: center; vertical-align: middle; }
h1 { font-size: 32px; color: #000; text-align: center; margin-right: auto; margin-left: auto; }
header,h2 { font-size: 24px; color: #000; text-align: center; margin-right: auto; margin-left: auto; }

.white
{
	background: #fff;
	line-height: 1;
}

#maindiv { background: #fff; border: 2px solid #666; border-radius: 1.25em; box-shadow: .6em .6em .6em #6B8E23; overflow: auto; margin-right: auto; margin-left: auto; width: 1600px; padding: 1em; height: auto; text-align: center; }

.onecolumn { width: 60%; margin-right: auto; margin-left: auto; border: thin solid #333; background: #fff; }

main { font-family: "Verdana", Arial, Helvetica, sans-serif; color: #000; background: #fff; border: 2px solid #666; border-radius: 1.25em; box-shadow: .6em .6em .6em #6B8E23; overflow: auto; margin-right: auto; margin-left: auto; width: 60%; padding: 2em; height: auto; }

article { font: 1em Verdana, Arial, Helvetica, sans-serif; color: #000; background: #fff; text-align: left; width: 100%; margin-right: auto; margin-left: auto; }

.column { float: left; width: auto; display: grid; }

.elementcollapsed { display: none; margin: 0.5rem; width: auto; }

.elementnormal { background: #F8F8FF; margin: 1%; width: auto; border: thin solid #333; display: list-item; list-style: url(none) none; }

.help { cursor: default; font-weight: bold; text-decoration: none; }

.trigger { text-align: left; padding: .5rem;
 margin: .5rem;
background: #F7FDFD; color: #00f; border: 1px solid #009; font: 1.2rem "Verdana", Arial, Helvetica, sans-serif; }

h3.trigger a:link { color: #00f; height: auto; text-decoration: underline; }

h3.trigger a:visited { text-align: left; padding: 0px; margin: 0px; color: #909; text-decoration: none; }

h3.trigger a:hover { text-align: left; padding: 0px; margin: 0px; }

h3.trigger a:active { padding: 0px; margin: 0px; color: #006; text-decoration: none; }

h3.trigger a:focus { text-align: left; padding: 4px; margin: 0px; color: #00f; background:  #fff; text-decoration: underline; }

ul { text-align: left; width: auto; padding-right: 1em; padding-left: 1em; list-style: url(none) none; border-style: none; }

li { text-align: left; line-height: 2em; }

.middle { width: auto; margin-right: auto; margin-left: auto; text-align: center; }

h4 { font-weight: bold; text-align: center; }

.column h2 { padding: 16px; background: #fff; border: thin solid #009; font: 150% Georgia, "Times New Roman", Times, serif; color: #000; text-align: center; margin: 16px; }

.clearsboth
{
	clear: both;
}

#footer { clear: both; text-align: center; width: 30rem; padding: .625rem;
font: 16px "Times New Roman", Times, serif; color: #000; background: #fff; margin: 16px auto; border: thin solid #333; border-radius: 16px; }



#footer p { margin: 0; padding: .625rem;
}


@media (min-width: 320px) {
#logo {
width: 100%;
padding: 1em;
}

}

@media only screen and (max-width: 600px)  {
#logo {
width: 100%;
padding: 1em;
}

}
@media only screen and (min-width: 600px)   {
#logo {
width: 100%;
padding: 1em;
}

}

 
@media (min-width: 768px) {
#logo {
width: 90%;
margin-left: auto; margin-right:auto
}
}

@media (min-width: 1024px) {
#logo {
width: 800px;
margin-left: auto; margin-right:auto
}
}

@media (min-width: 1201px) {
#logo {
width: 800px;
margin-left: auto; margin-right:auto;
}
}

@media (min-width: 1599px) {
#logo {
width: 800px;
margin-left: auto; margin-right:auto;
}
}

@media (min-width: 1915px) {
#logo {
width: 800px;
margin-left: auto; margin-right:auto;
}
}

@media screen and (max-width: 678px) and (min-width: 240px) {
.onecolumn {
margin:5%;
width:auto;
}
}


@media screen and (max-width: 1098px) and (min-width: 678px) {
.onecolumn {
margin:10%;
width:auto;
}
}

@media screen and (max-width: 3200px) and (min-width: 1098px) {
.onecolumn {
width: 800px;
margin:auto;
}
}

@media screen and (max-width: 678px) and (min-width: 240px) {
#footer {
margin:5%;
width:auto;
}
}
 @media screen and (max-width: 678px) and (min-width: 240px) {
.column {
width: 100%;

}
}
 @media screen and (max-width: 1200px) and (min-width: 678px) {
.column {
width: 48%;

}
}
 @media screen and (max-width: 1600px) and (min-width: 1200px) {
 .column {
width: 30%;
margin-left:1%; margin-right: 1%;
}
}
 @media screen and (max-width: 3200px) and (min-width: 1600px) {
.column {
width: 33%;
margin-left:1%; margin-right: 1%;
}
}