body
{
   width: 960px;
   margin: auto; /* Pour centrer notre page */
   margin-top: 20px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 20px;    /* Idem pour le bas du navigateur */
   background-color: #00338C;
   }
*{
margin : 0px;
}

#en_tete
{
   float: top;
   width: 950px;
   padding-top: 20px;
   height: 90px;
   background-image: url("images/compagnie-maritime-logo2.jpg");
   background-repeat: no-repeat;
   font-size : 1.5em;
   font-weight: bold;
   font-family: "Courier New", courier, "futura lt","Arial Black", Arial, Times, serif ;
   text-align :left;
   color : #ffffff; 
   
   }
.intro
 {
 text-align : right;
 font-size : 0.6em ;
 font-weight: normal;
}


/* Le menu */

#menu
{
   float: left; /* Le menu flottera à gauche */
   width: 240px; /* Très important : donner une taille au menu */
   background-image: url("images/design/menu.jpg") ;
   background-repeat: repeat-y;
   margin-right: 4px;
   
}

.element_menu h3 /* Tous les titres de menus */
{   

   color: #ffffff;
   font-family: "Courier New", Arial,"Arial Black", "Times New Roman", Times, serif;
   font-size: 1.3em;
   text-align: left;
   padding-left: 15px;
   border : 1px outset;
   background-image: url("images/design/menu_section.jpg");
   background-repeat: repeat-y;
  
}

.element_menu ul /* Toutes les listes à puces se trouvant dans un menu */
{   
   list-style-position: inside;
      list-style-image: url("images/puce.png");
   font-family: "Courier New", "Times New Roman", Times, serif ;
   font-size : 0.95em;
   padding-left: 0px; /* ... mais on modifie ensuite la marge de gauche, donc celle-là fera finalement 20 pixels */
   padding-right: 0px;
}

.element_menu ul :hover/* Toutes les listes à puces se trouvant dans un menu */
{
   background-image:  url("images/design/menu_select.jpg");
   list-style-image: url("images/puce2.png"); /* On change l'apparence des puces */
   color:  #c8c8c8;   
   border : 0.1em ;
   border-style : inset ;
   
}
.element_menu li
{

border: 0.1em;
border-style: outset;
padding-top: 5px;
padding-bottom : 5px;
}
.element_menu li :hover
{

background-image: none;
border: 0.1em;
border-style: outset;
padding-top: 5px;
padding-bottom : 5px;

} 
.element_menu a /* Tous les liens se trouvant dans un menu */
{     
   text-decoration: none;
   color: #c8c8c8;
}
.element_menu a:hover /* Quand on pointe sur un lien du menu */
{
font-size : 1em;
color : white;
border-style : none ;
}
.bordure_haut_menu
{
background-image: url("images/design/menu_haut.jpg");
width: 240px;
height: 13px;
float:left;
background-repeat: no-repeat;
}
.bordure_bas_menu
{
background-image: url("images/design/menu_bas.jpg");
width: 240px;
height: 13px;
float: left;
background-repeat: no-repeat;
}


#corps
{
 
   width: 715px;
   float: left;
   background-image: url("images/design/fond_corps.jpg");
   background-repeat : repeat-y;
      
}

.bordure_haut_corps
{
background-image: url("images/design/corps_bordure_haut.jpg");
width: 715px;
height: 13px;
float:top;
background-repeat: no-repeat;
}



 
#corps h6 /* Tous les titres h6 du corps */
{
   color: #ffffff;
   font-size: 0.8em;
   padding-right: 20px;
   text-align: left;
   font-family: "Courier New", Arial, "Arial Black", "Times New Roman", Times, serif;
   word-spacing: 2px;
   letter-spacing: 1px ;
   padding-left : 15px;
   
}

#corps h5 /* Tous les titres h6 du corps */
{

   color: #ffffff;
   font-size: 1em;
   text-align: left;
   font-family: "Courier New", Arial, "Arial Black", "Times New Roman", Times, serif;
   word-spacing: 2px;
   letter-spacing: 1px;
   padding : 10px

   }

#corps h4 /* Tous les titres h6 du corps */
{

   color: #ffffff;
   font-size: 1.1em;
   text-align: left;
   font-family: "Courier New", Arial, "Arial Black", "Times New Roman", Times, serif;
   word-spacing: 2px;
   letter-spacing: 1px;
   padding : 10px
}

#corps h3/* Tous les titres h6 du corps */
{

   color: #ffffff;
   text-align: left;
   font-family: "Courier New", Arial, "Arial Black", "Times New Roman", Times, serif;
   word-spacing: 2px;
   letter-spacing: 1px;
   padding-top: 5px;
   padding-bottom:5px;
}
   

#corps h1 /* Tous les titres h2 du corps */
{
   
   font-family : "Courier New", courier, Arial, "Arial Black", "Times New Roman", Times, serif;	
   font-size: 1.5em;
   background-image: url("images/design/titre_corps.jpg"); 
   background-repeat: repeat-y;
   color: #ffffff;
   text-align: right;
   padding-right: 10px;
   
}

#corps h2 /* Tous les titres h2 du corps */
{
   font-family : "Courier New", courier, Arial, "Arial Black", "Times New Roman", Times, serif;	
   color: #ffffff;
   text-align: left;
   padding-left : 20px;
   padding-bottom : 10px;
   padding-top: 10px;
}

#corps ul
{
padding: 10px;
}

#corps p
{
 	text-indent: 30px;
}	

#corps a
{
	color : #5399ff;
	text-decoration: none ;

}

#corps a:hover
{
	color : #ffffff;
}
#corps img
{
padding: 10px;
}


.animation_intro
{
float: top-left;
padding-left: 4px ;
}
 
.actualites
{
float: left;
width: 136px;
height: 320px;
font-family: "Courier New", Arial, "Arial Black", "Times New Roman", Times, serif;
color: #ffffff;
text-align: center;
}


.actualites h4
{
background-image: url("images/design/actualites.jpg");
background-repeat: repeat-y;
padding-left: 10px;
}
               p#titre
                           {
						  padding-top: 1px;
						  padding-bottom: 1px;
                          letter-spacing: 1px;
                          text-indent: 0px !important;
                          font-variant:small-caps;
                          font-size: 1em ;
                          font-weight: bold;
                          font-family: "Courier New", Arial, "Arial Black", "Times New Roman", Times, serif;
                          color: #ffffff;
              }
			  
			  
				p#actu
				{
				padding-bottom: 8px;
				border: hidden 2px ;
				border-bottom-style: dotted ;
				letter-spacing: 1px ;
				text-indent: 0px !important;
				font-size: 0.7em ;
				font-weight: normal;
				font-family: "Courier New", Arial, "Arial Black", "Times New Roman", Times, serif;
				color: #ffffff;
   }
 


.spectacle1                             
{
float : left;
width : auto;
margin-left: 20px;
margin-top: 30px;
font-style : italic;

}
.spectacle1	h6
{
padding-left: 0px !important;						    
}

                                .spectacle2
								{
								
								float: right;
								margin-top: 60px;
								margin-right: 30px;
								width : auto;
								font-style : italic;
								}	
								.spectacle2 h6
								{
								padding-left: 0px !important;
								}
								

.lien1                             
{
float : left;
width : auto;
margin-left: 60px;
margin-top: 10px;
font-style : italic;

}
.lien1	h6
{
padding-left: 0px !important;						    
}

                                .lien2
								{
								
								float: left;
								margin-top: 60px;
								margin-left: 60px;
								margin-right: 30px;
								margin-bottom:10px;
								width : auto;
								font-style : italic;
								}	
								.lien2 h6
								{
								padding-left: 0px !important;
								}								
								
								
.liens
{
float: left;
width : auto;
padding: 30px;
} 


.liens ul :hover/* Toutes les listes à puces se trouvant dans un menu */
{
   list-style-type: none;  /* On change l'apparence des puces */
   color:  #c8c8c8;   
   background-image:  url("images/design/menu_select.jpg");
   border: 0.1em;
   border-style: inset;
}
.liens li
{
list-style-type: none;
border: 0.1em;
border-style: outset;
padding: 5px;

}
.liens li :hover
{
 background-image: none;
border: 0.1em;
border-style: hidden;
padding-top: 5px;
padding-bottom : 5px;
}
.liens a:hover /* Quand on pointe sur un lien du menu */
{
font-size : 1em;
color : white;
border-style : none ;
}

.bordure_bas_corps
{
background-image: url("images/design/corps_bordure_bas.jpg");
width: 715px;
height: 13px;
float: left;
background-repeat: no-repeat;

}





/* Le pied de page (qui se trouve tout en bas, en général pour les copyrights) */

 #pied_de_page
{
   float: right; 
   width: 715px;
   height: 120px;
   padding:0px;
   margin-top: 4px;
   
   margin-bottom: 10px;
   margin-left: 192px; 	
   text-align: center;
   color: #ffffff;
   background-color: #00338C;
  
   
   border: ;
}
#pied_de_page h3
{
	height: 2px;
	margin-bottom: 2px;
	margin-top: 0px;
	text-decoration: blink;
	}
	
	
	#pied_de_page a
	{
	color : #c86564;
	text-decoration: none;
	
	}