/* générale */
* { margin : 0; padding : 0; }
body { background-image: url(../images/general/repaeter.jpg); font-family: Arial,Helvetica, sans-serif; font-size: 100%; }
#container { background: #fff; width : 900px; height:auto; margin: 0 auto; width: xxxpx; }


h1 {width: 630px; color: #005695; font-size: 110%; padding-top:2em;border-bottom: #95a9cc thin solid; letter-spacing: 0.05em; }
h2 {color: #005695;font-size: 90%; padding-top:0.25em; font-weight:normal; letter-spacing: 0.05em; }

.reference {width:200px; line-height: 150%; word-spacing: 0.10em;letter-spacing: 0.1em; margin:1em 0 0 1em; font-family: Arial, sans-serif; font-size: 85%; color: #005695; }

p {line-height: 150%; word-spacing: 0.10em;letter-spacing: 0.1em; margin:1em 0 0 1em; font-family: Arial, sans-serif; font-size: 85%; color: #005695;}

img {border:none;}

/* li generale */

li  {list-style-type: none; }
a {text-decoration: none;}


li a:link {color:#b32017; font-weight: 200; }
li a:visited {color:#b32017;}
li a:hover {color: #95a9cc; text-decoration: underline;}
li a:active { color: #95a9cc; text-decoration: underline;}

a:link {color:#b32017; font-weight: 200; }
a:visited {color:#b32017;}
a:hover {color: #95a9cc; text-decoration: underline;}
a:active { color: #95a9cc; text-decoration: underline;}



/* li classe "liste"  et div liste*/

#liste {width: 20px; margin: 1em 0 0 4em; background: url(../images/exemples_css/bande.jpg); }

.liste {display: block;width: 35em; font-family: Arial, sans-serif; font-size:85%; margin: 1em 0 0 2em;background: url(../images/exemples_css/bande_horiz.jpg) no-repeat; }

.liste a:link {color:#fff; font-weight: 200; }
.liste a:visited {color:#fff;}
.liste a:hover {color: #95a9cc; text-decoration: underline;}
.liste a:active { color: #95a9cc; text-decoration: underline;}


/* div - logo */

#logo {float: left; margin-left:-5.25em; margin-top:23px;}


/* nav_main */

ul#nav_main { list-style-type : none; 
position : relative; 
width : 780px; 
height : 165px; 
margin-left: 230px;
padding : 0;}

li#nm_1 {background: url(../images/general/navigation/services.png) no-repeat 0 0; position:absolute; 
top : 6px; 
left : 220px; 
width : 126px; 
height : 180px;}

li#nm_2 {background:url(../images/general/navigation/portfolio.png) no-repeat 0 0;position:absolute; 
top : 6px; 
left : 330px; 
width : 126px; 
height : 180px;}

li#nm_3 {background:url(../images/general/navigation/clients.png) no-repeat 0 0; position:absolute; 
top : 6px; 
left : 440px; 
width : 126px; 
height : 180px; }

li#nm_4 {background:url(../images/general/navigation/nous.png) no-repeat 0 0; position:absolute; 
top : 6px; 
left : 550px; 
width : 126px; 
height : 180px;}

ul#nav_main a { display : block; 
width : 100px; 
height : 37px; 
text-indent : -9999px; 
text-decoration : none; 
overflow : hidden; }


li#nm_1 a:link {width : 126px; height : 180px; background: url(../images/general/navigation/services.png) no-repeat 0 0;}
li#nm_1 a:visited  {width : 126px; height : 180px; background : url(../images/general/navigation/services.png) no-repeat 0 0;}
li#nm_1 a:hover {width : 126px; height : 180px; background : url(../images/general/navigation/services_on.png) no-repeat 0 0;}
li#nm_1 a:active {width : 126px; height : 180px; background : url(../images/general/navigation/services_on.png) no-repeat 0 0;}
li#nm_1 a:focus {width : 126px; height : 180px; background : url(../images/general/navigation/services_on.png) no-repeat 0 0; }
li#en_cours_1 {position: absolute; top: 6px; left: 220px; width: 126px; height : 180px; background : url(../images/general/navigation/services_on.png) no-repeat 0 0;}

li#nm_2 a:link { width : 126px;; height : 180px;background : url(../images/general/navigation/portfolio.png) no-repeat 0 0;}
li#nm_2 a:visited { width : 126px;; height : 180px;background : url(../images/general/navigation/portfolio.png) no-repeat 0 0;}
li#nm_2 a:hover { width : 126px;; height : 180px;background : url(../images/general/navigation/portfolio_on.png) no-repeat 0 0;}
li#nm_2 a:active { width : 126px;; height : 180px;background : url(../images/general/navigation/portfolio_on.png) no-repeat 0 0;}
li#nm_2 a:focus { width : 126px;; height : 180px;background : url(../images/general/navigation/portfolio_on.png) no-repeat 0 0;}
li#en_cours_2 {position: absolute; top: 6px; left: 330px;  width: 126px; height : 180px; background : url(../images/general/navigation/portfolio_on.png) no-repeat 0 0;}


li#nm_3 a:link { width : 126px;; height : 180px;background : url(../images/general/navigation/clients.png) no-repeat 0 0; }
li#nm_3 a:visited { width : 126px;; height : 180px;background : url(../images/general/navigation/clients.png) no-repeat 0 0;}
li#nm_3 a:hover { width : 126px;; height : 180px;background : url(../images/general/navigation/clients_on.png) no-repeat 0 0;}
li#nm_3 a:active { width : 126px;; height : 180px;background : url(../images/general/navigation/clients_on.png) no-repeat 0 0;}
li#nm_3 a:focus { width : 126px;; height : 180px;background : url(../images/general/navigation/clients_on.png) no-repeat 0 0;}
li#en_cours_3 {position: absolute; top: 6px; left: 440px; width: 126px; height : 180px; background : url(../images/general/navigation/clients_on.png) no-repeat 0 0} 


li#nm_4 a:link { width : 126px;; height : 180px;background : url(../images/general/navigation/nous.png) no-repeat 0 0; }
li#nm_4 a:visited { width : 126px;; height : 180px;background : url(../images/general/navigation/nous.png) no-repeat 0 0; }
li#nm_4 a:hover { width : 126px;; height : 180px;background : url(../images/general/navigation/nous_on.png) no-repeat 0 0; }
li#nm_4 a:active { width : 126px;; height : 180px;background : url(../images/general/navigation/nous_on.png) no-repeat 0 0; }
li#nm_4 a:focus { width : 126px;; height : 180px;background : url(../images/general/navigation/nous_on.png) no-repeat 0 0; }
li#en_cours_4 {position: absolute; top: 6px; left: 550px;  width: 126px; height : 180px; background : url(../images/general/navigation/nous_on.png) no-repeat 0 0;}


/* div - info */
#infohaut {width: 450px; float:left; font-family: Arial,Helvetica, sans-serif; font-size: 80%;color: #005695; line-height: 140%; letter-spacing: 0.05em;margin-top:-1.5em; }

/* div - citation */


#citation {padding-top:2.5em; width:500px;}

/* div - content_main */
#content_main { width: 100%; height:auto; background: #fff; clear:both; margin-bottom:5em;}


/* div - footer */
#footer {clear: both; width: 100%; height: 80px; background : url(../images/general/baspage.jpg) no-repeat 0 0; }

#droit {padding-left: 4.8em; color:#005695; font-family: Arial,Helvetica, sans-serif; font-size: 70%;}

#menubas { margin-top:1.5em;}

#menubas li {text-decoration: none; color: #005695; display: inline; font-size: 80%; margin-left:4.5em;  }

#menubas a {margin-top:50px;}
#menubas a:link {color: #b32017; font-weight: 200; }
#menubas a:visited {color: #b32017;}
#menubas a:hover {color: #95a9cc; text-decoration: underline;}
#menubas a:active { color: #95a9cc ; text-decoration: underline;}


/* div - image-nous */

img.johanne, img.pierre {margin-top: 2em;}

img.johanne {padding-right:2em; padding-left: 1em;}



/* id = "portfolio" */

#portfolio{margin:2em 0 0 5em; height: auto;}

ul#portfolio { list-style-type : none; 
position : relative; 
width : 900px; 
height : 395px; 
margin-left: 230px;
padding : 0;}


ul#portfolio a {display : block; 
width : 900px; 
height : auto; 
text-indent : -9999px; 
text-decoration : none; 
overflow : hidden; }

li#web { position : absolute; 
top : 0px; 
left : -220px; 
width :420px; 
height : 200px;
background : url(../images/portfolio/boutons/web.jpg) no-repeat 0 0; }

li#graph {  position : absolute; 
top : 0px; 
left : 240px; 
width :420px; 
height : 200px;
background : url(../images/portfolio/boutons/graph.jpg) no-repeat 0 0; }

li#restau { position: absolute; 
top : 235px; 
left : -220px; 
width :420px; 
height : 200px;
background : url(../images/portfolio/boutons/restau.jpg) no-repeat 0 0; }

li#photos {  position : absolute; 
top : 235px; 
left : 240px; 
width :420px; 
height : 200px;
background : url(../images/portfolio/boutons/photo.jpg) no-repeat 0 0; }

li#web a:link {width :420px; height : 200px; background:url(../images/portfolio/boutons/web.jpg) no-repeat 0 0;}
li#web a:visited {width:420px; height : 200px;background:url(../images/portfolio/boutons/web.jpg) no-repeat 0 0;}
li#web a:hover {width:420px; height : 200px;background:url(../images/portfolio/boutons/web_on.jpg) no-repeat 0 0;}
li#web a:active {width:420px; height : 200px; background:url(../images/portfolio/boutons/web_on.jpg) no-repeat 0 0;}
li#web a:focus {width:420px; height : 200px;background:url(../images/portfolio/boutons/web_on.jpg) no-repeat 0 0;}

li#graph a:link {width:420px; height : 200px; background:url(../images/portfolio/boutons/graph.jpg) no-repeat 0 0;}
li#graph a:visited {width:420px; height : 200px; background:url(../images/portfolio/boutons/graph.jpg) no-repeat 0 0;}
li#graph a:hover {width:420px; height : 200px; background:url(../images/portfolio/boutons/graph_on.jpg) no-repeat 0 0;}
li#graph  a:active {width:420px; height : 200px; background:url(../images/portfolio/boutons/graph_on.jpg) no-repeat 0 0;}
li#graph  a:focus {width:420px; height : 200px; background:url(../images/portfolio/boutons/graph_on.jpg) no-repeat 0 0; }

li#restau a:link {width :420px; height : 200px; background : url(../images/portfolio/boutons/restau.jpg) no-repeat 0 0; }
li#restau a:visited {width :420px; height : 200px; background : url(../images/portfolio/boutons/restau.jpg) no-repeat 0 0; }
li#restau a:hover {width :420px; height : 200px; background : url(../images/portfolio/boutons/restau_on.jpg) no-repeat 0 0; }
li#restau a:active {width :420px; height : 200px; background : url(../images/portfolio/boutons/restau_on.jpg) no-repeat 0 0; }
li#restau a:focus {width :420px; height : 200px; background : url(../images/portfolio/boutons/restau_on.jpg) no-repeat 0 0; }

li#photos a:link {width :420px; height : 200px; background : url(../images/portfolio/boutons/photo.jpg) no-repeat 0 0; }
li#photos a:visited {width :420px; height : 200px; background : url(../images/portfolio/boutons/photo.jpg) no-repeat 0 0; }
li#photos a:hover {width :420px; height : 200px; background : url(../images/portfolio/boutons/photo_on.jpg) no-repeat 0 0; }
li#photos a:active {width :420px; height : 200px; background : url(../images/portfolio/boutons/photo_on.jpg) no-repeat 0 0; }
li#photos a:focus {width :420px; height : 200px; background : url(../images/portfolio/boutons/photo_on.jpg) no-repeat 0 0; }

/* li.client */

#screenshot {position:absolute; border:2px solid #95a9cc; background:#005695;padding:5px; display:none; color:#fff;}

li.titre1 { color: #005695; font-size: 85%;font-weight:bold; border-bottom: #005695 thin solid; width: 200px; margin:1.5em 0 0 7em;}
li.client1{ color: #b32017; font-size: 85%; margin:0.25em 0 0 7em; }

li.titre2 { color: #005695; font-size: 85%;font-weight:bold; border-bottom: #005695 thin solid; width: 190px; margin:1.5em 0 0 15em;}
li.client2{ color: #b32017; font-size: 85%; margin:0.25em 0 0 15em; }

li.titre3 { color: #005695; font-size: 85%;font-weight:bold; border-bottom: #005695 thin solid; width: 175px; margin:1.5em 0 0 23em;}
li.client3{ color: #005695; font-size: 85%; margin:0.25em 0 0 23em; }



/* nous */

#photo_johanne{float:left; margin-top:2em;float:left; margin-left:-2em;}
p#texte_johanne {float:left; margin: 18em 0 5em -4em; padding: 1em; background-color: #fff;width: 25em; font-family: Arial, sans-serif; font-size: 75%; color: #005695; border-bottom:groove  #005695 .50em; border-right: groove #005695 .20em; }

#photo_pierre {float:right; margin-top:2em; margin-right:-2em; }
p#texte_pierre {float:right; background-color: #fff; width: 18em; margin: 19em -4em 0 0; padding: 1em;font-family: Arial, sans-serif; font-size: 75%; color: #005695; border-bottom: groove #005695 .50em; border-left: groove #005695 .20em;}