html, body {
        margin:0;
        background : #637FA1;
        height: 100%;
        font-family: Arial, Verdana, Helvetica, Lucida, Tahoma, Geneva, sans-serif;

}

/*--------------SECURIDEV----------------SECURIDEV-------------------------SECURIDEV-----------------------------*/

 .essai{

   height: 100px;
   width: 180px;
   border :0px #000000 solid;
   background: url(../../images/cadre.jpg) no-repeat;
}

.logosecuridev{
  margin-top:10px;

}

 .lien {
             padding: 5 10px 1 10px;
             font-family:  Verdana, Arial, Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
             font-size: 60%;
             font-weight: bold;
             color: #004080;
             text-decoration: none;
}

a.lien:hover {
              padding: 5 10px 1 10px;
              background-position: 5% 50%;
              font-family: Verdana, Arial, Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
              font-size: 60%;
              margin-left: 0px;
              font-weight: bold;
              color: #C8E5FC;
}


/* ----------CADRE menu---------------CADRE menu----------------CADRE menu------------- */
.securidev {         /* positionnement du cadre, que vous pouvez modifier */
        position: absolute;
        float: left;
        left: 0px;
        top: 120px;
        height: 380px;
        width: 180px;
        border : 0px #000000 solid;
}

dl {         /* positionnement du cadre, que vous pouvez modifier */
        position: absolute;
        left: 0px;
        top: 0px;
        width: 170px;    /* largeur du cadre, selon votre image de fond */
}

dl, dt, dd {         /* suppression de toutes les marges */
       margin: 0;
       padding: 0;
}

dl {         /* image qui sera fixée en bas du cadre */
       width: 161x;

       background: url(../../images/menu_bas.GIF) bottom left no-repeat;
       padding-bottom: 26px;   /* pour que le texte ne s'affiche pas sur l'arrondi du bas */
       margin bottom: 0px;
}

dt {         /* définitions du titre du cadre */
       margin left: 0px;
       width: 162x;
       height: 26px;
       background: url(../../images/menu_haut.GIF) top left no-repeat;

       margin bottom: 0px;
       font-size: 0px;
       font-weight: bold;

}

dd {
       left: 1px;
       padding: 5 20px 1 10px;

       background: url(../../images/menu.GIF) top left;    /* arrière-plan intérieur qui va se répéter */

}

p {
       margin:0; /* marges des paragraphes */
       font-weight: bold;
}




#navlist
{
padding: 0 0px 0px;
margin-left: 0px;

background: #C0C0C0;
width: 10em;
}

#navlist li
{
list-style: none;
margin-bottom: 0.01em;
border-top: 0px solid #FFFFFF;
text-align: left;
}

#navlist li a
{
display: block;
padding: 0.25em 1.20em 0.50em 1.75em;
border-left: 1em solid #C9E4FE;
background: #FFFFFF;
text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover
{
border-color: #FFFFFF;
color: #FFF;
background: #004080;
}





/* ----------menu------------------------menu----------------------menu------------- */
 .lien1 {
             padding: 5 10px 1 10px;
             font-family:  Verdana, Arial, Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
             font-size: 60%;
             font-weight: bold;
             color: #004080;
             text-decoration: none;
}

a.lien1:hover {
              padding: 5 00px 1 10px;
              background: url(../../images/guil.gif) no-repeat;
              background-position: 5% 50%;
              padding-left: 20px;
              padding-top: px;
              font-family: Verdana, Arial, Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
              font-size: 60%;
              margin-left: 0px;
              font-weight: bold;
              color: #A4A4A4;
}

.blocpage {

     position:absolute;
     left: 50%;
     width: 800px;
     margin-left: -400px; /* moitié de la largeur */
     border: 0px solid #B7B7B7;
     background: #FFFFFF;
}


.texte {
            width: 550px;
            margin-left: 20px;
            color: #808080;
            font-family:  Verdana, Arial, Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
            font-size: 100%;
            border: 0px solid #C0C0C0;
}

.bottom_prod {
            width: 550px;
            height: 45px;
            background-color: #E8E8E8;
            border: 0px solid #000;
            margin-top: 30px;

}

.prod {

            font-family: Arial, Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
            color: #000000;
            font-weight: bold;
            font-size: 60%;
            padding-left: 20px;
            padding-top: 0px;
}

.titrepdf {

            font-family: Helvetica, sans-serif;
            color: #000;
            font-weight: bold;
            font-size: 70%;
            padding-left: 20px;
            padding-top: 0px;
}

.entete {

            height: 0px;
            margin-left: 3px;
            border: 0px solid #000;
}

.contenu {
            float: top;
            top: 100px;
            margin-top: 120px;
            margin-left: 200px;
            width: 590px;

            border: 0px solid #000000;

}

.fleche{

            width: 30em;
            padding: 1 40px;
            background: url(../../images/fleche.gif) no-repeat;
            border: 0px solid #000;
}

.calque{
            float: top;
            position: absolute;
            left: 0px;
            top: 450px;
            width: 177px;
            height: 219px;



}


.bas_page {
            font-family:  Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
            font-size: 60%;
            color: #808080;
            text-align: center;
            background: #FFFFFF;
            float: top;
            top: 100px;
            width: 100%;
            height:20px;

}


/*----------TEXTE----------------------TEXTE----------------TEXTE-----------------------------------*/

h1{
             font-family:  Verdana, Arial, Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
             font-size: 120%;
             font-weight: bold;
             color: #66CCFF;
             text-decoration: none;
}

h2{
             font-family:  Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
             font-size: 100%;
             font-weight: bold;
             color: #003366;
             margin-left: 60px;
             margin-TOP: 0px;

}

h5{
             font-family:  Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
             font-size: 80%;
             font-weight: bold;
             color: #003366;

             margin-TOP: 0px;

}

h3{
             font-family:  Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
             font-size: 85%;
             color: #000000;
             margin-left: 20px;
             }

h4{
             font-family:  Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
             font-size: 120%;
             color: #808080;
             margin-TOP: 15px;
             margin-left: 20px;
             }

.liste {
             font-family:  Verdana, Arial, Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
             font-size: 80%;
             font-weight: bold;
             color: #808080;
             text-decoration: none;
             margin-left: 30px;

}

a.liste:hover {
             font-family:  Verdana, Arial, Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
             font-size: 80%;
             font-weight: bold;
             color: #84BDFD;
             left: 60px;
             text-decoration: none;
             margin-left: 30px;

}

.liensite {
             font-family:  Verdana, Arial, Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
             font-size: 70%;
             font-weight: bold;
             color: #808080;
             text-decoration: none;
             margin-left: 20px;
}

a.liensite:hover {
             font-family:  Verdana, Arial, Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
             font-size: 70%;
             font-weight: bold;
             color: #84BDFD;
             margin-left: 20px;
             text-decoration: none;
}

.mail {
             font-family:  Verdana, Arial, Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
             font-size: 70%;
             font-weight: bold;
             color: #808080;
             text-decoration: none;


}

a.mail:hover {
             font-family:  Verdana, Arial, Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
             font-size: 70%;
             font-weight: bold;
             color: #84BDFD;
             left: 60px;
             text-decoration: none;


}

p{
             font-family:  Verdana, Arial, Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
             font-size: 80%;
             color: #808080;
             text-decoration: none;
             margin-left: 20px;
             margin-right: 20px;
             text-align: justify;
}

.tab{
             font-family:  Verdana, Arial, Lucida, Tahoma,  Geneva, Helvetica, sans-serif;

             color: #808080;
             text-decoration: none;
             vertical-align:top;
             margin-left: 20px;
             margin-right: 20px;

}

.produit {
             font-family:  Verdana, Arial, Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
             font-size: 100%;
             font-weight: bold;
             color: #808080;
             text-decoration: none;
}

a.produit:hover {


              font-family:  Verdana, Arial, Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
             font-size: 100%;
             font-weight: bold;
             color: #0080C0;
             text-decoration: none;
}

.lienpdf {

             color: #808080;
             text-decoration: none;
}

a.lienpdf:hover {
              text-decoration: none;
              color: #000;
}

/*----------PHOTOS----------------------PHOTOS--------------------PHOTOS--------------------PHOTOS-----------------*/

.photo_prod {
             float:right;
             margin-right: -5px;

             
}


.loupe {
             float:right;
             margin-left: -4px;
}




/*----------BOX----------------------BOX--------------------BOX--------------------BOX-----------------*/


.center{
          align : center;
}
.gauche{
          background: url(../../images/gauche.gif) no-repeat;
          width: 17px;
          height: 18px;
          padding: 0px;
          margin-right :0px;
          margin-bottom :0px;
          float : left;

}
.box{
          background: url(../../images/box.gif);
          width: 80px;
          height: 17px;
          padding: 0px;
          margin-right: 0px;
          float : left;
          font-family:  Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
          font-size: 80%;
          font-weight: bold;
          margin-bottom :0px;
          color: #FFFFFF;


}

.droite{
          background: url(../../images/droite.gif) no-repeat;
          width: 17px;
          height: 17px;
          padding: 0px;
          margin-left :0px;
          margin-right :0px;
          margin-bottom :0px;
          float : left;

}
.fenetre{
          background: url(../../images/box_deg.gif);
          width: 350px;
          height: 107px;
          float : top;
          margin-top :0px;
          border: 1px solid #999999;
          font-family: Verdana, Arial, Lucida, Tahoma,  Geneva, Helvetica, sans-serif;
          font-size: 70%;
          padding: 10 10px 4 10px
          font-weight: bold;
          margin-top : -3px;
          color: #000;
          text-align: justify;

}

.center{
          border: 0px solid #999999;
          width: 300px;
          height: 107px;

}


.champ{
          background: url(../../images/champ.jpg) no-repeat;
}


#search{
	background: #FFF url(../../images/champ.jpg) no-repeat;
	background-position: 3px center;
	padding-left: 20px;
	width: 170px;

}

.input{
       height: 20px;
       width: 170px;
       border-right-width: 0px;
       border-bottom-width: 0px;
       border-top-width: 0px;
       border-left-width: 0px;
       font-family: Helvetica, sans-serif;
       font-size: 12px;
       line-height: normal;
       color: #000000;
       padding: 3px;
}

legend{
       color: #004080;
       font-weight: bold;

}