/**
 * Crédit Agricole - Fidelio
 *
 * @author   fde@emakina
 */

/*---------------------------*/
/* Base rules & reset */
/*---------------------------*/

body { 
	font-size:13px; line-height:1.2em; font-family:Arial, sans-serif; 
	margin:0; padding:0; 
	background:#61a538;
	color:#fff;
}

p, pre, blockquote, address, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, form, label, fieldset { margin:0; padding:0; }
ul, ol, li { list-style:none; }
input, select, textarea { font:11px Arial, sans-serif; color:#333; line-height:1.2em; }
table, caption, td, th { margin:0; padding:0; font-size:11px; line-height:1.2em; font-weight:normal; }
img { display:inline; }
 
/* cross-browser clearing of floats (no extra space in IE) */
.clear { clear:both; overflow:hidden; height:0; }

/* print mode only */
.only-for-print { display:none; }

/* ajax loading animation */
#loading-anim
{
	width: 100px;
	height: 100px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -50px;
	margin-top: -50px;
}



/*---------------------------*/
/* Base styles */
/*---------------------------*/

/* links */
a 		{ text-decoration:none; color:blue; }
a:hover { text-decoration:underline; }

/* images */
a img 	{ border:0; vertical-align:middle; }
p img 	{ display: inline; }

/* type */
p { font-size:13px; line-height:1.2em; margin:0 0 1em; }
.col-pri p { color:#254017; }
.col-pri a { color:#caf0a8; }

/* headings */
h1, h2, h3, h4, h5 { font-weight:normal; color:#fff; line-height:1.2em; margin:0 0 1em; }
h1 { font-family:"Impact", "HelveticaLTStd", sans-serif; font-size:27px;  }
h2 { font-family:"Impact", "HelveticaLTStd", sans-serif; font-size:29px; margin:0 0 0.7em; }
h3 { font-family:Arial, sans-serif; font-size:20px; margin:0 0 0.7em; }
.col-sec h3 { color:#254017; }
h4 { font-size:14px; margin:0 0 0.7em; }


/*---------------------------*/
/* Content Styles   */
/*---------------------------*/

/* icons */
.ico-print { padding:4px 0; padding-left:21px; background:url(../_img/ico-footer-print.gif) no-repeat 0 2px; }


/*---------------------------*/
/* Elements */
/*---------------------------*/

div.error
{
	color: red;
	display: block;
	clear: both;
}

/*---------------------------*/
/* Forms */
/*---------------------------*/

/* forms base rules */
input.text, textarea.text {
	padding:4px 4px 4px 4px; 
	background:url(../images/form-input-bg.gif) no-repeat 0 0;
	border:1px solid #94bcdf; border-top:1px solid #5480a7; border-left:1px solid #5480a7;
	font-size:11px; line-height:1.4em; font-family:Verdana;
}
* html input.text { line-height:1.2em; }
* html input.text, * html textarea.text { background-attachment:fixed; }


/*---------------------------*/
/* Layout */
/*---------------------------*/

/* Header */

.ca-head { background:#fff url(../img/head_bg.png) repeat-x 0 0; }
.ca-head .center { width:950px; margin:0 auto; height:64px; position:relative; }
.ca-head img { display:block; margin:0; border:0; }

.ca-head .lang {
	position:absolute; right:0; bottom:0;
	width:450px; height:22px; padding:8px 15px 0 0; 
	font:12px/20px Verdana, sans-serif; color:#b9b9b9; text-align:right;
	background:url(../img/sprites1.gif) no-repeat 100% -1497px;
}
.ca-head .lang a { color:#418319; font-weight:bold; text-decoration:underline; }
.ca-head .lang a.active,
.ca-head .lang a:hover.active { color:#979797; font-weight:normal; text-decoration:none; }
.ca-head .lang .contact { margin-right:28px; font-weight:normal; text-decoration:none; }
.ca-head .lang .contact:hover { text-decoration:underline; }


/* Topp */

.ca-topp { background:#fff url(../img/ca-topp-shadow.gif) repeat-x 0 100%; }
.ca-topp .center { width:940px; margin:0 auto; padding:30px 0 23px; }

.ca-topp h2 { color:#254017; font-size:25px; line-height:28px; }
.ca-topp h3 {}

.rational { font-size:12px; line-height:1.3em; color:#254017; }
.rational .col-pri { float:left; width:509px; }
.rational .col-sec { float:right; width:413px; }


/* Body */

.ca-body { }
.ca-body .bandereau { height:27px; background:url(../img/bandereau.gif) repeat-x 0 -40px; }
.ca-body .center { width:940px; margin:0 auto; background:url(../img/body-bg.jpg) no-repeat 50% 0; padding:0 0 20px; }

.ca-body .col-pri { float:left; width:639px; }
.ca-body .col-sec { float:right; width:271px; padding:0 5px 0 20px; margin:59px 0 0;	background:url(../img/col-sec-shadow.gif) no-repeat 0 0; }

.ca-body .col-full { float:none; width:100%; }

.ca-body h1 { display:block; width:100%; height:110px; background:url(../img/fidelio.jpg) no-repeat 0 0; position:relative; margin:0 0 20px; }
.ca-body h1 em { position:absolute; left:-9999px; }
.ca-body h1 span { color:#254017; font:20px/1em Arial, sans-serif; position:absolute; left:205px; top:57px; }
.ca-body h1 { }


/* Footer */

.ca-foot { clear:both;  }


/* Right Column */

.col-sec .head img { display:block; }
.col-sec .body { background:url(../img/col-sec-box-body.gif) repeat-y 0 0; padding:1px 0 1px; width:271px; }
.col-sec .foot { background:url(../img/col-sec-box-foot.gif) no-repeat 0 100%; height:10px; overflow:hidden; font-size:1px; line-height:1px; }
.col-sec .body form { margin-left:12px; width:250px; }
.col-sec .body p.title { padding-left:12px; width:259px; }
.col-sec .body p.title-disp { background:url(../img/separation.png) no-repeat; padding-top:30px; }


/*---------------------------*/
/* Content styles */
/*---------------------------*/

/* boopee bold font */
.has-note { position:relative; }
.col-pri h2.has-note { margin-bottom:54px; font-size: 25px; }
.has-note .note { position:absolute; width:170px; height:78px; font-size:10px; text-indent:-9999px; }
 /* 1-2-3 page */
#steps .has-note .note {}

/* col pri */


/* flashy stuff */
.flash { width:100%; }
.flash img { display:block; }
.the-flash { margin:0 0 23px; }

/* forms */
input.txt { border:0; margin:0; padding:7px 10px 7px; font:14px/1em Arial, sans-serif; color:#254017; }
div.col-sec input.txt { font-weight:bold; }
div.col-sec input.notlabeled { color:#66a93f; }
.txt-long input.txt  { width:223px; height:14px; }
.txt-short input.txt { width:100px;  height:14px; }
.txt-half input.txt { width:106px; height:14px; }
span.ie-fail { float:left; }
span.ie-fail input.txt { background:none; }
span.txt-long { background:url(../img/sprites1.gif) no-repeat -149px -397px; }
span.txt-halfl { background:url(../img/sprites1.gif) no-repeat -479px -397px; float:left; }
span.txt-halfr { background:url(../img/sprites1.gif) no-repeat -479px -397px; float:right; }
span.txt-short { background:url(../img/sprites1.gif) no-repeat -475px -431px; }


/* col-sec form */
.col-sec .body { color:#254017; }
.col-sec p.title, .col-sec p.or { font:25px/28px "Impact", "HelveticaLTStd", sans-serif; color:#254017; margin:0 0 10px; width: 100%; }
.col-sec p.or { text-align:center; margin:0; }
.col-sec .form { margin:0 0 4px; }
.col-sec .form label { font:bold 14px/28px Arial, sans-serif; margin:0 8px 0 0; }
.col-sec .txt-long { display:block; width:243px; }
.col-sec .form p.row   { padding:0; margin:0; float:left; }
.col-sec .form div.row { padding:0 0 4px; margin:0; clear:both; }
.col-sec p.submit { margin:0; clear:both; width:100%; }

.col-sec .form1 { margin:0 0 5px; }
.col-sec .form1 .row label { float:left; }
.col-sec .form2 { margin:0; }
.col-sec p.submit1 { padding-top:10px; }
.col-sec p.submit2 { padding-top:20px; }

.col-sec .foot { margin:0 0 29px; }

#tbl-time { width:100%; border:0; margin:4px 0 0; }
#tbl-time td { vertical-align:middle; text-align:left; padding:0 4px 0 0; line-height:1.4em; }
#tbl-time h4 { font:bold 12px/1.1em Arial, sans-serif; color:#254017; margin:0 0 4px; padding:0; }
#tbl-time label, .col-sec .form .ul-time li label { font:12px Arial, sans-serif; color:#59832f; margin:0 0 0 4px; }
#tbl-time label, #tbl-time input { vertical-align:middle; }
#tbl-time input.chk { width:13px; height:13px; margin:0; }

.col-sec .form .ul-time { padding:10px 0; margin-right:10px; }
.col-sec-fr .form .ul-time { padding:0 0 50px; }
.col-sec-nl .form .ul-time { padding:0 0 25px; }

.col-sec .form .ul-time li { margin: 4px 0; }
div.col-sec-fr ul.ul-time { background:url(../img/notes/note2-fr.gif) no-repeat bottom right; }
div.col-sec-nl ul.ul-time { background:url(../img/notes/note2-nl.gif) no-repeat bottom right; }




/* hr */
div.hr { width:250px; height:14px; background:url(../img/sprites1.gif) no-repeat -152px -442px; margin:10px 0 5px; font-size:1px; line-height:1px; overflow:hidden; }
div.hr-or { margin:20px 0 3px; }


/* buttons */
.uiIBtn, .uiIBtn span { color:#fff; font:13px/1em Arial, sans-serif; text-decoration:none; outline:none; }
#ie .uiIBtn { padding-top:0; padding-bottom:0; }
.uiIBtn:hover { text-decoration:none; }
 /* uiIBtn :: sur fond vert */
.uiIBtnDefault { background:url(../img/sprites1.gif) no-repeat 0 -489px; padding:7px 0 10px 12px; }
.uiIBtnDefault span { background:url(../img/sprites1.gif) no-repeat 100% -489px; padding:7px 12px 10px 0; line-height:31px; }
.uiIBtnDefault:hover { background-position:0 -823px; }
.uiIBtnDefault:hover span { background-position:100% -823px;}
 /* uiIBtn :: sur fond blanc */
.uiIBtnBgBlanc { background:url(../img/sprites1.gif) no-repeat 0 -531px; padding:7px 0 10px 12px; font-size:15px; line-height:33px; }
.uiIBtnBgBlanc span { background:url(../img/sprites1.gif) no-repeat 100% -531px; padding:7px 12px 10px 0; font-size:15px; line-height:33px; }
.uiIBtnBgBlanc:hover { background-position:0 -860px; }
.uiIBtnBgBlanc:hover span { background-position:100% -860px;}
 /* small */
.uiIBtnSmall { background:url(../img/sprites1.gif) no-repeat 0 -790px; padding:5px 0 7px 12px; font-size:13px; line-height:28px; }
.uiIBtnSmall span { background:url(../img/sprites1.gif) no-repeat 100% -790px; padding:5px 12px 7px 0; font-size:13px; line-height:28px; }


.uiIBtn span { text-shadow:0px -1px #1f4d1e; }

.gv-box { width:639px; background:url(../img/sprites1.gif) no-repeat 0 0; padding:10px 0 0; margin:0 0 27px; }
.gv-box h2 { font-size:29px; color:#254017; text-align:center; margin:0; }
.gv-box .foot { width:100%; height:10px; background:url(../img/sprites1.gif) no-repeat 0 -272px; line-height:1px; font-size:1px; overflow:hidden; }

.bigpoint { position:relative; width:100%; margin:0 0 30px; }
.bigpoint .megabullet { width:91px; height:91px; position:absolute; left:-2px; top:0; }
.bigpoint.point1 .megabullet { background:url(../img/sprites1.gif) no-repeat 0 -288px; }
.bigpoint.point2 .megabullet { background:url(../img/sprites1.gif) no-repeat 0 -380px; }
.bigpoint .indent { margin:0 0 0 0; }
.bigpoint h3, .bigpoint h4 { font:20px/1.2em Arial, sans-serif; margin:0 0 7px; color:#254017; }
.bigpoint h3  { width:450px; height: 70px; background-image:url(../img/sprites3.png); line-height: 70px; padding: 0 0 0 10px; margin: 0 0 0 100px; }
.bigpoint h3.dividendadvantages-title  { background-position:top right; }
.bigpoint h3.extendedadvantages-title { background-position:right -100px; }
.bigpoint ul { margin:0; padding:0 0 4px; width:100%; }
.bigpoint li { margin:0 0 10px 25px; padding: 0 0 0 75px; background-image:url(../img/sprites3.png); background-repeat:no-repeat; }
.bigpoint h4 { background:url(../img/sprites1.gif) no-repeat 2px -621px; }
.bigpoint h4, .bigpoint p { padding-left:14px; color:#fff; /*ie6*/width:522px; }
.bigpoint li p { font:13px/15px Arial, sans-serif; margin:0 0 5px; }
.bigpoint {}
.bigpoint p.bigpoint-note , .bigpoint a.uiIBtn, .bigpoint span.legend{ margin-left:100px; }


.bigpoint li.advantages-1 { background-position: left -200px; }
.bigpoint li.advantages-2 { background-position: left -300px; }
.bigpoint li.advantages-3 { background-position: left -400px; }
.bigpoint li.advantages-4 { background-position: left -700px; }
.bigpoint li.advantages-5 { background-position: left -800px; }
.bigpoint li.advantages-6 { background-position: left -500px; }
.bigpoint li.advantages-7 { background-position: left -600px; }
.bigpoint li.advantages-9 { background-position: left -900px; }
.bigpoint li.advantages-10 { background-position: left -1000px; }
.bigpoint li.advantages-11 { background-position: left -1100px; }
.bigpoint li.advantages-12 { background-position: left -1300px; }
.bigpoint li.advantages-13 { background-position: left -1200px; }


.point2 { margin:0 0 20px; }
.bigpoint-note { padding-left:103px; }
.bigpoint-note a { text-decoration:underline; }


.testimonials { width:100%; margin:0 0 20px; font:13px/1.3em Arial, sans-serif; color:#fff; }
.testimonials blockquote { width:100%; font-style:italic; margin:0; }
.testimonials span.who { display:block; margin:0 0 16px; color:#b5eb87; }

.gotofr, .gotonl { position:relative; margin-left:-4px; margin-bottom: 20px; width:254px; }
.gotofr h3, .gotonl h3 { font-size:14px; font-weight:bold; margin:0 0 4px; padding:0 0 0 3px; }
.gotofr .l, .gotonl .l { float:left; width:126px; margin-right:2px; }
.gotofr .r, .gotonl .r { float:left; width:126px; }
.gotofr a { display:block; width:126px; height:98px; overflow:hidden; background:url(../img/sprites2.gif) no-repeat 0 0; }
.gotonl a { display:block; width:126px; height:98px; overflow:hidden; background:url(../img/sprites1.gif) no-repeat 0 0; }
.gotofr a span, .gotonl a span { position:absolute; left:-9999px; }
.gotofr .cover, .gotonl .cover { background-position:-149px -288px; }
.gotofr .graph { background-position:-276px -288px; }
.gotonl .graph { background:url(../img/sprites2.gif) no-repeat -276px -288px; }

/* zippers (slide down content) */
div.zipper {}


/*---------------------------*/
/* Modal Window */
/*---------------------------*/

.modal { position:absolute;left:0;top:0; padding:0; background:#fff; width:444px; }
.modal .head { padding:18px 0 0 22px; width:422px; background:url(../img/sprites-popup.gif) no-repeat 0 0; position:relative; }
.modal .body { padding:1px 14px 0 22px; width:408px; background:url(../img/sprites-popup.gif) repeat-y -444px 0; position:relative; }
.modal .foot { width:100%; height:16px; font-size:1px; line-height:1px; overflow:hidden; background:url(../img/sprites-popup.gif) no-repeat 0 100%; }
.modal .hr { width:100%; height:16px; background:url(../img/sprites-popup.gif) no-repeat -14px -160px; font-size:1px; line-height:1px; overflow:hidden; }
.modal h2 { color:#254017; margin:0; padding:0 0 8px; }
.modal h3 { color:#59832f; margin:0; padding:0 0 20px; }
.modal .close { position:absolute; right:19px; top:16px; width:26px; height:24px; background:url(../img/sprites-popup.gif) no-repeat 0 -176px; }

.modal .mobile { float:left; width:95px; height:240px; position:relative; }
.modal .mobile span { position:absolute; left:0; top:0; width:67px; height:240px; background:url(../img/sprites-popup.gif) no-repeat -377px -176px; }

.modal ul { float:right; width:312px; margin:0; font:12px/1.4em Arial, sans-serif; }
.modal li { margin:0 0 13px; padding:0 0 0 19px; width:262px; background:url(../img/sprites-popup.gif) no-repeat 0 -217px; color:#254017; }
.modal li .agence { font-weight:bold; }
.modal li .contact { color:#59832f; font-size:16px; display:block; margin:7px 0 0; }
.modal li .contact strong { margin:0 1em 0 0; }

/**
 * Rational page
 */
.intro {}
.intro h3 { font:bold 13px/1.2em Arial, sans-serif; color:#59832f; margin:0 0 2px; }
.intro .intro-pri { float:left; width:480px; }
.intro p { font-size:12px; }
.intro .intro-sec { float:right; width:120px; }
.intro .hr { background-position:-119px -465px; width:509px; height:10px; margin-top:0; }

.choice h3 { font-weight:bold; color:#59832f; float:left; clear:left; margin:0 0 4px; }
.choice .fidelio { float:left; padding:5px 0 0 1em;  }
.choice .fidelio * { vertical-align:middle; }
.choice .fidelio label { font-weight:bold; color:#64be10; font-size:14px; margin-right:1em;  }
.choice .fidelio a { color:#0b7b39; text-decoration:underline; }

#tbl-act { width:100%; border:0; margin:4px 0 0; }
#tbl-act td { vertical-align:middle; text-align:left; padding:0 4px 0 0; line-height:1.4em; }
#tbl-act label { font:12px/18px Arial, sans-serif; color:#254017; margin:0 0 0 4px; }
#tbl-act label, #tbl-act input { vertical-align:middle; }
#tbl-act input.chk { width:13px; height:13px; margin:0 2px 0 0; }
#ie #tbl-act input.chk { margin:0 2px 0 0; }

.chart-info { margin:9px 0 0; width:100%; }
.chart-info .hd { background:url(../img/sprites1.gif) no-repeat 0 -1365px; height:9px; font-size:1px; line-height:1px; } 
.chart-info .bd { padding:6px 14px; background:#e4e4e4; color:#777; letter-spacing:-1px; font-size:12px; }
.chart-info .bd p { padding:6px 0; margin:0; }


.legal-copy { margin:0; padding:10px 0 0; }
.legal-copy p { margin:0; padding:5px 10px; background:#e4e4e4; color:#777; font-size:11px; line-height:12px; }

/**
 * Base SVG/VML styles
 * 
 * The outer div allow positionings of HTML elements on top of the SVG graph.
 * The inner div takes the SVG element out of the flow, so that HTML elements
 * appear on top of it, instead of after it.
 * 
 * <div class="svg-outer-div">
 *	<div class="svg-inner-div"> ...Raphael/SVG holder instanced in this div ... </div>
 *	... here elements appear on top of the SVG ...
 * </div>
 * 
 */
.svg-outer-div { position:relative;  }
.svg-inner-div { position:absolute; width:100%; } /* move SVG outta the positioning way! */

/**
 * Test line chart.
 * 
 */
#SVGComponent { width:413px; height:233px; margin-top:30px; }
#SVGComponent .svg-outer-div { height:100%; }
#SVGComponent .svg-inner-div { height:100%; }

#SVGComponent .chart-bg { 
	position:absolute; left:0; top:22px;
	background:#fff;
	width:411px; height:190px;
	border-left:2px solid #b5b5b5; border-bottom:2px solid #b5b5b5;
}
#SVGComponent h3 { font:bold 13px/1.1em Arial, sans-serif; color:#9e9e9e; }
#SVGComponent .chart-bulle {
	position:absolute; right:0; top:-46px; color:#fff; font-size:12px; 
	width:167px; height:123px; background:url(../img/sprites1.gif) no-repeat 0 -1374px;
}
#SVGComponent .chart-bulle .rel { position:relative; width:100%; height:123px; }
#SVGComponent .chart-bulle a.block { text-decoration:underline; color:#250417; position:absolute; bottom:13px; right:0; padding-right:8px; }
#SVGComponent .chart-bulle p.top { padding:41px 0 0 80px; margin:0; color:#254017; font-size:12px; line-height:13px; }
#SVGComponent .chart-bulle p.bot { padding:0 0 0 30px; margin:0; color:#fff; font-size:12px; line-height:14px; }


#SVGComponent .lbl { font:bold 11px/18px Arial, sans-serif; color:#9f9f9f; }
#SVGComponent .lbl-left  { position:absolute; left:0; top:214px; }
#SVGComponent .lbl-right { position:absolute; right:0; top:214px; }


/* steps */

#steps { position:relative; height:339px;  }
#steps h2 { /*position:absolute; left:0; top:0;*/ float:left; font-size:26px; margin:-4px 0 4px; }
#steps p.intro { color:#29441c; font-size:14px; float:left; clear:left; width:470px; }
#steps ol { width:100%; height:auto !important; min-height:323px; /*ie6*/height:323px; }
#steps ol li {  width:379px; position:absolute; }
#steps ol .img-left { padding:9px 0 0 110px; width:269px; height:auto !important; min-height:92px; /*ie6*/height:92px; }
#steps ol p { margin:0 0 10px; }
#steps ol #step1 { left:0; top:82px; }
#steps ol #step2 { left:313px; top:168px; }
#steps ol #step3 { right:0; top:0; }
#steps ol #step1 .img-left { background:url(../img/sprites1.gif) no-repeat 0 -915px; }
#steps ol #step2 .img-left { background:url(../img/sprites1.gif) no-repeat 0 -1065px; }
#steps ol #step3 .img-left { background:url(../img/sprites1.gif) no-repeat 0 -1215px; }
#steps ol p { font:16px/1.2em Arial; color:#fff; }
#steps .small, #steps p span, #steps .smallprint { color:#29441c; }
#steps .small { font-size:81%; line-height:81%; }
#steps .megasmall { font-size:11px; }
#steps .smallprint { display:block; margin:4px 0 0; font-size:11px; line-height:13px; }
#steps .of { color:#bbea99; }
#steps .of a { color:#fff; text-decoration:underline; }


#steps .arrow1 { position:absolute; left:74px; top:176px; width:191px; height:94px; background:url(../img/sprites1.gif) no-repeat 0 -669px; }
#steps .arrow2 { position:absolute; left:403px; top:72px; width:137px; height:73px; background:url(../img/sprites1.gif) no-repeat 100% -669px; }


/**
 * Confirmation top
 */
.confirmation { color:#254017; }

span.explanation { color:#59832f; float:right; margin:0 10px 5px; padding:0; display:block;  }
span.explanation-zip { width:110px; font-size: 0.7em; }
span.explanation-mail { clear:both; height:25px; line-height:25px; float:none; background:url(../img/of_mailnumber.png) no-repeat top left; margin:5px 0 0; padding-left:40px; margin-left:20px; }

div.col-sec  div.head {
	background:url(../img/col_sec_top.png) no-repeat;
	height:22px;
	width:271px;
}

span.mailornumber {
	clear:right;
	display:block;
	overflow:hidden;
	padding:3px;
	background:#d3eebb;
	margin:0 8px 0 0;
	width:243px;
	/*
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	*/
	zoom:1;
}

div.dispo {
	padding-top:15px;
}

li.when-title {
	padding-top:5px;
	font-family:Arial,sans-serif;
	font-size:13px;
	font-weight:bold;
}