@charset "utf-8";

body {
	font-family: Arial, Helvetica, sans-serif;
	background-color: #062331;
	background-image: url(../images/fond.jpg);
	background-repeat: repeat-x;
	color:#fff;
	margin: 0;
	padding: 0;
	overflow-x:hidden;
}

a { 
	color: #44879e;
	text-decoration:none;
}

img {
	border:none;
}

#pagewrapper {
	width: 980px;
	margin: 0 auto;
	padding:0;
	overflow:hidden;
}

#header {
	position:relative;
	height: 80px;
	z-index: 500;
	background: transparent url(../images/fond_header.png) 0 0 no-repeat;
}

.accueil #header {
	background:none;
}

.accueil #content {
	position:relative;
	background: transparent url(../images/fond_accueil.jpg) 0 0 no-repeat;
	height: 550px;
	margin: -80px 0 14px 0;
}

.home {
	position: absolute;
	top: 14px;
	left: 9px;
}

#social {
	position:absolute;
	width: 400px;
	top: 54px;
	left: 550px;
	z-index: 800;
}

#social a {
	float: right;	
}

#content {
	/*background: transparent url(../images/ombre.png) 0 0 no-repeat;*/
	width:980px;
	height: 680px;
	margin: -80px 0 0 0;
	overflow:hidden;
}

#langues {
	position:absolute;
	width: 240px;
	top: 0;
	left: 740px;
	z-index: 800;
}

#langues ul {
	list-style-type:none;
}

#langues ul li {
	float:left;
	margin: 0 15px 0 0;
	padding: 0;
	color: #44879e;
	cursor:pointer;
}

h1 {
	padding: 0;
	margin: 0;
	/*font-family: 'Rancho';*/
	font-family: 'Architects Daughter', cursive;
	font-weight: normal;
	font-size: 46px;
	text-shadow: 9px 9px 9px #071f2a;
	color: #fff;
}

h1 a {
	color: #fff;
}

.accueil #header h1 {
	position:absolute;
	top: 47px;
	left: 30px;
	font-size: 50px;
	line-height: 65px;
	width: 700px;
}

#header h1 {
	position:absolute;
	top: 8px;
	left: 72px;
}

/***** liens *****/

#lien1 {
	position:relative;
	float: left;
	width: 326px;
	height: 171px;
	background: transparent url(../images/fond_videos.jpg) 0 0 no-repeat;
	margin: 0;
}

#lien1 a {
	display:block;
	position:absolute;
	top: 30px;
	left: 119px;
	width: 107px;
	height: 107px;
	background: transparent url(../images/btn_vids.png) 0 0 no-repeat;
	/*font-family: 'Rancho';*/
	font-family: 'Architects Daughter', cursive;
	font-weight: normal;
	font-size: 22px;
	color: #fff;
	padding: 38px 0 0 0;
	margin: 0;
	text-align:center;
}

#lien2 {
	float: left;
	width: 326px;
	height: 171px;
	background: transparent url(../images/fond_notes.jpg) top center no-repeat;
	text-align: center;
}

#lien2:hover {
	cursor:pointer;
}

.lien3 {
	position:relative;
	float: left;
	width: 163px;
	height: 171px;
	background: transparent url(../images/fond_stores.jpg) top right no-repeat;
}

#lien2 h3 {
	/*font-family: 'Rancho';*/
	font-family: 'Architects Daughter', cursive;
	font-weight: normal;
	font-size: 24px;
	color: #299da4;
	padding: 55px 0 0 0;
	margin: 0 auto;
	width: 170px;
	line-height: 105%;
}

#footer {
	float:left;
	width: 100%;
	margin: 15px 0 0 0;
}

#footer p {
	text-align:center;
	font-size: 0.8em;
}

.appstore, .play {
	position:absolute;
	left: 13px;
	top: 12px;
}

.qrplay,.qrstore  {
	position:absolute;
	left: 36px;
	top: 66px;
}



.livre {
	position:absolute;
	left: 690px;
	top: 160px;
}

.livre img {
	position:absolute;
}

.livre span {
	position:absolute;
	/*font-family: 'Rancho';*/
	font-family: 'Architects Daughter', cursive;
	font-weight: normal;
	font-size: 24px;
	color: #e6ca9c;
	padding: 0;
	margin: 0;
	width: 250px;
	top: 190px;
	text-align:center;
}

#pagesnav {
	float:left;
	width:1024px;
	height: 65px;
	padding: 0;
	z-index:900;
}

#pagesnav ul {
	list-style-type:none;
	padding: 0;
	margin: 16px auto;
	width: auto;
}

#pagesnav li {
	float:left;
	margin: 0 15px 0 0;
	padding: 5px;
	border: 1px solid #10526a;
	width: 20px;
	height: 20px;
	text-align:center;
}

#pagesnav li.txt_scenes {
	width:auto;
}

#scene {
	position:relative;
	width: 980px;
	height: 680px;
	margin: 0;
	z-index:400;
	overflow:hidden;
}

#texte {
	position:absolute;
	z-index: 1000;
	width: 850px;
	height: auto;
	left: 65px;
	top: 545px;
	/*background: transparent url(../images/fond_txt.png) 0 0 no-repeat;*/
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	/* Fallback for web browsers thaet doesn't support RGBa */
	background: rgb(255, 255, 255);
	/* RGBa with 0.6 opacity */
	background: rgba(255, 255, 255, 0.8);
	/* For IE 5.5 - 7*/
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff);
	/* For IE 8*/
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99ffffff, endColorstr=#99ffffff)";
}

#textesc {
	font-family: 'Architects Daughter', cursive;
	/*font-family: 'Rancho';*/
	font-weight: normal;
	font-size: 20px;
	line-height: 20px;
	color: #29636e;
	margin: 20px;
	padding:0;
}

#retour, #suite {
	position:absolute;
	top: 588px;
	z-index:1100;
}

#retour {
	left: 12px;
}

#suite {
	left: 925px;
}

#zoe {
	z-index: 501;
}

#txtCredits {
	position:absolute;
	top: 100px;
	width: 980px;
	height: 450px;
	overflow:auto;
}

/*** jPlayer ***/

ul.btnSon {
	position: absolute;
	z-index: 10000;
	margin: 0;
	padding: 0;
}

ul.btnSon li {
	list-style-type:none;
	position: absolute;
	top: 90px;
	left: 925px;
}

#jp_container_1 {
	position: absolute;
	width: 300px;
	height: 20px;
	top: 0px;
}

ul.jp-toggles {
	float:left;
}

.jp-time-holder, .jp-title, .jp-volume-max, .jp-pause, .jp-mute {
	display: none;
}

.jp-play, .jp-pause {
	position: absolute;
	top: 90px;
	left: 925px;
}

.jp-play {
	z-index: 1005;	
}

.jp-pause {
	z-index: 1006;	
}

.jp-no-solution {
	display:none;
}

/*** aide ***/

#help {
	position:absolute;
	top: 90px;
	left: 12px;
	z-index: 600;
}

#help img {
	position:absolute;
	z-index: 1000;
}

#help img:hover {
	cursor:pointer;
}

.textehelp {
	position:relative;
	width: auto;
	height: 36px;
	top: 5px;
	left: 32px;
	margin: 0;
	padding: 5px 15px;
	background: transparent url(../images/fond_help.png) top right no-repeat;
	white-space:nowrap;
	z-index: 999;
	text-transform:uppercase;
	font-size:12px;
	line-height: 24px;
}

#boutons a img {
	border: 6px solid #fff;
}

/* goutte */
#goutte {
	position: absolute;
	width: 44px;
	height: 65px;
	top: 80px;
	left: 868px;
	background: transparent url(../images/goutte.png) center center no-repeat;
}

#goutte p {
	margin: 25px 0 0 0;
	text-align:center;
	font-size: 18px;
}