body {background-color: #e3ffeb; font-size: smaller;}
 #box_content{position:static;} 
#bnd_sup{ width: 100%; height : 3em; background-color : #EFEFEF;} 
#bnd_menusup{ float:right; }
.menusup li  {float:left; margin-right:1.5em; z-index: 20; list-style : none;}
.menusup li a {text-decoration: none; color:black; padding:0.4em; font-family: arial, verdana, sans-serif;}
.menusup li a:hover {text-decoration: underline; color:green;}
#bnd_inf{clear:both; width: 100%; border-bottom-style : solid;  border-bottom-color : #38A2AA;  border-bottom-width : medium;  background-color : #FFFFFF;} 
#bnd_inf .colcontent { height: 7.5em;}
#bnd_logo{ float:left;  padding : 0.5em;}
#bnd_imglogo {height:7em;}
#bnd_imglogo:hover {cursor:  pointer;}
#bnd_menuinf {float:right; width:auto; height:3em; margin-top:3em;}
.imgmenu { height:3em; display:none;}
.imgmenu:hover {cursor:  pointer;}
a.ouvrir { display:block; margin-right:1em; }
a.fermer { display:none; margin-right:1em; }
#menu_smart { clear:both; width:100%; height:0em; background-color:gray; position : relative; top:-0.4em;
-webkit-transition-property: height ; -webkit-transition-duration: 0.3s;
transition-property:  height; transition-duration: 0.3s;
 line-height:2em; font-size:1.5em;}
#menu_smart #nav_menu_smart  {visibility : hidden;
-webkit-transition-property: visibility ; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: step-end;
transition-property: visibility ; transition-duration: 0.3s; transition-timing-function: step-end;
}
#menu_smart .menusup li  {float:none;}
#bnd_inf:target #menu_smart { height:7em; }
#bnd_inf:target #menu_smart #nav_menu_smart {transition-duration: 0.3s; -webkit-transition-duration: 0.3s; visibility: visible;}
#bnd_inf:target a.ouvrir {display:none;}
#bnd_inf:target a.fermer {display:block; }
#bnd_inf1:target #menu_smart { height:0em; }
#bnd_inf1:target #menu_smart #nav_menu_smart {transition-duration: 0s; -webkit-transition-duration: 0s;visibility: hidden;}
#bnd_inf1:target a.ouvrir {display:block;}
#bnd_inf1:target a.fermer {display:none;}
#nav_menu_smart { display:none;}
@media screen and (max-width: 480px) {
    #bnd_menuinf { margin-top:2em;}
    #nav_menuinf { display:none;}
    .imgmenu {display:block; margin-right:1.5em;}
    #nav_menu_smart { display:block;}
}
#boxlog {width:50%; margin-left:5em; margin-top:2em;}
#loginnovalid {margin-left:3.3em; margin-top:0.8em; color:red;}
#boxlog label, #boxlog #txt_utilisateur, #loginnovalid {font-size:1.5em;}
#boxlog label {margin-bottom:0.5em;}
#boxlog #txt_utilisateur, #boxlog #txt_motdepasse {margin-bottom:1em;font-size:1em; width:25em;}
#btn_login {font-size:1em; padding:0.2em; width:8em;}
@media screen and (max-width: 640px) {
    #boxlog {margin-left:1em;}
    #boxlog #txt_utilisateur, #boxlog #txt_motdepasse {width:13em; font-size:1.5em;} 
    #loginnovalid {margin-left:2em;}
    #btn_login {font-size:1.5em;}
}
footer {clear:both;height: 7em; background-color: #B4B4B6; margin-top : 2em;}
#box_footcenter {padding:1em; font-size:1.5em; text-align:center;}
#box_footleft, #box_footright {float:left; width:49%;}
#box_footleft {padding-left:1em;}
#box_footright {text-align:right;}
@media screen and (max-width: 640px) {
    footer {height: 9em;}
    #box_footleft, #box_footright {width:100%; font-size:1em; padding-left:1em;}
    #box_footright {text-align:left;}
}