/* Alternative colors: purple #993399; green: #339955; */

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

body {
	background-color: white;
	color: #030505;
	font: normal 14px Verdana, sans-serif;
}

div.global {
	width: 100%;
}

#sectioncontainer, #submenucontainer, #bannercontainer {
	margin: 0 auto;
	width: 1170px;
}

#menucontainer, #footercontainer {
	border-radius: 0;
	width: auto;
}

.footerContent {
    border-top: 1px solid #339955;
}

img#logo {
	border-radius: 10px;
}

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

figure {
	border: 1px #e8e8e8 solid;
}

#logindetails {
	width: 1170px;
	margin: 0 auto;
	padding: 5px 0;
}

div#searchSite {
	margin-left: 925px;
}

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

#menucontainer {
	background-color: #339955;
}

#submenucontainer {
	background-color: #993399;
}

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

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

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

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

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

#subMenuitems div.inactiveMenu a {
	color: white;
	background-color: #993399;
	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;
}

#subMenuitems div.inactiveMenu a.private {
	background-color: #999999;
}

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

a {
	color: #993399;
	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: 140%;
}

i {
	color: gray;
}

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

h1.banner {
	margin-top: 45px;
}

h2 {
	font-weight: bolder;
	color: #993399;
	font-size: 130%;
}

h3 {
	font-weight: bolder;
	color: #993399;
	font-size: 110%;
}

/* ---------- 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;
}

.generic1 div.form div.firstLineItem {
	width: 45%;
	text-align: right;
}

.generic1 div.form div.lineItem {
	width: 45%;
}

.generic2 div.form div.firstLineItem {
	width: 50%;
	text-align: right;
}

.generic2 div.form div.lineItem {
	width: 30%;
}

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

.newsDate {
	font-style: italic;
}

.newsTitle {
	font-weight: heavy;
}

.mainNews {
    max-width: 80%;
}    

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

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

.easter-times {
	width: 70%;
	border: 1px solid gray;
	overflow: hidden;
}

.easter-times p {
	text-align: center;
	width: 90%;
	margin: 5px auto;
	font-weight: bold;
}

.first-column, .second-column {
 	float: left;
	border-bottom: 1px solid #dfdfdf;
    width: 41%;
	margin: 5px 0;
	height: 38px;
}

.first-column {
    padding: 6px 6px 3px 3px;
	margin-left: 5px;
    text-align: right;

}

.second-column {
    overflow: hidden;
    padding: 6px 6px 3px 6px;
}

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

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

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

.welcomeText, .welcomeText p {
	font-size: 100%;
	line-height: 140%;
}

/* ---------- Social network icons ---------- */

#twitterLink, #rssLink, #facebookLink, #linkedinLink {
	top: 110px;
}

/* -------- 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;}
	#sectioncontainer, #menucontainer, #submenucontainer, #logindetails, #bannercontainer, #footercontainer {width: 98%;}
	img#logo {display: block; margin: 10px auto; float: initial;}
	h1.banner {font-size: 200%; width: 98%; margin: 0 auto; text-align: center;}
	div#searchSite {display: none;}
	#twitterLink, #rssLink, #facebookLink, #linkedinLink {top: 0;}
	.first-column, .second-column {width: 38%; height: 60px;}
	.newsitems figure {display: none;}
	section.newsitems1 .blockCenter {margin: 5px auto;}
}

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

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

	#sectioncontainer, #menucontainer, #submenucontainer, #logindetails, #bannercontainer, #footercontainer {width: 96%;}
	div#global {padding: 0;}
	img#logo {text-align: center;}
	#twitterLink, #rssLink, #facebookLink, #linkedinLink {display: none;}
	.first-column, .second-column {height: 80px;}

}

/* -------- 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;}
	#sectioncontainer, #menucontainer, #submenucontainer, section#logindetails, #bannercontainer, #footercontainer {width: 98%;}
	img#logo {margin-right: 10px;}
	h1.banner {font-size: 210%; width: 98%; margin: 0 auto; text-align: center;}
	div#searchSite {margin-left: 225px; width: 235px; top: 0;}
}

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

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

	body {font-size: 12px;}
	#sectioncontainer, #menucontainer, #submenucontainer, #bannercontainer, section#logindetails, #footercontainer {margin: 0 auto; width: 769px;}
	div#global {width: 100%; margin: 10px auto;}
	h1.banner {margin-top: 10px; font-size: 240%;}
	div#searchSite {margin-left: 520px;}
}

/* -------  Larger monitors from 961px - 1190px ----------- */

@media only screen and (min-width: 961px) and (max-width: 1190px) {

	#sectioncontainer, #menucontainer, #submenucontainer, #bannercontainer, #logindetails, #footercontainer {margin: 0 auto; width: 960px;}
	#menucontainer {width: 100%;}
	h1.banner {margin-top: 10px; font-size: 275%;}
	div#searchSite {margin-left: 714px;}
}

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