body {
    margin: 0px;
    padding: 0px;   
    font-family:"Arial","Courrier New","Times New Roman";

}

#header {
    width: 100%;
    height: 128px;
    background-image:url('bg_01.png');   
}

 

#page {
    width: 100%;
    position: absolute;
    top: 128px;
}
#content {
    margin-top: 55px;
    width: 100%;
    min-height: 400px;
    position: relative;
}

  
/*         IMAGE DE HEADER = LOGO KUQ      */
#logo {
    position: absolute;
    top: 8px;
    left: 24px;
    width: 400px;
    height: 120px;
    background-image:url('f6kuq.png');
    background-repeat:no-repeat;    
}


/* ==== SI GRAND ECRAN NON MOBILE SUP 481px ====     */
@media screen and (min-width: 481px) {

#leftcolumn { 
    position: absolute;
    top: 0px;
    left: 0px;
    width: 110px;
    height: 459px;
    background-image:url('choisy.png');
    
}

#center {
    position: absolute;
    top:0px;
    left: 110px;
/*     right: 400px;  */
}
 
}

/*    === DEBUT ECRAN MOBILE MAX 480px SUPP LEFTCOLUMN  ======   */
@media screen and (max-width: 480px) {

#leftcolumn { 
    position: absolute;
    top: 0px;
    left: 0px;
    width: 0px;
    height: 0px;<br>    background-image:url('f6kuq.png');
}

#center {
    position: absolute;
    top:0px;
    left: 10px;
}
  
}
/* === FIN ECRAN MOBILE  ==== */




/* === DEBUT PETIT ECRAN MAX 960   ==== */

@media (max-width: 960px) {
  
    
    /* passer body (et tous les éléments de largeur fixe) en largeur automatique */

    body {
        width: auto;
        margin: 0;
        padding: 0;
    }
    
    /* fixer une largeur maximale de 100% aux éléments potentiellement problématiques */

    img,
    table,
    td,
    blockquote,
    code,
    pre,
    textarea,
    input,
    iframe,
    object,
    embed,
    video {
        max-width: 100%;
    }
    
    /* conserver le ratio des images */

    img {
        height: auto;
    }
    
        
  
}