@charset "UTF-8";

/* CSS for Workshop website */
/* Mobile first design */

body {
	padding: 0;
	font: 15px/19px Arial, Helvetica, sans-serif;
	color: #444;
	text-align: center;
	background: white;
}
h1 {
	clear:both; /* Override later on bigger screen */
	font:bold 18px Arial, Helvetica, sans-serif;
	padding: 16px 5px 5px;
	margin: 0;
	text-align: center;
	color: black;
}
h2 {
	font: bold 16px Arial, Helvetica, sans-serif;
	color: black;
	margin: 0;
	padding: 0;
}
h3 {
	font: bold 15px Arial, Helvetica, sans-serif;
	margin-bottom: 0;
	padding-bottom: 0;
	color: black;
}

p, li {
	font: 15px/20px Arial, Helvetica, sans-serif;
}

ul {
	padding-left: 20px;
}
ol {
	padding-left: 30px;
}
li {
	margin-top:10px;
	margin-bottom:10px;
}

a:link, a:visited {
	color: #33C;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}
td {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
}
th {
	text-align: center;
}

img {
	border:none;
	max-width: 100%;
	height: auto;
}

img.centred {
	display:block;
	margin-left:auto;
	margin-right:auto;
}

/* Centering... divs and paragraphs */
.centre {
	text-align: center;
}
/* Centering tables */
div.centre {
	text-align: center;
}
div.centre table { /* To centre in old IE, wrap table in centred DIV */
	margin-left: auto; /* For some old browsers, can't combine all margins into one */
	margin-right: auto;
	text-align: left;
}
div.centre th { /* Put this one back... */
	text-align:center;
}

.red {
	font-weight: normal;
	color: #F00!important;
}

/* Basic containers */
#container {
	max-width: 1024px;
	padding: 0;
	text-align: left;
	background:#F8F8F8;	
	background:white;
	background:transparent;
	overflow: hidden; 
	margin: 0 auto;
	position:relative;
}

header {
	margin: 0;
	padding: 0;
}


nav:first-of-type {
	margin-bottom: 20px;
/*  position: -webkit-sticky!important; 
  position: sticky!important;
  top: 0;
	z-index:98;*/
}


@media print {
	nav:first-of-type {
		display:none; /* Hide menu bar */
	}
}

/******/
.column-wrapper {
	clear:both;
	overflow:auto;
}
.column-wrapper section, .column-wrapper aside {
	clear:both;
	width:auto;/* underneath in mobile screens, float in desktop */
	margin: 0;
	padding: 0 2px;
	min-width: 180px;
	overflow:hidden; /* Constrain scope of clears to this */
}




.panel {
	border: none;
	background: #FFF;
	padding-bottom: 2px;
	margin: 30px 0;
	overflow: hidden;
	border-radius: 0;
}

.space25 {
	margin-top:25px!important;	/* Override nested selectors */
}
.space {
	margin-top:50px!important;	/* Override nested selectors */
}
.spacespace {
	margin-top:50px!important;	
	margin-bottom:50px!important;
}

.panel h2 {
	margin: 0 0 0 3px;
}
.panel h1, .panel h2, .panel h3 {
	text-align: left;
	padding: 5px;
	margin: 0 0 10px 0;
	font: bold 20px/24px verdana, sans-serif;
	color: black;
/*	box-shadow: 0 5px 6px #BBB; */
}
.panel h1 {	
	font: bold 22px/26px verdana, sans-serif;
}
.panel h3 {	
	font: bold 18px/22px verdana, sans-serif;
}


.panel p, .panel li, .panel audio {
	padding: 3px;
	margin: 0;
}

.panel footer {
	height:1px;
	width:150px;
	margin:20px auto 0;
	border-top:1px solid #CCC;
}


.accordion {
	background-color: #eee;
	cursor: pointer;
	padding: 14px 0;
	width: 100%;
	margin: 0;
	color: #333;
	border: none;
	text-align: center;
	outline: none;
	font-size: 15px;
	transition: 0.4s;
}

.accordion:after {
	content: '\002B';
	font-weight: bold;
	float: right;
	margin-right: 15px;
	transform: rotate(0deg);
	-webkit-transition: all .35s;
	-o-transition: all .35s;
	transition: all .35s;
}
.accordion-active:after {
	transform: rotate(315deg);
	-webkit-transition: all .35s;
	-o-transition: all .35s;
	transition: all .35s;
}
.accordion-content {
	background-color: white;
	border-bottom : 1px solid #DDD;
  margin-bottom : 10px!important;
	overflow: hidden;
	margin:0;
	padding:0;
	transition: max-height 0.3s ease-out;
}
.accordion-content {
		max-height: 0;  /* Hide from view */
}

.accordion.concert {
	border-top : 1px solid #DDD;
	margin-top:5px;
	margin-bottom:0;
	box-sizing:border-box;
}

.accordion-content>article {  /* DSH */
	background-color: white;
	overflow: hidden;
}

.accordion-content>article>h2 { /* DSH */
	font-size:15px;
	font-weight:normal;
	text-align:center;
	margin: 0;
	padding: 0;
}

.accordion-content>article>h3 { /* DSH */
	font-size:15px;
	color:#666;
	text-align:center;
}
.accordion-content>header>h3 { /* DSH */
	font-size:15px;
	color:#666;
	background-color:white;
	text-align:center;
	padding:10px;
	margin:0;
}

.accordion-content ul {
	margin:2px;
}
.accordion-content li {
	margin-top:5px;
	margin-bottom:5px;
}

.concert-entry {
	font-size:14px;
	margin:3px;
}
.concert-entry:nth-child(even) {
	background:#F8F8F8;
}
.concert-entry .number {
	padding:4px;
	background:#DEF;
	display:inline-block;
	text-align:right;
	width:15px;
}
.concert-entry .date {
	padding:4px;
	display:inline-block;
	text-align:right;
	width:100px;
}
.concert-entry .info {
	padding:4px;
	display:block;
}

.calendar {
	background:url(../../furniture/calendar.jpg);
	background-position:top right;
	background-size:contain;
	background-repeat:no-repeat;
}






footer {
	clear:both;
	padding: 0;
	background:#FFF;
	overflow:auto;
/*	position: fixed;  Stick to bottom 
  left: 0;
  bottom: 0;
  width:100%; */
}

footer>h2 {
	background: #AAA;
	background-image: linear-gradient(to bottom, #BBB, #999); 
	font-size:18px;
	font-weight:normal;
	color:white;
	height:48px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
	padding: 5px 0 0 0;
	line-height:40px;
	text-align:center;
}

footer>div {
	width: auto;
	margin: 10px 0;
	padding: 0 2px;
	text-align: center;
}
/* */


/* copyright and footer text a */

footer>div p {
	margin: 0;
	padding: 0;
	margin-bottom:10px;
}



.programme {
	background:  url(../../furniture/whitetexture.gif) repeat;
	width: auto;
	border: 1px solid #666;
	margin: 15px auto;
	padding-left:5px;
	padding-right:5px;
	overflow:hidden;
}
.programme p {
	margin:2px;
}
.programme p.solo {
	font-style: italic;
	margin: 10px 2px;
	padding-left: 30px;
}
.programme h3 {
	text-align:center;
	margin-top:10px;
	margin-bottom:10px;
}
.programme h3.section {
	border-top: 1px solid #666;
	padding-top:10px;
}

.blue-contrast {
	color:#36F;
}

.royalshade {
	background: #7777F5
}
.platinumshade {
	background: #C0C0C0
}
.goldshade {
	background: #D4AF37;
}
.silvershade {
	background: #C0C0C0;
}
.bronzeshade {
	background: #CD7F32;
}

.award {
	width:300px;
	margin-bottom:30px;
}

.award tr {
	background: #EEF2FF;
}
.award th {
	padding:5px;
	color:white;
}



.clear {
	clear: both;
}

h3+p {
	margin-top: 1px;
	padding-top: 1px;
}
h3+blockquote {
	margin-top: 1px;
	padding-top: 1px;
}
td.ltgreyshade {
	background: #EEE;
	text-align: right;
	vertical-align: top;
}
tr.ltgreyshade {
	background: #EEE;
	text-align: center;
	vertical-align: top;
}

th.ltgreyshade {
	background: #EEE;
	text-align: center;
	vertical-align: top;
}


table.relaxed {
	border-collapse:separate;
	border-spacing: 4px;
}
table.relaxed td {
	padding:5px;
}
table.centre {
	margin-left:auto; 
  margin-right:auto;
}

td.date {
	  white-space: nowrap;
		text-align: right;
		vertical-align:top;
}

.left {
	text-align:left;
}
.right {
	text-align:right;
}


.float-r {
	float:right;
}



/* Photos and graphics - common across sites - no float wanted on phones */
.float-photo-right {
	clear:both;
	display:block;
	float:none;
	text-align:center;
}
/* Specials */
.float-300-right, .float-424-right {
	clear:both;
	display:block;
	float:none;
	text-align:center;
	max-width: auto;
	max-height: auto;
	border: none;
	margin: 2px auto;
	box-sizing: border-box;
}

.centre-photo {
	text-align:center;
}
.float-photo-right img, .float-photo-left img, .centre-photo img {
	max-width:auto;
	max-height:auto;
	border: 1px solid #CCC;
	padding: 10px;
	margin: 0;
	box-sizing:border-box;
}



td blockquote {
	vertical-align: top;
	padding: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
blockquote p {
	font-style: italic;
}

img.photo {
	margin: 0;
	border: 1px solid #AAA;
	padding: 8px;
	box-sizing:border-box;
}


td.nowrap {
	white-space: nowrap;
}

.two-boxes { /* Float on big screen, stack on small */
	width:auto;
	float:none;
	padding:3px;
	padding-bottom:10px;
	box-sizing:border-box;
}

/* Hide less relevant material on small devices */
.desktop {
	display:none;
}

.new-window-link {
	padding-right: 20px;
	background: url(../../furniture/open-in-new-window.png) no-repeat scroll right center;
	background-origin: initial;
	background-clip: initial;
}

.youtube-outer-wrapper { /* Forces padding to collapse */
	max-width: 960px;
	margin: 10px auto;
	border: #CCC thin solid;
}
.youtube-wrapper {
	position: relative;
	height: 0;	/* Will grow responsively */
	padding-bottom: 56.25%; /* Height won't grow, but padding will! */
	overflow: hidden;
}
.youtube-wrapper iframe { /* Add to embed iframe. Style max-width and max-height as well */
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-width: 960px;
	max-height: 540px;
	border: none;
}


/* Scroll to top */
#TopButton {
  display: none;
  position: fixed;
  bottom: 10px;
  right: 10px;
  z-index: 99;
  font-size: 16px;
  border: none;
  outline: none;
	background-color:rgba(255,255,255,0.5);
	border:1px solid #69E;
	color:#689CEB;
	font-weight:bold;
  cursor: pointer;
  padding: 12px;
  border-radius: 4px;
}

#TopButton:hover {
  background-color: #69E;
  background-image: linear-gradient(to bottom, #58D, #7AF); /* DSH */
	color:white;
}


/* Standout box for new website... */

.standout {
	max-width: 90%;
	margin:8px auto;
	padding:5px;
	border:1px #CCC solid;
	box-shadow:1px 5px 10px #666;
	box-sizing:border-box;
	transition: 0.6s; /* for hover */
}