@charset "utf-8";
/*COULEURS : orange=#F60 gris=#535353 orange foncé(visited)=#930 gris clair (bordures) : #B4B4B4 */
/*********************************** ELEMENTS CACHES *********************************************/
.hidden {margin-left:-10000px;}
/************************************* TYPOGRAPHIE ***********************************************/
body {font: 0.9em "Trebuchet MS", Arial, Helvetica, sans-serif; color: #535353; margin: 0; padding: 0; background: #FFF; text-align: justify;}
* {margin: 0; padding: 0;}
p {margin: 0 0 1em;}
.txt-pt1 {font-size: 0.85em;}
.txt-pt2 {font-size: 0.75em;}
h1 /*titre du site caché*/ {font-size: 0.5em;}
h2, h3, h4, h5 {color: #F60; font-weight: bold;}
h2 /*titre de la page niveau 1*/{font-size: 1.6em; margin: 0 0 1em;}
h3 /*titre niveau2*/{font-size: 1.4em; margin: 0 0 0.5em;}
h4 /*titre niveau 3 + titre postit*/{font-size: 1.2em;}
h5 /*titre niveau 4 + titre postit*/{font-size: 1em;}
/************************************* LISTES / PUCES ******************************************/
#page #content-left li {background: url(../Images/puce.png) no-repeat 0 4px; list-style: none; margin: 0 0 0.5em 2em; padding: 0 0 0 1em;}
#page #content-right li {background: url(../Images/puce.png) no-repeat 0 4px; list-style: none;	margin: 0 0 0.5em; padding: 0 0 0 1em;}
/**************************************** LIENS **************************************************/
#content-bg a {color:#F60; text-decoration: none; border-bottom: 1px dotted #F60;}
#content-bg a:visited {color: #930;	text-decoration: none; border-bottom: 1px dotted #930;}
#content-bg a:hover {text-decoration: none; border-bottom: 1px solid #F60;}
#content-bg .out {background: url(../Images/out.png) no-repeat right center; padding: 0 14px 0 0;}
#popup a {color:#F60; text-decoration: none; border-bottom: 1px dotted #F60;}
#popup .out {background: url(../Images/out.png) no-repeat right center; padding: 0 14px 0 0;}
#content-bg a.none {text-decoration: none; border:none;}
#content-bg .haut {background: url(../Images/haut.png) no-repeat right center; padding: 0 14px 0 0;}
#footer a, a:visited {color:#535353; text-decoration: none;}
#footer a:hover {text-decoration: none;	border-bottom: 1px solid #535353;}
#footer a.none {text-decoration: none; border:none;}
#content-bg abbr {cursor: help;	border-bottom: 1px dotted #535353;}
/******************************** DISPOSITION D'ELEMENTS / IMAGES****************************************/
.center {text-align: center;}
.right {text-align: right;}
.float-right {float: right;}
.float-left {float: left;}
.clear-float {clear: both;}
img {border-top: 0px none;	border-right: 0px none;	border-bottom: 0px none; border-left: 0px none;}
.img-titre {background: url(../Images/lys-orange.png) no-repeat left center; text-indent:25px;}
.img-partenaires { margin: 0 10px 0 -250px; }
.img-etapes { margin: 0 0 0 -100px; }
/************************************ MISE EN PAGE ***********************************************/
#page { width: 1000px; height: 100%; margin: 0 auto; }
#page #header-print {display: none;}
#page #header {float:left; width: 100%;	height: 100%;}
#page #navigation { float:left; width: 100%; background: url(../Images/navigation-bg.jpg) no-repeat left bottom; height: 65px; overflow: auto; }
#page #content-bg {float: left; width: 100%; height: auto; background: url(../Images/content-bg.jpg) repeat-y;}
#page #content-bg #content-left { float: left; width: 640px; margin: 0 15px 0 30px; }
#page #content-bg #content-left #contact { float: left; width: 350px; height: 100%; border-right: 1px dotted #F60; padding: 0 20px 0 0; }
#page #content-bg #content-left #coordonnees {float: right;	width: 250px; height: 420px;}
#page #content-bg #content-right { float: right; width: 300px; margin: 0 15px 0 0; }
#page #content-bg #content-right .postit { width: 290px; margin: 0 auto; }
#page #content-bg #content-right .postit-header {float: left; background: url(../Images/postit-header-bg.png) no-repeat left top; height: 40px;	width: 290px;}
#page #content-bg #content-right .postit-content { float: left; background: url(../Images/postit-content-bg.png) repeat-y; width: 250px; padding: 0 20px; }
#page #content-bg #content-right .postit-footer {float: left; background: url(../Images/postit-footer-bg.png) no-repeat left top; height: 25px;	width: 290px;}
#page #footer {float:left; padding-top: 30px; height: 100%;	width: 100%; background: url(../Images/footer-bg.jpg) no-repeat left top;}
#page #visite {width:600px; margin:auto;}
#popup { padding: 10px;}
.projet-internet { float: left; width: 600px; height: 100%; border: 1px dotted #535353; padding: 5px; margin: 0 0 15px 15px; }
.etapes-projet { float: left; width: 500px; height: 100%; border: 1px dotted #535353; padding: 5px 5px 5px 100px; margin: 0 0 15px 15px; }
.partenaires { float: left; width: 350px; height: 100%; border: 1px dotted #535353; padding: 5px 5px 5px 250px; margin: 0 0 15px 15px; }
.partenaires_noimage { float: left; width: 595px; height: 100%; border: 1px dotted #535353; padding: 5px 5px 5px 5px; margin: 0 0 15px 15px; }
.devis { width: 400px; border: 1px dotted #535353; height: 90px; margin: 0 auto; }
.gallerie { width: 450px; border: 2px dotted #F60; height: 100%; margin: 0 0 0 20px; background: #FFDFBF; }
table.comparatif { width: 640px; margin-top: 1em; font-size: 0.9em; border-top: 1px solid #B4B4B4; border-right: 1px solid #B4B4B4; border-left: 1px solid #B4B4B4; }
table.comparatif td{ padding: 3px; border-bottom: 1px solid #B4B4B4; }
#page #content-left table.comparatif li { background: url(../Images/puce.png) no-repeat 0 4px; list-style: none; margin: 0 0 0 0; padding: 0 0 0 1em;}
table.comparatif tr.entete { color: #F60; font-size: 1.1em; font-weight: bold; }
/****************************************** MENU ********************************************/
#navigation ul { list-style: none; padding: 15px 0 0; }
#navigation li { display: inline; list-style: none; /*Espacement entre les éléments de la liste*/ padding: 0 0 0 10px; }
#navigation a { background: url(../Images/lys-gris.png) no-repeat 0px center; font-size: 1em; color: #535353; font-weight: bold; text-decoration: none; padding: 0 0 0 20px; }
#navigation a:hover {background: url(../Images/lys-orange.png) no-repeat 0px center; color: #F60;}
/*************************** MENU - RENDRE ACTIVE LA PAGE EN COURS *************************/
/* HTML: donner une id ou class à chaque élément du menu navigation (ex: current-xx), donner une id à Body pour chaque page du site (ex: page-xx) */
body#page-accueil .current-accueil, body#page-concept .current-concept, body#page-vitrine .current-vitrine, body#page-commerce .current-commerce, body#page-referencement .current-referencement, body#page-realisation .current-realisation, body#page-contact .current-contact {background: url(../Images/lys-orange.png) no-repeat 0px center;	color: #F60;}
/********************************* FORMULAIRE CONTACT ********************************************/
#form-contact label {display: block; color: #F60;}
#form-contact .input_txt { width: 100%; height: 1.5em; color: #F60; border: 1px solid #F60; margin: 0 0 8px; }
#form-contact textarea { width: 100%; color: #F60; border: 1px solid #F60; margin: 0 0 8px; }
#form-contact .input_btn_envoyer { font-weight: bold; color: #F60; display: block; width: 7em; border: 1px solid #F60; background-color:#FC9; cursor: pointer; margin: 0 auto; }
#form-contact .message { color: #03c; background: #9CC url(../SpryAssets/info.png) no-repeat 3px center; border: 1px dotted #03c; float: left; width: 100%; margin: 0 auto; padding: 0 0 0 17px; }
/*********************************** MESSAGES IE6 / NO SCRIPT **********************************************/
.msg { width: 1000px; border: 3px solid #090; background: #cfc; color: #090; font-size: 0.8em; margin: 0 auto 20px auto; padding:2px;}
.msg p {margin: 0;}
.msg h4 { color: #090; border-top: 1px solid #ccc; }
.msg p a.ie-msg {font-weight: bold; color: #090;}