/*
	CSS pour la version 2014 avec bibliographie

*/
@font-face {
	font-family: 'League Gothic Regular';
	src: url('webfonts/League_Gothic.eot');
	src: local('League Gothic Regular'), local('LeagueGothic'), url('webfonts/League_Gothic.woff') format('woff'), url('webfonts/League_Gothic.svg#LeagueGothic') format('svg'), url('webfonts/League_Gothic.otf') format('opentype');
}

@font-face {font-family: 'Encorpada-Black';src: url('webfonts/1A4A1A_0_0.eot');src: url('webfonts/1A4A1A_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/1A4A1A_0_0.woff') format('woff'),url('webfonts/1A4A1A_0_0.ttf') format('truetype');
}

body {
	background: url(../img/ligne_haut.png) top repeat-x, url(../img/ligne_bas_20px.png) bottom repeat-x;
	/* border: 1px solid green; */
	color: #666;
	height: 100vh;
}

* {
	margin: 0;
	padding: 0;
}

header {
	/* Titre + 2 mots */
	position: absolute;
	left: 12px;
	/* top: 125px; */
	top: 80px;
	z-index: 20;
	/* border: 1px solid red; */
}
header h1 {
	font: 100px Georgia,"Times New Roman", Times, serif ;
	font-weight: bold;
	font-style: italic;
	line-height: 100px;
	/*background:  url(../img/albert.png) no-repeat 5px 0px, url(../img/fond_blanc_80.png);*/
	background:  url(../img/albert_vert.png) 4px 0px, url(../img/fond_blanc_80.png);
	/* width: 310px; */
	width: 319px;
	/* height: 70px; */
	height: 91px;
	/* border: 1px solid red; */
	text-indent: -2000px;
	margin-left: 18px;
}
header h1 a, header h2 a {
	/* border: 1px solid red; */
	width: 100%;
	height:100%;
	display:block;

}
header h2 {
	color: #b0b0b0;
	font: 150px Georgia,"Times New Roman", Times, serif ;
	font-weight: bold;
	font-style: italic;
	line-height: 80px;
	margin-left: 18px;
	margin-top: 13px;
	/*
width: 630px;
	height: 90px;
*/
	width: 640px;
	height: 97px;
	padding-top: 2px;
	/* background: url(../img/marcoeur.png) 3px 2px, url(../img/trame_points.png); */
	background: url(../img/marcoeur_vert.png) 3px 2px, url(../img/trame_points.png);
	/* border: 1px solid blue; */
	text-indent: -2000px;
}
header p {
	/* font-family: Encorpada-Black; */
	font-size: 60px;
	font-style: italic;
	font-weight: normal;
	text-align: right;
	margin-right: 321px;
	margin-top: 20px;
	line-height: 75px;
	color: #606060;
	/* background: white; */
}
header p span {
	background: url(../img/fond_blanc_80.png);
	padding: 0 5px 0 5px;
}





/* CONTENT */
.content article, .content>div {
	font: 14px/15px "Crimson Text", serif;
}
.content p {
	/* width: 299px; */
	margin-bottom: 10px;
	/* font: 14px/18px "Times New Roman", Georgia, serif; */
	font: 14px/15px "Crimson Text", serif;
	/*font-family: 'Tinos', serif */
	font-style: normal;
	word-wrap: break-word;
	font-weight: 100;
}

.content h2 {
	/* width: 299px; */
	top: 1px;
	position: relative;
	color: #fff;
	/* background-color: #404040; */
	background-color: #0084F1;
	padding: 4px 5px 2px 5px;
	text-indent: 5px;
	display: inline;
	font: 16px Encorpada-Black;
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	font-weight: normal;
	font-style: normal;

}

.content h3 {
	/* width: 299px; */
	margin-top: 2px;
	text-indent: 5px;
	padding-top: 2px;
	color: #444444;
	/* font-weight: bold; */
	font: 18px/22px Encorpada-Black;

	font-weight: normal;
	font-style: normal;
}

.content h3.album_titre{
	text-indent: 4px;
	font: 22px 'League Gothic Regular';
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	text-transform: uppercase;
	font-weight: normal;
	font-style: normal;
	margin: -1px 0 1px 0px;

}
.content h4 {
	text-indent: 5px;
	padding-bottom: 5px;
	color: #666666;
	width: 299px;
	font: 15px "Times New Roman", Georgia, Times, serif;
	/* font-weight: bold; */
	font-style: italic;
	font-smooth: never;
}
.content h5 {
	/* text-indent: 5px; */
	margin-top: -2px;
	padding-bottom: 5px;
	color: #666666;
	width: 299px;
	font: 12px/16px "Times New Roman", Georgia, Times, serif;
	/* font-weight: bold; */
	font-style: italic;
}
.content h6 {
	/* width: 299px; */

	margin-top: 12px;
	color: #fff;
	background-color: #666;
	padding: 2px 5px 0px 5px;
	text-indent: 5px;
	/* display: inline; */
	/* font: 14px/16px Encorpada-Black; */
	font: 16px/26px 'League Gothic Regular';
	-webkit-font-smoothing: antialiased;
	font-smoothing: antialiased;
	font-weight: normal;
	font-style: normal;
	text-transform: uppercase;

}
/* titre des histoires */
.content h6 a{
	text-decoration: none;
	color: inherit;
	/* border: 1px solid red; */
}
.inv {
	background-color: #808080;
	color: #fff;
	padding: 0 3px 1px 3px;
	font-style: normal;
}
.content #credit_album {
	margin-top: 10px;
}
.content #credit_album strong {
	font-weight: bold;
	color: #0084F1;
}
#credit_album em {
	font-style: normal;
	font-weight: bold;
	color: #000;
}


/* INFOS */
section#infos,
article#infos {
	height: 164px;
	position: relative;
/* 	width: 315px; */
	width: 100%;
	top: 0px;
	/* margin-top: 45px; */
	word-wrap: break-word;
	overflow-y: hidden;
}

section#infos a,
article#infos a {
	position: relative;
	width: 48px;
	height: 48px;
	left: 50%;
	margin-left: -24px;
	/* border: 1px solid red; */
	background: url(../img/bdc_telechar3.gif) 0 0;
	margin-top: -5px;
}
section#infos a:hover,
article#infos a:hover {
	background: url(../img/bdc_telechar3.gif) 0 -58px;
}

section#infos a.telechar,
article#infos a.telechar {
	position: absolute;
	width: 48px;
	height: 48px;
	text-indent: -2000px;
}

#info {
	/* font-size: 13px;
	line-height: 15px; */
	font-style: italic;
	word-wrap: break-word;
	/* color: #ff006c; */
}

#info em{
	letter-spacing: normal;
	color: #333333;
}

/*	COLONNES	*/
section#col1,
article#col1 {
 	top: 288px;
	bottom: 0px; /* S'étend jusqu'en bas du conteneur parent */
	position: absolute; /* Position absolue pour ne pas être affecté par le flux de #infos */
	left: 0;
	right: 0;
	/* height calculée automatiquement avec top et bottom */
	/* height: calc(100vh - 328px); */
	overflow-y: scroll;
	overflow-x: hidden;
/* 	width: 315px; */
	width: 100%;
}
.signal {
	width: 299px;
	height: 50px;
	background:  transparent url(../img/degrad_overflow.png) 0 bottom repeat-x;
	z-index: 100;
	display: none;
	bottom: 20px;
	position: fixed;
}

/* màj largeur cause scroll*/
section#col2, section#col3, section#col4,
article#col2, article#col3, article#col4 {
	/* plus nécessaire en 2017 sur mac*/
/* 	width: 315px; */
}

/* GALERIE PHOTOS */
#galerie ul { list-style: none; }
#galerie ul li { display: inline; margin: -2px -1px -2px -2px; margin: 0;}
#galerie img {padding: 0; margin: 0 1px -2px 0; border: 0; width: 59px; margin:-2px -1px 0px -1px}

article img {
	position: relative;
	width: 299px;
}

@media (-webkit-min-device-pixel-ratio: 1.5), /* Webkit */
       (min-resolution: 1.5dppx) {             /* The Future */
/*
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
*/

	header h1 {
		background:  url(../img/albert_vert@2x.png) 4px 0px, url(../img/fond_blanc_80.png);
		background-size: 310px 91px;
		position: fixed;
		top: 5rem;
		left: 0.7rem;
	}
	header h2 {
		background: url(../img/marcoeur_vert@2x.png) 4px 0px, url(../img/trame_points.png);
		background-size: 631px 97px;
		position: fixed;
		top: 11rem;
		left: .7rem;
	}

	section#infos a,
	article#infos a {
		background: url(../img/bdc_telechar3@2x.gif) 0 0;
		background-size: 48px 106px; /* remettre la taille originale du media*/
	}
	section#infos a:hover,
	article#infos a:hover {
		background: url(../img/bdc_telechar3@2x.gif) 0 -164px;
		background-size: 48px 106px; /* remettre la taille originale du media*/
	}
}

sup {
	font-size: 6px;
}