html{
	margin:0;
	padding:0;
	background:#fff url('../images/bg_body.gif') top left repeat-x;
}
body{
	margin:0;
	padding:0;
	text-align:center;
	font:0.8em verdana, sans-serif;
	background:url('../images/ombre.png') top center no-repeat;
}
.slide{
	position:absolute;
	top:0;
	left:0;
}
.slide img{
	border:3px solid #fff;
	-moz-box-shadow: rgba(0,0,0,1) 0 4px 18px;
	-webkit-box-shadow: rgba(200,200,200,1) 0 4px 18px;
	-khtml-box-shadow: rgba(200,200,200,1) 0 4px 18px;
	box-shadow: rgba(200,200,200,1) 0 4px 18px;
}
#diapo h4{font-style:italic;margin:0 0 6px 0;padding:0;font-size:11px;}
/*affichage des images miniatures*/
.imageAdmin{
width:90%;
height:165px;
border: 2px inset #5e89c1;
padding:15px;
margin:5px;
}
.pdf{
text-decoration:none;
}
.left{
width:160px;
display:block;
float:left;
background-color:white;
}
.left a{
color:white;
}
.right{
width:55%;
display:block;
float:left;
background-color:white;
}

.imageAdmin a{color:#333;font-size:9px;margin:0;padding:0;text-decoration:none;}
.imageAdmin a span{display:block;height:16px;line-height:16px;vertical-align:middle;padding-left:20px;background:url('../images/loupe.jpg') top left no-repeat;}
.imageAdmin a.original{color:#00f;font-size:12px;}
.imageAdmin a.original:hover{text-decoration:underline;}

.blanc{
	color:#FFFFFF;
}
.pair>div>a>img{
	border:none;
}
.impair>div>a>img{
	border:none;
}
div#miniatures{
	background-color:#b74c4c ;
	padding:25px;
	padding-left:35px;
}
div#vessels{
	width: 500px ;
    height: 375px;
	background: url("../skin/fondTexte.jpg") no-repeat 0px 0px ;
	padding-top:25px;
	padding-left:25px;
	margin: 0 auto ;
    font-weight: bold;
}
div#vessels>h3{
	text-align: center ;
}

div#conteneur{
	width:954px ;
	margin: 0 auto 0 auto;
	padding:0 10px 0 10px;
	text-align:left ;
	border-top:3px solid #99bae4;
	background:#fff;
	margin-top:0px;
	-moz-box-shadow: rgba(0,0,0,1) 0 4px 18px;
	-webkit-box-shadow: rgba(220,220,220,1) 0 4px 18px;
	-khtml-box-shadow: rgba(220,220,220,1) 0 4px 18px;
	box-shadow: rgba(220,220,220,1) 0 4px 18px;
}
*HTML div#conteneur{
	width: 885px ;
	margin: 0 auto ;
	text-align: left ;
	border: 2px solid #999999;
	background: #fff ;
	margin-top:0px;
}
/* Une bordure autour de l'ensemble de la page, et couleur blanche pour le fond de celle-ci */
div#header{
	width:974px;
	height:194px;
	background:url("../skin/haut.jpg") no-repeat 0px 0px;
	text-align:center;
}
div#header a{
	font-size:24px;
	text-decoration:none;
	color:#902d10;
	font-weight:normal;
	letter-spacing:12px;
	text-shadow:1px 1px 2px #333;
}
div#liens{
	text-align:center;
width:974px;
height:20px;
}
div#liens a{
	font-size:12px;
/*	text-decoration:none;*/
	color:#902d10;
/*	letter-spacing:12px;*/
	text-shadow:1px 1px 2px #333;

}
#menuGauche {
	width:171px;
	padding:1px;
	margin:1px;
	float:left;
	/*border: 2px inset #5e89c1;*/
	margin-top:0px;
}
*html #menuGaucheIE {
	background-color:#b74c4c;
	width:171px;
	padding:1px;
	margin:1px;
	float:left;
	/*border: 2px inset #5e89c1;*/
	margin-top:0px;
}
#menuGauche>img{
	width:171px;
	height:29px;
}
#menuGauche ul{
	background-color:#b74c4c;
	margin-top:10px;
	padding-top:5px;
	margin-bottom:10px;
	padding-bottom:5px;
}
*html #menuGauche>ul{
	background-color:#b74c4c;
	margin-top:5px;
	padding-top:10px;
	margin-bottom:5px;
	padding-bottom:10px;
	margin-left:-40px;
}
*html #menuGauche li{
	background-color:#b74c4c;
	list-style-type: circle;
	margin:0px;
	margin-top:10px;
	margin-bottom:10px;
	padding:0px;
	/*background-color:#5e89c1;*/
}
#menuGauche li{
	background-color:#b74c4c;
	list-style-type: circle;
	margin:0px;
	margin-top:10px;
	margin-bottom:10px;
	padding:0px;
	/*background-color:#5e89c1;*/
}
#menuGauche li a{ 
	color:#FFFFFF;
	font-weight:bold;
	text-decoration:none;
}

#menuDroit {
	width:170px;
	padding:1px;
	margin:1px;
	float:right;
	/*border: 2px inset #5e89c1;*/
	margin-top:0px;

}

ul#menu
{
/*	height: 35px ;*/
	margin: 0 ;
	padding: 0 ;
/*	background: url("../skin/bouton8.gif") repeat-x 0 -25px ;*/
	list-style-type: none ;
}
/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel; */
ul#menu li
{
	float: left ;
	margin: 0 0 5px 0;
	padding:0;
/*	text-align: center ;*/
}/* On rend les li en flottant pour pouvoir les afficher horizontalement, on cache les puces, et on centre le texte */

ul#menu li a
{
	display: block ;
	width: 150px ;
	line-height: 30px ;
	color:#FFFFFF;
	text-indent:40px;
	text-decoration: none ;
	background: url("../skin/bouton9.gif") no-repeat 0 0 ;
	font-size: 1.0em ;
	font-weight: bold ;
	letter-spacing: 2px ;
/*	color: #fff ;*/
/*	border-right: 2px solid #dea ;*/
}/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */


div#contenu
{	width:755px;
	height:100%;
margin-left:10px;
margin-right:10px;
	/*padding: 5px ;*/
	background: url(bg_page.gif) no-repeat 15px 15px ;
	float:left;
}
*html div#contenu{
	width:480px;
	padding-left:10px;
	padding-right:10px;
	/*padding: 5px ;*/
	float:left;
}
/* On ajoute un petit élément décoratif sur le côté de la page et on crée un espace à gauche et à droite du contenu */


div#contenu h2
{
	padding-left: 25px ;
	line-height: 25px ;
	font-size: 1.4em ;
	/*background: url(little_apple.gif) no-repeat left bottom ;*/
	color: #b74c4c ;
	border-bottom: 1px solid #5e89c1 ;
}

/* Mise en forme du titre de page, une petite image, on décale le texte en fonction de l'image, on donne un couleur au texte et on met une bordure basse */

/*div#contenu h3
{
	margin-left: 15px ;
	padding-left: 5px ;
	border-bottom: 1px solid #9b2 ;
	border-left: 3px solid #9b2 ;
	color: #9b2 ;

/* De même que pour le titre h2, à ceci près qu'on ne donne pas d'image décorative cette fois ci */

div#contenu p
{
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;
}


/* On met en forme les liens contenu dans la page */

p#footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: right ;
	color: #5e89c1 ;
}
/* Mise en forme de la partie pied de page, rien d'extra-ordinaire */

pre
{
	overflow: auto ;
	background: #dea ;
	border: 2px solid #9b2 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}
/*une couleur de fond, une bordure, la taille de police et un léger espace entre le texte et les bords du pre */

* html pre
{
	width: 636px ;
}

pre span
{
	color: #560 ;
}

/* Couleur de texte des éléments compris dans des span eux mêmes compris dans un pre */


pre span.comment
{
	color: #b30000 ;
}
		
/* Couleur différente pour les span.comment, les span utilisés pour les commentaires */
			
/* = = = = = = = = = = = = = =
   Formulaires
   = = = = = = = = = = = = = = */

input, textarea { 
  	border: 1px solid #00008b;
  	padding: 2px;
  	font-size: 1em;
/*  background-color: #bed3e4;
  font-family: Verdana, Arial, sans-serif;	*/

 }

input[type="hidden"] { 
  	border: none;
  	padding: 0px;
 }

form div { 
  /*clear: both;*/
  	padding: 3px;
}

form div > span { 
  	float: left;
  	width: 30%;
  	text-align: right;
  	font-size: 0.8em;
}

form div span+span { 
  	float: left;
  	width: 65%;
  	text-align: left;
  	padding-left: 2px;
}


input[type="text"], textarea { 
  	width: 60%;
}
div.menu>form{
	width:180px;
	height:37px;
}

div.menu>form>p>input{
	width:125px;
	height:26px;
	background-color:#e0b2b2;
	border:none;
margin-top:0;
margin-right:5px;
float:left;
}
div.menu>form>p>input.ok{
	width:37px;
	height:36px;
  	background: url("../skin/go.jpg") no-repeat;
	border:none;
float:left;
margin-top:0;
}
/*la même chose mais ou IE*/
* html .recherche{
	width:120px;
	height:26px;
	background-color:#e0b2b2;
	border:none;
float:left;
margin-left:5px;
}
* html .ok{
	width:37px;
	height:36px;
  	background: url("../skin/go.jpg") no-repeat;
	border:none;
float:left;
margin-top:0;
}
/*fin pour IE*/

div.menu>form>p>input.login{
	width:145px;
	height:26px;
	border:none;
	background-color:#e0b2b2;
margin-top:2px;
color:#FFFFFF;
font-weight:bold;
padding-left:15px;
padding-top:5px;
margin-bottom:2px;
}
div.menu>form>p>input.connexion{
	width:93px;
	height:26px;
	border:none;
margin-top:2px;
color:#FFFFFF;
font-weight:bold;
padding-left:15px;
padding-top:5px;
margin-bottom:2px;
  	background: url("../skin/connexion.jpg") no-repeat;
float:right;
margin-right:10px;
}
* html .login{
	width:140px;
	height:26px;
	border:none;
color:#FFFFFF;
font-weight:bold;
padding-left:15px;
margin-bottom:2px;
background-color:#e0b2b2;
}
* html .connexion{
	width:93px;
	height:26px;
	border:none;
color:#FFFFFF;
font-weight:bold;
padding-left:15px;
margin-bottom:2px;
  	background: url("../skin/connexion.jpg") no-repeat;
float:right;
margin-right:10px;
}
div.menu>form>div>div>span>p>input{
	background-color:#e0b2b2;
	border:none;
	padding:5px;
	margin:5px;
}


#accueil {
  	background: url("../skin/vesselsFond.png") no-repeat;
/*  background-color:#3366FF;*/
  	height:100%;
  	width:100%;
}
#accueil p{
  	padding:10px;
  	margin:auto;
}
/*.ok {
  	border:none;
  	height:28px;
  	width:36px;
  	background: url("../skin/ok2.gif") no-repeat 0 0;
}
.ok:hover {
  	background: url("../skin/ok2.gif") no-repeat 0 -25px;
}*/
.envoi {
  	border:none;
  	height:25px;
  	width:88px;
  	background: url("../skin/envoi3.gif") no-repeat 0 0;
}
.envoi:hover {
  	background: url("../skin/envoi3.gif") no-repeat 0 -25px;
}
/******** Affichage des miniatures *****************/
#pied{
clear: both;
background-color:#FFFFFF;
}

/******** Affichage des miniatures *****************/

#vignette{
	height:105px;
	width:100%;
	background-color:#5e89c1;
}

.vignettes {
/*display:inline;*/
	width:20%;
	height:90px;
	min-height:90px;
   	float:left;
	padding:2px;
	margin:2px;
}	

.photoMiniature {
/*	display:inline ;
  	border:#33CCCC;
padding:1px;
margin:1px;
	width:150px;
	height:200px;
	    cursor : pointer;
*/
	height:100%;
}

.pair{
	background-color:#cccccc;
   	color: #333333 ;
	border: 1px solid #999999 ;
padding:10px;
	}

.impair{
	background-color:#FFFFFF;
   	color: #333333 ;
	border: 1px solid #999999;
padding:20px;
	}
	
/*.imgMiniature
{ 
   	background-color:#33CCFF;
	float: left;
	width:150px;
	height:100px;
	border: 1px solid red;
}
*/
/***************************************************/
.spacer { 
  clear: both;
  height: 10px;
}
.clearer { 
  clear: both;
  height: 0px;
}

/***************************************************/
/*OK POUR FIREFOX*/
#zoom {
   position : absolute;
    top : 240px;
    left : 200px;
    width : 670px;
    height : 630px;
    min-height : 630px;
    font-size : 20px;
    font-weight : bold;
    text-align : center;
    margin : 0px 0px 0px 0px;
    visibility : hidden;
    color : #dc0000;/*rouge*/
    /*background-image : url('../skin/fondApercu.jpg');
    background-repeat : no-repeat;*/
	background-color:#FFFFFF;

}
#zoom>img {
    cursor : pointer;
    width : 70% !important;
    border-color:#330066;    
    padding:2px;
    margin:2px;
	margin-top:50px;
}
.caption img{
	width:100px;
	height:100px;
}
.caption{
	float:left;
}

/***************************************************/
.tNavire{
	font-size:10px;
	border:1px solid #333;
	border-bottom:none;
	margin:0;
	padding:0;
}
.tNavire caption{width:100%;text-align:left;font-size:12px;font-weight:bold;margin:0;padding:0;}
.tNavire th{
	background-color:#b74c4c;
	color:#fff;
	font-size:12px;
	border-bottom:1px solid #333;
}
.tNavire td{border-bottom:1px solid #333;}
.tNavire tr.pairRX td{background-color:#fff;}
.tNavire tr.impairRX td{background-color:#f0f0ff;}

#FlagFR,#FlagUK{
	width:48px;
	height:24px;
	float:right;
	margin-left:4px;
	cursor:pointer;
}
.FlagFR1{	background:url('../images/Flag_FR.jpg') no-repeat bottom left;}
#FlagFR:hover,.FlagFR2{background:url('../images/Flag_FR.jpg') no-repeat top left;}
.FlagUK1{	background:url('../images/Flag_UK.jpg') no-repeat bottom left;}
#FlagUK:hover,.FlagUK2{background:url('../images/Flag_UK.jpg') no-repeat top left;}
#TxtFR,#TxtUK{display:none;}

#xiti-logo{text-align:center;}