/*
New basic styles to override browser defaults
*/

/*
First, zero-out unwanted attributes assigned by the browser

Do the following:
1. Remove underlines from links
2. Remove bullets/markers from lists
3. Undo font sizes for headings and for pre and code blocks
4. Undo font change for addresses
5. Remove padding/margins for headings, paragraphs, lists and other blocks
6. Remove borders from linked images
7. Clear table styles
*/

:link,:visited { text-decoration: none; }

ul,ol { list-style: none; }

h1,h2,h3,h4,h5,h6,pre,code { font-size: 1em; }

address { font-style: normal; }

html,body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,blockquote,pre,form,fieldset,input { margin: 0; padding: 0; }

a img,:link img,:visited img { border: none; }

table { border-spacing: 0; text-align: left; }

th { font-weight: normal; }

/*
Next, define basic style characteristics to suit this site
*/

/* I've commented out the SVG fonts for the time being because they completely crash Safari on the iPad under iOS 3 */

@font-face {
	font-family: 'Panache';
	src: url('../fonts/panache-book-webfont.eot');
	src: local('☺'), url('../fonts/panache-book-webfont.woff') format('woff'), url('../fonts/panache-book-webfont.ttf') format('truetype');
	/*	src: local('☺'), url('../fonts/panache-book-webfont.woff') format('woff'), url('../fonts/panache-book-webfont.ttf') format('truetype'), url('../fonts/panache-book-webfont.svg#webfontUlmZHnBn') format('svg');*/
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Panache';
	src: url('../fonts/panache-bookitalic-webfont.eot');
	src: local('☺'), url('../fonts/panache-bookitalic-webfont.woff') format('woff'), url('../fonts/panache-bookitalic-webfont.ttf') format('truetype');
	/*	src: local('☺'), url('../fonts/panache-bookitalic-webfont.woff') format('woff'), url('../fonts/panache-bookitalic-webfont.ttf') format('truetype'), url('../fonts/panache-bookitalic-webfont.svg#webfontTlzZTQZM') format('svg');*/
	font-weight: normal;
	font-style: italic;
}

@font-face {
	font-family: 'Panache';
	src: url('../fonts/panache-bold-webfont.eot');
	src: local('☺'), url('../fonts/panache-bold-webfont.woff') format('woff'), url('../fonts/panache-bold-webfont.ttf') format('truetype');
	/*	src: local('☺'), url('../fonts/panache-bold-webfont.woff') format('woff'), url('../fonts/panache-bold-webfont.ttf') format('truetype'), url('../fonts/panache-bold-webfont.svg#webfont0AAi7WYT') format('svg');*/
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Panache';
	src: url('../fonts/panache-bolditalic-webfont.eot');
	src: local('☺'), url('../fonts/panache-bolditalic-webfont.woff') format('woff'), url('../fonts/panache-bolditalic-webfont.ttf') format('truetype');
	/*	src: local('☺'), url('../fonts/panache-bolditalic-webfont.woff') format('woff'), url('../fonts/panache-bolditalic-webfont.ttf') format('truetype'), url('../fonts/panache-bolditalic-webfont.svg#webfont9mqwshnU') format('svg');*/
	font-weight: bold;
	font-style: italic;
}

@font-face {
	font-family: 'Panache-Black';
	src: url('../fonts/panache-black-webfont.eot');
	src: local('☺'), url('../fonts/panache-black-webfont.woff') format('woff'), url('../fonts/panache-black-webfont.ttf') format('truetype');
	/*	src: local('☺'), url('../fonts/panache-black-webfont.woff') format('woff'), url('../fonts/panache-black-webfont.ttf') format('truetype'), url('../fonts/panache-black-webfont.svg#webfontMt7O2dZq') format('svg');*/
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'Panache-Black';
	src: url('../fonts/panache-blackitalic-webfont.eot');
	src: local('☺'), url('../fonts/panache-blackitalic-webfont.woff') format('woff'), url('../fonts/panache-blackitalic-webfont.ttf') format('truetype');
	/*	src: local('☺'), url('../fonts/panache-blackitalic-webfont.woff') format('woff'), url('../fonts/panache-blackitalic-webfont.ttf') format('truetype'), url('../fonts/panache-blackitalic-webfont.svg#webfontnyYuDngh') format('svg');*/
	font-weight: bold;
	font-style: italic;
}

body {
	background: rgb(236, 233, 218) url(../images/bg.jpg) repeat;
	font-family: "Panache", "Verdana", sans-serif;
	font-size: 1em;
	margin-top: 155px;
}

p {
	text-align: justify;
}

blockquote {
	margin-left: 2em;
	font-style: italic;
}

code {
	font-family: "Andale Mono", "Courier New", "Courier", monospace;
}

a.email {
	background: url(../images/EmailC.png) no-repeat left top;
	padding-left: 20px;
}

a.email:hover {
	background: url(../images/EmailO.png) no-repeat left center;
	padding-left: 20px;
}

a:link, a:visited { color: #800080; font-weight: bold; text-shadow: #666666 1px 1px 1px; }
a:hover { text-decoration: underline; }
a:active { color: #ff0000; }

a.alt:link, a.alt:visited { color: #387272; font-weight: bold; text-shadow: #666666 1px 1px 1px; }
a.alt:hover { text-decoration: underline; }
a.alt:active { color: #ff0000; }

h1, h3, h5 { color: #800080; }
h2, h4, h6 { color: #387272; }
h1, h2, h3 { text-shadow: #666666 2px 2px 2px; }
h4, h5, h6 { text-shadow: #666666 1px 1px 1px; }
h1, h2, h5, h6 { font-weight: bold; }
h4, h6 { font-style: italic; }

h1 { font-size: 2.8em; font-weight: bold; font-family: "Panache-Black", "Panache", "Verdana", sans-serif; }
h2, h3 { font-size: 2em; }
h4 { font-size: 1.4em; }
h5, h6 { font-size: 1.2em; }

h2 a:link, h2 a:visited { color: #387272; text-shadow: #666666 2px 2px 2px; }
h4 a:link, h4 a:visited { color: #387272; }
h2 a:active, h4 a:active { color: #ff0000; }

.newsheading { color: #387272; }

.hidden { display: none; }

#MainContent {
	margin-left: 212px;
}

#MainContent p, #MainContent blockquote, #MainContent table {
	margin-right: 32px;
	padding-bottom: 0.6em;
}

#MainContent h1, #MainContent h2, #MainContent h3, #MainContent h4, #MainContent h5, #MainContent h6 {
	margin-right: 32px;
}

#MainContent ol {
	list-style: decimal;
	padding-left: 1.5em;
	margin-right: 16px;
	padding-bottom: 0.6em;
}

#MainContent ul {
	list-style: disc;
	padding-left: 1.5em;
	margin-right: 16px;
	padding-bottom: 0.6em;
}

#MainContent div.NewsColumns div.NewsLeft p,
#MainContent div.NewsColumns div.NewsLeft blockquote,
#MainContent div.NewsColumns div.NewsLeft table {
	margin-right: 16px;
}

.NewsColumns {
	display: table;
}

.NewsColumns div.NewsLeft {
	display: table-cell;
	width: 65%;
}

.NewsColumns div.NewsRight {
	display: table-cell;
	width: 35%;
	font-size: 80%;
	padding-left: 8px;
	background-color: rgba(255, 255, 255, .33);
	border-left: 2px solid #800080;
}

/* Misc. effects */

.float-right { float: right; margin-left: 16px; }
.float-left { float: left; margin-right: 16px; }
.float-right-with-margin { float: right; margin-left: 16px; margin-right: 32px; }
.float-right-no-margin { float: right; margin-left: 0px; }
.float-left-no-margin { float: left; margin-right: 0px; }

.clear { clear: both; }
.clear-left { clear: left; }
.clear-right { clear: right; }

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

.highlight { color: #ff0000; }
.spot-colour { color: #800080; }

.person { color: #387272; font-weight: bold; }
.work { color: #800080; font-weight: bold; }

.number-list { list-style: decimal; padding-left: 1.5em; }
.bullet-list { list-style: disc; padding-left: 1.5em; }

.space-before { margin-top: 0.6em; }
.space-after { margin-bottom: 0.6em; }

.para-space { line-height: 0.6em; }

.no-space-after { padding-bottom: 0; }
.no-margin-right { margin-right: 0 !important; }

.print-only { display: none; }

div.hr { height: 25px; background: url(../images/hr.png) repeat-x; margin-top: 1em; margin-bottom: 1em; margin-left: -16px; overflow: hidden; }
div.hr hr { display: none; }
.NewsRight div.hr { margin-left: -8px; }

/* News archive category filter tabs */
.fm-news-category-tabs { margin: 0.75em 0 1.25em; }
.fm-news-cat-tab {
	display: inline-block;
	margin: 0 4px 4px 0;
	padding: 3px 10px;
	border: 1px solid #999;
	text-decoration: none;
	color: #333;
	background: #f5f5f5;
	font-size: 0.9em;
}
.fm-news-cat-tab:hover { background: #e0e0e0; }
.fm-news-cat-tab-active { background: #3c5a83; color: #fff; border-color: #3c5a83; }
.fm-news-cat-tab-active:hover { background: #3c5a83; color: #fff; }

/*
Styles used by the navigation area
*/

#NavAreaTop {
	position: fixed;
	z-index: 10;
	left: 0px; top: 0px;
	width: 100%; height: 155px;
	background-image: url(../images/top.png);
	background-repeat: repeat-x;
	padding-left: 242px;
}

#HarrietHampton {
	position: fixed;
	left: 12px; top: 12px;
	width: 162px; height: 223px;
}

#FadeLines {
	position: fixed;
	z-index: 15;
	left: 212px; top: 57px;
	width: 29px; height: 58px;
	background-image: url(../images/fade.png);
	background-repeat: no-repeat;
}

.NavHeader {
	position: fixed;
	top: 66px; left: 256px; height: 40px;
	font-family: "Panache-Black", "Panache", "Verdana", sans-serif;
	font-size: xx-large; font-weight: bold;
	color: black;
	text-transform: uppercase;
	text-align: left;
	overflow: hidden;
}

#NavAreaLeft {
	position: fixed;
	z-index: 20;
	left: 0px; top: 0px;
	width: 212px; height: 944px;
	background-image: url(../images/left.png);
	background-repeat: no-repeat;
}

#NavAreaLeft a, #NavAreaTop a {
	display: inline-block;
}

#NavAreaLeft a:link, #NavAreaLeft a:visited, #NavAreaLeft a:hover,
#NavAreaTop a:link, #NavAreaTop a:visited, #NavAreaTop a:hover
{ text-decoration: none; }

a#TabMusic, a#TabMusicON {
	position: fixed; left: 241px; top: 14px;
	width: 109px; height: 48px; line-height: 48px;
	background-image: url(../images/menu/music.png);
}

a#TabBooks, a#TabBooksON {
	position: fixed; left: 350px; top: 14px;
	width: 109px; height: 48px; line-height: 48px;
	background-image: url(../images/menu/books.png);
}

a#TabRecordings, a#TabRecordingsON {
	position: fixed; left: 459px; top: 14px;
	width: 176px; height: 48px; line-height: 48px;
	background-image: url(../images/menu/recordings.png);
}

a#TabAll, a#TabAllON {
	position: fixed; left: 635px; top: 14px;
	width: 60px; height: 48px; line-height: 48px;
	background-image: url(../images/menu/all.png);
}

a#TabCovers, a#TabCoversON {
	position: fixed; left: 241px; top: 73px;
	width: 91px; height: 42px; line-height: 42px;
	background-image: url(../images/menu/covers.png);
}

a#TabTitles, a#TabTitlesON {
	position: fixed; left: 332px; top: 73px;
	width: 75px; height: 42px; line-height: 42px;
	background-image: url(../images/menu/titles.png);
}

a#TabComposers, a#TabComposersON {
	position: fixed; left: 407px; top: 73px;
	width: 142px; height: 42px; line-height: 42px;
	background-image: url(../images/menu/composers.png);
}

a#TabAuthors, a#TabAuthorsON {
	position: fixed; left: 407px; top: 73px;
	width: 103px; height: 42px; line-height: 42px;
	background-image: url(../images/menu/authors.png);
}

a#TabCategories, a#TabCategoriesON {
	position: fixed; left: 549px; top: 73px;
	width: 146px; height: 42px; line-height: 42px;
	background-image: url(../images/menu/instruments.png);
}

a#TabInstruments, a#TabInstrumentsON {
	position: fixed; left: 549px; top: 73px;
	width: 146px; height: 42px; line-height: 42px;
	background-image: url(../images/menu/instruments.png);
}

a#ButtonNews, a#ButtonNewsON, a#ButtonChangelogON {
	position: fixed; left: 12px; top: 264px;
	width: 161px; height: 40px; line-height: 40px;
	background-image: url(../images/menu/news.png);
}

a#ButtonArchive, a#ButtonArchiveON {
	float: left; margin-right: 16px; margin-top: -13px;
	width: 161px; height: 40px; line-height: 40px;
	background-image: url(../images/menu/archive.png);
}

/*
a#ButtonWine, a#ButtonWineON {
position: fixed; left: 12px; top: 302px;
width: 161px; height: 40px; line-height: 40px;
background-image: url(../images/menu/wine.png);
}
*/

a#ButtonInfo, a#ButtonInfoON {
	position: fixed; left: 12px; top: 302px;
	width: 161px; height: 40px; line-height: 40px;
	background-image: url(../images/menu/info.png);
}

a#TabMusic:hover,
a#TabBooks:hover,
a#TabRecordings:hover,
a#TabAll:hover
{ background-position: 0 -48px; }

a#TabCovers:hover,
a#TabTitles:hover,
a#TabComposers:hover,
a#TabAuthors:hover,
a#TabCategories:hover
{ background-position: 0 -42px; }

a#ButtonChangelogON        { background-position: 0 0; }
a#ButtonChangelogON:hover  { background-position: 0 -40px; }
a#ButtonChangelogON:active { background-position: 0 -160px; }
a#ButtonNews               { background-position: 0 -80px; }
a#ButtonNews:hover         { background-position: 0 -120px; }
a#ButtonNews:active        { background-position: 0 -160px; }
a#ButtonNewsON             { background-position: 0 -160px; }
/*
Now that the Latest News button is no longer a two-page toggle,
the hover-state isn't needed when it's selected.

a#ButtonNewsON:hover      { background-position: 0 -120px; }
*/

a#ButtonWine:hover,
a#ButtonArchive:hover,
a#ButtonInfo:hover
{ background-position: 0 -40px; }

a#TabMusic:active, a#TabMusicON,
a#TabBooks:active, a#TabBooksON,
a#TabRecordings:active, a#TabRecordingsON,
a#TabAll:active, a#TabAllON
{ background-position: 0 -96px; }

a#TabCovers:active, a#TabCoversON,
a#TabTitles:active, a#TabTitlesON,
a#TabComposers:active, a#TabComposersON,
a#TabAuthors:active, a#TabAuthorsON,
a#TabCategories:active, a#TabCategoriesON,
a#TabInstruments:active, a#TabInstrumentsON
{ background-position: 0 -84px; }

a#ButtonWine:active, a#ButtonWineON,
a#ButtonArchive:active, a#ButtonArchiveON,
a#ButtonInfo:active, a#ButtonInfoON { background-position: 0 -80px; }

/* Gardens of Fand (social media buttons): */
a#YouTube-Button, a#GooglePlus-Button { background-position: 0 -128px; }
a#YouTube-Button:hover, a#GooglePlus-Button:hover { background-position: 0 -64px; z-index: 999; }
a#YouTube-Button:active, a#GooglePlus-Button:active { background-position: 0 0; z-index: 999; }

.playcontrol-container { width: 155px; height: 16px; line-height: 16px; margin: 2px 0px 4px 8px; display: inline-block; vertical-align: bottom; }
.playcontrol-gadget { width: 155px; height: 16px; }

#Hidden-Controls { position: fixed; right: 32px; top: 68px; }

#PayPal-area {
	position: fixed; left: 12px; top: 359px;
	width: 161px; height: 84px; line-height: 84px;
	background-image: url(../images/paypal.png);
	background-repeat: no-repeat;
}

#PayPal-area input.button {
	/*	position: relative; left: 28px; top: 11px; width: 107px; height: 26px; */
	position: fixed; left: 40px; top: 391px; width: 107px; height: 26px;
}

#AddToCart {
	display: inline-block;
	padding: 8px 16px 16px 16px;
	margin: 6px;
	background-color: white;
	background-image: url(../images/table-tile.png), -moz-linear-gradient(top, rgba(128,0,128,.33), rgba(128,0,128,0) 20%, rgba(56,114,114,0) 80%, rgba(56,114,114,.33));
	background-image: url(../images/table-tile.png), -o-linear-gradient(top, rgba(128,0,128,.33), rgba(128,0,128,0) 20%, rgba(56,114,114,0) 80%, rgba(56,114,114,.33));
	background-image: url(../images/table-tile.png), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(128,0,128,.33)), to(rgba(56,114,114,.33)), color-stop(0.2, rgba(128,0,128,0)), color-stop(0.8, rgba(56,114,114,0)));
	background-position: center;
	background-repeat: repeat;
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: #800080;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-bottom-color: #387272;
}

#AddToCart p {
	text-align: center;
	font-weight: bold;
	font-size: xx-large;
	padding: 0; margin: 0;
}

#AddToCart p.na {
	text-align: center;
	font-weight: normal;
	font-style: italic;
	font-size: small;
	padding: 8px 0 0 0; margin: 0;
}

#AddToCart p.na a.email { font-size: medium; }

/* Gardens of Fand (social media buttons): */
a#YouTube-Button {
	/* position: fixed; left: 12px; bottom: 12px; */
	position: fixed; right: 2px; top: 2px;
	width: 64px; height: 64px; line-height: 64px;
	background-image: url(../images/yt-button.png);
}

a#GooglePlus-Button {
	/* position: fixed; left: 48px; bottom: 12px; */
	position: fixed; right: 38px; top: 2px;
	width: 64px; height: 64px; line-height: 64px;
	background-image: url(../images/g+-button.png);
}

/*
Table styles
*/

.InfoTables {
	width: 22em;
}

.ChangeLog-date {
	width: 8em;
}

.telephone {
	font-size: x-large;
	color: black;
	font-family: "Panache-Black", "Panache", "Verdana", sans-serif;
	font-weight: bold;
	line-height: 2em;
	text-align: center;
}

.EventDetails th, .EventDetails td {
	vertical-align: top;
	padding: 0 0.4em 0 0.4em;
}

.EventDetails th {
	text-align: right; font-style: italic;
}

.ProdTable .Composer, .ListTable .Composer {
	font-weight: bold;
}

.ProdTable a.Composer:link, .ProdTable a.Composer:visited,
.ListTable a.Composer:link, .ListTable a.Composer:visited { color: black; }
.ProdTable a.Composer:active, .ProdTable a.Title:active,
.ListTable a.Composer:active, .ListTable a.Title:active { color: #ff0000; }

.ProdTable .Title, .ListTable .Title {
	font-size: x-large;
	color: #800080;
	font-family: "Panache-Black", "Panache", "Verdana", sans-serif;
	font-weight: bold;
}

.ProdTable .Subtitle, .ListTable .Subtitle {
	font-size: large;
	font-weight: bold;
	color: #387272;
}

.ProdTable .Notes, .ListTable .Notes {
	font-size: medium;
	font-style: italic;
}

.ProdTable .Group {
	font-style: italic;
}

.ProdTable .Work {
	font-weight: bold;
	color: #387272;
}

.ProdTable .Info {
	font-style: italic;
}

.ProdTable th, .ListTable th {
	vertical-align: middle;
	font-weight: bold;
	line-height: 100%;
	padding: 0.25em 0.4em 0.35em 0.4em;
}

.ProdTable td  {
	vertical-align: baseline;
	padding: 0 0.4em 0 0.4em;
}

.ListTable td  {
	vertical-align: middle; text-align: center;
	padding: 0 0.4em 0 0.4em;
}

.ListTable td.left  {
	vertical-align: middle; text-align: left;
	padding: 0 0.4em 0 0.4em;
}

.ListTable .ItemCover {
	vertical-align: middle;
}

.ListTable .ExtraRows {
	height: 2em;
}

.ListTable .ExtraRows td {
	text-align: left;
	font-size: small;
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: #800080;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-bottom-color: #387272;
}

.ProdTable .span {
	background-image: url(../images/table-tile.png), -moz-linear-gradient(top, rgba(128,0,128,.33), rgba(128,0,128,0) 20%, rgba(56,114,114,0) 80%, rgba(56,114,114,.33));
	background-image: url(../images/table-tile.png), -o-linear-gradient(top, rgba(128,0,128,.33), rgba(128,0,128,0) 20%, rgba(56,114,114,0) 80%, rgba(56,114,114,.33));
	background-image: url(../images/table-tile.png), -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(128,0,128,.33)), to(rgba(56,114,114,.33)), color-stop(0.2, rgba(128,0,128,0)), color-stop(0.8, rgba(56,114,114,0)));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1A800080', endColorstr='#1A387272');
	background-position: center;
	background-repeat: repeat;
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: #800080;
	border-bottom-style: solid;
	border-bottom-width: 2px;
	border-bottom-color: #387272;
}

.ProdTable .span-plain {
	background-image: url(../images/table-tile.png);
	background-position: center;
	background-repeat: repeat;
}

.table-tl {
	background-image: url(../images/table-tl.png);
	width: 6px; height: 6px; padding: 0 !important;
	background-repeat: no-repeat;
	background-position: bottom right;
}

.table-t {
	background-image: url(../images/table-t.png);
	height: 6px; padding: 0 !important;
	background-repeat: repeat-x;
	background-position: bottom;
}

.table-tr {
	background-image: url(../images/table-tr.png);
	width: 8px; height: 6px; padding: 0 !important;
	background-repeat: no-repeat;
	background-position: bottom left;
}

.table-l {
	background-image: url(../images/table-l.png);
	width: 6px; padding: 0 !important;
	background-repeat: repeat-y;
	background-position: right;
}

.table-r {
	background-image: url(../images/table-r.png);
	width: 8px; padding: 0 !important;
	background-repeat: repeat-y;
	background-position: left;
}

.table-bl {
	background-image: url(../images/table-bl.png);
	width: 6px; height: 8px; padding: 0 !important;
	background-repeat: no-repeat;
	background-position: top right;
}

.table-b {
	background-image: url(../images/table-b.png);
	height: 8px; padding: 0 !important;
	background-repeat: repeat-x;
	background-position: top;
}

.table-br {
	background-image: url(../images/table-br.png);
	width: 8px; height: 8px; padding: 0 !important;
	background-repeat: no-repeat;
	background-position: top left;
}

.table-stripe0 {
	background-color: white;
	background-image: -moz-linear-gradient(top, #FFFFFF, #EEEEEE);
	background-image: -o-linear-gradient(top, #FFFFFF, #EEEEEE);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EEEEEE));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#EEEEEE');
}

.table-stripe1 {
	background-color: #DDEEEE;
	background-image: -moz-linear-gradient(top, #CCDDDD, #DDEEEE);
	background-image: -o-linear-gradient(top, #CCDDDD, #DDEEEE);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCDDDD), to(#DDEEEE));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CCDDDD', endColorstr='#DDEEEE');
}

.table-stripe2, .table-stripe-1 {
	background-color: #FFEEFF;
	background-image: -moz-linear-gradient(top, #EEDDEE, #FFEEFF);
	background-image: -o-linear-gradient(top, #EEDDEE, #FFEEFF);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEDDEE), to(#FFEEFF));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#EEDDEE', endColorstr='#FFEEFF');
}

/* This one is used for the Product Info line: the first row of info in all product tables: */
.table-stripe3 {
	background-color: white;
	background-image: -moz-linear-gradient(top, #FFFFFF, #DDDDDD);
	background-image: -o-linear-gradient(top, #FFFFFF, #DDDDDD);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#DDDDDD));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#DDDDDD');
}

.table-headstripe0 {
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: black;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: black;
	background-color: black;
	background-image: -moz-linear-gradient(top, #000000, #888888 20%, #222222 50%, #555555 85%, #000000);
	background-image: -o-linear-gradient(top, #000000, #888888 20%, #222222 50%, #555555 85%, #000000);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#000000), to(#000000), color-stop(0.2, #888888), color-stop(0.5, #222222), color-stop(0.85, #555555));
	color: white;
}

.table-headstripe1 {
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: black;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: black;
	background-color: #387272;
	background-image: -moz-linear-gradient(top, #387272, #ACBABA 20%, #498383 50%, #7BA7A7 85%, #387272);
	background-image: -o-linear-gradient(top, #387272, #ACBABA 20%, #498383 50%, #7BA7A7 85%, #387272);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#387272), to(#387272), color-stop(0.2, #ACBABA), color-stop(0.5, #498383), color-stop(0.85, #7BA7A7));
	color: white;
}

.table-headstripe2 {
	border-top-style: solid;
	border-top-width: 1px;
	border-top-color: black;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: black;
	background-color: #800080;
	background-image: -moz-linear-gradient(top, #800080, #DD88DD 20%, #900090 50%, #BB66BB 85%, #800080);
	background-image: -o-linear-gradient(top, #800080, #DD88DD 20%, #900090 50%, #BB66BB 85%, #800080);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#800080), to(#800080), color-stop(0.2, #DD88DD), color-stop(0.5, #900090), color-stop(0.85, #BB66BB));
	color: white;
}

.sort-title {
	font-family: "Panache-Black", "Panache", "Verdana", sans-serif;
	font-weight: bold; color: #ffff00; text-shadow: #666666 1px 1px 1px;
}

.table-headstripe0 a:link, .table-headstripe0 a:visited { color: #ffff00; }
.table-headstripe0 a:active { color: #ff0000; }

/*
Categories page
*/

.Categories {
	border-bottom-color: #CCCCCC;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

.Categories .row0, .row1 {
	padding: 0.25em 0.75em;
}

.Categories h3 {
	font-size: x-large;
	text-shadow: #666666 1px 1px 1px;
	padding-bottom: 0.1em;
}

.Categories p {
	margin-right: 0 !important;
	padding-bottom: 0 !important;
}

.Categories .columns
{
	-webkit-column-count: 3;
	-webkit-column-rule: 1px #888888 solid;
	-moz-column-count: 3;
	-moz-column-rule: 1px #888888 solid;
	column-count: 3;
	column-rule: 1px #888888 solid;
}

.row0 {
	background-image: -moz-linear-gradient(top, rgba(221, 238, 238, .6), rgba(204, 221, 221, .6));
	background-image: -o-linear-gradient(top, rgba(221, 238, 238, .6), rgba(204, 221, 221, .6));
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(221, 238, 238, .6)), to(rgba(204, 221, 221, .6)));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#AADDEEEE', endColorstr='#AACCDDDD');
	border-top-color: #CCCCCC;
	border-top-style: solid;
	border-top-width: 1px;
}

.row1 {
	background-image: -moz-linear-gradient(top, rgba(238, 221, 238, .6), rgba(255, 238, 255, .6));
	background-image: -o-linear-gradient(top, rgba(238, 221, 238, .6), rgba(255, 238, 255, .6));
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(238, 221, 238, .6)), to(rgba(255, 238, 255, .6)));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#AAEEDDEE', endColorstr='#AAFFEEFF');
	border-top-color: #CCCCCC;
	border-top-style: solid;
	border-top-width: 1px;
}

.Categories .row0 h3,
.Categories .row0 a:link,
.Categories .row0 a:hover,
.Categories .row0 a:visited { color: #387272; }
.Categories .row0 a:active { color: #ff0000; }

/*
Quotations
*/

.Quotation-block {
	padding: 1em 0;
}

.Quotation-block a { color: #387272; }
.Quotation-block a:hover { text-decoration: underline !important; text-shadow: #666666 1px 1px 1px; }
.Quotation-block a:active { color: #ff0000; text-decoration: underline !important; text-shadow: #666666 1px 1px 1px; }
/* !important is needed here because text underlining is disabled in the navigation area for buttons etc. */

a.Quotation-URL:link, a.Quotation-URL:visited { color: #800080; text-shadow: #666666 1px 1px 1px; }
a.Quotation-URL:hover { text-decoration: underline !important; }
a.Quotation-URL:active { color: #ff0000; text-decoration: underline !important; }

.Quotation {
	border-top-color: #800080;
	border-top-style: solid;
	border-top-width: 2px;
	font-style: italic;
	font-size: large;
}

.Quotation i { font-weight: bold; font-style: italic; }

.Quotation a:link, a:visited { color: #800080; font-weight: bold; text-shadow: #666666 1px 1px 1px; }
.Quotation a:hover { text-decoration: underline; }
.Quotation a:active { color: #ff0000; }

.Attribution {
	text-align: right;
	border-bottom-color: #387272;
	border-bottom-style: solid;
	border-bottom-width: 2px;
}

.Attribution a:link { text-shadow: #666666 1px 1px 1px; }

.Quotation-leftquote {
	background-image: url(../images/quoteleft.png);
	background-position: top right;
	background-repeat: no-repeat;
	width: 24px;
	border-bottom-color: #387272;
	border-bottom-style: solid;
	border-bottom-width: 2px;
}

.Quotation-rightquote {
	background-image: url(../images/quoteright.png);
	background-position: bottom left;
	background-repeat: no-repeat;
	width: 25px;
	border-top-color: #800080;
	border-top-style: solid;
	border-top-width: 2px;
}

#Side-quotation {
	position: fixed; left: 12px; top: 459px; width: 161px;
	background-image: url(../images/quoteheader.png);
	background-repeat: no-repeat; background-position: top left;
}

.Mini-quotation {
	margin-right: 16px;
}

#Side-quotation table {
	position: relative; top: 4px;
}

#Side-quotation .Quotation, .Mini-quotation .Quotation {
	border-top-width: 1px;
	font-size: small;
}

#Side-quotation .Attribution, .Mini-quotation .Attribution {
	border-bottom-width: 1px;
	font-size: small;
}

#Side-quotation .Quotation-leftquote, .Mini-quotation .Quotation-leftquote {
	border-bottom-width: 1px;
	background-image: url(../images/quoteleftsm.png);
	width: 12px;
}

#Side-quotation .Quotation-rightquote, .Mini-quotation .Quotation-rightquote {
	border-top-width: 1px;
	background-image: url(../images/quoterightsm.png);
	width: 13px;
}

#Side-quotation p, .Mini-quotation p {
	font-style: italic;
	font-size: xx-small;
	text-align: left !important;
}

/*
Composer/author lists
*/

.Composers
{
	-webkit-column-count: 2;
	-webkit-column-rule: 1px #888888 solid;
	-webkit-column-break-inside: avoid;
	-moz-column-count: 2;
	-moz-column-rule: 1px #888888 solid;
	column-count: 2;
	column-rule: 1px #888888 solid;
}

.Composers p {
	text-align: left;
}

.prefix { text-shadow: #666666 1px 1px 1px; }

.forename {
	color: #387272;
	font-weight: normal;
	font-style: italic;
}

.forename:link, .forename:hover, .forename:visited { color: #387272; }
.forename:active { color: #ff0000; }

.surname { font-size: x-large; }

.surname:link, .surname:hover, .surname:visited { color: #800080; }
.surname:active { color: #ff0000; }

/*
Composer work pages
*/

.daterange {
	font-family: "Panache", "Verdana", sans-serif;
	font-size: x-large;
}

/*
Cover listings
*/

.cover-cat { position: relative; float: left; }

.cover { display: block; padding: 8px; }
.cover:hover {
	border: 1px solid #387272; background-color: #afebeb;
	background-image: -moz-linear-gradient(top, #BBCCCC, #DDEEEE);
	background-image: -o-linear-gradient(top, #BBCCCC, #DDEEEE);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BBCCCC), to(#DDEEEE));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#BBCCCC', endColorstr='#DDEEEE');
	padding: 7px;
	font-style: normal; text-decoration: none;
}

.cover:link, .cover:visited { color: black; font-weight: normal; text-shadow: none; }
.cover:active {
	border: 1px solid #800080; background-color: #feb6ff; padding: 7px;
	background-image: -moz-linear-gradient(top, #FFEEFF, #DDCCDD);
	background-image: -o-linear-gradient(top, #FFEEFF, #DDCCDD);
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFEEFF), to(#DDCCDD));
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEFF', endColorstr='#DDCCDD');
}
.cover:focus { padding: 7px; outline: none; }

.cover-dimensions { width: 316px; height: 167px; }

.cover-details {
	position: absolute;
	display: block; overflow: auto;
	top: 10px; left: 144px; height: 173px;
}

.cover-composer { font-weight: bold; color: #387272; }
.cover-title { font-size: large; font-weight: bold; font-family: "Panache-Black", "Panache", "Verdana", sans-serif; color: #800080; line-height: 1em; }
.cover-subtitle { font-style: italic; line-height: 1em; }
.cover-notes { font-style: italic; font-size: x-small; line-height: 1em; }
.cover-price { font-weight: bold; line-height: 1.6em; }

.cover-smallgap { font-size: xx-small; line-height: 1px; }

.new {
	position: absolute;
	width: 66px; height: 67px;
	top: -8px; left: 86px;
	background: url(../images/new.png) no-repeat;
}

.sound-badge {
	position: absolute;
	width: 47px; height: 36px;
	top: -4px; left: -10px;
	background: url(../images/sound-badge.png) no-repeat;
}

.video-badge {
	position: absolute;
	width: 47px; height: 36px;
	top: -4px; left: -10px;
	background: url(../images/video-badge.png) no-repeat;
}

.av-badge {
	position: absolute;
	width: 47px; height: 36px;
	top: -4px; left: -10px;
	background: url(../images/av-badge.png) no-repeat;
}

.sound-icon {
	width: 30px; height: 25px; margin-left: 8px;
	background: url(../images/sound.png) no-repeat;
}

.video-icon {
	width: 21px; height: 25px; margin-left: 8px;
	background: url(../images/video.png) no-repeat;
}

/* ── Cover image sizing (WP media – single source image, CSS controls display size) ── */

/* Cover listing thumbnail within .cover-cat: constrain to ~100px wide */
.cover-cat img {
	width: 100px;
	height: auto;
	max-height: 138px;
	display: block;
}
.ItemCover img{
	width: 55px;
	height:auto !important;
	box-shadow:1px 1px 1px #c2c2c2;
}
/* Product single page: cover floated right, display at medium size */
.float-right-with-margin img,
img.float-right-with-margin {
	max-width: 194px;
	height: auto;
}

/* Sample pages on product page */
.fm-sample-pages {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-bottom: 4px;
}
.fm-sample-pages a {
	display: inline-block;
	line-height: 0;
}
/*.fm-sample-pages img {
width: 125px;
height: auto;
display: block;
border: 1px solid #ccc;
}*/
.fm-sample-pages {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	gap: 10px;
	margin-bottom: 10px;
	grid-auto-flow: row;
	justify-content: center;
	align-items: center;
	padding: 0px 20px 0px 0px;
}

.fm-sample-pages a {
	display: block;
	width: 100%;
	line-height: 0;
}

.fm-sample-pages img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	border: 0;
}