* {box-sizing:border-box;}

html {background:#000;}

body {
	margin:0;
	padding:0;
	font-family:Arial, Verdana, Helvetica, Sans-serif;
	color:#000;
	font-size:100%;
}

html > body {
	font-size:16px;
	color:#000;
}

#wrapper {
	margin:0 auto;
	background:#fff;
	max-width:700px;
}

#content {
	padding:20px;
	background:#fff;
}

.mcc-logo,
.mcc-logo a {
  display:block;
  height:125px;
  width:100%;
}

.mcc-logo {
  background-image:url(https://circleofsong.net/images/mcc-logo.svg);
  background-repeat:no-repeat;
  font-size:0;
  height:125px;
  line-height:0;
  margin:0 0 20px;
  width:100%;
}

#footer {
	clear:both;
	text-align:center;
	font-size:.8em;
	font-weight:bold;
	border-top:2px solid #253d80;
	margin:0 20px;
	padding:20px 0;
}

#footer p.mcc-statement {
  background-image:url(https://circleofsong.net/images/mcc-logo.png);
  background-repeat:no-repeat;
  box-sizing:border-box;
  font-size:13px;
  line-height:1.5em;
  margin:30px auto 10px;
	min-height:73px;
  padding-left:230px;
  text-align:left;
}

#navigation {
	background:#253d80;
	font-size:.8em;
	font-weight:bold;
	text-align:left;
	color:#fff;
	padding:3px 5px 4px;
	margin:10px 0 0 0;
}

#navigation a {color:#fff;}

#galleryWrapper {
	margin:10px auto;
	padding:10px 0;
	width:550px;
	border:1px solid #543;
	background:#eee;
}

div.homeRightBox {
	margin:4px 0 5px 10px;
	float:right;
	border:1px solid #666;
	background:#ccc;
	width:164px;
}

#homeRightColumn {
	margin:15px 0 1px 5px;
	float:right;
	width:170px;
}

div.homeRightBox {
	margin:5px auto;
	border:1px solid #666;
	background:#ccc;
	width:164px;
}

div.homeRightBoxInside {
	margin:5px;
	color:#bd3119;
}

div.blueline {
	background:#253d80;
	height:2px;
	overflow:hidden;
	clear:both;
}

div.galleryBox {
	clear:both;
	padding:6px 8px 8px;
	margin:0 0 10px 0;
	border:1px solid #999;
}


h1.header {
	padding:0;
	margin:0;
	width:100%;
}

h1.header a {
	display:block;
	line-height:0;
	padding:20px;
	width:100%;
}

h1.header a .logo {
	height:auto;
	max-width:600px;
	width:100%;
}


h2 {
	font-family:Arial, Helvetica, sans-serif;
	font-size:1.5em;
	font-weight:bold;
	text-align:center;
	color:#253d80;
	padding:10px 0 5px 0;
	margin:0;
}

#homeRightColumn h2 {
	font-size:1.15em;
	margin:0 0 5px;
	padding:3px 5px 2px;
	text-align:left;
	border:1px solid #bbb;
	background:#fff;
	color:#253d80;
}

h2 a:link, h2 a:visited, h2 a:hover {color:#253d80; text-decoration:none;}

a:link {color:#333; font-weight:bold}
a:visited {color:#333; font-weight:bold}
a:hover {color:#333; font-weight:bold}

fieldset {
	border:1px solid #004a8c;
	padding:10px;
	margin:0 0 10px 0;
}

legend {
	color:#253d80;
	font-weight:bold;	
}

figure {
	line-height:0;
	margin:0 0 20px;
	width:100%;
}

figure img {
	height:auto;
	width:100%;
}

figure figcaption {
	font-size:14px;
	font-weight:700;
	line-height:24px;
	padding:5px 0 10px;
	text-align:right;
}

img {border:0;}

img.galleryMainImage {
	float:left;
	border:1px solid #999;
	padding:1px;
	margin:3px 10px 0 0;
}

img.memberpicture {
	border:1px solid #999;
	padding:1px;
	float:left;
	margin:4px 10px 0 0;
}

img.grey {border:1px solid #999; padding:1px;}

span {font-family:Arial, Verdana, Helvetica, Sans-serif; font-size:1em; font-weight:normal; font-style:normal; color:#444;}

.subheading {font-size:1.2em; font-weight:bold; text-align:center;}

p {font-family:Arial, Verdana, Helvetica, Sans-serif; font-size:1em; font-weight:normal; font-style:normal; color:#444;}

.heading {font-size:1.5em; font-weight:bold; text-align:center; color:#000}
.subheading {font-size:1.2em; font-weight:bold; text-align:center;}
.white {color:#fff;}
.grey {color:#ccc;}
.inline {display:inline;}
.yellowerror {color:#fc3; font-weight:bold;}
.blueerror {color:#004a8c; font-weight:bold;}
.small {font-size:.8em;}

p#validXHTML {
	background:url(/images/validXHTML10.gif) no-repeat;
	margin:0 0 0 .25em;
	padding:0 0 .25em;
	width:66px;
	height:23px;
	text-indent:-9999px;
}

p#validXHTML a {
	display:block;
	width:66px;
	height:23px;
	overflow:hidden;
} 

ul {font-family:Arial, Verdana, Helvetica, Sans-serif; font-size:1em; font-weight:normal; font-style:normal; color:#444;}


/* Begin Navigation CSS */

ul#headerbar {
	position:relative;
	height:32px;
	width:600px;
	background:url(/images/headerbottom.gif);
	clear:both;
	margin:0 6px;
	padding:0;
}

ul#headerbar li {
	position:absolute;
	list-style-type:none;
	border:0;
	margin:0;
	padding:0;
}

li#join {height:15px; width:94px; top:9px; left:50px;}
li#concerts {height:15px; width:90px; top:9px; left:145px;}
li#news {height:15px; width:65px; top:9px; left:236px;}
li#gallery {height:15px; width:74px; top:9px; left:302px;}
li#members {height:15px; width:117px; top:9px; left:377px;}
li#contact {height:15px; width:102px; top:9px; left:495px;}
	
ul#headerbar li a {position:absolute; text-decoration:none;}
ul#headerbar li a span {font-family:Arial, Verdana, Helvetica, Sans-serif; font-size:1em; visibility:hidden;}

a#joinLink {height:15px; width:94px;}
a#concertsLink {height:15px; width:90px;}
a#newsLink {height:15px; width:65px;}
a#galleryLink {height:15px; width:74px;}
a#membersLink {height:15px; width:117px;}
a#contactLink {height:15px; width:102px;}

/* End Navigation CSS */






/* Helper CSS */

.visually-hidden {
	clip:rect(1px,1px,1px,1px);
	height:1px;
	position:absolute !important;
  overflow:hidden;
  width:1px;  
  word-wrap:normal;
}


/* Header Navigation */

nav.header-navigation {
	background:url(https://circleofsong.net/images/musical-staff.svg);
	background-repeat:repeat-x;
	background-size:auto 26px;
  height:26px;
	margin:0 20px;
	position:relative;
}

nav.header-navigation .navigation-container {background:rgba(255,255,255, .66);}

nav.header-navigation .navigation-container:before {
	background:url(https://circleofsong.net/images/treble-clef.svg);
	content:"";
	display:block;
	height:43px;
	left:5px;
	position:absolute;
	top:-7px;
	width:15px;
	z-index:10;
}

nav.header-navigation ul.menu {
	border-right:3px double #999;
	border-left:3px double #999;
	display:flex;
	margin:0 0 0 30px;
	padding:0;
}

nav.header-navigation ul.menu li {
	display:flex;
	border-right:1px solid #999;
	height:26px;
	line-height:26px;
	padding:0;
	width:auto;
}

nav.header-navigation ul.menu li:last-of-type {border:0;}

nav.header-navigation ul.menu li a {
	align-items:center;
	color:#000;
	display:flex;
	font-size:14px;
	font-weight:700;
	height:26px;
	line-height:13px;
	padding:0 5px;
	text-align:center;
	text-decoration:none;
}

nav.header-navigation ul.menu li a:hover {text-decoration:underline;}


@media (min-width:480px) {

  /* Header Navigation */

  nav.header-navigation ul.menu li a {padding:0 10px;}

}


@media (min-width:768px) {
	
	#wrapper {margin:40px auto;}

}