/* Alternative colors: blue #382ecf; red: #980000; grey: #b0b0b0; darker blue: #101090; */

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

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

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

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

#bannercontainer {
	background-color: #980000;
}

#logindetails {
	background-color: #980000;
	color: #ffffff;
	padding: 5px 5px 5px 0;
}

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

div#searchSite {
	right: 0;
	padding-right: 10px;
}

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

figure {
	border: 1px #999999 solid;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;	
}

figcaption {
	font-size: 80%;
}

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

#menucontainer {
	background-color: #4f4f4f;
	-moz-border-radius-topright: 0;
	-webkit-border-top-right-radius: 0;
	border-top-right-radius: 0;
	-moz-border-radius-topleft: 0;
	-webkit-border-top-left-radius: 0;
	border-top-left-radius: 0;
}

#submenucontainer {
	background-color: #4f4f4f;
}

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

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

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

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

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

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

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

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

a {
	color: #6699cc;
	text-decoration: none;
}

a.private {
	font-style: italic;
}

a:hover {
	color: white;
}

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

.subtitle {
	font-size: 65%;
	font-style: italic;
	color: #b0b0b0;
}

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

p {
	line-height: 150%;
}

i {
	color: gray;
}

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

h2 {
	font-weight: normal;
	color: white;
	font-size: 150%;
}

h3 {
	font-weight: boldcss2;
	color: #b0b0b0;
	font-size: 110%;
}

div.resourceSummary .lineItem h2 {
	color: white;
}

.generic2 img {
	margin-left: 10px;
	padding: 10px;
	border-radius: 10px;
	background-color: white;
	float: right;
}

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

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

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

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

.formheader {
	color: white; 
	font-size: 130%; 
}

.support .form {
	margin: 0 auto;
}

input.file {
	color: white;
}

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

.newsDate {
	color: white;
}

div.item p.newsDate {
	font-style: italic;
	visibility: hidden;
}

.newsTitle {
	font-weight: heavy;
}

.newsContent {
	font-size: 100%;
}

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

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

.mainNews {
	background-color: #222222;
}

.lineAbove {
	border: 1px #999999 solid;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-right-radius: 10px;
	border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-webkit-border-top-left-radius: 10px;
	border-top-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
	border-bottom-right-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

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

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

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

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

div.popup, div.popup div.blockCenter.form.columnsWide2 {
	background-color: #333333;
}

div.popup a {
	font-size: 100%; 
}

div.popup p {
	color: white;
}

/* --------- Footer styles --------- */

#footercontainer {
	background-color: #333333;
	margin: 0 auto;
	padding: 5px 0 0 0;
}

.footerContent {
	padding-top: 5px;
	background-color: #980000;
	height: 35px;
	-moz-border-radius-bottomright: 10px;
	-webkit-border-bottom-right-radius: 10px;
	border-bottom-right-radius: 10px;
	-moz-border-radius-bottomleft: 10px;
	-webkit-border-bottom-left-radius: 10px;
	border-bottom-left-radius: 10px;
}

.footerContent img {
	float: left;
	padding-left: 5px;
}

.footerContent small {
	text-align: right;
	padding: 0 10px 0 0;
}

/* --------- Administration styles --------- */

div.tabular div.record:nth-child(even) {
	background-color: #333333;
	color: white;
}

div.tabular div.record:nth-child(odd) {
	background-color: #666666;
	color: white;
}

.superRecord, .superRecord a {
	color: #ff6666;
}

.adminRecord, .adminRecord a {
	color: #99ccff;
}

.userRecord, .userRecord a {
	color: #dcdcfc;
}

.userRecord a:hover {
	color: #ffffff;
}

div.editor div, div.nicEdit-main {
	color: #000000;
}

.dateInput {
	color: black;
}

.ajaxUpdate {
	color: white;
}

div[unselectable="on"] {
	color: black;
}

/* --------- Filter menu --------- */

#resourcesOptionsContent div.firstLineItem, #filterOptionsContent div.firstLineItem {
	color: black;
}

div.resourceSummary .lineItem h2 a {
	color: white;
}

div.resourceSummary .lineItem {
	max-width: 740px;
}
 
div.blockCenter.form.columnsWide2 span {
	color: black;
}

/* --------- Calendar styles --------- */

table.eventCalendar td.calcell {
	color: #000000;
}

.mediumBox, .smallBox {
	border: 1px #999999 solid;
	margin-top: 1px;
}

td.eventOn {
	background-color: #382ecf;
}

td.eventOn a {
	color: white;
}

td.caltoday a:hover  {
	background-color: #980000;
}

/* --------- Sidebar styles --------- */

#sidebar {
	padding: 0;
	background-color: #f0f0f0;
	color: #0f0f0f;
}

#sidebar a {
	color: #666666;
}

#sidebar a:hover {
	text-decoration: underline;
}

#sidebar p {
	font-size: 90%;
	line-height: 1.3em;
	padding: 3px;
	color: #0f0f0f;
}

.sidebarEdit {
	color: black;
}

div.thumbnail img {
	display: block;
	margin: 3px auto;
}

/* --------- Blog stuff --------- */

.blogArticle {
	background-color: #222222;
}

.blogComments {
	background-color: #393939;
}

.blogArticle h2 {
	color: #b0b0b0;
}

.blogArticle p {
	color: white;
}

.blogArticle section p {
	color: white;
}

.blog aside#sidebar {
	background-color: transparent;
	color: white;
	border: 0;
}

div.blogSummaryHeader {
	background-color: gray;
}

.blog aside#sidebar a {
	color: #6699cc;
	text-decoration: none;
}

.blog aside#sidebar a:hover {
	color: white;
}

.blogContent {
	border: 1px solid #333333;
	background-color: #333333;
}

.blogContent:after {
	background: -moz-linear-gradient(bottom, rgba(48,48,48,1) 0%, rgba(48,48,48,0) 100%);
	background: -webkit-linear-gradient(bottom, rgba(48,48,48,1) 0%,rgba(48,48,48,0) 100%);
	background: -o-linear-gradient(bottom, rgba(48,48,48,1) 0%,rgba(48,48,48,0) 100%);
	background: -ms-linear-gradient(bottom, rgba(48,48,48,1) 0%,rgba(48,48,48,0) 100%);
	background: linear-gradient(bottom, rgba(48,48,48,1) 0%,rgba(48,48,48,0) 100%);
}

.blogContent:after {
	height: 115px;
}

/* --------- Form header --------- */

p.formheader {
	color: white;
}

/* -------- 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, div#global {width: 100%;}
	#sectioncontainer {width: 96%;}
	section#logindetails {padding-right: 0;}
	section#logindetails a:last-child {padding-right: 5px;}
	div.global {padding: 0; border-radius: 0; margin: 0 auto;}
	img#logo {width: 98%; margin: 10px auto;}
	img.right {width: 50%; margin: 0 0 10px 10px;}
	.generic2 img {width: 70%; display: block; margin: 0 auto; float: none;}
	.blog aside#sidebar {display: none;}
	.footerContent {border-radius: 0; padding: 10px 2px; margin: 0 auto; background-color: #980000;}
	.activeMenu, .inactiveMenu {font-size: 100%;}
	#sidebar {float: none; margin: 10px auto;}
	#donate div.freestyle img {width: 40%;}
}

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

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

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

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

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

	img#logo {width: 98%; margin: 10px auto 0;}
}


/* -------- 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, div#global {width: 100%;}
	#sectioncontainer {width: 98%;}
	#bannercontainer {border-radius: 0;}
	section#logindetails {padding-right: 0;}
	section#logindetails a:last-child {padding-right: 5px;}
	div.global {padding: 0; border-radius: 0; margin: 0 auto;}
	img.right {width: 50%;}
	.generic2 img {width: 50%;}
	img#logo {width: 98%; margin: 10px auto;}
}

/* -------- 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%;}
	section#logindetails {padding-right: 0;}
	section#logindetails a:last-child {padding-right: 5px;}
	div.global {padding: 10px 8px 20px; border-radius: 0; margin: 0 auto;}
	img#logo {width: 98%; margin: 0 auto;}
}

/* -------- min-width: 961px and max-width: 1005px -------- */

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

	img#logo {width: 98%; margin: 0 auto;}


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