/* CSS Document */

html{
	height:100%;
}

body{
	height:100%;
	font:11px/13px Verdana, Arial, Helvetica, sans-serif;
	margin:0;
}

img{
	border:none;
}

p{
	margin:8px 0;
}

form{
	margin:0;
}



#ombre{
	width:980px; height:626px;
	margin: 0 auto;
	position:relative;
	background:url(vsl/ombre.gif) no-repeat left top;
}

#anim{
	width:950px; height:598px;
	position:absolute; top:15px; left:15px;
	background:#CCCCCC;
}
#anim a{
	color:#FFFFFF; text-transform:uppercase; letter-spacing:1px;
	font-size:10px;
}

#page{
	width:950px; height:608px;
	position:absolute; top:15px; left:15px;
}
#page .menuHaut{
	height:60px; position:absolute; top:0; left:0;
}
#page .menuHaut ul{
	margin:0; padding:0;
}
#page .menuHaut li{
	margin:0; padding:0; list-style:none; display:inline;
}
#page .colGauche{
	width:323px; height:520px;
	position:absolute; top:60px; left:0;
	background:#E4E4E4 url(vsl/baton.gif) no-repeat left top;
}
#page .colGauche .bloc{
	padding:50px 15px 5px 15px; text-align:justify; color:#999999;
	font: 12px/15px Arial, Helvetica, sans-serif;
}
#page .colGauche .blocPage{
	padding:40px 15px 5px 15px; text-align:justify; color:#999999;
	font: 12px/15px Arial, Helvetica, sans-serif;
}
#page .colGauche .blocPage .menu{
	margin:40px 0 10px 0; text-align:left;
}
#page .colGauche .blocPage .menu p{
	margin:8px 0;
}

#page .colGauche .blocPage .menu a.una{
	color:#999999; padding:5px 18px;
	background:url(pictos/heure_pt_of.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.una:hover{
	color:#FF5000;
	background:url(pictos/heure_pt_on.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.unb{
	color:#999999; padding:5px 18px;
	background:url(pictos/chrono_pt_of.gif) no-repeat left 2px;
}
#page .colGauche .blocPage .menu a.unb:hover{
	color:#FF5000;
	background:url(pictos/chrono_pt_on.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.unc{
	color:#999999; padding:5px 18px; 
	background:url(pictos/acces_pt_of.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.unc:hover{
	color:#FF5000;
	background:url(pictos/acces_pt_on.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.und{
	color:#999999; padding:5px 18px;
	background:url(pictos/badge_pt_of.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.und:hover{
	color:#FF5000;
	background:url(pictos/badge_pt_on.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.une{
	color:#999999; padding:5px 18px;
	background:url(pictos/planif_pt_of.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.une:hover{
	color:#FF5000;
	background:url(pictos/planif_pt_on.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.unf{
	color:#999999; padding:5px 18px;
	background:url(pictos/video_pt_of.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.unf:hover{
	color:#FF5000;
	background:url(pictos/video_pt_on.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.ung{
	color:#999999; padding:5px 18px;
	background:url(pictos/interfone_pt_of.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.ung:hover{
	color:#FF5000;
	background:url(pictos/interfone_pt_on.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.unh{
	color:#999999; padding:5px 18px;
	background:url(pictos/secure_pt_of.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.unh:hover{
	color:#FF5000;
	background:url(pictos/secure_pt_on.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.uni{
	color:#999999; padding:5px 18px;
	background:url(pictos/affich_pt_of.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.uni:hover{
	color:#FF5000;
	background:url(pictos/affich_pt_on.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.unj{
	color:#999999; padding:5px 18px;
	background:url(pictos/sono_pt_of.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.unj:hover{
	color:#FF5000;
	background:url(pictos/sono_pt_on.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.unk{
	color:#999999; padding:5px 18px;
	background:url(pictos/gestion_pt_of.gif) no-repeat left center;
}
#page .colGauche .blocPage .menu a.unk:hover{
	color:#FF5000;
	background:url(pictos/gestion_pt_on.gif) no-repeat left center;
}

#page .conteneur{
	width:950px; height:520px;
	position:absolute; top:60px; left:0;
	background:url(vsl/fond_contact.gif) no-repeat left top;
}

#page .conteneur .colGaucheCtc{
	width:323px; height:520px;
	position:absolute; top:0; left:0;
	
}
#page .conteneur .colGaucheCtc .blocPage{
	padding:40px 15px 5px 15px; text-align:justify; color:#999999;
	font: 12px/15px Arial, Helvetica, sans-serif;
}
#page .conteneur .colDroiteCtc{
	width:627px; height:520px;
	position:absolute; top:0; left:323px;
}


#page .diaporama, #page .colDroite{
	width:627px; height:520px;
	position:absolute; top:60px; left:323px;
}


#page .adresse{
	width:950px; height:20px;
	position:absolute; top:588px; left:0;
	background:#FF5000; line-height:20px;
	text-align:center; color:#FFFFFF;
	font-size:10px;
}

#metiers{
	height:100px; background:#F2F2F2; text-align:center; font-size:10px;
}
#metiers .item{
	float:left; padding-top:10px; margin:0 3px;
}
#metiers a{
	display:block; height:60px; width:50px;
}
#metiers a.lienHeure{
	background:url(pictos/heure_of.gif) no-repeat center bottom;
}
#metiers a.lienHeure:hover{
	background:url(pictos/heure_on.gif) no-repeat center bottom;
}
#metiers a.lienHeureOn{
	background:url(pictos/heure_on.gif) no-repeat center bottom;
}

#metiers a.lienChrono{
	background:url(pictos/chrono_of.gif) no-repeat center bottom;
}
#metiers a.lienChrono:hover{
	background:url(pictos/chrono_on.gif) no-repeat center bottom;
}
#metiers a.lienChronoOn{
	background:url(pictos/chrono_on.gif) no-repeat center bottom;
}

#metiers a.lienAcces{
	background:url(pictos/acces_of.gif) no-repeat center bottom;
}
#metiers a.lienAcces:hover{
	background:url(pictos/acces_on.gif) no-repeat center bottom;
}
#metiers a.lienAccesOn{
	background:url(pictos/acces_on.gif) no-repeat center bottom;
}

#metiers a.lienBadge{
	background:url(pictos/badge_of.gif) no-repeat center bottom;
}
#metiers a.lienBadge:hover{
	background:url(pictos/badge_on.gif) no-repeat center bottom;
}
#metiers a.lienBadgeOn{
	background:url(pictos/badge_on.gif) no-repeat center bottom;
}

#metiers a.lienPlanif{
	background:url(pictos/planif_of.gif) no-repeat center bottom;
}
#metiers a.lienPlanif:hover{
	background:url(pictos/planif_on.gif) no-repeat center bottom;
}
#metiers a.lienPlanifOn{
	background:url(pictos/planif_on.gif) no-repeat center bottom;
}

#metiers a.lienVideo{
	background:url(pictos/video_of.gif) no-repeat center bottom;
}
#metiers a.lienVideo:hover{
	background:url(pictos/video_on.gif) no-repeat center bottom;
}
#metiers a.lienVideoOn{
	background:url(pictos/video_on.gif) no-repeat center bottom;
}

#metiers a.lienInterfone{
	background:url(pictos/interfone_of.gif) no-repeat center bottom;
}
#metiers a.lienInterfone:hover{
	background:url(pictos/interfone_on.gif) no-repeat center bottom;
}
#metiers a.lienInterfoneOn{
	background:url(pictos/interfone_on.gif) no-repeat center bottom;
}

#metiers a.lienSecure{
	background:url(pictos/secure_of.gif) no-repeat center bottom;
}
#metiers a.lienSecure:hover{
	background:url(pictos/secure_on.gif) no-repeat center bottom;
}
#metiers a.lienSecureOn{
	background:url(pictos/secure_on.gif) no-repeat center bottom;
}

#metiers a.lienAffichage{
	background:url(pictos/affichage_of.gif) no-repeat center bottom;
}
#metiers a.lienAffichage:hover{
	background:url(pictos/affichage_on.gif) no-repeat center bottom;
}
#metiers a.lienAffichageOn{
	background:url(pictos/affichage_on.gif) no-repeat center bottom;
}

#metiers a.lienSono{
	background:url(pictos/sono_of.gif) no-repeat center bottom;
}
#metiers a.lienSono:hover{
	background:url(pictos/sono_on.gif) no-repeat center bottom;
}
#metiers a.lienSonoOn{
	background:url(pictos/sono_on.gif) no-repeat center bottom;
}

#metiers a.lienGestion{
	background:url(pictos/gestion_of.gif) no-repeat center bottom;
}
#metiers a.lienGestion:hover{
	background:url(pictos/gestion_on.gif) no-repeat center bottom;
}
#metiers a.lienGestionOn{
	background:url(pictos/gestion_on.gif) no-repeat center bottom;
}

#imgMetierHeure{
	background:#A6A6A6 url(fonds/fond_heure.jpg) no-repeat right bottom; height:420px;
}
#imgMetierChrono{
	background:#A6A6A6 url(fonds/fond_chrono.jpg) no-repeat right bottom; height:420px;
}
#imgMetierAcces{
	background:#A6A6A6 url(fonds/fond_acces.jpg) no-repeat right bottom; height:420px;
}
#imgMetierBadge{
	background:#A6A6A6 url(fonds/fond_badge.jpg) no-repeat right bottom; height:420px;
}
#imgMetierPlanif{
	background:#A6A6A6 url(fonds/fond_planif.jpg) no-repeat right bottom; height:420px;
}
#imgMetierVideo{
	background:#A6A6A6 url(fonds/fond_video.jpg) no-repeat right bottom; height:420px;
}
#imgMetierInterfone{
	background:#A6A6A6 url(fonds/fond_interfone.jpg) no-repeat right bottom; height:420px;
}
#imgMetierSecure{
	background:#A6A6A6 url(fonds/fond_secure.jpg) no-repeat right bottom; height:420px;
}
#imgMetierAff{
	background:#A6A6A6 url(fonds/fond_affichage.jpg) no-repeat right bottom; height:420px;
}
#imgMetierSono{
	background:#A6A6A6 url(fonds/fond_sono.jpg) no-repeat right bottom; height:420px;
}
#imgMetierGestion{
	background:#A6A6A6 url(fonds/fond_gestion.jpg) no-repeat right bottom; height:420px;
}

#imgMetierHeure .blocTexte, #imgMetierChrono .blocTexte, #imgMetierAcces .blocTexte, #imgMetierBadge .blocTexte, #imgMetierPlanif .blocTexte, #imgMetierVideo .blocTexte, #imgMetierInterfone .blocTexte, #imgMetierSecure .blocTexte, #imgMetierAff .blocTexte, #imgMetierSono .blocTexte,  #imgMetierGestion .blocTexte{
	color:#FFFFFF; padding:15px; text-align:left;
}

#imgMetierHeure .blocTexte h1, #imgMetierChrono .blocTexte h1, #imgMetierAcces .blocTexte h1, #imgMetierBadge .blocTexte h1, #imgMetierPlanif .blocTexte h1, #imgMetierVideo .blocTexte h1, #imgMetierInterfone .blocTexte h1, #imgMetierSecure .blocTexte h1, #imgMetierAff .blocTexte h1, #imgMetierSono .blocTexte h1, #imgMetierGestion .blocTexte h1 {
	color:#FFFFFF; font-size:18px; text-align:left; line-height:20px
}

#imgMetierHeure .blocTexte ul, #imgMetierChrono .blocTexte ul, #imgMetierAcces .blocTexte ul, #imgMetierBadge .blocTexte ul, #imgMetierPlanif .blocTexte ul, #imgMetierVideo .blocTexte ul, #imgMetierInterfone .blocTexte ul, #imgMetierSecure .blocTexte ul, #imgMetierAff .blocTexte ul, #imgMetierSono .blocTexte ul, #imgMetierGestion .blocTexte ul{
	margin:5px 0; padding:0;
}
#imgMetierHeure .blocTexte li, #imgMetierChrono .blocTexte li, #imgMetierAcces .blocTexte li, #imgMetierBadge .blocTexte li, #imgMetierPlanif .blocTexte li, #imgMetierVideo .blocTexte li,  #imgMetierInterfone .blocTexte li, #imgMetierSecure .blocTexte li, #imgMetierAff .blocTexte li, #imgMetierSono .blocTexte li, #imgMetierGestion .blocTexte li{
	margin:0; padding:0 0 0 8px; list-style:none;
	background:url(vsl/puce_li_texte.gif) no-repeat left 4px;
}

#appelRef{
	height:230px; overflow:auto; background:#666666; color:#FFFFFF;
	text-align:left;
}
#appelRef .bloc{
	padding:22px 20px 10px 20px;
}
#appelRef .bloc ul{
	margin:0; padding:0;
}
#appelRef .bloc li{
	margin:0; padding:0 0 0 8px; list-style:none;
	background:url(vsl/puce_li.gif) no-repeat left 4px;
}
#page .colDroite .animFlash{
	height:290px;
	background:#FFFFFF;
}

#page .colDroiteCtc .coordonnees{
	background:#666666 url(vsl/titre_contact.gif) no-repeat 40px bottom; color:#FFFFFF;
	padding:15px; text-align:right;
}

#page .colDroiteCtc .formulaire{
	padding:10px 10px 10px 100px;
}
#page .colDroiteCtc .formulaire .champ{
	border:1px solid #666666; font-size:11px;
}
#page .colDroiteCtc .formulaire .bouton{
	cursor:pointer;
}

#signature{
	width:945px; margin:0 auto; color:#999999; position:absolute; top:582px;
	font:9px Verdana, Arial, Helvetica, sans-serif; text-align:right;
}


/* style des liens par default */
a{
	text-decoration:none; color:#FF9900;
}

/* styles du menu accordeon */

.glossymenu{
margin: 5px 0;
padding: 0 15px;
width: 294px; /*width of menu*/
position:absolute; z-index:100;
}

.glossymenu a.menuitem{
background:url(img/glossyback.gif) repeat-x top right;
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #333333;
display: block;
position: relative;/*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 3px 0;
padding-left: 10px;
text-decoration: none;
border:1px solid #999999;
}


.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: #333333;
}

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 0px;
left: 275px;
border: none;
}

.glossymenu a.menuitem:hover{
background-image: url(img/glossyback.gif);
}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white; border-bottom:1px solid #999999;border-left:1px solid #999999; border-right:1px solid #999999;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}

.glossymenu div.submenu ul li{
}

.glossymenu div.submenu ul li a{
display: block;
font: 11px Verdana, Arial, Helvetica, sans-serif;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
}

.glossymenu div.submenu ul li a:hover{
background: #999999;
color: white;
}