/* Balises générales */
html, body {
	width: 				100%;
	height: 			100%;
	color:				black;
	background-color:	#FBFBFD;
}
body {
	overflow:			hidden;
}
html, body, input {
	font-family: 		'Avenir LT 45';
	font-size:			0.8vw;
}
input {
	text-align:			center;
}
exp, expp {
	position: 			relative;
	bottom: 			1px;
	font-size: 			.8em;
	line-height: 		.8em;
	vertical-align:		super;
	text-decoration:	none;
}
expp {
	font-size: 			.6em;
	line-height: 		.6em;
}
hr {
	background-color:	lightgray;
	border:				none;
	height:				1px;
	margin:				2vh 2vw 2vh 2vw;
}
.center {
	width: 				100%;
	text-align:			center;
}
.invisible {
	display:			none!important;
}


/* Intro & share */
#experience, #orientation {
	display: 			none;
}
#orientation {
	width:				100vw;
	height:				100vh;
	background-color:	yellow;
	text-align:			center;
}
#orientation img {
	width:				50vw;
	height:				50vw;
	background-color:	yellow;
	margin-top:			calc(50vh - 25vw);
}
#intro, #share {
	position: 			absolute;
	top:				0;
	left:				0;
	width:				100vw;
	height:				100vh;
	background-color:	rgba(0, 0, 0, 0.7);
	text-align:			center;
	user-select: 		 none;
	-webkit-user-select: none;
	-moz-user-select:  	 none;
}
#share {
	display:			none;
}
#intro h1  {
	font-family: 		'Avenir LT 65';
	font-size:			22vh;
	line-height:		80vh;
	color:				yellow;
}
#intro div  {
	margin-top:			-15vh;
}
#intro h2  {
	font-size:			3vh;
	color:				white;
    animation: 			blinker 2s linear infinite;
	margin-bottom:		12vh;
}
#intro img  {
	height:				10vh;
	opacity:			0;
}
#intro h3  {
	font-size:			1.5vh;
	color:				white;
}
@keyframes blinker {  
  	50% { opacity: 0.5; }
}
#shareImg {
	margin-top:		4vh;
	border:			1.5vh solid white;
}
#shareUrl {
	margin-top:			4vh;
	font-size:			4vh;
	color:				white;
	user-select: 		 all;
	-webkit-user-select: all;
	-moz-user-select:  	 all;
}
#shareQrcode {
	position: 			absolute;
	top: 				75vh;
	width: 				20vh;
	height: 			20vh;
	left: 				80vw;
	border:				2px solid black;
}

/* Containers */
#toolbarContainer, #toolbarFloatingContainer, #inspecteur, #oscilloscope, #synthese {
	background-color:	#FBFBFD;
	user-select: 		 none;
	-webkit-user-select: none;
	-moz-user-select:  	 none;
}
#toolbarContainer, #toolbarFloatingContainer {
	width:				100vw;
	height:				9.2vh;
}
#inspecteur, #synthese, #oscilloscope {
	position: 			absolute;
	box-shadow: 		0px 0px 10px 0px #656565;
	width:				22vw;
	display:			none;
}
#inspecteur {
	height:				46vh;
	top:				calc(100vh - 46vh - 2vh);
	left: 				1.5vw;
}
#inspecteur.right {
	left:				calc(100vw - 22vw - 1.5vw);
}
#synthese {
	height:				50vh;
	top:				12vh;
	left:				calc(50vw - 10vw);
	text-align:			center;
}
#synthese textarea {
	width:				19vw;
	height:				36vh;
	font-size:			1.5vh;
	font-family: 		Monaco, Courier New;
}
#synthese select {
	width:				19vw;
}
#oscilloscope {
	left:				0;
	height:				30vh;
	top:				11vh;
	left: 				calc(100vw - 22vw - 2vh);
}
#oscilloscope canvas {
	width:				20vw;
	height:				25vh;
	pointer-events:		none;
}
#canvasContainer {
	width:				100vw;
	height:				90.5vh;
}


/* Toolbars */
.toolTitle {
	font-size:			1.5vw;
	height:				5vh;
	text-align:			center;
	background-color: 	yellow;
}
.toolTitle .title {
	float:				left;
	width:				calc(100% - 5vh);
	line-height:		5vh;
}
.toolTitle .close {
	float:				right;
	font-size:			5vh;
	cursor:				pointer;
	margin-top:			-0.1vh;
	width:				5vh;
}
.toolBar {
	display:			inline-block;
	height:				100%;
	vertical-align:		top;
	padding:			0.6vh 0.6vw 0.6vh 0.6vw;
	
    border-left-width: 		1px;
    border-left-style: 		solid;
    border-image:			linear-gradient(to bottom, lightgray, rgba(0, 0, 0, 0)) 1 100%;
}
.toolBar:first-of-type {
	border-left:		1px solid transparent;
}
.toolButton img {
	width:				5vh;
	height:				5vh;
}
.toolicon div {
	width:				4.25vh;
	height:				4.25vh;
	margin: 			auto;
	border:				2px solid transparent;
	margin: 			auto;
	border-radius:		5vh;
}
.toolButton.selected .toolicon div { 
	border-color:		black;
}

.toolButton .toolname {
	margin-top:			0.5vh;
}
.toolButton, .toolSlider, .toolCheck {
	display:			inline-block;
	margin:				0vh 0.6vh 0vh 0.6vh;
	width:				4vw;
	text-align:			center;
	cursor:				pointer;
	vertical-align:		top;
}
.toolCheck {
	text-align:			left;
	width:				90%;
	margin:				1.5vh 0.8vw 0vh 0.8vw;
	height:				3vh;
	line-height:		3vh;
}
.toolSlider input[type=range] {
	width:				90%;
	height:				4.4vh;
}
.toolSlider div {
	margin-top:			0.5vh;
}
.toolButton.disabled, .toolButton.inactive {
	opacity:			0.25;
}
#toolbarContainer .toolSlider, #toolbarContainer .toolButton, #toolbarFloatingContainer .toolSlider, #toolbarFloatingContainer .toolButton {
	height:				calc(100% - 0.9vh);
}
#toolbarContainer .toolSlider, #toolbarFloatingContainer .toolSlider {
	width:				15vh;
}
#inspecteur .toolSlider {
	width:				calc(100% - 0.6vh - 0.6vh);
	height:				unset;
	margin-top:			2vh;
}
#inspecteur .toolSlider input[type=range] {
	height:				2vh;
}
.toolButton.mini {
	width:			1.8vh;
	margin-top:		1.8vh;
	margin-left:	-0.6vw;
}
.toolButton.mini img {
	width:		1.8vh;
	height:		1.8vh;
}
#toolbarFloatingContainer {
	position:	absolute;
	background:	rgba(255, 255, 255, 0.7);
	width:		unset;
	top:		9vh;
	height:		9vh;
	display:	none;
    border-radius: 				1vh;
	border-top-left-radius: 	0;
	border-top-right-radius: 	0;
	border-top:					1px solid lightgray;
}


/* Divers */
#log {
	display:			inline-block;
	font-size:			1.5vh;
	font-family: 		Monaco, Courier New;
	height:				100%;
}

#tuner {
	display:		inline-block;
	text-align:		center;
	width:			5.5vw;
}
#tuner .note, #tuner .freq {
	color:			lightgray;
}
#tuner.touch .note, #tuner.touch .freq {
	color:			black;
}
#tuner .note {
	font-size:		1.7vw;
	line-height:	5vh;
	font-weight: 	bold;
}
#tuner .freq {
	line-height:	2.1vh;
}
#tuner .voices {
	line-height:	1.3vh;
	color:			darkgray;
}














input[type=number] {
	border:				1px solid #DDDDDD;
}


input[type=range] {
	-webkit-appearance: 	none;
	width: 					100%;
	background: 			transparent;
}
input[type=range]:focus {
	outline: 				none;
}
input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: 	none;
}
input[type=range]::-ms-track {
	width: 					100%;
	cursor: 				pointer;
	background: 			transparent; 
	border-color: 			transparent;
	color: 					transparent;
}

input[type=range]::-webkit-slider-thumb {
	-webkit-appearance: 	none;
	border: 				1px solid #000000;
	margin-top: 			-0.7vh;
	height: 				1.7vh;
	width: 					1.7vh;
	border-radius: 			1.7vh;
	background:				#ffffff;
	cursor: 				pointer;
}
input[type=range]::-moz-range-thumb {
	-webkit-appearance: 	none;
	border: 				1px solid #000000;
	margin-top: 			-0.7vh;
	height: 				1.7vh;
	width: 					1.7vh;
	border-radius: 			1.7vh;
	background:				#ffffff;
	cursor: 				pointer;
}
input[type=range]::-ms-thumb {
	-webkit-appearance: 	none;
	border: 				1px solid #000000;
	margin-top: 			-0.7vh;
	height: 				1.7vh;
	width: 					1.7vh;
	border-radius: 			1.7vh;
	background:				#ffffff;
	cursor: 				pointer;
}


input[type=range]::-webkit-slider-runnable-track {
	width: 					100%;
	height: 				0.28vh;
	cursor: 				pointer;
	background: 			black;
	border-radius: 			0.25vh;
	border: 				0 solid transparent;
}
input[type=range]::-moz-range-track {
	width: 					100%;
	height: 				0.28vh;
	cursor: 				pointer;
	background: 			black;
	border-radius: 			0.25vh;
	border: 				0 solid transparent;
}
input[type=range]::-ms-track {
	width: 					100%;
	height: 				0.28vh;
	cursor: 				pointer;
	background: 			black;
	border-radius: 			0.25vh;
	border: 				0 solid transparent;
}


.checkbox-ios {
    -webkit-transform: scale(0.6,0.6) translate(0.5vw,0.5vw);
}