@charset "UTF-8";

/* Reset CSS
-------------------------------------------------------------- */
body{ background:#f3f3f3; }
body, html{ padding:0; margin:0; font-size:.90em; color:#505050; font-weight:normal; text-align:left; font-family: Arial, Helvetica, sans-serif; }


ul { list-style-type:none; margin: .2em 1em; padding: 0; color:#505050; }
ul li { padding: .2em 0; margin: 0 0 0 1.2em; line-height: 18px; color:#505050; }
ul.disc li { font-weight: bold; padding: .2em 1em .2em 20px; background:url(../images/puce.jpg) left 5px no-repeat; }
img { border:none}
a , .bloc a, .bloc p a { text-decoration:none; color:#505050; }

h1, h2, h3, h4, h5, h6 { padding: .3em 0; margin: .1em .5em; color:#505050; }
h4, h5, h6 { margin: .2em 1em; }
p { padding: .3em; margin: .2em 1em; color:#505050; }

hr { margin:20px 0; border:0; border-bottom:1px solid #eee;  }


/* ccommon lasses
-------------------------------------------------------------- */
.clearfix { zoom:1; clear:both; }
.clearfix:after { content: "."; display:block; height:0px; clear:both; visibility:hidden; }


.container { width: 1000px; position: relative; margin: 0 auto; padding: 0; overflow: hidden; }
.container.top { height: 68px; }

.bloc { border-radius: 8px; padding: 1em .4em; background: white; margin: 0 0 1em 0; overflow: hidden; }
.bloc p { clear: both; }
.pull-left { float: left; }
.pull-center, .bloc .pull-center  { text-align: center; }
.blueText, .blueText a { color: #00519E; }
.greenText, .greenText a { color: #00ACB6; }
.greenTextRI, .greenTextRI a, table.greenTextRI td  { color: #398a97; }
.agencyTable { width: 650px; margin: 5px; }
.agencyTable .title { text-align: center; font-weight: bold; height: 60px; font-size: 15px; border: none; }
.agencyTable .title img { vertical-align: text-bottom; }
.agencyTable .title small { font-weight: normal; display: block; font-size: 60%; }
.agencyTable .title.pointAramis { background:url(../images/pointAramisauto.png) top 10px no-repeat; }
.agencyTable .title.pointRi { background:url(../images/pointRi.png) top 10px no-repeat; }
.orangeText, .orangeText a, .bloc a.orangeText, #main h2 { color: #FF7B09; }
.agencesAramis td, .agencesReprise td { border-bottom: solid 1px #ccc; padding: 3px 7px; }
.agencesAramis td.noborder, .agencesReprise td.noborder { width: 30px; padding: 0; }
.orangeText.arrow { background:url(../images/orange_arrow.gif) center left no-repeat; padding-left: 30px; }



/* Menu nav header
-------------------------------------------------------------- */
#header{ background:#fff; }
#header .nav {
    margin: 0;
    padding: .5em;
    overflow: hidden;
}

#header .nav li a {
    text-decoration: none;
    font: bold 14px arial;
    color: #505050; 
    outline: none;
    text-align: center;
    line-height: 30px; 
    float: left; 
    display: block;
    margin: 0 10px;    
    padding: 5px;
    border-radius: 15px;
}

#header .nav li a:hover, #header .nav li a.active {
    background: #f58b04;
    color: white;
}

#header ul { margin: 0; padding: 0; overflow: hidden; }
#header ul li { display: block; float: left; margin: 0; padding: 0 .5em; }

#header h1 { font-size: 1.525em; padding: .2em 0; margin-left: 50px; }
#header small { display: block; font-size: .775em; margin-left: 200px; }



/* banner and elements
-------------------------------------------------------------- */
#banner { height: 355px; background: #009ca5 url(../images/sprite_banner.png) 0 -63px repeat-x; }
#banner span.right { font-style: italic; font-weight: normal; }
#gova{ position:absolute; height:157px; width:290px; top:-30px; left:20px; background:url(../images/voiture.png) center no-repeat; }


/* banner animation (index page)
-------------------------------------------------------------- */
#flash{ width:643px; padding: 0; color: white; }
#flash img{ padding:0; }
#flash p { margin: .75em; padding: 0; text-align: left; font-size: 12px; }
#flash ul { margin: .15em 0 0; overflow: hidden; }
#flash ul li { display: none; width: 200px; float: left; margin-left: .8em; }
#flash .active { background: #6ed0d5; }
#flash .active h3 { color: #fdf46c; }
#flash .firststep .img-content  { background:url(../images/estimation.png) center no-repeat;  }
#flash .secondstep .img-content  { background:url(../images/rdv.png) center no-repeat;  }
#flash .thirdstep .img-content  { background:url(../images/paiement.png) center no-repeat;  }
#flash h2 { font-size:21px; color: white; } 
#flash h3 { color: white; }
#flash h2 span { display: block; }
#flash h2 span.left { margin-left: 180px; }
#flash h3 { font-size:15px; margin: 0; } 
#flash ul li .sup-img-content { height: 85px; background:url(../images/accolade.png) 16px bottom no-repeat; } 
#flash ul li .img-content { text-align: center; height: 120px; margin: 0; }
#flash ul li div { padding: 10px 6px; border-radius: 8px; }
#flash .numero, .showSteps .numero { padding: 3px 8px; background:url(../images/numero.png) center no-repeat; color: #555; text-align: center; } 

/** style pour les autres etapes **/
.showSteps {    
    display: none;
    width: 237px;
    float:left;
    padding: 10px 0 0;
} 
.showSteps h3 {
    font-size: 18px;
}
.showSteps ul li {
    display: none;
    margin: 0 20px 0 0;
    border-bottom: #80d6db solid 1px;
}
.showSteps ul li.last {
    border-bottom: #80d6db solid 0px;
}
.showSteps ul li div {
    margin: 10px 0;
    border-radius: 8px;
}
.showSteps .active { background: #6ed0d5; }
.showSteps .active .title { color: #fff36c; }
.showSteps .title {
    margin-left: 42px;
    color: white;    
    line-height: 22px;
}
.showSteps .numero {
    display: block;
    float: left;
    font-weight: bold;
    height: 24px;
    line-height: 24px;
    text-align: center;
    width: 24px;
    font-size: 1.325em;
}


/* corps de la page
-------------------------------------------------------------- */
#wrap{ width:100%; overflow:hidden; }
#sfcontent { width:100%; overflow:hidden; background:url(../images/gradiant_content.png) 0 0 repeat-x; }
#main{ width:1000px; padding:10px 0; margin:0 auto; }


/* column setting
-------------------------------------------------------------- */
#logo,#nav,#flash,#info,#l-content,#r-content,#subL,#subR,#infooter ul { display:inline; 	float:left; }
#logo { margin-right:90px; }
#nav { margin-top:45px; }
#l-content { width: 665px; padding: 60px 0 1em 0; }
#r-content { width:320px; float: right; }
#r-content img { float:left; }
#subL,#subR { background:url(../images/cadre_quest.jpg) no-repeat; width:329px; height:204px; }
#subL { 	margin:0 5px; }
#flash h1, #flash p, #flash li{ color:#fff; }

/* banner information
-------------------------------------------------------------- */
/*
#flash{ width:643px; height:325px; padding:30px 0 0 0; }
#flash img{ padding:0; }
*/
#info { position:relative;  height:328px; width:350px; }
#infotxt { color:#505050; height:355px; }
#infotxt img.line { height:1px; }
#infotxt p { padding:5px 0; }
#infotxt p.price { color:#FF1A00; font-size:13px; font-weight:bold; }
#infotxt p.proposition {}
#infotxt div.infobox p { background:url(../images/rond.png) no-repeat 0 9px; display:inline; float:left; padding-left:14px; }
#infotxt div.infobox img { margin:10px 0 0 10px; }
#selectTable td{}

/* left context
-------------------------------------------------------------- */
#context-top {
	background:url(../images/cadre_ccm.jpg) no-repeat;
	height:132px;
	padding-left:20px;
	position:relative;
}
#text {
	padding-top:25px;
	float:right;
	width:320px;
	margin-right:20px;
}
#text h3 {
	color:#ff7b09;
	font-family:Arial,Sans-Serif;
	font-size:18px;
}
#text p {
	color:#505050;
	font-family:Century Gothic,Arial,sans-serif;
	font-size:12px;
	padding:10px 0 0 20px;
}

span.suite {
	font-size:11px;
}
span.suite a {
	color:#505050;
}

/* left context
-------------------------------------------------------------- */
#avantage,#question {
	font-family:Century Gothic,Arial,sans-serif;
	color:#505050;
	padding:10px;
}

#avantage h2.rapide {
	background:url(../images/arrow.gif) no-repeat 3px 10px;
	color:#ff7b09;
	font-size:24px;
	font-weight:bold;
	padding:0 0 .3em 1.1em;
	margin:0;
}

#avantage ul{
	font-size:12px;
	font-weight:bold;
	line-height:18px;
	list-style-type:disc;
	list-style-position:inside;
	padding-left:15px;
}

#question h4 {
	font-size:15px;
	margin-bottom:10px;
}

p.goquest {
	text-align:center;
}
p.intitule {
	color:#00acb6;
}
span.suite a{
	padding-left:3px;
}
span.suite a,p.goquest a {
	color:#505050;
	text-decoration:underline;
}


/* right context
-------------------------------------------------------------- */
#presse {
	background:url(../images/cadre_presse.jpg) no-repeat;
	height:118px;
	text-align:center;
	width:323px;
}
#presse img{ /margin-left:50px; }
#presse p.danslapresse {
	font-family:Century Gothic,Arial,sans-serif;
	font-size:15px;
	padding-top:15px;
}
#presse p img{
	margin-top:10px;
}
#presse h3{font-size:14px;}
#reseau {
	padding-top:5px;
	margin-bottom:5px;
	width:316px;
}
#reseau #jetrouve {
	background:#fff;
	text-align:center;
}

#reseau #jetrouve img{ /margin-left:70px;  }

#reseau #jetrouve h3 {
	font-family:Century Gothic,Arial,sans-serif;
	font-size:15px;
	padding-bottom:5px;
}

/* Link more 10 years in step 1
-------------------------------------------------------------- */
#infotxt div.qMark2 {
	font-family:Century Gothic,Arial,sans-serif;
	font-size:12px;
	position:relative;
	text-align:center;
	z-index:0;
}
div.qMark2 a { cursor:pointer;}
div.qMark2 a:hover div.qTxt { background:#ececec; border:1px solid #ccc; display:block;  width:350px; position:absolute; left:-45px; padding:10px; z-index:20; top:17px;}


/* Question Mark in step 2
-------------------------------------------------------------- */
#infotxt div.qMark {
	font-family:Century Gothic,Arial,sans-serif;
	font-size:12px;
	font-weight:700;
	margin-bottom:10px;
	padding:0 8px;
	position:relative;
	z-index:10;
}

div.qMark a { margin-left:20px; cursor:pointer;}
div.qTxt { display:none;}
div.qMark a:hover div.qTxt { background:#ececec; border:1px solid #ccc; display:block;  width:350px; position:absolute; left:-65px; padding:10px; z-index:20; top:47px;}


	
/* footer setting
-------------------------------------------------------------- */
#footer{
background:#FFFFFF url("../images/bck_footer.jpg") repeat-x;
color:#505050;
font-size:12px;
padding: 15px 0;
}
#footer #infooter { margin:0 auto; width:1000px; position: relative; }

#infooter p {
	font-family:Century Gothic,Arial,sans-serif;
	font-weight:700;
}
#infooter ul {
	margin-left:30px;
}
#infooter ul li a{
	color:#505050;
	font-family:Century Gothic,Arial,sans-serif;
	font-size:11px;
}
#infooter #f-logo {
	position: absolute;
    top: 0;
    right: 10px;
}