/* Alternative colors: dark purple #1f001e e9e9e9; lemon: #fdfdd3; purple: #5d5993; grey background: #e9e9e9; blue/purple #5d5993 shade 520070 pale purple #efe5ef  */

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

@font-face {
	font-family: 'Alex_Brush';
	src: url('../fonts/Alex_Brush/AlexBrush-Regular.ttf');
	font-weight: normal;
}

@font-face {
	font-family: 'OpenSans-Regular';
	src: url('../fonts/Open_Sans/OpenSans-Regular.ttf');
	font-weight: normal;
}

@font-face {
	font-family: 'OpenSans-Light';
	src: url('../fonts/Open_Sans/OpenSans-Light.ttf');
	font-weight: normal;
}

body {
	background-color: #1f001e;
	color: #efe5ef;
	font: normal 14px OpenSans-Regular, Verdana, Helvetica, sans-serif;
}

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

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

#logindetails {
	color: #efe5ef;
	padding: 5px 0;
	width: 960px;
	border-bottom: 1px #e8e8e8 solid;
}

div#searchSite {
	right: 5px;
	top: -10px;
}

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

/* --------- Figures --------- */

figure {
	border: 1px #e8e8e8 solid;
	padding: 0 10px;
}

figure.swapper {
	border: 0;
}

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

#menucontainer {
	background-color: #1f001e;
}

#submenucontainer {
	background-color: #1f001e;
}

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

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

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

.activeMenu a, .activeMenu a:link, .activeMenu a:visited, .inactiveMenu a, .inactiveMenu a:hover {
	color: #fdfdd3;
	background-color: #1f001e;
	font-size: 120%;
}

#menuitems, #subMenuitems {
	padding-top: 5px;
}

#subMenuitems div.activeMenu a, #subMenuitems div.inactiveMenu a:hover {
	color: #fdfdd3;
	background-color: #1f001e;
	font-size: 100%;
}

#subMenuitems div.inactiveMenu a {
	color: white;
	background-color: #1f001e;
	font-size: 100%;
}

.private #subMenuitems div.inactiveMenu a {
	color: white;
}

.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;
}

/* --------- Additional menu styles --------- */

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

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

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

a.private {
	font-style: italic;
}

a:hover {
	color: #efe5ef;
}

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

.subtitle {
	color: #909090;
	line-height: 110%;
}

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

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

p.statement {
	font-size: 140%;
	font-style: italic;
}

div.quote {
	width: 100%;
	border-bottom: 1px dotted #efefef;
	padding: 10px 0;
	min-height: 350px;
}

.generic21 b {
	font-size: 120%;
}

i {
	color: #efe5ef;
}

h1 {
	font-family: 'Alex_Brush', cursive;
	font-weight: normal;
	color: #efe5ef;
	font-size: 400%;
	line-height: 40%;
}

h1.banner {
	font-size: 750%;
	color: #efe5ef;
	margin-top: 10px;
	line-height: 80%;
}

span.name {
	font-size: 120%;
}

h1#sectionHeading {
	margin-left: 5px;
}

h2 {
	font-family: 'Alex_Brush', cursive;
	font-weight: normal;
	color: #efe5ef;
	font-size: 250%;
	line-height: 90%;
}

h3 {
	font-family: 'Alex_Brush', cursive;
	font-weight: normal;
	color: #efe5ef;
	font-size: 220%;
}

.generic10 img.left {
	float: left; 
	margin-right: 15px;
}

.generic10 img.right {
	float: right;
	margin-left: 15px;
}

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

#sidebar {
	border-left: 1px #1f001e solid;
	line-height: 140%;
	background-color: #1f001e;
	width: 320px;
}

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

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

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

.support1 .form {
	margin: 0 auto;
}

.formheader {
	color: #e9e9e9;
}

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

.footerContent {
	overflow: hidden;
}

.footerContent p {
	font-family: 'Alex_Brush', cursive;
	font-size: 180%;
	color: #efe5ef;
	letter-spacing: 2px;
}

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

.newsDate {
	visibility: hidden;
	display: none;
}

.newsTitle {
	font-size: 110%;
}

.newsContent {
	font-size: 100%;
}

.item {
	border-bottom: 1px #cccccc solid;
	margin-right: 10px;
}

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

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

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

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

.welcomeText {
	color: #e9e9e9;
}

.greeting img {
	display: block;
	margin: 0 auto;
	width: 70%;
}

/* --------- Initial tables in repertoire and recordings --------- */

table.entry td, table.entry th {
	margin-left: 5px;
	border: 0;
	padding: 3px;
	vertical-align: top;
	color: #e9e9e9;
	border-collapse: collapse;
}

th {
	vertical-align: middle;
	font-weight: normal;
	font-size: 120%;
	padding: 5px;
}

.generic3 th {
	font-family: 'Alex_Brush', cursive;
	vertical-align: middle;
	font-weight: normal;
	font-size: 180%;
	padding: 5px;
}

div.rep_details, div.rec_details {
	width: 100%;
}

table.recordings {
	border: 1px #efefef solid;
	margin: auto;
	background-color: transparent;
	width: 85%;
	text-align: center;
}

.shade {
	background-color: #520070;
}

td {
	padding: 3px;
}

div.links td.middle {
	border: 0;
	vertical-align: middle;
	text-align: left;
}

div.links table {
	margin: auto;
}

/* --------- Social media links --------- */

.social {
	float: right;
	padding: 2px 5px;
}

div.tabular div.record:nth-child(odd), div.tabular div.record:nth-child(even) {
	color: #1f001e;
}
	
div.tabular div.record:nth-child(odd) a, div.tabular div.record:nth-child(even) a {
	color: #1f001e;
}

div.tabular div.record:nth-child(odd) a:hover, div.tabular div.record:nth-child(even) a:hover {
	color: #efe5ef;
}

div.popup {
	background-color: #1f001e;
}

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

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

.dateInput {
	color: black;
}

.ajaxUpdate {
	color: white;
}

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

/* -------- 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 {width: 100%;}
	#sectioncontainer {width: 96%;}
	section#logindetails, #footercontainer {width: 98%; margin: 0 auto;}
	div.global {padding: 0; border-radius: 0; width: 96%; margin: 0 auto;}
	div#global {width: 100%;}
	div#searchSite {display: none;}
	h1.banner {margin: 20px auto; text-align: center; width: 100%;}
	.greeting img {width: 90%;}
	#logindetails {margin-top: 0;}
	#twitterLink, img.social {display: none;}
	#sidebar {display: none;}
	.footerContent {text-align: center;}
	.generic10 img.right {width: 70%; float: none; display: block; margin: 0 auto;}
	.generic10 img.left {width: 70%; float: none; display: block; margin: 0 auto;}
}

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

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

	.generic3 tr {font-size: 80%;}
	.generic3#sectioncontainer {width: 98%;}
}

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

@media only screen and (min-width: 320px) and (max-width: 480px) {
	.footerContent img {width: 98%;}
	.footerContent a img {width: 88px; margin: 5px 0 5px 5px;}
	div.global {padding: 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 {width: 98%;}
	#logindetails {margin-top: 0;}
	div.global {padding: 20px 10px; border-radius: 0; margin: 0 auto;}
	h1.banner {font-size: 500%; margin-top: 10px;}
	h1 {font-size: 300%;}
	
}

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

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

	div#searchSite {display: none;}
	h1.banner {margin: -40px auto; text-align: center; width: 100%; font-size: 600%;}
	#twitterLink {top: 60px;}
	#sidebar {display: none;}
}


/* -------- 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%;}
	h1.banner {font-size: 600%;}
	h1 {font-size: 350%;}
	div.global {padding: 15px 10px 20px; border-radius: 0; margin: 0 auto;}
	.greeting img {width: 80%;}
}

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