body {
background-color: #99f;
margin : 15px 0 20px;
padding : 0px;
text-align: center;
}

body, html { 
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size:0.9em;
color: #222;                                                                               
}

#site { margin : 0 auto; width : 680px; }

#header { background:  url(images/bg-header-right.gif) no-repeat right top; height:100px; text-align: left; position: relative; }
#header div { background:  url(images/bg-header-left.gif) no-repeat left top; position: absolute; height:15px; width:15px; }

#logo { display: block; background:  url(images/credit-en-ligne.gif) 0 no-repeat; height:100px; width:400px; text-indent:-9000px; }
#description { display: block; font-weight: normal; color: #fff; line-height : 1.7em; border: 1px solid #99f; background-color: #77d;  padding:8px 10px; position: absolute; right:20px; top:19px; }

#menu {
margin:0;
padding: 6px 0 0 6px;
background-color: #ffe;
height:20px;
font: bold 11px Arial, Verdana, sans-serif;
list-style:none;
}

#menu li{
display:inline;
padding:0;
text-transform:uppercase;
}


#menu a{
float:left;
color: white;
background: #88e url(images/color_tabs_left.gif) no-repeat left top;
margin:0 6px 0 0;
padding:0 0 0 3px;
text-decoration:none;
letter-spacing: 1px;
border-bottom: 1px solid #ffe;
}

#menu a span{
float:left;
display:block;
background: transparent url(images/color_tabs_right.gif) no-repeat right top;
padding:4px 9px 1px 6px;
}
#menu a span{ float:none; }
#menu a:hover, #menu a:hover span { background-color: #f90; }
#menu #current a, #menu #current span { background-color: #66c; border-color: #66c; }

#ddcolortabsline{
clear: both;
}

#mid { padding: 20px 50px 0 50px; background-color: #66c; }
#mid-tr { background: #ffe url(images/bg-mid-tr.gif) 100% 0 no-repeat; }
#mid-tl { background: url(images/bg-mid-tl.gif) 0 0 no-repeat; }
#mid-br { background: url(images/bg-mid-br.gif) 100% 100% no-repeat; }
#mid-bl { background: url(images/bg-mid-bl.gif) 0 100% no-repeat; padding : 20px; text-align: left; }

#footer { background: #66c url(images/bg-footer-r.gif) 100% 100% no-repeat; }
#footer div { background: url(images/bg-footer-l.gif) 0 100% no-repeat;
padding : 4px;
color: #fff;
font-size: 0.8em;
font-weight: bold;
}

#footer a { color: #fff; }

h1, h2 {
font-family: Tahoma;
font-size : 1em;
}

h1 {
text-transform:uppercase;
letter-spacing: 1px;
background: url(images/h1.gif) no-repeat;
color:#f70;
height: 25px;
padding-left : 30px;
padding-top : 3px;
margin: 2.2em 0 2.2em 20%;
}

h2 {
background: url(images/h2.gif) 0 2px no-repeat; 
padding-left : 20px;
margin: 1.4em 20% 1.4em 0;
font-size : 1.1em;
color:#339;
}

em { display:block; margin-bottom : 1.5em ; font-size:1.1em; }

a, a:visited { color: #33f; }
a:hover, a:active {color:#F90;}

ul, ol { margin:1.4em 0 1.4em 4em; padding:0; }

ul li {
list-style-type: none;
background: url(images/puce.gif) 0 0.5em no-repeat;
padding-left: 20px;
margin : 0.5em 0;
}

p, em {
margin : 1em 0;
line-height : 1.6em;
text-align : justify;
}

hr {
height:1px; 
border:0; 
border-top: 1px dashed #F70; 
}

p.glo {
font-weight: bold;
word-spacing : 5px;
}

.lettre {
font-weight: bold;
margin-right:15px;
}

.clear { clear: both; height: 0; overflow: hidden }

#sommaire-guide {
	margin:1.4em 0 1.4em;
}

#sommaire-guide li {
	height: 27px;
	padding: 4px 0 0 47px;
	margin: 4px;
}

#sg-credit-auto { background: url(images/guide/xs/credit-auto.jpg) 0 0 no-repeat; }
#sg-loa-location-avec-option-d-achat { background: url(images/guide/xs/loa-location-avec-option-d-achat.jpg) 0 0 no-repeat; }
#sg-pret-immobilier { background: url(images/guide/xs/pret-immobilier.jpg) 0 0 no-repeat; }
#sg-credit-travaux { background: url(images/guide/xs/credit-travaux.jpg) 0 0 no-repeat; }
#sg-credit-a-la-consommation { background: url(images/guide/xs/credit-a-la-consommation.jpg) 0 0 no-repeat; }
#sg-pret-personnel { background: url(images/guide/xs/pret-personnel.jpg) 0 0 no-repeat; }
#sg-pret-etudiant { background: url(images/guide/xs/pret-etudiant.jpg) 0 0 no-repeat; }
#sg-credit-renouvelable-revolving { background: url(images/guide/xs/credit-renouvelable-revolving.jpg) 0 0 no-repeat; }
#sg-demande-de-credit-en-ligne { background: url(images/guide/xs/demande-de-credit-en-ligne.jpg) 0 0 no-repeat; }
#sg-comparateur-de-credit { background: url(images/guide/xs/comparateur-de-credit.jpg) 0 0 no-repeat; }
#sg-rachat-de-credit { background: url(images/guide/xs/rachat-de-credit.jpg) 0 0 no-repeat; }
#sg-surendettement { background: url(images/guide/xs/surendettement.jpg) 0 0 no-repeat; }