/* on définit d'abord une taille de police de 100% puis de 1em pour être sur que l'em fera bien 100% dans la
feuille de style */
html {
font-size: 100%;
}
html {
font-size: 100%;
}
body {
font-size: 1em;
background-color: #D6E0FF;
}
/* on définit un conteneur pour tout le site de taille 100% et centré */
#conteneur {
width: 95%;
margin-left: 5%;
min-width: 980px;
}
/* ici on met le logo */
#logo
{
background: url(design/logo4.PNG) no-repeat top left;
width: 100%;
min-width: 980px;
height: 145px;
margin-left: 0;
}
/* le menu horizontal principal de largeur 870px à cause de la marge a gauche de 170px */
#menu {
padding: 0;
margin: 0;
height: auto;
width: auto;
}
#nav, #nav ul {
margin: 0em 0em 0em 220px;
padding-left: 16px;
list-style: none;
border-width: 1px 0;
width: 700px;
text-align: left;
font-weight: normal;
text-transform: none;
background-color: transparent;
background-image: url(design/bckgrndmenu.PNG);
background-repeat: no-repeat;
color: #3366FF;
height: 30px;
font-family: tahoma;
}
#nav a {
display: block;
background-color: transparent;
color: yellow;
text-decoration: none;
text-indent: left;
font-weight: bolder;
}
#nav a:hover, #nav a.sfhover {
padding: 0;
color: white;
width: auto;
}
#nav img {
visibility: hidden;
max-width: 100px;
}
#nav li.accueil {
width: 56px;
margin-left: 16px;
padding: 0;
}
#nav a.accueil1 {
float: left;
padding: 0;
margin: 0;
display: block;
width: 56px;
height: 27px;
background-image: url(design/accueil1.PNG);
background-repeat: no-repeat;
}
#nav a.accueil1:hover, #nav a.accueil1.sfhover {
background-image: url(design/accueil2.PNG);
background-repeat: no-repeat;
width: 56px;
}
#nav li.contact {
float: left;
padding-left: 16px;
margin: 0;
display: block;
width: 73px;
}
#nav a.contact1 {
width: 73px;
height: 27px;
background-image: url(design/contact1.PNG);
background-repeat: no-repeat;
}
#nav a.contact1:hover, #nav a.contact1.sfhover {
background-image: url(design/contact2.PNG);
background-repeat: no-repeat;
}
#nav li {
margin-left: 16px;
display: block;
background-color: transparent;
text-decoration: none;
background-image: transparent;
float: left;
height: 30px;
}
#nav li.mjc {
float: left;
width: 135px;
display: block;
color: #0033CC;
font-weight: bolder;
background: url(design/mjc1.PNG) no-repeat;
}
#nav a.mjc1 {
width: 135px;
display: block;
height: 30px;
}
#nav a.mjc1:hover, #nav a.mjc1.sfhover {
background: url(design/mjc2.PNG) no-repeat;
}
#nav li.ecole {
background: url(design/ecole1.PNG) no-repeat;
width: 111px;
}
#nav a.ecole1 {
width: 111px;
display block;
height: 30px;
}
#nav a.ecole1:hover, #nav a.ecole1.sfhover {
background: url(design/ecole2.PNG) no-repeat;
}
#nav li.retraite {
background: url(design/retraite1.PNG) no-repeat;
width: 144px;
}
#nav a.retraite1 {
width: 144px;
display block;
height: 30px;
}
#nav a.retraite1:hover, #nav a.retraite1.sfhover {
background: url(design/retraite2.PNG) no-repeat;
}
/* la partie déroulante du menu */
/* on commence par la mettre hors de portée de vue */
#nav li ul {
font-size: 90%;
position: absolute;
padding 0;
margin-top: -5px;
background: url(design/bckgrndmenu2.PNG) repeat;
left: -999em;
}
/* un left:auto pour le faire apparaitre lors de l'évenement hover */
#nav li:hover ul, #nav li.sfhover ul {
margin-left: 0;
left: auto;
padding: 0;
width: 10em;
height: 5.416em;
text-align: left;
}
#nav li:hover ul.un, #nav li.sfhover ul.un {
width: 8.5em;
height: 1.3em;
}
#nav li:hover ul.deux, #nav li.sfhover ul.deux {
height: 1.3em;
}
#nav li ul li {
margin: 0;
height: 1.388em;
}
#nav li ul li:hover, #nav li ul li.sfhover {
height: 1.388em;
}
#nav li ul li a {
width: 10em;
color: white;
font-weight: normal;
height: 1.111em;
}
#nav li ul.un li a {
width: 8.5em;
}
#nav li ul li a:hover, #nav li ul li a.sfhover {
background: url(design/bckgrndmenu1.PNG) repeat;
padding-bottom: 0.18em;
color: #000066;
width: 10em;
height: 1.111em;
}
#nav li ul.un li a:hover, #nav li ul.un a.sfhover {
width: 8.5em;
}
#nav li ul span
{
color: yellow;
font-weight: bold;
}
#nav li ul span:hover, #nav li ul span.sfhover
{
color: white;
}
/* wrap sert à ce que le pied de page se retrouve toujours en bas quelque soit la taille du texte */
#wrap {
overflow: hidden;
font-size: 100%;
}
/* ici on définit la "sidebar" à gauche du contenu principal et qui contiendra les news */
#sidebar {
float: left;
width: 200px;
height: 320px;
background: url(design/sidebar2.PNG) left top no-repeat;
text-align: center;
font-family: tahoma;
font-weight: bold;
color: white;
}
#sidebar ul {
font-weight: normal;
padding: 0;
margin: 50px 13px 13px 18px;
text-align: left;
font-size: 90%;
color: #000066;
}
#sidebar li {
font-size: 75%;
padding: 0;
}
#sidebar a {
display: block;
padding-bottom: 10px;
text-align: center;
font-size: 75%;
color: #000066;
text-transform: none;
text-decoration: underline;
}
#sidebar a:hover, #sidebar a.sfhover {
text-decoration: none;
color: #0033CC;
}
/* on s'attaque au contenu principal du site */
#contenu {
margin-left: 220px;
margin-right: 0px;
padding: 0;
width: 700px;
height: auto;
}
/* la on a le véritable contenu principal du site */
#texte {
margin-top: 20px;
padding: 2px 16px 16px 16px;
width: 700px;
height: auto;
background-color: white;
border: 1px solid #8099FF;
color: #000066;
font-family: tahoma;
text-align: justify;
}
#top {
font-size: 75%;
color: #0033CC;
}
#texte a {
font-weight: bold;
color: #0033CC;
text-transform: none;
text-decoration: underline;
}
#texte a:hover, #texte a.sfhover {
text-decoration: none;
color: #000066;
}
#texte p {
font-size: 80%;
}
#texte h2 {
font-size: 100%;
font-weight: bold;
color: #0033CC;
}
#titre {
font-size: 110%;
font-weight: bold;
text-align: center;
color: #0033CC;
}
#texte img {
font-size: 100%;
display: block;
margin: 0 auto;
}
#citation {
padding-top: 16px;
font-style: italic;
text-align: center;
color: #0033CC;
}
#auteur {
font-weight: bold;
text-align: center;
padding-bottom: 16px;
}
#texte li {
font-size: 75%;
}
/* le pied de page */
#pied {
margin-top: 10px;
text-align: center;
font-size: 70%;
color: #3366FF;
font-family: tahoma;
}