/* Web fonts */

@font-face {
  font-family: 'Vindicator 1911 Distressed';
  src:  url('Vindicator-1911-Distressed.woff2') format('woff2'),
        url('Vindicator-1911-Distressed.woff') format('woff');
}

@font-face {
  font-family: 'Vindicator 1911 Headlines';
  src:  url('Vindicator-1911-Headlines.woff2') format('woff2'),
        url('Vindicator-1911-Headlines.woff') format('woff');
}

/* General Styles */

body { color:black; background-color:#fbe9c1; background-image:url('/images/OldPaper1a.jpg'); max-width:12in; margin:auto; padding:5px; }
body.b2 { color:black; background-color:#f2e1b7; background-image:url('/images/OldPaper2a.jpg'); max-width:12in; margin:auto; padding:5px; }

a { text-decoration:none }
a:hover { color:red; text-decoration:underline;}

    #header{
        padding: 3px;
        text-align: center;
        background-color:rgba(64,32,0,0.1);
        border: 4px solid #402000;
        border-radius: 10px;
    }

div.aboutContainer {
	max-width:8in;
	margin:auto;
}

p.about {
	font-family: 'Palatino Linotype', serif; font-size:18pt; 
}

div.videoContainer {
	float:right;
	position:relative;
	width:45%;
	height:0px;
	padding-bottom:25.25%
}

div.videoContainer2 {
	text-align:center
}

.videoContainer iframe {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
}

h1.videoTitle { font-family: 'Vindicator-1911-Headlines', 'Palatino Linotype', serif; font-variant:small-caps; font-size:20pt; font-weight:normal; text-align:center; }


/* Styles for buttons */

div.headerBar {
	display:flex;
	justify-content:space-between;
    background-color:rgba(64,32,0,0.25);
    padding:0px 15%;
    border:2px solid #402000;
    border-radius:10px;
    font-family: 'Vindicator-1911-Headlines', 'Palatino Linotype', serif; font-size:20pt; font-weight:normal;
    font-variant:small-caps;

}

a.headerSelected {
	padding:10px;
	background-color:rgba(64,32,0,0.5);
	border-left:2px solid #402000;
	border-right:2px solid #402000;
	border-radius:0px;
	text-decoration:none;
}

a.headerUnselected {
	padding:10px;
	text-decoration:none;
}

/* Styles for lyrics pages */

img.frontPagePortrait {
	float:left;
	padding-left:3em;
	padding-right:3em";
	max-width:50%;
}

div.welcome {
	padding-right:3em;
}

div.frontPageVideo {
	float:right;
	text-align:center;
	height:0;
}

div.performances {
	float:right;
	max-width:45%;
	width:45%;
   background-color:rgba(255,255,255,0.25);
   border:2px solid #402000;
   border-radius:10px;
}

div.performancesItems {
   font-family: 'Vindicator-1911-Distressed', 'Palatino Linotype', serif;
   font-size:18pt;
   font-weight:normal;
   text-align:left;
	padding:10px;
}

div.performancesHeader {
   background-color:rgba(64,32,0,0.25);
   font-family: 'Vindicator-1911-Headlines', 'Palatino Linotype', serif;
   font-variant:small-caps;
   font-size:18pt;
   font-weight:normal;
   text-align:center;
	padding:10px;
}

iframe.soundCloud {
	float:right;
	margin-left:3em;
	margin-right:3em;
}

div.songlist {
    float:left;
    width:20%; 
    background-color:rgba(64,32,0,0.25);
    padding:10px;
    border:2px solid #402000;
    border-radius:10px;
}

div.songsheet {
	float:right;
	width:70%;
	color:black;
	background-color:white;
	border-left:1px solid black;
	border-top:1px solid black;
	border-right:4px solid black;
	border-bottom:4px solid black;
	padding:1em 0.5em 1em 5%;
	border-radius:10px;
}

div.spacer {
	clear:both;
	height:1em;
}

div.innerSpacer {
	clear:right;
	height:1em;
}

span.headlineFont {
   font-family: 'Vindicator-1911-Headlines', 'Palatino Linotype', serif;
   font-variant:small-caps;

}

/*h1.songtitle { font-family: 'Vindicator-1911-Headlines', 'Palatino Linotype', serif; font-size:40pt; font-weight:normal; text-align:center }

p.verse { margin-left:0em; font-family: 'Vindicator-1911-Distressed', 'Palatino Linotype', serif; font-size:18pt; }

p.chorus { margin-left:2em; font-family: 'Vindicator-1911-Distressed', 'Palatino Linotype', serif; font-size:18pt; }
*/

h1.songtitle { font-family: 'Palatino Linotype', serif; font-size:40pt; font-weight:normal; text-align:center }

p.verse { margin-left:0em; font-family: 'Palatino Linotype', serif; font-size:18pt; }

p.chorus { margin-left:2em; font-family: 'Palatino Linotype', serif; font-size:18pt; }

p.lyricLink {
    padding-left:3em;
    text-indent:-3em
}

a.selectedSong {
	padding:3px;
	background-color:rgba(64,32,0,0.25);
	font-family: 'Vindicator-1911-Distressed', 'Palatino Linotype', serif;
	font-size:16pt;
	border: 2px solid #402000;
	border-radius:5px;
}
                 
a.unselectedSong {
	padding:3px;
	font-family: 'Vindicator-1911-Distressed', 'Palatino Linotype', serif;
	font-size:16pt;
	border: 2px solid #40200000;
	border-radius:5px;
}
                 

/* Special styles for International Phonetic Alphabet tooltips for "Shibboleth" lyrics */
      
span.ipa { color:green; text-decoration: underline dotted green; }

span.ipa2 { font-family: 'Palatino Linotype', serif; font-size:75% }

span[pronunciation] {
        text-decoration: underline dotted green;
        position: relative;
        color: green;
        cursor: help;
}

span[pronunciation]:hover::after {
        content: attr(pronunciation);
        position: absolute;
        left: 0;
        top: 20pt;
        min-width: 10em;
        border: 1px #aaaaaa solid;
        border-radius: 5px;
        background-color: #ffffcc;
        padding: 5px 10px;
        color: #000000;
        font-family: 'Palatino Linotype', serif;
        font-size: 14pt;
        z-index: 1;
}