/* Définition des polices personnalisées */

@font-face
{
    font-family: 'BallparkWeiner';
    src: url('mespolices/policestp/ballpark.eot');
    src: url('mespolices/policestp/ballpark.eot?#iefix') format('embedded-opentype'),
         url('mespolices/policestp/ballpark.woff') format('woff'),
         url('mespolices/policestp/ballpark.ttf') format('truetype'),
         url('mespolices/policestp/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face
{
    font-family: 'Dayrom';
    src: url('mespolices/policestp/dayrom.eot');
    src: url('mespolices/policestp/dayrom.eot?#iefix') format('embedded-opentype'),
         url('mespolices/policestp/dayrom.woff') format('woff'),
         url('mespolices/policestp/dayrom.ttf') format('truetype'),
         url('mespolices/policestp/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}

/* éléments principaux de la page*/
body
{
	background: url("mesimages/imagestp/fond_jaune.png");
	font-family: "trebuchet MS",Arial,sans-serif;
	color: #181818;
}
#bloc_page
{
	width: 900px;
	margin: auto;
	/*border: 3px solid black;/* mis par BERE pr suivre les dimensions du design*/
}
section h1, footer h1, nav a
{
	font-family: Dayrom, serif;
	font-weight: normal;
	text-transform: uppercase;
}
/* Header*/
header
{
	background: url("mesimages/imagestp/separateur.png") repeat-x bottom;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	
}

#titre_principal
{
	display: flex;
	flex-direction: column;
	
}

#logo
{
	display: flex;
	flex-direction: row;
	align-items: baseline;
	
}
#logo img
{
	width: 59px;
	height: 60px;
	
}
header h1
{
	font-family: 'BallparkWeiner',serif;
	font-size:2.5em;
	font-weight:normal;
	margin: 0 0 0 10px;
}
header h2
{
	font-family: dayrom, serif;
	font-size: 1.1em;
	font-weight: normal;
	margin-top: 0px;
}

nav ul
{
	list-style-type: none;
	display: flex;
}
nav li
{
	margin-right: 15px;
}
nav a
{
	font-size: 1.3em;
	color: #181818;
	padding-bottom: 3px;
	text-decoration: none;
}
nav a:hover
{
	color: #760001;
	border-bottom:3px solid #760001;
}
/*bannière*/
#banniere_image
{
	background: url("mesimages/imagestp/sanfrancisco.jpg")no-repeat;
	height: 200px;
	border-radius: 5px;
	position: relative;
	margin-bottom: 25px;
	margin-top: 15px;
	box-shadow: 0px 4px 4px #1c1a19;
	
}

#banniere_description
{
	position: absolute;
	bottom: 0;
	border-radius: 0px 0px 5px 5px;
	width: 99.5%;
	height: 33px;
	padding-top: 15px;
	padding-left: 4px;
	background-color: rgba(24,24,24,0.8);
	color: white;
	font-size: 0.8em;	
}
.bouton_rouge
{   
    display: inline-block;
	height: 25px;
	position: absolute;
	right: 5px;
	bottom: 5px;
	background: url("mesimages/imagestp/fond_degraderouge.png") repeat-x;
	border: 1px solid #760001;
	border-radius: 5px;
	font-size: 1.2em;
	text-align: center;
	padding: 3px 8px 0px 8px;
	color: white;
	text-decoration: none;
}
.bouton_rouge img
{   
	border: 0;
	padding: 3px 8px 0px 6px;/* ajouter par moi BERE ne figure pas dans le code de MATHEO*/
}
/*Corps*/
section
{
	
	display: flex;
	margin-bottom: 20px;
}
article, aside
{
	text-align: justify;
}
article
{
	
	margin-right: 20px;
	flex:3;
}
.ico_categorie
{
	vertical-align: middle;
	margin-right: 8px;
}
article p
{
	font-size: 0.8em;
}

aside
{
	
	flex: 1.2;
	position: relative;
	background-color: #706b64;
	box-shadow: 0px 2px 5px #1c1a19;
	border-radius: 5px;
	padding: 10px;
	color: white;
	font-size: 0.9em;
	height: 410px;/*pour limiter la hauteur du bloc ASIDE afin que ce bloc ne se rallonge pas en cas d'augmentation du texte par BERE*/
}
#photo_zozor
{
	text-align: center;
}
#photo_zozor img
{
	border: 1px solid #181818;
}
#fleche_bulle
{
	position: absolute;
	top:150px;
	left: -12px;
}
aside img
{
	margin-right: 3px;
}
/*pied de page*/
footer
{
	
    display: flex;
    background:  url('mesimages/imagestp/ico_top.png') no-repeat top center, url('mesimages/imagestp/separateur.png') repeat-x top, url('mesimages/imagestp/ombre.png') repeat-x top;
    padding-top: 25px; 
}
footer p, footer ul
{
	font-size: 0.8em;
	
}
footer h1
{
	font-size:1.1em;
}
#tweet
{
	width:28%;
}
#mes_photos
{
width:35%;	
}
#mes_amis
{
	width:31%;
}
#mes_photos img
{
	border: 1px solid #181818;
	margin-right: 2px;
}
#listes_amis
{
	display: flex;
	justify-content: space-between;
	margin-top: 0px;
}
#mes_amis ul
{
	list-style-image:url("mesimages/imagestp/ico_liensexterne.png");
	padding-left: 2px;
}
#mes_amis a
{
	color: #760001;
	text-decoration: none;
	
}