/*
weather_styles_17.css
*/

/*
colorhunt.co
colors... light to dark...

#F0EBE3
#E4DCCF
#7D9D9C
#576F72

#EEEEEE
#DDDDDD
#B7B78A
#658864



 */

/* do an element clear... */
header, section, footer, aside, nav, article,
figure, figcaption, hgroup {
    display: block;
    margin: 0;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


/**************** GRID STRUCTURE *****************/
body {

    background-color:#576F72;
   /* background-color:#658864; */
    margin: 20px auto;
    padding-top: 40px;
    width: 986px;

}
.sidebar {
    background-color: #7D9D9C;
    grid-area: sidebar;
}

.content {

   /* background-color: #F0EBE3; */

    background-color:#F0EBE3;
    grid-area: content;
    position: relative;
}

.header {
    background-color: #F0EBE3;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    grid-area: header;
}

.nav {
    grid-area: nav;
    width: 986px;
}

.grid-container {
    background-color: #F0EBE3;
    border-radius:40px 40px 40px 40px;

    display: grid;
    grid-template-areas:
            "header  header"
            "nav nav"
            "content sidebar"
            "footer  footer";

    grid-template-columns: 794px 192px;
}


.footer {
    background-color:#DDDDDD;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    grid-area: footer;
    padding-bottom: 18px;
    padding-top: 18px;
    text-align: center;
}

#main{
    background-color:#F0EBE3;
}


/***************** END GRID STRUCTURE *******************/

.mast-head-content{
    background-image: url(../CooperPond2.jpeg);
    background-size: 986px 180px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    height: 180px;
    text-align: center;
}




.mast-head-content h1{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 28px;
    padding-top: 20px;
}

#my-time{
    font-family: Arial, Helvetica, sans-serif;
}

.figure{
    background-color: white;
    border: solid 1px lightgray;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    padding: 8px;
    text-align: center;
}

/***********************************************************************
The following are used in the photo gallery at the bottom of the sidebar
************************************************************************/

#weather-photos-box{
    background-color: white;
}

#weather-photos-box h1{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding-bottom: 8px;
    padding-top: 8px;
    text-align: center;
}

#weather-photos-box h2{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    padding-top: 4px;
    text-align: center;
}

/* following 2 are used in photo gallery */
.classImageHover img{
    border: 1px solid grey;
    margin-bottom: 2px;
    outline:  2px solid grey;
}

.classImageHover:hover img{
    outline: 3px solid black;
}

/*********************************************/
/*********************************************/

#forecast-section{
    background-color: #F0EBE3;
    padding:6px 12px 6px 12px;
}

/*********************************/
#alert-section{
    background-color: #ff8080;
    border: 2px solid red;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin: auto;
    padding: 4px;
    width: 100%;

}


#alert-section h1{
    font-family: Arial, Helvetica, sans-serif;
    font-size:18px;
    padding-bottom:4px;
    text-align:center;
}

#alert-section h2{
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    padding-bottom: 4px;
    text-align: center;
}

#alert-section h3{
    font-family:Arial, Helvetica, sans-serif;
    font-size: 12px;
    padding-left: 10px;
    text-align: left;
}

/*********************************/
/* Metro conditions map
/*********************************/
#madis-map-section{
    background-color: #ffffff;
    color: #021a40;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    margin-top: 6px;
    padding-bottom: 6px;
    text-align: center;
    width: 100%;
}

#madis-map-section h2{
    font-size:16px;
    text-align:center;
    margin:3px;
}

#madis-map-section h1{
    font-size: 18px;
    margin: 3px;
    text-align: center;
}

.madis-temp-map{
    border: none;
    height:500px;
    width: 100%;
}


#madis-button{
    background-color: aliceblue;
    border: solid 1px black;
    margin: 2px;
    padding:2px;
}

#madis-map-section iframe{
    border:none;
    width: 100%;
    height: 500px;
}


/*******************************/
.logo-box{
    background-color: #FFFFFF;
    margin: auto;
    padding-left: 10px;
    padding-right: 10px;
}

.logo-box p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin-top: 10px;
    margin-bottom: 0;
    padding-bottom: 0;
    padding-top: 10px;
    text-align: left;
}

.logo-box h1{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    padding-top: 8px;
    text-align: center;
}


/**********************/
.figure-float-left{
    border: solid 1px lightgrey;
    float: left;
    margin: 0 20px 0 10px;
    padding-left: 6px;
    padding-right: 6px;
    padding-top: 4px;
}

.figure-float-left figcaption{
    text-align: center;
}


#daily-weather-map-section{
    background-color: #ffffff;
    padding-top: 8px;
    text-align: center;
    width:100%;
}

#daily-weather-map-section h1 {
    color: black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    margin-bottom: 10px;
    text-align: center;
}


/*************************************************/
.basic-section-style{
    color: black;
    background-color: #ffffff;
    border: 1px solid lightgray;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin: 8px;
    padding: 4px 8px 4px 8px;
}

.basic-section-style h1{
    border: none;
    font-size:18px;
    margin-bottom: 1px;
    margin-top: 1px;
    padding-bottom:1px;
    padding-top:8px;
    text-align:center;
}

.basic-section-style h2{
    border: none;
    font-size:16px;
    margin-bottom: 1px;
    margin-top: 1px;
    padding-bottom:1px;
    padding-top:1px;
    text-align:center;
}

.basic-section-style p{
    margin-bottom: 8px;
    margin-top: 8px;
    text-align: left;
    padding-left: 10px;
    padding-right: 10px;
}

.basic-section-style.iframe{
    display: block;
    margin: auto;
}


.basic-form{
    text-align: center;
}


#three-month-graph-box
{
    margin-bottom: 4%;
    margin-top: 4%;
    text-align: center;
}

#audio-button{
    background: #254441;
    border: none;
    color: #f6f7f8;
    cursor: pointer;
    font-family: Verdana, Geneva, sans-serif;
    font-size:16px;
    margin: 4px;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    width: 96%;
}

#audio-button:hover
{
    background: #4C9900;
    color:#fff;
    text-decoration: none;
}

.button{
    background: #ffffff;
    border: none;
    font-size: 14px;
    padding: 4px;

}
.center-text{
    text-align: center;
}

#vFrame iframe{
    height: 400px;
    width: 100%;
}

#video-box{
    margin: auto;
    width: 90%;
}


.radar-box1{
    margin: auto;
    width: 500px;
}

.radar-box1 iframe{
    height: 620px;
    width: 500px;
}

.radar-box2{
    margin: auto;
    width: 620px;
}

.radar-box2 iframe{
    height: 450px;
    width: 620px;
}

.radar-box3{
    margin: auto;
    width: 620px;
}

.radar-box3 iframe{
    height: 450px;
    width: 620px;
}

/***********************************/



#nyc-web-cam-section{
    background-color: white;
    border: solid 1px lightgrey;
    margin: auto;
    padding-bottom: 20px;
    padding-top: 10px;
    width: 700px;
}

#nyc-web-cam-section p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 26px;
}

#nyc-web-cam-section iframe{
    display: block;
    margin: auto;
}

#nyc-web-cam-section h1{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    text-align: center;
}

#nyc-web-cam-section h2{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin-bottom: 12px;
    text-align: center;
}

#nyc-web-cam-section p{
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin-bottom: 10px;
    margin-left: 10px;
    margin-right: 10px;
    text-align:center;
}


#mt-washington-section iframe{
    border: 2px solid lightgray;
    height: 600px;
    margin-top: 20px;
    padding-top: 20px;
    width: 100%;
}


/******************************************/
img.UNIV_WYOMING {
    border: solid 1px black;
    float: left;
    height:60px;
    margin-right: 10px;
    padding: 4px;
    width:80px;
}

img.MT_WASHINGTON {
    background-color: white;
    border: solid 1px black;
    float: left;
    height: 60px;
    margin-right: 10px;
    padding: 4px;
    width: 180px;
}