/*
link dark blue= #24327a; 
link visited light blue= #339999;
hover:active blue= #7492aa; 
background dark blue= #64729a;
link red= #800000;
*/

li { margin:0; padding:0; border:0; line-height: normal; font-family: Arial, sans-serif; -webkit-text-size-adjust: none; }

ul { margin:0; padding:0; border:0; line-height: normal; font-family: Arial, sans-serif; -webkit-text-size-adjust: none; }

div { margin:0; padding:0; border:0; line-height: normal; font-family: Arial, sans-serif; -webkit-text-size-adjust: none; }

body { margin:0; padding:0; border:0; line-height: normal; font-family: Arial, sans-serif; -webkit-text-size-adjust: none; }

html { margin:0; padding:0; border:0; line-height: normal; font-family: Arial, sans-serif; -webkit-text-size-adjust: none; }
body { margin-top:1em;}

div.parent { text-align: center;}
div.container { width: 100%; margin: 0 auto 0 auto; overflow: hidden;}
a {
	text-decoration: none;
	color: #24327a;
	white-space:nowrap; 
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
}
a:hover {
	color: #64729a; /* darker blue fade */
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
a:visited {
	color: #339999;
}
.toolarge {
	max-width:100%;
	overflow:hidden;
}

/* HTML5 ITEMS */
/* <header> replaces <div class="header"> */
/* <nav> replaces <div class="nav"> */
/* <footer> is new */
/* <section class="leftcolumn"> replaces <div class="leftcolumn"> (or ="rightcolumn")*/
/* not used: <article> and <aside> */


/* TITLE FORMAT */
header {
	display: table;
	width: 100%;
	margin: 0 auto 0 auto;
	height: 6em;
}
div.title {
	display: table-cell;
	width: 50%;
	margin: 0 auto 0 auto;
	vertical-align: middle;
	padding: 0 0.9em 0 0.9em;
}  
div.titleleft {
	display: table-cell;
	width: 25%;
	vertical-align: middle;
	font-size: small;
	text-align: center;
}
div.titleright {
	display: table-cell;
	width: 25%;
	vertical-align: middle;
	font-size: small;
	text-align: center;
}
div.titleright>img {
	text-align: center;
	margin-left:auto;
	margin-right:auto; /*AArgh!*/
}
h1 {
	margin: 0.5em 0 0.5em 0;
	padding: 0 0 0.2em 0; 
	border:0; 
	line-height:1em;
	font-size: xx-large; 
	font-weight: bold; 
	margin: auto;
	text-shadow: 2px 2px 5px #aaa;
}


/* NAVIGATION BAR +FOOTER */
footer {
}

nav {
}

footer ul {
	list-style-type:none;
}

nav ul {
	list-style-type:none;
}
footer ul li {
	display: inline-block;
/*	width: 6em;   superseded by screen media query css below */ /* MAXIMUM 4 items on row mobile wide 6.7em*/
	text-indent: 0;
    text-align: center;
	vertical-align: top;
	line-height: 1.3em;
	white-space:normal; 
	min-height: 1.6em;
	border-radius:5px;		
	overflow: hidden;
	background-color:#f0f0f0;
 	background: -webkit-gradient(
          linear, left top, left bottom, from(rgba(270, 270, 270, 1)),
          to(rgba(240, 240, 240, 1))  );
	/* gecko based browsers 270,270,270=#16e16e16e, 240,240,240=#f0f0f0 */
	background: -moz-linear-gradient(top, #16e16e16e, #f0f0f0);
	border:1px;
	border-color:#000000;
}
nav ul li {
	display: inline-block;
/*	width: 6em;   superseded by screen media query css below */ /* MAXIMUM 4 items on row mobile wide 6.7em*/
	text-indent: 0;
    text-align: center;
	vertical-align: top;
	line-height: 1.3em;
	white-space:normal; 
	min-height: 1.6em;
	border-radius:5px;		
	overflow: hidden;
	background-color:#f0f0f0;
 	background: -webkit-gradient(
          linear, left top, left bottom, from(rgba(270, 270, 270, 1)),
          to(rgba(240, 240, 240, 1))  );
	/* gecko based browsers 270,270,270=#16e16e16e, 240,240,240=#f0f0f0 */
	background: -moz-linear-gradient(top, #16e16e16e, #f0f0f0);
	border:1px;
	border-color:#000000;
}
footer ul li a {
	display: block;
	margin: 0 0 0 1px;
	padding: 3px 10px;
	line-height: 1.3em;
	white-space: normal; 
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
}
nav ul li a {
	display: block;
	margin: 0 0 0 1px;
	padding: 3px 10px;
	line-height: 1.3em;
	white-space: normal; 
	-webkit-transition: all 0.1s ease-in;
	-moz-transition: all 0.1s ease-in;
	-o-transition: all 0.1s ease-in;
	-ms-transition: all 0.1s ease-in;
	transition: all 0.1s ease-in;
}
footer ul li a:hover {
	color:#fff;  
	background:#7492aa; /* darker blue */
	border-radius:5px;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
nav ul li a:hover {
	color:#fff;  
	background:#7492aa; /* darker blue */
	border-radius:5px;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;
}
nav ul li span.navigation-selected  {
	display: block;
	margin: 0 0 0 1px;	
	padding: 3px 10px;
	line-height: 1.3em;
	font-weight:normal; /* was bold */
	color:#7492aa; /* blue */
/*	text-shadow: 0px 0px 30px #aaa; */
	border-radius:5px;
}
div.clear {
	clear: both;
}


/* Drop down  */
footer li.drop:hover a.drop {
	background-color:#FFFFFF;
	color: #000000;
	font-weight:normal; /* was bold */

}
nav li.drop:hover a.drop {
	background-color:#FFFFFF;
	color: #000000;
	font-weight:normal; /* was bold */
		color:#fff;  /* EXTRA test */
	background:#7492aa; /* darker blue */
	border-radius:5px;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;  /* end EXTRA test */

}
a.drop:hover {
	background-color:#FFFFFF;
	color: #000000;
	font-weight:normal; /* was bold */
				color:#fff;  /* EXTRA test */
	background:#7492aa; /* darker blue */
	border-radius:5px;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;
	-o-transition: all 0.2s ease-in;
	-ms-transition: all 0.2s ease-in;
	transition: all 0.2s ease-in;  /* end EXTRA test */

}
footer ul li ul  {
	display:none;
}
nav ul li ul  {
	display:none;
}
footer ul li:hover ul{
	display: block;
	position:absolute;
}
nav ul li:hover ul{
	display: block;
	position:absolute;
}
footer ul li:hover ul li {
	display:block;
}



nav ul li:hover ul li {
	display:block;
}



/* GENERAL FORMATTING */
h2 {
	font-size:large;
	font-weight:bold;
	margin: 0.5em 0 0.5em 0;
	text-shadow: 2px 2px 5px #aaa;
}
.small {
	font-size: small;	
}
.xsmall {
	font-size: xx-small;	
}
.xx-large {
	font-size: xx-large;
}
.large {
	font-size: 1.3em;
}
.medium {
	font-size: medium;
}
.bold {
	font-weight:bold;
}
.italic {
	;font-style:oblique;
}
img {
	max-width: 100%;
}
p {
	margin:1em auto 1em auto;
	border:0;
	padding:0;
	text-align:left;
	text-indent:0;
}
.center {
	text-align:center;
	margin: auto auto auto auto;
}
.left {
	text-align:left;
}
.indent {
	margin-left: 2em;
}

.Li1 {
    margin:0 2em 0 3em;
    text-indent:-1em;
}
.Li2 {
    margin:0 5em 0 6em;
    text-indent:-2em;
}


/* ADAPTIVE LAYOUT + MEDIA QUERIES */

/* Default, Tablet landscape and normal screen 9 column 896px */
/* @media screen, all and (min-width: 952px) and (max-width: 1135px) { */	/* Default, Tablet landscape and normal screen 9 column 896px */
/*###NOTE:...screen, all and... is IE workaround. This sets up the default. */ 

div.container {
	max-width: 50.25em; /* 804px=50.25em*/
}
section.leftcolumn {
	width:27.2em; /* 436px=27.2em, 5 column */
	float:left;
}
section.rightcolumn {
	width: 21.5em; /* 344px=21.5em, 4 column */
	float:right;
}
.mobile { /* default: hidden, revealed on mobile */
	display:none;
}
.mobileWide { /* default: hidden, revealed on mobile and wide mobile */
	display:none;
}
.mobilewideonly { /* default: hidden, revealed on wide mobile only */
	display:none;
}
.tablet { /* default: visible tablet and above, hidden on mobile and wide mobile */
	display:block;
}
.tabletonly { /* default: visible tablet only */
	display:none;
}
.defaultscreen { /* default: hidden, revealed on default width and above */
	display:block;
}
.defaultscreenonly { /* default: hidden, revealed on default width only */
	display:block;
}
footer ul li {
	width: 12em; /* up to 3 links maximum. 4 links breaks onto new line in this default size */
	margin-left:2px;
	margin-right:2px;
}
nav ul li {
	width: 12em; /* up to 3 links maximum. 4 links breaks onto new line in this default size */
	margin-left:2px;
	margin-right:2px;
}
.widescreen {
	display:none;
}


/* } */

@media only screen and (max-width: 28.125em) {  /* 450px=28.125em, Mobile 3 column 252px */ /* 300px preferred = 48px extra */ /* @491 */
	div.titleleft {
		display:none;
	}
	div.titleright {
		display:none;
	}
	div.container {	
		max-width: 18.75em; /* 300px=18.75em */
	}
	section.leftcolumn {
		width:100%; /*272px;*/ /* 3 column */
		float:none;
	}
	section.rightcolumn {
		width:100%; /*272px;*/ /* 3 column */
		float:none;
	}
	.mobile {
		display:block;
	}
	.mobileWide {
		display:block;
	}
	.tabletonly { 
		display:none;
	}
	.tablet { 
		display:none;
	}
	.defaultscreenonly {
		display:none;
	}
	.defaultscreen {
		display:none;
	}
	footer ul li {
		display: block;
		margin-left:auto;
		margin-right:auto;
		width: 12em; 
		margin-bottom:2px;
	}
	nav ul li {
		display: block;
		margin-left:auto;
		margin-right:auto;
		width: 12em; 
		margin-bottom:2px;
	}
}

@media only screen and (min-width: 28.188em) and (max-width: 47.938em) { /* 451px=28.188 767px=47.938em, Wide Mobile 5 column 436px */ /* @492 */
	div.titleleft {
		display:none;
	}
	div.titleright {
		display:none;
	}
	div.container {
		max-width: 27.25em; /*436px=27.25em */
	}		
	section.leftcolumn {
		width:27.25em; /* 436px=27.25em, 5 column */
		float:none;
	}
	section.rightcolumn {
		width:27.25em; /* 436px=27.25em, 5 column */
		float:none;
	}
	.mobilewideonly {
		display:block;
	}
	.mobileWide {
		display:block;
	}
	.tabletonly { 
		display:none;
	}
	.tablet { 
		display:none;
	}
	.defaultscreenonly {
		display:none;
	}
	.defaultscreen {
		display:none;
	}
	footer ul li {
		display: block;
		margin-left:auto;
		margin-right:auto;
		width: 12em;
		margin-bottom:2px;
	}

	nav ul li {
		display: block;
		margin-left:auto;
		margin-right:auto;
		width: 12em;
		margin-bottom:2px;
	}

}

@media only screen and (min-width: 48em) and (max-width: 59.438em) {	/* 768px=48em 951px=59.438em,  Tablet 8 column 712px */  
	div.container {
		max-width: 44.5em; /* 712px=44.5em */
	}
	section.leftcolumn {
		width:21.5em; /* 344px=21.5em, 4 column */
		float:left;
	}
	section.rightcolumn {
		width:21.5em; /* 344px=21.5em, 4 column */
		float:right;
	}
	.tabletonly { 
		display:block;
	}
	.defaultscreenonly {
		display:none;
	}
	.defaultscreen {
		display:none;
	}
}

@media only screen and (min-width: 71em) {  /* 1136px=71em, Widescreen 12 column above 1080px */ 
	div.container {
		max-width:66em; /* 1056px=66em */
	}
	section.leftcolumn {
		width:32.25em; /* 516px=32.25em, 6 column */
		float:left;
	}
	section.rightcolumn {
		width:32.25em; /* 516px=32.25em, 6 column */
		float:right;
	}
	.tabletonly { 
		display:none;
	}
	.defaultscreenonly {
		display:none;
	}
	.widescreen {
		display:block;
	}
}

/* Page fade in */
.fadeoutin:target {
    animation: fadeoutin 2.2s; /* shorthand animation properties: webkit-animation-name webkit-animation-duration (... also more if needed) */
    -moz-animation: fadeoutin 2.2s; /* Firefox */
    -webkit-animation: fadeoutin 2.2s; /* Safari and Chrome */
    -o-animation: fadeoutin 2.2s; /* Opera */	
}
@keyframes fadeoutin {  
    0% { opacity: 1.0; }
    20% { opacity: 0.1;  }
    100% { opacity: 1.0;  }
}
@-moz-keyframes fadeoutin {  
    0% { opacity: 1.0; }
    20% { opacity: 0.1;  }
    100% { opacity: 1.0;  }
}
@-webkit-keyframes fadeoutin {  
    0% { opacity: 1.0; }
    20% { opacity: 0.1;  }
    100% { opacity: 1.0;  }
}
@-o-keyframes fadeoutin {  
    0% { opacity: 1.0; }
    20% { opacity: 0.1;  }
    100% { opacity: 1.0;  }
}