#pieceList {
			background: white;
			top: 200px;
			left: 50%;
			transform: translate(-50%,0);
			width: 500px;
			z-index: 1000;
			position: fixed;
			padding: 15px;
			
			border-radius: 5px;
			-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.21);
		    -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.21);
		    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.21);
		}
		
		#seeGuide {
			background: white;
			border-radius: 5px;
			-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.21);
		    -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.21);
		    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.21);
		    
		    top: 50%;
		    left: 50%;
		    position: fixed;
		    transform: translate(-50%,-50%);
		    padding: 1em;
		    max-width: 500px;
		}
		
		.htit {
			font-size: 1.2em;
		}
		
		#togged {
			background: #e4e2e0;
		}
		
		.helpButtons {
			width:100%;
			height:2.5em;
			border-radius: 5px;
			padding-left: 5px;
			padding-right: 5px;
			/*padding-top:0.25em;
			padding-bottom:0.25em;
			padding-left:0.5em;
			padding-right:0.5em;*/
		}
		
		#helpStuff {
			width:650px;
			max-height:80%;
			left:50%;
			top: 100px;
			transform:translateX(-50%);
			background: white;
			z-index: 1000;
			position: fixed;
			padding: 15px;
			padding-right: 35px;
			
			border-radius: 5px;
			-webkit-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.21);
		    -moz-box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.21);
		    box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.21);
		}
		
		#lister {
			height: 400px;
			padding-bottom: 15px;
			overflow-y:scroll;
		}
		
		#pernter {
			cursor: pointer;
		}
		
		#pieceListTitle {
			color: black;
			font-size: 32px;
			text-align: center;
			font-family: times;
		}
		
		.pieces {
			color: black;
		}
		
		.piece {
			color: #868F9B;
		}
		
		.piece:hover {
			background: #eee;
		}
		
		.composerLib {
			color: black;
			font-size: 26px;
			font-weight: bold;
			font-family: times;
		}
		/*body::-webkit-scrollbar {
			width: 8px;
			height: 8px;
			background: transparent;
		}
		body::-webkit-scrollbar-thumb {
			background: #A0AFB3;
			-webkit-border-radius: 0px;
		}*/
		@page { 
			size: landscape;
		}
		
		body {
			margin:0;
			color:#000000 !important;
		}
		@page { 
			size: landscape;
		}
		@font-face {
			font-family: taFont;
			src: url(../fonts/ArialMT1.ttf);
		}
		@media screen and (-webkit-min-device-pixel-ratio:0) {
		  @font-face {
			font-family: taFont;
			src: url(../fonts/ArialMT1.ttf);
		  }
		}
		@font-face {
			font-family: Century Schoolbook L;
			src: url(../fonts/century.ttf);
		}
		@media screen and (-webkit-min-device-pixel-ratio:0) {
		  @font-face {
			font-family: Century Schoolbook L;
			src: url(../fonts/century.ttf);
		  }
		}		
		@font-face {
			font-family: myFirstFont;
			src: url(../fonts/Untitled1.ttf);
		}
		@media screen and (-webkit-min-device-pixel-ratio:0) {
		  @font-face {
			font-family: myFirstFont;
			src: url(../fonts/Untitled1.ttf);
		  }
		}
		#help {
			position:absolute;
			top:150px;
			left:100px;
		}
		ul li {
			margin-bottom: 10px;
		}
		ul.dash {
			list-style: none;
			margin-left: 0;
			padding-left: 2em;
			padding-top: 1em;
		}
		ul.dash > li:before {
			display: inline-block;
			content: "—";
			width: 1em;
			margin-left: -1em;
		}
		ul li ul li {
			margin-bottom: 8px;
		}	
		body {
			color: black !important;
			cursor: default;
			-webkit-touch-callout: none;
			-webkit-user-select: none;
			-khtml-user-select: none;
			-moz-user-select: none;
			-ms-user-select: none;
			user-select: none;					
		}

		.main-btn, .white-btn, .outline-btn, .red-btn {
			display: inline-block;
			padding: 10px 35px;
			margin: 3px;
			border: 2px solid transparent;
			border-radius: 3px;
			-webkit-transition: 0.2s opacity;
			transition: 0.2s opacity;
		}

		.main-btn {
			margin-top: 1em;
			background: #5A7E98;
			color: #FFF;
		}

		.red-btn {
			margin-top: 1em;
			background: #ff5d5d;
			color: #FFF;
		}
		
		.svgIcon {
			width: 50px;
			height: 50px;
			position: fixed;
			left: 80px;
			top: 6px;
			z-index: 9001;
			cursor: pointer;
		}
		
		#legend {
			position: fixed;
			border-radius: 5px;
			box-shadow: 3px 3px 3px #555;
			padding-left: 2em;
			padding-right: 2em;
			padding-top: 0.5em;
			max-width: 450px;
			background: #FFFEFA;
			right: 2px;
		}
		
		#legendTitle {
			font-size: 1.5em;
		}
		
		.legendEntry {
			text-align: center;
			height: 50px;
			position: relative;
		}
		
		.themeContainer {
			height: 40px;
			float: left;
			width: 40px;
		}
		
		.textContainer {
			height: 40px;
			float: left;
		}
		
		.theme {
			width: 28px;
			height: 10px;
			margin-right: 1em;
			position: relative;
			top: 15px;
			left: 6px;
		}
		
		.normal {
			background: #FF00FF;
		}
		
		.invert {
			background: #00E6E6;
		}
		
		.rednormal {
			background: #E60000;
		}
		
		.partial {
			opacity: 0.4;
		}
		
		.secondTheme {
			width: 14px;
			height: 14px;
			margin-right: 1em;
			position: relative;
			top: 13px;
			border-radius: 1000px;
			left: 13px;
		}
		
		.arpeggioTheme {
			width: 14px;
			height: 14px;
			margin-right: 1em;
			position: relative;
			top: 13px;
			border-radius: 1000px;
			left: 13px;
		}
		
		.legendText {
			line-height: 40px;
		}

		
		#lightbulbButton {
			position:fixed; margin:12px 0 0 12px; top:0px; left:50px;
			font-size: 1.5em;
			z-index: 9001;
			cursor: pointer;
			/*display:inline-block;vertical-align:middle;position:relative;*/
		}
		
		#helpButton {
			position:fixed; margin:6px 0 0 6px; top:0px; right:10px;
			font-size: 2em;
			z-index: 9001;
			cursor: pointer;
			/*display:inline-block;vertical-align:middle;position:relative;*/
		}
		
		.bulbText {
			position: absolute;
			background-color: white;
			padding-top: 0.5em;
			padding-bottom: 0em;
			padding-left: 0.5em;
			padding-right: 0.5em;
			font-family: caslon;
			border-radius: 0.5em;
			border: 1px solid black;
			box-shadow: 10px 10px 10px #555;
		}