@font-face {
	font-family:'Jaggy';
	src: url('fonts/jaggyfries.ttf');
}
@font-face {
	font-family:'Love';
	src: url('fonts/LoveYaLikeASister.ttf');
}

@font-face {
	font-family:'Graffiti';
	src: url('fonts/GRAFFITI.TTF');
}
@font-face {
	font-family:'Aaight-fat';
	src: url('fonts/aaaiight-fat.ttf');
}
@font-face {
	font-family:'Base2';
	src: url('fonts/Base 02.ttf');
}
@font-face {
	font-family:'CocaineSans';
	src: url('fonts/Cocaine sans.ttf');
}
@font-face {
	font-family:'EpoxyHistory';
	src: url('fonts/EpoXY_histoRy.ttf');
}
@font-face {
	font-family:'Graffonti1';
	src: url('fonts/graffonti1.ttf');
}
@font-face {
	font-family:'Graffonti2';
	src: url('fonts/graffonti2.ttf');
}
@font-face {
	font-family:'GrandStylus';
	src: url('fonts/Grand Stylus.ttf');
}
@font-face {
	font-family:'Phorssa';
	src: url('fonts/Phorssa.ttf');
}
@font-face {
	font-family:'Eraser';
	src: url('fonts/eraser.ttf');
}
@font-face {
	font-family:'Ghost';
	src: url('fonts/Everyday_Ghost.ttf');
}


/* CSS */


html body {
	margin: 0;
	padding: 0;
	background-color:#558C89;
	font-family: 'Trochi', serif;
	font-size:fontsizer(20,40,800,1200);
}


body#shiny { /*apply to shiny body only*/
	box-shadow:none;
}

/*****************HEADER************************/

#header h1 {
	text-align: center;
	margin:0;
	padding:10px;
	color:#558C89;
	font-family:'Graffonti2';
	text-shadow:1px 1px 1px red, -1px -1px 1px #733, 3px 3px 6px black;
}

#header {
	margin: 0;
	position:fixed;
	top:0px;
	width:100vw;
	height:100px;
	padding:0px;
	z-index:4;
	background-color: #111;
	background: linear-gradient(top, #111 0%, #733 100%);
	background: -moz-linear-gradient(top, #111 0%, #733 100%);
	background: -webkit-linear-gradient(top, #111 0%, #733 100%);
	color:white;
	text-shadow: 3px 3px 8px #222;
	border-bottom:groove red;
}


/***************NAVIGATION BAR******************/
nav {
	width: 200px;
	margin: 0 auto;
	padding:0;
	position:fixed;
	height:80vh;
	background-color: #111;
	background: linear-gradient(bottom, #111 0%, #733 100%);
	background: -moz-linear-gradient(bottom, #111 0%, #733 100%);
	background: -webkit-linear-gradient(bottom, #111 0%, #733 100%);
	position:fixed;
	border-right:groove red;
	border-bottom:groove red;
	border-bottom-right-radius:30px;
	left:-1500px;
	transition:left 1s;
	transition:width 1s;
	z-index:2;
}

nav a {
	font-weight:normal;
	/* font-style:italic; */
}


nav ul {
		width:100%;
		list-style-type: none;
		margin: 0;
		padding: 0;
	}


	nav ul:after {
		content: "";
		clear: both;
		display: block;
	}

		nav ul li {
			width:98%;
      font-size:18px;
			height:15vh;
			position:relative;
			margin:0;
		}

		nav ul li a {
			overflow:hidden;
			white-space:nowrap;
			letter-spacing:3px;
			text-align:left;
			text-decoration: none;
			text-shadow:3px 3px 3px black;
			padding-left:5px;
			margin-top:30px;
			display:inline-block;
		}

				nav ul li ul {
					display:none;
					margin:0 auto;
					position:absolute;
					list-style-type:none;
				}

					nav ul li ul li {
						display:table-row;
						float:left;
						height:3vh;
						position:relative;
						margin:0;
						padding-left:20px;
					}
						nav ul li ul li a {
							padding-top:10px;
							padding-bottom:10px;
							display:table-cell;
							vertical-align:middle;
							margin:0 auto;
							}



/* Hover, inline, On smaller screens */
@media screen and (max-width:1000px) 
 {
  nav:hover 
    {
      width:300px; 
      /* width:33%; */
    }
  

  nav ul li:hover > ul 
    {
     display:inline;
    }
 }


nav ul li:hover > a.active {
	text-decoration:none;
	font-weight:normal;
}

nav ul li a:hover:not(.current) {
	text-shadow: 3px 3px 3px red;
}



/*******STUFF TO MAKE NAVBAR APPEAR on small screen */
/*  I CAN'T FIND ANY IMPACT OF THIS... There is no element nav-trigger used */
nav-trigger {
	position:absolute;
	left:400px;
	clip:rect(0px,50px,50px,0px);
}


label[for="nav-trigger"] {
	position:fixed;
	left:20px;
	top: 60px;
	z-index:2;
	
	height:30px;
	width:30px;
	cursor:pointer;
   
  /* This can be symbol &#9776 in the HTML 
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6' fill='white'/><rect y='24' width='30' height='6' fill='white'/><rect y='12' width='30' height='6' fill='white'/></svg>");
   */
  background-size: contain;
}

/*  class navigation is never immediate sibling of nav-trigger, so this should never hold  */
.nav-trigger:checked + .navigation {
	left:-1500px;
}


.nav-trigger:checked ~ .navigation {
	left:0px;
}

/********************The following takes place only on bigger screens************/

@media screen and (min-width:1000px) {
	nav {
	width:98%;
	position:static;
	height:60px;
	transition:left 0s;
	border:none;
	padding:0;
	background:none;
}

nav ul {
	display:block;
	margin-top: 10px;
}

nav > ul {
	height: 50px;
}

nav ul > li {
	height:50px;
}

nav ul li {
	display:inline-block;
	width:24%;
	padding:0;
}	

nav ul li a {
	margin-top:0;
	padding-top:0;
}

nav ul li ul {
	margin:0;
	display:none;
	left:0%;
	position:relative;
	background-color: #111;
	background: linear-gradient(bottom, #111 0%, #733 100%);
	background: -moz-linear-gradient(bottom, #111 0%, #733 100%);
	background: -webkit-linear-gradient(bottom, #111 0%, #733 100%);
	border-bottom:red groove;
	border-right:red groove;
	border-left:red groove;
	border-bottom-right-radius:7px;
	border-bottom-left-radius:7px;
	
}

nav ul li ul li {
	position:static;
	padding:0;
	width:100%;
	float:left;
	margin:0 auto;
	padding-bottom:0px;
	padding-top:0px;
}

nav ul li ul li a {
	display:block;
	margin:0 auto;
}

nav > ul > li:hover {
	height:200px;
}
nav ul li:hover > ul {
	display:block;
}


label[for="nav-trigger"] {
	left:-50px;
}


}
/***************body stuff*************/

a {
	color:white;
	font-weight:bold;
	text-decoration:none;
	position:relative;
}

p {
	font-family: 'Love';
}


#MainWindow {
	width:98%;
	z-index:1;
	margin:0 auto;
	padding-top:50px;
}

#MainWindow h1 {
	color:#558C89;
	font-family:'Jaggy';
	letter-spacing:15px;
	text-align:center;
	text-shadow: 2px 2px 1px #733, -2px -2px 1px #733, 3px 3px 15px red, 3px 3px 1px black;
}


 h2 {
	color:white;
	text-shadow: -1px -1px black, 1px 1px black,  3px 3px 10px #733;
	font-family:'EpoxyHistory';
	font-weight:normal;
	font-size:2.7em;
	text-align:center;
}



 h3 {
	color:black;
	text-shadow: -1px 0 #558C89, 0 -1px #558C89, 1px 1px black;
	font-family:'Aaight-fat';
	letter-spacing:5px;
	font-size:1.3em;
}

#MainWindow .hreftable h2 {
	text-align:left;
	text-shadow: -1px 0 #558C89, 0 -1px #558C89, 1px 1px black;
}
#MainWindow .hreftable h2:hover {
	text-shadow: 3px 3px 2px #773, -2px -2px black, 2px 2px black, -2px 2px black;
	color:#558C89;
}

 h4 {
	text-align:center;
	color:#558C89;
	text-shadow: -1px 0px black;
	font-family:'Graffiti';
	letter-spacing:5px;
	font-size:1.5em;
}

.TextScroll > h4 {
	color:#733;
}

 h5 {
	color:black;
	font-family:'Love';
	font-size:1.3em;
}

#MainWindow p.ipatab {
	line-height:2em;
}

#MainWindow .item {
	margin-left:20%;
	line-height:2em;
}

.TextScroll > h2 {
	margin-top:80px;
}

.TextScroll > h3 {
	margin-top:80px;
}

#SVGL {
	position:fixed;
	left:0;
	top:150px;
	width:25%;
	z-index:-1;
}

.example text {
	position:relative;
	fill:black;
	font-family:'Love';
	font-weight:lighter;
	text-anchor:middle;
	preserveAspectRatio:none;
}

#SVGR {
	position:fixed;
	right:0;
	top:150px;
	width:25%;
	z-index:-1;
}

.TextScroll p a {
	font-family:'Aaight-fat';
	letter-spacing:4px;
	text-shadow:3px 3px 1px #773;
	color:#733;
}

.MC {
	text-shadow:2px 2px 1px #773, 3px 3px 1px black;
}

.Song {
	text-shadow:1px 1px 1px black, 3px 3px 1px red;
}

.TextScroll p b a {
	font-family:'Love';
}

#MainWindow  a:hover {
	text-shadow: 3px 3px 2px red, -1px -1px 1px black, 1px 1px black;
	color:#558C89;
	font-weight:italic;
}



.TextScroll {
	width:60%;
	margin:0 auto;
}


#MainWindow p {
	color:white;
	font-family:'Love';
	text-align:justify;
	padding:10px;
	font-weight:normal;
	line-height:160%;
	text-shadow:3px 3px 1px #733;
}

#MainWindow p + p {
	text-indent:8%;
}

span.indent {
	text-indent:10%;
	display:block;
	padding-top:4px;
	text-shadow:none;
	font-size:.9em;
	padding-bottom:20px;
}


.TextScroll p b {
	font-weight:normal;
	text-shadow:3px 3px 1px #773;
	color:#733;
}

span.ipa {
	font-family:'Serif'; 
	color:#733;
	text-shadow:3px 3px 1px #773;
	font-size:1.4em;
}

.SubBlock span.ipa {
	color: #558C89;
	text-shadow:3px 3px 1px black;
}

#MainWindow b.rs {
	color:white;
	font-family:'Graffonti2';
	text-shadow:3px 3px 1px #733;
}

#MainWindow b.mcflow, b#mcflow {
	color:white;
	font-size:1.1em;
	font-family:'Jaggy';
	text-shadow:3px 3px 1px #733, -1px -1px 1px red;
	font-weight:bold;
}

#MainWindow span.mdash {
	font-family:'serif';
	font-size:1.5em;
}

.back {
	color:white;
	text-decoration:none;
	font-size:1.1em;
	margin-left:80%;
	font-style:italic;
	font-family:'Aaight-fat';
}


.SubBlock {
	width:90%;
	border-radius:40px;
	display:block;
	margin:0 auto;
	margin-top:20px;
	background-color:#733;
	margin-bottom:10px;
	box-shadow:inset 3px 3px 20px 5px #333;
	position:relative;
	padding:25px 40px 20px 40px;
}

#MainWindow .SubBlock p {
	text-shadow:3px 3px 1px black;
}

.SubBlock p a {
	color:#558C89;
	text-shadow: 1px 1px 1px black,3px 3px 5px red !important;
}

.SubBlock p a:hover {
	text-decoration:none;
	color:white !important;
	text-shadow:3px 3px 1px #773, 1px 1px 1px black, -1px -1px 1px black !important;
}

.SubBlock p b {
	text-shadow: 3px 3px 2px red, -1px -1px 1px black, 1px 1px black;
	color:#558C89;
	font-weight:italic;


}

.SubBlock h3{
	color:#733;
	text-shadow: -1px 0 #558C89, 0 -1px #558C89, 3px 0 black, 0 3px black;
	font-size:2em;
	margin:0;
	padding-left:50px;
}



#SongList {
	color:white;
	width:100%;
	border-collapse:collapse;
	font-size:.8em;
	text-shadow:3px 3px 1px #733;
}

#SongList th {
	font-size:1.5em;
	font-style:italic;
	border-bottom:thick double #733;
	text-shadow:3px 3px 15px #733;
	text-align:left;
	}

#SongList tr {
	font-size:1.2em;
	}

span.code {
	font-family:'Courier', monospace;
	font-size:1.2em;
}

iframe {
	border:none;
	position:relative;
	margin:0 auto;
	width:100%;
	height:2000px;
}


.hreftable > div{
	padding:20px;
	display: block;
	float:left;
	
}

.anchor {
    display: block;
    position: relative;
    top: -270px;
    visibility: hidden;
}




/******The following is only for the musictheory.html **/

.BPM {
	border-radius:15px;
	border-style:2px solid red;
	width:90%;
}



/*within IFRAME*/


.Subset {
	width:99%;
	margin:0 auto;
	overflow:visible;
}

.Subset .control
{
	width:200px;
	margin-top:24px;
	margin-bottom:14px;
	display:inline-block;
	float:left;
}


.Subset .control div {
	padding-left:4px;
	padding-right:4px;
	padding-top:2px;
}


label {
	color:white;
	width:15%;
	font-family:'Love';
}



#SongInfo {
	width:80%;
	text-align:center;
	padding:10px;
	display:block;
	color:white;
	margin-left:200px;
}

.H2link:hover {
	text-shadow: 3px 3px 2px red, -1px -1px black, 1px 1px black;
	color:#558C89;
	font-weight:italic;
	
}




/* PLOT AREA incl. controls */

#ControlsAndPlot {
	position:relative;
	display:block;
	margin-top:20px;
	width:100%;
	height:1000px;
	float:left;
}

#PlotWrapper {
	float:left;
	width:100%;
}


#PLOT {
	height:1200px;
	margin-left:200px;
}

#Controls {
	position:fixed;
	width:200px;
	padding-top:50px;
	margin-left:0;
	height:1200px;
}

#Controls .control {
	display:block;
	float:left;
	width:100%;
	margin-bottom:1em;
}





/* Shiny slider colors */

.js-irs-0 .irs-bar {
border-top-color: #922;
border-bottom-color: #922;
}

.js-irs-0 .irs-bar-edge {
border-color: #733;
}

.js-irs-0 .irs-single, .js-irs-0 .irs-bar-edge, .js-irs-0 .irs-bar {
background: #558C89;
}