@charset "utf-8";
/* CSS Document */
/* ---------------------------------------------------------------------- STYLES COMMUNS */
*{
	margin:0; 
	padding:0;
}
body {
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	letter-spacing:1px;
	background: #8395a5 url(bgBody.gif) repeat-x top        ;
}

a {
	text-decoration:none;
}


a:hover {
	text-decoration:none;
}
a img {
	border:none;
}
ul, li {
	list-style-type:none;
}
p{}

span.tooltip-erreur {
  display: inline-block;
  background: #CE2828;
  color: #fff;
  padding: 5px;
  width: 200px;
  position: absolute;
  top: 20px;
  left: 0px;
}

span.tooltip-erreurCB {
  display: inline-block;
  background: #CE2828;
  color: #fff;
  padding: 5px;
  width: 200px;
  position: relative;
  top: 6px;
}

span.tooltip-erreur:before, span.tooltip-erreurCB:before {
  content: "";
  position: absolute;
  top: -5px;
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 5px 5px 5px;
  border-color: transparent transparent #CE2828 transparent;
}

#conteneur{width:1300px;margin:0 auto;/*border:1px dashed #000;*/}

/* ---------------------------------------------------------------------- ELEMENTS */
#btValider{
		background:url(bgFondBouton.gif) repeat-x;
		height:29px;
		border:1px solid #185063;
		color:#fff;
		font-size:14px;
		font-weight:bold;
		font-family:Arial, Helvetica, sans-serif;
		cursor:pointer;
}



/* ---------------------------------------------------------------------- HEADER */
#header{width:1184px;margin:0 auto}
	#logo{margin-left:30px;}


/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* --- Extranet - Fixer tableau ----*/
.table-body{
overflow-x: hidden;
overflow-y: scroll;
}
#TabPlanning{
margin-top:0;
} 

/* ------------------------------------------------------------------------------------------------------------------------------    PAGE IDENTIFICATION   */

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
#formIdentification{
	width:422px;
	height:236px;
	background:url(bgIdentification.gif) no-repeat;
	margin:72px auto 0px auto;}

#formIdentification h1{
	color:#fff;
	font-size:14px;	
	margin:0px 0px 0px 40px;
	padding:20px 0px 30px 0px;
	}

#formIdentification div{
	margin:10px 0px;	
	}
	
#formIdentification h2{ 
	width:140px; 
	margin:0px 10px 0px 30px;
	font-size:12px;
	float:left;
	text-align:right; 
	padding-top:3px;
	color:#4698b4}

#login, #password {width:140px;	}

#divBtValiderIdentification{
	width:324px;	
	text-align:right;
	}



/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------------------- CONTENU TABLEAU PLANNING  */

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */



/* --------------------------------------------------------------------------------------------------------------------------------------------  MENU */
#menu{}
	#menuGauche{ 
		width:12px;
		height:50px;
		background:url(ArrondisMenu.png) left no-repeat;
		float:left;
	}
	
	/* MENU CHOIX BASE */
	#menuMilieu1, #menuMilieu4, #menuMilieu10 { 
		margin: 0;
		padding: 0;
		width: 261px;
		height:50px;
		background:url(bgMenu.gif) repeat-x;
		float:left;
	}
	
		#titreSelect{
			font-size:14px;
			font-weight:bold;
			color:#fff;
			padding-top:17px;
			float:left;
		}
		#select1, #select4, #select10 {
			background:url(select1.gif) no-repeat 0px 2px; width:200px;height:25px;
			margin-top:13px;
			margin-left:5px;
			float:left;
			cursor:pointer;
		}
		#select1 a, #select4 a, #select10 a {
			color:#4698b4;
		}
		#select1 h3, #select4 h3, #select10 h3{	
			font-size:14px;
			font-weight:bold;
			padding:5px 0px 0px 5px;
		}
		#select1:hover, #select4:hover, #select10:hover {
			background:url(select1.gif) no-repeat 0px 2px; 

		}
		#divListeBase, #divListeModele, #divListeRegion {
			width:197px;
			background:#fff;
			clear:left;
			z-index:1000;
			margin-left:6px;
			display:none;
			position:relative;
			top:-5px;	
		}
		#ListeBase, #ListeModele, #ListeRegion { border-bottom:1px solid #4698b4;border-left:1px solid #4698b4;border-right:1px solid #4698b4;}
		#ListeBase a, #ListeModele a, #ListeRegion a{color:#4698b4;}
		#ListeBase li a, #ListeModele li a, #ListeRegion li a{display:block;padding:5px; text-align:left; font-weight:bold ; font-size:12px}
		#ListeBase li a:hover, #ListeModele li a:hover, #ListeRegion li a:hover {color:#FFFFFF; background-color:#4698b4;}
	/* MENU CHOIX DATE */	
	#menuMilieu2{	
		width:320px;
		height:50px;
		background:url(bgMenu.gif) repeat-x;
		float:left;
	
	}
		#navigDate{margin:15px 0px 0px 10px;}
			#titreDate{ float:left;color:#fff; width:160px; text-align:center;  margin:-2px auto 0px auto;}
			#titreDate a{ color:#fff}
			#titreDate a:hover{ color:#fff}
			#titreDate h3{font-size:14px; width:180px;margin:-5px 0px 0px 0px;}
			#divListeMois{ 
				background:#fff;
				clear:both;
				margin:0;
				padding:0;
				z-index:1000;
				display:none;
				position:absolute;
				top:90px;
			}
			#calendrier { cursor:pointer }
			#EltListeMoisEncours{margin-right:10px;width:200px}
			#ListeMois {border-bottom:1px solid #4698b4;border-left:1px solid #4698b4;border-right:1px solid #4698b4;}
				#ListeMois a{color:#4698b4;}
				#ListeMois li a{display:block;padding:5px; text-align:left; font-weight:bold ; font-size:12px }
				#ListeMois li a:hover{color:#FFFFFF; background-color:#4698b4;}
			#next{margin-left:30px}
	
	#menuMilieu3{
		float:left;
		width:159px;
		height:50px;
		background:url(bgMenu.gif) repeat-x;
	}
		#menuMilieu3 form{margin:14px 0px 0px 0px}


		.inputRecherche{
			width:100px;
			margin-left:10px;
			padding:0px 0px 5px 0px;
			border:none;
			font-size:14px;
			border-radius:5px;
		}
		.btValidRecherche{
			margin-top:-1px;
			background:url(btValidRecherche.gif) no-repeat;
			border:none;
			width:42px;
			height:25px;
			cursor:pointer;
		}		
		
	#menuDroit{
		width:12px;
		height:50px;
		background:url(ArrondisMenu.png) right no-repeat;
		float:left;
	}
	



#contenu{ clear:both ; position:relative; z-index:1; }


/* -------------------------------------------------------------------------------------------------------------------------------------------- TABLEAU PLANNING */



#TabPlanning{ text-align:center; font-size:9px;}

#TabPlanning a{color:#fff; font-size:10px}

#hautTableauGauche{ background:url(ArrondisTableau.png) no-repeat 0px 0px; width:11px}
#hautTableauDroit{background:url(ArrondisTableau.png) -12px 0px        ;  width:11px}
#hautTableauMilieu{ background:url(bgEnteteTableauHaut.png) repeat-x}

/*#basTableauGauche{ no-repeat 0px 0px; width:11px}
#basTableauDroit{background:url(ArrondisTableauBas.gif) 13px 0px        ;  width:11px}
#basTableauMilieu{ background:url(basTableau.gif) repeat-x; height:70px}*/

#ombreGauche{background:url(ombreGauche.png) repeat-y                ;  width:11px}
.ombreDroit{background:url(ombreDroit.png) repeat-y -7px 0px        ;  width:11px}

#TabCellLibBateau, #TabCellLibJourDep, #TabCellLibJour,#TabCellLibDim{ background:url(bgEnTeteTableau.gif) repeat-x ; height:30px;color:#fff; border-bottom:#666 1px solid }

#TabCellLibDim{ color: #110B68 ; }
#TabCellBateau,#TabCellJourDep,#TabCellVide,#TabCellLien{ background:#f1f1f1;border-bottom:#666 1px solid ;border-right:#666 1px solid }
#TabCellBateau{text-align:center;}

#TabCellFin09,#TabCellFin17{border-right:#666 1px solid}

#TabCellDeb17,#TabCellFin09,#TabCellDeb14,#TabCellDeb16,#TabCellFin17,#TabCellDeb09,#TabCell0917{border-bottom:#666 1px solid; background:#F1F1F1 }


/* Cellules Heures Dbt et Fin */

#divDeb,#divMil,#divFin {height:30px; }
#divDeb{  }
#divMil{}
#divFin{}

/*GESTION DES COULEURS DE REMPLISSAGE*/


/* Aller-Retour */
#TabCellAllerRetourS{ background:#F1F1F1 ; border-bottom:1px solid #666;}
#TabCellAllerRetourO{ background:#F1F1F1 ; border-bottom:1px solid #666;}
#TabCellAllerRetourR{ background:#F1F1F1 ;border-bottom:1px solid #666; }
#TabCellAllerRetourF{ background:#F1F1F1 ;  border-bottom:1px solid #666;}


/* Aller-Simple */
#TabCellAllerSimpleS{  background:#F1F1F1 ; border-bottom:1px solid #666;}
#TabCellAllerSimpleO{ background:#F1F1F1 ; border-bottom:1px solid #666;}
#TabCellAllerSimpleR{ background:#F1F1F1 ;border-bottom:1px solid #666;}
#TabCellAllerSimpleF{ background:#F1F1F1 ;border-bottom:1px solid #666;}

#TabCellBateauA{ background:url(bgTabCellBateauA.gif) repeat-x;border-bottom:#666 1px solid ;border-right:#666 1px solid }

/*image ajouter*/
#divImg{
	height:30px;	
}
#ajoutPeriode{ margin-top:10px; }


#tooltip2{
	font-style:normal;
	background:#99c6da;
	padding :5px ;
	border:1px solid #F1F1F1;
	display:block;
}
#tooltip{
	position:absolute;
	padding:0px;
	width:100px;
	color:#666;
	z-index:2000;
	display:none;
	}

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------------------------------------------------------------- CONTENU AJOUT CROISIERE  */

/* ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------------- Menu Choix des dates ---------- */
#contenuMenu{color:#fff}

#contenuMenu h2{
	float:left;
	color:#fff;
	font-size:12px;
	padding:0px 0px 0px 30px;
}
#contenuMenu form{	}	

#divBtRadio{ margin-left:30px; }

#divBtRadio input{ }

/*.radioUnselected{width:20px;height:20px; background:url(radio.png) no-repeat 0px 0px;}



.radioSelected{
	width:20px;height:20px; background:url(radio.png) no-repeat 0px -50px;
}

.radioUnselected input, .radioSelected input{  
	filter : alpha(opacity=0);
    -moz-opacity : 0;
    opacity : 0;  
	width:20px;
	height:20px;
}*/
#txtRadio{font-size:10px;padding:7px 0px}
span.checkbox {
	width: 19px;
	height: 25px;
	padding: 0px 5px 0px 0px;
	background: url(checkbox.png) no-repeat;
	display: block;
	clear: left;
	float: left;
}
span.radio {
	width: 19px;
	height: 25px;
	padding: 0px 5px 0px 0px;
	background: url(radio.png) no-repeat;
	display: block;
	clear: left;
	float: left;
}
span.select {
	position: absolute;
	height: 21px;
	padding: 0px 24px 0px 8px;
	color: #fff;
	font: 12px arial,sans-serif;
	font-weight:bold;
	background: url(select.gif) no-repeat right top;
	overflow: hidden;
}
#tjsChecked{ background:url(checkbox.png) no-repeat 0px -50px ; width:20px ; height:20px}
#tjsChecked input {	filter : alpha(opacity=0); -moz-opacity : 0;  opacity : 0; }

#customCheck {width:20px ; height:20px ; background:url(checkbox.png) no-repeat 0px 0px ;}
#customCheck input{ width:20px ; height:20px ; filter : alpha(opacity=0); -moz-opacity : 0;  opacity : 0; }
#customCheck.checked{ background:url(checkbox.png) no-repeat 0px -50px ;}
/* --------------------------------------------------------------------------------- Menu TABS ---------- */
#menu1,#menu2 { height:42px; float:left; margin-left:0px }
	

/* TABS unselected */
.arrondiGaucheTab_Unselected{ background:url(ArrondisTableau.png) no-repeat 1px 1px; width:12px; height:42px;float:left; cursor:pointer}
.titreMenuTab_Unselected{ background:url(bgTabInactive2.png) repeat-x ; height:42px; float:left; padding: 20px 10px 0px 10px; cursor:pointer}
.arrondiDroitTab_Unselected{background:url(ArrondisTableau.png) no-repeat -12px 1px; width:12px; height:42px;float:left; cursor:pointer}

/* TABS hover */
.arrondiGaucheTab_Hover{ background:url(ArrondisTabHover.png) no-repeat 1px 1px; width:12px; height:42px;float:left; cursor:pointer}
.titreMenuTab_Hover{ background:url(bgTabhover.png) repeat-x ; height:42px; float:left; padding: 20px 10px 0px 10px; cursor:pointer}
.arrondiDroitTab_Hover{background:url(ArrondisTabHover.png) no-repeat -12px 1px; width:12px; height:42px;float:left; cursor:pointer }



/* TABS selected */
.arrondiGaucheTab_Selected{ background:url(ArrondisTabSelected.png) no-repeat 1px 1px; width:12px; height:42px;float:left; cursor:pointer}
.titreMenuTab_Selected{ background:url(bgTabSelected.png) repeat-x;height:42px; float:left; padding: 20px 10px 0px 10px; cursor:pointer}
.arrondiDroitTab_Selected{background:url(ArrondisTabSelected.png) no-repeat -12px 1px; width:12px; height:42px;float:left; cursor:pointer }


.titreMenuTab_Selected a { color:#333 ; }


#contenuTab1 table, #contenuTab2 table{color:#666 }

#contenuTabs {clear:both; position:relative; }

#contenuTab1{position:absolute;}

#contenuTab2 {position:absolute;display:none;}


/* Gestion du Texte */
.aUnselected{color:#fff}
.aSelected { color:#666} 

/* --------------------------------------------------------------------------------- Tableaux du Contenu ---------- */


/*Tableau "commande" */
.titreCroisiere{ font-size:12px; font-weight:bold}

.tdContenu, .tdPrix, #PrixPlein, #tdContenu, #PrixCarte, #Tarif, #TarifPublic, #tdContenuTotal,#PrixVelos, #PrixAnimaux,#tdContenuAllerSimple{ background-color:#f1f1f1; border-bottom:1px solid #666;padding:4px 0px;height:30px;color:#666}
	
#tdContenu{}

#tdContenuTotal,#Tarif, #TarifPublic{
	color:#fff;
	background-color:#4698b4;
	font-size:16px;
	font-weight:bold;
	text-align:right;
	padding:0px 5px;
}


#tdContenuTotal{ border-right:2px dashed #F1F1F1; padding-right:30px;text-align:left;}
.tdPrix, #PrixCarte,#PrixVelos, #PrixAnimaux,#PrixPlein,#Remise,#Commission,#CommissionAff,#tdContenuAllerSimple{text-align:right;padding:0px 5px; font-size:12px}	

#tdContenuCoordonnees{ background-color:#F1F1F1;text-align:left}
#tdEspaceVide{ background-color:#F1F1F1}

	
/*datepicker*/
/* Main Style Sheet for jQuery UI date picker */
#ui-datepicker-div, .ui-datepicker-div, .ui-datepicker-inline {
	margin: 0; padding: 0; border: 0; outline: 0; line-height: 0.8; text-decoration: none; font-size: 100%; list-style: none;
	font-family: Trebuchet MS, Arial, sans-serif;
	background-color: #3e3d3d;
	font-size: 1em;
	border: 2px solid #1E1A6A;
	width: 15.9em;
	padding: 2.3em .3em .3em .3em;
	position: relative;
}
#ui-datepicker-div,
.ui-datepicker-div {
	z-index: 9999; /*must have*/
	display: none;
	background: #fff;
	margin:34px 0px 0px 0px;
	padding:5px;
}
.ui-datepicker-inline {
	float: left;
	display: block;	
}
.ui-datepicker-control {
	display: none;
}
.ui-datepicker-current {
	display: none;
}
.ui-datepicker-next, .ui-datepicker-prev {
	position: absolute;
	left: 10px;
	top: 10px;
}

.ui-datepicker-next {
	left: 210px;
}
.ui-datepicker-next:hover, .ui-datepicker-prev:hover {
	
}
.ui-datepicker-next a,
.ui-datepicker-next label,
.ui-datepicker-prev label,
.ui-datepicker-prev a {
	width: 1.3em;
	height: 1.4em;
	display: block;
	font-size: 2em;font-weight:bold;
	cursor: pointer;
	color:#fff
}
.ui-datepicker-next label,
.ui-datepicker-next a {

}
.ui-datepicker-prev a:hover {

}
.ui-datepicker-next a:hover {

}
.ui-datepicker-prev a:active {

}
.ui-datepicker-next a:active {

}
.ui-datepicker-header{
	font-size:1.4em;font-weight:bold;margin:0 auto;width:100%;text-align:center;
	height:20px;background:#1E1A6A;color:#FFF;padding-top:10px}
	
.ui-datepicker-header select {
	border: 1px solid #777777;
	color: #cfcfcf;
	background: #444444;
	font-size: 1em;
	line-height: 1.4em;
	position: absolute;
	top: .5em;
	margin: 0 !important;
	
}
.ui-datepicker-header select.ui-datepicker-new-month {
width: 7em;
left: 2.2em;
}
.ui-datepicker-header select.ui-datepicker-new-year {
width: 5em;
left: 9.4em;
}
table.ui-datepicker {
	width: 15.5em;
	text-align: right;
}
table.ui-datepicker td.ui-datepicker-unselectable
{
	padding: .1em .3em .1em 0;
	border: 1px solid transparent;
}
table.ui-datepicker td a {
	padding: 0.8em;
	display: block;
	color: #333;
	background: #fff ;
	cursor: pointer;
	border: 1px solid #4698B4;
	background: #eee ;
	margin:1px
}
table.ui-datepicker td a:hover {
	border: 1px solid #4698B4;
	color: #ffffff;
	background: #4698B4 ;
}
table.ui-datepicker td a:active {
	border: 1px solid #841515;
	color: #ffffff;
	background: #841515 ;
}
table.ui-datepicker .ui-datepicker-title-row td {
	padding: 5px 0px 1px 0px;
	text-align: center;
	font-size: .9em;
	color: #cfcfcf;
	text-transform: uppercase;
}

table.ui-datepicker .ui-datepicker-title-row td a {
	color: #4698B4 ;background:none;border:none;font-weight:bold
}

table.ui-datepicker td.ui-datepicker-current-day a,
table.ui-datepicker td.selected a
{
	color: #eee;
	background: #666 ;
}

table.ui-datepicker td.ui-datepicker-today a
{
	color: white;
	background: #4698B4;
}
/*
Generic ThemeRoller Classes
>> Make your jQuery Components ThemeRoller-Compatible!
*/

/*component global class*/
.ui-component {
	/*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
	font-family: Trebuchet MS, Arial, sans-serif;
	font-size: 1.1em;
}
/*component content styles*/
.ui-component-content {
	border: 1px solid #777777;
	background: #3e3d3d;
	color: #cfcfcf;
}
.ui-component-content a {
	color: #cfcfcf;
	text-decoration: underline;
}
/*component states*/
.ui-default-state {
	border: 1px solid #777777;
	background: #444444 ;
	font-weight: bold;
	color: #cfcfcf !important;
}
.ui-default-state a {
	color: #cfcfcf;
}
.ui-default-state:hover, .ui-hover-state {
	border: 1px solid #444444;
	background: #4698B4 ;
	font-weight: bold;
	color: #ffffff !important;
}
.ui-hover-state a {
	color: #ffffff;
}
.ui-default-state:active, .ui-active-state {
	border: 1px solid #841515;
	background: #841515 ;
	font-weight: bold;
	color: #ffffff !important;
	outline: none;
}
.ui-active-state a {
	color: #ffffff;
	outline: none;
}
/*hidden elements*/
.ui-hidden {
	display: none;/* for accessible hiding: position: absolute; left: -99999999px*/
}
.ui-accessible-hidden {
	 position: absolute; left: -99999999px;
}
/*reset styles*/
.ui-reset {
	/*resets*/margin: 0; padding: 0; border: 0; outline: 0; line-height: 1.3; text-decoration: none; font-size: 100%; list-style: none;
}
/*clearfix class*/
.ui-clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.ui-clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .ui-clearfix {height: 1%;}
.ui-clearfix {display: block;}
/* End hide from IE-mac */

/* Note: for resizable styles, use the styles listed above in the dialog section */

.vehicleDetail > td:first-child
{
	border-left: solid 1px black;
	border-bottom: solid 1px black;
}

.vehicleDetail > td:last-child 
{
	border-right: solid 1px black;
	border-bottom: solid 1px black;
}

.vehicleDetail > td:last-child > table > tbody > tr > td:last-child
{
	color: White;
}

.showWhenSelected
{	
	visibility: hidden;
}

#datePicker{}
.ui-datepicker-trigger{margin:-6px 8px 0px 5px;padding:0;float:left;cursor:pointer}

#titreDate a.dateFauxInput{
	color: #110B68;
    background: #fff;
    font-weight: normal;
    letter-spacing: normal;
    padding: 0px 4px;
    border: 1px solid #110B68;
}

#debutMoisEncours{
	margin-top: 3px;
}

#debutMoisEnCoursInput{
	width:90px;
}

#infoEntete {
  background: #F08f0c;
  color: #fff;
  border-radius: 5px;
  padding: 0px 10px 20px 10px;
  margin: 0px 14px 20px;
}

#infoCorps {
  background: #F08f0c;
  color: #fff;
  border-radius: 5px;
  padding: 0px 10px 10px 10px;
}