@charset "UTF-8";

/* CSS for desktop screens - add decoration here and there */


/* MAIN CONTAINER HEADER */
/* ===================== */
#container>header h2 {
	margin-bottom:8px;
}
#container>header p {
	float: right;
}

#container>footer aside { /* Copyright */
	clear: none;
	float: left;
	text-align: center;
	width: 20%;
	padding: 5px 0 0 5px;
}
#container>footer section {
	clear: none;
	float: right;
	width: 75%;
}

#container>footer a>img:hover {
	-webkit-filter: brightness(1.0);
	filter: brightness(1.0);
}



/* RH Margin */
section.split {
	float: left;
	padding: 0 2px;
}
aside.split {
	float: right;
	padding: 0 2px;
}
section.split img {
	margin-left: auto;
	margin-right: auto;
	max-width: 750px;
	height: auto;
}
aside.split img {
	margin-left: auto;
	margin-right: auto;
	max-width: 250px;
	height: auto;
}

@media (max-width:1023px) {
section.split {
	width: 58%;
}
aside.split {
	min-width: 250px;
	width: 30%; /* Collapses at 640px */
}
}

@media (min-width:1024px) {
section.split {
	width: 750px;
}
aside.split {
	width: 250px;
}
}



.panel h2 {
	text-align:left;
}
.panel header h2 {
	text-align:left;
}

a>img:hover {
	-webkit-filter: brightness(0.9);
	filter: brightness(0.9);
}
.shop-pdf a>img {
	transition : 0.5s;
}
.shop-pdf a>img:hover {
	-webkit-filter: brightness(1.0)!important;
	filter: brightness(1.0)!important;
	box-shadow:1px 10px 20px 5px #AAA!important;
}


.accordion:hover {
	-webkit-filter: brightness(0.9);
	filter: brightness(0.9);
	
}

/* Make inline boxes all the same height */
.bookcase .accordion-content article { 
	height:470px;
}
.bookcase.tall-books .accordion-content article { /* Make taller box for printed books */
	height:510px;
}






.definition p:nth-of-type(odd) {
	text-align: right;
	width: 25%;
	float: left;
}
 .definition p:nth-of-type(even)  {
	text-align: left;
	width:74%;
	float: right;
}

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

/* Float some objects now the screen is wider */

.float-350-r {
	float: right;
	width: 350px;
	text-align: center;
	overflow: hidden;
}
.float-450-r {
	float: right;
	width: 450px;
	text-align: center;
	overflow: hidden;
}

.float-2-boxes, .float-2-images {
	clear:none;
	float: left;
	margin: 0;
	padding: 0;
	width: 49%;
}

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


.float-photo-right, .float-graphic-right, .float-border-right {
	clear:none;
	float: right;
}
.float-photo-left, .float-graphic-left {
	clear:none;
	float: left;
}

.float-3-boxes {
	clear: none;
	float: left;
	width: 32%;
}

.colourbox {
	max-width:333px; /* Maintain shape across desktop sizes */
/*  height:400px;*/
}

.colour-container {
	padding:45px;
	padding-bottom:0;
}
.colour-container h2 {
	margin-top:30px;
}
.colour-container footer {
	width:350px;
}


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




/* Concert programmes */
.programme {
	width: 70%;
	padding-left: 15px;
	padding-right: 15px;
}

.programme .title, .programme p {
	clear: both;
	width: 55%;
	text-align: left;
	float: left;
}
.programme p.interval {
	width:100%;
}
.programme p.composer {
	clear: none;
	width: 38%;
	text-align: right;
	float: left;
	margin-bottom:2px;
}

/* Contact form */
.form-container .form-left {
	text-align: right;
	float: left;
	width: 49%;
}
.form-container .form-right {
	text-align: left;
	float: left;
	width: 49%;
}

.form-container .form-line {
	border-bottom: none;
}



.index-by-title div p:first-of-type, .index-by-title div h2:first-of-type {
	text-align:right;
	float:left;
	width:49%;
}
.index-by-title div p:last-of-type {
	text-align:left;
	float:right;
	width:49%;
}


.gap {
	padding-top:30px!important;
	padding-bottom:30px!important;
}

.spacer {
	padding: 0 2px;
}

.desktop { /* so Dreamweaver can see it */
}


.margin {
	margin: 15px;
}