/* Alternative colors: main blue: 00acee/00adef; green: 12a89d; purple 7f3e98; red: bf1e2e; mustard: fcb040; */


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

body {
	background-color: #00adef;
	color: #030505;
	font: normal 13px "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Arial, sans-serif;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

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

#logindetails {
	padding: 5px 0;
	color: #999999;
}

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

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

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

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

figure {
	border: 1px #e8e8e8 solid;
}

/* -------- Social media icons -------- */

#twitterLink, #linkedinLink {
	top: 80px;
}

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

#menucontainer {
	background-color: #00adef;
}

#submenucontainer {
	background-color: #7f3e98;
}

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

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

.activeMenu a, .inactiveMenu a {
	font-weight: 700;
}

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

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

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

#subMenuitems div.inactiveMenu a {
	color: white;
	background-color: #7f3e98;
	font-size: 90%;
}

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

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

.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: #7f3e98;
	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%;
	font-size: 130%;
}

b {
	font-weight: 600;
}

i {
	color: gray;
}

h1 {
	font-weight: normal;
	color: #7f3e98;
	font-size: 230%;
}

div.contacts {
	float: right;
	margin-top: 0;
}

h2 {
	font-weight: 500;
	color: #7f3e98;
	font-size: 160%;
}

h3 {
	font-weight: normal;
	color: #7f3e98;
	font-size: 130%;
}

#logo {
	margin-right: 25px;
}

img.right {
	border-radius: 10px;
	margin: 0 0 20px 20px;
	float: right;
}

img.left {
	border-radius: 10px;
	margin: 0 20px 20px 0;
	float: left;
}

/* -------- 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;
	margin: 0 auto;
}

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

.newsDate {
	font-size: 90%;
	font-style: italic;
}

.newsTitle {
	font-weight: bold;
}

.newsContent {
	font-size: 110%;
}

.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: 130%;
	line-height: 150%;
}

.footerContent {	
	border-top: 1px solid #00adef;
	height: 40px;
}

.footerContent div small {
	padding-top: 10px;
	font-size: 90%;
}

/* -------- Paypal payment page -------- */

body#donate div#freestyle div.blockCenter.form.columnsWide2, body#pay div#freestyle div.blockCenter.form.columnsWide2 {
	border-radius: 20px;
}


/* -------- 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 {width: 98%; margin: 10px auto 0;}
	img.right {width: 50%; margin: 0 0 10px 10px;}
	div.contacts {text-align: left; display: block;}
	#twitterLink {top: 10px;}
	#linkedinLink {top: 10px; right: 40px; position: absolute;}
	#newsfeeds1 #sidebar {display: none;}
}

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

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

	div.contacts p {font-size: 110%;}
}

/* -------- 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: 96%;}
	div.global {padding: 0; border-radius: 0; width: 96%; margin: 0 auto;}
	img.right {width: 50%;}
	div.contacts {float: none; text-align: center; width: 100%;}
}

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

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

	#twitterLink, #linkedinLink {top: 150px;}
	img#logo {width: 98%; margin: 10px auto;}
	div.contacts {float: left; width: auto; text-align: initial;}
	#twitterLink {top: 10px;}
	#linkedinLink {top: 10px; right: 40px; position: absolute;}
	#sidebar {min-height: 200px;}
}

/* -------- 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: 96%;}
	div.global {padding: 10px; border-radius: 0; width: 96%; margin: 0 auto;}
}

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