/**************
*** POLICES ***
**************/

/*	Gribouillis : 3 6
	Original : 9 18
	Très sobre : 10 14 12 Calibri	*/

@font-face {	font-family:'IvPub_menu';		src:url('../font/OldNewspaperTypes.eot?') format('eot'), url('../font/OldNewspaperTypes.ttf') format('truetype');	}
@font-face {	font-family:'IvPub_body_10';	src:url('../font/weblysleekuil.ttf') format('truetype');				}
/*
@font-face {	font-family:'IvPub_body_1';		src:url('../font/JPHSL.ttf') format('truetype');						}
@font-face {	font-family:'IvPub_body_2';		src:url('../font/SPLURGE_.ttf') format('truetype');	font-weight:normal;	}
@font-face {	font-family:'IvPub_body_2';		src:url('../font/SPLURGEB.ttf') format('truetype');	font-weight:bold;	}
@font-face {	font-family:'IvPub_body_3';		src:url('../font/aKa.ttf') format('truetype');							}
@font-face {	font-family:'IvPub_body_4';		src:url('../font/SecondLyrics.ttf') format('truetype');					}
@font-face {	font-family:'IvPub_body_5';		src:url('../font/arsenale_white.ttf') format('truetype');				}
@font-face {	font-family:'IvPub_body_6';		src:url('../font/OctemberScript.ttf') format('truetype');				}
@font-face {	font-family:'IvPub_body_7';		src:url('../font/ParmaPetit-Normal.ttf') format('truetype');			}
@font-face {	font-family:'IvPub_body_8';		src:url('../font/romance fatal serif 2013.ttf') format('truetype');		}
@font-face {	font-family:'IvPub_body_9';		src:url('../font/CaviarDreams.ttf') format('truetype');					}
@font-face {	font-family:'IvPub_body_11';	src:url('../font/GeosansLight.ttf') format('truetype');					}
@font-face {	font-family:'IvPub_body_12';	src:url('../font/LinBiolinum_R.ttf') format('truetype');				}
@font-face {	font-family:'IvPub_body_13';	src:url('../font/PetitaMedium.ttf') format('truetype');					}
@font-face {	font-family:'IvPub_body_14';	src:url('../font/PetitaLight.ttf') format('truetype');					}
@font-face {	font-family:'IvPub_body_15';	src:url('../font/eurof55.ttf') format('truetype');						}
@font-face {	font-family:'IvPub_body_16';	src:url('../font/eurof25.ttf') format('truetype');						}
@font-face {	font-family:'IvPub_body_17';	src:url('../font/Desereted.ttf') format('truetype');					}
@font-face {	font-family:'IvPub_body_18';	src:url('../font/primer print.ttf') format('truetype');					}
@font-face {	font-family:'IvPub_body_19';	src:url('../font/Santana.ttf') format('truetype');						}
@font-face {	font-family:'IvPub_body_20';	src:url('../font/damase_v.2.ttf') format('truetype');					}
@font-face {	font-family:'IvPub_body_21';	src:url('../font/RomanSerif.ttf') format('truetype');					}
@font-face {	font-family:'IvPub_body_22';	src:url('../font/GoudyBookletter1911.ttf') format('truetype');			}
@font-face {	font-family:'IvPub_body_23';	src:url('../font/centabel.ttf') format('truetype');						}
@font-face {	font-family:'IvPub_body_24';	src:url('../font/LinLibertine_R.ttf') format('truetype');				}
*/

/*************
*** GLOBAL ***
*************/


span.ivpub {
	font-variant : small-caps;
}

body {
	background-color : black;
	color : white;
	font-family : IvPub_body_10;
	font-size : 1em;
	text-align : justify;

}

#page_container {
	position : absolute;
	top : 0;
	left : 0;
	width : 100%;
}

#titre_subcontainer {
	position : relative;
	top : 10px;
	margin-right : 220px;
}

#page_subcontainer {
	position : relative;
	top : 120px;
	left : 0;
	margin-right : 220px;
}

a {
	color : white;
	text-decoration : none;
	cursor : pointer;
}
a.texte {
	font-weight : bold;
}
a:hover {
	text-decoration : underline;
}
.mobile-act {
   pointer-events: none;
   cursor: default;
}

.hidden {
	display : none;
}

.details {
	font-size : 0.75em;
}

.encadre {
	border : solid 2px #460000;
	padding : 10px;
}
.mobile-true {
   display : none;
}

@media (max-width:800px), (max-height:500px) {
	#titre_subcontainer {
		margin-right : 160px;
	}
	#page_subcontainer {
		margin-right : 160px;
	}
}
@media handheld,
only screen and (max-width:500px),
only screen and (max-device-width:980px),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (-webkit-min-device-pixel-ratio: 1.5)
{
	body {
		font-size : 2em;
	}
	#page_container {
	}
	#titre_subcontainer {
		width : 100%;
		margin-right : 0;
		font-size : 1.5em;
	}
	#page_subcontainer {
		position : absolute;
		top : 9em;
		width : 100%;
		height : 100%;
	}
	.encadre {
		border : solid 0.25em #460000;
		padding : 0.5em;
	}
	.mobile-act {
		pointer-events: all;
		cursor: pointer;
	}
	.mobile-desact {
		pointer-events: none;
		cursor: default;
	}
	.mobile-false {
	   display : none;
	}
	.mobile-true {
	   display : block;
	}
	#closebox {
		top : 0.25em;
		right : 2.5%;
		width : 2em;
		height : 2em;
		background-color : white;
		background-image : url(../images/closebox.png);
		background-size : 100% 100%;
		cursor: pointer;
		opacity : .8;
		filter : alpha(opacity=80);
	}
}

/**************
*** Z-INDEX ***
**************/

#page_container {
	z-index : -5;
}
#image1, #image22, #image23, #image3, #image41, #image42, #image51, #image6 {
	z-index : -4;
}
#bandeau, #menu,
#audio-titre {
	z-index : -3;
}
#titre_container, #titre_subcontainer, #titre {
	z-index : -2;
}
#texte1,
#titre21, #texte21,
#menu22, #titre22, #texte22,
#menu23, #titre23, #texte23,
#texte3,
#texte41,
#texte6 {
	z-index : 0;
}
#menu22,
#menu23 {
	z-index : 1;
}
#fond {
	z-index : 2;
}
#texte42 {
	z-index : 3;
}
#media, #player {
	z-index : 3;
}
#video, #photo, #film, #deezer, #musique, #playlist, #audio  {
	z-index : 4;
}
#closebox, #panorama-left, #panorama-right {
	z-index : 5;
}


/************
*** TITRE ***
************/

#titre {
	position : relative;
	width : 450px;
	margin : auto;
	height : 100%;
	font-family : IvPub_menu;
	font-variant : small-caps;
	font-size : 1.85em;
	text-align : center;
}
#titreA {
	position : absolute;
	top : 0;
	left : 0;
	transform-origin : left bottom;
	-webkit-transform-origin : left bottom;
	animation : anim-titleA .5s linear;
	-webkit-animation : anim-titleA .5s linear;
}
#titreB {
	position : absolute;
	top : 0;
	left : 180px;
	transform-origin : right bottom;
	-webkit-transform-origin : right bottom;
	animation : anim-titleB 1s linear;
	-webkit-animation : anim-titleB 1s linear;
}
#titreC {
	position : absolute;
	top : 0;
	left : 310px;
	transform-origin : right bottom;
	-webkit-transform-origin : right bottom;
	animation : anim-titleC 1.5s linear;
	-webkit-animation : anim-titleC 1.5s linear;
}
#titre0 {
	display : none;
}

@media (max-width:800px), (max-height:500px) {
}
@media handheld,
only screen and (max-width:500px),
only screen and (max-device-width:980px),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (-webkit-min-device-pixel-ratio: 1.5)
{
	#titre {
		margin : auto;
		width : 100%;
		background-color : white;
		cursor : pointer;
	}
	#titre {
		color : black;
	}
	#titre0 {
		display : block;
	}
	#titreA {
		display : none;
	}
	#titreB, #titreC {
		position : relative;
		left : 0px;
		animation : none;
		-webkit-animation : none;
	}
}


/***********
*** MENU ***
***********/

#bandeau
{
		position : fixed;
	font-family : IvPub_menu;
	right : 0px;
	text-align : left;
		bottom : 0px;
		font-variant : small-caps;
		width : 200px;
}
#menu
{
		font-size : 1.1em;
		position : fixed;
		bottom : 10px;
		right : 0px;
}
#logo {
	margin : 0 5px 5px auto;
	background: url(../images/logo.png) 0 0 no-repeat; 
	background-size : 100%;
		height: 159px;
		width: 173px;
}
#star {
	position : relative;
	left : 37px;
	top : 71px;
		left : 37px;
		top : 71px;
		width : 31px;
}

#elem1, #elem2, #elem3, #elem4, #elem5, #elem6, #elem7
{
	text-align : left;
	background-color : white;
	border : solid 1px black;
	font-size : 1.5em;
	padding : 5px;
}

#elem21, #elem22, #elem23,
#elem41, #elem42,
#elem51 {
	background-color : white;
	border : solid 1px black;
	font-size : 1em;
}

#menu a {
	color : black;
}

.elem1_select, .elem2_select, .elem3_select, .elem4_select, .elem5_select, .elem6_select,
.elem21_select, .elem22_select, .elem23_select, .elem41_select, .elem42_select, .elem51_select,
.elem221_select, .elem222_select, .elem223_select, .elem224_select,
.elem231_select, .elem232_select, .elem233_select, .elem234_select,
.elem511_select, .elem512_select
{
	text-decoration : underline;
}

.smenu2_on {
	height : 70px;
	z-index : -100;
	animation : anim-menu70-on 0.5s linear;
	-webkit-animation : anim-menu70-on 0.5s linear;
}
.smenu2_off {
	height : 0px;
	position : relative;
	top : -5000px;
	z-index : -100;
	animation : anim-menu70-off 0.2s linear;
	-webkit-animation : anim-menu70-off 0.2s linear;
}
.smenu4_on {
	height : 40px;
	animation : anim-menu40-on 0.5s linear;
	-webkit-animation : anim-menu40-on 0.5s linear;
}
.smenu4_off {
	height : 0px;
	position : relative;
	top : -5000px;
	z-index : -100;
	animation : anim-menu40-off 0.2s linear;
	-webkit-animation : anim-menu40-off 0.2s linear;
}
.smenu5_on {
	height : 20px;
	animation : anim-menu20-on 0.5s linear;
	-webkit-animation : anim-menu20-on 0.5s linear;
}
.smenu5_off {
	height : 0px;
	position : relative;
	top : -5000px;
	z-index : -100;
	animation : anim-menu20-off 0.2s linear;
	-webkit-animation : anim-menu20-off 0.2s linear;
}

#elem21 {
	z-index : 1;
	margin-left : 30px;
	transform :  rotate(-7deg);
	-webkit-transform : rotate(-7deg);
}

#elem22 {
	z-index : 2;
	margin-left : 60px;
	transform :  rotate(4deg);
	-webkit-transform : rotate(4deg);
}

#elem23 {
	z-index : 3;
	margin-left : 25px;
	transform :  rotate(12deg);
	-webkit-transform : rotate(12deg);
}
/*
#elem24 {
	z-index : 1;
	margin-left : 40px;
	transform :  rotate(5deg);
	-webkit-transform : rotate(5deg);
}
*/
#elem41 {
	z-index : 2;
	margin-left : 30px;
	transform :  rotate(3deg);
	-webkit-transform : rotate(3deg);
}

#elem42 {
	z-index : 1;
	margin-left : 20px;
	transform :  rotate(-3deg);
	-webkit-transform : rotate(-3deg);
}
#elem51 {
	z-index : 1;
	margin-left : 50px;
	transform :  rotate(-5deg);
	-webkit-transform : rotate(-5deg);
}

@media (max-width:800px), (max-height:500px) {
	#bandeau {
		position : absolute;
		top : 0;
		padding-right : 0;
		font-size : 0.7em;
		width : 170px;
	}
	#menu
	{
		position : absolute;
		top : 20px;
	}
	#logo {
		margin : 0 5px 5px auto;
		height: 79.5px;
		width: 86.5px;
	}
	#star {
		left : 18.5px;
		top : 35.5px;
		width : 15.5px;
	}
}
@media handheld,
only screen and (max-width:500px),
only screen and (max-device-width:980px),
only screen and (min-device-pixel-ratio: 1.5),
only screen and (-webkit-min-device-pixel-ratio: 1.5)
{
	#bandeau {
		position : absolute;
		top : 6em;
		left : 0px;
		width : 100%;
		padding : 0;
		font-size : 1.5em;
	}
	#bandeau.actif {
		display : none;
	}
	#menu {
		position : relative;
		margin : 1em 2em 1em 2em;
		top : 0;
		left : 0;
		font-size : 0.7em;
		text-align : center;
		font-variant : small-caps;
	}
	#logo, #star {
		display : none;
	}
	#elem1, #elem2, #elem3, #elem4, #elem5, #elem6, #elem7 {
		margin : 0.1em 1em 0 0;
		padding : 0.2em 0 0.2em 0.3em;
		animation : none;
		-webkit-animation : none;
		text-align : left;
		border : solid 1px black;
	}
	#smenu2, #smenu4, #smenu5 {
		display : block;
		top : 0px;
		animation : none;
		-webkit-animation : none;
	}
	#smenu2 div, #smenu4 div, #smenu5 div {
		margin : 0.1em 0 0 1em;
		padding : 0.2em 0.2em 0.3em 0;
		top : 0px;
		margin-left : 1em;
		text-align : right;
		transform : none;
		-webkit-transform : none;
		border : solid 1px black;
		background-color : white;
	}
	#image0 {
		width : 100%;
		position : relative;
		bottom : 0;
		text-align : center;
	}
	#image0 img {
		width : 90%;
	}
}