body { 
margin: 20px;
padding: 0;
background: #ffffff;
font-family: Arial, Helvetica, sans-serif;
color: #888888;
}

table, img, div { border: none; }

hr { height: 1px; width: 100%; color: #eeeeee; background-color: #eeeeee; border: 0; }

a {
color: #FF8C00;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}

a:hover {text-decoration:underline; color: #69BC1E;}

a.ext {
padding: 0 14px 0 0;
margin-right: 2px;
background: url(images/popup.gif) center right no-repeat;
}

a.ext:hover {
padding: 0 14px 0 0;
margin-right: 2px;
background: url(images/popup2.gif) center right no-repeat;
}

.center { text-align: center; }

.dte { text-align: right; }

.gche { text-align: left; }

.bold { font-weight: bold; }
.italic { font-style: italic; }

span.trait_gche {
display: inline;
float: left;
margin: 0;
padding: 0;
background: transparent url(images/plan07.gif) repeat;
width: 4px;
height: 100%;
}

span.trait_dte {
float: right;
display: inline;
margin: 0;
padding: 0;
background: transparent url(images/plan17.gif) repeat;
width: 4px;
height: 100%;
}

.blanc { display: none; }

ul.texte {
list-style: url(images/fleche4.gif);
margin: 13px 0;
padding: 0 0 0 30px;
}

ul.texte li { margin: 3px 0; padding: 0; }

ul.lien {
list-style: none;
margin: 0;
padding: 0;
}

ul.lien li {
list-style: none;
margin: 3px 0;
padding: 0;
}

ul.lien li a {
margin: 12px 0;
padding: 0 0 0 10px;
background: transparent url(./images/puce1.gif) no-repeat;
display: block;
text-decoration: underline;
}

ul.lien li a:hover {
margin: 12px 0;
padding: 0 0 0 10px;
background: transparent url(./images/puce2.gif) top left no-repeat;
}

ul ul {
list-style: url(images/puce4.gif);
margin: 13px 0;
padding: 0 0 0 30px;
}

ul ul li { margin: 3px 0; padding: 0; }


h1 { color: #54B1F0; }

form { margin: 0; padding: 0; }

h2 {
font-size: 1.8em;
color: #54B1F0;
padding: 0;
text-align: left;
}

h4 {
margin: 25px 0 5px 0;
padding: 0;
font-size: 1.1em;
color: #44AAEE;
}

h3 {
font-size: 1.3em;
color: #54B1F0;
}

.definition { cursor: help; font-family: monospace; font-weight: bold; font-size: small; }


/* --------------------- */
/* ---- cadre_haut ----- */
/* --------------------- */


#cadre_haut {
height: 4px;
width: 720px;
margin: 0;
padding: 0;
}

#cadre_haut #coin_haut_gche {
background: transparent url(images/plan03.gif);
width: 4px;
height: 4px;
margin: 0;
padding: 0;
font-size: 0.1em;
float: left;
}

#cadre_haut #trait_haut {
background: transparent url(images/plan04.gif);
width: 712px;
height: 4px;
margin: 0;
padding: 0;
font-size: 0.1em;
float: left;

}

#cadre_haut #coin_haut_dte {
background: transparent url(images/plan05.gif);
width: 4px;
height: 4px;
margin: 0;
padding: 0;
font-size: 0.1em;
float: right;
}


/* ------------------------ */
/* ------ principal ------- */
/* ------------------------ */


#principal {
overflow: hidden;
width: 100%;
margin: 0;
padding: 0;
text-align: justify;
}

#le_contenu {
margin: 0;
padding: 0;
width: 100%;
float: left;
}

/* ------------------------ */
/* ----- bandeau_bas ------ */
/* ------------------------ */


#bandeau_bas {
position: relative;
width: 100%;
margin: 0;
padding: 10px 0 13px 0;
background: #86D223 url(./images/bandeau_fin.gif) bottom no-repeat;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
}

#bandeau_bas a {
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}
#bandeau_bas a:hover {text-decoration:underline; color: #FFFFFF;}

/* ------------------------- */
/* ----- page contacts ----- */
/* ------------------------- */


#contacts { margin: 25px 0 0 16px; }

.decale { margin: 13px 0 0 16px; }

#contacts p { padding: 0; margin: 7px 0 0 0; }

#contacts input {
padding: 2px 3px;
margin: 0;
color: #616161;
width: 262px;
font-size: 1em;
border: 1px solid #AAAAAA;
background:url(images/bg-input.gif) repeat-y bottom right;
}

#contacts label {
width:9em;
float:left;
background:url(images/fleche2.gif) no-repeat center right;
margin-right: 7px; 
padding: 0 15px 0 10px;
text-align: right;
}

#contacts textarea {
font-family: Arial, Helvetica, sans-serif;
padding: 1px 4px;
margin: 0;
color: #616161;
font-size: 1em;
width: 260px;
border: 1px solid #AAAAAA;
background:url(images/bg-input.gif) repeat-y bottom right;
}

#contacts input:focus, #contacts textarea:focus { border: 1px solid #73c826; }  

#contacts .submit {
padding: 1px;
margin: 20px 0;
background: #F5F5F5;
border: 1px solid #AAAAAA;
font-family: Arial, Helvetica, sans-serif;
font-size: 1em;
color: #7A7A7A;
width: 13em;
}

.star {
color: #FF69B4;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
}

.red {
padding: 0;
margin: 20px 0 10px 0;
color: #D42B2B;
font-weight: bold;
text-align: center;
}

#contacts .erreur { color: #D42B2B; }

.test_form {
position: absolute;
left: -5000px;
}

/* -------------------------- */
/* ----- page solutions ----- */
/* -------------------------- */


#page_solutions h4 { margin: 0 0 15px 0; }

#dernier_logo { margin: 0 0 0 12px; padding: 0; }

#page_solutions2 a {
margin: 7px 0;
}

#page_solutions2 a:hover {
margin: 7px 0;
}

#page_solutions2 ul { margin: 17px 0 25px 0; }

#page_solutions ul { margin: 20px 0 10px 0; }

#page_solutions ul.texte { margin: 15px 0 15px 0; }

#page_solutions2 .img_right { float: right; }

#img_developpement { margin-top: 20px; }

#hauteur_expertise { height: 150px; }

ul.tab_solutions {
border-top: 1px solid #E8E8E8;
display: block;
width: 100%;
margin: 0;
padding: 0 0 7px 0;
list-style: none;
}

ul.tab_solutions li {
margin: 0;
padding: 3px 7px;
border-bottom: 1px solid #E8E8E8;
border-left: 1px solid #E8E8E8;
border-right: 1px solid #E8E8E8;
}

ul.tab_solutions li.entete_tab {
margin: 0;
padding: 3px 7px;
border-bottom: 1px solid #E8E8E8;
border-left: 1px solid #E8E8E8;
border-right: 1px solid #E8E8E8;
background: #F9F9F9;
}

span.tab_solutions1 {
display: block;
margin: 0;
padding: 0;
float: left;
width: 75%;
border-right: 1px solid #E8E8E8;
}

span.tab_solutions2 {
display: block;
margin: 0;
padding: 0;
text-align: center;

}

table.tarifs {
font-size: 1em;
width: 100%;
border-bottom: 1px solid #E8E8E8;
border-right: 1px solid #E8E8E8;
margin: 10px 0;
padding: 0;
}


table.tarifs td {
border-top: 1px solid #E8E8E8;
border-left: 1px solid #E8E8E8;
padding: 3px 7px;
}

table.tarifs td.detail { 
border-left: none; 
padding: 3px 7px;
text-align: left;
}

table.tarifs td.detail_img {
text-align: center;
width: 1%;
padding: 4px 0 1px 7px;
}

tr.tarifs {
background: #F9F9F9;
}


/* -------------------------- */
/* ----- page portfolio ----- */
/* -------------------------- */


.portfolio_imga {
width: 118px;
height: 118px;
display: block;
float: left;
margin: 9px 10px 9px 0;
}

.portfolio_imgb {
width: 37px;
height: 37px;
display: block;
float: left;
margin-right: 10px;
}

.portfolio_imgc {
width: 247px;
height: 180px;
display: block;
float: left;
margin: 9px 2px 0 0;
}

div.portfolio1 { padding: 5px 0; margin: 0 auto;}

div.portfolio2 { padding: 5px 0 10px 0; margin: 0 auto; }

div.portfolio3 { padding: 5px 0; margin: 0 auto; }

div.portfolio3 div { padding-top: 7px; margin-top: 0; }

div.portfolio1 h3 {
padding-top: 14px;
margin-top: 0;
font-size: 1.1em;
}

div.portfolio2 h3 {
padding-top: 2px;
margin: 3px 0;
font-size: 1.1em;
color: #888888;
}

div.portfolio4 h4 { padding: 10px 0 0 0; margin: 0; }

div.portfolio4 ul.texte { padding: 10px 0 12px 25px; margin: 0; }

div.portfolio5 ul.lien a { margin-top: 0; margin-bottom: 0; }

div.portfolio5 h3 {
padding-top: 0;   
margin-bottom: 0; 
font-size: 1.2em;   
}

form.ordre_de_triage {
text-align: right;
width: 100%;
margin: 0;
padding: 0 0 10px 0;
}

form.ordre_de_triage select {
color: #616161;
font-size: 1em;
border: 1px solid #AAAAAA;
}

form.ordre_de_triage input {
color: #000000;
font-size: 1em;
padding-right: 2px;
padding-left: 2px;
}

fieldset {
border: none;
margin: 0;
padding: 0;
}


/* ------------------------------ */
/* ----- page accessibilité ----- */
/* ------------------------------ */


h3.accessibilite { margin-bottom: 15px; font-size: 1.4em; } 
h4.accessibilite { margin: 0; padding: 5px 0 5px 0; font-size: 1.1em;}
h5.accessibilite { 
margin: 0; 
padding: 13px 0 10px 0;
color: #888888;
font-size: 1em; 
}
p.accessibilite { padding-left: 0; }
p.accessibilite2 { margin: 0; padding: 0 0 0 0; } 
p.accessibilite3 { margin: 0; padding: 0 0 7px 0; }

ul.accessibilite {
list-style: url(images/fleche4.gif);
margin: 13px 0;
padding: 0 0 0 15px;
}

ul.accessibilite li { margin: 3px 0; padding: 0; }

kbd {
font-size : 1.1em;
padding: 0px 2px;
border: 1px solid #E1E1E1;
border-right: 1px solid #7E7E7E;
border-bottom: 1px solid #7E7E7E;
background: #F5F5F5;
}

/* -------------------------- */
/* ----- page plan_site ----- */
/* -------------------------- */


ul.plan {
list-style: none;
margin: 15px 0 20px 15px;
padding: 0;
}

ul.plan li {
list-style: none;
margin: 0;
padding: 0;
display: inline;
}

ul.plan li a {
margin: 5px 0;
padding: 0 0 0 10px;
background: transparent url(./images/puce1.gif) no-repeat;
display: block;
text-decoration: underline;
color: #999999;
}

ul.plan li a:hover {
margin: 5px 0;
padding: 0 0 0 10px;
background: transparent url(./images/puce2.gif) top left no-repeat;
color: #777777;
}

ul.plan a.ligne_vide { padding-bottom: 7px;	}

ul.plan a.ligne_vide:hover { padding-bottom: 7px; }

h4.plan { margin: 0 0 10px 0; padding: 0; }

h3.plan { margin: 7px 0; padding: 0; }

.decale {
display: block;
margin: 13px 0 18px 25px;
}


/* ------------------------------- */
/* ------- Page selections ------- */
/* ------------------------------- */


p.selections {
width: 94%;
margin: 0;
padding: 4px 26px 4px 8px;
background: #F9F9F9;
border: 1px solid #E8E8E8;
}

p.select_expl { 
padding-top: 12px;
padding-bottom: 4px;
font-weight: bold;
}

ul.selections {
display: block;
width: 100%;
margin: 0 0 25px 0;
padding: 0;
list-style: none;
}

ul.selections li {
border-bottom: 1px solid #E8E8E8;
width: 94%;
margin: 0;
padding: 0 11px 0 23px;
background: White url(./images/fleche3.gif) left center no-repeat;
border-left: 1px solid #E8E8E8;
border-right: 1px solid #E8E8E8;
}

span.supprimer {
border-left: 1px solid #E8E8E8;
width: 25%;
display: block;
float: right;
margin: 0;
padding: 4px 0;
text-align: center;
}

span.article {
display: block;
margin: 0;
padding: 4px 0;
}

div.explications_selections { margin: 0 0 25px 0; }


/* ------------------------------ */
/* ----- Version imprimable ----- */
/* ------------------------------ */


#imprim {
width: 100%;
padding-top: 0;
margin-top: 0;
float: right;
text-align: justify;
}

#imprim #retour { display: none; }

#imprim #haut { display: none; }

#imprim h1 {
position: relative;
left: 0px;
font-size: 1.7em;
color: #888888;
margin: 25px 0 0 0;
padding: 0;
}

img.imprim {
float: left;
display: block;
padding: 0;
margin: 0;
}

.comment_imprim { margin: 2px 0 15px 0; }

.contenu_imprim { margin-top: 45px; text-align: left;}

#imprim hr { height: 1px; width: 100%; color: #B9B9B9; background-color: #B9B9B9; border: 0; }

#imprim .fin { margin: 5px 0 15px 0; }

a.imprimer { font-weight: bold; margin-right: 7px; }

div.imprimer { text-align: right; margin: 0; padding: 0; }

.contenu_imprim a { color: #888888; text-decoration: underline; }

.contenu_imprim ul.tab_solutions { border-top: 1px solid #888888; }

.contenu_imprim ul.tab_solutions li {
border-bottom: 1px solid #888888;
border-left: 1px solid #888888;
border-right: 1px solid #888888;
}

.contenu_imprim li.entete_tab {
border-bottom: 1px solid #888888;
border-left: 1px solid #888888;
border-right: 1px solid #888888;
}

.contenu_imprim span.tab_solutions1 { border-right: 1px solid #888888; }

.contenu_imprim p.selections { border: 1px solid #888888; }

.contenu_imprim ul.selections li {
border-bottom: 1px solid #888888;
border-left: 1px solid #888888;
border-right: 1px solid #888888;
}

.contenu_imprim span.supprimer { border-left: 1px solid #888888; }



/* ----------------------------- */
/* -------- Info-bulles -------- */
/* ----------------------------- */


.infobulle{
position: absolute;
visibility : hidden;
background: #EBF7FE;
border: 1px solid #75C5F4;
padding: 4px 6px;
color: #0B84CC;
width: 170px;
text-align: left;
z-index: 4;
}

/* ----------------------------- */
/* -------- espace_clients -------- */
/* ----------------------------- */

#espace_clients {
width: 720px;
height: 29px;
margin: auto;
padding: 0;
text-align: right;
}

#espace_clients a { 
float: right;
display: block;
background: url(./images/espace_clients-01.png) repeat;
position: relative;
width: 133px;
height: 29px;
text-decoration: none;
}

#espace_clients a:hover { 
background: url(./images/espace_clients-02.png) repeat;
}

/* ------------------------- */
/* ------- options2 -------- */
/* ------------------------- */

#options2 {
display: none;
width: 100%;
margin: 0;
padding: 10px 0 0 0;
text-align: left;
}