/* CSS Document */

body, html {
  padding: 0;
  margin: 0;
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  height: 100%;
  background:#263238;
  color:#666666;
}

div#header {
	background-color:#1d91ce;
	height:150px;
	margin-top:0;
	padding:10px;
	text-align:center;
}

div#MMT_logo {
	position:absolute;
	width:200px;
	height:150px;
	left:0;
	background-image:url(images/mmt_logo.png);
	background-repeat:no-repeat;
}

div#LIM_logo {
	position:absolute;
	width:150px;
	height:150px;
	right:0;
	background-image:url(images/lim_logo.png);
	background-repeat:no-repeat;
	cursor:pointer;
}

div#title_container {
	width:580px;
	height:70px;
    margin-left:250px;
	text-align:left;
	padding-top:82px;
	vertical-align:central;
}

div#title {
	color:#FFF;
	font-size:40px;
	display: table-cell; 
	position:absolute;
	margin-top:-70px;
	margin-left:75px;
}

div#subtitle {
	color:#FFF;
	font-size:20px;
	display: table-cell; 
	position:absolute;
	margin-top:-25px;
	margin-left:75px;
}

/* QR code page ---------------------------------------------- */

#app {
  align-items: stretch;
  justify-content: stretch;
}

div#preview-container {
  /*
  flex-direction: column;
  align-items: center;
  justify-content: center;
  display: flex;
  width: 100%;
  */
  	position:fixed;
	margin-left:800px;
	margin-top:30px;
  	overflow: hidden;
}

div#draw_sine {
	position:fixed;
	margin-left:30px;
	margin-top:30px;
	width:722px;
	height:722px;
	float:right;
	overflow: hidden;
	background-color:#CCC;
	margin:solid #FFF 1px;
}

/* Options ----------------------------------------- */


div#options_button {
	position:fixed;
	width:32px;
	height:32px;
	margin-top:30px;
	right:10px;
	background-image:url(images/icon_gears.png);
	background-repeat:no-repeat;
	cursor:pointer;
	z-index:101;
}

div#options {
	visibility:collapse;
	position:fixed;
	width:350px;
	height:90px;
	margin-top:20px;
	padding:0;
	padding-top:10px;
	right:10px;
	background-color:#CCC;
	border:solid #FFF 1px;
	margin-right:-15px;
	font-size:14px;
	color:#333;
	border-radius:8px;
	z-index:100;
}

/* Controls ---------------------------------------- */

div#controls {
  	position:fixed;
	width:640px;
	height:290px;
	margin-left:800px;
	margin-top:460px;
	border:1px solid #FFF;
  	overflow: hidden;
	margin:solid #FFF 1px;
	border-radius:8px;
}

div#controls_title {
	position:relative;
	width: 50%;
  	margin: 0 auto;
	margin-top:10px;
	text-align:center;
}

div#div_controls_img{
	position:absolute;
	margin-top:30px;
	margin-left:50px;
	text-align:center;
	visibility:collapse;
}

div.slider {
	margin-top:10px;
	position:relative;
	width:64px;
	float:left;
	text-align:center;
}

input[type=range][orient=vertical]
{
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* WebKit */
    width: 8px;
    height: 175px;
    padding: 0 5px;
	display: block;
    margin : 0 auto;
}

/* Explanation-------------------------------------- */

div#explanation {
  	position:fixed;
	width:360px;
	height:700px;
	margin-left:1480px;
	margin-top:30px;
	padding:10px;
	border:1px solid #FFF;
	border-radius:8px;
  	overflow: hidden;
	background-color:#CCC;
	color:#FFF;
	font-size:14px;
}