@import "palette.css";

html {}
body {
	background:#310802;	/* url(fondpage.jpg) repeat-x fixed;*/
background: -moz-radial-gradient(center, ellipse cover, #310802 10%, rgba(0,0,0,1) 100%) fixed; 
/*
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(27%,rgba(171,187,252,1)), color-stop(76%,rgba(14,14,14,1))) fixed;
background: -webkit-radial-gradient(center, ellipse cover, rgba(171,187,252,1) 27%,rgba(14,14,14,1) 76%) fixed;
background: -o-radial-gradient(center, ellipse cover, rgba(171,187,252,1) 27%,rgba(14,14,14,1) 76%) fixed; 
background: -ms-radial-gradient(center, ellipse cover, rgba(171,187,252,1) 27%,rgba(14,14,14,1) 76%) fixed;
background: radial-gradient(center, ellipse cover, rgba(171,187,252,1) 27%,rgba(14,14,14,1) 76%) fixed; 
*/



	width:100%;
	height:auto;
	margin:0px;
	padding:0px;
	font-size: 14px;
	font-family: arial;
	color: #DADADA;
	overflow-y:scroll;
	}
		#fond {
			position:fixed;
			background: -moz-radial-gradient(center, ellipse cover, transparent 10%, rgba(0,0,0,0.8) 70%) fixed; 
			background: -webkit-gradient(center, ellipse cover, transparent 10%, rgba(0,0,0,0.8) 70%) fixed;
			background: -o-radial-gradient(center, ellipse cover, transparent 10%, rgba(0,0,0,0.8) 70%) fixed; 
/*
background: -webkit-radial-gradient(center, ellipse cover, rgba(171,187,252,1) 27%,rgba(14,14,14,1) 76%) fixed;
background: -ms-radial-gradient(center, ellipse cover, rgba(171,187,252,1) 27%,rgba(14,14,14,1) 76%) fixed;
background: radial-gradient(center, ellipse cover, rgba(171,187,252,1) 27%,rgba(14,14,14,1) 76%) fixed; 
*/
			width:100%;
			height:100%;
			margin:0px;
			padding:0px;
		}
#fondcolor {
	position:fixed;
	background-color:transparent;
	left:0;
	top:0;
	margin:0px;
	padding:0px;
	width:100%; 
	height:1879px;
	z-index:5;
	}
#titre {
	text-align:center;
	visibility:visible;
	}
#titre p {
	font-size:60px;
	text-align:center;
		text-shadow: 0px 20px 16px #000;
	}
.fondnoir {
	position:fixed;
	background: #000;	/*#B3BCFF; */
	width:100%; 
	height:100%;
	left:0px;
	top:0px; 
	z-index:1003; 
	}
.contformu {
	position:absolute;
	background: transparent url(sousmarin.gif); /*background: #353957; */
	width:793px; 
	height:389px;
	top:-300px;
	color: #fff;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
	z-index:1004; 
	}
#menu {
	position:fixed;
	left:10px;
	top:50px;
	width:200px;
	height:auto;
	padding-top:5px;
	text-align:left;
	z-index:99;
	}
#menu0 {
	position:relative;
	float:left;
	left:2px;
	top:0px;
	width:200px;
	}
#menu span a:hover {
	color:orange;
	}
.alfa, .acoul {
	position:relative;
	float:left;
	width:31px;
	margin:3px;
	padding:2px;
	font-size:14px;
	color:gray;
	cursor:pointer;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-box-shadow: -10px 20px 16px #000;
		-webkit-box-shadow: -10px 20px 16px #000;
		box-shadow: -10px 20px 16px #000;
	}
.alfa {
	background:#000;
	border:gray 2px solid;
	}
.acoul {
	background:transparent;
	color:#ABA932;
	font-weight:bold;
	border:#9F0A0A 2px solid;
	}
.alfa:hover {
	background:gray;
	color:#000;
	font-weight:bold;
	border:#fff 2px solid;
	}
.acoul:hover {
	background:#9F0A0A;
	color:gray;
	border:gray 2px solid;
	}
#palette {
	position:fixed;
	display:none;
	background:#fff;
	left:50%;
	margin-left:-550px;
	top:30px;
	width:150px;
	height:140px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
	/*overflow:hidden;*/
	z-index:102;
		-moz-box-shadow: 0px 0px 12px #000;
		-webkit-box-shadow: 0px 0px 12px #000;
		box-shadow: 0px 0px 12px #000;
	}
ul {
	position:relative;
	float:left;
	margin:0;
	padding:0;
	}
li {
	list-style:none;
	margin:0;
	padding:0;
	}
#next {
	top:0px;
	}
#next:hover {
	background:#fff;
	color:#000;
	}
#contable {
	left:50%;
	margin-left:-350px;
	width:700px;
	height:auto;
	
	}
#part1 {
	text-shadow: -6px 6px 6px #000;
	}
#eau {
	position:absolute;
	display:none;
	background:transparent url(effet.png) left top repeat;
	left:0px;
	bottom:0px;
	width:100%;
	height:520px;
	z-index:3;
	}
#msq {
	position:absolute;
	background:transparent url(cacheau.png) left top repeat-x;
	left:0px;
	top:0px;
	width:100%;
	height:347px;
	z-index:4;
	}
#hippo, #hippo2 {
	position:fixed;
	left:10px;
	top:40px;
	width:50px;	
	height:89px;
	cursor:pointer;	
	z-index:100;
	}
#hippo {
	background:transparent url(hippo.png);
	left:30px;
	top:15px;
	width:28px;
	height:50px;
	}
#hippo2 {
	background:transparent url(hippo2.png);
	left:50%;
	margin-left:-470px;
	top:340px;
	}
#contentinfos {
	position:fixed;
	background:rgba(0,0,0,0.6);
	left:0;
	top:0;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	z-index:101;
	visibility:hidden;
	}
#infos {
	position:fixed;
	background:rgba(0,0,0,0.4);
	left:30px;
	top:50%;
	margin-top:-220px;
	width:452px;
	height:340px;
	z-index:101;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
	}
#plus {
	position:absolute;
	background:transparent url(next.png) left 50% no-repeat;
	left:420px;
	top:60px;
	width:300px;
	height:270px;
	color:gray;
	font-size:11px;
	text-align:center;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
	z-index:2;
	}
#plus:hover > #infoplus {
	visibility:visible;
	}
#infoplus {
	position:absolute;
	background:rgba(0,0,0,0.6);	
	border:gray 1px solid;
	right:0px;
	width:220px;
	height:220px;
	color:gray;
	font-size:11px;
	padding:16px;
	text-align:justify;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
	visibility:hidden;
	z-index:1;
	}
#infoplus a {
	color:#fff;
	font-size:13px;
	}
#infoplus a:hover {
	color:#00ff00;
	}
#contvideo {
	position:fixed;
	left:0px;
	top:0px;
	/*width:100%;
	height:100%;*/
	z-index:3;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	visibility:hidden;
	}
#videointro {
	position:fixed;
	}
#cachevideo {
	position:absolute;
	background:transparent; /* url(cachevideo.png);*/
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	}
#cachevideo img {
	width:100%;
	height:100%;
	}
.contvideobig {
	left:0;
	margin-left:0;
	top:0;
	margin-top:0;
	width:100%;
	height:100%;
	z-index:101;
	}
#infos p {
	margin-left:10px;
	line-height:20px;
	font-size:11px;
	color:#fff;
	}
#infos b {
	color:#7EA2CF;
	}
#merideenne {
	position:relative;
	float:left;
	/*background:url(merideenne3.jpg);*/
	width:100%;
	height:298px;
	/*visibility:hidden;*/
	}
#contentmeri {
	position:absolute;
	display:block;/*none;*/
	left:0px;
	bottom:0px;
	width:100%;	
	height:550px;
	z-index:1;
	}
#merig {
	position:absolute;
	overflow:hidden;
	left:0px;
	bottom:0px;
	width:1156px;	
	height:550px;
	z-index:1;
	}
.meri0 {
	background:url(meri_or0.jpg);
	}
.meri1 {
	background:url(meri_or.jpg);
	}
#merid {
	position:absolute;
	background:url(meri_roche.gif);
	right:0px;
	bottom:0px;
	width:493px;	
	height:468px;
	z-index:2;
	}
#etoil {
	position:absolute;
	margin:0;
	padding:0;
	left:620px;
	top:420px;
	width:1px;
	height:1px;
	}
#etoil img {
	position:absolute;
	width:100%;
	height:100%;
	}
#requin0 {
	position:absolute;
	background:url(requin2.png);
	left:50%;
	bottom:50%;
	width:426px;
	height:187px;
	opacity:0.4;
	z-index:10;
	}
#requin1, #requin2 {
	position:fixed;
	left:0px;
	bottom:300px;
	width:100px;	/*426px;*/
	height:50px;	/*187px;*/
	z-index:10;
	}
#requin3, #requin4 {
	position:fixed;
	left:0px;
	top:200px;
	width:100px;	
	height:50px;
	z-index:10;
	}
#meduse1 {
	position:fixed;
	left:30px;
	top:100px;
	width:60px;	
	height:80px;
	cursor:pointer;
	z-index:100;
	}
#meduse2 {
	position:fixed;
	left:10px;
	top:200px;
	width:45px;	
	height:60px;
	cursor:pointer;
	z-index:100;
	}
#poisrose {
	position:fixed;
	background:transparent url(anim_P1.gif);
	left:100px;
	top:30px;
	width:60px;	
	height:23px;
	cursor:pointer;
	z-index:100;
	}
#requin1 img, #requin2 img, #requin3 img, #requin4 img, #meduse1 img, #meduse2 img {
	width:100%;
	height:100%;
	}
#stopanimes {
	position:relative;
	float:right;
	background:transparent url(aff.png) left top no-repeat;
	right:70px;
	top:0px;
	width:24px;
	height:21px;
	cursor:pointer;
	/*padding:5px;
	color:#ffffff;
	font-size:11px;
	border-left:gray 1px solid;
	border-top:gray 1px solid;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;*/
	}
#quitt {
	position:relative;
	float:left;
	left:180px;
	top:0px;
	padding:2px 6px;
	background:#333333;
	color:#2AE7D7;
	font-size:14px;
	cursor:pointer;
	border-left:gray 1px solid;
	border-top:gray 1px solid;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	}
.logonoscript a:hover {
	color:#fff;
	}
a, .logonoscript a {
	color:#B3BCFF;
	text-decoration:none;
	}
h3 {
	font-size:22px;
	color:gray;
	}
p { 
		font-size:14px; 
		text-align:justify;
		/*letter-spacing: 1px;
		line-height:14px;*/
		font-family:arial "Times New Roman";
		color:gray;
	}
/*
p:first-letter { 
	font-size: 150%; 
    font-weight: bold; 
	float: left 
	}
*/
hr {
	/*border:gray 1px dashed;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;*/
	border:none;
	background:url(anguille.png) no-repeat;
	width:100%;
	height:40px;
	}
.poissonligne1 {
	background:transparent url(anim_P3.gif) no-repeat;
	}
.poissonligne2 {
	background:transparent url(anim_P4.gif) no-repeat;
	}
.poissonligne3 {
	background:transparent url(anim_P1.gif) no-repeat;
	}
.poissonligne4 {
	background:transparent url(anim_P2.gif) no-repeat;
	}
	
	.inputlien {
		border-style:none;
		background:rgba(0,0,0,0.4);
		width:150px;
		height:auto;
		margin:3px;
		padding:2px;
		border:gray 1px solid;
		cursor:pointer;
		color:gray;
		font-size:12px;
		text-decoration:none;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
		-moz-box-shadow: -10px 20px 30px #000;
		-webkit-box-shadow: -10px 20px 30px #000;
		box-shadow: -10px 20px 30px #000;
	}
	.lienactif {
		background:#1E6A78;
		color:#fff;
	}
	.inputlien:hover {
		background:gray;
		color:#000;
	}
#contentcache {
	position:fixed;
	width:6415px;
	height:4015px;
	z-index: 4;
	visibility:hidden;
	}
.cg {
	position:absolute;
	background:#000;
	left:0;
	top:0;
	width:3000px;
	height:4000px;
	}
.cd {
	position:absolute;
	background:#000;
	left:3415px;
	top:0;
	width:3000px;
	height:4000px;
	}
.ch {
	position:absolute;
	background:#000;
	left:3000px;
	top:0;
	width:415px;
	height:1800px;
	}
.cb {
	position:absolute;
	background:#000;
	left:3000px;
	top:2215px;
	width:415px;
	height:1800px;
	}
.lampe {
	position:absolute;
	background:transparent url(voile_lampe3.png);
	left:3000px;
	top:1800px;
	width:415px;
	height:415px;
	
	/*visibility:hidden;*/
	}
.bulles {
	position:absolute;
	background:black;
		min-width:100px;
		max-width:260px;
	height:auto;
	padding:5px;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 13px;
	color:orange;
	text-align: left;
	visibility: visible;
	z-index:1000;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	}

		#video {
			position:absolute;
			left:50%;
			margin-left:-240px;
			top:50%;
			margin-top:-180px;
			z-index:1;
			border:none;
			}
		#barre-prog {
			position:absolute;
			background-color:gray;
			left:50%;
			margin-left:-200px;
			bottom:87px;
			width:400px;
			height:8px;
			text-align:right;
			border:gray 1px inset;
			-moz-border-radius: 5px;
			 -webkit-border-radius: 5px;
			 -o-border-radius:5px;
			 border-radius: 5px;
			}
		#progression {
			position:relative;
			float:left;
			background-color:orange;
			width:0px;
			height:8px;
			-moz-border-radius: 3px;
			 -webkit-border-radius:  3px;
			 -o-border-radius:  3px;
			 border-radius: 3px;
			}
		#marqueur {
			position:absolute;
			background-color:#fff;
			left:-2000px;
			width:3px;
			height:15px;
			-moz-border-radius: 3px;
			 -webkit-border-radius:  3px;
			 -o-border-radius:  3px;
			 border-radius: 3px;
			}
		#cache {
			position:absolute;
			background:transparent url(hublot_rec.png);
			width:678px;
			height:553px;
			z-index:2;
			left:50%;
			margin-left:-339px;
			top:50%;
			margin-top:-276px;
			}
		#boussole {
			position:absolute;
			background:transparent url(boussole2.png);
			width:142px;
			height:134px;
			z-index:2;
			left:0px;
			bottom:0px;
			}
		#odio {
			position:absolute;
			top:66px;
			left:50%;
			margin-left:-25%;
		}