@font-face {
    font-family: 'LaconicLight';
    src: url('Font/Laconic_Light-webfont.eot');
    src: url('Font/Laconic_Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('Font/Laconic_Light-webfont.woff') format('woff'),
         url('Font/Laconic_Light-webfont.ttf') format('truetype'),
         url('Font/Laconic_Light-webfont.svg#LaconicLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

body
{
	color : white ;
	background-color : black ;
	font-family : 'LaconicLight', sans-serif ;
}

#style
{
	position : absolute ;
	top : 0 ;
	right : 10% ;
}

#style ul
{
	padding : 0 ;
	margin : 0 ;
}

#style li
{
	display : inline-block ;
	background-color : rgba(38,230,38,1) ;
	padding : 2px ;
	-webkit-transition : height 50ms ease ;
	border : solid black 1px ;
	height : 20px ;
	color : black ;
}

#style li:hover
{
	height : 30px ;
}

#style a
{
	text-decoration : none ;
	color : black;
}
#style a:hover
{
	text-decoration : underline ;
}


#conteneur
{
	margin : 50px auto;
	width : 800px ;
	padding : 1px ;
	position : relative ;
}

header
{

	height : 200px ;
	position : relative ;
	padding : 1px ;
}

#ban
{
	margin-top : 50px ;
	height : 150px ;
	padding : 1px ;
	position : relative ;
}

#presentation
{
	margin-left : 180px ;
	padding : 1px ;
	position : absolute ;
	bottom : 0 ;
}

#presentation h1, #presentation h2
{
	color : black ;
	background-color : rgb(239,0,147);
}

#presentation h1
{
	margin : 3px 0;
	width : 200px ;
	font-size : 1.5em ;
}

#presentation h2 {
	font-size : 1.2em ;
}

#presentation h2:first-of-type
{
	margin : 3px 0 ;
	width : 150px ;
}

#presentation h2:nth-of-type(2)
{
	margin : 3px 0 ;
	width : 250px ;
}

#presentation h2:nth-of-type(3)
{
	margin : 3px 0 ;
	width : 350px ;
}

#infos
{
	position : absolute ;
	width : 200px ;
	right : 10px ;
	top : 0 ;
	padding-top : 200px ;
}

#infos a
{
	text-decoration : none ;
	color : rgb(38,230,38) ;
	position : relative ;
	bottom : 1px ;
}

#infos a:hover
{
	font-style : italic ;
}

#numero
{
	color : rgb(38,230,38) ;
}

#numero:hover
{
	font-style : italic ;
}

.item_infos
{
	width : 80% ;
	margin : 0 auto 20px ;
	word-wrap : break-word ;
}

.item_infos h4
{
	margin : 5px 0;
	color : rgb(239,0,147); 
	text-align : center ;
}

.item_infos p
{
	margin : 5px 0;
}

.item_infos ul
{
	padding : 0 ;
	margin : 5px 0 ;
}

.item_infos li
{
	color : rgb(38,230,38) ;
	display : inline-block ;
	margin : auto 2px ;
}

.item_infos li:hover
{
	font-style : italic ;
}

#photo
{
	height : 200px ;
	width : 150px ;
	position : absolute ;
	top : 0 ;
	left : 25px ;
	background: url('profile_pic_mini2.JPG');
	background-size: cover;
	background-position-y: 30%;
	background-color : rgba(0,0,0,0.5);
}

#corps
{
	width : 580px ;
}

#corps h2
{
	color : rgb(38,230,38);
}

.section
{
	border-left : solid 3px rgb(239,0,147) ;
	padding : 0 10px;	
	text-align : justify ;
}

.section h3
{
	margin : 10px 0;
	display : inline-block;
	vertical-align : middle ;
}

.date
{
	color : rgb(38,230,38) ;
	font-size : 0.8em ;
}

.section p
{
	margin : 20px auto;
}

.section h4
{
	margin : 10px 0;
	font-style : italic ;
}

.section:nth-of-type(1)
{
	margin-bottom : 50px ;
}

.section a {
	text-decoration : none ;
	color : inherit ;
}

.section  p a {
	text-decoration : underline ;
	color : inherit ;
}

.section a:hover {
	text-decoration : underline ;
	color : rgb(239,0,147) ;
}

.xtend {
	font-weight : bold ;
	color : white ;
	padding : 5px ;
	width : 80px;
	margin-left : 20px ;
	margin-bottom : 30px ;
	text-align : center ;
	cursor : pointer ;
	border : 2px solid rgb(239,0,147) ;
}


.plus {
	display : none ;
	margin-left : 20px ;
	margin-top : 30px ;
	margin-bottom : 30px ;
}

.plus ul li {
	margin-bottom : 10px ;
}

.plus ul li {
	list-style-type : square ;
}