/* This main css file contains the default rules and is geared toward the small/phone view */

* { box-sizing: border-box;
}  /* This wildcard applies to all elements ensuring a box layout model */

body {
  font-size: 16px;
  font-family: Tahoma, arial, sans-serif;
  background-color: #4acd91;
  /* Declare the base font-family - from google font api or other */
}

header, nav, main, footer { /* the comma means apply the following CSS declarations to all of the listed elements */
  /* Declare the maximum width and other main element rules to limit the stretch on wide views */
    max-width: 960px;
}

header {
}
header h1 {
    margin-right: 10px;
    font-size: 1.8rem;
    font-family: Tahoma, arial, sans-serif;
    color: darkblue;
}
header img {
    margin-left: -8px;
    width: 40%;
    height: auto;
    float: left;
}
header .subheading {
    color: white;
    font-style: italic;
    font-size: .75rem;
}
@media screen and (max-width: 600px) {
    .togNav a{display: none;}
    .togNav a.icon {float: right; display: block;}
}

@media screen and (max-width: 600px) {
    .togNav.responsive{position: relative;}
    .togNav.responsive a.icon {position: absolute; right: 0; top: 0;}
    .togNav.responsive a {float: none; display: block; text-align: left;}
}
nav {
    font-family: Tahoma, arial, sans-serif;
    background-color: #FFB85C;
    padding: 2px 5px 2px 5px;
    clear: both;
    text-align: center;
}
nav button {
    position: absolute;
    top: 187px;
    right: 10px;
}
.togNav {
    overflow: hidden;
}
nav ul {
    padding: 0;
}
nav ul li {
    display: block;
}
nav ul li a {      
    text-decoration: none;
}
nav ul li.active a {}

nav ul li a:link {
    color: #fff;
}

nav ul li a:visited{
    color: #4f94c5;
}

nav ul li a:focus {
    color: #ff885c;
}

nav ul li a:hover {
    color: #ff885c;
}

nav ul li a:active {
    color: #4acd91; 
}

main {
    padding: 10px 10px 10px 10px;
}
main h2 {
    background-color: white;
    border: 1px solid white;
    padding: 5px 5px 5px 5px; 
    border-radius: 10px;
    text-align: center;
}
main figure { margin: 0 0 .2rem 2%; width:96%; }
main figure img { 
    width: 100%; 
    height: auto;
}

section {}

h3 {
    text-align: center;
}
.weatherSum, article {
    margin: 5px 5px 10px 5px;
    padding: 7px 7px 7px 7px;
    background-color: white;
    border: 1px solid white;
    border-radius: 10px;
    overflow: auto;
}
.weatherSum {
    text-align: right;
}

picture {
    padding-left: 20px;
    width: 45%;
    height: auto;
    float: left;
    margin-bottom:  20px;
    position: relative;
    top: -50px;
}

.current-weather {
    width: 100%;
    height: auto;
}

article h3 {
    clear: both;    
}


.forecast {
    display: none;
}
article p.town-article img {  /* This structure refers to img elements that are the posterity of paragraph elements within artcle elements */
  width: 97%; /* fill the page in the small/phone view */
  height: auto;
  margin: 10px;
  margin-right: 5px;
  overflow: auto;
}

footer {
    clear: both;
    padding: 10px 10px 10px 10px;
}
footer, address {
    font-family: Georgia, times, serif;
    background-color: #FFB85C;
}
footer aside {
        background-color: #FFB85C;
}
footer>p {
        background-color: #FFB85C;
} /* This structure refers to p elements that are direct children of the footer element */

/* Other Class Selectors */