/* GLOBAL STYLES BEGIN HERE */

* {
box-sizing: border-box;
font-family: arial, helvetica, sans-serif;
font-size: 1em;
}

a {
color: rgb(0,110,210);
font-weight: bold;
text-decoration: none; 
}

a:hover {
color: rgb(0,155,255);
}

img {
height: auto;
}

.left-img {
float: left;
height: auto;
max-width: 320px;
width: 100%;
}

h1 {
background: none;
background-color: rgb(0,40,80);
border-bottom: 5px solid rgb(0,120,220);
border-radius: 5px 5px 0 0;
color: rgb(255,255,255);
font-family: arial black;
letter-spacing: 1px;
margin: 2px;
padding: 4px 0 5px 10px;
text-transform: uppercase;
}

h2 {
color: rgb(0,40,80);
font-family: arial black;
margin: 0px;
padding: 10px 10px 0 10px;
text-transform: uppercase;
}

h3 {
color: rgb(0,40,80);
font-family: arial black;
margin: 0px;
padding: 10px 10px 0 10px;
text-align: center;
text-transform: uppercase;
}

ul {
margin: 10px 10px 0 0;
text-align: justify;
}

li {
margin: 0 0 10px 0;
}

article {
background-color: rgb(255,255,255);
box-shadow: 0 0 10px rgb(128,128,128);
border-radius: 5px;
float: left;
margin: 0 0 20px 0;
padding: 0 0 10px 0;
max-width: 660px;
width: 100%;
}

.banner img {
max-width: 100%;
}

article img {
padding: 10px 10px 1px 10px;
max-width: 100%;
}

article p {
color: rgb(0,20,40);
letter-spacing: 0.25px;
margin: 0;
padding: 10px 10px 0 10px;
text-align: justify;
}

/* styles for the repeater listings begin here */

.repeater {
margin: 0 0 -15px 0;
padding: 10px;
vertical-align: top; 
text-align: center; 
width: 100%;
}

.repeater tr:nth-child(odd) {
background-color: rgb(235,235,235);
}

.repeater td {
padding: 5px;
}

/* styles for the repeater listings end here */

/* various form and button styles begin here */

.form {
padding: 5px 10px 0px 10px;
width: 100%;
}

.select {
color: rgb(0,25,50); 
font-family: arial, verdana; 
font-weight: bold;
padding: 7px 0px 6px 5px;
width: 100%;
}

.select {
margin: 0px 0px 10px 0px;
max-width: 100%;
}

.go {
color: rgb(0,25,50);
cursor: pointer; 
font-family: arial, verdana; 
font-size: 1em;
font-weight: bold; 
letter-spacing: 0.5px;
padding: 3px 0 4px 0;
text-transform: uppercase;
width: 49%;
}

.reset {
color: rgb(0,25,50); 
cursor: pointer;
float: right;
font-family: arial, verdana; 
font-size: 1em;
font-weight: bold; 
letter-spacing: 0.5px; 
padding: 3px 0 4px 0;
text-transform: uppercase;
width: 49%;
}

.alt-reset {
color: rgb(0,25,50); 
cursor: pointer;
font-family: arial, verdana; 
font-size: 1em;
font-weight: bold; 
letter-spacing: 0.5px; 
margin: 0px 0px 0px 0px;
padding: 3px 0 4px 0;
text-transform: uppercase;
width: 100%;
}

.conversions {
padding: 7px 0px 6px 5px; 
width: 100%;
}

.button {
background-color: rgb(0,110,210);
border: 1px solid rgb(0,40,80);
border-radius: 3px;
color: rgb(255,255,255); 
cursor: pointer;
font-family: arial, verdana; 
font-size: 1em;
font-weight: bold;
letter-spacing: 0.5px; 
margin: 0; 
max-width: 100%;
padding: 7px 9px 5px 9px;
text-align: left;
text-transform: uppercase;
width: 100%;
}

.button:hover {
background-color: rgb(0,90,190);
}

.button span {
float: right;
}

/* various form and button styles end here */

/* windy.com styles begin here */

.windy-wx {
overflow: hidden; 
padding-top: 56.25%;
position: relative; 
width: 100%;
}

.windy-iframe {
bottom: 0;
height: 100%; 
left: 0; 
padding: 10px 10px 0px 10px;
position: absolute; 
right: 0; 
top: 0; 
width: 100%; 
} 

/* windy.com styles end here */

/* GLOBAL STYLES END HERE */

html {
background-attachment: fixed;
background-image: url("../img-bin/html-body.png");
min-height: 100vh;
margin: 0px;
}

body {
background-color: rgb(235,235,235);
box-shadow: 25px 0px 20px -20px rgba(0,0,0,0.45),
-25px 0px 20px -20px rgba(0,0,0,0.45);
min-height: 100vh;
padding: 20px;
margin: auto;
max-width: 1060px;
}

header {
border-radius: 5px;
box-shadow: 0 0 10px rgb(128,128,128);
margin: 0px 0px 20px 0px;
width: 100%;
}

.banner {
background: linear-gradient(90deg, rgb(0,110,210), rgb(0,40,80));
border-radius: 5px 5px 0 0;
max-height: 125px;
text-align: center;
width: 100%;
}

.location {
background-color: rgb(0,40,80);
border-radius: 0 0 5px 5px;
color: rgb(235,235,235);
font-family: arial black;
letter-spacing: 4px;
padding: 4px 0 5px 0;
text-align: center;
text-transform: uppercase;
width: 100%;
}

section {
min-height: 100vh;
width: 100%;
}

main {
float: left;
max-width: 64%;
}

aside {
float: right;
max-width: 340px;
max-width: 34%;
}

footer {
border-radius: 5px;
box-shadow: 0 0 10px rgb(128,128,128);
clear: both;
margin: 0px 0px 0px 0;
width: 100%;
}

.footer-a {
color: rgb(255,255,255);
background-color: rgb(0,110,210);
border-radius: 5px 5px 0 0;
letter-spacing: 2px;
margin: 0;
padding: 13px 0 11px 0;
text-align: center;
text-transform: uppercase;
width: 100%;
}

.footer-a a {
color: rgb(255,255,255);
font-weight: bold;
letter-spacing: 0.5px;
text-decoration: none;
}

.footer-b {
color: rgb(255,255,255);
background-color: rgb(0,40,80);
border-radius: 0 0 5px 5px;
font-size: 0.85em;
letter-spacing: 2px;
margin: 0;
padding: 8px 0px 7px 0px;
text-align: center;
text-transform: uppercase;
width: 100%;
}

@media only screen and (max-width: 640px) {

* {
font-size: 0.98em;
}

.left-img {
float: none;
height: auto;
max-width: 640px;
width: 100%;
}

article {
box-shadow: 0 0 5px rgb(128,128,128);
margin: 0px 0px 10px 0px;
}

body {
max-width: 640px;
padding: 10px;
}

header {
box-shadow: 0 0 5px rgb(128,128,128);
margin: 0px 0px 10px 0px;
}

.location {
font-size: 0.85em;
letter-spacing: normal;
}

section {
margin: 0 auto;
max-width: 100%;
}

main {
float: none;
margin: 0px;
max-width: 640px;
}

aside {
float: none;
max-width: 640px;
}

footer {
box-shadow: 0 0 5px rgb(128,128,128);
}

.footer-a {
letter-spacing: normal;
}

.footer-a a {
letter-spacing: normal;
}

.footer-b {
letter-spacing: normal;
}

}