BODY {
	margin: 0em;
	FONT-SIZE: 100%;
	FONT-FAMILY: "arial", "helvetica","tahoma", "verdana", "sans-serif";	
	BACKGROUND-COLOR: #E0E4E4;
}

div.extent {
  max-width: 900px;
  margin: auto;
}

TD.header { BACKGROUND-COLOR: #FFCC99; FONT-SIZE: 1.5em; COLOR: #800000}

.vtcenter {	vertical-align: middle; }

TD.tbody {	
	BACKGROUND-COLOR: #FFFFFF;
	PADDING-RIGHT: 0.5em;
	PADDING-LEFT: 0.5em;
	PADDING-BOTTOM: 2em;
	VERTICAL-ALIGN: top;
	COLOR: black;
	PADDING-TOP: 1em;
	FONT-SIZE: 1em;
	line-height: 1.4;
}

TD.footer {
	PADDING-RIGHT: 0.5em; PADDING-LEFT: 1em; PADDING-TOP: 1em;
	PADDING-BOTTOM: 2em; VERTICAL-ALIGN: top; 
	COLOR: black; BACKGROUND-COLOR: #FFCC99;
	FONT-SIZE: small; 
}

TD.nav {
	PADDING-RIGHT: 0.5em; PADDING-LEFT: 0.5em; PADDING-BOTTOM: 0.5em; 
	VERTICAL-ALIGN: top; PADDING-TOP: 0.5em; BACKGROUND-COLOR: #800000;
	FONT-SIZE: large;
}

.nav A {	FONT-SIZE: large; COLOR: #ecb034; TEXT-DECORATION: none;}
.nav A:hover {BACKGROUND:gray;}
.nav A:visited {COLOR: #ecb034;}

.header A { TEXT-DECORATION: none}

.heading-bkg { background-color: #FFCC99; FONT-SIZE: medium;}
	
H1 {FONT-SIZE: x-large; COLOR: #800000}
H2 {FONT-SIZE: large; COLOR: black}
H3 {FONT-SIZE: medium; COLOR: black}
H4 {FONT-SIZE: medium; COLOR: black}
LI  {FONT-SIZE: small; COLOR: black}

@media only screen and (max-device-width: 768px), only screen and (max-width: 768px) 
{
}
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
img { 
  max-width: 95%; /* Good browsers make a picture that is too large, which would blow the design, correspondingly smaller. Unfortunately does not work with IE. * /
}		
}