<head>
<style>
	body {
	    font-family: robotto mono, andale mono, monospace;
	    background:lightblue;
	    color:deeppink;
	    text-shadow: 1px 1px 1px aqua, -1px -1px 1px yellow;

	    text-transform: uppercase;
	    text-align: center;

	    padding-bottom:3em;
	}




	/*--------------------------------*/
	/* General styles */
	.main {
	    max-width: 800px;
	    margin:0px auto;

	    display:flex;
	    justify-content: space-evenly;
	    flex-wrap:wrap;
	}

	.bd {
		margin:0.25em;
	    padding:0.25em;
    	border:0.25em solid deeppink;
    	box-shadow: 1px 1px 1px aqua, -1px -1px 1px yellow;
	}

	.tbd {
		background:yellow;
		max-width:400px;
		margin:0px auto;
	}

   	.fullWidth {
    	width:100%;
   	}

	.hide {
		display:none;
	}





	/*--------------------------------*/
	/* Headings */
	h1 {}
	h2 {
		padding-top:1.5em;
	}
	h3 {
	    padding-bottom:0em;
	    margin-bottom:0em;
	    text-align: center;
    }




	/*--------------------------------*/
    /* Buttons */
   	button {
		padding:0.25em 0.5em;
		border:0.25em outset deeppink;

		box-shadow: 1px 1px 1px aqua, -1px -1px 1px yellow;
		font-family: robotto mono, andale mono, monospace;
		font-size: large;

		color:deeppink;
		text-shadow: 1px 1px 1px aqua, -1px -1px 1px yellow;
		background:rgba(255,255,255,0.6);
   	}

	button:active {
		background-color: yellow;
		border:0.25em inset deeppink;
	}





	/*--------------------------------*/
	/* Inputs */
	.input-div {
	    flex-grow:1;
	    flex-basis: 0;
	    text-align: center;
	}

	input {
	    font-family: robotto mono, andale mono, monospace;
	    width:100%;
	    font-size: large;

	    background:rgba(255,255,255,0.6);
	    box-shadow: 1px 1px 1px aqua, -1px -1px 1px yellow;

	    color:deeppink;
	    text-shadow: 1px 1px 1px aqua, -1px -1px 1px yellow;

	    display:block;
	    box-sizing:border-box;

	    text-align: center;
	    margin:0px auto;
	}

	label {
	    display:block;
	    font-weight: bold;
   	}

   	.side {
   		display:inline;
   	}

   	select {
   		font-family: robotto mono, andale mono, monospace;
	    width:7em;
	    font-size: large;

	    background:rgba(255,255,255,0.6);
	    box-shadow: 1px 1px 1px aqua, -1px -1px 1px yellow;

	    color:deeppink;
	    text-shadow: 1px 1px 1px aqua, -1px -1px 1px yellow;

	    box-sizing:border-box;
	    text-align: center;
   	}



   	.slider {
   		box-sizing:border-box;
   		box-shadow: none;
   	}







   	/*--------------------------------*/
	/* Key table styles*/
	#key-container {
		overflow-x: scroll;
	}

	#key-table td {
		text-align: center;
		vertical-align: top;
	}

	#xenOctaveRow td {
		border-bottom:3px solid rgba(255,20,147,0.25);
		background: rgba(255,255,255,0.5);
		text-align: center;
	}

	#octRow td {
		border-top:3px solid rgba(255,20,147,0.25);
		background: rgba(255,255,255,0.5);
		text-align: center;
	}

	.kk {
		border:2px outset deeppink;
		height:3em;
	}

	.kk:active {
		border:2px inset deeppink;
	}

	.wk {
		background-color: rgba(255,255,255,0.25);
	}

	.bk {
		background-color: rgba(0,0,0,0.25);
		height:2.5em;
	}

	.rootButton {
		background-color:yellow;
	}









	/*--------------------------------*/
	/* Oscilator styles */
	.osc-divs {
	    flex-grow:1;
	    text-align: center;
	    width:fixed;
	}







	/*--------------------------------*/
	/* Table output styles */
	.output-div {
		display:flex;
		justify-content: space-evenly;
		flex-wrap: wrap;
	}

	.output-cell {
		text-align: left;
	}








	/* MIDI table styling--------*/
	.midiTable {
	    border-collapse: collapse;
	    border-spacing: 0px;
	    display:inline-block;
	}

	.midiTable td {
		vertical-align: top;
		text-align: right;
		padding:0em 0.5em;
	}

	.midiTable tbody>tr>:nth-child(2){
		text-align: left;
	}

	.midiTable tbody>tr>:nth-child(4){
		border-left:1px solid rgba(255,255,255,0.5);
		border-right:1px solid rgba(255,255,255,0.5);
	}

	.bKey {}

	.wKey {
		background:rgba(255,255,255,0.25);
	}



</style>
</head>