@charset "iso-8859-1";


		body {margin: 0; padding: 0; text-align: left; font: 10px Verdana; background: #FFFFFF url(../img/fonc-degrade_01.jpg) repeat-x left top; color: black;margin-top: 0px;}
		hr{
		clear: both;
		visibility: hidden;
		}


		img{
		border: 0px solid #fff ;}
		img.center{
		display:block;
		text-align: center ;}
		img.right {
		float: right;
		display: block;
		border: 0px solid #0A6CA3 ;
		margin-left: 5px;
        }
        img.left {
		float: left;
		border: 0px solid #0A6CA3 ;
		margin-right: 5px;
        }
        div.left {
		float: left;
		border: 0px solid #0A6CA3 ;
		margin-right: 5px;
		}
		table,th,tr,td{

		border:0 ;}


		div#conteneur
		{
            position : relative;
			width: 988px ;
			margin: 0 auto;
			text-align: left;
			border: 0px solid #000000 ;
			background : #FFFFFF;


		}
div#droite div#promo {
       	padding: 0;
		margin: 0;
		font-size: 10px;
		font-weight: normal;
		color : #808080;
        
        margin-top : 5px;
        text-align : left;
        border:0px solid #000000 ;
      }
	  div#droite div#promo h2 {
       	padding: 0;
		margin: 0;
		font-size: 12px;
		font-weight: normal;
		color : #0A50A1;
		margin-top : 18px;
		background: #FFF;
      }
		ul#formpro
		{
			float : right;
			display: block;
            width : 664px;
			height : 27px;
			margin: 0 ;
			padding: 0 ;
			list-style-type: none ;
			background: url(../img/esp_02.jpg) no-repeat right top;
			border : 0px solid #000;
			padding-top : 1px;
			padding-left : 15px;
		}
	
		

		ul#formpro li
		{
			margin-left: 0px;
            font-size: 12px;
			padding-right: 5px;
			line-height: 28px;
			display: block ;
			float: left ;
			color: #0950A0;
            
		}
		ul#formpro li a
		{

			color: #0950A0;
			text-decoration: none ;
		}
		ul#formpro li span
		{
            font-weight : bold;
            font-size: 12px;
			color: #0950A0;
		}
		
        ul#formpro li input.pro {
            color: #808080 ;
			text-decoration: none ;
			border-left:1px solid #808080 ;
			border-top:1px solid #808080 ;
			border-right:1px solid #808080 ;
			border-bottom:1px solid #808080 ;

			font-size: 12px;
			margin: 0px;
			padding : 0px;
			height:14px;
            images-align: middle;
            vertical-align: middle;
			text-align: left;
			
	}

		div#header
		{

		text-align : center;
            margin: 0 ;
			background : #FFFFFF;
		}
        div#header a
		{

        display:none;
		}

		div#contenu
		{

			display: block;
			width: 988px ;
			background: #FFFFFF;
			margin: 0;
			padding : 0;
            margin-top : 0px;
			padding-top: 15px;
            border: 0px #000000 solid;
		}




		#centre {

        
		padding: 0;
		margin:0;
		background : #FFFFFF ;
		text-align : left;
		border: 0px solid #000000;
		margin-left: 209px;
        
        }
		#centre.large {

        width: 988px;
        margin-left: 0px;
		
        }
        #centre div#cgauche{

        display: block;
		padding: 0;
		margin:0;
		text-align : left;
        padding-left: 5px;
        padding-right: 5px;
        border: 0px solid #000000;
        }
        #centre div#cgauche.moyen{
        width: 588px;
        }
        #centre div#img{
        display:block;
        float : right;
        width: 166px;
		padding: 0;
		margin:0;
        padding-right: 5px;
        
        } div#centre ul#search
		{
			margin: 0 ;
			padding: 0 ;
			list-style-type: none ;
			text-align: left;
			padding-left: 10px;
		}
		/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel */
		div#centre ul#search li
		{

			color: #000 ;

		}/* On rend les li en flottant pour pouvoir les afficher horizontalement, on cache les puces, et on centre le texte */
        div#centre ul#search li a
		{
            color: #000 ;
			text-decoration: none ;

        }div#centre ul#search li a:hover
		{
            color: #A71E25 ;
			text-decoration: none ;

        }
        div#centre ul#menu2
		{
            position : relative;
            height: 25px ;
			margin: 0 ;
			padding: 0 ;
			list-style-type: none ;
			text-align: left;
			margin-bottom: 20px;
			border: 0px solid #000000;
		}
		/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel */
		div#centre ul#menu2 li
		{
			line-height: 25px ;
			display: block ;
			float: left ;
			font-size: 12px;
			font-weight: bold ;
			color: #fff ;
			
		}/* On rend les li en flottant pour pouvoir les afficher horizontalement, on cache les puces, et on centre le texte */
        div#centre ul#menu2 li a
		{
            color: #fff ;
			text-decoration: none ;

        }
         div#centre ul#menu2 li a span
		{
            display: none ;

        }
        div#centre ul#menu2 li a.lien1
		{
            display: block ;
            width : 195px;
			background: transparent url(../img/menu-entreprise.jpg) no-repeat left center;

		}
		div#centre ul#menu2 li a.lien2
		{
            display: block ;
            width : 195px;
            background: transparent url(../img/menu-savoir-faire.jpg) no-repeat left center;

		}
		div#centre ul#menu2 li a.lien3
		{

            display: block ;
            width : 195px;
            background: transparent url(../img/menu-activite.jpg) no-repeat left center;

		}
		div#centre ul#menu2 li a.lien4
		{

            display: block ;
            width : 194px;
            background: transparent url(../img/menu-verres-optiques.jpg) no-repeat left center;

		}
		div#centre ul#menu2 ul.smenu
		{
        position : absolute;
        display:block;
        z-index:100;
		margin: 0 ;
		padding: 0 ;
		list-style-type: none ;
		text-align: left;
		}


		div#centre ul#menu2 ul.smenu li
		{

            width : 189px;
            line-height: 20px ;
            padding-left: 5px;
			display: block ;
			float: left ;
			font-size: 10px;
			font-weight: normal;
        }

        div#centre ul#menu2 ul.smenu li a
		{
        color: #000;
        text-decoration: none;

        }div#centre ul#menu2 ul.smenu li a:hover
		{
        color: #FFFFFF;
        text-decoration: none;

        }
        div#centre ul#menu2 ul#ssmenu1
		{
        width : 195px;
        background : #2E6BAE;
        top: 25px;
        left: 0px;
        }
        div#centre ul#menu2 ul#ssmenu2
		{
        width : 195px;
        background : #CB7EB3;
        top: 25px;
        left: 195px;
		}
		 div#centre ul#menu2 ul#ssmenu3
		{
        width : 195px;
        background : #F5DC74;
        top: 25px;
        left: 390px;
		}
		 div#centre ul#menu2 ul#ssmenu4
		{
        width : 194px;
        background : #95E4FF;
        top: 25px;
        left: 585px;
		}
		
		#centre h3 {
       	padding: 0;
		margin: 0;
		font-size: 14px;
		font-weight: normal;
		color : #0A50A1;
      }
      
        #centre #bas {

		display:block;
		width: 780px;
		height: 116px ;
		padding: 0;
		margin:0;
        text-align : bottom;
        }

		div#centre #bas span {
        font-size: 12px;
		font-weight: bold ;
		color : #0A50A1;
        }
        div#centre #bas #actu {
		display:block;
		width: 773px;
		height: 95px ;
		padding: 0;
		margin:0;
        font-size: 12px;
		font-weight: bold ;
		color : #A41031;
		background : #6B9CCA;
        }
        div#centre #bas #actu div {
        padding: 0;
		margin: 0;
		float : left;
		margin-top : 10px;
		margin-left : 10px;
		padding-right : 5px;
		color : #FFFFFF;
		font-weight: normal ;
		font-size: 10px;
		width : 240px;
        }
       	div#centre #bas #actu div img {
        padding: 0;
		margin: 0;
		float : left;
		padding-right : 2px;
        }
        div#centre #bas #actu div span {
        font-size: 12px;
        font-weight: bold ;
		color : #3DCCFF;
        }
        
        #defil {
        height : 280px;
        overflow: auto;
        }
        
        #gauche {
		float:left;
		display:block;
		width: 209px;
		height : 405px;
		padding: 0;
		margin:0;
		text-align:left;
		color: black;
        
        margin-top:25px;
        border: 0px solid #000000;
      }
      #gauche.verres-optiques {
	
        background: url(../img/img-verres-optique-gauche.jpg) no-repeat left top;
       
      }
       #gauche.entreprise {

        background: url(../img/image-g-rub-entreprise.jpg) no-repeat left top;

      }
       #gauche.savoir-faire {

        background: url(../img/img-savoir-faire-gauche.jpg) no-repeat left top;

      }
       #gauche.activite {

        background: url(../img/img-activite-gauche.jpg) no-repeat left top;

      }
	  #gauche.carte {

        background: url(../img/image-g-rub-carte.jpg) no-repeat left top;

      }
      #gauche.contact {

        background: url(../img/img-contact-gauche.jpg) no-repeat left top;

      }
      #gauche.actu {

        background: url(../img/img-actualites-gauche.jpg) no-repeat left top;

      }
	  #gauche.arch {

        background: url(../img/img-archives-gauche.jpg) no-repeat left top;

      }
	  #gauche.video {

        background: url(../img/img-videos-gauche.jpg) no-repeat left top;

      }
       #gauche.dwl {

        background: url(../img/img-telechargement-gauche.jpg) no-repeat left top;

      }
       #gauche.info {

        background: url(../img/img-renseignements-gauche_1.jpg) no-repeat left top;

      }
      #gauche.mentions {

        background: url(../img/img-mentions-gauche.jpg) no-repeat left top;

      }
       #gauche.recherche {

        background: url(../img/img-rechercher-gauche.jpg) no-repeat left top;

      }
      #gauche.erreur {

        background: url(../img/img-erreur-gauche.jpg) no-repeat left top;

      }
      #gauche.cmd {

        background: url(../img/img-commander-gauche.jpg) no-repeat left top;

      }
      #gauche.pro {

        background: url(../img/image-g-rub-espace-pro_30.jpg) no-repeat left top;

      }
      #gauche.cat {

        background: url(../img/image-g-rub-catalogue-pro_3.jpg) no-repeat left top;

      }
      #gauche.recrut {

        background: url(../img/image-g-rub-recrutement.jpg) no-repeat left top;

      }

      
      
        #gauche h2 {
        display:none;
       	padding: 0;
		margin: 0;
		font-size: 12px;
		font-weight: normal;
		color : #FFFFFF;
        height : 19px;

      }



      div#gauche ul#ssmenu
		{
			display:block;
			width: 209px;
			margin: 0 ;
			padding: 0 ;
			list-style-type: none ;
			text-align: left;
            padding-top : 40px;
		}

		div#gauche ul#ssmenu div.transbox {
		width: 209px;
		height: 20px;
		display:block;
		margin: 0;
		padding: 0;

		background-color: white;
		filter:alpha(opacity=50);
		opacity: 0.5;
		-moz-opacity:0.5;
		margin-top: 10px;
		}

		div#gauche ul#ssmenu div.transbox li {
		width: 209px;
		height: 20px;
		display:block;
		filter:alpha(opacity=100);
		opacity: 1;
		-moz-opacity:1;
		position: relative;
		margin: 0;
		padding: 0;
		top: 0;
		left: 0;
        padding-top: 3px;
		text-align: left ;
		font-size: 11px;
		font-weight: normal ;
		}
		* html div#gauche ul#ssmenu div.transbox li
		{
			margin-left: -16px;
		}
        

		/* On donne une hauteur au menu, correspondant a la taille de l'image utilisée en fond, on met ensuite l'image de fond avec un décalage de 25 pixels vers le haut pour utiliser la technique de roll over expliquée dans un autre tutoriel */



		div#gauche ul#ssmenu div.transbox li a
		{
			color: black ;
			text-decoration: none ;
		}/* C'est sur les liens que le gros du travail est effectué, largeur, hauteur de ligne, taille de police, graisse de police, espacement des lettres, couleur, bordure et decoration du texte. Nous pouvons dimensionner les a grâce à la propriété display: block ; */

		div#gauche ul#ssmenu div.transbox li a:hover
		{
			color: #A71E25 ;

		}


		#droite {
		float:right;
		display:block;
		width: 171px;
		padding: 0;
		margin:0;
		text-align:left;
		margin-right : 5px;
		color: black;
        border: 0px solid #000000;
        }
        #droite a.savoir{
        font-size: 12px;
		font-weight: bold;
		color : #A41031;
        text-decoration : none;
        }
        div#droite h2 {
       	padding: 0;
		margin: 0;
		font-size: 12px;
		font-weight: normal;
		color : #0A50A1;
        height : 19px;
        background : #EFC418;
        padding-left : 5px;
        padding-top : 5px;
      }
      div#droite h2.info {
       	padding: 0;
		margin: 0;
		font-size: 12px;
		font-weight: normal;
		color : #FFFFFF;
        height : 19px;
        background : #0950A0;
        padding-left : 5px;
        padding-top : 5px;
      }
      div#droite h2.savoir {
       		padding: 0;
		margin: 0;
		font-size: 12px;
		font-weight: normal;
		color : #0A50A1;
        height : 19px;
        background : #EFC418;
        padding-left : 5px;
        padding-top : 5px;
      }

     div#droite div#info {
       	padding: 0;
		margin: 0;
		font-size: 10px;
		font-weight: normal;
		color : #808080;
        background : #FAEDBA;
        padding-left : 5px;
        padding-top : 5px;
        padding-right : 15px;
        text-align : center;
      }
      div#droite div span {

		font-size: 12px;
		font-weight: bold;
		color : #0A50A1;

      }
       div#droite div#pro {
       	padding: 0;
		margin: 0;
		font-size: 10px;
		font-weight: normal;
		color : #808080;
        height : 50px;
        background : url(../img/fond-espace-pro.jpg) left top no-repeat;;
        margin-top : 5px;
        padding-top : 45px;
        padding-left : 5px;
        padding-right : 5px;
        text-align : left;
        border:0px solid #000000 ;
      }
       div#droite div#pro input.right {
        float: right;
        vertical-align : bottom;
        text-align : left;
        border:0px solid #000000 ;
      }

        div#droite input.in {
            color: #000000 ;
			text-decoration: none ;
			border-left:1px solid #000000 ;
			border-top:1px solid #000000 ;
			border-right:1px solid #000000 ;
			border-bottom:1px solid #000000 ;

			font-size: 10px;
			margin: 0px;

			text-align: center;
    	}
    	div#droite ul#prod
		{
        display:block;
		margin: 0 ;
		padding: 0 ;
		list-style-type: none ;
		text-align: left;
		}


		div#droite ul#prod li
		{

            width : 171px;
            line-height: 15px ;
            padding-left: 0px;
			display: block ;
			font-size: 9px;
			font-weight: normal;
        }

        div#droite ul#prod li a
		{
        color: #000;
        text-decoration: none;

        }div#droite ul#prod li a:hover
		{
        color: #808080;
        text-decoration: none;

        }

        .img_right {
        float : right;
		display:block;
		padding: 0;
		margin-left : 5px;

        }


		.clear {
		clear: both;
		margin: 0;
		padding: 0;
        background-color: #FFFFFF;
        width: 500px;
		height: 2px;
        }
        .clear2 {

        width: 430px;
		height: 1px;
		}

		#clear {
		clear: both;




		}
		#clear2 {
		clear: both;
		margin: 0;
		padding: 0;
		height: 1px;
		width: 255px;
		background-color: white;
		}



		#clear3 {
		clear: both;
		margin: 0;
		padding: 0;

		height: 1px;
		width: 740px;
		background-color: black;

		}
		#clear4 {
		margin: 0;
		padding: 0;

		height: 1px;
		width: 420px;
		background-color: white;

		}




         div#droite2{
			display: block;
			float : right;
			width: 370px;
			height : 350px;
			padding: 0;
			margin: 0;
			text-align : left;
			overflow: auto;
			border : 1px solid #993E7B ;
			background : #FFF ;
			padding : 5px 5px 5px 5px;
			font-size : 12px;
      		}	
		div#droite2 h3{
			margin : 0;
			padding: 0;
			font-size: 16px;
			color: #993E7B;
			font-weight: normal ;
			background : #FFF;
      		}
		div#droite2 h4{
			padding-left : 10px;
			font-size: 12px;
			color: #000;
			font-weight: bold ;
			background : url('../img/pucen_03.jpg') no-repeat left center;
      		}
		div#droite2 div.haut{
			display: block;
			width: 358px;
			height : 39px;
			padding: 0;
			margin: 0;
			background : url('../img/haut.png') no-repeat left top;
			
      		}	
		div#droite2 div.bas{
			display: block;
			width: 358px;
			height : 16px;
			padding: 0;
			margin: 0;
			background : url('../img/bas.png') no-repeat left top;
      		}	
		div#droite2 div.fiche{
			display: block;
			
			
			padding: 0;
			margin: 0;
			
			padding : 5px 5px 5px 5px;
			text-align : left;
			background : #993E7B url('../img/fond.png') repeat-y left top;
			font-size: 12px;
			color: #FFF;
			font-weight: normal ;
			margin-top : 5px;
      		}	
		div#droite2 div.fiche a{
			
			font-size: 12px;
			color: #FFF;
			font-weight: normal ;
			text-decoration : underline;
      		}