/* CSS Document */
@import url(A_init.css);


/******************************************************
* 
* HEADER
* CONTENT
* FOOTER
*
******************************************************/

body{
	position: relative;
	background: #06334B url(../img/common/bg_body.jpg) no-repeat center center;
}

#page{
	position: absolute;
	top: 50%;
	left:0px;
	margin-top:-230px;
	text-align: center;
	width:100%;
}

/******************************************************************** CONTENT */

#mainContent{
	margin:0 auto 2px auto;
	width:965px;
	height:479px;
	position: relative;
	text-align:left;
}

/******************************************************************** Menu */

#menu {
	float:left;
	width:133px;
	height:479px;
	background: transparent url(../img/common/navigation/bg.png) no-repeat left top;
}
		#navigation {
			display:block;
			width:133px;
		}
				#navigation li {
					display:block;
					width:133px;
					border-top: solid 1px #34363b;
					border-bottom: solid 1px #000000;
					padding: 0;
					margin:0;
					font-size:0;
					line-height:0;
				}
				#navigation li:hover,
				#navigation li.lihover,
				#navigation li.active{
					border-top: solid 1px #000000;
				}
				#navigation li.last {
					border-bottom: none;
				}
						#navigation li img,
						#navigation li a {
							display:block;
						}


/******************************************************************** FOOTER */
#footer{
	width:100%;
	min-height:83px;
	background: White url(../img/common/bg-footer.png) repeat-x left top;
	position:relative;
	text-align:center;
	margin-top:30px;
	overflow:hidden;
}
#footer:after,
#footerContent:after{
	content:".";
	clear:both;
	display:block;
	height:0;
	visibility:hidden;
}
		#footerContent {
			position:relative;
			min-height:83px;
			width:965px;
			margin: 0 auto;
			text-align:left;
		}
* html #footer,
* html #footerContent {
	height:83px;
}
#navigationFooter {
	
}
		#navigationFooter li {
			float:left;
			display:block;
			background: transparent url(../img/common/footer/sep.png) no-repeat right top;
			padding-right:1px;
			height: 62px;
		}
		#navigationFooter li.logo {
			width:265px;
		}
#navigationFooterSecondaire {
	clear:both;
	display:block;
}
		#navigationFooterSecondaire li {
			float:left;
			display:block;
			margin-right:10px;
			color:#505050;
		}
		#navigationFooterSecondaire li.web-tv {
			float:right;
			margin-right:0;
		}
				#navigationFooterSecondaire a {
					color:#505050;
					font-size:0.91em;
				}



/******************************************************************** GRID */

#grid {
	width:832px;
	height:479px;
	float:left;
	position:relative;
	background-color:#000000;
}

/* taille des blocs */
.small {
	width: 118px;
	height: 95px;
}
.small2 {
	width: 118px;
	height: 94px;
}
.medium {
	width: 236px;
	height: 190px;
}
.big {
	width: 355px;
	height: 286px;
}

/* styles des textes */
		.small img, .small2 img, .medium img, .big img {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}
		.small span.h2, .small2 span.h2, .medium span.h2, .big span.h2 {
			padding: 0 3px;
			margin: 0 5px 0 7px;
			border-left: solid 2px #a9507e;
			font-size: 1.5em;
			font-weight: bold;
			color: white;
			line-height: 1em;
			display: block;
			width: auto;
		}
				.small span.h2 span, .small2 span.h2 span, .medium span.h2 span, .big span.h2 span {
					font-size: 0.68em;
					display: inline-block;
					width: auto;
				}
		.small span.p, .small2 span.p, .medium span.p, .big span.p {
			color: #6b6a6a;
			font-weight: bold;
			margin-top: 4px;
			margin: 0 5px 0 7px;
			display: block;
			width: auto;
		}
		.small span, .small2 span, .medium span, .big span {
			position: relative;
			z-index: 5;
			display:inline;
			height: auto;
			width: 117px;
			display: inline-block;
			vertical-align: middle;
		}
		.medium span {
			width: 234px;
		}
		.big span {
			width: 353px;
		}
		.small span.heightReferer, .small2 span.heightReferer, .medium span.heightReferer, .big span.heightReferer {
			z-index: 4;
			width: 1px;
			height: 95px;
			margin-top: 0;
		}
		.small2 span.heightReferer {
			height: 94px;
		}
		.medium span.heightReferer {
			height: 190px;
		}
		.big span.heightReferer {
			height: 286px;
		}

.small a, .small2 a, .medium a, .big a,
.small a span, .small2 a span, .medium a span, .big a span,
.small a:hover, .small2 a:hover, .medium a:hover, .big a:hover {
	text-decoration: none;
	cursor: pointer;
}

.small a span.whiteLayer, .small2 a span.whiteLayer, .medium a span.whiteLayer, .big a span.whiteLayer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display:block;
	z-index: 10;
	background-color: White;
	filter : alpha(opacity=1);
    -moz-opacity : 0.01;
	opacity : 0.01;
}

.small a:hover span.whiteLayer, .small2 a:hover span.whiteLayer, .medium a:hover span.whiteLayer, .big a:hover span.whiteLayer {
	background-color: White;
	filter : alpha(opacity=30);
    -moz-opacity : 0.3;
	opacity : 0.3;
}

/* Textes blancs sur fond noir (en bas à droite des images) */
span.caption {
	position: absolute;
	right: 4px;
	margin-left: 4px;
	bottom: 2px;
	background-color: black;
	padding: 1px 2px;
	width: auto;
	z-index: 5;
	text-align: right;
}
/* Position des blocs */
#video, #bloc1, #bloc2, #bloc3, #bloc4, #bloc5, #bloc6, #bloc7, 
#bloc8, #bloc9, #bloc10, #bloc11, #bloc12, #bloc13 {
	position: absolute;
	overflow: hidden;
}
#video {
	top: 1px;
	left: 4px;
	width: 352px;
	height: 477px;
	background-color: #1e1f22;
}
/* Le grand en haut à gauche */
#bloc1 {
	top: 1px;
	left: 1px;
}
/* Le petit juste à droite (celui du haut) */
#bloc2 {
	top: 1px;
	left: 357px;
}
/* Le moyen en haut */
#bloc3 {
	top: 1px;
	left: 476px;
}
/* Le petit en haut à droite */
#bloc4 {
	top: 1px;
	left: 713px;
}
/* Le petit à gauche du moyen */
#bloc5 {
	top: 96px;
	left: 357px;
}
/* Le petit à droite du moyen */
#bloc6 {
	top: 96px;
	left: 713px;
}
/* Le moyen en bas à gauche */
#bloc7 {
	top: 288px;
	left: 1px;
}
/* Le petit juste à droite (celui du haut) */
#bloc8 {
	top: 288px;
	left: 238px;
}
/* Le petit juste à droite (celui du bas) */
#bloc9 {
	top: 383px;
	left: 238px;
}
/* Le grand en bas */
#bloc10 {
	top: 192px;
	left: 357px;
}
/* Les 3 petits à droite (de haut en bas) */
#bloc11 {
	top: 192px;
	left: 713px;
}
#bloc12 {
	top: 288px;
	left: 713px;
}
#bloc13 {
	top: 384px;
	left: 713px;
}

/******************************************************************** Player */
#playerContainer {
	text-align:center;
	width:352px;
	height:298px;
}
/******************************************************************** Carousel */
#navVideo {
	height:176px;
	width:352px;
	position: relative;
}
		#navVideo .bt-carousel-left,
		#navVideo .bt-carousel-right {
			position:absolute;
			top:53px;
			left:10px;
			display: none;
		}
		#navVideo .bt-carousel-right {
			left:323px;
		}
		.jsOn #navVideo .bt-carousel-left,
		.jsOn #navVideo .bt-carousel-right {
			display:block;
		}
		#carousel-wrapper {
			height:167px;
			margin-left:41px;
			overflow-y:auto;
			overflow-x:hidden;
			position:relative;
			width:290px;
		}
		.jsOn #carousel-wrapper {
			overflow:hidden;
			width:270px;
		}
				#carousel {
					width:270px;
					display:block;
					/*margin-left:40px;*/
					margin-top:3px;
				}
				
						#carousel li {
							display:block;
							clear:both;
							width:100%;
							left: 0;
						}
						.jsOn #carousel li {
							position:absolute;
						}
						#carousel a:after {
							content:".";
							display:block;
							height:0;
							visibility:hidden;
							clear:both;
						}
								#carousel a {
									display:block;
									padding: 14px 0;
									width:100%;
									border-bottom:1px solid #2e2f30;
								}
								.jsOn #carousel a {
									border-bottom: none;
								}
								.jsOn #carousel a.first {
									border-bottom:1px solid #2e2f30;
								}
								.jsOn #carousel a.active {
									
								}
								#carousel a:hover,
								#carousel a:hover span {
									text-decoration:underline;
									cursor: pointer;
								}
										#carousel .picture {
											display:block;
											float:left;
											width:75px;
											height:55px;
											margin-right:12px;
										}
										#carousel .info {
											display:block;
											float:left;
											height:55px;
											width:180px;
											overflow:hidden;
										}
												#carousel .info span {
													display:block;
													line-height: 1em;
													height: 2.1em;
													overflow:hidden;
												}
												#carousel .info span.title {
													font-weight:bold;
													font-size:1.1em;
													margin-bottom:10px;
												}
												#carousel .info span.text {
												}

/******************************************************************** Popin */

/* Fond */

#bgPopin {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #0a3d50;
	filter : alpha(opacity=50);
    -moz-opacity : 0.5;
	opacity : 0.5;
	z-index: 200;
	display: none;
}
/* Hack position:fixed sur IE6 */
* html #bgPopin {
	_position: absolute;
    _top: expression( ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) + 'px' );
    _left: expression( ( ignoreMe = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) + 'px' );
}

/* popin */
div#popinDocumentation {
	height:572px;
	border-color:Gray;
	border-style:solid;
	width:640px;
	position:absolute;
	z-index:201;
	top: 50%;
	left: 50%;
	margin: -286px 0 0 -320px;
	display: none;
}

div#popinCallBack {
	border-color:Gray;
	border-style:solid;
	height:390px;
	width:340px;
	position:absolute;
	z-index:201;
	top: 50%;
	left: 50%;
	margin: -195px 0 0 -170px;
	display: none;
}

div#popinDocumentation div.header {
	background:transparent url(../img/popin/headerDocumentation.gif) no-repeat scroll left top;
	height:86px;
	width:640px;
	border-top: solid 1px gray; /* Fix FF */
}

div#popinCallBack div.header {
	background:transparent url(../img/popin/headerCallBack.gif) no-repeat scroll left top;
	height:25px;
	width:340px;
	border-top: solid 1px gray; /* Fix FF */
}

div#popinDocumentation div.header div.btClose,
div#popinCallBack div.header div.btClose {
	float:right;
	margin-right:5px;
	margin-top:8px;
}
div#popinDocumentation div.header p#titreDocumentation,
div#popinCallBack div.header p#titreCallBack {
	color:#FFFFFF;
	font-size:14px;
	font-weight:bold;
	margin-left:200px;
	margin-top:5px;
}
div#popinCallBack div.header p#titreCallBack {
	margin-left:25px;
}

div#popinCallBack iframe#iFrameDocumentation,
div#popinCallBack iframe#iFrameCallBack {
	background-color:#FFFFFF;
	overflow:hidden;
}