html{
	-ms-content-zooming: none;
	font-size:16px;
}

body {
	padding:0; margin:0;
	width:100%; height:100%;
	overflow:hidden;
}
div.page.darkTheme a {
	color:rgb(183,243,249);
	font-family:"Trebuchet MS", sans-serif;
}
div.page.lightTheme a {
	color:rgb(103,143,169);
	font-family:"Trebuchet MS", sans-serif;
}
div.page {
	width:100%;height:100%;
	position:absolute;
	left:0px; top:0px;
	overflow:hidden;
}
div.page.lightTheme {
	text-shadow:0 0 1rem rgba(0,0,0,0.25);
	background-color:rgb(255,255,251);
	color:rgb(7,7,2);
}
div.page.darkTheme {
	text-shadow:0 0 1rem rgba(255,255,255,0.25);
	background-color:rgb(20,20,16);
	color:rgb(255,255,251);
}
div.page.sansSerifFont {
	font-family:"Trebuchet MS", sans-serif;
	letter-spacing:0;
	font-size:1.0rem;
}
div.page.serifFont {
	font-family:"Times New Roman", serif;
	letter-spacing:0.02rem;
	font-size:1.04rem;
}

.showEnglish span.spanishLanguage {display:none;}
.showEnglish span.englishLanguage {display:inline;}
.showSpanish span.englishLanguage {display:none;}
.showSpanish span.spanishLanguage {display:inline;}

.showEnglish > span.spanishLanguage {display:none;}
.showEnglish > span.englishLanguage {display:inline;}
.showSpanish > span.englishLanguage {display:none;}
.showSpanish > span.spanishLanguage {display:inline;}

/* Audio Player */

.audioPlayer { display:flex; flex-direction:row;
	width:20rem; max-width:90%; height:3rem; 
	margin:auto;  position:relative; }
.ap_canvas { position:absolute; 
	left:0; top:0; right:0; bottom:0; width:100%; height:100%; }
.ap_timestamp { position:absolute; }

/* End Audio Player */


/* Menu */
.menu {
	display:table;
	width:100%; height:3rem;
	z-index:1000;
	overflow:visible;
}
/*
div.page.lightTheme .menu,
div.page.lightTheme div.languageSelection {
	box-shadow:0 0 1rem 0 rgba(0,0,0,0.5);
}
div.page.darkTheme .menu,
div.page.darkTheme div.languageSelection {
	box-shadow:0 0 1rem 0 rgba(100,100,100,0.5);
}
*/
div.bar {
	display:flex;
	flex-wrap:nowrap;
	flex-direction:row;
	justify-content:stretch;
	align-items:center;
	position:relative;
	width:100%; height:3rem;
	z-index:1010;
	overflow:visible;
}
#SearchTab { margin-left:0.5rem; }
#SearchBar {
	display:inline-block;
	background-color:rgba(255,255,251,0.7);
	border-radius:1rem;
	height:1.5rem;
	line-height:1.5rem;
	vertical-align:middle;
	text-align:center;
	outline:none;
	flex-grow:1;
	max-width:30rem;
	font-size:1rem;
}
div.page.lightTheme #SearchBar {
	border:1px solid rgba(0,0,0,0.5);
}
div.page.darkTheme #SearchBar {
	border:1px solid rgb(200,200,150);
}
#SearchIcon, #SettingsIcon, #LyricsIcon, .sheetMusicIcon {
	height:1.5rem;
	vertical-align:middle;
	cursor:pointer;
}
/* Tabs (in Menu and Language Selection) */
div.tab {
	position:relative;
	display:flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
	height:3rem;
	text-align:center;
	vertical-align:middle;
	z-index:1015;
	overflow:visible;
	margin-right:0.5rem;
	border-radius:1rem;
}
div.page.lightTheme div.tab {
	box-shadow:0 0 1rem 0 rgba(0,0,0,0.5);
}
div.page.darkTheme div.tab {
	box-shadow:0 0 1rem 1px rgba(100,100,100,0.5);
}
body.animationsOn div.tab {
	-webkit-transition: width 0.5s;
	transition: width 0.5s;
}
div.closed {
	opacity:0.85;
	-ms-filter:alpha(opacity=85);
	-webkit-transition:opacity 0.1s;
	transition:opacity 0.1s;
	cursor:pointer;
	flex-grow:0;
	min-width:15%;
}
body.animationsOn div.closed {
	-webkit-transition:opacity 0.1s;
	transition:opacity 0.1s;
}
div.closed:hover {
	opacity:1.0;
	-ms-filter:alpha(opacity=100);
}
div.closed span.short {display:inline-block;}
div.open span.short {display:none;}
div.open span.long,
div.closed span.long {
	flex-grow:1;
	max-width:31rem;
	display:inline-flex;
	flex-direction:row;
	justify-content:center;
	align-items:center;
}
div.open span.long {display:inline-flex; margin-right:0.5rem;}
div.closed span.long {display:none;}
div.tab span.short.graded, div.tab span.long.graded {
	position:relative;
	z-index:1020;
	width:100%;
	height:1rem;
	border:1px solid red;
	vertical-align:middle;
}
div.open {
	padding:0 0.5rem;
	flex-grow:1;
	cursor:default;
}
/* Language Selection bar (subset of tabs) */
div.closed div.languageSelection {
	opacity:0.0;
	-ms-filter:alpha(opacity=0);
	top:-3rem;
}
div.open div.languageSelection {
	opacity:1.0;
	-ms-filter:alpha(opacity=100);
	top:3.5rem;
}
div.languageSelection.relevant {display:table;}
div.languageSelection.irrelevant {display:none;}
div.languageSelection {
	display:table;
	position:absolute;
	width:100%;
	left:0; right:0;
	top:3.5rem;
	z-index:900;
}
body.animationsOn div.languageSelection {
	-webkit-transition: width 0.5s, opacity 0.5s, top 0.5s;
	transition: width 0.5s, opacity 0.5s, top 0.5s;
}
div.languageSelectionRow {
	position:relative;
	display:flex;
	flex-direction:row;
	justify-content: center;
	align-items:center;
	flex-wrap:nowrap;
	width:100%;
	z-index:901;
}
div.subtab {
	display:flex;
	flex-direction:row;
	justify-content: center;
	align-items:center;
	flex-wrap:nowrap;
	position:relative;
	height:2rem;
	text-align:center;
	vertical-align:middle;
	z-index:902;
	border-radius:1rem;
	margin-right:1rem;
}
div.page.lightTheme div.subtab {
	box-shadow:0 0 1rem 0 rgba(0,0,0,0.5);
}
div.page.darkTheme div.subtab {
	box-shadow:0 0 1rem 1px rgba(100,100,100,0.5);
}
#EnglishTab {
	margin-left:1rem;
}
body.animationsOn div.subtab {
	-webkit-transition: width 0.5s, opacity 0.5s;
	transition: width 0.5s, opacity 0.5s;
}


/* Content panel containers */
div.content {
	width:100%;height:100%;
	position:absolute;
	left:0px; top:0px;
	overflow-x:hidden;
	overflow-y:scroll;
	z-index:100;
}
div.edge {
	min-height:70%;
	padding:1rem; padding-top:4rem;
	position:absolute;
}
body.animationsOn div.edge {
	-webkit-transition: left 0.5s, right 0.5s;
	transition: left 0.5s, right 0.5s;
}
body.animationsOn #EdgeOne.three {left:-200%; right:200%;}
body.animationsOn #EdgeOne.two, body.animationsOn #EdgeTwo.three {left:-100%; right:100%;}
body.animationsOn #EdgeOne.one, body.animationsOn #EdgeTwo.two, body.animationsOn #EdgeThree.three {left:0%; right:0%;}
body.animationsOn #EdgeTwo.one, body.animationsOn #EdgeThree.two {left:100%; right:-100%;}
body.animationsOn #EdgeThree.one {left:200%; right:-200%;}

body.animationsOff #EdgeOne.three {display:none;}
body.animationsOff #EdgeOne.two, body.animationsOff #EdgeTwo.three {display:none;}
body.animationsOff #EdgeOne.one, body.animationsOff #EdgeTwo.two, body.animationsOff #EdgeThree.three {display:block; left:0%; right:0%;}
body.animationsOff #EdgeTwo.one, body.animationsOff #EdgeThree.two {display:none;}
body.animationsOff #EdgeThree.one {display:none;}
/* Content panels */
div.panel {
	margin:1rem;
	position:absolute;
	left:1rem; top:4rem; right:1rem;
	padding:1rem;
	text-align:center;
	z-index:110;
}
div.page.lightTheme div.panel {
	box-shadow:0 0 1rem 0 rgba(0,0,0,0.2);
	border:1px solid black;
}
div.page.darkTheme div.panel {
	box-shadow:0 0 1rem 0 rgba(255,255,255,0.2);
	border:1px solid white;
}
/* Lyrics display */
#LyricsPanel {
	padding-top:3rem;
	padding-bottom:3rem;
}
p.tallLines {line-height:2rem;}
p.normalLines {line-height:inherit;}
span.wholeWord {
	display:inline-block;
	white-space:nowrap;
}
div.noTablatures span.tablature {
	display:none;
}
div.showTablatures span.tablature {
	display:inline-block;
	width:0px;
	height:2rem;
	overflow:visible;
	position:relative;
	top:-1rem;
	left:0;
}
/* In Lyrics: Transposer */
div.transposerContainer {
	display:block;
	max-width:7rem;
	margin:auto;
	margin-bottom:1rem;
}
div.transposerLabel {
	text-align:center;
}
div.transposerTable {
	display:table;
	width:100%;
	height:2rem;
	margin-top:0.25rem;
}
div.transposerRow {
	display:table-row;
	width:100%;
}
div.transposerCell {
	display:table-cell;
	vertical-align:middle;
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */    
}
div.transposerCell.arrow {
	background-color:gray;
	border-radius:1rem;
	cursor:pointer;
}
div.transposerCell.level {
	font-size:1.5rem;
	cursor:default;
}


/* Results list */
hr {
	margin-top:1rem;
	margin-bottom:1rem;
}
ul.indexList {
	list-style:none;
	padding:0px;
}
ul.indexList li {
	opacity:0.85;
	-ms-filter:alpha(opacity=85);
	display:block;
	border-radius:1rem;
	cursor:pointer;
	padding:0px;
	overflow:hidden;
	margin-bottom:0.25rem;
}
ul.indexList li.simple {
	font-size:1.1rem;
	padding-top:0.25rem;
	padding-bottom:0.25rem;
}
body.animationsOn ul.indexList li {
	-webkit-transition: opacity 0.1s;
	transition: opacity 0.1s;
	text-align:center;
}
ul.indexList li:hover {
	opacity:1.0;
	-ms-filter:alpha(opacity=100);
}
div.page.lightTheme ul.indexList li {
	border:1px solid black;
}
div.page.darkTheme ul.indexList li {
	border:1px solid rgb(200,200,187);
}
ul.indexList li div.aligner {
	display:table;
	width:100%;
	margin:0px;
	padding:0.35rem;
	padding-left:0.15rem;
}
body.animationsOn ul.indexList li div.aligner {
	background-image:url('feather.png');
	background-repeat:no-repeat;
	background-position: left bottom;
}
body.animationsOn div.page.lightTheme li div.aligner {
	background-image:url('featherlight.png');
}
body.animationsOn div.page.darkTheme li div.aligner {
	background-image:url('featherdark.png');
}
ul.indexList li div.aligner div.alignerRow {
	display:table-row;
	width:100%;
}
ul.indexList li div.aligner div.alignerRow > div {
	display:table-cell;
	vertical-align:middle;
	padding:0px;
	margin:0px;
}
ul.indexList li div.aligner div.alignerRow > div > span.note {
	display:inline-block;
	vertical-align:middle;
	padding:0px;
	margin:0px;
}
ul.indexList li div.aligner div.alignerRow > div.title {
	text-align:center;
	font-size:1.1rem;
	width:80%;
}
ul.indexList li div.aligner div.alignerRow > div.notes {
	padding-left:1rem;
	padding-right:1rem;
	text-align:right;
}
ul.indexList li span.note {
	text-align:center;
	font-size:0.9rem;
	border:1px solid gray;
	border-radius:1rem;
	width:2.5rem;
	overflow:hidden;
	margin:0px;
	background-color:rgba(255,255,255,0.5);
}
ul.indexList li span.standAlone {
	margin-left:0.5rem;
	padding-left:0.5rem;
	padding-right:0.5rem;
}
ul.indexList li span.spanish {
	background-color:rgba(255,255,200,0.5);
}
ul.indexList li span.tabs {
	background-color:rgba(200,200,255,0.5);
}

/* Settings panel */
div.settingsContainer {
	display:block;
	max-width:40rem;
	margin:auto;
}
div.settingsTable {
	display:table;
	width:100%;
}
div.settingRow {
	display:table-row;
	width:100%;
}
div.settingTitle, div.settingSwitch {
	display:table-cell;
	padding:1rem;
	vertical-align:middle;
}
div.settingTitle { text-align:right; width:60%; }
div.settingSwitch { text-align:left; height:40%; }
div.settingSwitchChannel {
	width:4rem;
	background-color:black;
	border-radius:1rem;
	cursor:pointer;
}
div.settingSwitchButton {
	width:2rem;
	border-radius:1rem;
}
body.animationsOn div.settingSwitchButton {
	-webkit-transition:margin-left 0.5s, margin-right 0.5s, background 0.5s;
	transition:margin-left 0.5s, margin-right 0.5s, background 0.5s;
}


/* Loading overlay */
div.loading {
	display:block;
	position:absolute;
	left:0px; top:0px;
	bottom:0px; right:0px;
	background-color:black;
	opacity:0.90;
	-ms-filter:alpha(opacity=90);
	z-index:2500;
}
div.loading div.circle {
	width:8rem; height:8rem;
	border-radius:4rem;
	position:absolute;
	left:0px; top:0px;
}
div.loading div.top {
	left:50%; top:50%;
	margin-top:-4rem;
	margin-left:-4rem;
	overflow:hidden;
}
div.loading div.ring {
	background-color:black;
	box-shadow: inset 0 0 0 0.4rem white;
}
div.loading div.info {
	line-height:8rem;
	text-align:center;
	color:white;
}
div.loading div.rect {
	position:absolute;
	left:50%;top:50%;
	height:50%;
	width:100%;
	background-color:black;
	transform-origin:0 0;
	animation: 4s linear 0s infinite normal rottA;
}
@keyframes rottA {
	from {transform:rotate(-90deg);}
	to {transform:rotate(270deg);}
}



body.animationsOff div.page.lightTheme div.on div.settingSwitchButton {
	margin-left:2rem;
	margin-right:0;
	background: #eef2f8;
}
body.animationsOn div.page.lightTheme div.on div.settingSwitchButton {
	margin-left:2rem;
	margin-right:0;
	background: #eef2f8;
	background: -moz-linear-gradient(top, #eef2f8 0%, #d2ddee 50%, #bccee8 51%, #e4eaf4 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #eef2f8 0%,#d2ddee 50%,#bccee8 51%,#e4eaf4 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #eef2f8 0%,#d2ddee 50%,#bccee8 51%,#e4eaf4 100%);
}
body.animationsOff div.page.lightTheme div.off div.settingSwitchButton {
	margin-left:0;
	margin-right:2rem;
	background: #f2f2f2;
}
body.animationsOn div.page.lightTheme div.off div.settingSwitchButton {
	margin-left:0;
	margin-right:2rem;
	background: #f2f2f2; /* Old browsers */
	background: -moz-linear-gradient(top, #f2f2f2 0%, #dfdfdf 50%, #d0d0d0 51%, #ebebeb 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #f2f2f2 0%,#dfdfdf 50%,#d0d0d0 51%,#ebebeb 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #f2f2f2 0%,#dfdfdf 50%,#d0d0d0 51%,#ebebeb 100%);
}
body.animationsOff div.page.darkTheme div.on div.settingSwitchButton {
	margin-left:2rem;
	margin-right:0;
	background: #b5c3d7; /* Old browsers */
}
body.animationsOn div.page.darkTheme div.on div.settingSwitchButton {
	margin-left:2rem;
	margin-right:0;
	background: #b5c3d7; /* Old browsers */
	background: -moz-linear-gradient(top, #b5c3d7 0%, #748eb6 50%, #4c6994 51%, #9caeca 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #b5c3d7 0%,#748eb6 50%,#4c6994 51%,#9caeca 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #b5c3d7 0%,#748eb6 50%,#4c6994 51%,#9caeca 100%);
}
body.animationsOff div.page.darkTheme div.off div.settingSwitchButton {
	margin-left:0;
	margin-right:2rem;
	background: #7d7d7d; /* Old browsers */
}
body.animationsOn div.page.darkTheme div.off div.settingSwitchButton {
	margin-left:0;
	margin-right:2rem;
	background: #7d7d7d; /* Old browsers */
	background: -moz-linear-gradient(top, #7d7d7d 0%, #5e5e5e 50%, #474747 51%, #717171 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #7d7d7d 0%,#5e5e5e 50%,#474747 51%,#717171 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #7d7d7d 0%,#5e5e5e 50%,#474747 51%,#717171 100%);
}

body.animationsOff div.page.lightTheme div.open, 
body.animationsOff div.page.lightTheme div.open span.graded {
	background: #f8f4ea; /* Old browsers */
}
body.animationsOn div.page.lightTheme div.open, 
body.animationsOn div.page.lightTheme div.open span.graded {
	background: #f8f4ea; /* Old browsers */
	background: -moz-linear-gradient(top, #f8f4ea 0%, #f7f7f7 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #f8f4ea 0%,#f7f7f7 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #f8f4ea 0%,#f7f7f7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f4ea', endColorstr='#f7f7f7',GradientType=0 ); /* IE6-9 */
}
body.animationsOff div.page.lightTheme ul.indexList li, 
body.animationsOff div.page.lightTheme div.closed, 
body.animationsOff div.page.lightTheme div.closed span.graded,
body.animationsOff div.page.lightTheme div.transposerCell.arrow,
body.animationsOff div.page.lightTheme div.settingSwitchChannel {
	background: #e7d7ab; /* Old browsers */
}
body.animationsOn div.page.lightTheme ul.indexList li, 
body.animationsOn div.page.lightTheme div.closed, 
body.animationsOn div.page.lightTheme div.closed span.graded,
body.animationsOn div.page.lightTheme div.transposerCell.arrow,
body.animationsOn div.page.lightTheme div.settingSwitchChannel {
	background: #e7d7ab; /* Old browsers */
	background: -moz-linear-gradient(top, #f8f4ea 0%, #eee3c6 50%, #e7d7ab 51%, #f4eedc 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #f8f4ea 0%,#eee3c6 50%,#e7d7ab 51%,#f4eedc 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #f8f4ea 0%,#eee3c6 50%,#e7d7ab 51%,#f4eedc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f4ea', endColorstr='#f4eedc',GradientType=0 ); /* IE6-9 */
	box-shadow:inset 0 0 0.5rem 0 rgba(255,255,255,0.5);
}
body.animationsOff div.page.darkTheme div.open, 
body.animationsOff div.page.darkTheme div.open span.graded {
	background: #1e1d1c; /* Old browsers */
}
body.animationsOn div.page.darkTheme div.open, 
body.animationsOn div.page.darkTheme div.open span.graded {
	background: #1e1d1c; /* Old browsers */
	background: -moz-linear-gradient(top, #1e1d1c 0%, #312f29 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #1e1d1c 0%,#312f29 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #1e1d1c 0%,#312f29 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e1d1c', endColorstr='#312f29',GradientType=0 );
}
body.animationsOff div.page.darkTheme ul.indexList li,
body.animationsOff div.page.darkTheme div.closed, 
body.animationsOff div.page.darkTheme div.closed span.graded,
body.animationsOff div.page.darkTheme div.transposerCell.arrow,
body.animationsOff div.page.darkTheme div.settingSwitchChannel {
	background: #453e2d; /* Old browsers */
}
body.animationsOn div.page.darkTheme ul.indexList li,
body.animationsOn div.page.darkTheme div.closed, 
body.animationsOn div.page.darkTheme div.closed span.graded,
body.animationsOn div.page.darkTheme div.transposerCell.arrow,
body.animationsOn div.page.darkTheme div.settingSwitchChannel {
	background: #453e2d; /* Old browsers */
	background: -moz-linear-gradient(top, #453e2d 0%, #352f21 50%, #272319 51%, #3f3929 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #453e2d 0%,#352f21 50%,#272319 51%,#3f3929 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #453e2d 0%,#352f21 50%,#272319 51%,#3f3929 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	-ms-filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#453e2d', endColorstr='#3f3929',GradientType=0 );
	box-shadow:inset 0 0 0.5rem 0 rgba(200,200,150,0.3);
}
body.blindAvailable > div.screenBlindFrame {
	display:block;
}
div.screenBlindFrame {
	display:none;
}
div.screenBlindFrame {
	position:absolute;
	left:0; top:0; bottom:0; right:0;
	z-index:2000;
	transition:background-color 1s;
}
div.screenBlindFrame.on {
	background-color:rgba(0,0,0,1);
	pointer-events:auto;
}
div.screenBlindFrame.off {
	background-color:rgba(0,0,0,0);
	pointer-events:none;
}
div.screenBlindButton {
	cursor:pointer;
	position:absolute;
	bottom:1.125rem;
	right:1.125rem;
	width:2.5rem;
	height:2.5rem;
	border-radius:1.25rem;
	border:1.5px solid rgb(220,220,220);
	background-color:rgb(0,0,0);
	transition:box-shadow 1s;
	pointer-events:auto;
}
div.screenBlindButton.off {
	box-shadow:0 0 0 0rem rgb(120,120,120);
}
div.screenBlindButton.on {
	box-shadow:0 0 0 10rem rgba(255,255,255,0);
}
div.screenBlindCross1 {
	width:1.5px;
	height:1.625rem;
	position:absolute;
	left:1.2rem; top:0.425rem;
	background-color:rgba(220,220,220);
}
div.screenBlindCross2 {
	width:1rem;
	height:1.5px;
	position:absolute;
	left:0.725rem; top:0.75rem;
	background-color:white;
	background-color:rgba(220,220,220);
}