/* basic */
html {
	font-size:62.5%
}
body {
	margin: 0px;
	padding: 0px;
	border: 0; /* This removes the border around the viewport in old versions of IE */
	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.6rem;
	background: #fff;
	min-width: 700px;
}

h1, h2, h3, h4, h5, h6 {
	font-family: "trebuchet ms", Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
}

h1 { font-size: 3.2rem; }
h2 { font-size: 1.6rem; }
h3 { font-size: 1.5rem; }

a { font-weight: bold; }
a:hover { text-decoration: none;}

.disabled {
	pointer-events: none;
	cursor: default;
	opacity: 0.5;
}

dt {
	font-weight: bolder;
	margin: 10px auto;
}

.left {	float: left; }
.right { float: right; }
.full { clear: both;}
.center { text-align: center; } 

/* Img handling */
img.logo { 
	margin-left: 10px;
	margin-right: 10px;
}

img.left {
	margin-right: 20px;
	margin-bottom: 10px;
}

img.right {
	margin-left: 20px;
	margin-bottom: 5px;
}

/* Gallery handling */
div.gallery {
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 10px;
	float: left;
}	

div.figure {
	margin: 3px;
	border: 1px solid #024978;
	height: 150px;
	width: 150px;
	float: left;
	text-align: center;
	overflow: hidden;
}

div.figure p {
	text-align: center;
	font-weight: bolder;
	width: 100px;
}

/* header */
#header {
	clear: both;
	width: 100%;
	font-size: 0px;
}

#header .banner {
	padding-top: 10px;
	padding-bottom: 6px;
}

#header table.center {
	margin-left: 12%;
	margin-right: auto;
	text-align: left;
}

#header h1, #header h2 {
	font-family: Segoe UI,Tahoma,sans-serif;
	font-weight: normal;
	color: #ffffff;
	text-transform: none;
}

#header h1 {
	margin: 3px 0px 0px 0px;
	text-shadow: 2px 2px 4px #000000;
}

#header h1 + h2 {
	font-size: 1.9rem;
	margin-top: -4px;
	text-shadow: 1px 1px 3px #000000;
}

/* Main menu settings */
#menu {
	clear: both;
	display: inline-block;
	margin: 0;
	padding: 0;
	width: 100%;
	font-size: 1.6rem; /* Menu text size */
	font-weight: bold;
	z-index: 1000; /* This makes the dropdown menus appear above the page content below */
	position: relative;
	/*border-bottom: 1px solid #fff;*/
}

/* Top menu items */
#menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
	float: right;
	position: relative;
	right: 50%;
}

#menu ul li {
	margin: 0;
	padding: 0;
	float: left;
	position: relative;
	left: 50%;
}

#menu ul li a {
	display: block;
	padding: 0.5em 1em 0.5em;
	line-height: 1em;
	text-decoration: none;
	text-shadow: 1px 1px 1px black;
}

#menu ul li.active a {
	font-weight: bold;
	text-shadow: none;
}

#menu ul li a:hover {
	text-shadow: none;
}

#menu ul li:hover a,
#menu ul li.hover a { /* This line is required for IE 6 and below */
	text-shadow: none;
}

/* Submenu items */
#menu ul ul {
	display: none; /* Sub menus are hidden by default */
	position: absolute;
	top: 2em;
	left: 0;
	right: auto; /* resets the right:50% on the parent ul */
	width: 12em; /* width of the drop-down menus */
}

#menu ul ul li {
	left: auto;  /* resets the left:50% on the parent li */
	margin: 0;   /* Reset the 1px margin from the top menu */
	clear: left;
	width: 100%;
}

#menu ul ul li a,
#menu ul li.active li a,
#menu ul li:hover ul li a,
#menu ul li.hover ul li a { /* This line is required for IE 6 and below */
	font-size: 85%;
	font-weight: normal; /* resets the bold set for the top level menu items */
	line-height: 1.6em; /* overwrite line-height value from top menu */
	border-bottom: 1px solid #fff; /*4796C2; /* sub menu item horizontal lines */
}

#menu ul ul li a:hover,
#menu ul li.active ul li a:hover,
#menu ul li:hover ul li a:hover,
#menu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
}

/* Flip the last submenu so it stays within the page */
#menu ul ul.last {
	left: auto; /* reset left:0; value */
	right: 0;   /* Set right value instead */
}

/* Make the sub menus appear on hover */
#menu ul li:hover ul,
#menu ul li.hover ul { /* This line is required for IE 6 and below */
	display: block; /* Show the sub menus */
}

/* content */
#content {
	display: block;
	margin: 0px auto;
	padding: 14px 20px 14px 20px;
	font-size: 85%;
	overflow: hidden;
}

#content p, #content ul, #content ol, #content dl, #content table {
	line-height: 125%;
	margin-left: 20px;
	margin-right: 20px;
}

#content ul, #content ol, #content dl {
	padding-right: 20px;
	padding-left: 20px;
}

#content .block ul, #content .block ol, #content .block dl{ 
	padding-left: 0px; 
	padding-right: 0px; 
}

#content h1, #content h2, #content h3, #content h4, #content h5, #content h6 {
	padding-left: 20px;
	margin-top: 0.6em;
	margin-bottom: -0.5em;
	padding-top: 0px;
}

#content ul { 
	list-style: none; 
}

#content ul ul { 
	padding-left: 0px;
}

#content ul li {
	padding-left: 20px;
	background-repeat: no-repeat;
	background-position: 0 0.2em;
}

#content ul.unmarked > li {
	padding-left: 0px;
	padding-bottom: 0.5em;
	background: transparent;
}

#content ul.unmarked > li:last-child {
	padding-bottom: 0px;
}

#content ul.unmarked li img {
	vertical-align: middle;
}

#content div.left {
	width: 61%;
	margin-left: 0px;
	margin-top: 12px;
}

#content div.right {
	width: 32%;
	margin-right: 20px;
	margin-left: 20px;
	margin-top: 12px;
}

#content div.block {
	overflow: auto;
	padding-top: 0px;
	padding-bottom: 1px;
	margin-top: 0.6em;
	margin-bottom: 1em;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#content .block h2 {
	text-align: center;
	padding: 2px 0px;
	margin-top: 0px;
}

#content .block h2 a { 
	text-decoration: none;
}

/* common column settings */
.colright, .colmid, .colleft {
	float: left;
	width: 100%;			/* width of page */
	position: relative;
}

.col1, .col2, .col3 {
	float: left;
	position: relative;
	padding: 0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead only padding 
					            top and bottom is included here, make it whatever value you need */
	overflow: hidden;
}

/* 3 Column settings */
.container .colmid {
	right: 4%;			/* width of the right column */
}

.container .colleft {
	right: 92%;			/* width of the middle column */
}

.container .col1 {
	width: 90%;			/* width of center column content (column width minus padding on either side) */
	left: 101%;			/* 100% plus left padding of center column */
}

@media only screen and (min-width: 1000px) {
	.container .colmid { right: 12%; }
	.container .colleft {	right: 76%; }
	.container .col1 { width: 74%; }
	#header table.center { margin-left: 18%; }
}

@media only screen and (min-width: 1600px) {
	.container .colmid { right: 15%; }
	.container .colleft {	right: 70%; }
	.container .col1 { width: 68%; }
	#header table.center { margin-left: 24%; }
}

/* footer */
#footer {
	clear: both;
	padding-top: 1%;
	border-top: 1px #024978 dotted;
	font-size: 80%;
	float: left;
	width: 100%;
}

#footer a, #footer a:hover {
	text-decoration: underline;
	font-weight: normal;
}

/* Colors */

/* Red */
/*
h2, h3, h4, h5, h6, a, hr {color: #940505;}
a:hover {color: #CC6666;}
#container {border-color: #D45959;}
#header {background: #BB5151 url(Images/HeaderRed.png) repeat-x left top;}
#menu {background: #FAF9F5 url(Images/MenuRed.png) repeat-x left bottom;}
#menu > ul li {border-color: #D45959;}
#menu > ul li:hover.popup {background-color: #F9F0F0;}
#menu > ul li:hover ul.submenu {background-color: #F9F0F0;	border-color: #D45959;}
#content ul li {background-image: url(Images/BulletRed.png);}
#content .block {background-color: #F9F0F0;}
#content .block h2 {background: url(Images/MarkerRed.png) no-repeat left center;}
*/

/* Green */
/*
h2, h3, h4, h5, h6, a, hr {color: #02780D;}
a:hover {color: #68CC66;}
#container {border-color: #59D465;}
#header {background: #7CBB51 url(Images/HeaderGreen.png) repeat-x left top;}
#menu {background: #FAF9F5 url(Images/MenuGreen.png) repeat-x left bottom;}
#menu > ul li {border-color: #59D465;}
#menu > ul li:hover.popup {background-color: #F1F9F0;}
#menu > ul li:hover ul.submenu {background-color: #F1F9F0;	border-color: #59D465;}
#content ul li {background-image: url(Images/BulletGreen.png);}
#content .block {background-color: #F1F9F0;}
#content .block h2 {background: url(Images/MarkerGreen.png) no-repeat left center;}
*/

/* Blue - Centered Menu*/
h2, h3, h4, h5, h6, a, hr {
	color: #024978;
}
a:hover {
	color: #6699CC;
}
#header {
	background: #4796C2 url(Images/HeaderBlue.png) no-repeat;
	background-size: 100% 200px;
}
#menu {
	background: transparent;
}
#menu ul li a { /* Font color for main menu */
	color: #fff;
}
#menu ul li.active a { /* Background and font color for active main menu*/
	background: #fff;
	color: #024978;
}
#menu ul li a:hover { /* Font color on hover for main menu*/
	color: #024978;
}
#menu ul li:hover ul li a { /* Sub menu and font color */
	background: #B0C5D7;
	color: #024978;
} 
#menu ul li:hover a {
	background: #B0C5D7;
	color: #024978;
}
#menu ul li:hover ul li a:hover {
	background: #B0C5D7;
	color: #fff;
}
#content ul li {
	background-image: url(Images/BulletBlue.png);
}
#content .block {
	background-color: #F0F6F9;
}
#content .block h2 {
	background: linear-gradient(to right, rgba(112, 149, 182, 1), rgba(112, 149, 182, 0.25), rgba(255, 0, 0, 0));
}