/* << ----------------// General Styles //---------------->> */
body {
background-color:#ffffff;
margin:5px 5px 5px 5px;
padding:0;
font-family:Georgia, "Times New Roman", Arial;
font-size:14px;
line-height:18px;
color:#000000;
}

p {
margin:10px 10px 10px 10px;
}

strong {
font-weight:bold;
}

em {
font-style:italic;
}

h1, h2, h3, h4 {
font-weight:bold;
margin:10px 0 0 0;
}

h1 {
text-decoration:underline;
margin:20px 0 30px 0;
text-align : center;
font-size:26px;
}

h2 {
margin:30px 0 10px 0;
text-align : center;
font-size:23px;
line-height:25px;
}

h3 {
font-size:20px;
}

h4 {
font-size:17px;
margin:0 10px 0 10px;
}

h5 {
font-size:11px;
}

h6 {
font-size:14px;
margin-left: 10px
}

a:link, a:visited {
color:#000000;
text-decoration:underline;
}

a:hover, a:active {
color:#999999;
text-decoration:none;
}

ul {
margin:5px 0 5px 20px;
padding:0;
list-style-type:disc;
}

ol {
margin:5px 0 5px 30px;
padding:0;
list-style-type:decimal;
}

ul li, ol li {
margin:0 0 4px 0;
padding:0;
}

/* infobulle image */
a.imag {
color: blue;
background-color : auto; /* Couleur de fond du lien */
position: relative; /* necessaire sur certaines skins pour repositionner l'image dans la grille */
left: 10px
}
a.imag:hover {
border-bottom: 0px; /* indispensable pour IE */
cursor : help; /* Type de curseur  au passage de la souris*/
}
a.imag span {
display:none ; /* cache les <span> placés dans le lien <a> */
text-decoration:none ; /* soulignement du lien */
color: #000000; /* Couleur du texte associé a l'image */
background-color : #ffffff; /* Couleur du fond de l'info bulle  */
}
 a.imag:hover span {
display: block; /* Montre le texte et l'image lors du passage du pointeur */
position: absolute; /* position  de l'image dans une zone de l'écran par rapport au lien */
width:140px;
top: 20px; /* cette zone se situe à xxx pixels du haut du lien */
left: 5px ; /* cette zone se situe à xxx pixels de la gauche du lien */
border:solid 1px; /* Style de bordure de l'image */
padding: 4px; /* Marge intérieure à la bordure */
text-align:left; /* Centrage du texte associé à  l'image */
z-index: 50; /*nécessaire avec certaines skins pour positionner l'image par rapport au fond */
}

/* << ----------------// Outer container that holds all the columns //---------------->> */
#mainContainer {
position: relative;
left:50%;
	width:800px;
	margin:0 0 0 -400px;
padding:0;
border:1px solid #ffcc99;
background-image:url(images/colonnes.gif);
}

/* << ----------------// accueil //---------------->> */

#accueil {
background-color: #ffffff;
width:800px;

}
#accueil  img{
margin-top:10px;
margin-left:50px;
margin-bottom:20px;

}

/* << ----------------// Couche1 //---------------->> */
#calque1 {
position: absolute;
top: 165px; 
right:0px;
_margin:0;
padding:50px 30px 0 0;
width:300px;
}

#calque1 img {
border:1px solid #ffcc99;

}


/* << ----------------// Header //---------------->> */
#header {
margin:0;
padding:0px;
width:800px;
height:128px;
color:#ffffff;
background-image:url(images/banisa.jpg);
}

/* << ----------------// Horizontal navigation //---------------->> */
#navHorizontal {
text-align:center;
margin:0;
padding:0;
width:800;
height:29px;
line-height:30px;
background-color:#ffcc99;

}

#navHorizontal ul {
margin:0 0 0 5px;
padding:0;
list-style:none;
}

#navHorizontal ul li {
margin:0 0 0 -5px;
padding:5px 0 5px 0;
list-style:none;
display:inline;
}

#navHorizontal ul li a:link, #navHorizontal ul li a:visited {
padding:5px 8px 5px 8px;
color:#440000;
text-decoration:none;
border-right:1px solid #993300;
}

#navHorizontal ul li a:hover, #navHorizontal ul li a:active {
color:#ff0000;
text-decoration:none;
background-color:#ffffcc;
}

/* Styles pour la rubrique en cours */
#navHorizontal #en-cours a {
color: #ffff99;
background-color:#ff6633;
border-left:1px solid #993300;
}

/* << ----------------// Left column //---------------->> */
#columnOne {
float:left;
height:auto.
margin:0;
padding:0 0 0 0;
width:225px;
}

#columnOne p, #columnThree p, #columnOne ul li, #columnOne ol li, #columnThree ul li, #columnThree ol li {
font-size:13px;
}

#columnOne h2, #columnThree h2 {
font-size:16px;
}

#columnOne h4, #columnOne h5 {
text-align: center;
}

#columnOne #fond {
margin: 20px 20px 0 0;
background-image:url(images/nevphotisa4.jpg);
background-repeat: no-repeat;
background-position: center top;
}
#columnOne img {
display: block;
margin: 20px 20px 0 20px;
}

#columnOne #vignettes img {
display: block;
margin: 20px 20px 0 20px;
border:1px solid #ffcc99;
}

/* << ----------------// Vertical navigation //---------------->> */
#navVertical {
margin: 20px 20px 0 20px;
padding:0 0 5px 0;
width:189px;
background-color:#ffcc99;
}

#navVertical ul {
margin:0 0 0 5px;
padding:0 5px 0 5px;
list-style:none;
}

#navVertical ul li {
margin:0 0 0 -5px;
padding:0;
list-style:none;
border-bottom:1px solid #993300;
}

#navVertical ul li a:link, #navVertical ul li a:visited {
padding:5px 8px 5px 8px;
font-size:15px;
color:#440000;
text-decoration:none;
display:block;
}

#navVertical ul li a:hover, #navVertical ul li a:active {
color:#ff0000;
text-decoration:none;
background-color:#ffffcc;
}

/* Styles pour la rubrique en cours */
#navVertical #en-cours a {
color: #ffff99;
background-color:#ff6633;
}

/* << ----------------// Middle column //---------------->> */
#columnTwo {
text-align:justify;
float:left;
height:auto;
margin:0;
padding:0 5px 0 5px;
width:425px;
}

#columnTwo  #italic  {
font-style:italic;
margin:0 5px 0 5px;
}

#columnTwo  #inform  {
font-family:arial;
font-size:12px;
margin:0 10px 0 0;
}

#comic{
color:#440000;
font-size:17px;
font-family: Comic sans MS; Arial;
Line-Height: 22px;
text-decoration:none;
}

#comicStrong{
color:#440000;
font-size:22px;
font-family: Comic sans MS; Arial;
font-weight:bold;
text-decoration:none;
}

#box{
padding:0 10px 10px 0;
margin:0 0 0 10px;
height: auto;
width: 395px;
border: 1px solid #cccccc;
background-color: #fffff7;
}


#columnTwo #table img {
margin: 10px 30px 0 30px;
border:1px solid #e8e8e8;
}

/* << ----------------// Right column //---------------->> */
#columnThree {
text-align:center;
float:left;
height:auto;
margin:0;
padding:0 0 0 15px;
}

#columnThree img {
margin: 0 0 10px 0;
border:1px solid #ffcc99;
}


/* << ----------------// Footer //---------------->> */
#footer {
text-align:center;
font-family:arial;
margin:0;
padding:0px 0px 0px 0px;
width:800px;
height:50px;
font-size:12px;
color:#000000;
text-decoration:none;
background-color:#ffcc99;
clear:both;
}

#footer a:link, #footer a:visited {
color:#000000;
text-decoration:none;
}


#footer a:hover, #footer a:active {
color:#ff6633;
text-decoration:underline;
}