html {-webkit-text-size-adjust: none;}
* { -moz-box-sizing: borderbox; -webkit-box-sizing: borderbox; margin: 0; padding: 0; box-sizing: border-box;}

/*Main Page*/
body{
	background-color:#6a6c70; 
	background-image:url("../img/rainbkg6.jpg");
	background-attachment:fixed;
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	font-family:Raleway, Helvetica, Arial, sans-serif;
}
#wrapper{/*holds all page content*/
	height:100vh;
}

/*Header*/
header{/*contains logo in all views; contains logo and tagline in medium and large views*/
	height:100px;
	background:rgba(0, 0, 0,.3);
}
.midlarge{/*tagline for medium and large views*/
	display:none;
}
#logo{
	width:75px;
	display:block;
	margin-left:auto;
	margin-right:auto;
	padding-top:15px;
}
.small{/*contains tagline for small views; under header*/
	display:table;
	background:rgba(255,255,255,.8);
	color:#6a6c70; 
	height:50px;
	width:100%;
	text-align:center;
}
.small h2{/*small view tagline*/
	display:table-cell;
	font-size:14px;
	font-weight:normal;
	vertical-align:middle;
}

/*Navbar*/
.topnav{
	display:flex;
	background-color:#00a8aa;
	list-style:none;
	overflow:hidden;
}
@media screen and (max-width: 600px) {/*deals with responsive hamburger menu situation thing in small views*/
.topnav a:not(:first-child){
	display:none;
	}
.topnav a.icon{
	flex-grow:1;
	display:block;
	text-align:right;
}
.topnav.responsive {
	position:relative;
	flex-direction: column;
}
.topnav.responsive a.icon {
	position:absolute;
	right:0;
	top:0;
}
.topnav.responsive a {
	display:flex;
	text-align:left;
}
}
.topnav a{
	display:inline-block;
	line-height:40px;
	padding-left:15px;
	padding-right:15px;
	flex-grow:9;
	text-decoration:none;
	color:white;
	font-size:15px;
}
#thispage{
	/*color:black;*/
	background-color:#008f91;
}
#thispage:hover{
	color:#a1e0e0;
}
.thispage{
	/*color:black;*/
	background-color:#008f91;
}
.thispage:hover{
	color:#a1e0e0;
}
.topnav a:hover{
	background-color:#4cc4c4;
}



/*Weather Page Body*/
#main{
	background:rgba(255,255,255,.8);
	padding-bottom:50px;
}
#imglg{/*this and imgsm are just placeholder images and will be either removed or replaced at some point*/
	display:none;
}
#imgsm{
	display:block;
	width:100%;
	margin-bottom:10px;
}
h1{/*This is the main content headline*/
	text-align:center;
	margin-top:0;
}
#gallerytitle{
	padding-top:30px;
}
#franklinimg{/*This is the main Franklin image*/
	display:block;
	margin-top:30px;
	margin-bottom:30px;
	margin-left:auto;
	margin-right:auto;
	width:200px;
	border:3px solid #6a6c70;
}
#snapshot{/*This is the weather info for medium and large views*/
	display:none;
}
#tenday{/*This is the ten day forecast*/
	display:none;
}
.high{
	font-size:50px;
	font-weight:bold;
	color:#f25e57;
}
#snapsmall{/*This is the weather info for small views*/
	border:3px solid #6a6c70;
	background:rgba(0, 0, 0,.2);
	width:200px;
	margin-left:auto;
	margin-right:auto;
}
#snapsmall table{
	padding-top:20px;
	padding-bottom:10px;
	text-align:center;
	width:100%;
}
#snapsmall td{
	padding-bottom:10px;
}

/*Weather Gallery*/
#gallery{
	width:80%;
	display:grid;
	grid-template-columns: repeat(1,100%);
	margin-left:auto;
	margin-right:auto;
}
.galleryitem{
	padding:5px;
	background:rgba(0,0,0,.2);
	margin-bottom:20px;
	font-size:.8em;
	text-align:center;
}
.galleryimage{
	width:100%;
}

/*Home Page*/
.story{
	padding:5px 20px 20px 20px;
	background:rgba(0, 143, 145,.3);
	margin-top:-5px;
}
.story h2{
	margin-bottom:15px;
	color:#dd453e;
	text-align:center;
}
.story p{
	font-size:.85em;
}
#mdlrghelper{
	display:none;
}
#smallstoryimage{
	width:100%;
}
#smallstorycap{
	font-size:.75em;
	text-align:center;
	margin-bottom:25px;
}
.storyimg{
	display:none;
}
#citysnapshot{
	display:flex;
	flex-direction:column;
}
.citysnap{
	padding:25px;
	background:rgba(0,0,0,.2);
	text-align:center;
}
.citysnapimg{
	border: 3px solid #6a6c70;
	width:80%;
	max-width:300px;
}

/*Footer*/
footer{
	height:100px;
	background:rgba(0, 0, 0,.3);
	color:white;
	text-align:center;
	padding-top:20px;
	font-size:1.25em;
}
.footertext{
	font-size:.8em;
}
.footertext a{
	color:white;
	text-decoration:none;
}
.footertext a:hover{
	color:#a1e0e0;
}

/*Form*/
#reqnotice{
	text-align:center;
	margin-bottom:20px;
	margin-top:-20px;
}
#notice{
	font-size:.9em;
}
.req{
	font-size:1.2em;
	color: #dd453e;
}
.question{
	font-weight:600;
}
form{
	background:rgba(0, 143, 145,.3);
	width:88%;
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
	padding:7px 15px 15px 7px;
}
form div{
	margin-bottom:20px;
}
form h2{
	text-align:center;
	margin-bottom:20px;
	font-size:1.3em;
}
textarea{
	width:100%;
	height:75px;
}
form input.submitButton{
	display:block;
	margin-left:auto;
	margin-right:0px;
	text-align:center;
	padding:10px;
	background-color:#fc6b64;
	border: 3px solid #dd453e;
	border-radius:10px;
}
form input.submitButton:hover{
	background-color: #e7fc6d;
	border: 3px solid #fc6b64;;
}

/*Response*/
#formResponse{
	background:rgba(0, 143, 145,.3);
	width:88%;
	max-width:600px;
	margin-left:auto;
	margin-right:auto;
	padding:7px 15px 15px 7px;
}
#received{
	padding-top:30px;
	font-size:1.35em;
}