body {
    font-family: 'Trebuchet MS',sans-serif;
    font-size: 16px;
    margin: 0;
    background: #ebebeb;
}
body.accueil{  background: url(../images/ciel.jpg) center top no-repeat #ebebeb; }

div, h1, h2, h3, h4, p, form, label, input, textarea, img, span, ul, li{
    margin: 0;
    padding: 0;
}

img{ border:0;}

td, div, ul, li {
    font-size : 15px; 
}
a, input, select{ outline:none;}

a{ color: #00529b;  text-decoration: underline;}
a:hover{ text-decoration: none;}


p {
    font-family: 'Trebuchet MS', sans-serif;
    font-size: 16px;
    line-height: 20px;
}

/* ============================================ */
/* =============   GÉNÉRAL TEMPLATE   ============== */
/* ============================================ */   

#ciel{ 
    background: url(../images/ciel-interne.jpg) center top no-repeat #ebebeb;
    position: absolute;
    z-index: 1;
    height: 221px;
    width: 100%;
}

#wrapper{
    width: 1170px;
    margin: 0 auto;
    z-index: 2;
    position: relative;
}

    #header{ width: 1170px; height: 220px;}

        #logo{ margin: 0; float: left; }
        #logo, #logo a{ display: block; width: 377px; height: 202px; cursor: pointer; }
            #logo a{ background: url(../images/logo.png) no-repeat; }


        #menu{ float: right; height: 76px; width: 774px; margin: 30px 0 0; background: url(../images/bg-menu.png) repeat-x; }
            #menu > ul{ float: left; height: 76px; width: 774px; margin: 0; padding: 0; }
            #menu > ul > li{  float: left; list-style: none; cursor: pointer; height: 42px; margin: 0; padding: 0; margin-top: 17px; border-left: 1px dotted #FFF; position: relative; }
            #menu > ul > li:first-child{ border: none; /*margin-left: 6px;*/}
            #menu > ul li a{ 
                        float: left; 
                        display: block; 
                        height: 42px; 
                        font-size: 16px; 
                        text-transform: uppercase;
                        color: #FFF; 
                        padding: 0 43px; 
                        margin: 0;
                        text-decoration: none;
                        line-height: 42px;
            }
            #menu ul li a:hover{ color:#79C8EE;}
            
            #menu ul ul{ position: absolute; left: 0; top: 58px; width: 200px; z-index: 999; }
            #menu ul ul li{ float: left; background: url(../images/bg-menu.png) no-repeat center; margin: 0; padding: 0; border: 0; list-style: none; cursor: pointer; }
            #menu ul ul li a{
                height: 30px;
                line-height: 30px;
                padding: 6px 20px;
                width: 150px; 
            }
            
            #menu p{ display: none; }
            
            
    #content{ clear: left; float: left; width: 1170px; min-height: 400px; margin-bottom: 40px; }
            
            #content h1{ 
                font-size: 50px;
                font-weight: 400;
                color: #00529b;
                line-height: 42px;
                margin: 30px 0 20px;
                border-bottom: 1px solid #00529b;
                width: 100%;
                text-transform: uppercase;
            }
            #content h2{ font-size: 18px; font-weight: bold; color: #00529b; margin-top: 40px; }
            #content p{ color: #333; margin-top: 25px; text-align: justify; line-height: 25px; }
            #content ul { margin: 20px 0 0 30px; }
            #content ul li{ color: #333;  }

            #content #banner{ width: 1170px; }
            #content #left{ float: left; width: 800px; margin-right: 70px; }
            #content #right{ float: left; width: 300px; }
            
            
            body.interne #content #right{ margin-top: -270px;}
            #content .content{ float: left; width: 800px; }
            
            
            #produits{ float: left; width: 300px; }
                #produits a{ display: block; width: 300px; height: 129px; text-indent: -9999px; margin-top: 25px; }
                #produits a#froid{ background: url(../images/btn-climatisation.jpg) no-repeat;}
                #produits a#chaud{ background: url(../images/btn-chauffage.jpg) no-repeat;}
                
            #coordonnee{
                float: left;
                width: 235px;
                height: 142px;
                background: url(../images/coordonnee.png) no-repeat;
                margin-top: 30px;
                padding-left: 65px;
            }
                    #coordonnee p.phone{ font-size: 22px; color: #00529b; margin-top: 15px; }
                    #coordonnee p.mail { font-size: 14px; margin-top: 0px; font-weight: bold; }
                    #coordonnee p.url{ font-size: 12px;; margin-top: 0; line-height: 19px; }
                    #coordonnee p.mail  a, #coordonnee p.url a{color: #00529b; }
                
            #soumission{
                float: left;
                width: 260px;
                height: 150px;
                background: url(../images/soumission.jpg) no-repeat;
                margin-top: 30px;
                padding: 145px 20px 0;
            }
                    #soumission p{ line-height: 20px; color: #000; margin-top: 15px; font-size: 15px;}
                    #coordonnee p.title, #soumission p.title{
                        font-size: 23px;
                        color: #00529b;
                        text-transform: uppercase;
                        margin-top: 15px;
                    }
                    #soumission p.title{ margin-top: 0;}
                    #soumission p a{
                        display: block; 
                        float: right;
                        text-decoration: none;
                        margin-top: 20px;
                        font-weight: bold;
                        color: #00529b;
                    }
                    #soumission p a span{ 
                        display: block;
                        float: left;
                        width: 20px;
                        height: 20px;
                        margin-right: 10px;
                        background: url(../images/puce.png) no-repeat;
                    }
                
            
   
   #footer{ clear: left; background: #105da1; height: 100px;}
        #footer .footer{ width: 1170px; margin: 0 auto; }
        #footer .signature { float: left; margin-top: 15px; }
            #footer .signature p,
            #footer .signature p a{ font-size: 16px; color: #FFF; text-decoration: none;}

        #footer .regie-batiment{ float: right; text-align: right; margin-top: 6px; }
            #footer .regie-batiment p{ font-size: 22px; color: #FFF; margin-top: 10px; }


/* ============================================ */
/* ===============   ACCUEIL  ================= */
        body.accueil #content #banner{ background: url(../images/banner.jpg) no-repeat; height: 442px; z-index: 1; }
        body.accueil #header{ height: 202px;}
        
        body.accueil #content h1{ font-size: 26px; font-weight: 400; color: #00529b; line-height: 45px; margin: 30px 0 0; text-transform: none; border: 0; }
        
        #teaser{ float: left; margin-top: 30px; }
            #teaser div{ float: left; width: 460px; height: 170px; }
            #content #teaser p{ color: #000; line-height: 20px;}
            #teaser img{ float: left; margin-right: 20px; }
            #teaser p{ font-size: 15px; } 
            #teaser a{ 
                display: block; 
                float: right;
                text-decoration: none;
                margin-top: 20px;
                font-weight: bold;
            }
                #teaser #froid a{ color: #3293c7; }
                #teaser #chaud a{ color: #f0bf4a;}
                #teaser a span{ 
                        display: block;
                        float: left;
                        width: 20px;
                        height: 20px;
                        line-height: 16px;
                        font-size: 30px;
                        text-align: center;
                        color: #FFF;
                        margin-right: 12px;
                        font-weight: 400;
                }
                #teaser #froid a span{ background: #3293c7; }
                #teaser #chaud a span{ background: #f0bf4a; }
                
            
        #teaser #froid{ background: url(../images/climatisation.jpg) no-repeat; padding: 45px 115px 0 10px;}
        #teaser #chaud{ background: url(../images/chauffage.jpg) no-repeat; padding: 45px 10px 0 115px; }

/* ============================================ */
/* ===============   SERVICES  ================ */
        #services-list{ float: left; margin: 30px 0 60px; width: 100%; }
        #services-list p{
            float: left;
            display: block;
            height: 43px;
            margin: 30px 0 0 90px;
            padding: 10px 0 0 60px;
            background: url(../images/check.png) top left no-repeat;
            color: #00529b;
            text-transform: uppercase;
            text-align: center;
            font-size: 16px;
            line-height: 17px;
        }
        #services-list p:first-child{ margin-left: 30px; } 
        
        .installation,
        .reparation,
        .entretien{
            padding-left: 300px;
            margin-top: 45px;
        }        
        .installation h3,
        .reparation h3,
        .entretien h3{
            font-size: 18px;
            color: #00529b;
        }        
        #content .installation p,
        #content .reparation p,
        #content .entretien p{
            line-height: 23px;
            margin-top: 15px;
        }        
        .installation{ background: url(../images/service-installation.jpg) top left no-repeat; }
        .reparation{ background: url(../images/service-reparation.jpg) top left no-repeat; }
        .entretien{ background: url(../images/service-entretien.jpg) top left no-repeat; }

/* ============================================ */
/* ===============   CLIMATISATION  ================ */
        
        #clim{ 
            background: url(../images/bg-climatisation.jpg) center top no-repeat #ebebeb;
            position: absolute;
            z-index: 1;
            height: 221px;
            width: 100%;
        }
        body.climatisation #content{ background: url(../images/flocon.png) right 73px no-repeat; }
        body.climatisation.interne #content #right { margin-top: 0;}
        
        body.climatisation #content div.produits{
            background: #FFF;
            width: 760px;
            padding: 15px;
            margin-top: 20px;
            min-height: 180px;
        }
        body.climatisation #content div.produits h3{ 
            text-transform: uppercase;
            color: #3492d1;
            font-size: 16px;
            font-weight: 400;
            
        }
        body.climatisation #content div.produits a{ display: block; float: right; color: #3492d1; clear: both; }
        body.climatisation #content div.produits img{ float: left; margin-right: 20px;}
        
        
/* ============================================ */
/* ===============   CHAUFFAGE  ================ */
        
        #chauffage{ 
            background: url(../images/bg-chauffage.jpg) center top no-repeat #ebebeb;
            position: absolute;
            z-index: 1;
            height: 221px;
            width: 100%;
        }
        body.chauffage #content{ background: url(../images/soleil.jpg) right 73px no-repeat; }
        body.chauffage.interne #content #right { margin-top: 0;}
        
        body.chauffage #content div.produits{
            background: #FFF;
            width: 760px;
            padding: 15px;
            margin-top: 20px;
            min-height: 180px;
        }
        body.chauffage #content  h1{ color: #f0af12; border-bottom-color: #f0af12; }
        body.chauffage #content div.produits h3{ 
            text-transform: uppercase;
            color: #f0af12;
            font-size: 16px;
            font-weight: 400;
            
        }
        body.chauffage #content div.produits a{ display: block; float: right; color: #f0af12; clear: both; }
        body.chauffage #content div.produits img{ float: left; margin-right: 20px;}
        
        
        
/* ============================================ */
/* ===============   A Propos  ================ */
        body.interne.commercial #content #right{ margin-top: 0px; }
        
               
/* ============================================ */
/* ===============   A Propos  ================ */
        body.interne.apropos #content #right{ margin-top: 10px; }
        
        
/* ============================================ */
/* ===============   CONTACT  ================ */

            body.interne.contact #content #right{ margin-top: -95px;}

            fieldset { margin-top: 20px; border: 1px solid #00529B; }
            fieldset legend { font-size: 16px; padding: 0 10px; color: #00529B; }
            
            fieldset div.field,
            fieldset div.check{ 
                float: left; width: 250px; margin-top: 6px; 
            }
            fieldset div.field input[type="text"],
            fieldset div.check input[type="text"]{
                float: left; width: 140px; margin: 0 8px; padding: 2px 5px; border: 1px solid #CCC; font-size: 13px; 
            }
            fieldset div.field label,
            fieldset div.check label,
            div.textarea label{ 
                float: left; display: block; width: 80px; color: #333; 
            }
            
            /* CHECK */
            fieldset div.check label{ width: 200px;}
            fieldset div.check input[type="checkbox"],
            fieldset div.check input[type="radio"]{ 
                width: 20px;
                height: 20px;
                margin-right: 10px;
                float: left;
            }
            fieldset h3{ clear: both; font-size: 16px; color: #333; padding-top: 20px; }
            
            fieldset.type_produits div.check{ width: 150px;}
            fieldset.type_produits div.check label{ width: 100px;}
            
            fieldset div.field select{ float: left; width: 80px; margin: 0 8px; padding: 2px 0 2px 5px; border: 1px solid #CCC; font-size: 13px; }
            
            fieldset div.full{ clear: both; float: none; margin-top: 10px;  }
            fieldset div.full label{ float: left; display: block; width: 200px; color: #333;  }
            fieldset div.full input[type="text"]{ width: 70px; padding: 2px 5px; border: 1px solid #CCC; font-size: 13px; }
            fieldset div.full select{ padding: 2px 0 2px 5px; border: 1px solid #CCC; font-size: 13px; }
            
            div.textarea { margin-top: 30px; }
            div.textarea label{ width: 200px; }
            div.textarea textarea{ float: left; clear: both; width: 500px; height: 80px; border: 1px solid #CCC;  }
            
            div.textarea textarea{ float: left; clear: both; width: 500px; height: 80px; border: 1px solid #CCC;  }
            
            input[type="submit"]{ display: block; width: 80px; padding: 5px 10px; background: #105DA1; color: #FFF; border: 1px solid #FFF; float: left; clear: both; margin-top: 40px; }
            
            
            /* exception form */        
                fieldset div.check label[for="Autre"]{ width: 60px; }
                fieldset div.spacer{ clear: both; padding-top: 30px; }
                
            /* RIGHT COLOMN */
                body.contact #right h2, body.apropos #right h2{ font-size: 24px; text-transform: uppercase; font-weight: 400; margin: 20px 0 0; }
                body.contact #right p, body.apropos #right p{ font-size: 15px; margin-top: 20px; line-height: 18px; }
                body.contact #right a, body.apropos #right a{ color: #00529b; }
                body.contact #right a#map, body.apropos #right a#map{ display: block; width: 300px; height: 202px; background: url(../images/map.png) no-repeat; background-size: 300px 202px; margin-top: 25px; }

        

/* ============================================ */
/* =============   GÉNÉRAL CSS   ============== */
/* ============================================ */

.FieldsError{ color:#FF0000;}
.FieldsNoError{ color:#71cb00;}
.fs_11{ font-size: 11px;}
.fs_13{ font-size: 13px;}
.inline{ display:inline;}
.float_r{ float: right;}
.float_l{ float: left;}
.clear-r{ clear: right;}
.clear-l{ clear: left;}
.clear-b{ clear: both;}
.T_AlignRight{ text-align: right;}
.italic{ font-style: italic;}

.Tabulation{ margin-left: 50px; clear: left;}
.Half_Tabulation{ margin-left: 25px; clear: left;}
.margin-15{ margin-top: 15px;}
.margin-20{ margin-top: 20px;}
.margin-40{ margin-top: 40px;}
.margin-none{ margin-top: 0;}
.image-right{ margin: 40px 0 0 40px;}

/*copy HERE the same style than your actual general a */
.lookLikeA{  text-decoration: underline; cursor:pointer; }





/*=================================================================================*/
/*=================================================================================*/
/*                          FLEXIBLE PART                                          */
/*=================================================================================*/
/*=================================================================================*/
/*=================================================================================*/
/*=================================================================================*/
/*  site entre 1200 et 1024 (1000)  */
@media only screen and (max-width: 1199px) {
        
        #ciel{ height: 185px; }
        body.accueil{ background: url(../images/980/ciel.jpg) center top no-repeat #ebebeb; }
        #wrapper{ width: 980px; }

            #header{ width: 980px; height: 180px;}

                #logo, #logo a{ width: 290px; height: 144px; }
                    #logo a{ background: url(../images/980/logo.png) no-repeat; }


                #menu{height: 70px; width: 626px; margin: 30px 0 0; background: url(../images/980/bg-menu.png) repeat-x; }
                    #menu ul{ height: 70px; width: 620px; margin-left: 11px; }
                    #menu ul li{ height: 36px; }
                    #menu ul li a{
                                height: 36px; 
                                font-size: 15px; 
                                padding: 0 30px; 
                                line-height: 36px;
                    }
                    #menu ul ul{top: 50px; width: 200px; }
                       
                    
            #content{ width: 980px; }

                    #content #banner{ width: 980px; }
                    #content #left{ float: left; width: 610px; margin-right: 70px; }
                    #content #right{ float: left; width: 300px; }
            
                    body.interne #content #right{ margin-top: -292px;}
                    #content .content{ float: left; width: 610px; }
            
            #footer .footer{ width: 980px;  }


        /* ============================================ */
        /* ===============   ACCUEIL  ================= */
                body.accueil #content #banner{ background: url(../images/980/banner.jpg) no-repeat; height: 370px; }
                body.accueil #header{ width: 980px; height: 144px;}

                #teaser{ float: left; margin-top: 30px; }
                    #teaser div{ float: left; width: 350px; height: 145px; }
                        #content #teaser p { margin: 0; font-size: 14px; line-height: 17px; text-align: left; }
                        #content #teaser img { width: 100px;}
                        #teaser a { margin-top: 13px; }
                        #teaser a span{ 
                                width: 20px;
                                height: 20px;
                                line-height: 16px;
                                font-size: 30px;
                                margin-right: 12px;
                        }
                        
                    
                #teaser #froid{ background: url(../images/980/climatisation.jpg) no-repeat; padding: 65px 120px 0 20px;}
                #teaser #chaud{ background: url(../images/980/chauffage.jpg) no-repeat; padding: 65px 20px 0 120px; }
                
                body.accueil #content h1{ margin-top: 30px;}
                
                        
        /* ============================================ */
        /* ===============   SERVICES  ================ */
                #services-list{ float: left; margin: 30px 0 60px; width: 100%; }
                #services-list p{ margin: 30px 0 0 45px; padding: 10px 0 0 50px; }
                #services-list p:first-child{ margin-left: 5px; } 
                
                .installation,
                .reparation,
                .entretien{
                    padding-left: 250px;
                    margin-top: 45px;
                }        
      
                #content .installation p,
                #content .reparation p,
                #content .entretien p{
                    font-size: 15px;
                    line-height: 20px;
                }        
                .installation{ background: url(../images/980/service-installation.jpg) top left no-repeat; }
                .reparation{ background: url(../images/980/service-reparation.jpg) top left no-repeat; }
                .entretien{ background: url(../images/980/service-entretien.jpg) top left no-repeat; }
                        
                        

        /* ============================================ */
        /* ===============   CLIMATISATION  ================ */
                
                #clim{ 
                    background: url(../images/bg-climatisation.jpg) center bottom no-repeat #ebebeb;
                    height: 185px;
                }
                body.climatisation #content div.produits{
                    width: 610px;
                }

                
                        
        /* ============================================ */
        /* ===============   CHAUFFAGE  ================ */
                
                #chauffage{ 
                    background: url(../images/bg-chauffage.jpg) center bottom no-repeat #ebebeb;
                    height: 185px;
                }
                
                body.chauffage #content div.produits{
                    width: 610px;
                }

        
        /* ============================================ */
        /* ===============   CONTACT  ================ */

                body.interne.contact #content #right{ margin-top: -120px;}
                fieldset div.check{ width: 290px;}
                fieldset div.check label{ width: 250px; }
}
/*=================================================================================*/
/*=================================================================================*/
/*  site entre 1023 et 768px  */
@media only screen and (max-width: 1009px) {

        #ciel{ height: 130px; }
        body.accueil{ background: url(../images/760/ciel.jpg) center top no-repeat #ebebeb; }
        #wrapper{ width: 760px; }

            #header{ width: 760px; height: 121px;}

                #logo, #logo a{ width: 211px; height: 121px; }
                    #logo a{ background: url(../images/760/logo.png) no-repeat; }

                #menu{height: 57px; width: 523px; margin: 30px 0 0; background: url(../images/760/bg-menu.png) repeat-x; }
                    #menu ul{ height: 57px; width: 517px; margin-left: 6px; }
                    #menu ul li{ height: 32px; margin-top: 13px; }
                    #menu ul li:first-child{ margin-left: 0px;}
                    #menu ul li a{
                                height: 32px; 
                                font-size: 14px; 
                                padding: 0 21px; 
                                line-height: 32px;
                    }
                    #menu ul ul{ top: 45px;}


            #content{ width: 760px; }

                    #content #banner{ width: 760px; }
                    #content #left{ float: left; width: 410px; margin-right: 50px; }
                    #content #right{ float: left; width: 300px; }

                    #content h1{ font-size: 44px; }

                    body.interne #content #right{ margin-top: 20px;}
                    #content .content{ float: left; width: 760px; }
                    body.interne #content h2{ font-size: 23px; }
                    
                    
            #footer .footer{ width: 760px;  }


        /* ============================================ */
        /* ===============   ACCUEIL  ================= */
                body.accueil #content #banner{ background: url(../images/760/banner.jpg) no-repeat; height: 287px; }
                body.accueil #header{ width: 760px; height: 121px;}

                    #teaser div{ float: left; width: 275px; height: 115px; margin-bottom: 30px; }
                        #content #teaser p { margin: 0; font-size: 14px; line-height: 17px; text-align: left; }
                        #content #teaser img {  display: none;}
                        #teaser a { margin-top: 20px; }

                        
                    
                #teaser #froid{ background: url(../images/760/climatisation.jpg) no-repeat; padding: 50px 95px 0 10px;}
                #teaser #chaud{ background: url(../images/760/chauffage.jpg) no-repeat; padding: 50px 10px 0 95px; }
                
                body.accueil #content h1{ line-height: 30px;}
                
                
                        
        /* ============================================ */
        /* ===============   SERVICES  ================ */
                #services-list{ float: left; margin: 30px 0; width: 100%; }
                #services-list p{ margin: 30px 0 0 80px; padding: 10px 0 0 50px; }
                #services-list p:first-child{ margin-left: 35px; } 
                
                body.services #content #left{ width: 387px; margin-right: 73px; }
                
                .installation,
                .reparation,
                .entretien{
                    padding: 195px 0 0;
                    margin-top: 45px;
                }        
      
                #content .installation p,
                #content .reparation p,
                #content .entretien p{
                    font-size: 15px;
                    line-height: 20px;
                }        
                .installation{ background: url(../images/760/service-installation.jpg) top left no-repeat; }
                .reparation{ background: url(../images/760/service-reparation.jpg) top left no-repeat; }
                .entretien{ background: url(../images/760/service-entretien.jpg) top left no-repeat; }
                
                
        /* ===============   CLIMATISATION  ================ */
                
                #clim{ height: 130px; }
                body.climatisation #content{ background: none; }
                body.climatisation.interne #content #right { margin-top: 0;}
                
                body.climatisation #content #left,
                body.climatisation #content #right{ width: 760px; }
                body.climatisation #content div.produits{ width: 730px; }
                body.climatisation #content #right #coordonnee{ margin-left: 30px; }
                body.climatisation #content #right #soumission{ margin-left: 100px; }
                
        /* ============================================ */
        /* ===============   CHAUFFAGE  ================ */
                
                #chauffage{ 
                    height: 130px;
                }                
                body.chauffage #content{ background: none; }
                body.chauffage.interne #content #right { margin-top: 0;}
                
                body.chauffage #content #left,
                body.chauffage #content #right{ width: 760px; }
                body.chauffage #content div.produits{ width: 730px; }
                body.chauffage #content #right #coordonnee{ margin-left: 30px; }
                body.chauffage #content #right #soumission{ margin-left: 100px; }

        
        /* ============================================ */
        /* ===============   CONTACT  ================ */

                body.interne.contact #content #right{ margin-top: 25px; }

                fieldset div.field, fieldset div.check{ width: 350px; }
                fieldset div.field label, fieldset div.check label{ width: 120px; }
                fieldset div.check{ width: 290px; }
                fieldset div.check label{ width: 250px; }
                fieldset div.field input[type="text"], fieldset div.check input[type="text"] { width: 200px; }
                fieldset.type_produits div.check{ width: 125px; }
                fieldset.type_produits div.check label{ width: 90px; }
                fieldset div.full label{ width: 170px; font-size: 14px; }
                
                div.textarea textarea{ width: 400px; }
                
}
/*=================================================================================*/
/*=================================================================================*/
/*  affiche une grosse tablette  */
@media only screen and (max-width: 767px) {

        #ciel{ height: 173px; }
        #bg-menu-mobile{ position: absolute; top: 173px; left: 0; height: 50px; width: 100%; background: #222055; z-index: 1; }
        #wrapper{ width: 420px; }

            #header{ width: 420px; height: 173px;}

                #logo, #logo a{ width: 420px; height: 173px; }
                    #logo a{ background: url(../images/480/logo.png) no-repeat; }

                #menu{height: 50px; width: 420px; margin: 0; background: none; }
                    #menu .menu-mobile{ 
                        z-index: 100;
                        position: relative;
                        display: block;
                        width: 105px;
                        height: 41px;
                        float: right;
                        background: url(../images/480/btn-menu.png) no-repeat;
                        margin-top: 5px;
                    }
                    #menu p{ 
                        background: url("../images/480/phone.png") no-repeat left top;
                        color: #FFFFFF;
                        display: block;
                        float: left;
                        line-height: 17px;
                        margin-top: 4px;
                        padding-left: 50px;
                        width: 160px;
                    }
                    #menu p span{ font-size: 24px; line-height: 26px; }
                    
                    #menu ul, #menu ul ul{ height: 0px; overflow: hidden; width: 420px; margin: 5px 0 0; z-index: 100; position: relative; }
                    #menu ul ul{ height: auto; top: 0;}
                    #menu ul li, #menu ul li ul li{ width: 100%; height: auto; margin-top: 0; background: url(../images/480/bg-menu.png); }
                    #menu ul li a, #menu ul li ul li a{
                                height: 40px; 
                                font-size: 19px; 
                                padding: 0; 
                                line-height: 40px;
                                text-transform: uppercase;
                                text-align: center;
                                width: 100%;
                                border-top:1px solid #FFF;
                                display: block;
                    }
                    #menu ul li ul li a{ text-transform: none;}

            #content{ width: 420px; }

                    #content #banner{ width: 420px; }
                    #content #left{ float: left; width: 420px; margin-right: 0px; }
                    #content #right{ float: left; width: 420px; }

                    body.interne #content #right{ margin-top: 20px;}
                    
                    body.interne #content h1{ font-size: 37px; }
                    #content .content{ float: left; width: 420px; }
                    #content .content p{ font-size: 17px; }

                    
                    #coordonnee, #soumission{ float: none; margin: 30px auto 0; }
                    #coordonnee p.title{ padding-top: 15px; }
                    #produits{ float: none; width: 300px; margin: 20px auto 0; }
                        
                
                
            #footer { height: 200px;  }
            #footer .footer{ width: 420px;  }
            
                
                #footer .signature {
                    clear: both;
                    float: left;
                    margin: 115px 0 0 45px;
                    width: 330px;
                }
                #footer .signature p, #footer .signature p a {
                    text-align: center;
                }
                
                                
                #footer .regie-batiment {
                    float: none;
                    position: absolute;
                    margin: 6px 0 0 74px;
                    text-align: right;
                }

        /* ============================================ */
        /* ===============   ACCUEIL  ================= */
                body.accueil #content #banner{ background: url(../images/480/banner.jpg) no-repeat; height: 204px; margin-top: 5px; }
                body.accueil #header{ width: 420px; height: 223px;}


                #teaser {
                    float: none;
                    margin: 30px auto;
                    width: 380px;
                }
                #teaser #froid{ background: url(../images/480/climatisation.jpg) no-repeat;}
                #teaser #chaud{ background: url(../images/480/chauffage.jpg) no-repeat;  padding: 50px 95px 0 10px; }
                
                body.accueil #content h1{ line-height: 30px;}

      
        /* ============================================ */
        /* ===============   SERVICES  ================ */
                #services-list { margin: 0; }
                #services-list p{ 
                    margin: 30px auto 0;
                    padding: 10px 0 0 50px;
                    float: none;
                    clear: both;
                    width: 250px;
                    text-align: left;
                }
                #services-list p br{ display: none; } 
                #services-list p:first-child{ margin: 30px auto 0;} 
                
                body.services #content #left{ width: 420px; margin-right: 0; }
                
                .installation,
                .reparation,
                .entretien{
                    padding: 195px 0 0;
                    margin-top: 45px;
                }        
      
                #content .installation p,
                #content .reparation p,
                #content .entretien p{
                    font-size: 18px;
                    line-height: 22px;
                }        
                .installation{ background: url(../images/480/service-installation.jpg) top left no-repeat; }
                .reparation{ background: url(../images/480/service-reparation.jpg) top left no-repeat; }
                .entretien{ background: url(../images/480/service-entretien.jpg) top left no-repeat; }
                
                
        /* ===============   CLIMATISATION  ================ */
                
                #clim{ height: 173px; }
                body.climatisation #content{ background: none; }
                body.climatisation.interne #content #right { margin-top: 0;}
                
                body.climatisation #content #left,
                body.climatisation #content #right{ width: 420px; }
                body.climatisation #content div.produits{ width: 390px; }
                body.climatisation #content div.produits h3{ font-size: 19px;}
                body.climatisation #content div.produits img{ display: none;}
                body.climatisation #content div.produits a{ margin-top: 15px;}
                
                body.climatisation #content #right #coordonnee,
                body.climatisation #content #right #soumission{margin: 30px auto;}                
                
        /* ===============   CHAUFFAGE  ================ */
                
                #chauffage{ height: 173px; }
                body.chauffage #content{ background: none; }
                body.chauffage.interne #content #right { margin-top: 0;}
                
                body.chauffage #content #left,
                body.chauffage #content #right{ width: 420px; }
                body.chauffage #content div.produits{ width: 390px; }
                body.chauffage #content div.produits h3{ font-size: 19px;}
                body.chauffage #content div.produits img{ display: none;}
                body.chauffage #content div.produits a{ margin-top: 15px;}
                
                body.chauffage #content #right #coordonnee,
                body.chauffage #content #right #soumission{margin: 30px auto;}
                
        
        /* ============================================ */
        /* ===============   CONTACT  ================ */

                div.textarea textarea{width: 415px; margin-bottom: 30px; }
                input[type="submit"] {
                    float: none;
                    margin: 0 auto 40px;
                }
                
                body.interne.contact #content #right h2,
                body.interne.contact #content #right p,
                body.interne.contact #content #right a#map{ margin: 20px auto; text-align: center;}
}
/*=================================================================================*/
/*=================================================================================*/
/*  site entre 479 et 300 minimum pour smart phone  */
@media only screen and (max-width: 479px) {


        #ciel{ height: 168px; }
        #bg-menu-mobile{ top: 168px; height: 46px; }
        #wrapper{ width: 300px; }

            #header{ width: 300px; height: 173px;}

                #logo, #logo a{ width: 300px; height: 168px; }
                    #logo a{ background: url(../images/320/logo.png) no-repeat; }

                #menu{height: 46px; width: 300px; }
                    #menu .menu-mobile{ 
                        width: 86px;
                        height: 34px;
                        background: url(../images/320/btn-menu.png) no-repeat;
                        margin-top: 6px;
                    }
                    #menu p{ 
                        background: url("../images/320/phone.png") no-repeat left top;
                        font-size: 14px;
                        line-height: 15px;
                        margin-top: 4px;
                        padding-left: 50px;
                        width: 140px;
                    }
                    #menu p span{ font-size: 20px; line-height: 26px; }
                    
                    #menu ul, #menu ul ul{ height: 0px; overflow: hidden; width: 300px; margin: 5px 0 0; }
                    #menu ul ul{ height: auto;}

            #content,
                    #content #banner,
                    #content #left,
                    #content #right{ width: 300px; }
                    
                    #content .content{ float: left; width: 300px; }
                    
                    
                    
            #footer { height: 200px;  }
            #footer .footer{ width: 300px;  }
            
                
                #footer .signature {
                    margin: 115px 0 0;
                    width: 300px;
                }
                
                                
                #footer .regie-batiment { margin: 6px 0 0 15px; }
                
                #footer .signature p, #footer .signature p a {
                    font-size: 14px;
                }

        /* ============================================ */
        /* ===============   ACCUEIL  ================= */
                body.accueil #content #banner{ background: url(../images/320/banner.jpg) no-repeat; height: 163px; margin-top: 5px; }
                body.accueil #header{ width: 300px; height: 173px;}


                #teaser {
                    float: none;
                    margin: 30px 0 0;
                    width: 300px;
                    overflow: hidden;
                }
                #teaser #froid{ background: url(../images/480/climatisation.jpg) no-repeat;}
                #teaser #chaud{ background: url(../images/480/chauffage.jpg) no-repeat;  padding: 50px 95px 0 10px; }
                
                body.accueil #content h1{ line-height: 25px; font-size: 22px;}
      
      
        /* ============================================ */
        /* ===============   SERVICES  ================ */

                body.services #content #left{ width: 300px; margin-right: 0; }
   
                .installation{ background: url(../images/320/service-installation.jpg) top left no-repeat; }
                .reparation{ background: url(../images/320/service-reparation.jpg) top left no-repeat; }
                .entretien{ background: url(../images/320/service-entretien.jpg) top left no-repeat; }
                
                
                
        /* ===============   CLIMATISATION  ================ */
                
                #clim{ height: 168px; }
                body.climatisation #content{ background: none; }
                body.climatisation.interne #content #right { margin-top: 0;}

                body.climatisation #content #left,
                body.climatisation #content #right{ width: 300px; }
                body.climatisation #content div.produits{ width: 270px; }

                body.climatisation #content .produits p{ text-align: left;}                
                
        /* ===============   CHAUFFAGE  ================ */
                
                #chauffage{ height: 168px; }
                body.chauffage #content{ background: none; }
                body.chauffage.interne #content #right { margin-top: 0;}

                body.chauffage #content #left,
                body.chauffage #content #right{ width: 300px; }
                body.chauffage #content div.produits{ width: 270px; }

                body.chauffage #content .produits p{ text-align: left;}
                
        
        /* ============================================ */
        /* ===============   CONTACT  ================ */

                fieldset { width: 280px; padding: 10px; margin: 20px 0 0; }
                fieldset div.field, fieldset div.check{ width: 280px; }
                fieldset div.field label, fieldset div.check label{ width: 110px; }
                fieldset div.field input[type="text"], fieldset div.check input[type="text"]{ width: 150px; margin: 0 0 0 8px; }
                fieldset div.check label { width: 250px; }
                
                fieldset div.full label {
                    float: none;
                    font-size: 16px;
                    width: 200px;
                }
                fieldset div.full input[type="text"] {
                    float: none;
                    width: 70px;
                }
               div.textarea textarea{ width: 300px;}


}
/*=================================================================================*/
/*=================================================================================*/