body {
 margin:0 auto;
 width:1100px;
 font: 14px/20px "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
 background: #EDF7F2;
 behavior:url("csshover.htc");
 }
.alignleft {
 float: left;
 }
img.alignleft {
 margin: 5px 10px 0 0; 
 }
.alignright {
 float: right;
 }
img.alignright {
 margin: 5px 0 0 10px; 
 }
.center {
 text-align: center;
 }

img.image {
 max-height: 86px;
 width: auto;
 border-width: 2px;
 border-style: solid;
 border-color: #046380;
 padding: 2px; 
 }

img.frise {
 max-height: 86px;
 width: auto;
 border-width: 1px;
 border-style: solid;
 border-color: #046380;
 padding: 1px;
 }

 img.tab {
 max-height: 40px;
 width: auto;
 border-width: 1px;
 border-style: solid;
 border-color: #046380;
 padding: 1px;
}
 
h1 {
 font-size: 40px;
 font-family: verdana;
 padding: 10px 10px 10px 10px;
}
h1 a {
 color: black;
 text-decoration: none;
 }
h1 a:hover {
 text-decoration: underline;
 }
h2 {
 font-size: 24px; 
 font-family: verdana;
 padding: 10px 10px 10px 10px;
 }
 h2 a {
 color: #4BB5C1;
 text-decoration: none;
 }
h2 a:hover {
 color: white;
 text-decoration: underline;
 }
h3 {
 font-size: 18px;
 color:black;
 padding-bottom: 3px;
 margin-bottom: 10px;
 }
h3 a {
 color:black;
 text-decoration:none;
}
h3 a:hover {
 text-decoration:underline;
}
h4 {
 font-size:16px;
 color:black;
 padding-bottom:3px;
 margin-bottom:3px;
}
p {
 padding-bottom: 5px;
}
p a {
 color:#046380;
}
p a:visited  {
 color:#4BB5C1;
}
p a:hover {
 color:#4BB5C1;
 text-decoration:none;
}

header {
 position:relative;
 top:0;
 clear: both;
 float: left;
 background:#046380;
 height: 100px; /* for IE */
 min-height: 100px; /* for not-IE */
 width: 100%;
 -webkit-box-shadow: 3px 3px 7px #777;
 -moz-box-shadow: 3px 3px 7px #777;
 }

/* nav */
nav {
 background:#046380;
 margin:0;
 width: 1100px;
 display: block;
 float: left;
 -webkit-box-shadow: 3px 3px 7px #777;
 -moz-box-shadow: 3px 3px 7px #777;
}
nav .menu {
 font-size: 16px;
 font-weight: bold;
 margin:0;
}
nav .menu ul {
 list-style: none;
 margin:0;
}
nav .menu li {
 float: left;
 position: relative;
}
nav .menu a {
 display: block;
 text-decoration: none;
 color:black;
 padding: 0 30px;
 line-height: 40px;
}
nav .menu a:hover {
 color:white;
}

/* nav 1-level dropdowns */
nav .menu li ul { 
 display: none; 
}
nav .menu ul li a {
 display: block;
 text-decoration: none;
 color:black;
 background:#4BB5C1;
 margin-left:4px;
 white-space: nowrap;
}
nav .menu ul li ul a {
 margin-left:-40px;
 border-left:4px solid;
 border-color:#046380;
}
nav .menu ul li a:hover { 
 background:#002F2F; 
}
nav .menu li:hover ul {
 display: block;
 position: absolute;
}
nav .menu li:hover li {
 float: none;
}
nav .menu li:hover a { 
 background:#4BB5C1; 
}
nav .menu li:hover li a:hover { 
 background:#002F2F; 
}

#content {
 float: left; 
 width: 50%;
 height: 210px; /* for IE */
 min-height: 210px; /* for not-IE */ 
 margin: 10px 0 20px 0; 
 padding: 10px 10px 10px 10px;
 background-color: #ceebee;
 -webkit-box-shadow: 3px 3px 7px #777;
 -moz-box-shadow: 3px 3px 7px #777;
 }
aside {
 float: right;
 text-align: left; 
 width: 45%; 
 margin: 10px 0 10px 0;
 padding:0;
 }
aside section {
 margin: 0 0 10px 0;
 padding: 10px 15px;
 background-color: #B5E655;
 -webkit-box-shadow: 3px 3px 7px #777;
 -moz-box-shadow: 3px 3px 7px #777;
 }

article {
 float: left;
 width: 620px;
 height: 200px;
 margin-bottom: 30px;
 }
article .thumb {
 float: left;
 width: 200px;
 height: 200px;
 /* curved border radius */
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 }
article .title {
 float: right;
 width: 400px;
 font-size: 22px;
 font-weight: bold;
 margin-bottom: 10px;
 color: #557301;
 }
article .story {
 float: right;
 width: 400px;
 }

/* footer */
footer {
 position:relative;
 bottom:10px;
 clear: both;
 float: left;
 background: #046380;
 width: 100%;
 color: #F0E7D4;
 -webkit-box-shadow: 3px 3px 7px #777;
 -moz-box-shadow: 3px 3px 7px #777;
 }
footer p {
 text-align: left;
 font-size: 14px;
 padding-left: 20px;
 }
footer a {
 color: #F0E7D4;
 text-decoration: none;
 }
footer a:hover {
 text-decoration:underline;
 }

/* gestion liens élèves */
#menu_dynamique li a {
  display:block;
  height:23px;
  text-decoration:none;
  color:#696969;
  background-color:#FFFFFF;
}
#menu_dynamique {
  width:auto;
  margin:10px 0px;
  padding:0px;
}
#menu_dynamique ul {
  width:150px;
  list-style:none;
  padding:0px;
  margin:0px;
  border-right:1px solid silver;
}
#menu_dynamique ul li {
  width:auto;
  margin-left:5px;
  padding-left:25px;
  text-indent:5px;
  height:23px;
  background:url("bordure.png") no-repeat;
}
#menu_dynamique ul li ul {
  display:none;
}
#menu_dynamique ul li:hover ul {
  display:block;
  position:relative;
  top:-24px;
  left:115px;
}
#menu_dynamique ul li ul, #menu_dynamique ul li:hover ul li ul, #menu_dynamique ul li:hover ul li:hover ul li ul{
  display:none;
}
#menu_dynamique ul li:hover ul, #menu_dynamique ul li:hover ul li:hover ul, #menu_dynamique ul li:hover ul li:hover ul li:hover ul{
  display:block;
  position:relative;
  top:-24px;
  left:115px;
}
#menu_dynamique ul li.extend a {
  background:white url("suite.gif") right no-repeat;
}
#menu_dynamique ul li.extend:hover ul li.end a {
  background-image:none;
}
#menu_dynamique li:hover {
  background:url("fleche_survol.png") no-repeat;
}
#menu_dynamique li a:hover {
  color:black;
  background-color:#BBB7C7;
}
#menu_dynamique ul li.extend:hover a, #menu_dynamique ul li.extend:hover ul li:hover a, #menu_dynamique ul li.extend:hover ul li.extend:hover ul li:hover a, #menu_dynamique ul li.extend:hover ul li.extend:hover ul li.extend:hover ul li:hover a{
  background-color:#BBB7C7;
}
#menu_dynamique ul li.extend:hover ul li a, #menu_dynamique ul li.extend:hover ul li:hover ul li a, #menu_dynamique ul li.extend:hover ul li.extend:hover ul li:hover ul li a{
  background-color:#FFFFFF;
}
#menu_dynamique li.first{
  border-top:1px solid silver;
}
#menu_dynamique li.last{
  border-bottom:1px solid silver;
}
#menu_dynamique ul li.extend:hover {
  width:120px;
  height:23px;
  overflow:hidden;
}
html > body #menu_dynamique ul li.extend:hover {
  overflow:visible;
}

/* tableau */
table {
 border-collapse: collapse;
 width: 720px;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 border-width: 2px;
 border-style: solid;
 border-color: #046380;
}

td, th {
 border-width: 2px;
 border-style: solid;
 border-color: #046380;
 width: 120px;
}