.fixed_region {overflow: hidden; padding: 10px;}
input { text-align: center }
.sub { font-size: 65%; vertical-align: sub }
.upright { font-style: normal; }
h4 { margin-top: 10px; margin-bottom:5px; }
h5 { margin-top: 5px; margin-bottom:0px;}
/* math { font-size: 115% } */
/*
div#MParameter ul {   display: inline; width: 100%; list-style: none; padding:0px } 
div#MParameter ul li {   float: left; width:90px;padding: 10px} 
div#MParameter input { width: 20%; display:inline; float: right;}
*/


/*  The Model div style */
input#rest { width: 30px }
input#width { width: 40px }
input#height { width: 40px }
div#parameter { display: inline; font-size: 85%; margin-bottom:10px }
div#model_description { margin-left:10px;font-size: 90% }
div#MParameter {    
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;	
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;

}

div#MParameter ul {
	list-style: none;
	padding: 0px;
	margin: 5px;
}

div#MParameter ul li{
    margin: 0px 10px;
    width: 80px;
}

div#MParameter i { position:absolute; padding-top:3px}

div#MParameter input { width: 3em;  margin-left: 40px; }



/* The Vizualisation div style */
ul.tabs { margin: 15px 0px 0px 0px; padding: 5px 0px; width:100%;background-color: white }
.tabs li { list-style: none;  display: inline; height:32px }
.tabs a { padding: 5px 10px; background: #fff; color: #CCCCCC; text-decoration: none; width:200px;height:32px }
.tabs a.active { background: #DCDCDC; color: #000 }
/*.tabs a { padding: 5px 10px; background: #DCDCDC; color: #fff; text-decoration: none }
.tabs a.active { background: #fff; color: #000 }*/

div#graph > div { background: #fff; margin: 10px 0px 0px 0px; padding: 5px}
.vis-selector { padding: 5px 40px; margin-right:5px;}
.vis-selector * { display:inline-block; vertical-align: middle; }
.vis-selector input { height:30px; margin: 0 5px 0 5px;}
input.color { margin: 0px 5px; width: 50px }

/* The Simulator div style */
canvas#view { border: 1px solid gray; border-radius: 2px; margin: 0px 0px; background-color: #c8c8c8; width: 100% }
input#step25 { display: none }
label#step { margin-right: 10px; float: right }

div#frameprosec { padding: 10px;}
div#frameprosec * { float:left }
div#slider { width: 100px; margin-top: 1px; margin-left:10px; height: 16px }
input#amount { border: 0; font-size: 85%; font-weight: bold; text-align: right;  width: 20px; height:1.3em }	

input#SnapshotButton { float:right }


/* The Analysis div style */

div#obsPlot  { /*float: left;*/ margin-left: 20px; margin-right: 20px;width: 55%; height: 225px; display:inline-block}
div#obsLegend { width: 40%; height: 225px; display:inline-block; font-size: 100%}
.legend-text { position: relative }
.legend-text img { position: absolute; top: 50%; margin-top: -6px }
.legend-text span { margin-left: 20px; display: block; font-size: 100%; border: 1px }





@media only screen and (min-width: 1024px){
	
body { font-family: 'Arial' }
div#main_view {position: relative }
.fixed_region { position:absolute; outline: #C1C1C1 solid 3px;  overflow: hidden; padding: 10px; background-color: #EAEEE6;}
div#model         { top: 0px;   left: 0px; height: 625px; width: 240px; overflow:scroll}
div#simulation    { top: 0px;   left: 263px; padding: 10px 0px;  height: 625px; width: 522px }
div#visualization { top: 0px;   left: 788px; height: 625px; width: 265px }
div#analyse       { top: 648px; left: 0px;  width: 1053px }

input { text-align: center; }
div#legend { padding: 10px;}
/* canvas#canvas_legend { width:100% } */

div#parameter { float: left; margin: 0px 15px; font-size: 85% }

a#visu-link { display: none }
a#model-link { display: none }

.help_label { cursor: help; width: 35px }


/* The Analysis div style */
/* div#analyse { Bottom: 0px; left: 0px;   padding: 10px 10px; width: 1053px } */



/* The Visualization div style */
/* div#visualization { top: 0px;   left: 788px; padding: 0px 10px; height: 703px; width: 265px } */
div#legend { padding: 10px;}
canvas#canvas_legend { width:80% }


/* The Simulator div style */



/* The Model div style */


div#model_description { /*max-height: 175px;*/ resize: none; border: 1px solid gray; border-radius: 2px; padding: 4px; margin: 2px; overflow: auto }
div#model_description p {
	lang: en;
	margin-top: 4px;
	margin-bottom: 6px;
	text-align: justify;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
}
}


@media only screen and (max-width: 1024px) and (min-width: 500px){
/* Tablet CSS */
body { overflow-x: hidden }
/* Increase default size of all inputs */
input, select { height: 30px; font-size: 100%; margin-left: 5px; margin-right:5px;}



/* The Simulation div style */
div#simulation { min-width: 400px; width: 60%; margin-left: auto; margin-right: auto;}
/*label#step { float: right }

div#frameprosec { margin-top: 15px; font-size: 18px }
div#frameprosec * { float: left; }
input#amount { width: 30px; margin-left:10px; height: auto}
div#slider { width: 100px; margin-top: 5px; margin-left:10px; height: 15px } */
/* The Analysis divs tyle */
div#analyse { min-width: 400px; width: 60%; margin-left: auto; margin-right: auto; clear:both; padding-top: 10px}
div#analyse-para { margin-left: 10px }
div#obsPlot  { height: 140px; width:95%; }
div#obsLegend { width: 95%; margin-left: 5%;}

/* The Vizualisation div style */

.tabs li {display: block }
.vis-selector { padding-left:20px; }
canvas#canvas_legend { width:100%; }

/* The Model div style */
div#model { top: 0px; left: 0px;}
/* div#model_description { margin-left:10px; width: 90%;} */

h2 { text-align: center }
/* div#MParameter i {padding-top:10px;} */

nav#visualization {
         position: absolute;
         top: 0;
         bottom: 0;
         width: 15.625em;
         right: -15.625em;
         height: 1200px;
         -webkit-transform: translate(0px, 0px);
        -moz-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        transition: 0.25s ease;
        background: #C1C1C1;
        z-index: 5;
	}
        
nav#visualization.active {
        -webkit-transform: translate(-15.625em, 0px);
        -moz-transform: translate(-15.625em, 0px);
        -o-transform: translate(-15.625em, 0px);
        -ms-transform: translate(-15.625em, 0px);
        transform: translate(-15.625em, 0px);}

#visu-link {
      position: absolute;
      top: 15%;
      right: 204px;
      background: #C1C1C1;
      color:black;
      padding: 10px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-transform:rotate(-90deg);
      -webkit-transform:rotate(-90deg); 
	  -o-transform:rotate(-90deg); 
	  -ms-transform:rotate(-90deg);
	  transform:rotate(-90deg);
	}

nav#model {
         position: absolute;
         top: 0;
         bottom: 0;
         width: 15.625em;
         left: -15.625em;
         height: 1200px;
         -webkit-transform: translate(0px, 0px);
        -moz-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        transition: 0.25s ease;
        background:#C1C1C1;
        z-index: 5
	}

nav#model.active {
        -webkit-transform: translate(15.625em, 0px);
        -moz-transform: translate(15.625em, 0px);
        -o-transform: translate(15.625em, 0px);
        -ms-transform: translate(15.625em, 0px);
        transform: translate(15.625em, 0px);
	}
 
#model-link {
      position: absolute;
      top: 15%;
      right: -52px;
      background:#C1C1C1;
      color:black;
      padding: 10px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-transform:rotate(90deg);
      -webkit-transform:rotate(90deg); 
	  -o-transform:rotate(90deg); 
	  -ms-transform:rotate(90deg);
	  transform:rotate(90deg);
   }
}


@media only screen and (max-width: 500px){
/* Smartphone CSS */

body { overflow-x: hidden}
input, select, label { height: 25px; font-size: 90%; margin-left: 5px; margin-right:5px;}

/* The Analysis div style */
div#analyse {  width: 100%; margin-left: auto; margin-right: auto; clear:both; padding-top: 10px}
div#obsPlot  { height: 140px; margin-top: 5px; width: 90% }
div#obsLegend { float: left; width: 95%; margin-left: 20px }
div#analyse-para { margin-left: 10px }

canvas#canvas_legend { width:100%; }

/* The Vizualisation div style */
.tabs li {display: block }
.vis-selector { padding-left:20px; }

/* The Simulation div style */
div#slider { width:75px }

/* The Model div style */
div#model { top: 0px; left: 0px;}
/* div#model_description { margin-left:10px; width: 90% } */
/* select#selectElement { height: 40px } */
/* div#MParameter input { width: 40px; margin: 0px 21px } */

h2 { text-align: center }


nav#visualization {
         position: absolute;
         top: 0;
         bottom: 0;
         width: 15.625em;
         right: -15.625em;
         height: 1200px;
         -webkit-transform: translate(0px, 0px);
        -moz-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        transition: 0.25s ease;
        background: #C1C1C1;
        z-index: 5;
	}
        
nav#visualization.active {
        -webkit-transform: translate(-15.625em, 0px);
        -moz-transform: translate(-15.625em, 0px);
        -o-transform: translate(-15.625em, 0px);
        -ms-transform: translate(-15.625em, 0px);
        transform: translate(-15.625em, 0px);
     }

#visu-link {
      position: absolute;
      top: 11.5%;
      right: 207px;
      background: #C1C1C1;
      color:black;
      padding: 10px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-transform:rotate(-90deg);
      -webkit-transform:rotate(-90deg); 
	  -o-transform:rotate(-90deg); 
	  -ms-transform:rotate(-90deg);
	  transform:rotate(-90deg);
	}

nav#model {
         position: absolute;
         top: 0;
         bottom: 0;
         width: 15.625em;
         left: -15.625em;
         height: 1200px;
         -webkit-transform: translate(0px, 0px);
        -moz-transform: translate(0px, 0px);
        -o-transform: translate(0px, 0px);
        -ms-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        -webkit-transition: 0.25s ease;
        -moz-transition: 0.25s ease;
        -o-transition: 0.25s ease;
        transition: 0.25s ease;
        background:#C1C1C1;
        z-index: 5
	}

nav#model.active {
        -webkit-transform: translate(15.625em, 0px);
        -moz-transform: translate(15.625em, 0px);
        -o-transform: translate(15.625em, 0px);
        -ms-transform: translate(15.625em, 0px);
        transform: translate(15.625em, 0px);
	}
 
#model-link {
      position: absolute;
      top:20%;
      right: -52px;
      background:#C1C1C1;
      color:black;
      padding: 10px;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      -moz-transform:rotate(90deg);
      -webkit-transform:rotate(90deg); 
	  -o-transform:rotate(90deg); 
	  -ms-transform:rotate(90deg);
	  transform:rotate(90deg);
      }
}
/* Safarie & Chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
 #model-link { right: -45px }
 #visu-link { right: 212px }
 body { font-family: arial }
}