* {
	margin:0;
	padding:0;
}

body {
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	/* background-color:#ddd1e7; */
}

#mainContainer {
	margin-bottom: 100px;
}

#appTitle {
	background-color:#000;
	color:#FFF;
	padding:2px;
}

.visualizerSizeChanges {
	font-size: 14pt;
}

#songBy {
	background-color:#000;
	color:#FFF;
	padding:3px;

	font-size:12pt;
}

p#loadingMessage, p#completedLoadingMessage {
	padding:5px;
	background-color: #000;
	color:#FFF;
	font-family: monospace;
	margin-top:100px;
	text-align: center;

	font-size:16pt;
}

#visualizer {
	margin:10px;
}

#footerContainer {
	padding:5px;
	position: fixed;
	bottom: 0px;
	height: 50px;
	line-height: 50px;
}

@media all and (max-width : 739px) {
	#mainContainer {
		margin-bottom: 150px;
	}

	#footerContainer {
		height: 100px;
	}
}

@media all and (max-width : 469px) {
	#mainContainer {
		margin-bottom: 200px;
	}

	#footerContainer {
		height: 150px;
	}
}

select,
textarea {
  font-size: 16px;
}

#songListTable {
	width:100%;
	font-size: 10pt;
}

#songListTable th {
    text-align: left;
}

#songListTable th, td {
	height:20pt;
  border-bottom: 1px solid #ddd;
}


.note {
	margin:1px;

	display: inline-block;
	font-size: 14pt;
	opacity: 0;

	border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;

	padding: 2px;

	text-align: center;
}

.noteSharp {
}

.footerItem {
	border-radius: 25px;

	background-color: #EEE;

	/* border:1px solid #000; */
	width:50px;
	text-align: center;
	display: inline-block;
}

.timeline {
	width:350px;
}

#timelineSlider {
	width:300px;
}

.footerItem > img {
	width:15px;
}

hr {
	margin:0 auto 2px auto;

	border: 0;
	width: 90%;
	color: #DDD;
	background-color: #DDD;
	height: 2px;

}

/* Conveter Drop Zone */
#midiDropZone {
	height: 70px;
	line-height: 70px;

	text-align: center;
	border:1px dotted #000;
	vertical-align: middle;

	color: #808080;
}

.midiDropZoneDragging {
	background-color:#DDD;
	color: #000;
}

/* Conveter Textarea */
textarea.converterTextarea {
	width:100%;
}

/* Lean Overlay */
#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

.modal {
	width:350px;
	display: none;
	background-color:#FFF;

	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

.modalBody {
	padding:0 20px 20px 20px;
}

.modalBody > h1 {
	border-bottom:1px solid #696969;

	margin-top:10px;
	margin-bottom:10px;
	font-family: inherit;
	font-weight: 350;
	color: inherit;
}

.modalBody > h2 {
	margin-top:10px;
	font-family: inherit;
	font-weight: 250;
	color: inherit;
}

.modalBody > p {
	margin:5px;
}

.modalBody a {
	color:#888;
}

.modalBody a:hover {
	color:#333;
}

.modalBody ol, ul {
	padding-left: 0;
	list-style-position: inside;
	list-style-type: square;
}


#fireworksContainer {
	height:100%;
	width:100%;

	position: fixed;
	top: 0;
	left: 0;

	z-index: -1;
}