/* Alternative colors: green #306630; blue: #212166; background: #efefef; second green: #6d8a6d; lighthouse blue: #366da6 */

/* ---------- Main defaults ---------- */

body {
	background-color: #efefef;
	color: #212166;
	font: normal 13px Verdana, sans-serif;
}

/* ---------- Area for all content ---------- */

div.global {
	border-radius: 10px;
	background-color: white;
	margin: 10px auto;
	padding: 20px;
	border: 0;
	width: 90%;
}

/* ---------- Top layout ---------- */

#logindetails {
	padding: 5px 0;
	color: #366da6;
	margin-top: -20px;
}

div#searchSite {
	margin: 0;
	position: relative;
	float: right;
	top: 0;
}

#menucontainer, #submenucontainer, #bannercontainer, #footercontainer, #logindetails {
	width: auto;
}

/* ---------- Figure border ---------- */

figure {
	border: 1px #e8e8e8 solid;
}

/* ---------- Menu stuff ---------- */

#menucontainer {
	background-color: #212166;
}

#submenucontainer {
	background-color: #306630;
	margin: 0 auto;
}

#subMenuitems {
	margin-top: 10px;
}

#subMenuitems.private {
	margin-top: 0;
}

nav#submenucontainer.private {
	background-color: #999999;
}

.activeMenu, .inactiveMenu {
	font-size: 120%;
}

.inactiveMenu a, .inactiveMenu a:link, .inactiveMenu a:visited {
	color: white;
	background-color: #212166;
}

.activeMenu a, .activeMenu a:link, .activeMenu a:visited, .inactiveMenu a, .inactiveMenu a:hover {
	color: white;
	background-color: #306630;
}

#subMenuitems div.activeMenu a, #subMenuitems div.inactiveMenu a:hover {
	color: white;
	background-color: #6d8a6d;
	font-size: 80%;
}

#subMenuitems div.inactiveMenu a {
	color: white;
	background-color: #306630;
	font-size: 80%;
}

.activeMenu a.private, .activeMenu a.private:link, .activeMenu a.private:visited, .inactiveMenu a.private:hover {
	color: white;
	background-color: #999999;
}

.activeOptionsMenu, .inactiveOptionsMenu  {
	font-size: 100%;
}

.inactiveOptionsMenu a, .inactiveOptionsMenu a:link, .inactiveOptionsMenu a:visited {
	color: gray;
	border: 1px solid gray;
	background-color: white;
}

.activeOptionsMenu a, .activeOptionsMenu a:link, .activeOptionsMenu a:visited, .inactiveOptionsMenu a, .inactiveOptionsMenu a:hover {
	color: white;
	border: 1px solid gray;
	background-color: gray;
}

#subMenuitems div.activeMenu a.private, #subMenuitems div.inactiveMenu a.private:hover {
	background-color: gray;
	width: 70px;
	border-radius: 0;
}

#subMenuitems div.inactiveMenu a.private {
	background-color: #999999;
	width: 70px;
	border-radius: 0;
}

.activeMenu a, .inactiveMenu a {
	padding: 4px 10px;
}

#subMenuitems div a {
	border-top: 1px #8f8f8f solid;
}

#subMenuitems div:last-child a {
	border-bottom-left-radius: 10px;
}

#subMenuitems div a {
	width: 140px;
}

/* ---------- General links ---------- */

a {
	color: #306630;
	text-decoration: none;
}

a.private {
	font-style: italic;
}

a:hover {
	color: black;
}

/* ---------- Commonly used classes for layout ---------- */

.subtitle {
	color: #909090;
}

/* ---------- Defining common elements ---------- */

p {
	line-height: 150%;
}

span.banner {
	color: #366da6;
	line-height: 120%;
	clear: left;
	font-size: 55%;
}

.footerContent {
	border-top: 1px solid #212166;
	padding-top: 10px;
}

.footerContent p {
	font-size: 90%;
	font-weight: 600;
	line-height: 160%;
	padding: 0;
	margin: 0;
}

.footerContent p.platypus {
	font-size: 75%;
	float: right;
}

.footerContent p:last-child {
	font-weight: normal;
	line-height: normal;
	padding: 0;
	margin: 10px 0;
}

#footercontainer {
	width: 100%;
	margin-top: 10px;
}

#sectioncontainer {
	min-height: 450px;
}

.blockLeft {
	margin: auto;
}

i {
	color: #666666;
}

h1 {
	font-weight: normal;
	color: #212166;
	font-size: 200%;
}

h1.banner {
	margin-left: 0;
	margin-top: 20px;
}

h2 {
	font-weight: normal;
	color: #366da6;
	font-size: 140%;
}

h3 {
	font-weight: normal;
	color: #366da6;
	font-size: 120%;
}

#logo {
	margin-right: 25px;
}

img.right {
	margin: 0 0 10px 10px;
	float: right;
}

/* ---------- Main sidebar formatting ---------- */

#sidebar {
	border-left: 1px #e8e8e8 solid;
	line-height: 140%;
}

/* ---------- Classes used with divs for screen layout ---------- */

.form {
	border: 1px solid gray;
	background-color: #fffffa;
}

/* ---------- Highlight news and main newsitem module ---------- */

.newsDate {
	font-style: italic;
}

.newsTitle {
	font-weight: bold;
}

.newsContent {
	font-size: 90%;
}

.item {
	border-bottom: 1px #e8e8e8 solid;
}

.newsitems p {
	line-height: 150%;
}

/* ---------- Used at top of listings ---------- */

.headerRecord, .headerRecord a {
	font-weight: bold;
	color: gray;
}

/* ---------- Greeting page formatting ---------- */

.welcomeText, .welcomeText p {
	font-size: 110%;
	line-height: 150%;
}

.welcomeText {
	width: 80%;
    text-align: center;
    padding: 1% 5%;
    margin: 0 auto;
}

div.date {
	width: 60px;
	float: left;
}

div.date-pub {
	width: 150px;
	float: left;
}

div.description {
	margin-left: 60px;
	margin-bottom: 10px;
}

div.description-pub {
	margin-left: 150px;
	margin-bottom: 10px;
}

li {
	padding: 3px;
}

.poster {
	background-color: #ffffff;
	border: 0;
}

section.support textarea {
	height: 100px;
}

/* -------- Different devices -------- */

/* ---- Smartphones (portrait and landscape, min-width: 0px and max-width: 480px) ---- */

@media only screen and (min-width: 0px) and (max-width: 480px) {

	body {font-size: 11px; background-color: white;}
	#menucontainer, #submenucontainer, #bannercontainer, #footercontainer, section#logindetails {width: 96%;}
	div.global {padding: 0; border-radius: 0; width: 96%; margin: 0 auto;}
	img#logo {display: block; float: none; margin: 10px auto 0;}
	div#searchSite {display: none;}
	img.right {width: 40%;}
	img#logo {display: block; float: none; margin: 10px auto 0;}
	h1.banner {margin: 0 auto; text-align: center; width: 100%;}
	#logindetails {margin-top: 0;}
}

/* ---- Smartphones (portrait and landscape, min-width: 0px and max-width: 320px) ---- */

@media only screen and (min-width: 0px) and (max-width: 320px) {

}

/* -------- Larger smartphones/smaller tablets (portrait and landscape) -------- */

@media only screen and (min-width: 481px) and (max-width: 768px) {

	body {font-size: 12px; background-color: white;}
	#menucontainer, #submenucontainer, #bannercontainer, #footercontainer, section#logindetails {width: 98%;}
	#logindetails {margin-top: 0;}
	div.global {padding: 20px 10px; border-radius: 0; margin: 0 auto;}
	img.right {width: 30%;}
	img#logo {margin-right: 10px;}
	h1.banner {font-size: 260%; margin-top: 10px;}
	span.banner {font-size: 50%;}
}

/* -------- Smartphones (portrait and landscape) --------  */

@media only screen and (min-width: 481px) and (max-width: 530px) {

	div#searchSite {display: none;}
	img#logo {display: block; float: none; margin: 10px auto 0;}
	h1.banner {margin: 0 auto; text-align: center; width: 100%;}
}


/* -------- min-width: 769px and max-width: 960px -------- */

@media only screen and (min-width: 769px) and (max-width: 960px) {

	body {font-size: 12px;}
	#menucontainer, #submenucontainer, #bannercontainer, #footercontainer, section#logindetails {width: 100%;}
	img#logo {margin-right: 10px;}
	h1.banner {font-size: 280%;}
	span.banner {font-size: 50%;}
	div.global {padding: 15px 10px 20px; border-radius: 0; margin: 0 auto;}
}

/* -------- */