/*mise en forme et positionnement des éléments */
body{
    margin: 0px;
    padding: 0px;
    /* background-color:blueviolet; */
}


/* règle pour importer et définir une police de caractère précise */
@font-face {
    font-family: 'a Asian Hiro';
    src: url(../fonts/a-asian-hiro/aasianhiro.otf);

}



@font-face {
    font-family: 'Blogger Sans';
    src: url(../fonts/blogger-sans/Blogger_Sans.otf);

}


@font-face {
    font-family: 'Blogger Sans Light';
    src: url(../fonts/blogger-sans/Blogger_Sans-Light.otf);
}

header{
width: 1000px;
height: 550px;
margin-left: auto;
margin-right: auto;
background-image:url(../images/goodies_barok.png) ;
background-repeat:no-repeat;
background-position: top;

}


#goodies{

    width: 1000px;
    height: 500px;
    /* background-color: blueviolet; */



}
   


h1{
    padding-top: 20px;
    margin: 0px;
    font-family:'a Asian Hiro';
    font-size: 36px;
    color:cornflowerblue;
    text-transform: uppercase;
    text-align: center;
  
        
}        



 /* définition et positionement des div présentes au saein de la nav goodies */
#goodies div{

    width: 150px;
    height: 350px;

    text-align:center;
    line-height: 650px;
    font-family:'Blogger Sans' ;
    font-size: 20px;
    font-weight: bold;
    text-transform: uppercase;
    
    background-color: greenyellow;
    color:#FFFFFF;
    float: left;
    margin-left: 14px;
    margin-top: 13px;
    
    box-shadow: 10px 10px 0 cornflowerblue;/* ombre de la div gauche haut neteté*/

}
        
        
        

        
/* mise en forme de chaque div */

#b{
    background-image: url(../images/badgescolumnbar.jpg);
    text-shadow:   -1px -1px 0  #00ffff, 
        1px -1px 0 #00ffff ,
        -1px 1px 0 #00ffff ,
        1px 1px 0 #00ffff,
        1px 1px 10px #00ffff ;


}

       
        
        
#c{

    background-image: url(../images/cardcolonbar.jpg);
    text-align: center;
    text-shadow:   -1px -1px 0  #00ffff, 
    1px -1px 0 #00ffff ,
    -1px 1px 0 #00ffff ,
    1px 1px 0 #00ffff,
    1px 1px 10px #00ffff ; 
}
        
        
        
#f{

    background-image: url(../images/fanzcolonbar.jpg);
    text-align: center;
    text-shadow:   -1px -1px 0  #00ffff, 
    1px -1px 0 #00ffff ,
    -1px 1px 0 #00ffff ,
    1px 1px 0 #00ffff,
    1px 1px 10px #00ffff ;   
}
        
        
        
#m{
    
    background-image: url(../images/tasscolonbar.jpg);
    text-align: center;
    text-shadow:   -1px -1px 0  #00ffff, 
    1px -1px 0 #00ffff ,
    -1px 1px 0 #00ffff ,
    1px 1px 0 #00ffff,
    1px 1px 10px #00ffff ;   
}
        
        
        
#pc{
    
    background-image: url(../images/clecolonbar.jpg);
    text-align: center;
    text-shadow:   -1px -1px 0  #00ffff, 
    1px -1px 0 #00ffff ,
    -1px 1px 0 #00ffff ,
    1px 1px 0 #00ffff,
    1px 1px 10px #00ffff ;
}
        
        
#p{
    
    background-image: url(../images/b.jpg);
    text-align: center;
    text-shadow:   -1px -1px 0  #00ffff, 
    1px -1px 0 #00ffff ,
    -1px 1px 0 #00ffff ,
    1px 1px 0 #00ffff,
    1px 1px 10px #00ffff ;   
}
        
        
/* définition du lien dans tous ses états 
#goodies div a{
    
    background-image: alpha=10%;
    text-decoration: none;

}
        
        
#goodies div a:hover {
    
    color: darkturquoise;
    text-decoration: none;
}
            


#goodies div a:link{
    
    text-decoration: none;

}
        

        
#goodies div a:active{
        
    text-decoration: none;

}*/



main{
    margin: 0px;
    padding: 0px;
    width: 1000px;
    height: 2500px;
    /* background-color: darkslateblue; */
    margin-left: auto;
    margin-right: auto;
}



/* définition et positionnement de la nav identifiée menu */
#menu{
    
        width: 1000px;
        height:auto;
        

        /* background-color: hotpink; */
        margin-left: auto;
        margin-right: auto;
        /* position: absolute; */    
        /* margin-top: 505px; */

    }


/* définition et positionnement de la div identifiée icone_nav */
#icone_navgauche{
    width: 50px;
    height: 140px;
    /* background-color: lightpink; */
    position: fixed;
    padding: 0px;
    margin-left: -50px;
    top:0px;

}



/* définition des bouton back, before, retour  */
 #bt_back, #bt_before, #bt_retour, #bt_next, #bt_haut{
    width: 40px;
    height: 40px;

}


/* positionnement du bouton icon1 (home) */
    #bt_icon1, #bt_icon2 {
    width: 40px;
    height: 40px;
    font-size: 30px;
    color: #000000;
    margin-top: 30px;
    margin-left: 5px;
    text-align: center;
    position: absolute;


}



#icone_navdroite{
    width: 50px;
    height: 140px;
    /* background-color: lightpink; */
    position: fixed;
    padding: 0px;
    margin-left: 1000px;
    top: 0px;
}


/* positionnement du bouton icon2 (flèche)*/
#bt_icone1, #bt_icone2 {
    width: 40px;
    height: 40px;
    font-size: 30px;
    color: #000000;
    position: absolute;
    text-align: center;
    margin-top: 30px;
    margin-left: 5px;
    
        
    }


   /* définition et positionnement du lien et état du lien bt_back & next */
   /* état initial */
#bt_back a, #bt_next a, #bt_before a, #bt_retour a, #bt_haut a, #bt_haut01 a, #bt_haut02 a, #bt_haut03 a, #bt_haut04 a, #bt_haut05 a {
    text-align: center;
    font-size: 30px;
    text-decoration: none;

    line-height: 38px;
    color: #FFFFFF;

   
}



/* état au survol */
#bt_back :hover, #bt_next :hover, #bt_before :hover, #bt_retour :hover, #bt_haut :hover, #bt_haut01 :hover, #bt_haut02 :hover, #bt_haut03 :hover, #bt_haut04 :hover, #bt_haut05 :hover {
    
    color:#0099cc;

}



/* état visité */
#bt_back :visited, #bt_next :visited, #bt_before :visited, #bt_retour :visited, #bt_haut :visited, #bt_haut01 :visited, #bt_haut02 :visited, #bt_haut03 :visited, #bt_haut04 :visited, #bt_haut05 :visited {
    text-decoration: none;

}



/* état du lien actif */
#bt_back :active, #bt_next :active, #bt_before :active, #bt_retour :active, #bt_haut :active, #bt_haut01 :active, #bt_haut02 :active, #bt_haut03 :active, #bt_haut04 :active, #bt_haut05 :active {
    text-decoration: none;

}



#goodies01{

    width:800px;
    height:650px;
    /* background-color:#000000; */
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    border: solid #35cece;
    }


/* mise ne forme et positionnement */
#badges{

width:800px;
height:600px;
/* background-color:#000000; */
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}




#f01{
    width: 800px;
    height: 50px;
    margin-top:-654px;

    font-family: 'Blogger Sans';
    line-height: 15px;
    color:#FFFFFF;
    text-align: center;
    background-color: #35cece;
    position: absolute;

}


/* positionnement du bouton icone3 (flèche)*/
#bt_icone3 {
    width: 40px;
    height: 40px;
    font-size: 30px;
    color: #000000;
    position: absolute;
    text-align: center;
    margin-left: 380px;
    margin-top: -50px;
    z-index: 6;
    
        
    }

#goodies02{

    width:800px;
    height:632px;
    /* background-color:#000000; */
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    border: solid #35cece;
    margin-top: 20px;
    }


/* mise ne forme et positionnement */
#cartes{

width:800px;
height:582px;
/* background-color:#000000; */
margin-left: auto;
margin-right: auto;
margin-top: 50px;
}




#f02{
    width: 800px;
    height: 50px;
    margin-top:-636px;

    font-family: 'Blogger Sans';
    line-height: 15px;
    color:#FFFFFF;
    text-align: center;
    background-color: #35cece;
    position: absolute;

}

#bt_icone3bis {
    width: 40px;
    height: 40px;
    font-size: 30px;
    color: #000000;
    position: absolute;
    text-align: center;
    margin-left: 380px;
    margin-top: -50px;
    z-index: 6;
    
        
    }



#goodies03{
    width:640px;
    height:530px;
    /* background-color:#000000; */
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    border: solid #35cece;
    margin-top: 20px;
        }

#fanzines{

    width:640px;
    height:480px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
    /* background-image: url(../images/bande_fanzines.jpg); */


}
        
        
        
        
#f03{
    width: 640px;
    height: 50px;
    margin-top:-534px;
    
    font-family: 'Blogger Sans';
    line-height: 15px;
    color:#FFFFFF;
    text-align: center;
    background-color: #35cece;
    position: absolute;
        
        }
        
#bt_icone3ter {
    width: 40px;
    height: 40px;
    font-size: 30px;
    color: #000000;
    position: absolute;
    text-align: center;
    margin-left: 300px;
    margin-top: -50px;
    z-index: 6;
            
                
            }




 #goodies04{
    width:800px;
    height:446px;
    /* background-color:#000000; */
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    border: solid #35cece;
    margin-top: 20px;
                    }
            
#mug{
            
    width:800px;
    height:396px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
     
            
            }
                    
                    
                    
                    
 #f04{
    width: 800px;
    height: 50px;
    margin-top:-450px;
                
    font-family: 'Blogger Sans';
    line-height: 15px;
    color:#FFFFFF;
    text-align: center;
    background-color: #35cece;
    position: absolute;
                    
                    }
                    
#bt_icone3qua {
    width: 40px;
    height: 40px;
    font-size: 30px;
    color: #000000;
    position: absolute;
    text-align: center;
    margin-left: 380px;
    margin-top: -50px;
    z-index: 6;
                                                    
                        }


 #goodies05{

    width:800px;
    height:650px;
    /* background-color:#000000; */
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    border: solid #35cece;
    margin-top: 20px;
                            }
                        
                        
    /* mise ne forme et positionnement */
    #portecle{
                       
    width:800px;
    height:600px;
    /* background-color:#000000; */
    margin-left: auto;
    margin-right: auto;
    margin-top: 50px;
                        }
                        
                        
                        
                        
    #f05{
        width: 800px;
        height: 50px;
        margin-top:-654px; 
                            
        font-family: 'Blogger Sans';
        line-height: 15px;
        color:#FFFFFF;
        text-align: center;
        background-color: #35cece;
        position: absolute;
                        
        }
                        
                        
    /* positionnement du bouton icone3 (flèche)*/
    #bt_icone3cinq {
        width: 40px;
        height: 40px;
        font-size: 30px;
        color: #000000;
        position: absolute;
        text-align: center;
        margin-left: 380px;
        margin-top: -50px;
        z-index: 6;
                               
        }


        #goodies06{

            width:774px;
            height:797px;
            /* background-color:#000000; */
            margin-left: auto;
            margin-right: auto;
            padding: 0px;
            border: solid #35cece;
            margin-top: 20px;
                                    }
                                
                                
            /* mise ne forme et positionnement */
            #poster{
                               
            width:774px;
            height:747px;
            /* background-color:#000000; */
            margin-left: auto;
            margin-right: auto;
            margin-top: 50px;
                                }
                                
                                
                                
                                
            #f06{
                width: 774px;
                height: 50px;
                margin-top:-801px;
                                    
                font-family: 'Blogger Sans';
                line-height: 15px;
                color:#FFFFFF;
                text-align: center;
                background-color: #35cece;
                position: absolute;
                                
                }
                                
                                
            /* positionnement du bouton icone3 (flèche)*/
            #bt_icone3six {
                width: 40px;
                height: 40px;
                font-size: 30px;
                color: #000000;
                position: absolute;
                text-align: center;
                margin-left: 357px;
                margin-top: -50px;
                z-index: 6;
                                       
                }








        footer{
            width: 750px;
            height: 55px;
        
            
            left :50%;
            margin-left: -375px;
        
            margin-top: 1400px;
        
            font-family: 'Blogger Sans';
            
            /* background-color: aqua;  */
            position: absolute; 
            
        }
        
        h3{
            margin-top: 7px;
            font-family: 'Blogger Sans';
            font-weight: lighter;
            font-size: 16px;
            text-align: center;
            
            color:#2E8ECE;
            text-transform: uppercase;
            line-height: 20px;/* style */
            
        }