body {
  border: 2px solid #cd6b3a;
  margin: 1%;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  vertical-align: middle;
  color: #ba030a;
  font-family: verdana;
  font-size: 8pt;
  background-position: center top;
  max-width: 960px;
  min-height: 1000px;
  position: relative;
  background-color: #ba030a;

}
div#container {
margin-left: auto;
  margin-right: auto;
  
  display: block;
  position: relative;
  max-width: 960px;
  min-height: 1500px;
  background-color: #ba030a;
}
div#header {
  border: 2px solid #ba030a;
  clear: both;
  font-style: normal;
  text-align: center;
  vertical-align: middle;
  font-family: comic sans ms;
  position: relative;
  background-color: #053d7a;
  visibility: visible;
  z-index: 120;
  background-image: url(http://rumegiesmeteo.fr/images%20site/rumegiesete.jpg);
  text-transform: capitalize;
  color: #ba030a;
  font-weight: bold;
  height: 2%;
  
}
div#left {
  z-index: 1;
  border: 2px solid #ba030a;
  float: left;
  visibility: visible;
  margin-top: 0.3%;
  margin-right: 0.3%;
  clear: none;
  width: 20%;
  color: #ba030a;
  min-height: 2850px;
  margin-bottom: 0.3%;
  position: relative;
  background-color: #cd6b3a;
  font-family: verdana;
  font-size: 8pt;
  max-height: 2850px;
}
div#right {
  border: 2px solid #ba030a;
  float: right;
  visibility: visible;
  clear: none;
  width: 18%;
  min-height: 2850px;
  margin-bottom: 0.3%;
  margin-top: 0.3%;
  margin-left: 0.3%;
  position: relative;
  background-color: #cd6b3a;
  color: #ba030a;
  font-family: verdana;
  font-size: 8pt;
  max-height: 2850px;
  overflow: hidden;
}
div#middle {
  border: 2px solid #ba030a; 
  padding-top: 0px;
  margin-top: 0.3%;
  padding-right: 1em;
  padding-left: 1em;
  text-align: center;
  font-family: verdana;
  font-size: 12px;
  line-height: 18px;
  font-weight: bold;
  overflow: auto;
  position: relative;
  margin-bottom: 0.3%;
  min-height: 2850px;
  color: #ba030a;
  background-color: #fed685;
  max-height: 2850px;
 
 
}
  



div#footer {
  border: 2px solid #ba030a;
  clear: both;
  color: #ba030a;
  position: relative;
  height: 2%;
  background-color: #cd6b3a;
}

.gros
{font-size: 25px;
} 
.gros1
{font-size: 20px;
} 
.gros2
{font-size: 15px;
} 
.bleu1
{font-size: 25px;
color: #0000ff;
} 
.bleuvert1
{font-size: 25px;
color: #01ffcc;
} 
.vert1
{font-size: 25px;
color: #004019;
} 
.orange1
{font-size: 25px;
color: #ff7b01;
} 
.rouge1
{font-size: 25px;
color: #ff0101;
} 



.object1 {
    width:500px;
    height:500px;
	margin-left: auto;
    margin-right: auto;
    display: inline;
}
.object2 {
    width:600px;
    height:220px;
	margin-left: auto;
    margin-right: auto;
    display: inline;
}
.object3 {
    width:95%;
    height:250px;
	margin-left: auto;
    margin-right: auto;
    display: inline;
	
}

object4 { 
	width:510px;
    height:390px;
	margin-left: auto;
    margin-right: auto;
    display: inline;
}

.object21 { 
	width:95%;
    height:300px;
	margin-left: auto;
    margin-right: auto;
    display: inline;
}

table {
  border-collapse: collapse;
  font-family:verdana, Times, serif;   
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #3c160b;
  text-align: center;
  background-color: #ffebc0;  
  color: #ba030a;
  width:95%;
 
  padding: 5px;
}


tr, td, th {
  background-color: #ffebc0;
  border: 1px solid #3c160b;
  margin: 5px;
  text-align: center;
  vertical-align: middle;
  color: #ba030a;
  margin-left: auto;
 margin-right: auto;
 padding: 5px;
}
a:link {
  color: #3c160b;
  font-family: Comic Sans MS;
  font-size: 8pt;
  text-decoration: none;
  border: 0px;
}
a:visited {
  color: #3c160b;
  font-family: Comic Sans MS;
  font-size: 8pt;
  text-decoration: none;
  border: 0px;
}

a:hover {
  font-family: Comic Sans MS;
  font-size: 9pt;
  font-weight: bold;
  text-decoration: underline;
  color: #ba030a;
}
h1
{
font-size: 20px;
 line-height: 20px;
 vertical-align: middle;
}
h3
{
font-size: 15px;
 line-height: 15px;
 text-align: center;
 vertical-align: middle;
}
p {
  text-align: center;
  font-weight: bold;
}
.climat1
 {
 border-collapse: separate;
 border: 1px solid #3c160b;
 margin-left: auto;
 margin-right: auto;
 background-color: #cd6b3a;
 text-align: center;
 color: black;
}
.climat4
 {

 border: 0px;
 margin-left: auto;
 margin-right: auto;
 background-color: #fed685;
 text-align: center;
 
}
.zoom31 p {
text-align:center;
}

.zoom31 img {
width:280px;
}

.zoom31 img:hover {
 width:290px;
}

.zoom1 p {
text-align:center;
}

.zoom1 img {
width:90%;
}

.zoom1 img:hover {
 width:90%;
}
.zoom3 p {
text-align:center;
border: 0px;
}

.zoom3 img {
width:150px;
height: 100px;
border: 0px;
}

.zoom3 img:hover {
 width:152px;
height: 100px;
 border: 0px;
}

.zoom4 p {
text-align:center;
}

.zoom4 img {
 width:700px;
 margin-left: auto;
 margin-right: auto;
}

.zoom4 img:hover {
 width:900px;
 margin-left: auto;
 margin-right: auto;
}

.zoom5 p {
text-align:center;
}

.zoom5 img {
 width:200px;
 margin-left: auto;
 margin-right: auto;
}

.zoom5 img:hover {
 width:300px;
 margin-left: auto;
 margin-right: auto;
}
.zoom6 p {
text-align:center;
}

.zoom6 img {
 width:500px;
 margin-left: auto;
 margin-right: auto;
}

.zoom6 img:hover {
 width:800px;
 margin-left: auto;
 margin-right: auto;
}

.c2
{

width:95%;
height:95%;
max-height: 240px;
max-width: 320px;
}
.c3
{
width: 48%;

margin-left: auto;
 margin-right: auto;
}
.c4
{
border: 0px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}

.rouge
{
text-align: center;  
font-family: Verdana;
font-size: 12px;
font-weight: bold;
text-decoration: underline;
color: red;
}



 
.titre
{
font-family: Comic Sans MS;
font-size: 20px;
color: #3c160b;
}
.titrepage
{
font-family: Comic Sans MS;
font-size: 12px;
color: #3c160b;
}
.entete{
 border-collapse: separate;
 border: 0;
 margin-left: auto;
 margin-right: auto;
 background-color: #cd6b3a;
 
}




.menu {
  font-family: arial,sans-serif;
  font-size: 11px;
  z-index: 100;
  height: 30px;
  position: relative;
  width: 1040px;
  margin-right: auto;
  margin-left: auto;
  display: block;
  font-style: normal;
  text-transform: capitalize;
  text-align: center;
  font-weight: normal;
}
.menu ul li a, .menu ul li a:visited {
  border: 1px solid #ba030a;
  background: #fed685 none repeat scroll 0% 50%;
  display: block;
  text-decoration: none;
  width: 104px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  font-size: 11px;
  overflow: hidden;
  color: #ba030a;
  font-weight: normal;
  text-transform: capitalize;
}
.menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
  list-style-position: outside;
  font-weight: normal;
  text-transform: capitalize;
  text-align: center;
}
.menu ul li {
  float: left;
  position: relative;
  font-style: normal;
  text-transform: capitalize;
  text-align: center;
}
.menu ul li ul {
  display: none;
  font-weight: normal;
  text-transform: capitalize;
  text-align: center;
}
.menu ul li:hover a {
  background: #c1d2ee none repeat scroll 0% 50%;
  font-style: normal;
  text-transform: capitalize;
  text-align: center;
  color: #0000ff;
}
.menu ul li:hover ul {
  display: block;
  position: absolute;
  top: 21px;
  left: 0;
  width: 105px;
  font-style: normal;
  text-transform: capitalize;
  text-align: center;
  font-weight: normal;
}
.menu ul li:hover ul li a.hide {
  background: #ba030a none repeat scroll 0% 50%;
  color: #fed685;
}
.menu ul li:hover ul li:hover a.hide {
  background: #ba030a none repeat scroll 0% 50%;
  color: #fed685;
}
.menu ul li:hover ul li ul {
  display: none;
}

.menu ul li:hover ul li a {
  background: #cd6b3a none repeat scroll 0% 50%;
  display: block;
  color: #fed685;
}
.menu ul li:hover ul li a:hover {
  border-style: solid;
  border-width: 1px;
  background: #ba030a none repeat scroll 0% 50%;
  color: white;
}
.menu ul li:hover ul li:hover ul {
  display: block;
  position: absolute;
  left: 105px;
  top: 0;
}
.menu ul li:hover ul li:hover ul.left {
  left: -105px;
}