/* Definition des polices personnalisees */
@font-face2 (fake!)
{
    font-family: 'BallparkWeiner';
    src: url('polices/ballpark.eot');
    src: url('polices/ballpark.eot?#iefix') format('embedded-opentype'),
         url('polices/ballpark.woff') format('woff'),
         url('polices/ballpark.ttf') format('truetype'),
         url('polices/ballpark.svg#BallparkWeiner') format('svg');
    font-weight: normal;
    font-style: normal;
}
 
@font-face
{
    font-family: 'Dayrom';
    src: url('polices/dayrom.eot');
    src: url('polices/dayrom.eot?#iefix') format('embedded-opentype'),
         url('polices/dayrom.woff') format('woff'),
         url('polices/dayrom.ttf') format('truetype'),
         url('polices/dayrom.svg#Dayrom') format('svg');
    font-weight: normal;
    font-style: normal;
}
                */

/* Elements principaux de la page */

body
{
    /*background: url('images/fond_index.jpg');*/
    font-family: 'Trebuchet MS', Arial, sans-serif;
    color: #181818;
}


 header h2
 {
    font-family: Dayrom, serif;
    font-weight: normal;
    color: red;
}
 
 header
{
    /* mettre une image en filigrane */
        /* background: url('xxx.jpg') repeat-x bottom;*/
}
 
#fl_menu
{
    position:absolute; 
    top:100px; 
    left:30px; 
    z-index:9999; 
    width:150px; 
    height:50px;
}   

#bloc_page  /* le bloc qui englobe toute la page */

{
    width: 84%;
    margin: auto;
    /* centrage du design */
}

 section h1, footer h1, nav a
{
    font-family: Dayrom, serif;
    font-weight: normal;
    color: red;
}

article h1, aside h1
{
    font-family: Dayrom, serif;
    font-weight: bold;
    color: red;
    font-size: 1.5em;
}

strong
{
   /* attention positionnement relatif inline*/
   background-color: black; 
   color: yellow; 
}

/* Header */
 
#titre_principal
{
    display: inline-block;
}
 
header h1
{
    font-family: 'BallparkWeiner', serif;
    font-size: 2.5em;
    font-weight: normal;
}
 
#logo, header h1
{
    display: inline-block;
    margin-bottom: 0px;
}
 
header h2
{
    font-family: Dayrom, serif;
    font-size: 1.5em;
    font-weight: bold;
    padding-left: 110px;
    color: blue;
}

footer 
{
    font-size: 0.9em;
    color: green;
    text-decoration: none;
}

/* Navigation */
 
nav
{
        display: inline-block;
    width: 740px;
        text-align: right;
}
 
nav ul
{
    /* retirer l'image ronde servant de puce*/
        list-style-type: none;
}
 
nav li
{
        display: inline-block;
        margin-right: 15px;
}
 
nav a
{
        font-size: 1.3em;
        color: #181818;
        padding-bottom: 3px;
        text-decoration: none;
}
 
nav a:hover
{
        /*color: #760001;*/
    color: yellow;
    background-color: black;
        border-bottom: 3px solid #760001;
}
p{
    font-size: 1.2em !important;
}
 
#banniere_image
{
    margin-top: 15px;
    height: 245px;
    border-radius: 10px;
    background: url('logo3.jpg'); /*repeat-x*/
    position: relative;
    box-shadow: 0px 4px 4px #1c1a19;
    margin-bottom: 25px;
}
 
#banniere_description
{
    position: absolute;
    bottom: 0px;
    border-radius: 0px 0px 5px 5px;
    width: 100%;
    height: auto;
    padding-top: 8px;
    background-color: rgb(24,24,24); /* Pour les anciens navigateurs */
    background-color: rgba(24,24,24,0.5);
    color: yellow;
    font-size: 0.9em;
}
 
.bouton_rouge
{
    display: inline-block;
    height: 25px;
    position: absolute;
    right: 10px;
    bottom: 5px;
    background: url('images/degrade.jpg') 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;
}

.bouton_rouge:hover
{
    /*color: #760001;*/
    color: yellow;
    background-color: black;
    border-bottom: 3px solid #760001;
    /* ins�rer l'image du lien '/images/mail.png'  */
}

/* Corps */

 article h3
{
    font-size: 1.4em;
}
 article li
{
    font-size: 1.2em;
}
 
article
{
    display: inline-block;
    vertical-align: top;
    text-align: justify;
    display: inline-block;
    position: relative;
    width: 650px;
    padding-top: 15px;
    font-size: 0.8em;
}
  
  aside
{
    
    display: inline-block;
    vertical-align: top;
    text-align: justify;
    background-color: #bad7bb;
    box-shadow: 0px 2px 5px #1c1a19;
    border-radius: 5px;
    padding: 10px;
    color: black;
    font-size: 0.9em;
    margin-right: 15px;
    position: relative;
    width: 275px;
    
}

.ico_categorie
{
    vertical-align: middle;
    margin-right: 8px;
}
 

#fleche_bulle
{
    position: absolute;
    top: 100px;
    left: -12px;
}
 
#photo_zozor
{
    text-align: center;
}
 
#photo_zozor img
{
    border: 1px solid #181818;
}
 
aside img
{
    margin-right: 5px;
}

/* Correctifs pour les vieilles versions d'Internet Explorer */

/* Pour activer un positionnement type inline-block sur les vieilles versions d'IE */

.old_ie nav, .old_ie section, .old_ie#titre_principal, .old_ie#logo, header h1, .old_ienav li, .old_ie .bouton_rouge, .old_ie article, .old_ie aside
{
    display: inline;
    zoom: 1;
}


/* Quelques ajustements pour les vieilles versions d'IE */

.old_ie section h1, .ie8 section h1
{
    font-size: 1.1em;
}



@media screen and (max-width: 575px) {
  
    aside div img{width: 230px !important;}
 aside {font-size: 1em !important;width: 230px !important;}
  article {width: 250px;font-size: 1em !important;}
   article p img{width: 250px !important;}
   article img{width: 100% !important;}
  nav {width: 264px !important;}
  #titre_principal img{width: 220px;}
   #titre_principal {margin-left: 25px;}
  
  body {font-size: 1em !important;}
  #fl_menu{position:absolute; top:20px !important;width: 110px !important;}
  #banniere_image {width: 251px !important;}
  #banniere_description p{margin-top: -5px;}
}