/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
/*@media screen and (max-width: 800px) {
    .leftcolumn, .rightcolumn {   
        width: 100%;
        padding: 0;
    }
}
*/
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
/*@media screen and (max-width: 400px) {
    .topnav a {
        float: none;
        width: 100%;
    }
}
*/

/*

includes all links that are present in any nav-btns element? 
.nav-btns a {

includes all links that are also in nav-btn class
a.nav-btn {



*/
















/***************************************************************************/
/* Webpage body */ 
body {
	/*background-color: beige;*/
	max-width: 800px;
}


/* Text and Fonts */
/*  standard paragraph  */ 
h1, h2, h3 {
	font-family: Arial, Helvetica, sans-serif	;
	padding: 1vw 1vw;
}
p {
	font-family: Arial, Helvetica, sans-serif	;
}
ul {
	font-family: Arial, Helvetica, sans-serif	;
}









/***************************************************************************/
/* Top floating nav area (nav logo and nave buttons and background) */
nav {

	position: fixed;
	background-color: lightgray;
	width: 100%;
	border-bottom: 2px solid black;
	max-width: 800px;
	/*max-height: 190px;*/

	left: 0px;
	right: 0px;
}


/* Nav Logo */
.nav-logo {

	/*style="min-width: 262px;min-height:83px;max-width:100%;height:10vw;width:auto;"*/
	/*min-width: 262px;*/
	min-height: 80px;
	max-height: 120px;
	height: 15vw;
	width: auto;
/*	padding: 1vw;*/
	
}
/*float:left; background-color:blue; padding-right: 5vw;"*/


/* Navigation Button Strip   */
.nav-btns {
	/*background-color:gray;*/
	float: left;
	/*padding: 1vw;*/
	/*max-height: 50px;*/
	padding: 1vw;
}


.nav-btns a {
   color: #f2f2f2;
   text-align: center;  
   padding: 1vw 1vw;
	/*max-height: 20px;*/
	/*margin-top: 5px; 
	margin-bottom: 5px;*/
	margin: 2px 2px;
   text-decoration: none;
   font-size: 150%;
 	border: 1px solid black;
   font-family: Arial, Helvetica, sans-serif	;
   /*min-height: 150%;*/
	display: inline-block;
	background-color: lightslategray;
}
.nav-btns a.active {
	background-color: #1f618d;
/*  background-color:  forestgreen;*/
  color: white;
}
.nav-btns a:hover {
  background-color:  lightgoldenrodyellow;
  color: black;
}









/***************************************************************************/
/* Start of each page */ 
header {
	clear: both;
	padding-top: 220px;
	/*margin-bottom: 220px;*/
	/*background-color: moccasin;*/
}

/***************************************************************************/
/* One or more per page, as main content */
section {
	clear: both;
	padding-top: 25px;
	padding-bottom: 25px;

}


/***************************************************************************/ 
/* bottom of every webpage */ 
footer {
	background-color: darkkhaki;
	padding: 25px;
	text-align: center;
	/*font-size: 2vw;*/	
	margin-top: 25px;
}



/* WebDev Links */
.hiddenlink {
	text-decoration: none;
	color: black;
}
.hiddenlink a {	
	text-decoration: none;
	color: black;
}
.hiddenlink a:active {
	text-decoration: none;
	color: black;
}
.hiddenlink a:hover {
	text-decoration: none;
	color: black;
}
.hiddenlink a:link {
	text-decoration: none;
	color: black;
}