/***********************************************/
/* Styles.css                                  */
/* Use with template Halo_rightNav.html        */
/***********************************************/

/***********************************************/
/* HTML tag styles                             */
/***********************************************/

body{
	font-family: Arial, sans-serif;
	color: #FFFFFF;
	line-height: normal;
	margin: 2px;
	background-color: #003366;
	border-color: #CCCC33;
	padding-left: 0px;
	}
	
/* 
	scrollbar-face-color : #yellow;
scrollbar-highlight-color : #blue;
scrollbar-3dlight-color:#white;
scrollbar-shadow-color:#black;
scrollbar-darkshadow-color:#red;
scrollbar-track-color:#pink;

*/

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{color: #FFCC33;text-decoration: none;}
a:hover{text-decoration: underline;color: #FFCC33;}

/************** header tag styles **************/

h1{
 font: bold 24px Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;}

h2{
 font: bold 100% Arial,sans-serif;
 color: #006699;
 margin: 0px;
 padding: 0px;}

h3{
 font: bold 100% Arial,sans-serif;
 color: #334d55;
 margin: 0px;
 padding: 0px;}

h4{
 font: 100% Arial,sans-serif;
 color: #333333;
 margin: 0px;
 padding: 0px;}

h5{
	font: 12px Arial,sans-serif;
	color: #99CCFF;
	padding: 0px;
	margin-bottom: 1px;}

/*************** list tag styles ***************/

ul{list-style-type: square;}
ul ul{list-style-type: disc;}
ul ul ul{list-style-type: none;}

/********* form and related tag styles *********/

form {
	margin: 0;
	padding: 0;}

label{
 font: bold 1em Arial,sans-serif;
 color: #334d55;}
				
input{
font-family: Arial,sans-serif;}

/***********************************************/
/* Layout Divs                                 */
/***********************************************/
#pagecell1{
	position:absolute;
	top: 109px;
	left: 15px;
	right: 2%;
	width:95.6%;
	background-color: #ffffff;
	visibility: inherit;}

#tl {
	position:absolute;
	top: -1px;
	left: -1px;
	margin: 0px;
	padding: 0px;
	z-index: 100;}

#tr {
	position:absolute;
	top: -1px;
	right: -1px;
	margin: 0px;
	padding: 0px;
	z-index: 100;}

#masthead{
	position: absolute;
	top: 1px;
	left: -15px;
	right: 2%;
	width:100%;}

#pageNav{
	float: right;
	width:178px;
	padding: 0px;
	background-color: #cccccc;
	border-left: 0px solid #cccccc;
	border-bottom: 0px solid #cccccc;
	font: small Verdana,sans-serif;}

/***Padding : marge interne Haut Droite Bas Gauche */
/***Margin : espace entre les balises Haut Droite Bas Gauche */
/* Bordure de droite */
#content{
	padding: 0px 0px 10px 10px;
	margin:0px 0px 0px 0px;
	border-right: 1px solid #ccd2d2;
	color: #FFFFFF;}

/***********************************************/
/* Component Divs                              */
/***********************************************/
#siteName{
	margin: 0px;
	color: #FF9900;
	font-weight: bolder;
	text-decoration: none;
	letter-spacing: 5px;
	height: 15px;
	font-size: 30px;
	z-index: 1;
	position: absolute;
	padding: 40px 0px 8px 120px;
	left: 149px;
	top: 101px;
}

/************** utility styles *****************/
#utility{
	font: 75% Verdana,sans-serif;
	position: absolute;
	top: 16px;
	right: 0px;
	color: #919999;
	left: 522px;}

#utility a{
	color: #ffffff;}

#utility a:hover{
	text-decoration: underline;}

/************** pageName styles ****************/
#pageName{
	padding: 0px 0px 14px 10px;
	margin: 0px;
	border-bottom:0px solid #ccd2d2;
	border-top-color: #ECE9D8;}

#pageName h2{
	font: bold 175% Arial,sans-serif;
	color: #000000;
	margin:0px;
	padding: 0px;}

#pageName img{
	position: absolute;
	top: 0px;
	right: 0px;
	padding: 0px;
	margin: 0px;}

/***********************************/
/************* MENU ****************/
/***********************************/
#scrollCalque{
	position:absolute;
	top:80px;
	left:68px;
	right:50px;
	width:10px;
	visibility: visible;
	z-index: +3;}
	
.StyleCalque{
	color: #3366FF;
	font-size: 20px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	font-style: oblique;
	font-weight: bolder;
}
	
.TabCommon {FONT: 12px Arial; COLOR: #6D6D6D; PADDING: 3px; FONT-WEIGHT: bold; TEXT-ALIGN: center; HEIGHT: 5px; WIDTH: 80px;} 
.TabContent {PADDING: 5px;} 
.TabContentBottom {PADDING: 5px; BORDER-BOTTOM: 2px outset #99ccff;} 
.TabOff {
	CURSOR: hand;
	BACKGROUND-COLOR: #004080;
	BORDER-LEFT: 1px solid #BBBBBB;
	color: #FFCC00;}
 
.TabOn {
	CURSOR: default;
	BORDER-TOP: 2px outset #D1D1D1;
	COLOR: #FFCC00;} 
	
.TabBorderBottom{BORDER-BOTTOM: 2px inset #D1D1D1;} 
.TabActiveBorderLeftRight{BORDER-RIGHT: 2px outset #D1D1D1; BORDER-LEFT: 2px outset #D1D1D1;} 
.TabActiveBackground {BACKGROUND-COLOR: #003366;} 

#onglet a:hover{
	text-decoration: none;}
#pano{
	position: absolute;
	top:0px;
	left:0px;
	z-index:-2;
	height:100px;
	border-color: #FFFFFF;}
	
#Carte{
	position: absolute;
	top:-20px;
	left:84%;
	z-index:-1;
	border-color: #FFFFFF;}

#globalNav{
	position: relative;
	height: 22px;
	color: #0033CC;
	background-image:   url('gif/glbnav_background.gif');
	top: 5px;
	left: 0px;
	text-align:left;
	vertical-align: middle; margin-left:10px; margin-right:10px; margin-top:15px; margin-bottom:0px; padding-left:15px; padding-right:0px; padding-top:0px; padding-bottom:0px}

#globalNav img{
	position: absolute;
	height: 22px;
	border-bottom-color: #FFFFFF;
	padding-right: 20px;
	visibility: visible;}

#gnl {
	position: absolute;
	top: 0px;
	left:0px;
	width: 5px;
	height: 22px;}

#gnr {
	position: absolute;
	top: 0px;
	right:0px;
	/*permet de positioner le claque complètement à droite: on donne le % à partir de la gauche!!*/
	left: 100%;
	width: 5px;
	height: 22px;}

#globalLink{
	position: absolute;
	left: 397px;
	z-index: 200;
	width: 300px;
	margin-right: 100%;
	color:#0033CC;}
	
a.glink, a.glink:visited{
	font-size: small;
	color: #0033CC;
	font-weight: bold;
	margin: 0px;
	padding: 2px 5px 4px 5px;
	border-right: 1px solid #8FB8BC;}

a.glink:hover{
	text-decoration: none;
	border-top-color: #6666FF;
	background-color: #6666FF;
	color: #FFFFFF;}

/* Lien actif (perd la description si click de souris !!)
a.glink:active{
	text-decoration: none;
	border-top-color: #6666FF;
	background-color: #6666FF;
	color: #FFFFFF;*/

.skipLinks {display: none;}

#FR{
	position: absolute;
	top: 0px;
	right:0;
	left: 800px;
	height: 22px;}	
#EN{
	position: absolute;
	top: 0px;
	right:0px;
	left: 841px;
	height: 22px;}
#DE{
	position: absolute;
	top: 0px;
	right:0px;
	left: 882px;
	height: 22px;}
#ES{
	position: absolute;
	top: 0px;
	right:0px;
	left: 923px;
	height: 22px;}
#IT{
	position: absolute;
	top: 0px;
	right:0px;
	left: 964px;
	height: 22px;}

/************ subglobalNav styles **************/

.subglobalNav{
	position: absolute;
	top: 43px;
	left: 0px;
	width: 640px;
	height: 20px;
	padding: 0px 0px 0px 10px;
	color: #ffffff;
	visibility: hidden;}

.subglobalNav a:link, .subglobalNav a:visited {
	font-size: 80%;
	color: #ffffff;}

.subglobalNav a:hover{
	color: #cccccc;}

/*************** search styles *****************/

#search{
	position: absolute;
	top: 12px;
	right: 10px;
	z-index: 101;
	left: 713px;}

#search input{
  font-size: 70%;
  margin: 0px  0px 0px 10px; }
 
#search a:link, #search a:visited {
	font-size: 80%;
	font-weight: bold;}

#search a:hover{
	margin: 0px;}

/************* breadCrumb styles ***************/

#breadCrumb{
	padding: 5px 0px 5px 10px;
	font: small Verdana,sans-serif;
	color: #0033CC;}

#breadCrumb a{
	color: #AAAAAA;}

#breadCrumb a:hover{
	color: #0033CC;
	text-decoration: none;}

/************** feature styles *****************/

.feature{
	padding: 0px 0px 10px 10px;
	font-size: 80%;
	height: 200px;
	height: 200px;
	color: #0033CC;}

html>body .feature {
	height: auto;
	font-size: 14px;
	top: 40px;
	color: #6699FF;
}

.feature h3{
	font: bold 200% Arial,sans-serif;
	color: #CCCCCC;
	padding: 30px 0px 5px 0px;
	text-align: center;
}

.feature h4{
	font: bold 120% Arial,sans-serif;
	color: #FFCC00;
	text-align: left;}
	
.feature p{
color: #FFFFFF;
font-size: 15px;}

.TdInfo{
	font-size: 12px;
	color: #FFFFFF;}

.feature pA{
	color: #0033CC;
	font-size: 50px;
	font-style: italic;
	background-color: #00CC99;}
	
.style4 {
	font-size: 12px;
	color: #6666CC;
}
.style5 {
	color: #FF9900;
	font-weight: bold;
}
/****************************************/
/* Définition de la position des photos */
/****************************************/
.feature img{
	float: left;
	padding: 0px 10px 0px 0px;
	border-width: 3px;
	border-color: #FFFFFF;
}
.feature img.milieu{
	float: left;
	padding-left: 100px;}
.feature img.milieu-plus{
	float: left;
	padding-left: 200px;}
.feature img.milieu-centre{
	float: left;
	padding-left: 50%;}
#ph1{
	position:absolute;
	z-index:0;
	border-width: 0px;
	background-color: #000000;
	visibility: visible;
	left: 100px;
	top: 45px;
}
#ph2{
	position:absolute;
	top:18px;
	left:538px;
	z-index:-1;
	width: 1;
	visibility: visible;
}
#ph3{
	position:absolute;
	top:701px;
	z-index:2;
	height: 382px;
	left: 6px;
}
#ph4{
	position:absolute;
	top:1034px;
	z-index:2;
	left: 536px;
}
#ph5{
	position:absolute;
	top:1264px;
	left:565px;
	z-index:3;
	height: 582px;
}
#ph6{
	position:absolute;
	top:1800px;
	left:100px;
	z-index:1;}
#ph7{
	position:absolute;
	top:2203px;
	left:462px;
	z-index:1;}	
#ph8{
	position:absolute;
	top:1798px;
	left:66px;
	z-index:1;
	background-color: #FFFFFF;
	height: 500px;
}
#ph8Txt{
	position:absolute;
	top:2260px;
	left:101px;
	z-index:1;
	visibility: visible;
}
#ph9{
	position:absolute;
	top:2082px;
	left:395px;
	z-index:1;
	width: 505px;
	background-color: #000000;
	height: 430px;
	visibility: visible;
}
#ph10{
	position:absolute;
	top:2544px;
	left:32px;
	z-index:-1;
	width: 519px;
	height: 398px;
	overflow: visible;
	background-color: #000000;
	visibility: visible;
}
#ph10Txt{
	position:absolute;
	top:2462px;
	left:395px;
	z-index:1;
	width: 505px;
	background-color: #000000;
	height: 51px;
	vertical-align: middle;
}
#ph11{
	position:absolute;
	top:459px;
	left:540px;
	z-index:1;
	width: 1px;
	height: 0px;
	overflow: visible;
	background-color: #000000;
	visibility: visible;
}
#ph12{
	position:absolute;
	top:1759px;
	left:416px;
	z-index:3;
	width: 1px;
	height: 0px;
	overflow: visible;
	background-color: #000000;
	visibility: visible;
}
#ph13{
	position:absolute;
	top:1475px;
	left:87px;
	z-index:0;
	width: 1px;
	height: 0px;
	overflow: visible;
	background-color: #000000;
	visibility: visible;
}
#ph14{
	position:absolute;
	top:1103px;
	left:27px;
	z-index:2;
	width: 1px;
	height: 0px;
	overflow: visible;
	background-color: #000000;
	visibility: visible;
}
#Ponton{
	position:absolute;
	top:841px;
	left:566px;
	z-index:1;}
#Plan{
	position:absolute;
	top:450px;
	left:10px;
	z-index:1;}
#Mapy{
	position:absolute;
	top:750px;
	left:600px;
	z-index:1;}
#Stat{
	position:absolute;
	top:1800px;
	left:800px;
	z-index:2;}
/*************** story styles ******************/

.story {
	padding: 10px 0px 0px 10px;
	font-size: 80%;}

.story h3{
	font: bold 125% Arial,sans-serif;
	color: #FFCC00;}

.story p {
	padding: 0px 0px 10px 0px;}

.story a.capsule{
	font: bold 1em Arial,sans-serif;
	color: #005FA9;
	display:block;
	padding-bottom: 5px;}

.story a.capsule:hover{
	text-decoration: underline;}

td.storyLeft{
	padding-right: 12px;}

/************** siteInfo styles ****************/

#siteInfo{
	fclear: both;
	border-top: 1px solid #006699;
	font-size: small;
	color: #FFCC33;
	padding: 10px 10px 10px 10px;
	margin-top: 0px;}

#siteInfo img{
	padding: 4px 4px 4px 0px;
	vertical-align: middle;}

#siteInfo relatedLinks {
	padding: 10px 15px 10px 5px;
	margin: 10px 15px 10px 5px;
	color: #FFCC00;
}
#REF{
	text-align:left;
	color: #FFCC00;
	font-size: 10px;
}
a.sitelink:link{
	color: #FFCC00;
	font-size: 12px;
}
a.sitelink:visited, a.sitelink:hover{
	color: #FFCC00;
	font-size: 12px;
}
/************ sectionLinks styles **************/

#sectionLinks{
	margin: 0px;
	padding: 0px;}

#sectionLinks h3{
	padding: 10px 0px 2px 10px;
	border-bottom: 1px solid #cccccc;}

#sectionLinks a:link, #sectionLinks a:visited {
	display: block;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #cccccc;
	background-image:   url('gif/bg_grad.jpg');
	font-weight: bold;
	color: #21536A; padding-left:10px; padding-right:0px; padding-top:3px; padding-bottom:3px}

#sectionLinks a:hover{
	border-top: 1px solid #cccccc;
	background-color: #DDEEFF;
	background-image: url('none');
	font-weight: bold;
	text-decoration: none}

/************* relations styles **************/

.relatedLinks{
	margin: 0px;
	padding: 0px 0px 10px 10px;
	border-bottom: 0px solid #cccccc;}

.relatedLinks h3{
	padding: 10px 15px 10px 5px;
	margin: 10px 15px 10px 5px;
	color: #FFCC00;}

.relatedLinks a{
	display: block;
	color: #FFCC00;
	font-size: 12px;}
	
.relatedLinks P1{
	font: 10px Arial,sans-serif;
	color: #FFFFFF;
	padding: 0px;
	margin-bottom: 1px;}

/**************** advert styles *****************/

#advert{
	padding: 10px;}

#advert img{
	display: block;}

/********************* end **********************/
.TABHaut{
	border-bottom-width: 0px;
	border-color: #FFFF00;
	border-top-width: 8px;}
.TAB{
	border-top-width:: 0px;
	border-bottom-width: 0px;}
.TABBas{
	border-bottom-width:: 2px;
	border-bottom-width: 0px;
	border-bottom-color: #00CC66;}