body   {
   background-color: #fcfcf0;
}

header {
	border-bottom: 2px solid grey;
	padding-bottom: 5px;
	height: 2.5em;
	vertical-align: top;
}

header div#runner {
	height: 100%;
	vertical-align: middle;
	/*padding-top: 1em;*/
	float: left;
}

header div#contact {
	height: 100%;
	float: right;
   vertical-align: middle;	
   margin-right: 10%;
   margin-top: -10px;
	}

header img {
	border: 2px solid grey;
	float: left;
}

header h3  {
	font-family: sans-serif;
	display: inline;
	margin-left: 2em;
	clear: left;
}

header div#contact p {
	height: 100%;
	vertical-align: middle; 
	font-size: small;
}

div.screen {
	width: 98vw; 
	height: 90vh;
	min-height: 500px;
	overflow: hidden;
	clear: left;
}

nav {
	width:    15%; 
 	min-width: 7em;
 	height:   100%;
 	padding-top: 10px;
 	overflow: auto;
   -webkit-overflow-scrolling:touch;  /* Safari? */
   float:	 left;
   font-size: 85%;
}

nav div{
	margin-left: 5px;
	margin-right: 2px;
	margin-top: 5px;
	padding-top: 2px;
	padding-left: 2px;
	padding-bottom: 2px;
	background-color: lightgrey;
	display: block;
}
nav div.group{ 
	background-color: #f0d060;
	color: navy;
   text-align: left;
	float: left;
	display: block;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-right: 2px;
	margin-left: 0px;
	padding: 0px;
	width: 100%;
}

nav h3, nav h4 {margin: 0px;}

nav ul { 
	list-style: none;
	list-style-position: outside;
	padding: 1px;
	margin-bottom: 1px;
	margin-top: 1px;
}

nav li {
    padding-right: 2px;
    padding-left: 0px;
    padding-bottom: 2px;    
    margin-top: 0px;
    margin-bottom: 0px;
    border-bottom: 1px solid white;
}

nav li:hover {
	background-color: lightblue;
	font-weight: bold;
}

nav a {
	color: navy;
	font-family: sans-serif;
	text-decoration: none;
}
nav a:hover, nav a:active  {
	background-color: lightblue; 
	color: navy;
	font-weight: bold;
}

section {
	   width: 80%;
	   min-width: 10px;
	   max-width: 95%;
		height: 100vh;
	   min-height: 10em;
      padding-left: 0.5em;
      float: left;
      overflow: auto;
      -webkit-overflow-scrolling:touch;  /* Safari? */
}

iframe  {   
      width: 100%;
      height: 100%;
  		border-color: grey;
  		border-right-style: none;
  		border-top-style: none;
  		border-bottom-style: none;
		border-left-style: solid;
		border-left-width: 2px;
		overflow-y: scroll;
		overflow-x: auto;
		display: block;
		-webkit-overflow-scrolling:touch;  /* Safari? */
}

/* Changes for narrow devices - eg smartphones */
@media (max-width: 500px) {
   header {height: 8vh;}	
	div.screen {
		height: 92vh;
      width:  97vw;		
		}
	
	nav {
		width: 97vw;
		max-height: 15%;
		margin-left 2px;
		overflow: auto;
      -webkit-overflow-scrolling: touch;  /* Safari? */
   }
	nav.banner {display: none;}
	nav h4 {padding: 1px; margin: 1px;}
	nav div {
   	display: block;
   	width: 95%;
      margin: 0px;
   	float: left;
      overflow: auto;
     -webkit-overflow-scrolling:touch;  /* Safari? */
   }
   nav li {
   	display: inline;
		margin-left: 1em;   	
  	}  	
  	
   section { 
   	width: 97vw;
   	height: 85%;
   	overflow: auto;
   	-webkit-overflow-scrolling: touch;  /* Safari? */
   }
   
   iframe {
      min-width: 97%; /* iPhone Safari doesn't do iframes well */
      width: 1px;
      *width: 100%;   /* for IE apparently? */   
   }
}