*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
* {
	margin: 0px;
	padding: 0px;
}

ol {
	margin-left: 1.5em; /* 0em; /* 1.5em; */
	margin-bottom: 1.5em;
}

html {
	width: 100%;
	height: 100%;
}

body{
	background: #FFFFFF;
	color: #333333;
	font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
	font-size: 20px; /* 19px; /* 18px; */
	line-height: 1.25em; /* 1.3em; */
	width: 100%;
	height: 100%;
	overflow-x: hidden;
   overflow-y: hidden;
   min-height: 500px;
}

*.unselectable {
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}



/* ************************************************* */
/* Typography ************************************** */

h1, h2, h3, h4, h5, h6 {
	font-family: monospace;
	font-weight: 700; /* normal; /* 400; */
	line-height: 1.25em; /* 1.3em; /* 1.2em */;
	color: #333;
	margin-bottom: 0px; /* 1em; */
}

h1 {
  font-size: 36px; /* 28px; */
  line-height: 1em;
  padding: 0px;
  margin-bottom: 4px; /* 0.2em; */
}
h2 {
  font-size: 24px; /* 32px; /* 25px; */
  margin: 0px 0px 1em 0px;
  padding: 0px;
}
h3 {
  font-size: 24px; /* 24px; /* 20px; */
  padding: 0px;
  margin-bottom: 1em; /* 0px; /* 1em; */
  font-weight: 400;
}

p {
  font-size: 1em;
  margin: 0px 0px 1.5em 0px; /* 0px 0px 2em 0px; */
}

p.blocktext {
	margin-left: auto;
	margin-right: auto;
	width: 6em;
}


/* Buttons */
#navigation .btn {
   padding: 3px; /* 1px; */
}
#navigation .btn a {
	font-family: monospace;
	font-size: 20px; /* 21px; /* 50px; */
	border-radius: 4px;
	border: none; /* 1px solid #CCC; */
	background-color: white;
	outline: none;
	text-decoration: none;
	text-align: left; /* center; */
	padding: 0.35em; /* 0.5em 0px; */
	text-shadow: 3px 0px 0px #FFFFFF,
				2px -2px 0px #FFFFFF,
				0px -3px 0px #FFFFFF,
				-2px -2px 0px #FFFFFF,
				-3px 0px 0px #FFFFFF,
				-2px 2px 0px #FFFFFF,
				0px -3px 0px #FFFFFF,
				2px 2px 0px #FFFFFF;
}
#navigation .btn a:hover {
   background-color: lightblue;
	border: none; /* 1px solid #CCC; */
	cursor: pointer;
	outline: none;
	text-shadow: 3px 0px 0px lightblue,
				2px -2px 0px lightblue,
				0px -3px 0px lightblue,
				-2px -2px 0px lightblue,
				-3px 0px 0px lightblue,
				-2px 2px 0px lightblue,
				0px -3px 0px lightblue,
				2px 2px 0px lightblue;	
}

/* toggle state styles for all buttons */
#navigation .btn a.toggleButtonStyle,
#navigation .btn a.blueButtonStyle,
#navigation .btn a.darkblueButtonStyle {
   color: rgba(255,255,255,0.9);
   text-shadow: none;
}
#navigation .btn a.toggleButtonStyle {
   background-color: blue;
}
/* button styles for button 5, which has three states */
#navigation .btn a.blueButtonStyle { background-color: blue; }
#navigation .btn a.darkblueButtonStyle { background-color:darkblue; }


/* individual markers */
#navigation .frequencyDesc { background: url(../images/frequency.png); }
#navigation .timeDesc { background: url(../images/time.png); }
#navigation .densityDesc { background: url(../images/density.png); }
#navigation .volumeDesc { background: url(../images/volume.png); }
#navigation .envelopeDesc { background: url(../images/envelope.png); }

/* description background images */
#navigation .frequencyDesc,
#navigation .timeDesc,
#navigation .densityDesc,
#navigation .volumeDesc,
#navigation .envelopeDesc {
	flex-basis: 6%; /* 7%; */
	background-repeat: no-repeat;
	background-position: center bottom;
	background-size: contain;
	margin-top: 0.5em;
}


img {
	max-width: 100%;
	height: auto;
}


/* ********************************************************** */
/* OTHER WRAPPERS */

/* *************** Individual Toggles ***************** */
nav#navigation a#btnToggle0 { background-image: url(../images/transparent/FINAL_Icon_1.png); }
nav#navigation a#btnToggle1 { background-image: url(../images/transparent/FINAL_Icon_2.png); }
nav#navigation a#btnToggle2 { background-image: url(../images/transparent/FINAL_Icon_3.png); }
nav#navigation a#btnToggle3 { background-image: url(../images/transparent/FINAL_Icon_4.png); }
nav#navigation a#btnToggle4 { background-image: url(../images/transparent/FINAL_Icon_5.png); }
nav#navigation a#btnToggle5 { background-image: url(../images/transparent/FINAL_Icon_6.png); }
nav#navigation a#btnToggle6 { background-image: url(../images/transparent/FINAL_Icon_7.png); }
nav#navigation a#btnToggle7 { background-image: url(../images/transparent/FINAL_Icon_8.png); }
nav#navigation a#btnToggle8 { background-image: url(../images/transparent/FINAL_Icon_9.png); }
nav#navigation a#btnToggle9 { background-image: url(../images/transparent/FINAL_Icon_10.png); }
nav#navigation a#btnToggle10 { background-image: url(../images/transparent/FINAL_Icon_11.png); }
nav#navigation a#btnToggle11 { background-image: url(../images/transparent/FINAL_Icon_12.png); }
nav#navigation a#btnToggle12 { background-image: url(../images/transparent/FINAL_Icon_13.png); }
nav#navigation a#btnToggle13 { background-image: url(../images/transparent/FINAL_Icon_14.png); }
nav#navigation a#btnToggle14 { background-image: url(../images/transparent/FINAL_Icon_15.png); }

/* common stylings for all btns */
nav#navigation a#btnToggle0,
nav#navigation a#btnToggle1,
nav#navigation a#btnToggle2,
nav#navigation a#btnToggle3,
nav#navigation a#btnToggle4,
nav#navigation a#btnToggle5,
nav#navigation a#btnToggle6,
nav#navigation a#btnToggle7,
nav#navigation a#btnToggle8,
nav#navigation a#btnToggle9,
nav#navigation a#btnToggle10,
nav#navigation a#btnToggle11,
nav#navigation a#btnToggle12,
nav#navigation a#btnToggle13,
nav#navigation a#btnToggle14 {
	background-position: center center;
	background-size: cover; /* contain; /* cover; /* contain; */
	background-repeat: no-repeat;	
}


/* Stylings for overlay in startup
- making the touch event happen for mobile safari on ios */
.overlay {
    background-color: rgba(255,255,255,0.98); /* rgba(102, 102, 0, 0.95); */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0;
    z-index: 100;
    display: none;
}    
#overlayHeader {
    display: block;
    font-family: monospace;
    font-size: 7vw; /* 32px; */
    line-height: 7.25vw;
    font-weight: bold;
    margin-top: 50vh; /* 80px; */
    transform: translate(0, -50%);
    text-align: center;
}

/* ******************************************************************************* */
/* ******************************************************************************* */
/* ******************************************************************************* */
/* ******************************************************************************* */
/* ******************************************************************************* */
/* ******************************************************************************* */
/* ******************************************************************************* */
/* ******************************************************************************* */
/* ******************************************************************************* */

@media {

	.page-wrapper {
		padding: 0px;
		height: 100%;
		display: flex;
	}

	#info,
	#btnWrap #btnSpace {
		flex: 1;
		min-height: 100%;
		background: white;
		overflow-y: scroll;
		padding: 1.35em 0.35em; /* 1.35em 0.35em; /*0.75em 0.5em; /* 10px; */
		display: none;
	}
	#instrument,
	#btnWrap header {
		flex: 1;
		padding: 0px; /* 1px; /* 0px; /* 10px; */
		background: #222; /* #FCFCFC; */
   }
	#btnWrap header.lightBg {
		background: transparent;
	}   
	
	#info #infoTxtWrap {
      display: flex;
		/* background: pink; */
	}
	#info #infoText {
		flex-basis: 94%;
		padding: 0px;
		/* background: lightgreen; */
		padding: 0px 1em 0px 0px; /* 3px 1em 3px 3px; */
		height: auto;
	}
	#info .infoDesc {
		flex-basis: 6%;
		margin-top: 0px; /* 0.5em; */
		padding: 0px;
      text-align: center;
	}

	/* Instrument setup */
	#instrument .controlsWrapper {
		padding: 0.35em;
		background:#222; /* orange; */
		height: 100%; /* 99%; */
		flex-wrap: wrap; /* default is nowrap */
		display: flex;
	}
 
	/* The controls wrapper for both instr and gui */
	#btnWrap {
		width: 100%;
		height: 8vh;  /* 8%; /* 100%; */
      flex-wrap: wrap; /* default is nowrap */
      flex-flow: row wrap;
		display: flex;
		flex: 1;
		position: absolute;
		z-index: 100;
	}
	#btnWrap header {
		display: flex;
		padding: 0.35em 0.35em 0px 0.35em;
	}
	#btnWrap #btnSpace {
		/* width: 100%; */
		/* flex: 4; */
		display: block;
		padding: 0.75em 1em; /* WHAT? 2em did it?? - THIS WAS THE ONE THAT DID IT??? FIXED!!! ... */
		visibility: hidden;
		overflow-y: scroll;
		display: none; /* think twice before removing this! */
	}	
	#btnWrap header h1.Logo {
		flex-basis: 6%;
		overflow: hidden; /* important */
	}
	#btnWrap header #guiBtn,
	#btnWrap header #playBtn {
		flex: 1;
		flex-basis: 47%;
		border-radius: 4px;
		outline: 0;
		margin: 3px;
		font-family: monospace;
		overflow: hidden;
      	font-size: 24px;
      	line-height: 100%;
		background: #222;
		border: 1px solid white;
		color: white;      
	}
	/* hover on dark bg */	
   #btnWrap #guiBtn:hover,
   #btnWrap #playBtn:hover {      
		background: lightblue; /* rgba(119,119,119,1); /* blue; */
		color: #222; /* rgba(255,255,255,0.9); /* white; */
		border: 1px solid lightblue;
		cursor: pointer;
   }
   
	/* play btns on white bg */
	#btnWrap header #guiBtn.lightBg,
	#btnWrap header #playBtn.lightBg {
		background: white;
		border: 1px solid #222;
		color: #222;
	}   
	/* hover on light bg */	
	#btnWrap #guiBtn.lightBg:hover,
	#btnWrap #playBtn.lightBg:hover {
		background: lightblue;
      color: #222;
		cursor: pointer;
	}



	.topSpacer {
		width: 100%;
		height: 8%;
		display: flex;
		/* background: green; */
	}
	#instrument .controlsWrapper nav#navigation {
		height: 92%; /* 42%; */
		display: flex;
		flex-flow: row wrap;
		justify-content: space-between;
		flex-basis: 100%; /* MAKES this wrapper have full width */
	}
	nav#navigation .btn {
		flex-basis: 31.3333%; /* 31%; */
		display: flex;
	}
	nav#navigation .btn a {
		flex-basis: 100%; /* within 31% have full width */
		margin-bottom: 0%; /* 0.5%; */
	}
	nav#navigation .frequencyDesc {
		flex-basis: 6%; /* 7%; */
	}

}



/* ******************************************************************************* */
/* ******************************************************************************* */

@media (min-width: 960px) {
 

	/* .page-wrapper { display: flex; } */

	/* Wrappers */
	#instrument,
	#btnWrap header {
		flex: 3;
	}
	#info,
	#btnWrap #btnSpace {
		flex: 4;
      display: block;
      padding-top: 1.35em;
	}
   
	/* hide the spacer in this view */
	#info .topSpacer {
		display: none;
	}

	#btnWrap header #guiBtn {
		display: none;	/* Controls toggler are not necessary here */
	}
	#btnWrap header #playBtn {
		margin-right: 0px;
	}
}