body{
  border-left    : 1px solid black;
  border-right   : 1px solid black;
  border-bottom  : 1px solid black;  
  font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
}


code{
  font-family: Arial, Helvetica, "Liberation Sans", FreeSans, sans-serif;
  font-style :italic;
}

p{
    text-align: justify;
    text-justify: inter-word;
} 

h1{font-size:1.6em;}

/*p{font-size:1em;}*/

.faq{font-size:1em;}



.hline{
  width:100%;
  border-bottom  : 1px solid black;
}

html body div#main div.hflex div#login form table tbody,
html body div#main div.hflex div#login form input
{
font-size:1.5em;
}


.dots {
border-bottom-width: 1px;
border-bottom-style: dotted;
border-bottom-color: #000000;
text-decoration: none;
}

a, .js_link{ 
  color:#0000FF;
  text-decoration: none;
}

a:hover, .js_link:hover{ 
  color:#0000FF;
  text-decoration: underline;
}

.ugly_highlight{
  color:#000000;
  background-color:yellow;
}


/*welcome*/
.welcome_logo{
  max-width:10em;
  max-height:4em;
}

.welcome_fig{
   display: block;
   max-width:calc( 100% - 1.5em );
   max-height:35em;
   padding:1.5em;
   margin-left:auto;
   margin-right:auto;
}

/*orga*/
.flex{
  display : flex;
  justify-content:center;
  flex-wrap:wrap;
}

.orga_fig{
  height: auto;
  max-width:100%;
/*  max-height:35em;*/
}



/*MENU*/

#menu, #menu2{
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}


#menu, #menu2, #menu_left{
  background-color: #009900; /* #EEEEEE*/
  color:#FFFF00; /*was black*/
}



#menu a, #menu2 a{
  color: #FFFF00; /*#000000*/
  text-decoration: none;
}

#menu a:hover, #menu2 a:hover{
  text-decoration:underline;
}

#menu{
  border-top   : 1px solid black;
}

#menu ul{
  border-top   : 1px solid black;
}

#menu ul, #menu2 ul{

  border-bottom: 1px solid black;
  margin:0;
  list-style-type : none;

  padding-left  :1.8em;
  padding-right :1.8em;
  padding-top   :0.5em;
  padding-bottom:0.5em;

  display:flex;
  flex-direction:row;
  flex-wrap:wrap;

  justify-content: stretch;
  align-items: center;

  
}

#menu li, #menu2 li{
  padding-right : 1.8em;
}


/*#menu li.sep, #menu2 li.sep{*/
.sep{
  padding : 0;
  margin-left:auto;
}


#menu b,  #menu2 b{
  color:#FFEEAA;
  text-decoration:underline;
}



#menu_header{
  display:flex;
  flex-direction:row;
  margin-top :  5px;
  margin-left:  10px;
  margin-bottom:5px;
  margin-right: 5px;

}

#menu_logo{
  float: right;
  height: calc( 4em ) ;   /*must be consistent with ##menu h1*/
  margin: 0px 0px 0px auto;
  position: relative;
  max-width : calc( 90% - 15em);
}

.oldie #menu_logo{
 display:none;
}



#menu h1{
  font-size:2em;   /*must be consistent with #menu_logo*/
  font-family:sans-serif;
  margin-top :  calc(0.5em - 5px);
  margin-left:  0px;
  margin-bottom:0px;
  margin-right: 0px;
  flex-shrink:0;
}


@media (max-width: 1000px) {
  #menu_logo{display:none;}
}

@media (max-width: 450px) {
  #menu h1{font-size:1.2em;}
  #menu li, #menu2 li{padding-right : 1.2em;}
}




/*---description---*/

#content{
  display:flex;
  flex-direction:row;
  flew-wrap : nowrap;
  justify-content:baseline;
  align-items:stretch;
}

#description{
  margin-left:10px;
  width: calc(100% - 8em);
}

#menu_left{
  text-wrap:none;
  background-color:#009900; /*#EEEEEE*/
  border-right   : 1px solid black;
  margin: 0px; 
  padding-top: 10px;
  padding-bottom:10px;
  width:8em;
  min-width:14em; /*consistent with ul.level2 */
  max-width:14em;
}

#menu_left a{
 color: #FFFF00; /*#000000*/
 text-decoration: none;
}

#menu_left b{
  text-decoration:underline;
  color:#FFEEAA;
}

#menu_left a:hover{
  text-decoration:underline;
}



ul.level1 li:hover ul.level2{display:block;}


.description_img{
    margin-top: 0px;
    margin-bottom:10px;
    margin-right:10px;
    max-width: calc(100% - 10px - 8em);
}

.path{
  margin-top:10px;
  font-size:1.2em;
  margin-bottom:10px;
}

.path a{
  text-decoration:underline;
  color:black;
}



/*---footer---*/

#footer{
  border-top  : 1px solid black;
  padding-right: 10px;
  padding-top:5px;
  padding-bottom:5px;
  height:4em;
  
  display : flex;
  justify-content:center;

}

#footer div {
  height :4em;
}

#footer a{
  font-weight: bold;
}

#footer_left img, #footer_right img{
  height :100%;
}

#footer_center img {
  margin-top:0.5em;
  height :3em;
}


#footer_center{
margin-left:auto;
margin-right:auto;
}

#footer_left{
margin-left:10px;
}

#footer_right{
margin-right:10px;
}

.footer_link{
  position:relative;
  top:-1.6em;
}

@media (max-width: 750px) {

  #footer{height:1em;}
  #footer div {height: 1em;}
  #footer_center img { 
    margin-top:0em;
    height :1em;
  }
.footer_link{
  position:relative;
  top:0em;
}
  #footer a {
    font-weight: normal;
    font-size:0.9em;
  }
}

@media (max-width: 450px) {
  .footer_link {
    display:none;
  }

}


/*
#footer a{
  font-size:0.75em; 
  font-family:sans-serif;
}*/


/*---other stuff---*/
#minilogin{
    border: 1px solid;
    float: right;
    margin: 10px;
}

#main{
  padding:10px;
}

.hflex{
  display:flex;
}

#messages{
  padding:10px;
  border-top  : 1px solid black;
}



p.info{
  background-color: #F3F781;
}

p.error{
  background-color: #F78181;
}


textarea{
  width:100%;
}


/*---results---*/
.result{
    border-spacing: 2em 0px;
}

.result .bf{
    text-align:center;
    font-weight: bold;
}



.resultdata{
    border-spacing: 0.5em 0px;
    border-collapse:collapse;
    border: 1px solid;
    margin-right:20px;
    margin-bottom:10px;
}

.resultdata th{
    font-variant:small-caps;
    font-weight: bold;
    text-align:left;
    border: 1px solid;

}

.resultdata td{
    padding-left:0.5em;
    padding-right:0.5em;
    border:none;
    border-collapse:collapse;
}

.result_summary{
  display:flex;
  flex-direction:row;
  flex-wrap: wrap;
}



/*Dynamic CSS for javascript */



.not_valid {
   outline: thin solid #FF0000;
}

.optional {
  border: 1px solid #EFEF00;
}

.valid {}