body { font-family:  Verdana, Arial, Helvetica, sans-serif;font-size: 30px;}

td {background-color: #fff0f0;  text-decoration:none ;align=left ;font-size: 30px; }

body, td, th {color: #000000;	font-weight: ;	}

h1 {color: #FF0000;}

h2 {color: #FF6600;}

h3, h4 {color: #ff9933;}

h5, h6 {color: #FF9900;}

a {color: #3300ff;}

a:visited {color: ;text-decoration:;background-color:;}

a:hover {color: #FF0000;text-decoration:;background-color:;}

form {background-color: #f0f0f0;}

INPUT {
     color:#000000;
     background-color:#ffffff;
     font-size:15px;
     font-family:arial;
}
SELECT {
     color:#CC0000;
     background-color:#FFCC00;
     font-size:15px;
     font-family:arial;
}


div#ex1 ul#menulist li ul{ display:block; }
div#ex1 ul#menulist li:hover>ul{ display:block; }

div#ex1 ul#menulist {
  	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 30px;
	font-weight: ;
	color: #000000;
   position: static;
	left: 0px;
	margin: 0px;
}

div#ex1 ul#menulist, div#ex1 ul#menulist ul {
  /* border:1px solid #990000;*/
  list-style:none;
  margin:0;
  padding:0;
  width:10em;
  _width:10em;
  background-color: #FFFFff;
  border: 0px solid;
    border-top-color: #cccc99;
    border-left-color: #cccc99;
    border-bottom-color: #cccc99;
    border-right-color: #cccc99;
}
	 
div#ex1 ul#menulist ul{
  position:absolute;
  top:50px;
  left:0em;
}

div#ex1 ul#menulist li{
  position:relative;
  margin:0px;
  padding:2px;
  _display:inline;
}

div#ex1 ul#menulist a{
  display:block;
  width:100%;
  text-decoration: none;
  text-indent: 0em;
  padding: 0px 0;
}

div#ex1 ul#menulist li:hover, div#ex1 ul#menulist li a:hover {
  color: #000000;
  background-color: #ff9966;
}

div#ex1 ul#menulist li.smenu {
	background-image: url
	background-position: 9em;
	background-repeat: no-repeat;
}

div#ex1 ul#menulist li.smenu:hover, div#ex1 ul#menulist li.smenu>a:hover {
	background-image: url
	background-position: 9em;
	background-repeat: no-repeat;
}

div#ex1 ul#menulist a {
	color: #000000;
	text-decoration: none;
}


@media (max-width: 640px) {

 /* passer tous les éléments de largeur fixe en largeur automatique */
  body, element1, element2 {
   width: auto;
   margin: 0;
   padding: 0;
 }

 /* fixer une largeur maximale  de 100 % aux éléments potentiellement problématiques */
  img, table, td, blockquote, code, pre, textarea, input, iframe, object, embed, video {
   max-width: 100%;
 }
/* conserver le ratio des images et empêcher les débordements de boîtes dûs aux border ou padding */
 img {
   height: auto; width: auto;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   box-sizing: border-box;
 }

 /* gestion des mots longs */
 textarea, table, td, th, code, pre, samp {
   word-wrap: break-word; /* passage à la ligne forcé */
   -webkit-hyphens: auto; /* césure propre */
   -moz-hyphens: auto;
   hyphens: auto;
 }
 code, pre, samp {
   white-space: pre-wrap; /* passage à la ligne spécifique pour les éléments à châsse fixe */
 }

 /* Passer à une seule colonne (à appliquer aux éléments multi-colonnes) */
 element1, element2 {
   float: none;
   width: auto;
 }

 /* masquer les éléments superflus */
 .hide_mobile {
   display: none !important;
 }

 /* Un message personnalisé */
 body:before {
   content: "Version mobile du site";
   display: block;
   color: #777;
   text-align: center;
   font-style: italic;
 }
}
 /* La touche finale : réduire de façon harmonieuse toutes les tailles de polices en orientation paysage (car bugguée sur les périphériques iPhone et iPad). */ 

@media (max-device-width:768px) and (orientation: landscape) {
  html {
   -webkit-text-size-adjust: 100%;
  }
}