/* Basic styles for body, paragraphs and headings */
* {box-sizing:border-box;}
* {margin:0px;padding:0px;border:0px;}
html {overflow-y:scroll}

:root {
--sel-bg-color:#062141;
--sel-fg-color:#32D600;
--tpc-greenblue:#00418B;
--tpc-realblue:#0044BB;
--tpc-darkblue:#062141;
--tpc-lightgreen:#D2EEA5;
}

.skip-to-content-link {
  left: 0%;
  padding: 8px;
  position: absolute;
  transform: translateY(-100px);
  transition: transform 0.3s;
}

.skip-to-content-link:focus {
  transform: translateY(0%);font-size:1em;
		color:#32D600; 
		background-color:#05264D;
		border:3px solid #32D600;
}

.noshow {display:none;}

a	{	
		color:var(--tpc-realblue);
		border:0px solid white;
		font-size:1em;
}

a.ainline {	margin:0px;
}

a:hover, input:hover, button:hover {
		color:var(--tpc-darkblue);
		background-color:var(--tpc-lightgreen);
}			

a:focus, input:focus, button:focus {
		color:var(--tpc-darkblue);
		background-color:var(--tpc-lightgreen);
		border:0px solid var(--tpc-darkblue);
	outline:3px solid var(--tpc-darkblue);
}


form, input, button {font-size:1em;}

input, button {border: 3px solid lightgray;}
input {width:300px;}

body {		font-family:"Verdana";	
		position:relative;
		font-size: 100%;
		margin:0px;
		padding-top:10px;padding-bottom:50px;
		padding-left:8px;padding-right:8px;
}

p {		font-size:1em;
		padding:10px;padding-top:0px;
		margin:0px;
}

h1 {		display:inline;
		font-family:"Comic Sans MS";font-weight:bold;
		font-size:3em;
		color:#227200;
		text-align:left;
		line-height:100%;
		padding-left:0px;
}

.h1sub	{	font-family:"Comic Sans MS";font-weight:bold;
		font-size:1.5em;
		color:#227200;
		display:inline-block;
		text-align:left;
		padding-left:0px;
		line-height:100%;
}

h2 {		font-weight:bold;
		font-size:1.5em;
		color:black;
		padding-left:10px;
		margin-top:10px;margin-bottom:5px;
}

h3 {		font-weight:bold;
		font-size:1.25em;background-color:#e8e8e8;
		text-align:left;
		padding:10px;margin:0px;margin-bottom:10px;margin-top:10px;
}

h4 {		font-size:1.15em;
		text-align:left;
		padding:10px;margin-bottom:0px;
}

h5 {		font-weight:bold;
		font-size:1.25em;
		text-align:left;
		color:black;background-color:white;
		padding:10px;
}

hr {	width:100%;border-top:1px solid black;margin-top:15px;margin-bottom:15px;}

.inital	{
	font-style:italic;
}
.duo {		columns:2;
		column-gap:5%;
		column-width:47.5%;}

/* Styles for picture and main heading at top of page */

#picframe {	position:relative;
		width:100%;
		text-align:left;
}

#piccy1,#piccy2,#piccy3,#piccy4 {
		width:100%;
}

#who {		width:100%;
		margin-left:auto;margin-right:auto;
}


#nyflag {	float:right;
		padding-top:10px;
		width:100px;height:auto;
}

/* Main content block */
#content {	display:block;
		position:relative;top:0px;
		width:100%;
}

/* Deal with menu items */
.wholemenu {position:static;margin:0px;padding:0px;border:0px;margin-top:0px;
z-index:10;margin-bottom:15px;text-align:center;}

#menulink {	display:none;
		text-align:center;
		height:35px;
		color:white;background-color:black;
}

.topnav {	
		line-height:1.75;
		text-align:center;
		z-index:5;
		background-color:var(--tpc-greenblue);
	padding-top:5px;padding-bottom:10px;
}

.topnav li {	display:inline-block;color:white;
		border:0px solid white;text-align:center;
		padding-left:0px;padding-right:0px;
}


.topnav a {	color:white;
		border:0px solid var(--tpc-greenblue);
		font-size:1.2em;
  		text-decoration: underline;  
  		padding:0px 7px;
		margin:0px;
}

.topnav a:hover {
		color:var(--tpc-lightgreen);
  		background-color:var(--tpc-darkblue);
}
.topnav a:focus {
		color:var(--tpc-lightgreen); 
		background-color:var(--tpc-darkblue);
		outline:3px solid var(--tpc-lightgreen);
}

.topnav a.active {
  		background-color: green  ;
  		color: lightgrey;
}


/* Style the links inside the navigation bar */

.bottomnav {	
		text-align:center;
		list-style:none;
		z-index:5;
		line-height:1.75;
}
.bottomnav li {	display:inline-block;
		text-align:center;
		padding-left:5px;padding-right:5px;margin:0;
}

.bottomnav li a {	
		font-size:1.2em;
		text-decoration:underline;font-weight:normal;	
		margin-bottom:0px;
}


/* Style the links inside the navigation bar */

#menulink {font-size:1.2em;font-weight:bold;}

/* Change the color of links on hover */

/* Document list */
ul#doclist {	text-align:center;margin:0px;
		list-style:none;font-size:1em;width:100%;
}

ul#doclist li {	
		vertical-align:top;width:100%;
		margin:0px;
		padding-left:10px;padding-right:10px;
}

ul#doclist li ul {	
		list-style:none;font-size:1em;width:100%;margin:0px;
		}

ul#doclist li ul li {
		margin:0px;padding:0px;text-align:left;font-size:1em;width:100%;
}

ul#doclist li ul li.myear {margin-top:15px;font-size:1em;
		}

ul#doclist li ul li.mdate {padding:5px 10px;text-align:left;font-size:1em;
}

#doclist li ul li.mdate a {
	
		text-decoration:underline;font-weight:normal;font-size:1em;	
		}

#doclist li ul li.mdate:hover a {}

#doclist li ul li h3 {
		background-color:#e8e8e8;}


@media screen and (min-width:900px) {
		ul#doclist li {display:inline-block; width:50%;vertical-align:top;}	
}


ul.longline {	text-align:left;margin:0px;
		list-style:none;font-size:1em;width:100%;
}

ul.longline li {
		width:100%;
		margin:0px;
		padding-left:20px;padding-right:10px;padding-bottom:10px;padding-top:10px;
}


/* Link list */
.linklist {	
		text-align:left;
		list-style:none;
}


.linklist li {
		padding-left:10px;padding-bottom:10px;
}

.linklist li a {
		font-size:1em;
		text-decoration:underline;font-weight:normal;	
		}

@media screen and (min-width:900px) {
	.linklist { padding-left:30px;padding-right:30px;		columns:2;
		column-gap:5%;
		column-width:47.5%;}
}

/* Deal with drop-down menu items */
.sidenav {	display:block;position:absolute;top:80%;width:200px;z-index:10;
		overflow:auto;
		text-align:left;
		font-size:0px;
		list-style:none;background-color:lightgray;
		padding:0;margin:0px;

}
.sidenav ul {padding:0;margin:0px;}

.sidenav li {	display:block;width:100%;position:relative;
		background-color:green;
}


/* Style the links inside the navigation bar */
.sidenav a {	display:inline-block;width:100%;
		font-family:"Comic Sans MS";
 		color:white;background-color:green;
 		font-size: 15px;
  		text-decoration: none;  
  		padding: 7px 10px;
}

/* Change the color of links on hover */
.sidenav a:hover {
  		background-color: #ddd;
  		color: black;
}

/* Add a color to the active/current link */
.sidenav a.active {
  		background-color: green  ;
  		color: lightgrey;
}
.sidenav:hover #sidemenu {display:block;}
#sidemenu {display:none;}
.sidenav {display:none;}

/* Swap heading picture according to screen width */
#piccy2 {display:none}

/* Deal wth line break in menu for narrow screens */
#break {display:none}

@media screen and (max-width:750px) {
		h1 {font-size:2.5em;}
}

@media screen and (max-width:650px) {
		h1 {font-size:2.25em;}		
}

@media screen and (max-width:600px) {
#piccy1 {display:none;}
#piccy2 {display:block;}
#nyflag {	width:70px;height:auto;
}
#break {display:none}
}

/* Reduce heading font size for narrower screens */ 

@media screen and (max-width:600px) {
h1 {font-size:2em;}
.h1sub {font-size:1em;}
}

@media screen and (max-width:900px) {
.wholemenu {	width:100%;
}
#menulink {	display:block;width:100%;
}
.topnav {	display:none;width:100%;
}

.topnav li {	display:block;width:100%;
		border-bottom:1px solid white;
		text-align:left;
		padding:5px;
}
.topnav li br {display:none;}

}

/* No screen should be this narrow - for testing only */
@media screen and (max-width:319px) {
p.Terr {color:red;}
}