html, body, div, span, applet, object, iframe, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, 
a, abbr, acronym, address, big, cite, code, 
del, dfn, em, font, img, ins, kbd, q, s, samp, 
small, strike, strong, sub, sup, tt, var, 
dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td{margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline}

:focus{outline:0}
body{line-height:1; color:black; background:white}
ol, ul{list-style:none}

table{border-collapse:separate; border-spacing:0}
caption, th, td{text-align:left; font-weight:normal}
blockquote:before, blockquote:after, 
q:before, q:after{content:""}
blockquote, q{quotes:""""}

body{background:#B5B5B5; margin:0; padding:0; font:16px Century Gothic ,Verdana,Arial,Tahoma; line-height:18px; color:#5d5959}

ul, ol, p, h1, h2, h3, h4, blockquote, fieldset{margin:0; padding:0}

h1{margin:0; padding:0; font-size:1px; text-indent:-2000px; color:#b5b5b5}

#main{width:940px; margin:0 auto}

#header{}

#logo{float:left; margin-top:20px}

#menu{float:right; margin:4px 0 0 0; height:68px;}

#menu ul{list-style:none; margin-left:0px;}

#menu li{float:left; position: relative;}

#menu li:hover{ height:50px; background:#77B6CD;}

#menu a{display:block; padding:19px 13px 17px 17px; font:20px Century Gothic,Arial,Tahoma; color:#F4F4F4; font-weight:bold; font-style:italic; text-decoration:none}

#menu a:hover{color:#fff;}

#menu a.selected{height:14px; background:#77B6CD; color:#fff; font-weight:bold;}

#menu li span{display: none; position: absolute; top: 30px; left: 15px; width: 175px; padding:14px 0; font: normal 12px Verdana, Georgia, "Times New Roman", Times, serif; line-height: 15px; }

#menu li a:hover span{ margin-top: 7px; display: block; color: #5d5d5d;}

#feature{float: left; margin:24px 0 5px;}

#featuretext{float:left; width: 440px;}

#featuretext a{font-size: 30px; line-height: 41px; font-weight: bold; background:#77B6CD;}
body:nth-of-type(1) #featuretext a{font-size: 25px;}

#featureimages{float:left; width: 500px;}

#valid{margin-top: 2px; background:url(images/fond_valid.jpg) no-repeat 0 0; width: 500px; height: 140px; }

.col_valid{float: left; width: 250px;}

.col_valid a{padding-left: 50px;}
 
#navigateurs-icon{width:250px; height:60px; background:url(images/navigateurs.jpg) no-repeat 20px 12px; display:block; float:left}
#navigateurs-icon:hover{width:250px; height:60px; display:block; float:left}

#developpement-icon{width:250px; height:60px; background:url(images/moteurs.jpg) no-repeat 50px 12px; display:block; float:left}
#developpement-icon:hover{width:250px; height:60px; display:block; float:left}

p.tip{position:relative}

p.tip span{display:none; position:absolute; top:65px; left:42px; padding:5px; z-index:100; background: #5d5959; color:#fff; font-size:15px; width: 170px;}

p:hover.tip{font-size:99%}

p:hover.tip span{display:block}

#contenu{float:left; margin:0 auto; width:940px}

.colonne{float: left; width: 262px; margin:0 25px 15px 25px; background: url(images/fond_sousfeature.jpg) no-repeat; border-bottom:1px solid #CCCCCC;}

.colonne h2{ height: 40px; margin-bottom: 2px; padding: 14px 0 0 18px; }

.colonne ul{ margin-left: 0px;}

.colonne ul li.telephone, .colonne ul li.enveloppe{ padding: 8px 0 0 61px; line-height:1.3em;}

.apropos p { padding: 0 6px;}

.plus_info{float: right; color: #fff; font-weight: bold; background:#77B6CD; text-decoration: none; margin-top: 35px;}
.plus_info:hover{color: #5d5d5d;}

.projet {line-height:1.3em; margin:0 0 0 9px;}

.projet a{color: #fff; font-weight: bold; background:#77B6CD; text-decoration: none;}
.projet a:hover{color: #5d5d5d;}

.projet img{background: url(images/ombre_projet.jpg) no-repeat 0 10px; padding: 0 0 15px 0; }

.telephone{margin: 0 0 10px 0; background: url(images/telephone.jpg) no-repeat 0 7px;}

.enveloppe{height:45px; background: url(images/enveloppe.jpg) no-repeat;}


/**** zone apropos ****/

#nous h2{width: 262px; margin:0 25px 27px; padding:12px 0 0 6px; height:32px; background: url(images/fond_sousfeature.jpg) no-repeat;}

.general{float: left; height: 80px;}

.pers a, .general a{margin-right: 3px; color: #fff; font-weight: bold; background:#77B6CD;}

.pers{float: left; width: 425px; text-align:justify; margin: 0 0 0 25px; line-height:1.3em;}

.pers img{float: left; padding: 10px;}

/**** fin zone apropos ****/

/**** zone services ****/

#services{line-height: 1.3em;}

#services h2{width: 262px; margin:0 25px 27px; padding:12px 0 0 20px; height:32px; background: url(images/fond_sousfeature.jpg) no-repeat;}

#services a{margin-right: 3px; color: #fff; font-weight: bold; background:#77B6CD; line-height: 1.3em;}

#services img{float: left; padding: 10px;}

/**** fin zone services ****/

/**** zone references ****/

.colonneref{float: left; width: 262px; margin:0 25px 40px 25px; height:420px; background: url(images/fond_sousfeature.jpg) no-repeat; border-bottom:1px solid #CCCCCC;}
.colonneref h2{ height: 40px; margin-bottom: 2px; padding: 14px 0 0 18px; }

.photo_hover a{display:block;	height:123px; position:absolute; width:250px; z-index:5;}
.photo_hover a:hover {background:transparent url(images/photo_hover.png) scroll 0 0 no-repeat;}

/**** fin zone references ****/

#footer{float:left; font-size:12px; margin-top: 5px;}

#backgroundPopup{display:none; position:fixed; height:200%; width:200%; top:0; left:0; background:#000; border:8px dashed #cecece; z-index:1;}
#popupContact{display:none; position:fixed; height:304px; width:408px; background:#FFF; border:4px dashed #b5b5b5; z-index:2; padding:12px; font-size:15px;}
#popupContact h2{text-align:left; color:#39c; font-size:30px; line-height: 30px; font-weight:700; border-bottom:1px solid #77B6CD; padding-bottom:2px; margin: 5px 0 43px;}
#popupContactClose{right:8px; top:8px; position:absolute; display:block;}

#contactArea{font-size:22px}

#contactArea a{font-weight:bold; color:#39c}

#contactArea img{float:left; width:100px; height:80px}