/*

filename: catalogue.css
  author: bpc
 created: 06may2017
 updated: 23feb2018
 
*/

@import url("reset.css");


/* make sure that padding and border are included in the total
    width and height of all elements */
* {
	box-sizing: border-box;
}


/* mirco clearfix hack START */
/* see http://nicolasgallagher.com/micro-clearfix-hack/ */
.row:before, .row:after {
	content: " ";
	display: table;
}
.row:after {
	clear: both;
}
.row {
	zoom: 1;
}
/* mirco clearfix hack END */


/* define column widths START */
[class*="col-"] {
	  float: left;
	 margin: 0 0 0.25em 0;
}

/* for mobile phones: */
@media only screen and (min-width: 50px) {
	/* for a 36 column grid-view responsive layout */


	.col-mob1-0  {display: none}
	.col-mob1-1  {width: 2.77%}
	.col-mob1-2  {width: 5.55%}
	.col-mob1-3  {width: 8.33%}
	.col-mob1-4  {width: 11.11%}
	.col-mob1-5  {width: 13.88%}
	.col-mob1-6  {width: 16.66%}
	.col-mob1-7  {width: 19.44%}
	.col-mob1-8  {width: 22.22%}
	.col-mob1-9  {width: 25%}
	.col-mob1-10 {width: 27.77%}
	.col-mob1-11 {width: 30.55%}
	.col-mob1-12 {width: 33.33%}
	.col-mob1-13 {width: 36.11%}
	.col-mob1-14 {width: 38.88%}
	.col-mob1-15 {width: 41.66%}
	.col-mob1-16 {width: 44.44%}
	.col-mob1-17 {width: 47.22%}
	.col-mob1-18 {width: 50%}
	.col-mob1-19 {width: 52.77%}
	.col-mob1-20 {width: 55.55%}
	.col-mob1-21 {width: 58.33%}
	.col-mob1-22 {width: 61.11%}
	.col-mob1-23 {width: 63.88%}
	.col-mob1-24 {width: 66.66%}
	.col-mob1-25 {width: 69.44%}
	.col-mob1-26 {width: 72.22%}
	.col-mob1-27 {width: 75%}
	.col-mob1-28 {width: 77.77%}
	.col-mob1-29 {width: 80.55%}
	.col-mob1-30 {width: 83.33%}
	.col-mob1-31 {width: 86.11%}
	.col-mob1-32 {width: 88.88%}
	.col-mob1-33 {width: 91.66%}
	.col-mob1-34 {width: 94.44%}
	.col-mob1-34 {width: 97.22%}
	.col-mob1-36 {width: 100%;}
	
	.col-mob1-98 {width: 100%; display: inline-block;}	
	.col-mob1-99 {display: none;)
}

/* for mobile phones (landscape): */
@media only screen and (min-width: 380px) {
	/* for a 36 column grid-view responsive layout */
	.tile {border-left: #11145b solid 0.25em;}

	.col-mob2-0  {display: none}
	.col-mob2-1  {width: 2.77%; display: block;}
	.col-mob2-2  {width: 5.55%; display: block;}
	.col-mob2-3  {width: 8.33%; display: block;}
	.col-mob2-4  {width: 11.11%; display: block;}
	.col-mob2-5  {width: 13.88%; display: block;}
	.col-mob2-6  {width: 16.66%; display: block;}
	.col-mob2-7  {width: 19.44%; display: block;}
	.col-mob2-8  {width: 22.22%; display: block;}
	.col-mob2-9  {width: 25%; display: block;}
	.col-mob2-10 {width: 27.77%; display: block;}
	.col-mob2-11 {width: 30.55%; display: block;}
	.col-mob2-12 {width: 33.33%; display: block;}
	.col-mob2-13 {width: 36.11%; display: block;}
	.col-mob2-14 {width: 38.88%; display: block;}
	.col-mob2-15 {width: 41.66%; display: block;}
	.col-mob2-16 {width: 44.44%; display: block;}
	.col-mob2-17 {width: 47.22%; display: block;}
	.col-mob2-18 {width: 50%; display: block;}
	.col-mob2-19 {width: 52.77%; display: block;}
	.col-mob2-20 {width: 55.55%; display: block;}
	.col-mob2-21 {width: 58.33%; display: block;}
	.col-mob2-22 {width: 61.11%; display: block;}
	.col-mob2-23 {width: 63.88%; display: block;}
	.col-mob2-24 {width: 66.66%; display: block;}
	.col-mob2-25 {width: 69.44%; display: block;}
	.col-mob2-26 {width: 72.22%; display: block;}
	.col-mob2-27 {width: 75%; display: block;}
	.col-mob2-28 {width: 77.77%; display: block;}
	.col-mob2-29 {width: 80.55%; display: block;}
	.col-mob2-30 {width: 83.33%; display: block;}
	.col-mob2-31 {width: 86.11%; display: block;}
	.col-mob2-32 {width: 88.88%; display: block;}
	.col-mob2-33 {width: 91.66%; display: block;}
	.col-mob2-34 {width: 94.44%; display: block;}
	.col-mob2-34 {width: 97.22%; display: block;}
	.col-mob2-36 {width: 100%; display: block;}
	
	.col-mob2-98 {width: 100%; display: block;}	
	.col-mob2-99 {display:none}
}

/* for tablets: */
@media only screen and (min-width: 650px) {
	/* for a 36 column grid-view responsive layout */
	.col-tab3-0  {display: none}
	.col-tab3-1  {width: 2.77%; display: block;}
	.col-tab3-2  {width: 5.55%; display: block;}
	.col-tab3-3  {width: 8.33%; display: block;}
	.col-tab3-4  {width: 11.11%; display: block;}
	.col-tab3-5  {width: 13.88%; display: block;}
	.col-tab3-6  {width: 16.66%; display: block;}
	.col-tab3-7  {width: 19.44%; display: block;}
	.col-tab3-8  {width: 22.22%; display: block;}
	.col-tab3-9  {width: 25%; display: block;}
	.col-tab3-10 {width: 27.77%; display: block;}
	.col-tab3-11 {width: 30.55%; display: block;}
	.col-tab3-12 {width: 33.33%; display: block;}
	.col-tab3-13 {width: 36.11%; display: block;}
	.col-tab3-14 {width: 38.88%; display: block;}
	.col-tab3-15 {width: 41.66%; display: block;}
	.col-tab3-16 {width: 44.44%; display: block;}
	.col-tab3-17 {width: 47.22%; display: block;}
	.col-tab3-18 {width: 50%; display: block;}
	.col-tab3-19 {width: 52.77%; display: block;}
	.col-tab3-20 {width: 55.55%; display: block;}
	.col-tab3-21 {width: 58.33%; display: block;}
	.col-tab3-22 {width: 61.11%; display: block;}
	.col-tab3-23 {width: 63.88%; display: block;}
	.col-tab3-24 {width: 66.66%; display: block;}
	.col-tab3-25 {width: 69.44%; display: block;}
	.col-tab3-26 {width: 72.22%; display: block;}
	.col-tab3-27 {width: 75%; display: block;}
	.col-tab3-28 {width: 77.77%; display: block;}
	.col-tab3-29 {width: 80.55%; display: block;}
	.col-tab3-30 {width: 83.33%; display: block;}
	.col-tab3-31 {width: 86.11%; display: block;}
	.col-tab3-32 {width: 88.88%; display: block;}
	.col-tab3-33 {width: 91.66%; display: block;}
	.col-tab3-34 {width: 94.44%; display: block;}
	.col-tab3-34 {width: 97.22%; display: block;}
	.col-tab3-36 {width: 100%; display: block;}
	
	.col-tab3-98 {display: none;}
	.col-tab3-99 {width: 50%; display: block;}
}

/* for desktop: */
@media only screen and (min-width: 900px) {
	/* for a 36 column grid-view responsive layout */
	.col-desk4-0  {display: none}
	.col-desk4-1  {width: 2.77%; display: block;}
	.col-desk4-2  {width: 5.55%; display: block;}
	.col-desk4-3  {width: 8.33%; display: block;}
	.col-desk4-4  {width: 11.11%; display: block;}
	.col-desk4-5  {width: 13.88%; display: block;}
	.col-desk4-6  {width: 16.66%; display: block;}
	.col-desk4-7  {width: 19.44%; display: block;}
	.col-desk4-8  {width: 22.22%; display: block;}
	.col-desk4-9  {width: 25%; display: block;}
	.col-desk4-10 {width: 27.77%; display: block;}
	.col-desk4-11 {width: 30.55%; display: block;}
	.col-desk4-12 {width: 33.33%; display: block;}
	.col-desk4-13 {width: 36.11%; display: block;}
	.col-desk4-14 {width: 38.88%; display: block;}
	.col-desk4-15 {width: 41.66%; display: block;}
	.col-desk4-16 {width: 44.44%; display: block;}
	.col-desk4-17 {width: 47.22%; display: block;}
	.col-desk4-18 {width: 50%; display: block;}
	.col-desk4-19 {width: 52.77%; display: block;}
	.col-desk4-20 {width: 55.55%; display: block;}
	.col-desk4-21 {width: 58.33%; display: block;}
	.col-desk4-22 {width: 61.11%; display: block;}
	.col-desk4-23 {width: 63.88%; display: block;}
	.col-desk4-24 {width: 66.66%; display: block;}
	.col-desk4-25 {width: 69.44%; display: block;}
	.col-desk4-26 {width: 72.22%; display: block;}
	.col-desk4-27 {width: 75%; display: block;}
	.col-desk4-28 {width: 77.77%; display: block;}
	.col-desk4-29 {width: 80.55%; display: block;}
	.col-desk4-30 {width: 83.33%; display: block;}
	.col-desk4-31 {width: 86.11%; display: block;}
	.col-desk4-32 {width: 88.88%; display: block;}
	.col-desk4-33 {width: 91.66%; display: block;}
	.col-desk4-34 {width: 94.44%; display: block;}
	.col-desk4-34 {width: 97.22%; display: block;}
	.col-desk4-36 {width: 100%; display: block;}
	
	.col-desk4-98 {display: none;}
	.col-desk4-99 {width: 33.33%; display: inline-block;}
}
/* define column widths END */


html {
	background-color: #11145b;
}

body {
	margin: 0 auto;
/*	max-width: 960px; */
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color: LightSlateGrey;
    font-size: 16px;
    line-height: 20px;
}

/* unvisited link */
a:link {
    color: white;
}

/* visited link */
a:visited {
    color: white;
}

/* mouse over link */
a:hover {
    color: hotpink;
}


h1 {
	  font-size: 1.5em;
	line-height: 1.1em;
	font-weight: bold;	
}


.content {
/*	height: 2000px; */
}

.footer {
	         padding: 1em;
	background-color: #11145b;
	           color: #ffffff;
	      text-align: center;
	       font-size: 0.75em;
	
}

.header {
	         padding: 1em;
	background-color: #11145b;
	           color: #ffffff;
	      text-align: left;
	       font-size: 0.75em;
		    position: relative; 
				 top: 0px; 
				left: 205px;
			 display: block;
			   width: 80%
}

.backtotop{
	font-size: 0.75em;
}

.largetext{
	font-size: 2em;
	line-height: 30px;
	color: #CBE0F3;
}

.largertext{
	font-family:Arial;
	color: #F4F4F4;
	font-size: 1.75em;
	line-height: 30px;
	font-weight: bold;
	width: 90%;
	display: block;
	text-align: center;
	text-shadow: 2px 2px #000000;
}

.mediumtext{
	font-size: 1.25em;
	font-family:Arial;
	color: #F4F4F4;
	width: 90%;
	display: block;
	text-align: center;
}

.smallertext{
	font-size: 1em;
	font-family:Arial;
	color: #F4F4F4;
	width: 90%;
	display: block;
	text-align: center;
}

.smalltext{
	font-size: 0.6em;
	font-weight: bold;
	color: #11145b;
	line-height: 1.3;
}

.moretext{
	font-size: 1em;
	font-weight: bold;
	color: #11145b;
	line-height: 1.3;
}

.streaming{
	float: right;
	vertical-align: top;
}

.small-line-space{
	line-height: 0.9em;
}

.workslinks {
  text-align: center;
  font-weight: bold;
  font-size: 8px;
  overflow: hidden;
  background-color: #181C1C;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 5;
  display: block;
  opacity: 0.8;
}

.workslinks a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 8px 12px 8px 12px;
  text-decoration: none;
  font-size: 14px;
}

.workslinks a:hover {
  background: #B9DFF6;
  color: black;
}

.categoryheading{
	color: #F4F4F4;
	font-size: 1.25em;
	line-height: 30px;
	font-weight: bold;
}

.menu ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

.menu li {
	         padding: 0.5em;
	   margin-bottom: 0.45em;
	background-color: #33b5e5;
	           color: #ffffff;
	      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 
	                  0 1px 3px rgba(0,0,0,0.24);
}

.menu li:hover {
	background-color: #0099cc;
}


.aside {
	          border: 1px solid red;
	         padding: 1em;
	background-color: #33b5e5;
	           color: #ffffff;
	      text-align: center;
	       font-size: 0.9em;
	      box-shadow: 0 1px 3px rgba(0,0,0,0.12), 
	                  0 1px 3px rgba(0,0,0,0.24);
}

.key {
	background-color: #11145b;
			   color: #4c5260;
		  text-align: right;
			 padding: 1em 0.75em 1em 0;
}

.tile {
	background-color: #d7d8d9;
			 padding: 1em;
			 display: inline-block;
/*	border-left: #11145b solid 0.25em; */
}

.tileheader{
		background-color: #11145b;;
		padding: 1em;
		display: inline-block;
}

.tile-expanded {
	display: none;
}

.tile h1, h2, h3, h4, h5, h6 {
	           color: #11145b;	
}

.title {
		height: 3.2em;
		 color: #11145b;
}

.key .title {
		height: 3.2em;
		 color: #4c5260;
}

.composition {
		height: 2em;
		 color: #11145b;
}

.instrumentation {
		height: 3em;
		 color: #11145b;
}

.duration {
		height: 2em;
		 color: LightSlateGrey;	
}

.key .duration {
		color: #4c5260;
}

.listen {
		height: 4em;
}

.listen audio {
		width: 100%;
		max-height: 3em;
		display: block;
}

.key .listen {
		height: 3.00em;
		 color: #4c5260;
}

.more {
		height: 1.75em;
}
.songs {
		height: 2.2em;
}

.key .more {
		height: 1.75em;
		color: #11145b;
}

.tile-expanded {
	margin-top: 0.5em;
}

.expand-contract-buttons{
	background-color: #1DA1F2;
	cursor: pointer;
	border-radius: 10px;
}
.expand-contract-buttons:hover{
		background-color: #B9DFF6;
}

.key .button-expand, .key .button-compact {
	visibility: block;
}

.audio-stream {
		height: 3em;
		margin: 0 0 1.00em 0;
		color: #11145b;
}

.all-buttons {
	height: 100%;
}

.full-width-button {
	width: 100%;
	display: inline-block;
}

.half-width-left-button {
	width: 47%;
	display: inline-block;
	position: absolute;
	top: 0;
	left: 0;
}

.half-width-left-button-soundcloud {
	width: 47%;
}

.half-width-right-button {
	width: 47%;
	display: inline-block;
	position: absolute;
	top: 0;
	right: 0;
}

.soundcloud-button {
	background-image: linear-gradient(to bottom, #ff8800 0%, #ff3300 100%);
	background-color: #ff3300; /* fallback */
}


.icon-soundcloud-button {
	height: 100%;
	/*padding: 0.25em 0 0.15em 0;*/
	padding: 3% 0 1% 0;
	display: block;
	margin: 0 auto;
}

.sheet-music {
		height: 3em;
		margin: 0 0 1.00em 0;
	position: relative;
}

.sheetmusicplus-button {
/*	background-image: linear-gradient(to bottom, #ff8800 0%, #ff3300 100%); */
	background-color: White; /* fallback */
}

.icon-sheetmusicplus-button {
	/*width: 90%;*/
	max-height: 3.5em; 
	max-width: 7em;
	display: block;
	margin: 0 auto;
	padding: 3% 0 1% 0;
	margin-top: -2px;

}

.icon-amazon-button-songs {
	/*width: 90%;*/
	display: block;
	margin: 0 auto;
	padding: 3% 0 1% 0;
	vertical-align: top;
	margin-top:1px;
	margin: auto;
}

.icon-sheetmusicplus-button-songs {
	/*width: 90%;*/
	display: block;
	margin: 0 auto;
	padding: 3% 0 1% 0;
	float: left;
	margin-top:1px;
	vertical-align: top;
}

.icon-sheetmusicplus-button-songs-alone {
	width: 7em;
	margin-top: 9px;

}

.invisible{
		height: 3em;
		margin: 0 0 1.00em 0;
	position: relative;
	visibility: hidden;
}


.youtube {
		height: 3em;
		margin: 0 0 1.00em 0;
	position: relative;
}

.youtube-button {
/*	background-image: linear-gradient(to bottom, #ff8800 0%, #ff3300 100%); */
	background-color: White; /* fallback */
}

.icon-youtube-button {
	/*width: 100%;*/
	max-height: 3.5em;
	max-width: 7em;
	display: block;
	margin: 0 auto;
	padding: 3% 0 1% 0;
	margin-top: -2px;
}

.website {
		height: 3em;
		margin: 0 0 1.00em 0;
	position: relative;
}

.website-button {
/*	background-image: linear-gradient(to bottom, #ff8800 0%, #ff3300 100%); */
	background-color: White; /* fallback */
}

.icon-website-button {
	/*width: 100%;*/
	max-height: 3.5em;
	max-width: 7em;
	display: block;
	margin: 0 auto;
	padding: 3% 0 1% 0;
	margin-top: -1px
}
.icon-generic-button {
	/*width: 100%;*/
	max-height: 3.5em;
	max-width: 7em;
	display: block;
	margin: 0 auto;
	padding: 3% 0 1% 0;
	margin-top: -3px
}

.archive-recording {
		height: 3em;
		margin: 0 0 1.00em 0;
	position: relative;
}

.archive-recording-button {
/*	background-image: linear-gradient(to bottom, #ff8800 0%, #ff3300 100%); */
	background-color: White; /* fallback */
}

.icon-archive-recording-button {
	/*width: 90%;*/
	max-height: 3.5em;
	max-width: 7em;
	display: block;
	margin: 0 auto;
	padding: 3% 0 1% 0;
	margin-top: -2px;
	
}

.programme {
		height: 3em;
		margin: 0 0 1.00em 0;
	position: relative;
}

.programme-button {
/*	background-image: linear-gradient(to bottom, #ff8800 0%, #ff3300 100%); */
	background-color: White; /* fallback */
}

.icon-programme-button {
	/*width: 90%;*/
	max-height: 3.5em;
	max-width: 7em;
	display: block;
	margin: 0 auto;
	padding: 5% 0 5% 0
}

.press {
		height: 3.5em;
		margin: 0 0 1.00em 0;
	position: relative;
}

.press-button {
/*	background-image: linear-gradient(to bottom, #ff8800 0%, #ff3300 100%); */
	background-color: White; /* fallback */
}

.icon-press-button {
	/*width: 90%;*/
	max-height: 3.5em;
	max-width: 7em;
	display: block;
	margin: 0 auto;
	padding: 3% 0 1% 0;
}



.buy-a-cd {
		height: 3em;
		margin: 0 0 1.00em 0;
	  position: relative;
		 color: #11145b;
}

.cdbaby-button {
/*	background-image: linear-gradient(to bottom, #ff8800 0%, #ff3300 100%); */
	background-color: Black; /* fallback */
}

.icon-cdbaby-button {
	/*width: 90%;*/
	max-height: 3em;
	max-width: 7em;
	display: block;
	margin: 0 auto;
	padding: 3% 0 1% 0;
}

.amazon-button {
/*	background-image: linear-gradient(to bottom, #ff8800 0%, #ff3300 100%); */
	background-color: White;
/*	background-color: #ff9900;  fallback: amazon orange */ 
}

.icon-amazon-button {
	width: 90%;
	max-height: 3em;
	max-width: 7em;
	display: block;
	margin: 0 auto;
	padding: 3% 0 1% 0;
}

.programme {
		height: 3em;
		margin: 0 0 1.00em 0;
	  position: relative;
}

.programme-button {
/*	background-image: linear-gradient(to bottom, #ff8800 0%, #ff3300 100%); */
	background-color: White; /* fallback */
}

.icon-programme-button {
/*	width: 90%;*/
	max-height: 3.5em;
	max-width: 7em;
	display: block;
	margin: 0 auto;
	padding: 3% 0 1% 0;
	margin-top: -3px;
}

.press {
		height: 3em;
		margin: 0 0 1.00em 0;
	  position: relative;
}

.press-button {
/*	background-image: linear-gradient(to bottom, #ff8800 0%, #ff3300 100%); */
	background-color: White; /* fallback */
}

.icon-press-button {
/*	width: 90%;*/
	max-height: 3.5em;
	max-width: 7em;
	display: block;
	margin: 0 auto;
	padding: 3% 0 1% 0;
	margin-top: -2px;
}

.published {
		margin-top: 0.75em;
		height: 4em;
		 color: LightSlateGrey;
}

.key .published {
		color: #4c5260;
}

.less {
		height: 1.75em;

}

.key .less {
		color: #11145b;
}

.title-icon {
	width: 25%;
	float: right;
	border: LightSlateGrey solid 1px;
	margin: 0 0 0 0.50em;
	cursor: pointer;
}

.title-icon:hover{
	border: #B9DFF6 solid 3px;
}

.key .title-icon {
	width: 25%;
	float: left;
	border: LightSlateGrey solid 1px;
	margin: 0 0 0 0;
}

.speaker-icon {
	width: 15%;
}

.tile p {
/*	border: red solid 1px; */
	clear: left;
}

/* set temp borders */
.row {
/*	border: black dotted 2px;
}