@charset "utf-8";
/* Xénos-B CSS */

body {
	margin:0;
	padding:0;
	color:#fff;
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	background:#000;
}

a {
	color:#fff;
	outline:none;
	text-decoration:none;
}

img, object, input, div {
	border:0px none;
	outline:none;
}


#preloader {
	position:fixed;
	background-color:#000;
	width:100%;
	height:100%;
	z-index:100000;
}

	#preloader #preloadIMG {
		position:absolute;
		top:50%;
		left:50%;
		margin:-140px 0 0 -140px;
		text-align:center;
	}

	#preloader #preloadIMG img {
		vertical-align:bottom;	
	}


#interface {
	position:relative;
	width:960px;
	height:558px;
	margin:7px auto 7px auto;
	background:url(../images/interface-background.jpg) center no-repeat;
}

	#interface #left {
		float:left;
		width:140px;
		height:153px;
		padding:340px 10px 49px 20px;
	}

		#interface #left ul#menu {
			margin:0;
			padding:0;
			list-style:none;
		}
		
			#interface #left ul#menu li {
				color:#666666;
				font-family:Verdana,Arial,Helvetica,sans-serif;
				font-size:9px;
				font-weight:100;
				letter-spacing:4px;
			}
		
				#interface #left ul#menu li a {
					display:block;
					color:#666666;
					border-bottom:1px solid #888;
				}
		
					#interface #left ul#menu li a:hover {
						color:#999999;
						border-bottom-color:#bbb;
					}

		#interface #left #licence {
			position:absolute;
			top:515px;
			left:0;
			width:140px;
			padding:0 10px 0 20px;
		}

	#interface #right {
		float:left;
		width:760px;
		height:460px;
		padding:49px 30px 49px 0;
	}
	
		#interface #right #screen {
			width:760px;
			height:460px;
			margin:0;
			padding:0;
		}

			#interface #right #screen #news {
				width:760px;
				height:460px;
				margin:0;
				background:url(../images/news-background.jpg) center no-repeat;
			}

				#interface #right #screen #news #content {
					float:left;
					clear:left;
					width:330px;
				}

					#interface #right #screen #news #content .top {
						float:left;
						clear:both;
						width:330px;
						height:10px;
						margin:20px 0 0 0;
						background:url(../images/news-content-top.png) left bottom no-repeat;
					}
	
					#interface #right #screen #news #content .middle {
						float:left;
						clear:both;
						width:310px;
						padding:0 10px 0 10px;
						color:#eee;
						background:url(../images/news-content-middle.png) left top repeat-y;
					}
		
						#interface #right #screen #news #content .middle .title {
							font-size:16px;
							font-weight:bold;
							text-transform:uppercase;
						}
		
							#interface #right #screen #news #content .middle .title a {
								display:block;
							}
		
								#interface #right #screen #news #content .middle .title a:hover {
									text-decoration:underline;
								}
		
						#interface #right #screen #news #content .middle .subtitle {
							font-variant:small-caps;
							font-weight:bold;
						}
		
						#interface #right #screen #news #content .middle .data {
							font-size:80%;
							font-style:italic;
							text-align:right;
							border-top:1px solid #eee;
						}
		
						#interface #right #screen #news #content .middle .text {
							line-height:14px;
						}
		
							#interface #right #screen #news #content .middle .text p {
								margin:14px 0 14px 0;
							}
		
						#interface #right #screen #news #content .middle .connexion {
							padding:7px 0 0 0;
							font-size:80%;
							font-style:italic;
						}
		
						#interface #right #screen #news #content .middle .impulsion {
							font-weight:bold;
							text-align:right;
							border-top:1px solid #eee;
						}
		
							#interface #right #screen #news #content .middle .impulsion a {
								display:block;
							}
		
								#interface #right #screen #news #content .middle .impulsion a:hover {
									text-decoration:underline;
								}
		
						#interface #right #screen #news #content .middle .scroll {
							width:305px;
							height:325px;
							padding:0 5px 0 0;
							overflow:auto;
						}
		
							#interface #right #screen #news #content .middle .scroll .number {
								font-style:italic;
								border-bottom:1px solid #eee;
							}
		
							#interface #right #screen #news #content .middle .scroll ul.forum {
								margin:0;
								padding:0;
								list-style:none;
							}
		
								#interface #right #screen #news #content .middle .scroll ul.forum li {
									padding:14px 0 0 0;
								}
		
									#interface #right #screen #news #content .middle .scroll ul.forum li .text {
										text-align:left;
									}
			
									#interface #right #screen #news #content .middle .scroll ul.forum li .author {
										margin:-7px 0 0 0;
										font-style:italic;
										font-weight:bold;
										text-align:right;
										border-top:1px dotted #eee;
									}
			
									#interface #right #screen #news #content .middle .scroll ul.forum li .author span {
										font-size:80%;
										font-weight:normal;
									}
		
							#interface #right #screen #news #content .middle .scroll .reply {
								margin:28px 0 0 0;
								font-style:italic;
								border-top:1px solid #eee;
							}
		
						#interface #right #screen #news #content .middle #form { }
	
							#interface #right #screen #news #content .middle #form ul {
								margin:0;
								padding:0;
								list-style-type:none;
							}
		
								#interface #right #screen #news #content .middle #form ul li {
									margin:0 0 5px 0;
									text-align:right;
								}
		
									#interface #right #screen #news #content .middle #form ul li label {
										font-style:italic;
									}
		
									#interface #right #screen #news #content .middle #form ul li input {
										width:190px;
										color:#fff;
										border:none;
										border-bottom:1px dashed #ccc;
										background:none;
										vertical-align:bottom;
									}
		
										#interface #right #screen #news #content .middle #form ul li input:focus{
											border:none;
											border-bottom:1px solid #fff;
										}
		
									#interface #right #screen #news #content .middle #form ul li span {
										color:#f30;
										font-style:italic;
									}
		
									#interface #right #screen #news #content .middle #form ul li textarea {
										width:308px;
										height:98px;
										color:#fff;
										font-family:Arial, Helvetica, sans-serif;
										font-size:1em;
										vertical-align:top;
										border:1px dashed #ccc;
										background:none;
									}
		
										#interface #right #screen #news #content .middle #form ul li textarea:focus {
											border:1px solid #fff;
										}
		
								#interface #right #screen #news #content .middle #form input.submit {
									float:right;
								}
		
								#interface #right #screen #news #content .middle #form ul li .forum-message {
									text-align:left;
								}
		
								#interface #right #screen #news #content .middle #form ul li .forum-message .author {
									font-style:italic;
									font-weight:bold;
									text-align:right;
									border-top:1px solid #eee;
								}
		
							#interface #right #screen #news #content .middle #form p.reponse_formulaire {
								width:245px;
								margin:0;
								font-style:italic;
							}
			
								#interface #right #screen #news #content .middle #form p.reponse_formulaire.reponse_formulaire_ok {
									color:#0C3;
								}
			
								#interface #right #screen #news #content .middle #form p.reponse_formulaire.reponse_formulaire_erreur {
									color:#f30;
								}
						
					#interface #right #screen #news #content .bottom {
						float:left;
						clear:both;
						width:330px;
						height:10px;
						background:url(../images/news-content-bottom.png) left top no-repeat;
					}

				#interface #right #screen #news #list {
					float:right;
					clear:right;
					width:255px;
				}

					#interface #right #screen #news #list .top {
						float:left;
						clear:both;
						width:255px;
						height:10px;
						margin:20px 0 0 0;
						background:url(../images/newsletter-form-top.png) left bottom no-repeat;
					}
	
					#interface #right #screen #news #list .middle {
						float:left;
						clear:both;
						width:235px;
						height:auto;
						padding:0 10px 0 10px;
						background:url(../images/newsletter-form-middle.png) left top repeat-y;
					}
	
						#interface #right #screen #news #list .middle a {
							display:block;	
							font-style:italic;
						}
	
							#interface #right #screen #news #list .middle a:hover {
								text-decoration:underline;
							}
						
					#interface #right #screen #news #list .bottom {
						float:left;
						clear:both;
						width:255px;
						height:10px;
						background:url(../images/newsletter-form-bottom.png) left top no-repeat;
					}
	
			#interface #right #screen #glass {
				position:relative;
				width:760px;
				height:460px;
				margin:0;
				padding:0;
				overflow:hidden;
				background:url(../images/glass.jpg) top left no-repeat;
			}
		
				#interface #right #screen #glass #reflection {
					position:relative;
					width:920px;
					height:540px;
				}
			
					#interface #right #screen #glass #reflection a#sequence-01 {
						display:block;
						position:absolute;
						top:40px;
						left:80px;
						width:279px;
						height:190px;
						background:url(../images/empty.gif) repeat;
						z-index:100;
					}
			
						#interface #right #screen #glass #reflection a#sequence-01:hover {
							width:348px;
							height:222px;
							background:url(../images/glass-reflection-1.png) left top no-repeat;
							z-index:1;
						}
			
					#interface #right #screen #glass #reflection a#sequence-02 {
						display:block;
						position:absolute;
						width:151px;
						height:190px;
						top:40px;
						left:359px;
						background:url(../images/empty.gif) repeat;
						z-index:100;
					}
			
						#interface #right #screen #glass #reflection a#sequence-02:hover {
							width:254px;
							height:200px;
							left:290px;
							background:url(../images/glass-reflection-2.png) center top no-repeat;
							z-index:1;
						}

			#interface #right #screen .sequence {
				position:relative;
				width:720px;
				height:420px;
				margin:0;
				padding:20px;
			}

				#interface #right #screen .sequence#sequence-01 {
					background:url(../images/sequence-background-1.jpg) center no-repeat;
				}

				#interface #right #screen .sequence#sequence-02 {
					background:url(../images/sequence-background-2.jpg) center no-repeat;
				}

				#interface #right #screen .sequence .number {
					float:left;
					clear:both;
					width:125px;
					height:69px;
					margin:0 0 20px 580px;
					padding:91px 15px 0 0;
					font-size:75px;
					text-align:right;
					background:url(../images/sequence-number.png) no-repeat;
				}

				#interface #right #screen .sequence .forum {
					float:left;
					width:140px;
					height:30px;
					margin:0;
					padding:0;
					font-size:14px;
					font-weight:bold;
					line-height:30px;
					text-align:center;
					background:url(../images/sequence-date.png) center top no-repeat;
				}

					#interface #right #screen .sequence .forum:hover {
						background:url(../images/sequence-date.png) center bottom no-repeat;
					}

					#interface #right #screen .sequence .forum a {
						display:block;
					}

				#interface #right #screen .sequence .date {
					float:left;
					width:125px;
					height:30px;
					margin:0 0 0 440px;
					padding:0 15px 0 0;
					font-size:14px;
					font-weight:bold;
					line-height:30px;
					text-align:right;
					background:url(../images/sequence-date.png) center top no-repeat;
				}

				#interface #right #screen .sequence .title {
					float:left;
					clear:both;
					width:690px;
					height:60px;
					margin:50px 0 20px 0;
					padding:0 15px 0 15px;
					font-size:32px;
					font-weight:bold;
					line-height:60px;
					text-align:center;
					text-transform:uppercase;
					background:url(../images/sequence-title.png);
				}

				#interface #right #screen .sequence #player {
					float:left;
					clear:left;
					width:560px;
					margin:0 20px 0 0;
				}

				#interface #right #screen .sequence ul.download {
					float:left;
					width:140px;
					height:30px;
					margin:0 0 0 0;
					padding:0;
					list-style:none;
				}

					#interface #right #screen .sequence ul.download li {
						float:left;
						width:140px;
						height:30px;
						margin:0 0 10px 0;
						padding:0 0 0 0;
						font-size:14px;
						font-weight:bold;
						line-height:30px;
						text-align:center;
						background:url(../images/sequence-date.png) center top no-repeat;
					}

						#interface #right #screen .sequence ul.download li:hover {
							background:url(../images/sequence-date.png) center bottom no-repeat;
						}

						#interface #right #screen .sequence ul.download li a {
							display:block;
						}

			#interface #right #screen #synopsis {
				width:760px;
				height:400px;
				margin:0;
				padding:60px 0 0 0;
				background:url(../images/synopsis-background.jpg) center no-repeat;
			}

				#interface #right #screen #synopsis #description {
					float:right;
					clear:both;
					width:460px;
				}

					#interface #right #screen #synopsis #description .top {
						float:right;
						clear:both;
						width:460px;
						height:10px;
						background:url(../images/synopsis-description-top.png) left bottom no-repeat;
					}
	
					#interface #right #screen #synopsis #description .middle {
						float:right;
						clear:both;
						width:420px;
						height:auto;
						padding:0 20px 0 20px;
						background:url(../images/synopsis-description-middle.png) left top repeat-y;
					}
						
					#interface #right #screen #synopsis #description .bottom {
						float:right;
						clear:both;
						width:460px;
						height:10px;
						background:url(../images/synopsis-description-bottom.png) left top no-repeat;
					}

			#interface #right #screen #credits {
				width:760px;
				height:300px;
				margin:0;
				padding:160px 0 0 0;
				background:url(../images/credits-background.jpg) center no-repeat;
			}

				#interface #right #screen #credits #description {
					float:right;
					clear:both;
					width:460px;
				}

					#interface #right #screen #credits #description .top {
						float:right;
						clear:both;
						width:460px;
						height:10px;
						background:url(../images/synopsis-description-top.png) left bottom no-repeat;
					}
	
					#interface #right #screen #credits #description .middle {
						float:right;
						clear:both;
						width:420px;
						height:auto;
						padding:0 20px 0 20px;
						background:url(../images/synopsis-description-middle.png) left top repeat-y;
					}
						
					#interface #right #screen #credits #description .bottom {
						float:right;
						clear:both;
						width:460px;
						height:10px;
						background:url(../images/synopsis-description-bottom.png) left top no-repeat;
					}

			#interface #right #screen #newsletter {
				width:760px;
				height:307px;
				margin:0;
				padding:153px 0 0 0;
				background:url(../images/newsletter-background.jpg) center no-repeat;
			}

				#interface #right #screen #newsletter #description {
					float:left;
					clear:left;
					width:255px;
				}

					#interface #right #screen #newsletter #description .top {
						float:left;
						clear:both;
						width:255px;
						height:10px;
						background:url(../images/newsletter-description-top.png) left bottom no-repeat;
					}
	
					#interface #right #screen #newsletter #description .middle {
						float:left;
						clear:both;
						width:235px;
						height:auto;
						padding:0 10px 0 10px;
						background:url(../images/newsletter-description-middle.png) left top repeat-y;
					}
	
						#interface #right #screen #newsletter #description .middle p {
							margin:0;
						}
						
					#interface #right #screen #newsletter #description .bottom {
						float:left;
						clear:both;
						width:255px;
						height:10px;
						background:url(../images/newsletter-description-bottom.png) left top no-repeat;
					}

				#interface #right #screen #newsletter #form {
					float:right;
					clear:right;
					width:255px;
				}
	
					#interface #right #screen #newsletter #form .top {
						float:right;
						clear:both;
						width:255px;
						height:10px;
						background:url(../images/newsletter-form-top.png) right bottom no-repeat;
					}
	
					#interface #right #screen #newsletter #form .middle {
						float:right;
						clear:both;
						width:235px;
						height:auto;
						padding:0 10px 0 10px;
						background:url(../images/newsletter-form-middle.png) right top repeat-y;
					}
	
						#interface #right #screen #newsletter #form .middle ul {
							margin:0;
							padding:0;
							list-style-type:none;
						}
	
							#interface #right #screen #newsletter #form .middle ul li {
								margin:0 0 5px 0;
								text-align:right;
							}
	
								#interface #right #screen #newsletter #form .middle ul li label {
									font-style:italic;
								}
	
								#interface #right #screen #newsletter #form .middle ul li input {
									width:180px;
									color:#fff;
									border:none;
									border-bottom:1px dashed #ccc;
									background:none;
									vertical-align:bottom;
								}
	
									#interface #right #screen #newsletter #form .middle ul li input:focus{
										border:none;
										border-bottom:1px solid #fff;
									}
	
								#interface #right #screen #newsletter #form .middle ul li span {
									color:#f30;
									font-style:italic;
								}
	
								#interface #right #screen #newsletter #form .middle ul li .choix {
									margin:0 0 0 38px;
									padding:5px 0 0 0;
									text-align:left;
								}
	
									#interface #right #screen #newsletter #form .middle ul li .choix input {
										width:auto;
										margin:0 5px 0 0;
										padding:0;
										border:none;
										background:none;
										vertical-align:middle;
									}
	
						#interface #right #screen #newsletter #form .middle input.submit {
							float:right;
						}
	
						#interface #right #screen #newsletter #form .middle p.reponse_formulaire {
							width:235px;
							font-style:italic;
						}
		
							#interface #right #screen #newsletter #form .middle p.reponse_formulaire.reponse_formulaire_ok {
								color:#0C3;
							}
		
							#interface #right #screen #newsletter #form .middle p.reponse_formulaire.reponse_formulaire_erreur {
								color:#f30;
							}
						
					#interface #right #screen #newsletter #form .bottom {
						float:right;
						clear:both;
						width:255px;
						height:10px;
						background:url(../images/newsletter-form-bottom.png) right top no-repeat;
					}

			#interface #right #screen #contact {
				width:760px;
				height:400px;
				margin:0;
				padding:58px 0 0 0;
				background:url(../images/contact-background.jpg) center no-repeat;
			}

				#interface #right #screen #contact #description {
					float:left;
					clear:left;
					width:255px;
				}

					#interface #right #screen #contact #description .top {
						float:left;
						clear:both;
						width:255px;
						height:10px;
						background:url(../images/newsletter-description-top.png) left bottom no-repeat;
					}
	
					#interface #right #screen #contact #description .middle {
						float:left;
						clear:both;
						width:235px;
						height:auto;
						padding:0 10px 0 10px;
						background:url(../images/newsletter-description-middle.png) left top repeat-y;
					}
	
						#interface #right #screen #contact #description .middle p {
							margin:0;
						}
						
					#interface #right #screen #contact #description .bottom {
						float:left;
						clear:both;
						width:255px;
						height:10px;
						background:url(../images/newsletter-description-bottom.png) left top no-repeat;
					}

				#interface #right #screen #contact #form {
					float:right;
					clear:right;
					width:255px;
				}
	
					#interface #right #screen #contact #form .top {
						float:right;
						clear:both;
						width:255px;
						height:10px;
						background:url(../images/newsletter-form-top.png) right bottom no-repeat;
					}
	
					#interface #right #screen #contact #form .middle {
						float:right;
						clear:both;
						width:235px;
						height:auto;
						padding:0 10px 0 10px;
						background:url(../images/newsletter-form-middle.png) right top repeat-y;
					}
	
						#interface #right #screen #contact #form .middle ul {
							margin:0;
							padding:0;
							list-style-type:none;
						}
	
							#interface #right #screen #contact #form .middle ul li {
								margin:0 0 5px 0;
								text-align:right;
							}
	
								#interface #right #screen #contact #form .middle ul li label {
									font-style:italic;
								}
	
								#interface #right #screen #contact #form .middle ul li input {
									width:180px;
									color:#fff;
									border:none;
									border-bottom:1px dashed #ccc;
									background:none;
									vertical-align:bottom;
								}
	
									#interface #right #screen #contact #form .middle ul li input:focus{
										border:none;
										border-bottom:1px solid #fff;
									}
	
								#interface #right #screen #contact #form .middle ul li span {
									color:#f30;
									font-style:italic;
								}
	
								#interface #right #screen #contact #form .middle ul li textarea {
									width:175px;
									margin:0 0 0 3px;
									color:#fff;
									font-family:Arial, Helvetica, sans-serif;
									font-size:1em;
									vertical-align:top;
									border:1px dashed #ccc;
									background:none;
								}
	
									#interface #right #screen #contact #form .middle ul li textarea:focus {
										border:1px solid #fff;
									}
	
						#interface #right #screen #contact #form .middle input.submit {
							float:right;
						}
	
						#interface #right #screen #contact #form .middle p.reponse_formulaire {
							width:235px;
							margin:0;
							font-style:italic;
						}
		
							#interface #right #screen #contact #form .middle p.reponse_formulaire.reponse_formulaire_ok {
								color:#0C3;
							}
		
							#interface #right #screen #contact #form .middle p.reponse_formulaire.reponse_formulaire_erreur {
								color:#f30;
							}
						
					#interface #right #screen #contact #form .bottom {
						float:right;
						clear:both;
						width:255px;
						height:10px;
						background:url(../images/newsletter-form-bottom.png) right top no-repeat;
					}

		#interface #right #flux {
			position:absolute;
			top:519px;
			right:30px;
			width:126px;
			height:5px;
			background:url(../images/interface-flux.gif) center no-repeat;
		}