/* DESIGN */

#topmenu {
    cursor: crosshair;

    width: 950px;
    margin-left:auto;
    margin-right:auto;
    margin-top:20px; /* SUPER important pour pouvoir descendre le texte du menu; vertical-align ne fonctionne pas */

    font-size: 12px;
    font-weight:bolder;
    text-transform: uppercase;
    text-shadow: 2px 2px 2px #000;  /* 2px right, 2px below, 2px blur */
}
    #topmenutext{
        width:650px; /* pour empêcher l'overflow par dessus le dessin dans le layout */
        /* border:1px solid white; /* debug */
    }
            #topmenutext a{
                cursor: crosshair;
                color: white;
                padding-left:10px;
                padding-right:10px;
                padding-top:20px; /* sert à faire "coller" la box au haut de la page */
                padding-bottom:15px;
                /*border:1px solid gray; /* debug */
                border-radius:10px;
            }
            
            #topmenutext a:hover{
                background:url("i/layout/survol.png") bottom;
                background-repeat:repeat-x;
            }

        #select_hilight{
            background-color:#666666;
        }


#contenu{
    margin-top:295px;
    padding:20px;
    width:90%;
    max-width: 1000px; /* TODO: change moi en responsive */
    background-color:white;
    background-image:url("i/layout/paper_bg.png");
    background-repeat:repeat-x;
    border-radius:25px;
    border:1px solid black;
    margin-left:auto;
    margin-right:auto;
}

#lang-notification{
    float:right;
    margin:20px;
    padding:15px;
    background-color:orange;
    text-shadow:1px 1px 1px white;
    border:1px solid black;
    border-radius:10px;
    width:200px;
    font-size:16px;
}
    #lang-notification a{
        color:black;
        font-weight:bold;
    }

.twocols {
    -moz-column-count: 2; 
    -webkit-column-count: 2;
    columns: 2;
}

.threecols {
    -moz-column-count: 3; 
    -webkit-column-count: 3;
    columns: 3;
}

/* ÉLÉMENTS */

body {
    font-family : "Droid Sans";
    font-size: 14px;
    margin-top: 0;
    background-image:url("i/layout/banniere.jpg");
    background-size: 1200px auto;
    background-attachment: fixed;
    background-repeat:no-repeat;
    background-position:center top;
    background-color:black;
}

a:link , a:visited {
    color : #005fa9; 
    text-decoration : none; 
} 

a:hover {
    text-decoration : underline; 
} 

/* TEXTE ET IMAGES */
.tableau01 td{
    border-style:dashed;
    border-width:1px 0px 0px 0px;
    border-color:#DCDCDC;
    vertical-align:top;
}

h1, h2, h3, h4, h5{
    font-family: "Source Sans Pro";
    font-weight: normal; /* Il FAUT spécifier ceci */
}
    h1 {
        font-size: 300%;
        font-weight: 200;
        text-shadow: 2px 2px 5px #ccc;
        margin-top:40px;
        margin-bottom:0px;
    }

ul, ul li {
list-style-image: url("i/layout/bullet-01.png");
}


.social_icon {
    width: 20%; /* pourcentages seulement, pixels avec SVG ça marche pas */
    height: auto;
    margin-top: 10px;
}

@media screen and (min-width: 500px){
    .social_icon {
        width: 10%;
    }
}
@media screen and (min-width: 700px){
    .social_icon {
        width: 5%;
    }
}