@charset "utf-8";

@media all {
    #page {
        width:100%;
    }
    
    /* Titre de la page*/
    h1 {
        font-size:2.5em;
        font-weight:600;
        padding:0.3em 0.5em;
        text-shadow:0 0 0.2em #000;
    }
    h1 a, h1 a:link, h1 a:hover, h1 a:visited, h1 a:focus, h1 a:active {
        text-decoration:none;
        color:#fff;
    }

    /* Copyrigth */
    #copyright {
        font-size:0.6em;
        font-weight:100;
        display:block;
        position:fixed;
        top:63em;
        right:5em;        
    }
    #copyright a {
        color:#fff;
        text-decoration:none;
    }
    #copyright a:hover {
        border-bottom:1px solid #fff;
        border-color:rgba(255,255,255,0.5);
    }

    /* Description de l'image de fond*/
    #imgDesc {
        font-size:2em;
        display:block;
        position:absolute;
        bottom:0;
        left:0;
        width:30.97em;
    }
    #imgDesc:hover {
        background-color:#000;
        background-color:rgba(0,0,0,0.5);
    }
    #imgDesc a {
        color:#fff;
        text-decoration:none;
        text-transform:uppercase;
        text-shadow:0 0 0.2em #000;
        display:block;
        width:100%;
        padding:0.2em 0 0.6em 0.6em;
        -webkit-transition:padding-left 0.5s ease;
         -khtml-transition:padding-left 0.5s ease;
           -moz-transition:padding-left 0.5s ease;
            -ms-transition:padding-left 0.5s ease;
             -o-transition:padding-left 0.5s ease;
                transition:padding-left 0.5s ease;
    }
    #imgDesc a:hover {
        text-shadow:none;
        background:transparent url(../medias/icones/image-download-symbol.png) no-repeat 0.7em 0.35em;
        background-size:0.7em;
        padding-left:2em;
    }
    
    /* Menu du site */
    #menuAssociation {
        font-size:2em;
        font-weight:100;
        display:block;
        position:fixed;
        top:0;
        right:0;
        background-color:#000;
        background-color:rgba(0,0,0,0.5);
        color:white;
        width:8.5em;
        height:100%;
        overflow:hidden;
        padding-top:0.4em;
    }
    #menuAssociation a {
        display:block;
        width:8.5em;
        padding:0.2em 1em 0.2em 1em;
        overflow:hidden;
        text-decoration:none;
        color:white;
        -webkit-transition:background-color 0.5s ease;
         -khtml-transition:background-color 0.5s ease;
           -moz-transition:background-color 0.5s ease;
            -ms-transition:background-color 0.5s ease;
             -o-transition:background-color 0.5s ease;
                transition:background-color 0.5s ease;
    }
    #menuAssociation a:hover {
        text-shadow:0 0 0.2em #000;
        background-color:rgba(255,255,255,0.5);
    }
    #menuInscription a, #menuContact a, #menuFacebook a {
        font-size:0.5em;
        font-weight:200;
        text-align:center;
        position:absolute;
        -webkit-transition:background-size 0.5s ease, color 0.5s ease;
         -khtml-transition:background-size 0.5s ease, color 0.5s ease;
           -moz-transition:background-size 0.5s ease, color 0.5s ease;
            -ms-transition:background-size 0.5s ease, color 0.5s ease;
             -o-transition:background-size 0.5s ease, color 0.5s ease;
                transition:background-size 0.5s ease, color 0.5s ease;
    }
    #menuInscription a {
        background:transparent url(../medias/icones/taekwondo-couple-silhouettes.png) no-repeat center top;
        background-size:3.1em;
        padding:3em 0 0 0;
        height:4em;
        width:6em;
        top:25em;
        right:5em;
    }
    #menuContact a {
        background:transparent url(../medias/icones/online-help.png) no-repeat center top;
        background-size:2.5em;
        padding:2.5em 0 0 0;
        height:3.5em;
        width:7em;
        top:31em;
        right:8.5em;
    }
    #menuFacebook a {
        background:transparent url(../medias/icones/facebook-logo.png) no-repeat center top;
        background-size:2.5em;
        padding:2.5em 0 0 0;
        height:3.5em;
        width:5.3em;
        top:31em;
        right:1.5em;
    }
    #menuInscription a:hover, #menuContact a:hover, #menuFacebook a:hover {
        text-shadow:none;
        background-color:transparent;
        color:transparent;
    }
    #menuInscription a:hover {
        background-size:4.1em;
    }
    #menuContact a:hover {
        background-size:3.5em;
    }
    #menuFacebook a:hover {
        background-size:3.5em;
    }
    
}

@media screen and (min-width:801px) {
    body {
        overflow:hidden;
    }
    #page {
        height:100%;
    }

    /* Flux facebook */
    #facebook {
        filter: alpha(opacity=50);
        opacity: 0.5;
        display:block;
        position:fixed;
        top:4em;
        left:1em;     
        width:310px;        
        height:20em;
        overflow:hidden;
        -webkit-transition:opacity 0.5s ease, height 0.5s ease;
         -khtml-transition:opacity 0.5s ease, height 0.5s ease;
           -moz-transition:opacity 0.5s ease, height 0.5s ease;
            -ms-transition:opacity 0.5s ease, height 0.5s ease;
             -o-transition:opacity 0.5s ease, height 0.5s ease;
                transition:opacity 0.5s ease, height 0.5s ease;
    }
    #facebook:hover {
        filter: alpha(opacity=100); /* For IE8 and earlier */
        opacity: 1;
        height:32.1em;
    }
} 

@media screen and (max-width:800px) {
    body {
        overflow-x:hidden;
    }
    #page {
        height:40em;
    }
    h1, #imgDesc {
        display:none;
    }
    #menuAssociation {
        width:100%;
        position:relative;
        height:15em;
    }
    #menuTKD a, #menuClub a, #menuEvenements a, #menuCours a, #menuProfesseurs a, #menuHoraires a, #menuTarifs a, #menuPlan a {
        font-size:0.8em;
        padding:0.2em 0 0.2em 0;
        width:15.5em;
    }
    #menuInscription a, #menuContact a, #menuFacebook a {
        top:initial;
        right:initial;        
        display:block;
        position: relative;
        float:left;
        margin: 0.3em 0 0 0;
        height:2em;
    }
    #menuInscription a {
        width:100%;
    }
    #menuContact a, #menuFacebook a {
        width:49.5%;
    }

    #copyright a {
        color:#000;
        position:relative;
    }
}

@media print {
}