/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
        display: block;
}

/* https://www.quackit.com/css/grid/examples/ Website layout template 6	*/

body { 
	display: grid;
	grid-template-areas: 
		"header header"
		"nav article"
		"footer footer";
	grid-template-rows: 40px 1fr 25px;  
	grid-template-columns: 12rem 1fr;
	grid-row-gap: 0px;
	grid-column-gap: 5px;
	height: 100vh;
	margin: 0;

	background: white;
	color: #444;			/* non-standard dark grey */
	font-family: Georgia, Helvetica, Arial, sans-serif;
	width: auto;
	max-width: 1136px;
/*
	font-size: 62.5%;
	min-width: 800px;
*/
}  
header, footer, article, nav, div {
	padding: 0.5em;
	background: white;
}
#pageHeader {
	grid-area: header;
}
#pageFooter {
	grid-area: footer;
}
#mainArticle { 
	grid-area: article;      
}
#mainNav { 
	grid-area: nav; 
}

/* *************************** added styles *************************** */

/* *************************** pageHeader *************************** */
#pageHeader {
        display: block;
        background: #EEE8AA;    	/* Pale Goldenrod */
        color: #AF7817;                 /* DarkGoldenrod */
        border-bottom: 5px solid #AF7817;       /* DarkGoldenrod */
        font-size: 0.75rem;
        margin: 0;
        padding: 5px 10px 4px 10px;
}
#pageHeader h1 {
        display: inline;
        font-size: 1.4rem;
        font-weight: bold;
}
#pageHeader img {
        padding: 0 5px 0 0;
        width: 25px;
        height: 25px;
        vertical-align: text-bottom;
}
#pageHeader img#togglenav {
        width: 30px;
        margin-right: 20px;
}
#pageHeader a {
        color: #AF7817;                 /* DarkGoldenrod */
}

/* *************************** pageFooter *************************** */
#pageFooter {
	padding: 0.2rem 0.5rem 0 0.5rem;
        margin: 0;
        font-size: 0.75rem;
        line-height: 1.2rem;
        background: #D3D3D3;		/* LightGrey */
        border-top: 1px dotted #444;	/* non-standard dark grey */
}
#pageFooter span#contact {
	display: inline;
	float:left;
}
#pageFooter span#updated {
	display: inline;
	float:right;
}
#pageFooter a {
	color: #444;			/* dark grey */
}
#pageFooter a:hover {
	color: #AF7817;			/* DarkGoldenrod */
}

/* *************************** mainArticle *************************** */
#mainArticle {
	float: right;
	background: transparent;
	border: 0;
	padding: 0;
	padding-left: 0.25rem;
	margin: 0;
	width: 100%;
	font-size: 0.85rem;
	line-height: 1.2rem;
/*
        z-index: 2;
*/
}
#mainArticle h1,
#mainArticle h2,
#mainArticle h3,
#mainArticle h4 {
	color: #AF7817;			/* DarkGoldenrod */
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
}
#mainArticle h1 {
	font-size: 1.4rem;
	line-height: 1.8rem;
	margin: 1rem 0;
	text-align: center;
}
#mainArticle h2 {
	font-size: 1.1rem;
	line-height: 1.3rem;
	margin: 1rem 0 0.5rem 0;
}
#mainArticle h3 {
	font-size: 0.9rem;
	margin: 0.5rem 0 0.25rem 0;
}
#mainArticle h4 {
	font-size: 0.8rem;
}
#mainArticle strong {
	font-weight: bold;
}
#mainArticle em {
	font-style: italic;
}
#mainArticle p {
	margin: 0.5rem 0;
}
#mainArticle blockquote {
	background: white url("/images/quote.png") no-repeat scroll 0 0;
	padding-left: 30px;
	margin: 0 2rem 0 0.5rem;
}
#mainArticle blockquote blockquote {
	background: transparent;
	padding-left: 0px;
	margin: 0 2rem;
}
#mainArticle p.tracksubtitle {
	font-weight: bold;
	margin: 0 2rem;
}
#mainArticle p.award,
#mainArticle span.award {
	color: #AF7817;			/* DarkGoldenrod */
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
}
#mainArticle p.chorus {
	margin-left: 2rem;
}
#mainArticle p.chorus em:first-child {
	margin-left: -2rem;
}
#mainArticle p.ensemble {
	margin-left: 1rem;
}
#mainArticle p.ensemble span {
	margin-left: -1rem;
}

sup, sub {
	vertical-align: baseline;
	position: relative;
	font-size: smaller;
	top: -0.4em;
}
sub {
	top: 0.4em;
}

#mainArticle p.hiddenbibliography {
	display:none;
}

/*************
 Link colours
*************/

#mainArticle a {
	color: #333;
	text-decoration: underline;
}
#mainArticle a:active,
#mainArticle a:visited {
	color: #696969;			/* DimGrey */
}
#mainArticle a:hover {
	color: #AF7817;			/* DarkGoldenrod */
}
#mainArticle h1 a, #mainArticle h1 a:visited,
#mainArticle h2 a, #mainArticle h2 a:visited,
#mainArticle h3 a, #mainArticle h3 a:visited {
	color: #AF7817;			/* DarkGoldenrod */
}
#mainArticle h1 a:hover,
#mainArticle h2 a:hover,
#mainArticle h3 a:hover {
	color: #CD853F;			/* Peru */
}

/***********************************
 word definitions (<dfn title"...">)
***********************************/

#mainArticle dfn {
	color: #AF7817;			/* DarkGoldenrod */
	text-decoration: dotted underline;
	cursor: pointer;		/* for iPad */
}

/****************************
 index on artist's main page
****************************/

#mainArticle div.artist {
	float: left;
	width: 97%;
} 
#mainArticle div.artist div.index {
	float: left;
	width: 63%;
	text-align: right;
}
#mainArticle div.artist div.image {
	float: right;
	width: 33%;
	text-align: center;
}

/******
 Lists
******/

#mainArticle ol {
	list-style-position: outside;
	list-style-type: decimal;
	margin: 0.5rem 0;
	padding-left: 2rem;
}

#mainArticle ol.alpha {
	list-style-type: lower-alpha;
	margin: 0;
	padding: 0 0 0 1.2rem;
}

#mainArticle ol.medley {
	list-style-type: lower-alpha;
	margin: 0;
	padding: 0 0 0 1.2rem;
}

#mainArticle ul {
	list-style-image: url(../images/goldbullet.png);
	padding-left: 1.5rem;
}

#mainArticle ul.plain {
	list-style: none;
	margin: 0.5rem 0;
	padding: 0;
}
#mainArticle ul.plain li {
	text-indent: -1.5em;
	margin: 0.25em 0em 0em 1.5em;
}

#mainArticle div.twocolumns,
#mainArticle p.twocolumns {
/*
	-moz-column-count: 2;
	-moz-column-gap: 1rem;
*/
	-webkit-column-count: 2;
	-webkit-column-gap: 1rem;
	column-count: 2;
	column-gap: 1rem;
	background: transparent;
}

#mainArticle div.threecolumns {
/*
	width: 100%;
	-moz-column-count: 3;
	-moz-column-gap: 1rem;
*/
	-webkit-column-count: 3;
	-webkit-column-gap: 1rem;
	column-count: 3;
	column-gap: 1rem;
	background: transparent;
}
#mainArticle div.twocolumns p,
#mainArticle div.threecolumns p {
	margin: 0em;
	display: inline-block;
	width: 100%;
}
#mainArticle div.twocolumns ul,
#mainArticle div.threecolumns ul {
	margin: 0em;
}
#mainArticle div.twocolumns li,
#mainArticle div.threecolumns li {
/*
	-webkit-column-break-inside: avoid;
	column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid;
*/
  	margin-top: 0em;
	margin-bottom: 0em;
}
#mainArticle ol.verse li + li {
	margin-top: 0.33pc;
}

/*******
 Tables
*******/

#mainArticle th {
	font-weight: bold;
	padding: 0 0 0.25rem 0;
}
#mainArticle th,
#mainArticle td {
	vertical-align: top;
}
#mainArticle td p {
	margin: 0 0 0.5rem 0;
}

#mainArticle table.album {
	width: 99.5%;
	margin-bottom: 1rem;
	margin-left: 3px;
}
#mainArticle table.album td {
	text-align: left;
	vertical-align: bottom;
	margin: 0;
	padding-bottom: 3px;
}
#mainArticle table.album td.top {
	vertical-align: top;
}
#mainArticle table.album td.left {
	padding: 1px 10px 1px 0;
	width: 150px; /* really minimum width - widens if cover pic is larger */
}
#mainArticle table.album td.bookleft {
	padding: 1px 10px 1px 0;
	width: 120px; /* really minimum width - widens if cover pic is larger */
}
#mainArticle table.album td.narrowleft {
	padding: 1px 10px 1px 0;
	width: 100px; /* really minimum width - widens if cover pic is larger */
}
#mainArticle table.album td.tinyleft {
	padding: 1px 10px 1px 0;
	width: 50px; /* really minimum width - widens if cover pic is larger */
}
#mainArticle table.album td.right {
	text-align: right;
	padding: 1px 3px 1px 10px;
	width: 150px; /* really minimum width - widens if cover pic is larger */
}
#mainArticle table.album td.bookright {
	padding: 1px 3px 1px 10px;
	width: 120px; /* really minimum width - widens if cover pic is larger */
}
#mainArticle table.album td.narrowright {
	text-align: right;
	padding: 1px 3px 1px 10px;
	width: 100px; /* really minimum width - widens if cover pic is larger */
}
#mainArticle table.album p {
	line-height: 1rem;
	margin: 0.5rem 0 0 0;
}
#mainArticle table.album p:first-child {
	margin-top: 0;
}
#mainArticle table.album img,
#mainArticle .rightalbum,
#mainArticle .shadowalbum {
	box-shadow: 3px 3px 5px 1px #A9A9A9;	/* DarkGrey */
}

#mainArticle .discography img {
	box-shadow: 1px 1px 3px 1px #D3D3D3;	/* LightGrey */
}

#mainArticle table.index {
	margin:  0.25rem;
}
#mainArticle table.index td {
	padding: 0 0.25rem;
	vertical-align: top;
}

#mainArticle div.recordlist, table.recordlist {
	width: 100%;
}
#mainArticle table.recordlist td {
	padding: 0 0.25rem;
	width: 50%;
}
#mainArticle div.recordlist img, table.recordlist img {
	float: left;
	margin-right: 5px;
	margin-bottom: 10px;
}
#mainArticle div.recordlist p, table.recordlist p {
	clear: both;
}
#mainArticle div.recordlist a, table.recordlist a {
        font-weight: bold;
}

#mainArticle table.twocolumns {
	width: 100%;
}
#mainArticle table.twocolumns tr>th {
	width: 50%;
	padding-top: 0.25rem;
	padding-right: 0.25rem;
	padding-bottom: 0.5rem;
}
#mainArticle table.twocolumns tr>td {
	width: 50%;
	padding-right: 0.25rem;
	padding-bottom: 0rem;
	vertical-align: top;
}

#mainArticle table.threecolumns {
	width: 100%;
}
#mainArticle table.threecolumns tr>th {
	width: 33%;
	padding-top: 0.25rem;
	padding-right: 0.25rem;
	padding-bottom: 0.5rem;
}
#mainArticle table.threecolumns tr>td {
	width: 33%;
	padding-right: 0.25rem;
	padding-bottom: 0.5rem;
}

div.transcription table {
	text-align: left;
	white-space: pre;
	border-collapse: collapse;
	border-style: hidden;
	line-height: 100%;
}
div.transcription th, div.transcription td {
/*
	margin: 0;
	padding: 0;
*/
	vertical-align: baseline;
}
div.transcription table + table.newverse {
	margin-top: 1pc;
}
div.transcription table + table {
	margin-top: 0.3pc;
}
div.transcription p.chord, div.transcription span.chord {
	font-weight: bold;
}

/*
a:link { color: #000080; }		** Navy **
a:visited { color: #800080; }		** Purgle **
a:active { color: #008080; }		** Teal **
*/

img {
	border: 0;
}

dl dd {
	padding: 0 0 0.25rem 2rem;
}

dl.songlist dt {
	margin-top: 6px;
}
dl.songlist dd a {
	font-weight: bold;
}
dl.glossary dt {
	font-weight: bold;
}
cite {
	font-style: normal;
	font-weight: bold;
}
p.nonessential, dl.nonessential {
	color: #808080;			/* gray */
}
p.nonessential cite {
	color: #808080;			/* gray */
}
#mainArticle p.nonessential cite a:link {
	color: #696969;			/* DimGrey */
}
#mainArticle>article {
	background: transparent;
	width: 98%;
	border: 2pt solid #D3D3D3;
	box-shadow: 3px 3px 5px 1px #D3D3D3;
	margin: 0.25rem 0.25rem 0.75rem 0;
	padding: 0 3px 0.25rem 3px;
}
#mainArticle p.reference {
	background: #D3D3D3;		/* LightGrey */
	font-size: 0.7rem;
	line-height: 0.9rem;
	padding: 2px 0 3px 0;
	margin: 0 -3px 0.5em -3px;
}
#mainArticle p.albumgallery {
	text-align: center;
	height: 150px;
	overflow-x: hidden;
	overflow-y: hidden;
}
#mainArticle p.albumgallery img {
	margin: 0 1px;
}

#mainArticle p.credits,
#mainArticle p.source,
#mainArticle p.comment,
#mainArticle div.comment,
#mainArticle table.source {
	font-size: 0.7rem;
	line-height: 0.9rem;
}
#mainArticle p.citation {
	margin-left: 30%;
	font-size: 0.65rem;
	line-height: 0.9rem;
	text-align: right;
}
#mainArticle span.artist,
#mainArticle span.author,
#mainArticle span.comment,
#mainArticle span.time,
#mainArticle span.track {
	font-size: 0.7rem;
	line-height: 0.9rem;
}
#mainArticle span.tune {
	font-size: 0.7rem;
	line-height: 1rem;
	font-style: italic;
}
#mainArticle span.chord {
	font-weight: bold;
}
#mainArticle span.headnote {
	font-size: 0.7rem;
	line-height: 0.9rem;
	font-weight: normal;
}
#mainArticle span.star {
	vertical-align: baseline;
	position: relative;
	font-size: 0.8em;
	top: -0.1em;
}
#mainArticle .center {
	text-align: center;
}
#mainArticle .leftpicture {
	float: left;
	margin: 0 5px 9px 0;;
	text-align: center;
	font-size: 0.7rem;
}
#mainArticle .rightpicture {
	float: right;
	margin: 0 0 5px 5px;
	text-align: center;
	font-size: 0.7rem;
}
#mainArticle .rightalbum {
	float: right;
	margin: 0 3px 5px 5px;
	text-align: center;
	font-size: 0.7rem;
	box-shadow: 3px 3px 5px 1px #A9A9A9;	/* DarkGrey */
}
#mainArticle figure.right {
        float: right;
}
#mainArticle figure {
        display: table;
}
#mainArticle figure figcaption {
        font-size: 0.7rem;
        line-height: 0.9rem;
        display: table-caption;
	text-align: center;
        caption-side: bottom;
}

.clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
}
/* nur IE */
.clearfix {
	zoom: 1;
}

/*************
 Foldout Text
*************/

#mainArticle .foldout, #mainArticle .foldout div {
	background: transparent;
}
#mainArticle .foldout input {
	/* Transparenz ermöglicht Ansteuerung über Tastatur (HTab) */
	opacity: 0;
}
#mainArticle .foldout label {
	margin-left: -1rem;
	cursor: pointer;
	color: #AF7817;                 /* DarkGoldenrod */
	font-size: 0.75rem;
}
#mainArticle .foldout input + label:before {
	content: '▼ show ';
}
#mainArticle .foldout input:checked + label:before {
	content: '▲ hide ';
}
#mainArticle .foldout input:not(:checked) ~ div {
	display: none;
}
#mainArticle .foldout input:focus + label {
/*  Markierung des fokussierten Label-Elements */
	background-color: #AF7817;      /* DarkGoldenrod */
	color: white;
}
#mainArticle .foldout > a {
	text-decoration: none;
	color: #AF7817;                 /* DarkGoldenrod */
	font-size: 0.75rem;
}


/* *************************** mainNav *************************** */
#mainNav { 
	float: left;
	left: 0;
	padding: 0 0.25rem;
	background: transparent;
	border: 0;
	text-align: left;
/* 
        margin: 0 1px 0 -12.1rem;
        z-index: 3;
*/
}
html->#mainNav {
	width: 11.25rem;		/* Be nice to Opera */
}
#mainNav a {
	font-size: 0.75rem;
	font-weight: normal;
	padding: 2px;
	line-height: 15px;
	margin-top: 0;
	border: 0;
	color: #444;			/* non-standard dark grey */
	text-decoration: none;
	width: 11rem;
}
html->#mainNav a {
	width: 11rem;			/* Be nice to Opera */
}
#mainNav a:hover {
	color: #AF7817;			/* DarkGoldenrod */
}
#mainNav ul {
	list-style: none;
	padding: 0px 0 5px 10px;
	margin: 0;
	border: 0;
}
#mainNav li a {
	font-size: 0.7rem;
	padding: 0px 2px;
	margin-top: 0pt;
	border: 0pt;
	background: transparent;
	color: #444;			/* non-standard dark grey */
	text-decoration: none;
	width: 10rem;
}
html->#mainNav li a {
	width: 10rem;	/* Be nice to Opera */
}
#mainNav li a:hover {
	color: #AF7817;			/* DarkGoldenrod */
}
#mainNav input {
	float: right;
	height: 0.75rem;
	font-size: 0.7rem;
}

#mainNav>article {
	background: transparent;
	width: 98%;
	font-size: 0.7rem;
	border: 2pt solid #D3D3D3;
	box-shadow: 3px 3px 5px 1px #D3D3D3;
	margin: 0.25rem 0.25rem 0.75rem 0;
	padding: 0 3px 0.25rem 3px;
}
#mainNav>article p.reference {
	background: #D3D3D3;		/* LightGrey */
	line-height: 0.9rem;
	padding: 2px 0 3px 0;
	margin: 0 -3px 0.5em -3px;
}
#mainNav>article p.reference a {
	padding: 0px 2px;
	margin-top: 0pt;
	border: 0pt;
	background: #D3D3D3;		/* LightGrey */
	color: #444;			/* non-standard dark grey */
	text-decoration: none;
	width: 97%;
}
#mainNav>article p.center {
	text-align: center;
	display: block;
	line-height: 120%;
	background: transparent;
	color: #444;			/* non-standard dark grey */
}
#mainNav>article p a,
#mainNav>article li a {
	display: block;
	padding: 0px 2px;
	margin-top: 0pt;
	border: 0pt;
	background: transparent;
	color: #444;			/* non-standard dark grey */
	text-decoration: none;
	width: 10rem;
}
#mainNav>article p.laurel {
	text-align: center;
	display: block;
	line-height: 120%;
	color: #444;			/* non-standard dark grey */
/*
	height: 9rem;
*/
	background: white url('/images/laurel-wreath.jpg') no-repeat scroll 0 0;
}
#mainNav>article p.laurel span {
	display: block;
	padding: 1rem 0 2.5rem 0 ;
	font-size: 1.5rem;
	line-height: 2.0rem;
	font-weight: bold;
	color: #AF7817;
}

/* *************************** end styles *************************** */

/* Stack the layout on small devices/viewports. */
/*
@media all and (max-width: 575px) {
*/
@media all and (max-width: 767.98px) {
  body { 
    grid-template-areas: 
      "header"
      "article"
      "nav"
      "footer";
    grid-template-rows: 70px 1fr 1fr 25px;  
    grid-template-columns: 1fr;
 }
  #mainNav li a,
  #mainNav>article {
	font-size: 0.9rem;
	line-height: 17.5px;
	width: 99%;
  }
  #mainNav>article a,
  #mainNav>article li a,
  #mainNav>article p a {
	width: 99%;
  }
}