@font-face {
	font-family: "slumlord";
	src: url("slumlord.ttf") format("truetype")
		}
@font-face {
	font-family: "tempus";
	src: url("tempus.ttf") format("truetype")
		}
		
html { height: 100%; }

body
{
background-image: url("interface/fond.webp");
background-attachment: fixed;
background-size: cover;
background-position-y: center;
background-position-x: center;
margin-top: 20px;
}

#principal
{
background-image: url("interface/fondnoir.png");
width: 900px;
margin: auto;
padding-top: 30px;
padding-bottom: 20px;
border-radius: 8px;

}

.membre
{
width: 250px;
border-radius : 125px;
border: 1px #FFFFFF solid;
margin-bottom: 5px;
}

.nommembre
{
font-weight: bold;
font-size: 18px;
color: #e1dcd5;
}

#intcentre
{
margin: auto;
width: 700px;
}


p {
color: #FFFFFF;
font-family: tempus;
text-shadow: #000000 1px 1px 1px;
margin-left: 15px;
margin-right: 15px;
}

.floatleft
{
float: left;
margin-left: 15px;
margin-right: 15px;
vertical-align: middle;
border: 1px #a48a73 solid;
}

.floatright
{
float: right;
margin-left: 15px;
margin-right: 15px;
vertical-align: middle;
border: 1px #a48a73 solid;
}

.imgcadre
{
border: 1px #a48a73 solid;
}

.textec {
text-align: center;
font-size: 16px;
}

.textejust {
text-align: justify;
}

#divsoustitre
{
background-image: url("interface/fondnoir.png");
width: 650px;
height: 24px;
margin: auto;
padding: 5px;
vertical-align: middle;
border-radius: 10px
}

#soustitre {
margin-top: 0px;
text-align: center;
font-size: 18px;
font-style: italic;
text-shadow: #000000 1px 1px 5px;
color: #FFFFFF;
font-family: tempus;
text-shadow: #000000 1px 1px 1px;
}

h1{
color: #FFFFFF;
text-align: center;
text-shadow: #a48a73 1px 1px 5px, #000000 1px 1px 5px;
font-family: slumlord;
font-size: 60px;
font-weight: normal;
margin-bottom: -20px;
}

h2{
text-align: center;
color: #FFFFFF;
text-shadow: #000000 1px 1px 1px;
font-family: tempus;
}

a {
color: #e1dcd5;
text-decoration: none;
font-weight: bold;
}
a:hover {
color: #FFFFFF;
font-weight: bold;
}


#couverture
{
width: 400px;
border: 1px #a48a73 solid;
box-shadow: 0px 0px 15px #a48a73;
}

#couverture:hover
{
border: 1px #ffffff solid;
box-shadow: 0px 0px 20px #ffffff;
}

#banniere
{
width: 900px;
height: 202px;
background-image: url("interface/banniere.jpg");
border-top: 1px #a48a73 solid;
border-bottom: 1px #a48a73 solid;
vertical-align: middle;
background-position-y: -70px;
background-position-x: -50px;
}

ol
{
color: #FFFFFF;
line-height: 1.75;
text-shadow: #000000 1px 1px 1px;
}

#telecharger
{
width: 500px;
border: 1px #a48a73 solid;
background-color: black;
box-shadow: 0px 0px 15px #a48a73;
margin:auto
}

#telecharger:hover
{
border: 1px solid white;
box-shadow: 0px 0px 20px #ffffff;
}

h3 {
	color: #FFFFFF;
	margin-top: 10px;
    position: relative;
    font-size: 20px;
    z-index: 1;
    overflow: hidden;
    text-align: center;
	text-shadow: #000000 1px 1px 1px;
}
h3:before, h3:after {
    position: absolute;
    top: 51%;
    overflow: hidden;
    width: 50%;
    height: 1px;
    content: '\a0';
    background-color: #a39d92;
}
h3:before {
    margin-left: -55%;
    text-align: right;
}
h3:after {
    margin-left: 5%;
    text-align: right;
}

input {
	background-color: #4e4646;
	border: 1px #FFFFFF solid;
	color: #FFFFFF;
	border-radius: 4px;
}
textarea {
	background-color: #4e4646;
	border: 1px #FFFFFF solid;
	color: #FFFFFF;
	border-radius: 4px;
}
hr {
	border: 0;
    height: 1px;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0));

}