/*
Existing website colours:
#FBF9F1 = main body background
#D7C29A = banner colour
#E8D6B5 = mini basket background colour
#B01830 = dark red titles colour
#2C060C = link colour (very dark brown - not quite black)

#F1EACE = language button background colour
#ECDEBE = language button border colour
#B3763B = language button text colour

#975B8E = MP3 buy button: album
#A87AA1 = MP3 buy button: work
#B998B4 = MP3 buy button: track
#7F136F = MP3 link top right

#6882A4 = FLAC buy button: album
#899DB8 = FLAC buy button: work
#ABB9CC = FLAC buy button: track
#1A4885 = FLAC link top right

#7E9577 = M4A/ALAC buy button: album
#9BAC95 = M4A/ALAC buy button: work
#B7C3B3 = M4A/ALAC buy button: track
#337420 = M4A/ALAC link top right


#DFC29A = Main menu heading background colour
#580C18 = Main menu heading text colour
#ECDEBE = Main menu heading rollover background colour
#841224 = Main menu heading rollover text colour

#B24736 = Labels e.g. "FREE DOWNLOAD TRACK"
*/


@media screen {
	body {
		padding-top: 50px;
	}

	.hyp-body-top {
		margin-top: 20px;
	}
}

body {
	color: #2C060C;
	font-family: Arial, Helvetica, sans-serif;
	background-color: #F7F7F7;
}

#hyp-asperror {
	position: fixed;
	bottom: 20px;
	align-content: center;
	right: 30px;
	color: #BB0000;
	background-color: #D0D0D0;
	padding: 20px;
	line-height: 2em;
	border: 4px solid #BB0000;
}

/* Extra white space at the sides in lg/xl modes */
@media (min-width: 1200px) {
	.container-fluid {
		padding-left: 30px;
		padding-right: 30px;
	}
}
@media (min-width: 1600px) {
	.container-fluid {
		padding-left: 75px;
		padding-right: 75px;
	}
}

/* Float the extra info columns at the right when wide enough */
.floatright-lg{
	float:right;
}
@media (max-width: 1199px) {    
    .floatright-lg{
    	float:none;
    }
}  

/* Global change to the treatment of blockquotes */
blockquote {
	font-size: 100%;
	border-left: none;

	padding: 0px 20px 0px 20px;
	margin: 0px 20px 10px 0px;
}

/* Global change to links*/
a {
	color: #2C060C;
}
a:hover {
	color: #841224;
}



/* Global change to the look of the panels */
.panel-default {
	border-color: #D7C29A;
}
.panel-default>.panel-heading {
	background-color: #EBEBEB;
	color: #2C060C;
	border-color: #D7C29A;
}
.panel-default>.panel-body {
	background-color: #F2F2F2;
}
.panel-default>.hyp-panel-body-main {
	background-color: #FFFFFF;
}

/* Facebook panel 
.panel-default.hyp-facebook>.panel-body {
	background-color: #dbedfe;
	background-image: -webkit-linear-gradient(bottom, #c7defe, #e7f1fe);
}
.panel-default.hyp-facebook {
	border-color: #4c66a4;
}
*/
.hyp-facebook {
	display: none;
}
.hyp-facebook > .panel-body {
	min-height:62px;
}

/* On the home page, right align Twitter */
@media (min-width: 768px) {
	.hyp-social-twitter {
		text-align: right;
	}
}
@media (max-width: 767px) {
	.hyp-social-twitter {
		margin-top: 5px;
	}
}

/* Highlight panel */
.panel-default.hyp-panel-highlight {
	border-color: #B24736;
}
.panel-default.hyp-panel-highlight>.panel-body {
	background-color: #F2F2F2;
}

/* Anorak panel */
.panel-body.hyp-anorak {
	line-height: 1.2;
}

/* Global change to the look of the tabbed areas 
   N.B. The hyp-nav-tabs-heading class controls the pre-tab label for language tabbing
*/
.nav-tabs {
	border-color: #D7C29A;
}
.tab-content {
	margin-bottom: 20px;
}
.tab-pane {
	border-left: 1px solid #D7C29A;
	border-right: 1px solid #D7C29A;
	border-bottom: 1px solid #D7C29A;
	padding: 0.8em;
}
.nav-tabs>li.active>a, .nav-tabs>li>a:hover, .nav-tabs>li>a:focus {
	/*background-color: #F1EACE;*/
	background-color: #F2F2F2;
}
.nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
	/*background-color: #F1EACE;*/
	background-color: #DADADA;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
	border-color: #D7C29A;
	border-bottom-color: transparent;
}
.tab-content>.tab-pane {
	/*background-color: #FBF9F1;*/
	background-color: #F2F2F2;
}
.hyp-nav-tabs-heading {
	margin-right: 15px;
	margin-left: 5px;
}





/* Global change to default button styles */
.btn-default {
	border-color: #D7C29A;
	/*background-color: #FBF9F1;*/
	/*background-color: #F1EACE;*/
	background-color: #EBEBEB;
}
.btn-default:hover,
.btn-default:active,
.btn-default:focus {
	color: #841224;
	border-color: #B3763B;
	/*background-color: #F1EACE;*/
	/*background-color: #ECDEBE;*/
	background-color: #DADADA;
}

.btn-primary {
	background-color: #999;
	border-color: #555;
}
.btn-primary:hover, 
.btn-primary:focus, 
.btn-primary:active, 
.btn-primary.active, 
.open .dropdown-toggle.btn-primary {
	background-color: #555;
}



/* Change the colours and layouts on the default navbar */
.fixfixed .navbar {
	position: absolute; 
}
.navbar-default {
	background-color: #F1EACE;
	background-color: #FFFFFF;
	background-color: rgba(247,247,247,0.9);
	border-color: #D7C29A; /* EXPERIMENTALLY */
}
.navbar-collapse.in {
	background-color: #FFFFFF;
}
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.active>a:focus {
	/*background-color: #ECDEBE;*/
	background-color: #DADADA;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
	/*background-color: #ECDEBE;*/
	background-color: #DADADA;
}
.navbar-default .navbar-nav>.active>a {
	color: #580C18;
}
.navbar-default .navbar-nav>li>a {
	color: #580C18;
}
.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>.active>a:hover {
	color: #841224;
}
.navbar-form .btn-default {
	color: #580C18;
}
/*
.navbar-form .btn-default:hover, .navbar-default .btn-default:hover {
	background-color: #ECDEBE;
}
*/
.navbar-toggle:hover, .navbar-toggle:focus {
	background-color: #ECDEBE !important;
}
/* Make the dropdowns more widely-spaced on what we assume are touchscreens */
@media(max-width: 1199px) {
	.dropdown-menu>li>a {
		padding: 8px 20px;
	}
}
@media (max-width: 767px) {
	.navbar-nav .open .dropdown-menu>li>a, .navbar-nav .open .dropdown-menu .dropdown-header {
		padding: 10px 15px 10px 25px;
	}
}
.dropdown-menu>li>a:hover {
	/*background-color: #F1EACE;*/
	background-color: #EEEEEE;
	color: #841224;
}
.dropdown-menu>li.hyp-discount-info {
	display: block;
	padding: 3px 20px;
	clear: both;
	font-weight: 400;
	line-height: 1.42857143;
	color: #333;
	white-space: nowrap;
	font-size: 85%;
}
.dropdown-menu>li.hyp-emptybasket {
	display: block;
	padding: 3px 20px;
	color: #333;
	font-size: 90%;
}
.dropdown-menu ul.hyp-discounts {
	padding-left: 22px;
}
.twitter-typeahead {
	vertical-align: middle;
}
.navbar-collapse > ul > form {
	padding-left: 22px;
}

/* For the XS mode button groups */
.navbar .btn-group.visible-xs {
	margin: 5px 0px 5px 12px;
}
.navbar .btn-group.visible-xs button.active {
	font-weight: bold;
}
.navbar .btn-group.visible-xs .btn-primary a,
.navbar .btn-group.visible-xs .btn-primary a:active,
.navbar .btn-group.visible-xs .btn-primary a:focus,
.navbar .btn-group.visible-xs .btn-primary a:visited {
	color: #FFFFFF !important;
}

/* Make sure that things are properly laid out when they do appear - for the language/format switchers */
@media (min-width: 1600px) {
	.nav .btn span.visible-xl {
		display: inline-block !important;
	}
}
@media (max-width: 767px) {
	.nav .btn span.visible-xs {
		display: inline-block !important;
	}
}

/* Allow up to 10 basket items to appear, based on screen height. 
The navbar and other blurb take about 180px, and each item is 36px in 1200+ width, and 52px in <= 1199px. And assume we need 100px for browser chrome. Approximate maths:
400px = 180 + 100 + 3x36
500px = 180 + 100 + 5x36
600px = 180 + 100 + 8x36
700px = 180 + 100 + 11x36
800px = 180 + 100 + 14x36
900px = 180 + 100 + 17x36
1000px = 180 + 100 + 21x36
and then for narrow screens
400px = 180 + 100 + 2x52
500px = 180 + 100 + 4x52
600px = 180 + 100 + 6x52
700px = 180 + 100 + 8x52
800px = 180 + 100 + 10x52
900px = 180 + 100 + 11x52
1000px = 180 + 100 + 13x52
*/
@media (max-height: 500px) {
	.hyp-basketitem-4, .hyp-basketitem-5, .hyp-basketitem-6, .hyp-basketitem-7, .hyp-basketitem-8, .hyp-basketitem-9, 
	.hyp-basketitem-10, .hyp-basketitem-11, .hyp-basketitem-12, .hyp-basketitem-13, .hyp-basketitem-14, .hyp-basketitem-15,
	.hyp-basketitem-16, .hyp-basketitem-17, .hyp-basketitem-18, .hyp-basketitem-19, .hyp-basketitem-20 {
		display: none;
	}
}
@media (max-height: 600px) {
	.hyp-basketitem-6, .hyp-basketitem-7, .hyp-basketitem-8, .hyp-basketitem-9, 
	.hyp-basketitem-10, .hyp-basketitem-11, .hyp-basketitem-12, .hyp-basketitem-13, .hyp-basketitem-14, .hyp-basketitem-15,
	.hyp-basketitem-16, .hyp-basketitem-17, .hyp-basketitem-18, .hyp-basketitem-19, .hyp-basketitem-20 {
		display: none;
	}
}
@media (max-height: 700px) {
	.hyp-basketitem-9, 
	.hyp-basketitem-10, .hyp-basketitem-11, .hyp-basketitem-12, .hyp-basketitem-13, .hyp-basketitem-14, .hyp-basketitem-15,
	.hyp-basketitem-16, .hyp-basketitem-17, .hyp-basketitem-18, .hyp-basketitem-19, .hyp-basketitem-20 {
		display: none;
	}
}
@media (max-height: 800px) {
	.hyp-basketitem-11, .hyp-basketitem-12, .hyp-basketitem-13, .hyp-basketitem-14, .hyp-basketitem-15,
	.hyp-basketitem-16, .hyp-basketitem-17, .hyp-basketitem-18, .hyp-basketitem-19, .hyp-basketitem-20 {
		display: none;
	}
}
@media (max-height: 900px) {
	.hyp-basketitem-15,
	.hyp-basketitem-16, .hyp-basketitem-17, .hyp-basketitem-18, .hyp-basketitem-19, .hyp-basketitem-20 {
		display: none;
	}
}
@media (max-height: 1000px) {
	.hyp-basketitem-18, .hyp-basketitem-19, .hyp-basketitem-20 {
		display: none;
	}
}
@media (max-width: 1199px) and (max-height: 500px) {
	.hyp-basketitem-3, .hyp-basketitem-4, .hyp-basketitem-5, .hyp-basketitem-6, .hyp-basketitem-7, .hyp-basketitem-8, .hyp-basketitem-9, 
	.hyp-basketitem-10, .hyp-basketitem-11, .hyp-basketitem-12, .hyp-basketitem-13, .hyp-basketitem-14, .hyp-basketitem-15,
	.hyp-basketitem-16, .hyp-basketitem-17, .hyp-basketitem-18, .hyp-basketitem-19, .hyp-basketitem-20 {
		display: none;
	}
}
@media (max-width: 1199px) and (max-height: 600px) {
	.hyp-basketitem-5, .hyp-basketitem-6, .hyp-basketitem-7, .hyp-basketitem-8, .hyp-basketitem-9, 
	.hyp-basketitem-10, .hyp-basketitem-11, .hyp-basketitem-12, .hyp-basketitem-13, .hyp-basketitem-14, .hyp-basketitem-15,
	.hyp-basketitem-16, .hyp-basketitem-17, .hyp-basketitem-18, .hyp-basketitem-19, .hyp-basketitem-20 {
		display: none;
	}
}
@media (max-width: 1199px) and (max-height: 700px) {
	.hyp-basketitem-7, .hyp-basketitem-8, .hyp-basketitem-9, 
	.hyp-basketitem-10, .hyp-basketitem-11, .hyp-basketitem-12, .hyp-basketitem-13, .hyp-basketitem-14, .hyp-basketitem-15,
	.hyp-basketitem-16, .hyp-basketitem-17, .hyp-basketitem-18, .hyp-basketitem-19, .hyp-basketitem-20 {
		display: none;
	}
}
@media (max-width: 1199px) and (max-height: 800px) {
	.hyp-basketitem-9, 
	.hyp-basketitem-10, .hyp-basketitem-11, .hyp-basketitem-12, .hyp-basketitem-13, .hyp-basketitem-14, .hyp-basketitem-15,
	.hyp-basketitem-16, .hyp-basketitem-17, .hyp-basketitem-18, .hyp-basketitem-19, .hyp-basketitem-20 {
		display: none;
	}
}
@media (max-width: 1199px) and (max-height: 900px) {
	.hyp-basketitem-11, .hyp-basketitem-12, .hyp-basketitem-13, .hyp-basketitem-14, .hyp-basketitem-15,
	.hyp-basketitem-16, .hyp-basketitem-17, .hyp-basketitem-18, .hyp-basketitem-19, .hyp-basketitem-20 {
		display: none;
	}
}
@media (max-width: 1199px) and (max-height: 1000px) {
	.hyp-basketitem-12, .hyp-basketitem-13, .hyp-basketitem-14, .hyp-basketitem-15,
	.hyp-basketitem-16, .hyp-basketitem-17, .hyp-basketitem-18, .hyp-basketitem-19, .hyp-basketitem-20 {
		display: none;
	}
}
@media (max-width: 1199px) and (min-height: 1001px) {
	.hyp-basketitem-14, .hyp-basketitem-15,
	.hyp-basketitem-16, .hyp-basketitem-17, .hyp-basketitem-18, .hyp-basketitem-19, .hyp-basketitem-20 {
		display: none;
	}
}
/* For iPads 768x1024, always display just the first 9 */
@media only screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
	.hyp-basketitem-10, .hyp-basketitem-11, .hyp-basketitem-12, .hyp-basketitem-13, .hyp-basketitem-14, .hyp-basketitem-15,
	.hyp-basketitem-16, .hyp-basketitem-17, .hyp-basketitem-18, .hyp-basketitem-19, .hyp-basketitem-20 {
		display: none;
	}
}





/* Less space between menu items on desktop displays */
@media (min-width: 1200px) {
	.nav>li>a {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* Remove the top padding on the navbar branding image, to make more room for the Hyperion logo */
.navbar-brand {
	padding-top: 5px;
}
.navbar-brand img:hover {
	background-image: url(/img/HypLogo40H_home.png);
}

/* Allow use of buttons as well as a in the navbar */
.nav>li>button {
	position: relative;
	display: block;
	margin-top: 10px;
	margin-left: 0.5em;
	margin-right: 0.5em;
	padding: 5px;
}

/* Styles for formats drop-down */
li>a.hyp-mp3 {
	color: #975B8E;
}
li>a.hyp-m4a {
	color: #7E9577;
}
li>a.hyp-flac {
	color: #6882A4;
}
li>a.hyp-physical {
	color: #6D6D6D;
}

/* Make the basket drop down on hover on desktop sizes */
/*
@media (min-width: 1200px) {
	.hyp-dropdown-basket:hover .dropdown-menu {
    		display: block;
 	}
}
*/
 
 
 /* Define styles for a clean line-free table */
.hyp-table-clean>thead>tr>th, 
.hyp-table-clean>tbody>tr>th, 
.hyp-table-clean>tfoot>tr>th, 
.hyp-table-clean>thead>tr>td, 
.hyp-table-clean>tbody>tr>td, 
.hyp-table-clean>tfoot>tr>td {
border-top: none;
}
.hyp-table-clean {
    margin-bottom: 0px;
}




/* Change the colours and styles of the buy buttons according to their purpose */
.hyp-btn-tall {
	height: 5em;
}
.hyp-btn-buy-album, .hyp-btn-buy-item {
	margin-right: 1em;
}
.hyp-btn-buy-work, .hyp-btn-buy-track {
	margin-right: 3px;
}
@media (max-width: 768px) {
	.btn-xs.hyp-btn-buy-album,
	.btn-xs.hyp-btn-tall,
	.btn-xs.hyp-btn-listen {
		font-size: 80%;
	}
	.textinfo.hyp-buy {
		font-size: 90%;
	}
}

.text-info.hyp-buy {
	color: rgba(0,0,0,0.7);
}
/* Initially hide all buy buttons, [[[except for physical items]]] */
.hyp-buy {
	display: none;
}
/*
.hyp-buy.hyp-physical {
	display: inline-block;
}
*/

td.hyp-td-buy {
	width: 0px;
}
@media (min-width: 992px) {
	td.hyp-td-buy.hyp-showbuy {
		width: 4em;
	}
}
.hyp-buy.hyp-showbuy {
	display: inline-block;
}
.hyp-buy.text-info.hyp-showbuy {
	display: block;
}




/* Physical media buttons (the illogical 'work' ones are needed because of the format switcher */
.hyp-btn-buy.hyp-physical {
	background-color: #999;
	border-color: #555;
}
.hyp-btn-buy.hyp-physical:hover {
	background-color: #555;
}
.hyp-btn-buy-work.hyp-physical {
	background-color: #999;
	border-color: #555;
}
.hyp-btn-buy-work.hyp-physical:hover {
	background-color: #777;
}

/* MP3 buttons */
.hyp-btn-buy.hyp-mp3 {
	background-color: #975B8E;
	border-color: #7F136F;
}
.hyp-btn-buy.hyp-mp3:hover {
	background-color: #7F136F;
}

.hyp-btn-buy-work.hyp-mp3 {
	background-color: #A87AA1;
	border-color: #975B8E;
}
.hyp-btn-buy-work.hyp-mp3:hover {
	background-color: #975B8E;
}

.hyp-btn-buy-track.hyp-mp3 {
	background-color: #B998B4;
	border-color: #A87AA1;
}
.hyp-btn-buy-track.hyp-mp3:hover {
	background-color: #A87AA1;
}

/* FLAC buttons */
.hyp-btn-buy.hyp-flac,
.hyp-btn-buy.hyp-hr1-flac,
.hyp-btn-buy.hyp-hr2-flac {
	background-color: #6882A4;
	border-color: #1A4885;
}
.hyp-btn-buy.hyp-flac:hover,
.hyp-btn-buy.hyp-hr1-flac:hover,
.hyp-btn-buy.hyp-hr2-flac:hover {
	background-color: #1A4885;
}

.hyp-btn-buy-work.hyp-flac,
.hyp-btn-buy-work.hyp-hr1-flac,
.hyp-btn-buy-work.hyp-hr2-flac {
	background-color: #899DB8;
	border-color: #6882A4;
}
.hyp-btn-buy-work.hyp-flac:hover,
.hyp-btn-buy-work.hyp-hr1-flac:hover,
.hyp-btn-buy-work.hyp-hr2-flac:hover {
	background-color: #6882A4;
}

.hyp-btn-buy-track.hyp-flac,
.hyp-btn-buy-track.hyp-hr1-flac,
.hyp-btn-buy-track.hyp-hr2-flac {
	background-color: #ABB9CC;
	border-color: #899DB8;
}
.hyp-btn-buy-track.hyp-flac:hover,
.hyp-btn-buy-track.hyp-hr1-flac:hover,
.hyp-btn-buy-track.hyp-hr2-flac:hover {
	background-color: #899DB8;
}

/* M4A/ALAC buttons */
.hyp-btn-buy.hyp-m4a,
.hyp-btn-buy.hyp-hr1-m4a,
.hyp-btn-buy.hyp-hr2-m4a {
	background-color: #7E9577;
	border-color: #337420;
}
.hyp-btn-buy.hyp-m4a:hover,
.hyp-btn-buy.hyp-hr1-m4a:hover,
.hyp-btn-buy.hyp-hr2-m4a:hover {
	background-color: #337420;
}

.hyp-btn-buy-work.hyp-m4a,
.hyp-btn-buy-work.hyp-hr1-m4a,
.hyp-btn-buy-work.hyp-hr2-m4a {
	background-color: #9BAC95;
	border-color: #7E9577;
}
.hyp-btn-buy-work.hyp-m4a:hover,
.hyp-btn-buy-work.hyp-hr1-m4a:hover,
.hyp-btn-buy-work.hyp-hr2-m4a:hover {
	background-color: #7E9577;
}

.hyp-btn-buy-track.hyp-m4a,
.hyp-btn-buy-track.hyp-hr1-m4a,
.hyp-btn-buy-track.hyp-hr2-m4a {
	background-color: #B7C3B3;
	border-color: #9BAC95;
}
.hyp-btn-buy-track.hyp-m4a:hover,
.hyp-btn-buy-track.hyp-hr1-m4a:hover,
.hyp-btn-buy-track.hyp-hr2-m4a:hover {
	background-color: #9BAC95;
}

/* Hide info buttons in track listing in XS mode */
@media (max-width: 767px) {
	table.hyp-tracklist .btn-info {
		display: none !important;
	}
}

/* Large buttons - mostly for the checkout process */
/*
.btn-lg {
	background-color: #F1EACE;
}
.btn-lg:hover {
	background-color: #ECDEBE;
}
*/

/* Other styles for format-switching */
.hyp-mp3techdetails {
	display: none;
}
.hyp-studiomastersmsg-text, .hyp-studiomastersmsg-inline {
	color: #B3763B;
	font-weight: bold;
	display: none;
}
.hyp-formatgroups {
	display: none;
	font-weight: bold;
	color: #B3763B;
}
@media (max-width: 767px) {
	.hyp-alblist-buttonsrow .hyp-formatgroups {
		display: none !important;
	}
}

.hyp-downloads-flac-text {
	color: #6882A4;
} 
.hyp-downloads-m4a-text {
	color: #7E9577;
}


/* Site locked message */
#hyp-siteunavailable {
	font-size: 120%;
	font-weight: bold;
	margin-top: 75px;
	margin-bottom: 75px;
	text-align: center;
	width: 85%;
}


/* Home page */
.jumbotron {
	margin-bottom: 10px;
}
.jumbotron {
	padding-top: 15px;
	padding-bottom: 15px;
}
@media screen and (min-width: 768px)
	.jumbotron {
		padding-top: 25px;
		padding-bottom: 25px;
	}
}
.jumbotron p {
	font-size: 18px;
}
#hyp-languageswitchernewuser, #hyp-formatselectorbuttonnewuser {
	display: inline-block;
	margin-left: 30px;
	margin-bottom: 15px;
}
.panel-default>.panel-body.hyp-newuserwelcome {
	background-color: #DADADA;
}

.hyp-buttongrid > #hyp-formatselectorbutton {
	margin-right: 10px;
}



/* 'More' drop-down menu */

.mega-dropdown {
  position: static !important;
  /*width:100%;*/
}
ul.dropdown-menu.mega-dropdown-menu {
	margin-top: 20px;
	border-color: #D7C29A;
	/*overflow-y: scroll; - CAUSES THE TOP ARROW TO GET LOST. TBD TODO NEED TO HIDE THINGS AND SHOW A LINK TO THE FULL MENU INSTEAD */
}
ul.dropdown-menu.mega-dropdown-menu > li > ul > li.dropdown-header {
	color: #841224;
}

/*
@media (max-height: 800px) {
	ul.dropdown-menu.mega-dropdown-menu {
		max-height: 600px;
	}
}
@media (max-height: 600px) {
	ul.dropdown-menu.mega-dropdown-menu {
		max-height: 400px;
	}
}
@media (max-height: 400px) {
	ul.dropdown-menu.mega-dropdown-menu {
		max-height: 200px;
	}
}
*/
@media (max-height: 800px) {
	.hyp-hidden-800h {
		visibility: hidden;
		display: none;
	}
}
@media (max-height: 600px) {
	.hyp-hidden-600h {
		visibility: hidden;
		display: none;
	}
}
@media (max-height: 400px) {
	.hyp-hidden-400h {
		visibility: hidden;
		display: none;
	}
}


.mega-dropdown-menu {
    padding: 20px 0px;
    right: 7px;
    left: 7px;
    max-width: 1300px;
    box-shadow: none;
    -webkit-box-shadow: none;
    background-color: #F2F2F2;
}
.mega-dropdown-menu .carousel {
	padding-left: 20px;
}
@media (min-width: 1200px) {
	ul.dropdown-menu.mega-dropdown-menu {
		left: 25px;
		right: 25px;
	}
}
@media (min-width: 1600px) {
	ul.dropdown-menu.mega-dropdown-menu {
		left: 65px;
		right: 65px;
	}
}
.mega-dropdown-menu:before {
    content: "";
    border-bottom: 15px solid #F2F2F2;
    border-right: 17px solid transparent;
    border-left: 17px solid transparent;
    position: absolute;
    top: -15px;
    left: 285px;
    z-index: 10;
}
.mega-dropdown-menu:after {
    content: "";
    border-bottom: 17px solid #D7C29A;
    border-right: 19px solid transparent;
    border-left: 19px solid transparent;
    position: absolute;
    top: -17px;
    left: 283px;
    z-index: 8;
}
.mega-dropdown-menu > li > ul {
  padding: 0;
  margin: 0;
}
.mega-dropdown-menu > li > ul > li {
  list-style: none;
}
.mega-dropdown-menu > li > ul > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.25; /* 1.428571429; */
  /*color: #999;*/
  white-space: normal;
}
.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
  text-decoration: none;
  color: #444;
  background-color: #f5f5f5;
}
.mega-dropdown-menu .dropdown-header {
  color: #428bca;
  font-size: 18px;
  font-weight:bold;
}
.mega-dropdown-menu form {
    margin:3px 20px;
}
.mega-dropdown-menu .form-group {
    margin-bottom: 3px;
}



/* Pagination, for use mainly in menus and sibling menus */
.pagination>li>a, 
.pagination>li>span {
	border-color: #D7C29A;
	color: #2C060C;
}
.pagination>.active>a, 
.pagination>.active>span, 
.pagination>.active>a:hover, 
.pagination>.active>span:hover, 
.pagination>.active>a:focus, 
.pagination>.active>span:focus {
	background-color: #999;	/* Both D7C29A ? */
	border-color: #999;
}
.pagination>li>a:hover, 
.pagination>li>span:hover, 
.pagination>li>a:focus, 
.pagination>li>span:focus {
	color: #841224;
}
div.hyp-sibling-dropdown > button.dropdown-toggle {
	margin-top: 10px;
	margin-bottom: 15px;
}
div.hyp-sibling-dropdown > ul.dropdown-menu {
	overflow-y: scroll;
	max-height: 150px;
}
@media (min-height: 640px) {
	div.hyp-sibling-dropdown > ul.dropdown-menu {
		max-height: 300px;
	}
} 
@media (min-height: 768px) {
	div.hyp-sibling-dropdown > ul.dropdown-menu {
		max-height: 500px;
	}
} 
@media (min-height: 1024px) {
	div.hyp-sibling-dropdown > ul.dropdown-menu {
		max-height: 700px;
	}
} 
@media (min-height: 1200px) {
	div.hyp-sibling-dropdown > ul.dropdown-menu {
		max-height: 850px;
	}
} 



/* Make the musical notes change colour on the listen buttons */
.hyp-btn-listen:hover .glyphicon {
	color: #B01830;
}


/* 13-Mar-15 no longer required - removed the separate 'simple' search mode
.hyp-search-go {
	display: none;
}


/* Control the width of the search box 
Make it as wide as possible, without breaking the navbar layout, at the 768, 992, 1200 and 1600px boundaries 
We've an extra one at 1400px because the LG/1200px box is so painfully narrow. And another at 1800px Just Because.*/
@media (min-width: 768px) {
	.hyp-search-box {
		width: 20em !important;
	}
}

.navbar .hyp-search-box {
	width: 10em !important;
}
@media (min-width: 992px) {
	.navbar .hyp-search-box {
		width: 14em !important;
	}
}
@media (min-width: 1200px) {
	.navbar .hyp-search-box {
		width: 8em !important;
	}
}
@media (min-width: 1400px) {
	.navbar .hyp-search-box {
		width: 20em !important;
	}
}
@media (min-width: 1600px) {
	.navbar .hyp-search-box {
		width: 16em !important;
	}
}
@media (min-width: 1800px) {
	.navbar .hyp-search-box {
		width: 24em !important;
	}
}
/* Make the search icon change colour */
.btn-default:hover .glyphicon {
	color: #B01830;
}



/* Info buttons */
.hyp-btn-info .glyphicon {
	/*color: #B3763B;*/
	color: #808080;
	padding-right: 3px;
}
.hyp-btn-info {
	font-size: 75%;
	/*color: #B3763B;*/
	margin-right: 4px;
	border-width: 0px;
}


/* Sung text buttons */
.hyp-btn-sungtext {
	font-size: 75%;
	/*color: #B3763B;*/
}


/* Our own label styles for 'New' and 'Free download track' type labels */
.hyp-label {
}
h3>.label.hyp-label {
	font-size: 60%;
	vertical-align: middle;
	margin-left: 5px;
}
.hyp-label-new {
	background-color: #841224;
}
.hyp-label-free {
	color: #B24736;
}

/* Styles for the image custom tags */
img.hyp-image-label {
	margin: 0 10px 0 0;
}
div.hyp-image-label {
	margin: 0 0 5px 0;
}

/* Change form focus style */
.form-control:focus {
    border-color: rgb(179, 118, 59);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(132, 18, 36, 0.5);    
}


/* dw.asp / tw.asp */
.hyp-btn-viewwholealbum {
	display: inline-block;
	height: 5em;
}

.hyp-dw-composerrole {
	font-size: 85%;
	margin-top: 8px;
}
.hyp-dw-composername-header {
	font-size: 90%;
	font-weight: bold;
}
.hyp-dw-composerinfo {
	font-size: 80%;
}

.hyp-workimage {
	margin: 10px 20px 20px 0px;
}
@media (min-width: 768px) {
	.hyp-workimage {
		float: left;
	}
}

.hyp-w-subwork {
	color: #B01830;
	font-weight: bold;
}
.hyp-w-subwork-firstline {
	color: #827878;
}
.hyp-w-composerrole {
	font-size: 85%;
	margin-top: 8px;
}
.hyp-w-composerinfo {
	font-size: 80%;
}
.hyp-w-composername-body {
	/*font-size: 90%;*/
}
.hyp-w-agent {
	font-size: 75%;
}
.hyp-w-web {
	font-size: 75%;
}

.hyp-w-albuminfo, .hyp-w-albuminfo2 {
	padding-bottom: 15px;
}
/* Cancel out the padding from the previous one - clumsy but it should work */
.hyp-w-albuminfo2 {
	margin-top: -15px;
}

.hyp-w-subwork-details {
	margin-left: 20px;
	margin-bottom: 5px;
}
.hyp-w-subwork-details .hyp-w-composerrole {
	margin-left: -10px;
}
.hyp-w-subwork-details .hyp-w-composername-body {
	margin-left: -10px;
}
.hyp-w-subwork-details .hyp-w-composerinfo {
	margin-left: -10px;
}

.hyp-w-artists {
	font-size: 95%;
	font-weight: bold;
}
.hyp-w-artists > .hyp-btn-listen {
	margin-right: 8px;
}
.hyp-w-album {
	font-size: 90%;
}

.hyp-w-result2 {
	font-size: 90%;
	padding-left: 10px;
}

.hyp-t-subwork {
	font-weight: bold;
}

.hyp-t-label {
	font-size: 90%;
	padding-top: 10px;
}
.hyp-t-data, .hyp-t-artist, .hyp-t-artist-headline {
	font-size: 85%;
	padding-left: 15px;
}
.hyp-t-artist-headline {
	font-weight: bold;
}
.hyp-t-list {
	font-size: 85%;
	position: relative;
	left: -10px;
}
.hyp-t-list-item {
	padding-top: 5px;
}
.hyp-t-picture {
	float:left; 
	margin-right: 20px; 
	margin-bottom: 15px;
}
.hyp-t-picturecredit {
	font-size: 80%;		/ * Relative to the already down-scaled font * /
}
.hyp-t-picturecaption {
	font-size: 90%;		/ * Relative to the already down-scaled font * /
}




/* dc.asp */
.hyp-albumcover {
	margin: 10px 20px 20px 0px;
	width: 200px;
	min-height: 200px;
}
@media (min-width: 768px) {
	.hyp-albumcover {
		float: left;
	}
	.hyp-albumdetail {
		margin-left: 220px;
		margin-bottom: 10px;
	}
}


/*
a .hyp-album {
	margin-left: 10px;
	margin-top: 10px;
}
*/
h3.hyp-title {
	color: #841224;
	font-weight: bold;
}
h5.hyp-headlineartists {
	font-size: 15px;
}
.hyp-buttongridcontainer {
	margin-bottom: 10px;
}
.hyp-buttongrid {
}
.hyp-notices {
	margin-bottom: 10px;
	font-size: 90%;
}
.hyp-notice-config, .hyp-notice-album {
	margin-right: 15px;
}
.hyp-notice-config .newrelease,
.hyp-notice-album .newrelease {
	margin-left: 5px;
}
.hyp-notice-freedownload {
	color: #BA3000;
}

.hyp-itunes {
	/*margin-left: 10px;*/
	margin-right: 5px;
}
.hyp-masteredforitunes {
	/*margin-left: 5px;*/
}
/*img.hyp-iOSdownloadsimage {
	margin-left: 10px;
}*/
.hyp-iOSdownloadsmessage {
	/*padding-top: 10px;
	padding-bottom: 10px;
	white-space: normal;
	font-weight: bold;
	color: #2C060C;
	min-height: 40px;*/
	color: #827878;
	font-size: 85%;
}
/*
.hyp-iOSdownloadsmessage a, .hyp-iOSdownloadsmessage a:link, .hyp-iOSdownloadsmessage a:active, .hyp-iOSdownloadsmessage a:visited, .hyp-iOSdownloadsmessage a:hover {
	font-weight: normal;
	color: red;
}
*/
#hyp-archiveservice, #hyp-preorder {
	color: #827878;
	font-size: 85%;
}

/* Change the table layout of the track listing table:
	remove the inter-cell horizontal borders; reduce vertical padding; remove horizontal padding */
.hyp-tracklist.table>thead>tr>th, .hyp-tracklist.table>tbody>tr>th, 
.hyp-tracklist.table>tfoot>tr>th, .hyp-tracklist.table>thead>tr>td, 
.hyp-tracklist.table>tbody>tr>td, .hyp-tracklist.table>tfoot>tr>td {
	border-top: 0px;
}
.hyp-tracklist.table-condensed>thead>tr>th, .hyp-tracklist.table-condensed>tbody>tr>th, 
.hyp-tracklist.table-condensed>tfoot>tr>th, .hyp-tracklist.table-condensed>thead>tr>td, 
.hyp-tracklist.table-condensed>tbody>tr>td, .hyp-tracklist.table-condensed>tfoot>tr>td {
	padding: 2px 0px;
}

/* Also for the tracklisting table, set the height of the break in 'small' mode */
.hyp-infobutton-break {
	line-height: 1.42857143;
}


/* Change the table layout of the listing stable:
	remove borders, reduce vertical padding */
.hyp-list.table>thead>tr>th, .hyp-list.table>tbody>tr>th, 
.hyp-list.table>tfoot>tr>th, .hyp-list.table>thead>tr>td, 
.hyp-list.table>tbody>tr>td, .hyp-list.table>tfoot>tr>td {
	border-top: 0px;
	padding-top: 3px;
	padding-bottom: 3px;
}
/* But put borders back in just the albums list, but not on the first row */
.hyp-alblist.table>tbody>tr>td, .hyp-alblist.table>tfoot>tr>td {
	padding-top: 7px;
	padding-bottom: 7px;
	border-top: 1px solid #D7C29A;
}
.hyp-alblist.table>tbody>tr:first-child>td, .hyp-alblist.table>tfoot>tr:first-child>td {
	border-top: none;
}

.hyp-alb-panel-body {
	padding-top: 5px;
	padding-bottom: 5px;
}

.hyp-list.table {
	margin-bottom: 0px;
}

/* If we're not in a panel add some bottom spacing and a bottom border */
.hyp-alblist-nopanel {
	margin-bottom: 15px;
}
.hyp-alblist-nopanel .hyp-alblist.table>tbody>tr:last-child>td, .hyp-alblist-nopanel .hyp-alblist.table>tfoot>tr:last-child>td {
	border-bottom: 1px solid #D7C29A;
}


/* Change the hover colour on the albums/works listings */
.hyp-list.table-hover>tbody>tr:hover>td, .hyp-list.table-hover>tbody>tr:hover>th {
/*.hyp-list.table.table-hover td:hover {*/
	/*background-color: #F1EACE;*/
	background-color: #EBEBEB;
	cursor: pointer;
}
/* ... and the buttons within it, for contrast */
.hyp-list.table.table-hover td:hover .btn-default {
	background-color: #F8F8F8;
}


/* Format contents of the albums listing */
@media (min-width: 768px) {
	.hyp-alblist td.hyp-alblist-entry {
		padding-left: 135px;
	}
}
@media (min-width: 768px) {
	.hyp-alblist-entry img.hyp-cover {
		margin-left: -130px;
	}
}
.hyp-alblist-entry img.hyp-cover {
	height: 120px;
	width: 120px;
	margin-right: 8px;
	float: left;
}
.hyp-alblist-title {
	font-weight: bold;
}
.hyp-alblist-buttonsrow {
	font-size: 85%;
	margin-top: 7px;
}
.hyp-alblist-artists {
	font-size: 90%;
}
.hyp-alblist-blurb {
	margin-bottom: 20px;
	margin-top: 10px;
}
.hyp-alblist-image {
	float: left;
	margin-top: 5px;
	margin-right: 20px;
	margin-bottom: 10px;
}
.hyp-alblist-notices {
	color: #B7383E;
	margin-right: 6px;
}
.hyp-alblist-rankingspacer {
	height: 18px;
}
.hyp-freedownloadalbumslist {
	color: #B24736;
	font-weight: bold;
	margin-right: 5px;
}
.hyp-alblist-id, .hyp-alblist-info {
	margin-right: 5px;
}
.hyp-list .hyp-studiomastersmsg-inline {
	margin-left: 5px;
}
.hyp-alblist-splurge {
	overflow: hidden;
	font-size: 85%;
	margin-top: 5px;
	/* --margin-right: 5em; */
}
.hyp-alblist-splurge .hyp-alblist-reviews {
	color: #841224;
}
.hyp-reviews {
	font-size: 90%;
}
.hyp-reviews-stars {
	font-size: 80%;
}

.hyp-alblist-more, .hyp-reviews-more {
	/* --float: right;
	   --margin-top: -2em; */
	font-weight: bold;
	font-size:95%; /* --90% */
	color: #827878; /*#841224;*/ /*#B01830;*/ /*--#808080;*/
	margin-left: 6px;
}
a.hyp-alblist-more:hover, .hyp-reviews-more:hover {
	color: #B01830;
}
.hyp-alblist-guff {
	font-family: 'Average Sans', Arial, Helvetica, sans-serif;
	font-size: 105%;
	margin-top: 10px;
	color: #2d466d;
}
.hyp-alblist-guff-author {
	font-size: 90%;
	margin-top: 5px;
}


/* General text styles passed through in the data */
.newrelease, .forthcomingrelease {
	color: #BA3000;
	margin-left: 5px;
	margin-right: 5px;
}
.newrelease {
	font-weight: bold;
}
.label .newrelease {
	color: #FFFFFF;
}



/* Configurations listing */
.hyp-configlist-groupheader {
	font-size: 90%;
	padding-top: 12px !important;
}
.hyp-configlist-groupheader-moreinfo {
	font-size: 90%;		/* Relative to hyp-configlist-groupheader */
}
.hyp-configlist-albumtitle {
	font-weight: bold;
}
.hyp-configlist-albumartists {
	font-size: 90%;
	margin-left: 6px;
}
.hyp-configlist-albuminfo {
	/* NB This is relative to the buy/archive/nobuy font */
	font-size: 80%;
}
.hyp-configlist-more {
	font-size:80%; /*--90*/
	font-weight: bold;
	color: #827878; /*#841224;*/ /*#B01830;*/ /*--808080;*/
	/*--text-align: right;*/
	margin-left: 6px;
}
a.hyp-configlist-more:hover {
	color: #B01830;
}


/* Track listings */
.hyp-tracktime {
	font-size: 85%;
	margin-left: 9px;
}
.hyp-infobuttons {
	margin-left: 8px;
}
.hyp-trackcomposers {
	font-size: 90%;
	font-weight: normal;
	margin-left: 8px;
}


/* News story listings */
.hyp-news-title {
 font-size: 120%;
 font-weight: bold;
 margin-top: 0.3em;
}
.hyp-news-text {
/* font-size: 80%;*/
 margin-bottom: 0.5em;
}
.hypnews-text a:link, .hyp-news-text a:visited, .hyp-news-text a:active {
 color: #B01830;
}
.hyp-news-text a:hover {
 color: #580C18;
}
.hyp-news-date {
 font-size: 90%;
 margin-top: 1.0em;
 margin-bottom: -0.3em;
}



/* Label icons, both separately and within the context of the albums lists */
.hyp-labelicon {
	vertical-align: middle;
	margin-bottom: 10px;
}
.hyp-label3icon {
}
.hyp-label4icon {
	margin-top: -3px;
}
.hyp-label5icon {
}
.hyp-label6icon {
}

.hyp-alblist-labelicon {
	vertical-align: bottom;
	position: relative;
	margin-left: 5px;
}
.hyp-alblist-label3icon {
}
.hyp-alblist-label4icon {
	/*top: 3px; TBD */
}
.hyp-alblist-label5icon {
	/*top: 3px; TBD */
}
.hyp-alblist-label6icon {
	top: -3px;
}

/* Floating chunks */
.hyp-chunkset {
	padding-bottom: 15px; 
	font-size: 90%;
}
.hyp-chunkset img {
	margin-right: 10px;
	/*margin-top: 5px;*/
	margin-bottom: 10px;
}
@media (min-width: 1200px) {
	.hyp-chunkset-a, .hyp-chunkset-ym, .hyp-chunkset-o, .hyp-chunkset-ol, .hyp-chunkset-dp {
		margin-top: 56px;
	}
}

/*****************************
 Styles for the jNotify popup used when an item is added to the basket
 *****************************/
 /*****************/
/** jNotify CSS **/
/*****************/
#jNotify {
	position:absolute;
	/*background:#d8e6fc  url('../info.png') no-repeat 15px center;
	color:#35517c;
	border:1px solid #a7c3f0;*/
	background-color: #EBEBEB; /*#ECDEBE;*/ /*#D7C29A;*/
	color: #B01830;
	border:3px solid #580C18; /*#B01830;*/

	padding:10px;
	/*padding-left:50px;*/
	margin:15px;
	z-index:20001;
	-moz-border-radius : 5px;
	border-radius:5px;
	-webkit-border-radius:5px;
}
#jNotify a {color:#35517c !important;text-decoration:none;}

/** OVERLAY **/
#jOverlay {
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:20000
}


/****************************
 Styles for the popup windows (full review, replacement for album/config hover-over tips)
 ****************************/
/* jqModal base Styling courtesy of;
	Brice Burgess <bhb@iceburg.net> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
	the Window's z-index value will be set to 3000 by default (via jqModal.js). */

/* HYPERION MODIFICATIONS: 
	Change background colour from EEE to FFF
	Responsive margin-left and width
*/
.jqmWindow {
	display: none;
    
	position: fixed;
	top: 17%;
	left: 50%;

	/*margin-left: -300px;
	width: 600px;*/
	width: 300px;
	margin-left: -150px;
    
	background-color: #FFF;
	color: #333;
	border: 1px solid black;
	/*padding: 12px;*/
}

.jqmOverlay { background-color: #000; }

/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
	width: expression(this.parentNode.offsetWidth+'px');
	height: expression(this.parentNode.offsetHeight+'px');
}

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include instead */
* html .jqmWindow {
	position: absolute;
	top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');
}

.jqmClose {
	width:20px;
	height:20px;
	display:block;
	float:right;
	clear:right;
	background:transparent url(/pngs/close_icon_double.png) 0 0 no-repeat;
}	
a.jqmClose:hover{ 
	background-position: 0 -20px;
}


@media (min-width: 640px) {
	.jqmWindow {
		width: 400px;
		margin-left: -200px;
	}
}
@media (min-width: 1024px) {
	.jqmWindow {
		width: 600px;
		margin-left: -220px;
	}
}
@media (min-width: 1200px) {
	.jqmWindow {
		width: 700px;
		margin-left: -350px;
	}
}
@media (min-width: 1600px) {
	#hyp-dialog.jqmWindow {
		width: 800px;
	}
	.jqmWindow {
		margin-left: -400px;
	}
}

/* Specific positioning for the click-to-make-big album art. 
Will be 600px square on < 1200, and 700px square on >= 1200 
Optimised for iPad 1024x768 */
@media (min-width: 768px) and (max-width: 1099px) {
	#hyp-artwork.jqmWindow {
		margin-left: -275px;
		width: 550px;
		top: 55px;
	}
}




#hyp-dialog, .hyp-dialog {
	padding: 0px !important;
	border-color: #D7C29A; 
	border-style: solid; 
	border-width: 3px; 
	border-radius: 10px;
}
#hyp-dialog:focus, .hyp-dialog:focus, #hyp-artwork:focus {
	outline: none;
}

.hyp-dialog-header {
	padding: 5px 5px 5px 10px;
	border-bottom: 3px solid #D7C29A;
}

.hyp-dialog-body {
	padding: 5px;
	overflow-y: scroll;
	max-height: 150px;
	margin: 5px;
}
@media (min-height: 640px) {
	.hyp-dialog-body {
		max-height: 300px;
	}
} 
@media (min-height: 768px) {
	.hyp-dialog-body {
		max-height: 500px;
	}
} 
@media (min-height: 1024px) {
	.hyp-dialog-body {
		max-height: 700px;
	}
} 
@media (min-height: 1200px) {
	.hyp-dialog-body {
		max-height: 850px;
	}
} 

/* Classes specifically for the full-review dialog */
.hyp-review-fulltext {
	font-size: 90%;
}
.hyp-review-credits {
	padding-left: 95px;
	height: 90px;
}
.hyp-review-credits img {
	float: left;
	margin-left: -85px;
}

.hyp-dialogtrigger {
	font-weight: bold;
}

/* Classes specifically for the album tip dialog */
.hyp-dialog-albumtip .hyp-dialog-header {
	font-weight: bold;
}
.hyp-dialog-albumtip .hyp-dialog-body {
	font-size: 90%;
}

/* Classes specifically for the work config tip dialog */
.hyp-dialog-workconfigtip .hyp-dialog-header {
	font-weight: bold;
}
.hyp-dialog-workconfigtip .hyp-dialog-body {
	font-size: 90%;
}


/****************************
 Styles for the track listing
 ****************************/

.hyp-td-trackno, .hyp-td-albumno {
	padding-top: 8px !important;
	width: 2em;
}
.hyp-td-listen {
	width: 2em;
}
.hyp-td-buy {
	width: 0px;
}
.hyp-work {
	margin-top: 7px;
	line-height: 1;
}
.hyp-subwork {
	margin-top: 2px;
	/*white-space: nowrap;*/
	line-height: 1;
}
.hyp-worktitle {
	font-weight: bold;
}
.hyp-altworktitle {
	font-size: 85%; /* Relative to dc-worktitle size */
	font-weight: normal;
}
.hyp-subworktitle {
	font-size: 90%;
}
.hyp-otherartists {
	font-size: 70%;
	margin-top: -1px;
	padding-bottom: 2px;
}

@media (min-width: 1600px) {
	.hyp-worktitle {
		font-size: 105%;
	}
	.hyp-subworktitle {
		font-size: 100%;
	}
	.hyp-otherartists {
		font-size: 80%;
	}
}


.hyp-buy-header {
	font-size: 70%;
	font-weight: bold;
	text-align: center;
	padding-left: 2px;
	padding-right: 2px;
	white-space: nowrap;
}
.hyp-buy-header.hyp-mp3 {
	color: #975B8E;
}
.hyp-buy-header.hyp-flac,
.hyp-buy-header.hyp-hr1-flac,
.hyp-buy-header.hyp-hr2-flac {
	color: #6882A4;
}
.hyp-buy-header.hyp-m4a,
.hyp-buy-header.hyp-hr1-m4a,
.hyp-buy-header.hyp-hr2-m4a {
	color: #7E9577;
}

.hyp-format-inline.hyp-mp3 {
	color: #975B8E;
}
.hyp-format-inline.hyp-flac {
	color: #6882A4;
}
.hyp-format-inline.hyp-alac {
	color: #7E9577;
}

.hyp-trackgroup-start-1 td {
	font-size: 75%;
	text-transform:uppercase;
	padding-top:20px !important;
}
.hyp-trackgroup-start-2 td {
	font-size: 120%;
	font-weight: bold;
	opacity: 0.6;
	padding-top:25px !important;
}
.hyp-trackgroup-end {
	height: 15px;
}

.hyp-tracktime {
	font-size: 90%; /* NB this is relative to the work/subwork title font size */
	font-weight: normal;
}
.hyp-recdate {
	font-size: 90%; /* NB this is relative to the dc-worktitle font size */
	font-weight: normal;
	font-style: italic;
}

.hyp-opus {
	font-size: 90%;	/* Relative to dc-worktitle size */
	font-weight: normal;
}

.hyp-td-albumno div {
	font-size: 80%;
	padding-right: 5px;
	color: #888888;
}
.hyp-td-trackno div {
	font-size: 80%;
	padding-right: 5px;
	text-align: right;
}

div.hyp-alblist-buttonsrow .hyp-btn-listen, td.hyp-alblist-entry .hyp-btn-listen {
	margin-right: 9px;
}

.hyp-freedownloadtrack {
	color: #B24736;
	font-weight: bold;
	font-size: 75%;
	margin-left: 4px;
}

/* Notes/text buttons within the tracklisting (and elsewhere?) */
.hyp-sungtext-container, .hyp-notes-container {
	/*background-color: #F1EACE;*/
	background-color: #EBEBEB;
	
 	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;	
	-moz-border-radius: 4px;
	border-radius: 4px;
	
	line-height: 1.4;
	
	white-space: normal;
}
.hyp-sungtext, .hyp-notes {
	padding-bottom: 5px;
	padding-left: 5px;
	padding-right: 5px;
	margin-top: 3px;
	/*
	white-space: normal; !important

 	-webkit-border-radius: 8px;
	-khtml-border-radius: 8px;	
	-moz-border-radius: 8px;
	border-radius: 8px;
	*/
}
.hyp-sungtext-text, .hyp-notes-text {
	font-size: 85%;
	letter-spacing: 0px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-right: 10px;
	margin-top: 2px;
	/*white-space: normal;*/
}
.hyp-sungtext-text p, .hyp-notes-text p {
	margin-top: 5px;
}
.w-notes-title {
	font-size: 75%;
	font-weight: bold;
	margin-bottom: 5px;
}
.t-text {
	margin-top: 5px;
	margin-left: 0px;
	max-width: 740px;
}
/* NOT REQUIRED?
.t-sungtext-label, .t-notes-label, .w-sungtext-label {
	font-size: 70%;
}
*/





/* Styles connected with custom tags */
.hyp-tag-audioclip, .hyp-tag-audioclip a, .hyp-tag-audioclip a:link, 
.hyp-tag-audioclip a:visited, .hyp-tag-audioclip a:active {
 color: #B01830;
}
.hyp-tag-audioclip a:hover {
 color: #580C18;
}

.hyp-tag-link-artist, .hyp-tag-link-artist a, .hyp-tag-link-artist a:link, .hyp-tag-link-artist a:visited, .hyp-tag-link-artist a:active,
.hyp-tag-link-album, .hyp-tag-link-album a, .hyp-tag-link-album a:link, .hyp-tag-link-album a:visited, .hyp-tag-link-album a:active,
.hyp-tag-link-composer, .hyp-tag-link-composer a, .hyp-tag-link-composer a:link, .hyp-tag-link-composer a:visited, .hyp-tag-link-composer a:active,
.hyp-tag-link-work, .hyp-tag-link-work a, .hyp-tag-link-work a:link, .hyp-tag-link-work a:visited, .hyp-tag-link-work a:active,
.hyp-tag-link-track, .hyp-tag-link-track a, .hyp-tag-link-track a:link, .hyp-tag-link-track a:visited, .hyp-tag-link-track a:active
{
	color: #B01830;
}

.hyp-tag-link-artist a:hover, .hyp-tag-link-album a:hover, .hyp-tag-link-composer a:hover, .hyp-tag-link-work a:hover, .hyp-tag-link-track a:hover  {
	color: #580C18;
}

 
/* Artist/composer pages */
.hyp-picture {
}

@media (min-width: 768px) {
	.hyp-picture {
		float: left;
		margin-right: 20px;
		margin-bottom: 20px;
	}
}


.hyp-picturecredit {
	font-size: 80%;
}

.hyp-picturecaption {
	font-size: 90%;
	/*max-width: 250px;*/
}

.hyp-web, .hyp-email, .hyp-agent, .hyp-borndied, .hyp-country {
	font-size: 80%;
}
.hyp-seealso {
	margin-bottom: 5px;
	font-size: 80%;
	font-weight: bold;
}

h4.hyp-quote {
	color: #808080;
}

.hyp-notestext {
	margin-left: 2px;
}



/* Works list and other lists e.g. n.asp lists of albums */
.hyp-list .hyp-entrytitle {
	/*font-size: 90%;*/
	font-weight: bold;
}
/*.hyp-list .hyp-workartists {
	font-size: 80%;
}*/
.hyp-list .hyp-entryinfo {
	font-size: 90%; /* Was 80% */
}
.hyp-list .hyp-entrysmallprint {
	font-size: 80%;
	margin-left: 1em; 
}



/* People and misc lists in search results */
.hyp-personlist-name {
	font-weight: bold;
}
.hyp-personlist-info {
	font-size: 90%;
}
.hyp-misclist-title {
	font-weight: bold;
	font-size: 90%;
}
.hyp-misclist-info {
	font-size: 85%;
	padding-left: 25px;
	padding-bottom: 3px;
}



/* Styles for the templated information pages */
.hyp-pagecontent {
	border-bottom: 1px #D7C29A solid;
	margin-bottom: 10px;	
}


/* Styles for Twitter Typeahead */
.tt-query,
.tt-hint {
/*
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    outline: none;
*/
}

.tt-query {
/*
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
*/
}

.tt-hint {
    color: #BABABA;
}

.tt-dropdown-menu {
	width: 422px;
	background-color: #fff;
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, 0.2);
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
	-moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
	box-shadow: 0 5px 10px rgba(0,0,0,.2);
	margin-top: 4px; /*12px;*/
	padding: 8px 0;

	max-height: 400px;
	overflow-y: auto;
}
.tt-suggestion:hover {
	cursor: pointer;
	background-color: #EBEBEB;
}

.tt-suggestion {
/*
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
*/
}

.tt-cursor {
	background-color: #EBEBEB;
}
.tt-suggestion.tt-is-under-cursor {
	background-color: #EBEBEB;
/*
    color: #fff;
    background-color: #0097cf;
*/
}

.tt-suggestion p {
/*
    margin: 0;
*/
}


/* Print-specific things here */
@media print {
	/* Get rid of printed URLs */
	a[href]:after {
		content: none;
	}
  
  	/* Hide buttons */
	.hyp-buttongrid {
		display: none !important;
	}  	
  
	/* Get rid of studio masters messages */
	.hyp-studiomastersmsg-text, .hyp-studiomastersmsg-inline {
		display: none !important;
	}
	
	/* Get rid of all buy, listen and info buttons, and the 'Other buying options' button (via dropdown-toggle), and the 'more' links */
	.hyp-btn-listen, .hyp-td-listen,
	.hyp-btn-buy, .hyp-td-buy, .hyp-btn-buy-work,
	.hyp-btn-info,
	.dropdown-toggle,
	.dropdown-menu,
	.hyp-dialogtrigger {
		display: none !important;
	}
	
	/* Get rid of Facebook badge (needs the important because its CSS is mangled in javaScript after page load */
	.hyp-facebook {
		display: none !important;
	}
	
	/* Get rid of return-to-top link */
	.hyp-returntotop {
		display: none;
	}
	
	/* Get rid of any inactive tabs */
	ul.nav-tabs > li {
		display: none;
	}
	ul.nav-tabs > li.active {
		display: block;
	}
	
	/* Get rid of the footer links */
	footer {
		display: none;
	}
	
	/* Get rid of the cookie notification box and the new user box */
	#cc-notification, #hyp-newuser {
		display: none !important;
	}
	
	/* Get rid of the audio player */
	#extractjcontainer {
		display: none !important;
	}
	
	/* Make sure the track listing prints properly */
	.table-responsive>.table>thead>tr>th, .table-responsive>.table>tbody>tr>th, 
	.table-responsive>.table>tfoot>tr>th, .table-responsive>.table>thead>tr>td, 
	.table-responsive>.table>tbody>tr>td, .table-responsive>.table>tfoot>tr>td {
		white-space: normal;
	}	
	
	/* Make sure the album list splurge is always visible for printing */
	.hyp-alblist-splurge {
		display: block !important;
	}
	
	/* Selective hiding */
	.hyp-hidden-xs-print {
		display: none !important;
	}
	.hyp-visible-xs-print {
		display: block !important;
	}
	
	/* On dc, make sure that the album cover floats lefts when printing.
	Similarly composer/artist pictures */
	.hyp-albumcover, .hyp-picture {
		float: left;
	}
	
	/* Hide the inactive tabs of the top pagination on the catalogue pages */
	ul.pagination > li {
		display: none;
	}
	ul.pagination > li.active {
		display: block;
	}
	
}


/* LOADING SPINNER */
#hyp-loader {
	z-index: 1000;
}
#floatingBarsG{
/*position:relative;*/
	position: fixed;
	width:100px;
	height:124px;
	top: 40%;
	left: 50%;
	margin-left: -50px;
	z-index: 1000;
}

.blockG{
position:absolute;
background-color:#FFFFFF;
width:16px;
height:39px;
-moz-border-radius:13px 13px 0 0;
-moz-transform:scale(0.4);
-moz-animation-name:fadeG;
-moz-animation-duration:1.1199999999999999s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:13px 13px 0 0;
-webkit-transform:scale(0.4);
-webkit-animation-name:fadeG;
-webkit-animation-duration:1.1199999999999999s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:13px 13px 0 0;
-ms-transform:scale(0.4);
-ms-animation-name:fadeG;
-ms-animation-duration:1.1199999999999999s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:13px 13px 0 0;
-o-transform:scale(0.4);
-o-animation-name:fadeG;
-o-animation-duration:1.1199999999999999s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:13px 13px 0 0;
transform:scale(0.4);
animation-name:fadeG;
animation-duration:1.1199999999999999s;
animation-iteration-count:infinite;
animation-direction:linear;
}

#rotateG_01{
left:0;
top:45px;
-moz-animation-delay:0.41999999999999993s;
-moz-transform:rotate(-90deg);
-webkit-animation-delay:0.41999999999999993s;
-webkit-transform:rotate(-90deg);
-ms-animation-delay:0.41999999999999993s;
-ms-transform:rotate(-90deg);
-o-animation-delay:0.41999999999999993s;
-o-transform:rotate(-90deg);
animation-delay:0.41999999999999993s;
transform:rotate(-90deg);
}

#rotateG_02{
left:13px;
top:16px;
-moz-animation-delay:0.5599999999999999s;
-moz-transform:rotate(-45deg);
-webkit-animation-delay:0.5599999999999999s;
-webkit-transform:rotate(-45deg);
-ms-animation-delay:0.5599999999999999s;
-ms-transform:rotate(-45deg);
-o-animation-delay:0.5599999999999999s;
-o-transform:rotate(-45deg);
animation-delay:0.5599999999999999s;
transform:rotate(-45deg);
}

#rotateG_03{
left:42px;
top:5px;
-moz-animation-delay:0.7s;
-moz-transform:rotate(0deg);
-webkit-animation-delay:0.7s;
-webkit-transform:rotate(0deg);
-ms-animation-delay:0.7s;
-ms-transform:rotate(0deg);
-o-animation-delay:0.7s;
-o-transform:rotate(0deg);
animation-delay:0.7s;
transform:rotate(0deg);
}

#rotateG_04{
right:13px;
top:16px;
-moz-animation-delay:0.8399999999999999s;
-moz-transform:rotate(45deg);
-webkit-animation-delay:0.8399999999999999s;
-webkit-transform:rotate(45deg);
-ms-animation-delay:0.8399999999999999s;
-ms-transform:rotate(45deg);
-o-animation-delay:0.8399999999999999s;
-o-transform:rotate(45deg);
animation-delay:0.8399999999999999s;
transform:rotate(45deg);
}

#rotateG_05{
right:0;
top:45px;
-moz-animation-delay:0.9799999999999999s;
-moz-transform:rotate(90deg);
-webkit-animation-delay:0.9799999999999999s;
-webkit-transform:rotate(90deg);
-ms-animation-delay:0.9799999999999999s;
-ms-transform:rotate(90deg);
-o-animation-delay:0.9799999999999999s;
-o-transform:rotate(90deg);
animation-delay:0.9799999999999999s;
transform:rotate(90deg);
}

#rotateG_06{
right:13px;
bottom:11px;
-moz-animation-delay:1.1199999999999999s;
-moz-transform:rotate(135deg);
-webkit-animation-delay:1.1199999999999999s;
-webkit-transform:rotate(135deg);
-ms-animation-delay:1.1199999999999999s;
-ms-transform:rotate(135deg);
-o-animation-delay:1.1199999999999999s;
-o-transform:rotate(135deg);
animation-delay:1.1199999999999999s;
transform:rotate(135deg);
}

#rotateG_07{
bottom:0;
left:42px;
-moz-animation-delay:1.26s;
-moz-transform:rotate(180deg);
-webkit-animation-delay:1.26s;
-webkit-transform:rotate(180deg);
-ms-animation-delay:1.26s;
-ms-transform:rotate(180deg);
-o-animation-delay:1.26s;
-o-transform:rotate(180deg);
animation-delay:1.26s;
transform:rotate(180deg);
}

#rotateG_08{
left:13px;
bottom:11px;
-moz-animation-delay:1.4s;
-moz-transform:rotate(-135deg);
-webkit-animation-delay:1.4s;
-webkit-transform:rotate(-135deg);
-ms-animation-delay:1.4s;
-ms-transform:rotate(-135deg);
-o-animation-delay:1.4s;
-o-transform:rotate(-135deg);
animation-delay:1.4s;
transform:rotate(-135deg);
}

@-moz-keyframes fadeG{
0%{
background-color:#B01830}

100%{
background-color:#FFFFFF}

}

@-webkit-keyframes fadeG{
0%{
background-color:#B01830}

100%{
background-color:#FFFFFF}

}

@-ms-keyframes fadeG{
0%{
background-color:#B01830}

100%{
background-color:#FFFFFF}

}

@-o-keyframes fadeG{
0%{
background-color:#B01830}

100%{
background-color:#FFFFFF}

}

@keyframes fadeG{
0%{
background-color:#B01830}

100%{
background-color:#FFFFFF}

}