@import url("font/font.css");
@laf: proxi;


#menu {position:absolute; top:100px; left:0; display:none;}
* {margin: 0;padding: 0; font:12px Arial; color:#666;}

html{
	height:100%;
        background:url(../images/css/body-fond-repeat.jpg);
        background-repeat: repeat-x;
}

body {
    background:url(../images/css/body-fond-repeat.jpg) repeat-x left 133px;
  
    background-color:white;
}

#site {
}

a>img{
    border:0px;
}

.clear{
	float:none;
	clear:both;
}

/* BLOCK SLOGAN */
#block-slogan{
  position:absolute;
  top:34px;
  left:173px;
  color:#fff;
  font-size:15px;
}

#diaporama{
    width: 995px;
    height: 326px;
    overflow: hidden;
    position:relative;
    margin-left: 9px;
    .ligne{width:995px;height:3px; background:#646167; margin-top:6px;}
    #diaporama_image{
height: 316px;border:1px solid #a2a0a0;border-top:0px;}
	a{text-decoration:none;}
    #autour_bottons{
        position:absolute;
        bottom: 35px;
        z-index: 100;
        width:914px;
    }
    #bottons{
        height:14px;
        /*width:644px;*/
        margin:auto;
        /*margin-left:20px;*/
        display:table;
        display:none;
    }
    #bottons .activeSlide div, #bottons div:hover{
        background-image:url(../images/css/diaporama-select.png);
    }
    #bottons div {
        background-image:url(../images/css/diaporama-unselect.png);
        float:left;
        height:15px;
        width:15px;
        cursor:pointer;
        margin-left:-1px;
    }
    
    .zone_texte {
    
      height: 315px;
      
      position: absolute;
      left:22px;
      top: 60px;
      width: 200px;
      z-index: 50;
      padding-left:20px;
      padding-right:20px;
      padding-top:35px;
      
      .fond {
          position:absolute;
          background: black;
          opacity: 0.2;
          height: 350px;
          width:240px;
          top:0px;
          left:0px;
          z-index: 49;
      }
      
      .content {
          position:absolute;
          z-index: 51;
          
          h2 {
              color: #eb0360;
              font: 26px/34px @laf;
          }
          
          .soustitre{font-weight:bold;font-size:15px;color:#6e6e6e;margin-top:35px;}
          .texte{font:15px/21px proxiLight; color:#58666b;margin-top:18px;}
      }
      
  }
}

#devis{
    background:url(../images/css/accueil-devis.png) no-repeat center center;
    width:233px;
    height:88px;
    font-family:@laf;
    font-size:25px;
    text-shadow:0px 1px 1px #757821;
    text-align:center;
    color:#fff;
    text-transform:uppercase;
    padding-top:21px;
    cursor:pointer;
    >div.mini{
      text-transform:uppercase;
      font-size:17px; 
      text-align:center;
      color:#fff;
      font-family:@laf;
      margin-top:5px;
    }
    &:hover{
      background:url(../images/css/accueil-devis-hover.png) no-repeat center center;
    }
}

#adresse{
     width:220px;
     height:121px;
     font-size:13px;
     right: 0px;
     top: 15px;
     position:absolute;
     >div.nom{
        font:14px helvLight;
        color:white;
     }
     >div.rue,>div.ville{
        font:12px helvLight;
        color:#b4aeae;
     }
     >div.tel,>div.fax,>div.email{
        font:12px helvLight;
        color:white;
     }
}
        
#header{
	text-align:center;
	margin:auto;
  height:133px;
  background:#3e0664;

	>#header-content{
    width:900px;
	   margin:auto;
	   position:relative;
     padding-top:85px;
     padding-left:214px;
	  >nav{ 
          height:48px;
          >ul{
              list-style:none;
              >li{
                  
                  float:left;
                  display:block;
                  position:relative;
                  &:hover{
                      >a{
                        background: url(../images/css/fond-menu-hover.jpg) left bottom repeat-x;
                        color:white;
                      }
                      >ul.sous_menu{
                          display:block;
                      }
                  }
                  
                  >ul.sous_menu{
                      display:none;
                      list-style:none;
                      position:absolute;
                      top:48px;
                      left:0px;
                      z-index:100;
                      width:300px;
                      padding-top:5px;
                      /*box-shadow: 0px 1px 5px #737373;*/
                      li{
                        
                          border-bottom:1px solid white;
                          &#fleche{
                              display:none;
                          }
                          a{
                              padding:0;
                              margin:0;
                              border:0;
                              height:20px;
                              overflow:hidden;
                              width:auto;
                              text-align:center;
                              background: #ede7f2;
                              padding: 5px 22px;
                              color:#4a4a49;
                              font:normal bold 12px/20px helvNarrowCERegular;
                              &:hover, &.selected{
                                background:#fafafa;
                              }
                          }
                      }
                  }
                  a{  
                      font:15px helvLight;
                      color:#dddbdb;
                      display:block;
                      padding-left:22px;
                      padding-right:22px;
                      padding-top:15px;
                      height:33px;
                      text-decoration:none;
                      &.selected, &:hover{
                        background: url(../images/css/fond-menu-hover.jpg) repeat-x left bottom;
                        color:white;
                      }
                      /*&#menu-accueil{
                           background:url(../images/css/menu-accueil.png) no-repeat 16px 10px;
                           text-indent:-9999px;
                           width:28px;
                           border-left:none;
                           padding-left:19px;
                           padding-right:8px;
                           &:hover, &.selected{
                              background:url(../images/css/menu-accueil-selected.png) no-repeat -1px -2px;
                              
                           }
                      }*/
                  }
              }
          }
      }

      #telephone {
            color:white;
            font-size:17px;
            font-family:@laf;
            width:200px;
            text-align:right;
            position:absolute;
            height:22px;
            top:50px;
            right:0px;
            background:url(../images/css/telephone.png) no-repeat;
          }
      
      >#logo{
          position:absolute;
          top:26px;
          left:89px;
          width:113px;
          height:201px;
          background:url(../images/css/logo.png) center center no-repeat;
          z-index:100;
          cursor:pointer;
      }
      >div#lang{
          float:left;
          margin-left:143px;
          position:relative;
          margin-top:-6px;
          margin-bottom:-5px;
          z-index:50;
          img{
            cursor:pointer;
          }
          a{
              >span{display:none;}
              >img{width:100%;}
              display:block;
              float:left;
              height:28px;
              /*&#lang-fr{
                background:url(../images/css/lang-fr.png) no-repeat center center;
                margin-top:-1px;
                width:38px;
                margin-right:7px;
              }
              &#lang-en{
                background:url(../images/css/lang-en.png) no-repeat center center;
              }
              &#lang-de{
                background:url(../images/css/lang-de.png) no-repeat center center;
              }
              &#lang-nl{
                background:url(../images/css/lang-nl.png) no-repeat center center;
              }
              &#lang-ch{
                background:url(../images/css/lang-ch.png) no-repeat center center;
              }*/
          }
          
      }
      >#social{
          float:right;
          margin-right:22px;
          margin-top:-30px;
          position:relative;
          a{
              >span{display:none;}
              >img{width:100%;display:none;}
              height:33px;
              float:left;
              display:block;
			  width:34px;
			  margin-right:5px;
				background:url(../images/social-icons.png) no-repeat top left;
			  &.facebook{
				background-position:-0px -42px;
				&:hover{background-position:0px 1px;}
			  }
			  &.linkedin{
				background-position:-41px -42px;
				&:hover{background-position:-41px 1px;}
			  }
			  &.email{
				background-position:-81px -42px;
				&:hover{background-position:-81px 1px;}
			  }
          }
      }
  }
}


.bloc-accueil {
    width:298px;
    float:left;
    color:#6c6c6c;
    margin-top: 0;
    padding-top: 23px;
    margin-right:48px;
    .paragraphe-gallery{
        margin-top:10px;
        img{
            float:left;
            margin-right:7px;
            max-height:105px;
            &.last{
              margin-right:0px;
              margin-left:1px;
            }
        }
    }
    &.client{
      img{
          display:inline;
      }
      h2{
        width: 190px;
        height:auto;
        padding-left:0px;
        margin-bottom:20px;
      }
      .auteur,.site{
        margin-top:20px;
        float:left;
        display:block;
        line-height:20px;
      }
      .auteur{
          color:#433d3d;
          font:16px proxiLight;
          margin-right:5px;
      }
      .site{
          color:#a6a5a5;
          font:12px proxiSemiBold;
          line-height:20px;
      }
    }
    &.entreprise{
        width: 740px;
        h2{
          width: 170px;
          height:auto;
          padding-left:0px;
          margin-bottom:20px;
        }
        img{
            float:left;
        }
        p{line-height:20px;}
    }
    
    &.manchot{
        position:relative;
        width: 220px;
        .images-manchot{
            position:relative;
            z-index:1;
            height: 255px;
            overflow: hidden;
            img{
                max-width:234px;
                display:block;
                margin:auto;
                margin-top:3px;
                margin-bottom:3px;
                float:none;
            }
        }
        >.mask-manchot{
            background:url(../images/css/mark-manchot.png) repeat-x left top;
            width:234px;
            height:251px;
            position:absolute;
            z-index:2;
            left:0;
            top:89px;
        }
        h2{
          width: 170px;
          height:auto;
        }
        p{line-height:20px;}
    }

    img {
        margin-bottom:10px;
        
      margin: auto;
      display: block;
    }

    p {
        font:12px helvLight;
        color:#5d450c;
        text-align: justify;
        margin-top: 10px;

    }

    /*.btn-0 {
        background: url(../images/css/btn-email.jpg) left top no-repeat;
    }

    .btn-1 {
        background: url(../images/css/btn-database.jpg) left top no-repeat;
    }

    .btn-2 {
        background: url(../images/css/btn-souris.jpg) left top no-repeat;
    }

    .btn-3 {
        background: url(../images/css/btn-confiance.jpg) left top no-repeat;
    }*/
}

.contenu.page{
    min-height:400px;
    
    width: 1040px;
    margin:auto;
    background: white;
    
    .header-page{
      display:none;
    }
    
    .contenu-paragraphes{
      width:637px;
      margin-right:30px;
    }
}

.contenu.accueil{
    width:1014px;
    background:white;
    margin:auto;
    padding-bottom:64px;
    position:relative;
    h2{
      font:20px helvCondBold;
      color:#3e0664;
    }
    h3{
        color: #3E0664;
        font: 15px helvLight;
    }
		div.left{
		    float:left;
		    width:245px;
		    margin-left:-3px;
  		  #devis{
            margin-bottom:20px;
        }
		}
		div.right{
		    float:left;
		    width:660px;
		}
		.message_accueil{
		    position:absolute;
		    left:9px;
		    bottom:14px;
		    font:14px helvBold;
		    color:#2e2d2d;
		    background:#e4e4e4;
		    width:650px;
		    height:56px;
		    line-height:56px;
		    text-indent:45px;
		    .lien_fr{
		        background:url(../images/css/message_accueil_fr.png) no-repeat left top;
		        position:absolute;
		        top:6px;
		        right:5px;
		        text-indent:-9999px;
		        width:96px;
		        height:41px;
		    }
		}
}


/* BLOCK MINI ACTUALITE (agendamanifestations) */
#block-mini-actualite{
    position:relative;
    margin-top:19px;
    width: 302px;
    float: left;
    margin-left:9px;
    margin-right:49px;
    h2{
        background: none repeat scroll 0 0 #B3B3B3;
        color: white;
        font: 20px helvCondBold;
        height: 28px;
        padding-left: 9px;
        padding-top: 3px;
    }
    /*div.fleche{
        height:25px;
        width:18px;
        position:absolute;
        z-index:1;
        top:16px;
        cursor:pointer;
        &#actualite-fleche-gauche{
            background:url(../images/css/actualite-fleche-gauche.png) no-repeat center center;
            left: 231px;
            top: 95px;
        }
        &#actualite-fleche-droite{
            background:url(../images/css/actualite-fleche-droite.png) no-repeat center center;
            right: 236px;
            top: 95px;
        }
    }*/
    
    >h1{
        text-align:center;
        text-transform:uppercase;
        font-size:15px;
        color:#909090;
        font-family:@laf;
        line-height:56px;
        padding-right:18px;
    }
    div.liste-actualites{
        height: 210px;
        overflow:hidden;
        position:relative;
        .actualite-mini{
            /*&.firstitem,&.lastitem{
              opacity:0.5;
            }*/
            margin-top:20px;
            div.image{display:none;}
            
            div.content{
                padding-left:5px;
                /*h1{
                    font-family:proxiSemiBold;
                    line-height:18px;
                    font-size:16px;
                    color:#5d5d5d;
                    text-transform:none;
                    margin-bottom:6px;
                }*/
                
                h2{
                    font-family:Georgia;
                    font-style:italic;
                    color:#999;
                    line-height:22px;
                }
                
                div{
                    margin-top:10px;
                    overflow: hidden;
                    *{
                        color: #5D450C;
                        font: 12px helvLight;
                        margin-top: 10px;
                        text-align: justify;
                        /*
                        font: 10px helvCond;
                        color: #5d450c;
                        text-align: justify;
                        margin-top: 10px;*/
                    }
                }
                
                /*input[type="button"]{
                    background:url(../images/css/actualite-lire.png) no-repeat center center;
                    text-transform:uppercase;
                    font:10px @laf;
                    border:none;
                    width:122px;
                    height:34px;
                    text-align:center;
                    line-height:32px;
                    cursor:pointer;
                }*/
            }
        }
    }
    
}

/* LE FOOTER */
#footer{
    position:relative;
  	background:url(../images/css/fond-footer.png) no-repeat left top #58575a;
  	
  	height:44px;
  	
  	text-align:left;
  	line-height:16px;
  	font-size:11px;
  	
  	>span.nom{
  	  font-size:14px;
  	}
  	>span.sep{
  	  padding:0px 6px;
  	}
  	>div.design-by{
  	  margin-top:12px;
  	  font-size:11px;
  	}
    .footer-content {
        height:34px;
        
        padding-left:25px;
        width:1014px;
        margin:auto;
        padding-top:3px;
    }

    .btn-contact {
        background: url(../images/css/btn_contact.jpg) no-repeat;
        height:35px;
        width:192px;
        text-align:center;
        color:white;
        font-family:@laf;
        margin-top:30px;
        cursor:pointer;
        font-size:15px;
        padding-top:14px;
    }

    ul.menu {
        list-style:none;
        float:left;
        margin-top:10px;
        li {
            padding-bottom:2px;
            float:left;
            margin-right:17px;
            a {
                font:13px helvLight;
                color:#dddbdb;
                text-decoration:none;
                &:hover,&.selected {
                    color:white;
                }
            }
        }
    }
    
    .allright {
        float:right;
        color:white;
        font:10px helvNarrowCERegular;
				margin-top:11px;
				.allright-content{
					color:white;
					font:11px helvLight;
				}
    }
}

/* BLOCK NEWSLETTER */

#block-newsletter{ 
    background:url(../images/css/newsletter-fond.png) no-repeat center center;
    width:717px;
    height:45px;
    overflow:hidden;
    h1,h2,#input_email,#inscription{
        display:block;
        float:left;
    }
    h1{
        font:22px/45px DINAlternateLight;
        margin-left:12px;
    }
    h2{
        font:12px/50px Arial;
        color:#16242d;
        margin-left:21px;
    }
    #input_email{
        color:#2d4e61;
        background:url(../images/css/newsletter-input.png) no-repeat;
        width:161px;
        height:23px;
        margin-left:109px;
        border:none;
        margin-top:11px;
        padding-left:5px;
        line-height:26px;
        font:12px Arial;
        color:#2d4e61;
    }
    #inscription{
        box-shadow: 5px 3px 8px #BDBDBD;
        text-transform: uppercase;
        font: 12px DMA;
        color: white;
        text-shadow: 0px 0px 2px #595959;
        width: 161px;
        height: 24px;
        text-align: center;
        border: none;
        margin-left: 10px;
        background-color: #248129;
        border-radius: 2px;
        margin-top:10px;
        cursor:pointer;
    }
}

#contact{
    width:auto;
    padding-left:38px;
    
    margin:auto;
    
    .contenu{
        .erreur{
            color:red;
        }
        .success{
            color:green;
        }
        form.formulaire-contact{
            position:relative;
            margin-top:60px;
            label,input{
                display:block;
            }
            label{
                font:16px helvLight;
                color:#2e2e2e;
                margin-bottom: 5px;
            }
            .colonne1,.colonne2{
                float:left;
                padding-left:20px;
                padding-left:0;
            }
            .colonne1{
                margin-right: 64px;
            }
            input[type="text"],input[type="email"] {
                border:1px solid #6f3098;
                font:normal normal 15px helvLight;
                box-shadow: 0px 1px 1px rgba(44,43,43,0.2) inset;
                border-radius:2px;
                display:block;
                color:#4a4a4a;
                height:30px;
                padding: 0px 0px 0px 15px;
                margin:2px 0px 40px 0px;
                width:450px;
            }
            input[type="text"].mini {
                border:0px;
                background:url(../images/css/contact-input-mini.png) no-repeat;
                font:14px;
                height:22px;
                padding:0;
                padding-left:5px;
                font-family: Arial;
                margin-top:9px;
                margin-bottom:5px;
                width:209px;
                float:left;
                margin-left:5px;
            }
            input[type="text"].mini2 {
                border:0px;
                background:url(../images/css/contact-input-mini2.png) no-repeat;
                font-size:14px;
                height:22px;
                padding:0;
                padding-left:5px;
                font-family: Arial;
                margin-top:3px;
                margin-bottom:5px;
                width:157px;
            }
            div.aide{
                position:absolute;
                right:30px;
                top:0px;
                color:#5376b5;
                cursor:pointer;
                &:hover{
                    text-decoration:underline;
                    >div.texte{display:block;}
                }
                >div.texte{
                    >h4{
                        font-weight:bold;
                    }
                    >a{
                        color:#5376b5;
                    }
                    display:none;
                    width: 145px;
                    right:-145px;
                    background: white;
                    border:1px solid #a3a3a3;
                    padding: 5px 8px;
                    box-shadow:0px 0px 5px #909090;
                    position:absolute;
                    top:10px;
                }
            }
            
            /* 
              Hide the original radios and checkboxes
              (but still accessible)
                
              :not(#foo) > is a rule filter to block browsers
                           that don't support that selector from
                           applying rules they shouldn't
                 
            */
            span.radio{
              float:left;
              width:65px;
            }
            span > input[type='radio']{
              /* Hide the input, but have it still be clickable */
              opacity: 0;
              float: left;
              width: 18px;
            }
            span > input[type='radio'] + label{
              margin: 0;
              clear: none;
              /* Left padding makes room for image */
              padding: 5px 0 4px 24px;
              /* Make look clickable because they are */
              cursor: pointer;
              background: url(../images/css/checkbox-off.png) 1px 4px no-repeat; 
            }
            /*
              Change from unchecked to checked graphic
            */
            input[type='radio']:checked + label {
              background: url(../images/css/checkbox-on.png) 2px 6px no-repeat; 
            }
            
            
            textarea {
                padding:11px 0px 0px 14px;
                width:450px;
                height:125px;
                border:1px solid #6f3098;
                font:15px helvLight;
                box-shadow: 0px 1px 1px rgba(44,43,43,0.2) inset;
                display:block;
                border-radius:2px;
                margin-top:3px;
            }
            input[type="submit"]{
                margin-right: 38px;
                margin-top: -25px;
                font:15px helvLight;
            }
            input#erreur{
              border:1px solid red;
            }
            textarea#erreur{
              border:1px solid red;
            }
        }
    }
    #file-button{
        background:none;
        border:none;
        border-radius:0px;
        background:url(../images/css/contact-button.png) no-repeat;
        &:hover, &.selected{
          background:url(../images/css/contact-button-select.png) no-repeat;
        }
        text-align:center;
        float: right;
        cursor: pointer;
        &:hover>span{
            color:#999;
        }
        border:none;
        padding-bottom: 8px;
        width: 122px;
        height: 40px;  
        font:10px/32px @laf;
        text-transform:uppercase;
        font-weight:normal;
        text-shadow:none;
        float:left;
        margin-left:10px;
        margin-bottom:9px;
    }
    
    #file_upload{
        /*float:left;
        margin-left:10px;
        margin-bottom:9px;*/
       display:none;
    }
    /*
    .uploadify-button{
        >span{
            font:10px/32px @laf;
            text-transform:uppercase;
            font-weight:normal;
            text-shadow:none;
        }
        background:none;
        border:none;
        border-radius:0px;
        background:url(../images/css/contact-button.png) no-repeat;
        text-align:center;
        float: right;
        cursor: pointer;
        &:hover>span{
            color:#999;
        }
    }
    #file_upload-queue{
        float:left;
        width:20px;
        .cancel {display:none;}
        .fileName{display:none;}
        .uploadify-progress{display:none;}
        .data{margin-left: -5px;line-height: 4px;}
    }*/
}

.page_menu{
    margin-right:15px;
    width: 300px;
    margin-top: 168px;
    margin-left: 36px;
    margin-bottom:100px;
    >ul{
        list-style:none;
        >li{
              margin-bottom:4px;
             &.selected{
              >a{
                background:white;
              }
              >ul{
                  background: white;
              }
            }
            &.selected-parent>a{
              
              color: white;
              background: #61546a;
            }
            /*&.selected>a, &:hover>a{
              color:white;
            }*/
            >a{
              font:normal bold 15px helvLight;
              text-decoration:none;
              line-height:29px;
              height:29px;
              color:#4a4a49;
              padding-left: 30px;
              background: #f3f2f3;
              display:block;
            }
            >ul{
                list-style:none;
                >li{
                    &.selected>a,&:hover>a{
                      color:white;
                      background:#61546a;
                    }
                    >a{
                       font:normal normal 14px helvLight;
                       color:#61546a;
                       text-decoration:none;
                       padding-left:42px;
                       display:block;
                       height:25px;
                       line-height:25px;
                    }
                }
            }
        }
    }
    
    >a{
        font:11px @laf;
        color:#909090;
        text-decoration:none;
        display:block;
        line-height:42px;
        height:41px;
        overflow:hidden;
        &:hover, &:hover *,&.selected, &.selected {background:url(../images/css/sub-menu-select.png) no-repeat left top;color:#666;}
        text-transform:uppercase;
        text-align:left;
        background:url(../images/css/sub-menu-fond.png) no-repeat left top;
        width:232px;
        padding-left:17px;
        text-align:left;
     }
}



#page{
    &.page-paragraphe-produit{
        >h1{
            font: 20px helvCond;
            color: #3e0664;
            margin-bottom:20px;
        }
        .devis{
        	margin-top: 10px;
			cursor: pointer;
			background: url(http://localhost/padilla/css/../images/css/produit_fleche.png) 0px 4px no-repeat;
			border-bottom: 1px dotted #cdcdcd;
			border-top: 1px dotted #cdcdcd;
        	a {
	        	font:normal bold 15px/30px helvLight;
	        	color: #3e0664;
        		padding-left: 40px;
	        }
        }
        >.description{
            font: normal normal 13px/18px helvLight;
            color: #6b6b6b;
            padding-bottom:25px;
            background:url(../images/css/dotted.png) left bottom no-repeat;
            margin-bottom:20px;
            position:relative;
            >.plus-details{
                padding-left:40px;
                background:url(../images/css/plus.png) left center no-repeat;
                color:#e46a10;
                font:14px/26px helvCond;
                position:absolute;
                bottom: -17px;
                right: 0px;
                height: 31px;
            }
        }
        .paragraphe .lien{
            width: 350px;
            text-align: justify;
            ul li{margin-left:15px;}
            *{color: #5d450c;}
            >h2{
                font: 20px helvCondBold;
                color: #3e0664;
                margin-bottom: 1px;
            }
        }
        .paragraphe-bottom{
            margin-right:-25px;
            padding:30px 0px;
						ul{padding-bottom:5px;li{margin-left:15px;}}
            >div{
                width:282px;
                border-bottom : 1px dotted #cdcdcd;
                margin-right:25px;
                &.clear{width:auto;margin:0px;border:0px;}
                >.titre{
                  height:30px;
                  background:url(../images/css/produit_fleche.png) 0px 4px no-repeat;
                  font:normal bold 15px/30px helvLight;
                  color:#3e0664;
                  padding-left:40px;
                  cursor:pointer;
                  &.open{
                    background-position:0px -28px;
                  }
                }
								&.format{
									
									width: auto;
									min-width: 284px;
								}
                >.content{
                    display:none;
                    >div{
                      padding-left: 15px;
                      margin-bottom: 5px;
                      a{line-height:25px;}
                    }
                    table{
                        width:615px !important;
                        >thead{
                            background:#381761;
                            *{color:white;font:13px/26px helvLight;}
                        }
                        th, th *{color:white;font:13px/26px helvLight;}
                        >tbody{
                            >tr>td{
                                line-height:26px;
                                text-indent: 40px;
                            }
                            & tr:nth-child(2n+1){
                                background:#ece7ee;
                            }
                        }
                    }
                    &.open{
                      display:block;
                    }
                  
                }
            }
        }
        
    }
    margin:auto;
    position:relative;
    margin-top:37px;
    .gallery{
      margin-top:20px;
    }
    .gallery a{
      position:relative;
      text-decoration:none;
      float:left;
      display:block;
      max-width:150px;
      height:110px;
      border:1px solid #636265;
      margin-right:10px;
      margin-bottom:10px;
      >.hover{font:normal normal 11px Arial; position:absolute;z-index:2;left:-1px;top:113px;display:none; padding:4px 7px; background:#58575a; color:white; min-width:50px;min-height:10px;}
    }
    
    .gallery a:hover{
      border:1px solid #532d9e;
      box-shadow:0px 0px 2px #532d9e;
    }
    
    .gallery a img{
      height:100%;
    }
    
    .paragraphe-top h2{
      font:20px helvCondBold;
      color:#3e0664;
      margin-bottom:1px;
    }
    .paragraphe-bottom{margin-bottom:40px;}
    .paragraphe .lien{
      *{font:normal normal 12px/18px helvLight; text-align:justify; color:#6b6b6b;}
      ul li{margin-left:15px;}
    }
    .paragraphe .lien p{margin-bottom:15px;}
    .left{
        margin-left:-3px;
        float:left;
        #devis{margin-bottom:20px;}
        
    }
    &.page-contact{
        padding-top:0px;
        margin-top:0px;
        #maCarte{
          width: 1040px;
          height: 327px;
        }
        .right{
            >h1{
                text-align:center;
                font:14px @laf;
                color:#909090;
                line-height:41px;
                margin-top:4px;
            }
            >img{
                margin-left:7px;
                border:1px solid #666666;
            }
        }
        #contact{
        }
    } 
    .right{
        padding-bottom:20px;
        >h3{
            color:#6f6f6f;
            font:12px/39px DMA;
            text-transform:uppercase;
            margin-top:14px;
        }
        .paragraphe-top{
           background:url(../images/css/paragraphe-fondtop.png) repeat-y center top;
           height:65px;
           width:700px;
           >h1{
                text-align:center;
                font:20px @laf;
                color:#909090;
                line-height:50px;
            }
        }
        .paragraphe-bottom{
           background:url(../images/css/paragraphe-fondbottom.png) repeat-y center top;
           width:700px;
           height:41px;
        }
        .paragraphe{
            background:url(../images/css/paragraphe-fond.png) repeat-y center top;
            padding:12px 37px 20px;
            width:626px;
            strong{
              font-weight:bold;
              font-size:13px;
            }
            *{line-height:20px;}
            a{color:#d8dd43;text-decoration:none;font-weight:bold;}
           p{
              >img{
                  margin-top:19px;
                  margin-bottom:11px;
                  border-top:3px solid #e3e3e3;
                  border-bottom:2px solid #e3e3e3;
                  border-left:5px solid #e3e3e3;
                  border-right:4px solid #e3e3e3;
              }
           }
           
           >.contact-accompagnement>.mini_contactAjax{
              label{
                  color:#131313;
                  font-size:14px;
                  width:230px;
                  display:block;
                  float:left;
                  padding-right:20px;
              }
              input[type="text"],input[type="email"]{
                  background:url(../images/css/input-fond.png) repeat-x;
                  height:28px;
                  border:none;
                  border-left:1px solid #ababac;
                  border-right:1px solid #ababac;
                  width:233px;
                  padding-left:5px;
                  margin-bottom:22px;
              }
              input[type="text"]#date_travaux{
                  background:url(../images/css/input-fond.png) repeat-x;
                  height:28px;
                  border:none;
                  border-left:1px solid #ababac;
                  border-right:1px solid #ababac;
                  width:124px;
                  padding-left:5px;
              }
              input[type="submit"]{
                  font:30px/49px DINBlack;
                  border:none;
                  background:url(../images/css/contact-button.png) no-repeat;
                  width:161px;
                  height:49px;
                  text-align:center;
                  color:white;
                  float: right;
                  margin-right: -4px;
                  margin-top: 30px;
                  cursor: pointer;
                  font-size: 25px;
                  font-family: DINBold;
                  &:hover{
                      color:#37586d;
                  }
              }
              form{
                  margin-top:38px;
                 *{
                    color:#131313;
                 }
                 .autourchoix_typecontact{
                      margin-bottom:20px;
                     .choix_typecontact{
                          text-transform:lowercase;
                          margin-right: 15px;
                          padding-right: 23px;
                          line-height: 16px;
                          background: url(../images/css/radiobox.png) no-repeat -67px center;
                          &.selected{
                              margin-right: 15px;
                              padding-right: 23px;
                              line-height: 16px;
                              background: url(../images/css/radiobox.png) no-repeat 27px center;
                          }
                      }
                  
                      .choix_typecontactnon{
                          margin-right: 15px;
                          padding-right: 23px;
                          line-height: 16px;
                          background: url(../images/css/radiobox.png) no-repeat -67px center;
                          &.selected{
                              margin-right: 15px;
                              padding-right: 23px;
                              line-height: 16px;
                              background: url(../images/css/radiobox.png) no-repeat 27px center;
                          }
                      }
                  }
              }
          }
           
        }
        
    }
	&.page-livredor{
		margin-top: 13px;
		.left{
		width: 235px;
		}
		.message_livredor{
			.doubleslash{
				color:#cccc33;
			}
			.message{
				
				padding-top: 0px;
				margin-top: 0px;
				margin-left: 0px;
				padding-left: 5px;
				h2{
					font:14px Arial;
					font-weight:bold;
					color:#666666;
				}
			}
		}
		
		.formulaire_livredor{
			.sucess_livredor{
				color: rgb(6, 163, 12);
				font-size: 10px;
				width: 200px;
				margin-top: -13px;
				display: block;
			}
			label{
				text-indent: 10px;
				display: block;
				margin-bottom:1px;
			}
			margin-left:-2px;
			form{
				padding:0px 14px;
			}
			h1{
				text-align: center;
				font: 15px LaffayetteComicProRegular;
				color: #909090;
				line-height: 50px;
			}
			background:url(../images/css/livredor_form.png) no-repeat left top;
			width:238px;
			height:415px;
			input[type="text"]#erreur{
				border:1px solid red;
			}
			input[type="text"]{
				border: 0px;
				font-size: 14px;
				height: 22px;
				padding: 0;
				padding-left: 5px;
				font-family: Arial;
				margin-top: 2px;
				margin-bottom: 5px;
				width: 248px;
				background: url(http://comecom.lu/josten/css/../images/css/contact-input.png) no-repeat;
				width:202px;
				border-right:1px solid rgb(197, 197, 197);
			}
			textarea{
				background:url(../images/css/livredor_form_textarea.png) no-repeat left top;
				width:204px;
				height:133px;
				border:0px;
				padding-top:5px;
				padding-left:5px;
				font: 14px Arial;
			}
			input[type="submit"]{
				font: 11px/30px LaffayetteComicProRegular;
				border: none;
				background: url(../images/css/contact-button.png) no-repeat;
				width: 122px;
				height: 34px;
				text-align: center;
				text-transform: uppercase;
				float: right;
				margin-right: 0px;
				margin-top: 8px;
				cursor: pointer;
				float:right;
			}
		}
	}
	&.page-listing_membre{
		margin-top: 16px;
		.right{
			width: 695px;
		}
	
		.paragraphe.membre{
			background:url(../images/css/fond-membre.png) no-repeat left top;
			padding: 12px 16px 35px 13px;
			width: 194px;
			position:relative;
			z-index:0;
			float:left;
			margin-right:7px;
			.lien_admin{
				
				font-size: 11px;
				color: white;
				position: absolute;
				left: 20px;
				top: 10px;
				text-shadow: 1px 1px black;
				
      color: #3e0664;
      text-shadow: 0px 1px white;
			}
			a.lightbox{
				box-shadow: 0px 0px 4px black inset;
				display: block;
			}
			img{
				display:block;
				position:relative;
				z-index:-1;
				width:193px;
				height:143px;
			}
			.lien{
				.nom{
					font:15px @laf;
					color:#909090;
					text-transform:uppercase;
					text-align:center;
					margin-top:12px;
				}
				.poste{
					font:12px @laf;
					color:#909090;
					text-transform:uppercase;
					text-align:center;
					margin-top:6px;
				}
			}
		}
	}
}

#parallax{
    margin-top:20px;
    position:relative; 
    overflow:hidden; width:1100px; height:445px;
    margin:auto;
   
    >.parallax-layer{
        position:absolute;
    }
}


#addDiv{
   background:url(../images/css/addDiv-fond.png) no-repeat left top;
   width:114px;
   height:59px;
   position:absolute;     
   right: 26px;
    top: 398px;
   z-index:100;
   padding:5px;
   
    overflow:auto;
   .deleteOption{
      display:block;
      float:left;
      background:url(../images/css/cross.png) no-repeat center center;
      height:14px;
      width:16px;
      cursor:pointer;
   }
}

.lien_admincateg{
	*{color:#3e0664;}
	display:block;
	color:#3e0664;
}


.header-page{
    background:#e4e4e4;
    height:80px;
    h1{
        font:26px helvBold;
        color:#3e0664;
        padding-left:35px;
        padding-top:24px;
    }
    .soustitre-page{
        font:15px proxiBold;
        color:#6e6e6e;
        padding-left:35px;
        padding-top:14px;
    }
}
.header-page-description{
  color:#2e2e2e;
  font:16px/22px proxi;
  margin-top:60px;
}

.float_l{float:left;}
.float_r{float:right;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.ml40{margin-left:40px;}
.mr20{margin-right:20px;}
.mr25{margin-right:25px;}
.mr30{margin-right:30px;}
.mr40{margin-right:40px;}
.mr40-n{margin-right:-40px;}
.mr50{margin-right:50px;}
.mr60{margin-right:60px;}
.w710{width:710px;}
.w910{width:910px;}
.w990{width:990px;}
.block{display:block;}
.trait-gris{
  height:1px;
  background:#e2e2e2;
  clear:both;
  float:none;
  margin-left:17px;
  margin-top:2px;
  margin-bottom:12px;
}
/*SELECT GROUP CSS*/
.ui-selectgroup.ui-state-default{display: block; overflow: hidden; position: relative; width: 185px; text-decoration: none; margin-top:2px;margin-bottom:14px;}
.ui-selectgroup-copy {text-transform:uppercase; font:11px/30px @laf; display: block; background:url(../images/css/contact-select-fond.png) no-repeat left top;height: 30px;display: block;padding-left: 20px;padding-bottom: 4px;width: 185px;}
.ui-state-default .ui-icon.ui-selectgroup-icon {position: absolute; top: 9px; right: 5px; background:url(../images/css/contact-select-fleche.png) no-repeat left top;}
.ui-selectgroup-group {width: 202px;}
.ui-selectgroup-group {position: absolute;}
.ui-selectgroup-group li:hover, .ui-selectgroup-group li.ui-state-active{background-color:#338ac7;}
.ui-selectgroup-group li:hover>a,.ui-selectgroup-group li.ui-state-active>a{color:white;}
.ui-selectgroup-list {list-style: none; padding: 0; margin: 0;margin-top:-5px; width: 185px; background-color:#fcfcfc; border:1px solid #a3a3a3;}
.ui-selectgroup-list li {border-top: 1px dotted transparent; border-bottom: 1px dotted transparent;}
.ui-selectgroup-list .ui-state-hover {border-right: none; border-left: none; font-weight: normal;}
.ui-selectgroup-list .ui-state-active {border-right: none; border-left: none; font-weight: normal;}
.ui-selectgroup-list a {display: block; padding: 5px; text-decoration: none;}
.ui-selectgroup-optgroup {padding: 0 0 0 5px;}
.ui-selectgroup-optgroup span {display: block; padding: 5px 0;}
.ui-selectgroup-optgroup ul {list-style: none; padding: 0;margin: 0; }
.ui-selectgroup-optgroup li {padding: 0 0 0 10px; margin: 0 0 0 -5px;}


.button-purple,.button-orange{
    background:none;
    border:0px;
    color:white;
    
    width:118px;
    height:25px;
    
    text-align:center;
    cursor:pointer;
    display:block;
    float:right;
    text-decoration:none;
    margin-top:10px;

    font: 14px/22px HelvLight;
}

.button-orange{
  background:#ea7b0f;
}

.button-purple{
  background:#6f3098;
}


    .ui-button-text {color: white;}
	
	
.ui-dialog .ui-dialog-titlebar-close{padding:0px!important;}
.ui-dialog .ui-dialog-titlebar-close span{margin:0px!important;margin-left:-1px!important;margin-top:-1px!important;}