@media screen 
	{
		* { font-family :serif  ; margin : 0px ; padding : 0px ;}
		body {margin-left : auto ; margin-right : auto ; }
		header,nav,footer,section{ width : 98% ; margin : 10px auto 10px auto ; background : white ; border : 1px solid green ; 
			box-shadow : 5px 5px 5px grey ; }
		div.menu {vertical-align : top ; height :auto ; border : 1px solid green ;  }
		a {display : block ; margin-top : 10px ; }
		a:hover {font-weight : bold ; color : red; }
		span a {display : inline ; }
		nav a, footer a {vertical-align : top ; height : auto; border-radius : 5px ; border : 1px solid black ;  
			background : rgb(220,220, 220) ; text-align : center ;text-decoration : none ; box-shadow : 3px 3px 3px gray ;}
		div.menu a {font-variant : small-caps ; text-decoration : none ;}
	
		.titre {display : block ;text-align : center ; font-size : 30px ; text-shadow : 2px 2px 2px grey ; margin :10px auto 10px auto ;
			color : navy ; text-decoration : none ; width : 90%;}
		h1,h2{text-align : center ; margin-top : 10px ;  margin-bottom : 10px; }
		div.plan {display : block ; width : 100% ; background : rgb(220,220,220) ; padding : 10px ; }
		h1{font-size : 140% ; margin-left : auto ; margin-right : auto ;  color : blue; border : 1px solid blue;
			box-shadow : 5px 5px 5px blue ; width : 80% ; }
		h2 {font-size : 130% ; color : green ;}
		h3 {font-size : 120%; margin : 5px ; color : navy ;  }
		h4 {font-size : 110%; margin : 5px ; color : purple; }
		h5 {font-size : 100% ; margin : 10px auto 10px auto ; text-align : center ; }
	
		time {margin : 5px ;font-style : italic ;color :navy; }
		abbr {font-weight : bold ; }
	
		svg,canvas,xmp, form, img, object,aside{display : block ; margin : 10px auto 10px auto ; border : 1px solid green; }
		aside {border : 1px solid navy ; background : lightgrey ; padding : 5px ; color: navy ; }
		img {border : none ; }
		img.logo {display : inline-block ; float : left ; height : 100px ; margin : 5px ; }
		xmp,pre{font-family : sans-serif ;background : pink ; border : none ; padding : 5px ; font-size : 90% ; color : black;width :95%; }
		
		p,ul {margin : 5px  ; color : navy ;}  
		p.remarque {color : red ; }
		hr {border : 1px solid black ; }
			
		table {width : 50% ; border : none ; margin : 5px auto 5px auto ; }
		caption {font-size : 110% ; color :navy; }
		td,th {border : 1px solid black ; }
		td {padding-left : 5px ; }
		
		ul {list-style-position : inside ; padding-left : 5px ;  }
		ul.nopuce {list-style : none ; }
		li {padding-left : 5px ; }
	
	input, label, button {display : inline-block ; width : 40% ; height : 40px ; margin : 10px ; vertical-align : top ; 
			font-family : sans-serif;  }
	label {text-align : right ;  }
	button:hover {box-shadow :5px 5px 5px gray; color : red ; }
	textarea {background : pink ;display :block ;font-family : sans-serif; margin:auto;}
	
	div.menu a {margin-top : 10px; }
	}
@media screen and (min-width: 900px)
	{
		* {font-size : 18px ;}
		body  {width : 900px;}
		div.menu{display : inline-block ;width : 47% ;margin :1% ; }
		nav a,footer a {display : inline-block ; width : 20% ; line-height : 30px; margin :2%; }
		div.menu a {margin-left :10px}
	}
@media screen and (max-width: 900px) and (min-width : 481px )
	{	
		* {font-size : 14px ;}
		body {width : 94% ; }    
		div.menu{display : inline-block ;width : 47% ;margin :1% ; }
		nav a,footer a {display :inline-block ; width :30%; line-height :24px; margin :1% }
		div.menu a {margin-left  :8px ;}
		xmp,pre , textarea{height:50px; overflow :hidden ; font-size :90%; width :98%;}
		xmp:hover, pre:hover, textarea:hover {height :auto ;}

	}
@media screen and (max-width: 480px)
	{		
		* {font-size : 12px ;}
		body {width : 100%; }
		div.menu {display : block ; width : 94% ;margin:1% ;}
		nav a,footer a {display : block ; width : 80%; line-height :20px; margin: 10px auto 10px auto ;}
		div.menu a {margin-left : 6px;}
		xmp,pre ,textarea{height:50px; overflow :hidden ; font-size :90%; width :98%;}
		xmp:hover, pre:hover, textarea:hover {height :auto ;}
	}