@charset "UTF-8";
/* Common settings and mobile-first CSS */
/* All desktop CSS is in other files to speed up mobile loading */
/* Where the mobile CSS is difficult to undo for desktop 
   (eg Accessible buttons), we do it all in this file
	 so we don't apply the mobile style if we don't want it */
body {
	margin: 0;
	background: #FFF;
	text-align: center; /* For IE to centre the container */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #444;
}
a:link {
	text-decoration: none;
	color: #009;
}
a:visited {
	text-decoration: none;
	color: #00C;
}
a:hover {
	text-decoration: underline;
	color: #F00;
}
h1, h2, h3, h4 {
	text-decoration: none;
	font-weight: bold;
	color: #000;
}
h1 {
	font-family:Verdana, Arial, sans-serif;
	text-align: center;
	margin-top: 2px;
	margin-bottom: 0;
}
h2 {
	font-size: 16px;
	text-align: center;
	margin-top: 6px;
	margin-bottom: 6px;
}
h2+p {
	margin-top: 6px;
}
h3 {
	margin-bottom: 3px;
	font-size: 13px;
}
h3+p, h3+ul {
	margin-top: 0;
}
h4 {
	font-size: 12px;
	font-weight: normal;
}
p, td, li {
	font-size: 14px;
}
th {
	color: #000;
	font-size: 14px;
}

ul {
	padding-left: 10px;
}

.smaller {
	font-size:smaller;
}

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


/* MAIN CONTAINER */
#container {
	margin: 0; 
	padding: 0;
	text-align: left;
	background: rgba(255,255,255,0.2);
}

/* MAIN CONTAINER HEADER */
#container>header { /* Top level container's header */
	margin: 0 auto; 
	padding: 0;
	background:#FFF;
}
#container>header h1 {
	font-size: 22px;
	color: #333;
}

#container>header h2, #container>header p {
	color: #666;
	font: bold 13px Arial, Helvetica, sans-serif;
	margin: 0;
	padding-top: 8px;
	padding-bottom: 0;
}
#container>header h2 {
	text-align:center;
}


/* MAIN CONTAINER CONTENT */
/* ====================== */
section.subsectionwrapper {
	background-color:rgba(255,255,255,0.5);
	padding:0;
	width:auto;
	overflow:auto;
}
.gap {
	padding-top:20px!important;
	padding-bottom:20px!important;
}

section.subsection {
	background-color: transparent;
	padding: 1px 1px 5px;
	max-width:1024px;
	margin: 0 auto;
	overflow:auto;
}
section.subsection.widescreen{
	max-width:1366px;
}
section.subsection.shade{
		background-color:#F0F0F4;
}
section.subsection p {
	padding-left:3px;	
	padding-right:3px;
}

#container header>nav:first-of-type { /* Menu bar */
	max-width: 1024px;
	margin: 0 auto 10px;
}

section.split, aside.split { /* Aside underneath in mobile */
	margin: 0;
	padding: 0;
	overflow: hidden;
}
aside.split img, section.split img {
	width:auto;
	max-width:100%;
}
section.split p, section.split h1, section.split h2, section.split h3 {
	margin-left:3px!important;
	margin-right: 3px!important;
}


/* MAIN CONTAINER FOOTER */
/* ===================== */
#container>footer {
	clear: both;
	background:white;
	margin-top:20px;
	padding: 10px 0 5px;
	overflow: auto;
	border-top: 1px solid #69F;
}

#container>footer aside, #container>footer section {
	clear:both;
	margin:0;
	padding: 0;
	text-align:center;
	font: 12px Arial, Helvetica, sans-serif;
	overflow:hidden;
}
#container>footer aside
{
	margin:5px; /* Ready for coloured footer */
	border-radius:5px;
	background-color:white;
}

	
#container>footer aside img { /* Logo */
	padding-right:5px;
	padding-left: 5px;
	padding-bottom: 4px; /* For mobiles */
}

#container>footer>section a>img {
	margin: 5px 5px 8px;
}


#container>footer>section>p {
	font-size: 13px;
	font-weight: normal;
	color: #000;
	margin: 0;
	padding: 8px 0;
}

#container>footer>section>div.social {
	background:white;
	width:320px;
	margin: 0 auto;
}




nav.button {
	text-align: center;
	line-height:42px;
	margin-top:10px;
	margin-bottom:10px;
	}
nav.button a, nav.button .no-a {
	white-space:nowrap;
	font: 16px Verdana, Geneva, sans-serif;
	background-color:#69E;
	background-image:linear-gradient(#58D,#7AF);
	padding:8px 10px 8px; /* T, L+R B */
	margin:5px;
	text-align:center;
	border-radius:4px;
}
nav.button a {
	color: white;
}
nav.button .no-a {
	color: #CCC;
}

@media (max-width: 640px) { /* Style for mobile only */
nav.button a.clicktap:before {
	content: "Tap ";
}
}
@media (min-width: 641px) { /* Style for desktop */
nav.button a.clicktap:before {
	content: "Click ";
}
}




img.photo, img.thumb, img.shadow {
	border: 1px solid #AAA;
	padding: 0;
	box-shadow: 2px 2px 6px #AAA;
	box-sizing: border-box;
	max-height: 100%;
	max-width: 100%;
}

@media (min-width: 641px) { /* Additional style for desktop */
img.photo, img.thumb, img.shadow {
	padding: 8px;
}
}



#content p, #content h1, #content h2, #content h3 {
	margin-left:3px;
	margin-right: 3px;
}
#content>.float-2-boxes>p, #content>.float-3-boxes>p {
	margin-left:3px;
	margin-right: 3px;
}



/* Centering... divs and paragraphs */
.centre {
	text-align: center!important;
}
/* 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;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}

/* Spacing */
.vspace {
	padding-bottom: 10px!important;
}
/* The DEFINITIONS page */

.definition {
	width: 100%;
	background: white;
	overflow: hidden;
	box-sizing: border-box;
}
/* The colours */
.definition.defn1 {
	border: 1px solid #F9F;
}
.definition.defn1 h2 {
	background: #F9F;
}
.definition.defn1 p:nth-of-type(odd) {
	background: #FCF;
}
.definition.defn2 {
	border: 1px solid #CF9;
}
.definition.defn2 h2 {
	background: #CF9;
}
.definition.defn2 p:nth-of-type(odd) {
	background: #CFC;
}
.definition.defn3 {
	border: 1px solid #FF9;
}
.definition.defn3 h2 {
	background: #FF9;
}
.definition.defn3 p:nth-of-type(odd) {
	background: #FFC;
}
.definition.defn4 {
	border: 1px solid #F9C;
}
.definition.defn4 h2 {
	background: #F9C;
}
.definition.defn4 p:nth-of-type(odd) {
	background: #FCC;
}
.definition.defn5 {
	border: 1px solid #F96;
}
.definition.defn5 h2 {
	background: #F96;
}
.definition.defn5 p:nth-of-type(odd) {
	background: #FC9;
}
.definition.defn6 {
	border: 1px solid #9FF;
}
.definition.defn6 h2 {
	background: #9FF;
}
.definition.defn6 p:nth-of-type(odd) {
	background: #CFF;
}
/* The layout */
.definition h2 {
	clear: both;
	margin: 0;
	padding: 0;
}
.definition p:nth-of-type(odd) {
	clear: both;
	text-align: center;
	width:auto;
	border-top: 2px solid white;
	border-bottom: 2px solid white;
	margin: 2px 0;
	padding: 4px;
	box-sizing: border-box;
}
.definition p:nth-of-type(even) {
	text-align: center;
	background: white;
	width:auto;
	border: 2px solid white;
	margin: 2px 0;
	padding: 4px;
	padding-bottom:8px;
	box-sizing: border-box;
}
/* COLOURS */
/* Foreground colours */

.red {
	font-weight: normal;
	color: #F00;
}
.boldred {
	font-weight: bold;
	color: #F00;
}
.green090 {
	color: #090;
}
.white {
	color: #FFF;
}
.grey6 {
	color: #666;
	font-weight: normal;
}
.blue36c {
	color: #36C;
}
.blue69F{
	color: #69F;
}
/* Background colours */
.bg-white {
	background-color: #FFF!important;
}
.bg-pale-blue {
	background-color:#EEEEFF;
}
.purple1 {
	background-color: #FCF;
}
.purple2 {
	background-color: #FEF;
}
.bg-lime {
	background-color: #CF3;
}
.bg-lt-blue {
	background-color: #CDF;
}
.bg-lt-cream {
	background-color: #FFE;
}
.large {
	font-size: 14px;
	font-weight: bold;
}
.small {
	font-size: 12px!important;
	font-weight: normal;
}
.h1small {
	font-size: 18px!important;
	font-weight: normal;
}
.bg-popup {
	background: #F46;
}
#shortcut {
	width: 118px;
	text-align: center;
}
#rooms {
	text-align: center;
}
.clear-b {
	clear: both;
}
.clear-n {
	clear: none!important;
}

/*********/

table.relaxed {
	border-collapse: separate;
	border-spacing: 2px;
}
table.relaxed td {
	padding: 2px;
}
table.tight {
	border-collapse: collapse;
	border-spacing: 0;
}
table.tight td {
	padding: 2px;
}
.border {
	border: 1px solid #000;
}
.top-border {
	border-top: 1px solid #000;
}

.score-back {
	background-image:url(../../furniture/full-score-pale.jpg);
	background-size:cover;
	background-repeat: no-repeat;
}

/* VARIOUS FLOATS - SOME ONLY ON A LARGER SCREEN */
.float-r {
	float: right;
}
.float-l {
	float: left;
}
.float-logo {
	float: left;
	width: 60px;
	text-align: center;
	overflow: hidden;
}
.float-175-r {
	float: right;
	width: 175px;
	text-align: center;
	overflow: hidden;
}
.float-250-r {
	float: right;
	width: 250px;
	text-align: center;
	overflow: hidden;
}
.float-250-l {
	float: left;
	width: 250px;
	text-align: left;
	overflow: hidden;
}


.inline-box
{
	display:inline-block;
	text-align:center;
	vertical-align:top;
	width: 100%;
	padding: 10px 0;
}
@media (min-width:641px) {
.inline-box {
	width:49%;
}
}
@media (min-width:1024px) {
.inline-box {
	width:33%;
}
}

.inline-box .colourbox {
	margin:50px auto;
	border-radius:0;
}

/* zzz New */
.colour-container {
	padding: 5px;
	margin: 0;
	width: auto;
	overflow: hidden;
}

.colour-container footer {
	clear:both;
	height:25px;
	width:150px;
	margin:0 auto;
	border-bottom:1px solid #AAA;
}


.colour-container.shade {
	background-color:#F0F0F4;
}

.colour-container h2 {
	margin-top:25px;
	font-weight:bold;
	font-size:18px;
	letter-spacing:2px
}
.colour-container p {
	font-weight:normal;
	font-size:16px;
	line-height:26px;
}


.zoom img{
	transition: transform .3s; /* Animation */
	max-height:300px;
}
.zoom:hover img{
  transform: scale(1.1);
}
.zoom:hover a>img{
	-webkit-filter: brightness(1.0)!important;
	filter: brightness(1.0)!important;
}



/* zzz end new */



.float-2-boxes, .float-2-images, .float-350-r, .float-450-r {
	width:auto;
} /* Float these only when the screen is wider */

.float-2-images {
	text-align: center;
}

.float-3-boxes {
	width: auto;
	margin: 0;
	padding: 0;
}



/* Photos and graphics - common across sites */
/* Float only on a larger screen */

.float-photo-right, .float-graphic-right, .float-border-right {
	clear:both;
	text-align:center;
}
.float-photo-left, .float-graphic-left {
	clear:both;
	text-align:center;
}


.centre-photo, .centre-graphic {
	text-align: center;
}
.float-photo-right img, .float-photo-left img, .centre-photo img {
	max-width: 100%;
	max-height: 100%;
	border: 1px solid #CCC;
	padding: 0;
	margin: 2px auto;
	box-sizing: border-box;
}
@media (min-width: 641px) { /* Style for desktop */
.float-photo-right img, .float-photo-left img, .centre-photo img {
		padding: 10px;
		box-shadow:2px 2px 6px #AAA; 
}
}

.float-graphic-right img, .float-graphic-left img, .centre-graphic img {
	max-width: 100%;
	max-height: 100%;
	border: none;
	margin:0;
	padding: 2px;
	box-sizing: border-box;
}
.float-border-right img {
	max-width: 100%;
	max-height: 100%;
	border: 1px solid #000;
	margin: 2px auto;
	box-sizing: border-box;
}
.youtube-outer-wrapper { /* Forces padding to collapse */
	max-width: 640px;
	margin: 10px auto;
}
.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: 640;
	max-height: 360px;
	border: none;
}
/* RH Margin */
#newscontent {
	margin: 0 250px 0 0;
}


.spaced-list li {
	margin-top: 5px;
	margin-bottom: 5px;
}
.whiteback {
	background: #FFF!important;
	margin: 1px!important;
}
.greyshade {
	background: #F8F8F8;
}
.darkgreyshade {
	background: #DDD;
}
/* Definition colours */
th.defn1 {
	background: #ff99ff;
}
td.defn1 {
	text-align: right;
	background: #ffccff;
	width: 25%;
}
th.defn2 {
	background: #ccff99;
}
td.defn2 {
	text-align: right;
	background: #ccffcc;
	width: 25%;
}
th.defn3 {
	background: #ffff99;
}
td.defn3 {
	text-align: right;
	background: #ffffcc;
	width: 25%;
}
th.defn4 {
	background: #ff99cc;
}
td.defn4 {
	text-align: right;
	background: #ffcccc;
	width: 25%;
}
th.defn5 {
	background: #ff9966;
}
td.defn5 {
	text-align: right;
	background: #ffcc99;
	width: 25%;
}
th.defn6 {
	background: #99ffff;
}
td.defn6 {
	text-align: right;
	background: #ccffff;
	width: 25%;
}
#pdf {
	background: url(../../logos/pdf.gif) no-repeat;
	height: 26px;
	padding-left: 30px;
}
#ebook {
	background: url(../../logos/e.png) no-repeat;
	height: 26px;
	padding-left: 30px;
}
/* Table layout */
/* tbody redefines vertical align from table - redefine again at td level */
.c td, .ct td, td.c, td.ct {
	text-align: center;
}
.t td, .ct td, td.t, td.ct {
	vertical-align: top;
}
.l td, td.l {
	text-align: left;
}
.r td, td.r {
	text-align: right;
}
.valign-top, .valign-top td {
	vertical-align: top;
}
.valign-middle {
	vertical-align: middle;
}
.valign-bottom {
	vertical-align: bottom;
}
td.nowrap {
	white-space: nowrap;
}
p.mobile, h1.mobile {
	display: none;
}


/* Programmes */
.programme {
	background: #FFFFF0;
	box-shadow: 2px 2px 6px #AAA;
	text-align: center;
	color: #333;
	border: 3px solid #666;
	overflow: hidden;
	margin: 6px auto;
	padding: 0px 5px;
}
.programme .title, .programme p, .programme p.composer {
	margin: 2px 0;
	padding: 0!important;
	text-align: center;
}
.programme p.composer {
	font-style: italic;
	margin-bottom:12px;
}

.programme .interval, .programme p.interval {
	clear: both;
	margin: 2px 0;
	padding: 0;
	text-align: center;
	font-style: italic;
}
.programme h3, .programme h4 {
	clear: both;
	padding-top: 10px;
	margin-top: 2px;
	margin-bottom: 2px;
}
.programme h3 {
	font-size:14px;
}
.programme h4 {
	color: #666;
	font-size: 14px;
	font-weight: bold;
}

.incipit-container {
	margin: 0;
	padding: 0;
	background: #69E;
	text-align: left;
}
.incipit-container article {
	border-top: 1px solid #FFF;
	border-bottom : 1px solid #FFF;
}

/* Mobile bit */
.incipit-left {
	width: 100%;
	float: none;
	padding:0;
}
.incipit-right {
	margin-left:0;
	padding:0;
	padding-bottom:20px;
	background: #FFF;
}
.incipit-book {
	float: none;
	margin: 0 auto;
	text-align: center;
}


/* Desktop bit */
@media (min-width : 641px) {
.incipit-left {
	width: 120px;
	padding: 2px;
	float: left;
}
.incipit-right {
	margin-left: 125px;
	padding: 2px;
	overflow: hidden;
}
.incipit-book {
	float: left;
	margin-right: 3px;
}
}

/* common bits */
.incipit-left p {
	text-align: center;
	color: #FFF;
	font-weight: bold;
	padding: 3px 0;
	margin: 0;
}
.incipit-right p {
	margin: 0;
	padding: 3px;
}
.incipit-right h2 {
	text-align: left;
	font-size: 15px;
}

.incipit-book img {
	border: 1px solid #666;
	margin: 10px;
	box-shadow: #999 3px 3px 3px;
}

/* End of INCIPIT BIT */

.treble-clef, treble-clef-left {
	background-image:url(../../shop/images/treble-clef.gif);
	background-repeat:no-repeat!important;
	background-position:center!important;
	background-size:contain!important;
	text-align:left!important;
	padding:10px!important;
}
.treble-clef-left {
	background-position:left!important;
}





.bookcase, .bookshelf, .shop-item-banner, .best-seller {
	clear:both;
	text-align: left;
	overflow: auto;
	margin-top: 20px;
	background-color:white;
}

.bookshelf { /* Also acts as wrapper for "accordion" CSS */
	margin-top:10px;
	margin-bottom:10px;
}

.bookcase { 
	margin-top:25px;
	margin-bottom:25px;
}
.bookcase h2 {
	margin-top: 50px;
	font-size:20px;
}

.best-seller {
	text-align: center;
	border: 1px solid red;
	border-radius:5px;
	padding: 2px;
	margin-left:20px;
	margin-right:20px;
  clear:left;
}

.shop-item-banner section {
	clear: left;
	text-align: center;
	overflow: hidden;
	background: #EEE;
}


.bookshelf article {
	overflow: auto;
}

.bookshelf select {
	font-size:16px;
}

.shop-item-banner .float-2-boxes, .bookshelf .float-2-boxes, .bookshelf article>h2 {
	text-align:center;
}


.bookshelf article .float-2-boxes>p { 
	margin: 1px;
	padding: 2px;
}
.bookcase form label {
	color: #444;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
}
.bookcase form input {
	margin-top: 3px;
	vertical-align: middle;
}


.checkout {
	padding-top:4px;
	padding-bottom:4px;
/*	background-color:#1E90FF!important; */
  background: #6699EE!important; /* DSH */
  background-image: linear-gradient(to bottom, #58D, #7AF)!important; /* DSH */
	color:black!important;
	background-image:none!important;
	background: #EEE!important;

}
.checkout h2 {
	margin-top 10px;
	text-align:center!important;
	color:white;
	color:black;
}
/* Shop Accordion */
/* Override the predefined style for the banner and content */
.font-style-override-1 {
	font-family: Verdana, Arial, Helvetica, sans-serif!important;
	font-size:16px!important; /* For bare text, not <p> etc... */
}

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

.disabled-accordion {
	margin-bottom :5px;
}

.accordion.shiny-blue, .disabled-accordion.shiny-blue {
	background-color:#7AE;
  background-image: linear-gradient(to bottom, #69D, #8BF);}



.accordion:after {
	content: '\002B';
	font-weight: bold;
	float: right;
	margin-right: 15px;
	transform: rotate(0deg);
	-webkit-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
}
.accordion-active:after {
	transform: rotate(315deg);
	-webkit-transition: all .4s;
	-o-transition: all .4s;
	transition: all .4s;
}
.accordion-content {
	overflow: hidden;
	max-height: 0;  /* Hide from view */
	transition: max-height 0.4s ease-out;
}
.accordion-content.open {
		max-height: none; /* Show disabled accordion content*/
}


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

.accordion-panel { /* Wrap a set of accordions that aren't in the shop */
	border-top: 1px solid #999;
	margin-top:0;
}
.accordion-wrapper { /* Wrap a single accordion that's not in the shop */
	border-bottom: 1px solid #999;
	margin-bottom:0;
}


.bookshelf .accordion, .bookshelf .disabled-accordion { /* Override */
	color:black;
	background-color:white;
}

.bookshelf {
	margin-bottom:5px;
	border:1px solid #7AF;
}



.paypal-background {
	background-image:url(../../shop/paypal/horizontal_solution_PP_pale.jpg);
	background-position:center;
}


.panel {
	text-align: left;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 20px 4px 20px 2px;
	padding: 1px 0;
	background: #F0F0F0;
	border: 1px solid #47C; /* Default is colour 0 */
	box-sizing: border-box;
	box-shadow: #CCC 3px 3px 3px;
	border-radius: 8px;
	border-radius: 0;
}

.panel header h2, .panel h2 {
	text-align: center;
	padding: 14px 3px;
	margin: 0;
	color: #333;
}
.panel.colour-0 {
	border-color:#444;
}
.panel.colour-0 article h2, .panel.colour-0 article h2 a, .panel.colour-0 article h2 a:visited {
	color:#47C;
	text-decoration:none;
}
.panel.colour-1 {
	border-color:#444;
}
.panel.colour-1 article h2, .panel.colour-1 article h2 a, .panel.colour-1 article h2 a:visited {
	color:#47C;
	text-decoration:none;
}
.panel.colour-2 {
	border-color:#C00;
}
.panel.colour-2 article h2, .panel.colour-2 article h2 a, .panel.colour-2 article h2 a:visited {
	color:#C00;
	text-decoration:none;
}
.panel.colour-3 {
	border-color:#093;
}
.panel.colour-3 article h2, .panel.colour-3 article h2 a, .panel.colour-3 article h2 a:visited {
	color:#093;
	text-decoration:none;
}
.panel.colour-4 {
	border-color:#039;
}
.panel.colour-4 article h2, .panel.colour-4 article h2 a, .panel.colour-4 article h2 a:visited {
	color:#039;
	text-decoration:none;
}
.panel.colour-5 {
	border-color:#F60;
}
.panel.colour-5 article h2, .panel.colour-5 article h2 a, .panel.colour-5 article h2 a:visited {
	color:#F60;
	text-decoration:none;
}
.panel.colour-6 {
	border-color:#C09;
}
.panel.colour-6 article h2, .panel.colour-6 article h2 a, .panel.colour-6 article h2 a:visited {
	color:#C09;
	text-decoration:none;
}

.panel.colour-music-news {
	border-color:#444;
}
.panel.colour-music-news header h2, .panel.colour-music-news article h2, .panel.colour-music-news article h2 a, .panel.colour-music-news article h2 a:visited {
	color:#47C;
	text-decoration:none;
}
.panel.colour-music-news p, .panel.colour-music-news ul
{
	margin-top:20px;
}
.panel.colour-music-news p:first-of-type
{
	margin-top:2px;
}

.panel h2 a:hover {
	text-decoration:underline;
}

.panel h3 {
	margin: 0;
	padding: 0;
}
.panel article {
	background: #FFF;
	padding: 2px 4px;
	margin: 0;
	overflow: hidden;
}
.panel article+article {
	margin-top: 40px;
}
.panel article p {
	padding: 2px;
	margin: 2px;
}
.panel article ul {
	margin: 2px 2px 2px 10px;
}

.panel article>img {
	margin-left: auto;
	margin-right: auto;
	width:auto;
	max-width:100%;
	height: auto;
}

.panel li {
	margin-top:5px;
	margin-bottom:5px;
}

/* COLOUR BOXES */
.colourbox {
	background: white;
	box-sizing: border-box;
	box-shadow: 0 0 16px #CCC;
	box-shadow: 0 0 8px #888;
/* box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; */
	overflow: hidden;
	width: auto;
	height:auto;
	margin: 20px auto;
	
}
@media (max-width : 640px) {
.colourbox {
	max-width:400px;
}
}




.colourbox-full-width {
	width:auto!important;
	max-width:100%!important;
}

.colourbox header h2 {
	text-align: center;
	margin: 0!important;
	padding: 3px;
	text-decoration:none;
	color:white;
	background-color: #47C;
	font-size:18px;
}

.colourbox .front h2 {
	margin:0!important;
	padding: 4px;
}


.colourbox h3 {
	margin: 0;
	padding: 0;
}
.colourbox article {
	background: #FFF;
	padding: 0px 2px;
	margin: 2px 2px;
	overflow: hidden;
}
.colourbox article p {
	padding: 0 2px;
	margin: 2px;
}
.colourbox img {
	width:100%; 
	max-width: 400px;
	height: auto;
	display:block;
}



.colourbox p {
	margin : 2px;
}

.colourbox.colour-1 {
	border: 1px solid #47C;
	border:none;
}
.colourbox.colour-1 header h2 {
	background-color: #47C;
}

.colourbox.colour-2 {
	border: 1px solid #C00;
}
.colourbox.colour-2 header h2 {
	background-color: #C00;
}
.colourbox.colour-3 {
	border: 1px solid #093;
}
.colourbox.colour-3 header h2 {
	background-color: #093;
}

.colourbox.colour-4 {
	border: 1px solid #039;
}
.colourbox.colour-4 header h2 {
	background-color: #039;
}

.colourbox.colour-5 {
	border: 1px solid #F60;
}
.colourbox.colour-5 header h2 {
	background-color: #F60;
}

.colourbox.colour-6 {
	border: 1px solid #C09;
}
.colourbox.colour-6 header h2 {
	background-color: #C09;
}

.colourbox .accessible {
	font-size:17px;
}


.spacer {
	padding: 0;
}

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

/* FORMS */

.form-container {
	width: 100%;
	max-width: 750px;
	overflow: hidden; /* Extend colour */
	background-color: #DEF;
	border: 1px solid #999;
	margin: 0 auto;
	padding: 1px 0;
	box-sizing: border-box;
}
.form-container .form-left, .form-container .form-right {
	text-align:center;
	width:auto;
}

.form-container .form-line { /* Wrap round question and answer */
	overflow: hidden;
	margin-bottom: 5px;
	padding-bottom: 5px;
	border-bottom: 1px solid #999;
}
.form-container .form-line.hpot {
	display:none;
}

.form-container .form-left p { /* Move left & right apart but don't upset percentages */
	margin-right: 5px;
	margin-top: 0;
	margin-bottom: 0;
}


.link-box {
	border: 1px solid #69F;
	padding: 10px;
}

.fusion {
	font: 28px "Times New Roman", Times, serif!important;
	font-style: italic!important;
	color: #69f!important;
	letter-spacing: 0.1em!important;
}

.fusion-script {
	font: 38px "Times New Roman", Times, serif;
	font-style: italic;
	color: #69f;
	letter-spacing: 0.1em;
	padding-left:5px;
}

@media (max-width: 640px) {
.desktop, .no-iphone {
	display: none;
}
} /* Else display whatever it was in its native format */

@media (min-width: 641px) {
.iphone {
	display: none;
}
} /* Else display whatever it was in its native format */


.news-back {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center right;
	height:300px;
}
@media (min-width: 641px) and (max-width: 1024px) {
.news-back {
	height:450px;
}
}
@media (min-width: 1025px) {
.news-back {
	height:600px;
}
}

	

@media (max-width: 640px) {
.jan {
	background-image: url(../../news/seasons/01-jan-640.jpg);
	background-size:contain;
}
.feb {
	background-image: url(../../news/seasons/02-feb-640.jpg);
	background-size:contain;
}
.mar {
	background-image: url(../../news/seasons/03-mar-640.jpg);
	background-size:contain;
}
.apr {
	background-image: url(../../news/seasons/04-apr-640.jpg);
	background-size:contain;
}
.may {
	background-image: url(../../news/seasons/05-may-640.jpg);
	background-size:contain;
}
.jun {
	background-image: url(../../news/seasons/06-jun-640.jpg);
	background-size:contain;
}
.jul {
	background-image: url(../../news/seasons/07-jul-640.jpg);
	background-size:contain;
}
.aug {
	background-image: url(../../news/seasons/08-aug-640.jpg);
	background-size:contain;
}
.sep {
	background-image: url(../../news/seasons/09-sep-640.jpg);
	background-size:contain;
}
.oct {
	background-image: url(../../news/seasons/10-oct-640.jpg);
	background-size:contain;
}
.nov {
	background-image: url(../../news/seasons/11-nov-640.jpg);
	background-size:contain;
}
.dec {
	background-image: url(../../news/seasons/12-dec-640.jpg);
	background-size:contain;
}
.jan-2 {
	background-image: url(../../news/seasons-2/01-jan-640.jpg);
	background-size:contain;
}
.feb-2 {
	background-image: url(../../news/seasons-2/02-feb-640.jpg);
	background-size:contain;
}
.mar-2 {
	background-image: url(../../news/seasons-2/03-mar-640.jpg);
	background-size:contain;
}
.apr-2 {
	background-image: url(../../news/seasons-2/04-apr-640.jpg);
	background-size:contain;
}
.may-2 {
	background-image: url(../../news/seasons-2/05-may-640.jpg);
	background-size:contain;
}
.jun-2 {
	background-image: url(../../news/seasons-2/06-jun-640.jpg);
	background-size:contain;
}
.jul-2 {
	background-image: url(../../news/seasons-2/07-jul-640.jpg);
	background-size:contain;
}
.aug-2 {
	background-image: url(../../news/seasons-2/08-aug-640.jpg);
	background-size:contain;
}
.sep-2 {
	background-image: url(../../news/seasons-2/09-sep-640.jpg);
	background-size:contain;
}
.oct-2 {
	background-image: url(../../news/seasons-2/10-oct-640.jpg);
	background-size:contain;
}
.nov-2 {
	background-image: url(../../news/seasons-2/11-nov-640.jpg);
	background-size:contain;
}
.dec-2 {
	background-image: url(../../news/seasons-2/12-dec-640.jpg);
	background-size:contain;
}
}
@media (min-width: 641px) and (max-width: 1024px) {
.jan{
	background-image: url(../../news/seasons/01-jan-1024.jpg);
	margin-top:50px;
}
.feb {
	background-image: url(../../news/seasons/02-feb-1024.jpg);
	margin-top:50px;
}
.mar {
	background-image: url(../../news/seasons/03-mar-1024.jpg);
	margin-top:50px;
}
.apr {
	background-image: url(../../news/seasons/04-apr-1024.jpg);
	margin-top:50px;
}
.may {
	background-image: url(../../news/seasons/05-may-1024.jpg);
	margin-top:50px;
}
.jun {
	background-image: url(../../news/seasons/06-jun-1024.jpg);
	margin-top:50px;
}
.jul {
	background-image: url(../../news/seasons/07-jul-1024.jpg);
	margin-top:50px;
}
.aug {
	background-image: url(../../news/seasons/08-aug-1024.jpg);
	margin-top:50px;
}
.sep {
	background-image: url(../../news/seasons/09-sep-1024.jpg);
	margin-top:50px;
}
.oct {
	background-image: url(../../news/seasons/10-oct-1024.jpg);
	margin-top:50px;
}
.nov {
	background-image: url(../../news/seasons/11-nov-1024.jpg);
	margin-top:50px;
}
.dec {
	background-image: url(../../news/seasons/12-dec-1024.jpg);
	margin-top:50px;
}
.jan-2{
	background-image: url(../../news/seasons-2/01-jan-1024.jpg);
	margin-top:50px;
}
.feb-2 {
	background-image: url(../../news/seasons-2/02-feb-1024.jpg);
	margin-top:50px;
}
.mar-2 {
	background-image: url(../../news/seasons-2/03-mar-1024.jpg);
	margin-top:50px;
}
.apr-2 {
	background-image: url(../../news/seasons-2/04-apr-1024.jpg);
	margin-top:50px;
}
.may-2 {
	background-image: url(../../news/seasons-2/05-may-1024.jpg);
	margin-top:50px;
}
.jun-2 {
	background-image: url(../../news/seasons-2/06-jun-1024.jpg);
	margin-top:50px;
}
.jul-2 {
	background-image: url(../../news/seasons-2/07-jul-1024.jpg);
	margin-top:50px;
}
.aug-2 {
	background-image: url(../../news/seasons-2/08-aug-1024.jpg);
	margin-top:50px;
}
.sep-2 {
	background-image: url(../../news/seasons-2/09-sep-1024.jpg);
	margin-top:50px;
}
.oct-2 {
	background-image: url(../../news/seasons-2/10-oct-1024.jpg);
	margin-top:50px;
}
.nov-2 {
	background-image: url(../../news/seasons-2/11-nov-1024.jpg);
	margin-top:50px;
}
.dec-2 {
	background-image: url(../../news/seasons-2/12-dec-1024.jpg);
	margin-top:50px;
}
}
@media (min-width: 1025px) {
.jan {
	background-image: url(../../news/seasons/01-jan-2048.jpg);
	margin-top:50px;
}
.feb {
	background-image: url(../../news/seasons/02-feb-2048.jpg);
	margin-top:50px;
}
.mar {
	background-image: url(../../news/seasons/03-mar-2048.jpg);
	margin-top:50px;
}
.apr {
	background-image: url(../../news/seasons/04-apr-2048.jpg);
	margin-top:50px;
}
.may {
	background-image: url(../../news/seasons/05-may-2048.jpg);
	margin-top:50px;
}
.jun {
	background-image: url(../../news/seasons/06-jun-2048.jpg);
	margin-top:50px;
}
.jul {
	background-image: url(../../news/seasons/07-jul-2048.jpg);
	margin-top:50px;
}
.aug {
	background-image: url(../../news/seasons/08-aug-2048.jpg);
	margin-top:50px;
}
.sep {
	background-image: url(../../news/seasons/09-sep-2048.jpg);
	margin-top:50px;
}
.oct {
	background-image: url(../../news/seasons/10-oct-2048.jpg);
	margin-top:50px;
}
.nov {
	background-image: url(../../news/seasons/11-nov-2048.jpg);
	margin-top:50px;
}
.dec {
	background-image: url(../../news/seasons/12-dec-2048.jpg);
	margin-top:50px;
}
.jan-2 {
	background-image: url(../../news/seasons-2/01-jan-2048.jpg);
	margin-top:50px;
}
.feb-2 {
	background-image: url(../../news/seasons-2/02-feb-2048.jpg);
	margin-top:50px;
}
.mar-2 {
	background-image: url(../../news/seasons-2/03-mar-2048.jpg);
	margin-top:50px;
}
.apr-2 {
	background-image: url(../../news/seasons-2/04-apr-2048.jpg);
	margin-top:50px;
}
.may-2 {
	background-image: url(../../news/seasons-2/05-may-2048.jpg);
	margin-top:50px;
}
.jun-2 {
	background-image: url(../../news/seasons-2/06-jun-2048.jpg);
	margin-top:50px;
}
.jul-2 {
	background-image: url(../../news/seasons-2/07-jul-2048.jpg);
	margin-top:50px;
}
.aug-2 {
	background-image: url(../../news/seasons-2/08-aug-2048.jpg);
	margin-top:50px;
}
.sep-2 {
	background-image: url(../../news/seasons-2/09-sep-2048.jpg);
	margin-top:50px;
}
.oct-2 {
	background-image: url(../../news/seasons-2/10-oct-2048.jpg);
	margin-top:50px;
}
.nov-2 {
	background-image: url(../../news/seasons-2/11-nov-2048.jpg);
	margin-top:50px;
}
.dec-2 {
	background-image: url(../../news/seasons-2/12-dec-2048.jpg);
	margin-top:50px;
}
}


.news-back>article {
	font-size: 60px;
  margin-top: 120px;
  text-align: center;
  font-weight: 600;
  color: #fff;
}

@media (min-width: 641px) and (max-width: 1024px) {
.news-back>article {
	font-size: 80px;
	margin-top:185px;
}
}
@media (min-width: 1025px) {
.news-back>article {
	font-size: 100px;
	margin-top:220px;
}
}


.bookshelf .accordion-content {
	background-color:white;
	padding:0 5px;
}
.bookshelf .accordion-content.open {
	padding-bottom: 10px;
}

.bookshelf .accordion-content div { /* full width unsized box & latest downloads */
	padding: 2px;
	margin: 0;
}
.bookshelf .accordion-content article, .music-item {
	border: 1px solid #CCC;
	border-radius:8px;
	padding: 2px;
	margin: 2px 0;
	width: 100%;
	display: inline-block;
	vertical-align: top;
	overflow-y: auto!important; /* Needs important to work */
	text-align: center;
	box-sizing: border-box;
}
.music-item {
		border: 1px solid #666; 
		background:#F8F8F8;
}
.music-item article {
	background-color:transparent;
}

@media (min-width : 641px ) {
.bookshelf .accordion-content article, .music-item {
	width:333px;
}
}

.news-of-music-item {
	width: auto;
	display: inline-block;
	padding: 2px;
	margin: 5px 0;
	overflow-y: auto!important; /* Needs important to work */
	box-sizing: border-box;
	width:auto;

}
@media (min-width : 641px ) { /* Emulate a float left of variable width 
but getting the boxes to stack the opposite way to a float in the flow*/
.news-of-music-item {
	max-width:280px;
}
}
@media (min-width : 770px ) {
.news-of-music-item {
	max-width:409px;
}
}
@media (min-width : 900px ) {
.news-of-music-item {
	max-width:539px;
}
}
@media (min-width : 1024px ) {
.news-of-music-item {
	max-width:666px;
}
}



.bookshelf .accordion-content article img {
	margin-left:auto;
	margin-right:auto;
}


.bookshelf .accordion-content article img:first-child { /* No border on Paypal tracking Gif which follows main image */
	max-width: 100%;
	height: auto;
	display:block;
	margin:8px auto;
	padding:0;
	border:1px #CCC solid;
	background-color:#F8F8F8; /* Override Shop img div */
	box-shadow:1px 5px 10px #AAA;
	box-sizing:border-box;
}

.bookshelf .accordion-content article h2, .music-item h2 {
	font-weight:normal;
	float:none;
	text-align:center!important;
	width:100%;
	font-size:15px;
	color:black!important;
	font-family: Arial, Helvetica, sans-serif;
}
.bookshelf .accordion-content article p {
	padding:0!important;
	font-size:14px;
}


/* Big tap target */
.tap, .bookshelf .accordion-content article>a, .music-item article>a { /* Article stops anchor coloration */
/* music item includes shop img div so make article>a */
	white-space: nowrap;
	color:white!important;
	font-size:16px;
	background-color:#999;/* del */
	background-color:#FDBF2E;
	background: #69E; /* DSH */
  background-image: linear-gradient(to bottom, #58D, #7AF); /* DSH */
	padding:5px;
	padding-left:20px;
	padding-right:20px;
	border-radius:4px;
	margin:1px;
	margin-bottom:4px;
	display:inline-block;
}
.tap {
	font-size:17px;
}

.bookshelf .accordion-content article a.unavailable, .music-item article a.unavailable {
	background: #AAA!important; /* DSH */
  background-image: linear-gradient(to bottom, #999, #BBB)!important; /* DSH */
}


/**/

.music-summary { /* Extra qualifier to remove buy button */
	background: white!important;
	border:none!important;
	border-radius:0!important;
}
@media (min-width : 641px ) {
.music-summary { /* Extra qualifier to remove buy button */
	width:220px!important;
}
}

.music-summary article>p, .music-summary article>h2, .music-summary article>a { /* Just present summary */
	display:none!important;
}

/* Added but not incorporated because of lack of ALT text */
.shop-g1 {
	height:277px;
	width:213px;
	margin:8px auto!important;
	background-image:url(../../shop/images/smp-images/g1.jpg);
	background-repeat: no-repeat;
  background-position: center; 

	border:1px #999 solid;
	box-shadow:1px 5px 10px #666;
	box-sizing:border-box;
}
.shop-g1 p {
	text-align: center;
	width: 100%;
	font-style: normal!important;
	font-weight: 900!important;
	font-family: "Times New Roman", Times, serif!important;
	font-size: 19px!important;
	font-stretch: condensed!important;
}
.shop-g1 .small-title {
	font-weight:200;
	font-size:13px;
	font-style:italic;
}
/* End "Added but not incorporated" */

.copyright-issue {
	display: none!important;
}

.shop-pdf {
	position: relative;
  text-align: center;
}
/*.shop-pdf a { 
	border:none!important;
	background:none!important;
	border-width:0!important;
	border-radius
	margin:0!important;
	padding:0!important;
}*/
.shop-pdf img {
	max-width: 100%;
	height: auto;
	display:block;
	margin:8px auto;
	padding:0;
	border:1px black solid;
	box-shadow:1px 5px 10px #666!important;
	box-sizing:border-box;
}


.shop-pdf p {
	position: absolute;
	top: 20px;
	left: 0;
	padding:1px!important;
	text-align: center;
	width: 100%;
	font-style: normal!important;
	font-weight: 900!important;
	font-family:Verdana, Arial, sans-serif!important;
	font-size: 14px!important;
	font-stretch: semi-condensed!important;
}
.shop-pdf .small-title {
	font-weight:200;
	font-size:13px;
	font-style:italic;
}
.shop-pdf .new {
	position: absolute;
	top: 220px;
	left: 0;
	text-align: center;
	width: 244px;
	margin-left:auto;
	margin-right:auto;
	font-style: normal;
	font-weight: 900;
	font-family: "Times New Roman", Times, serif;
	font-size: 19px;
	font-stretch: semi-condensed;
	background-color:red;
	color:white;
}

.shop-pdf a {
	background-color:transparent!important;
}


article.music-list p {
	margin-bottom:20px;
}


.index-by-title {
	overflow:hidden; 
	padding-left:0!important; /* Override other selectors */
	padding-right:0!important;
}

.index-by-title div {
	overflow:hidden; /* Because of floats */
}
.index-by-title div:nth-of-type(odd) { 
  background: #E8F2FF; 
}
.index-by-title:nth-of-type(even) { 
  background: white; 
}
.index-by-title nav.button { 
  background: #f8f8f8; 
}

.index-by-title div p, .index-by-title div h2 {
	text-align: left;
	margin: 3px 0px; /* Compress the entries */
	font-size: 14px;
	font-weight:normal;
}
}
.index-by-title div p:last-of-type {
	font-style:italic;
}



/* Mobile friendly links */
a.accessible { 
	display:block;
	padding:2px 0;
	margin:5px 0;
}
@media (max-width: 640px) { /* Style a button for mobile only */
a.accessible { 							/* Hard to undo in desktop CSS */
	color:white;
	background-color:#999;
	background-image:linear-gradient(#888,#aaa);
	padding:10px;
	margin:5px;
	margin-bottom:10px;
	text-align:center;
	text-shadow: 0 -1px #333;
	border-radius:3px;
}
}
a.accessible:after {
	content:" tap here";
}
/* Mobile friendly links will get undone by media query*/
@media (min-width: 641px) {
a.accessible {
/*	width:max-content;
	color:white;
	background-color:#999;
	background-image:linear-gradient(#888,#aaa);
	padding:10px;
	margin:5px;
	margin-bottom:10px;
	text-align:center;
	text-shadow: 0 -1px #333;
	border-radius:3px; */

}
a.accessible:after {
	content:" click here";
}
}




/* Suggest landscape orientation */

@media (max-width:640px) {
p.mobile { 
	display:block;
	color:red;
}
}






/* 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.7);
	border:1px solid #69C;
	color:#69C;
	font-weight:bold;
  cursor: pointer;
  padding: 12px;
  border-radius: 4px;
}

#TopButton:hover {
  background-color: #69C;
	color:white;
}

#help {
  background: #69E;;
  background-image: linear-gradient(to bottom, #58D, #7AF); /* DSH */
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  color: white;
  display: inline-block;
  font-weight: bold;
	font-style:normal;
  line-height: 20px;
  margin-right: 5px;
  text-align: center;
  width: 20px;
}
#help:hover {
	cursor:pointer;
}

.copyright {
  background: #69E;
  background-image: linear-gradient(to bottom, #58D, #7AF);
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  color: white;
  display: inline-block;
  font-weight: bold;
	font-style:normal;
  line-height: 20px;
  margin-right: 5px;
  text-align: center;
  width: 20px;
}
.copyright:hover {
	cursor:pointer;
}



div.social-media {
	overflow:hidden;
}
.social-media aside {
	width: 100px;
	float: left;
	margin: 10px;
}
.social-media aside img {
	width:auto;
	height:auto;
}
.social-media  section{
	padding-top:30px;
}

.margin { /* Horizontal space only on desktop */
	margin-top: 30px;
	margin-bottom: 30px;
}