body
{
  background: #EEEEEE   ;
  
  font-family: 'Sintony', sans-serif;

}

#zonecentrale
{
    position: relative;
    margin: auto;
    width: 900px;
    background: #EEEEEE;
	
}
#john{
    position: relative;
    font-family: 'Damion', cursive;
    top: 118px;
    font-size: xx-large;
    left: 34px;
}
#monlogo{
    position: absolute;
    top: 70px;
}
#etudiant{
    position: relative;
    top: 120px;
    font-weight: bold;
}
header
{
    position: relative;
}

hr{
position: relative;
}

#titre_principal
{
    width: 292px;
	height: 150px;
	background-color:#EEEEEE;
	display: inline-block;
    margin-right: 7px;
}


nav
{
    width: 596px;
    background-color:#EEEEEE;
    height:150px;
    display: inline-block;

}

nav a{
    color: black;
    text-decoration:none;
    position: relative;
    top: 115px;
    left: 295px;
    margin-right: 12px;
    font-weight: bolder;
    padding: 5px;
    text-underline-offset: 8px;
}
nav a:hover{
    color: darkred ;
    text-decoration: underline;
    cursor: pointer;
}
#banniere_image
{
    border-radius: 10px;
    height: 200px;
    background-image: url(images/batiment.jpg);
	background-color:red;
    box-shadow: 0px 2px 10px black;
}

#banniere_description
{
  
    height: 30px;
    position: relative;
    top: 170px;
    background-color: rgba(24,24,24,0.8);
    color: white;
    box-shadow: 0px 2px 10px black;
    border-radius: 10px;
}

article
{
    height: 500px;
	background-color:#EEEEEE;
    width: 596px;
    display: inline-block;
    margin-top: 12px;
}

#titre-intro{
    font-weight: bold;
}
#texte2{
    margin-top: auto;
}
#texte3{
    margin-top: auto;
}
#texte4{
    margin-top: auto;
}


aside
{
    margin-top: 12px;
    background-color: #706b64;
    width: 292px;
    position: absolute;
    right: 0px;
    height: 500px;
    display: inline-block;
    border-radius: 10px;
    box-shadow: 0px 2px 10px black;
}

#facebook{
    position: absolute;
    top: 430px;
    left: 25px;
}

#twitter{
    position: absolute;
    top: 430px;
    left: 75px;
}

#vimeo{
    position: absolute;
    top: 430px;
    left: 125px;
}

#flickr{
    position: absolute;
    top: 430px;
    left: 175px;
}

#rss{
position: absolute;
top: 430px;
left: 225px;
}

#titre{
    color: white;
    margin-left: 12px;
}

#illustration{
    position: absolute;
    left: 76px;
    border-color : black;
}
#texte{
    position: absolute;
    color: white;
    top: 195px;
    left: 12px;
}
#bulle{
    position: relative;
    right: 11px;
    top: 100px;
}






footer
{
   background-color:#EEEEEE;
}





#tweet
{
	background-color:#EEEEEE;
    width: 292px;
	height:125px;
	display: inline-block;
    margin-right: 7px;
    border-radius: 10px;
    box-shadow: 0px 2px 10px black;
    position: absolute;
}
#text-tweet{
    font-weight: bold;
    margin-left: 12px;  
}
#mes_photos
{
	background-color:#EEEEEE;
    width: 292px;
	height:125px;
	display: inline-block;
	margin-right: 7px;
    border-radius: 10px;
    box-shadow: 0px 2px 10px black;
    position: absolute;
    left: 300px;
}
#text-photo{
    font-weight: bold;
    margin-left: 12px;
}
#photo1{
    margin-left: 12px;
}
#photo2{
    margin-left: 12px;
}
#photo3{
    margin-left: 12px;
}
#photo4{
    margin-left: 12px;
}
#mes_liens
{
	background-color:#EEEEEE;
    width: 292px;
	height:125px;
	display: inline-block;
    border-radius: 10px;
    box-shadow: 0px 2px 10px black;
    position: relative;
    left: 600px;
}
#mes_lien a:hover{
    color: darkred ;
    text-decoration: underline;
    cursor: pointer;
}
ul a{
    text-decoration: none;
    color: black;
}
ul  a:hover{
    color: darkred;
    text-decoration: underline;
    text-underline-offset: 4px;
}
#ressources{
    font-weight: bold;
    margin-left: 12px;
}