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;
}
.topnav a:hover{
	background-color:#4cc4c4;
}

#thispage{
	color:black;
}

/*Main 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%;
}
/*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;
}