/* mvl@wanabe.eu - OCTOBRE 2010 */
/* **************************** */

/* --- 1. RESET
/* --- 2. FONTS
/* --- 3. GENERIC TAG STYLE
/* --- 4. STRUCTURE
/* --- 5. HEADER
/* --- 6. NAV MAIN
/* --- 7. NAV LEFT
/* --- 8. TREE
/* --- 9. PAGE LOGIN
/* --- 10. PAGE FORM
/* --- 11. RESUME OFFRE
/* --- 12. LISTE TRANSFORMATEURS

/* -------------------------------------------  1. RESET  ---------------------------------------------- */

/* ======= Reset css here (http://meyerweb.com/eric/tools/css/reset/) ======= */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
/* remember to define focus styles! */
:focus {outline: 0;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse;border-spacing: 0;}
/* end css reset here */

/* -------------------------------------------  2. FONTS  ---------------------------------------------- */

@font-face {
	font-family: 'PeugeotRegular';
	src: url('../fonts/peugeot_normal-webfont.eot');
	src: local(' '), url('../fonts/peugeot_normal-webfont.woff') format('woff'), url('../fonts/peugeot_normal-webfont.ttf') format('truetype'), url('../fonts/peugeot_normal-webfont.svg#webfontNfBeTU3w') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'PeugeotLight';
	src: url('../fonts/peugeot_light-webfont.eot');
	src: local(' '), url('../fonts/peugeot_light-webfont.woff') format('woff'), url('../fonts/peugeot_light-webfont.ttf') format('truetype'), url('../fonts/peugeot_light-webfont.svg#webfontCLdZcWhh') format('svg');
	font-weight: normal;
	font-style: normal;
}

/* ------------------------------------------  3. GENERIC TAG STYLE ------------------------------------------------- */

a {text-decoration:none}
a:link,
a:active,
a:visited {}
a:hover {}
p {}
hr {}

h2{ color:#5a5a55; font-size:24px; padding:25px 0 0 20px; font-weight:normal}
h3{ color:#5a5a55; font-size:16px; padding:25px 0 0 20px; font-weight:normal}

.float_left {float:left;}
.float_right {float:right;}
.clr{clear:both;}
.no_margin {margin:0;}
.red {}
br.clr {clear: both; line-height: 0; font-size: 0; height: 0}

.box_bg {background:#EEEEEE}
.m_top10 {margin-top:10px}
.m_top20 {margin-top:20px}
.m_bottom20 {margin-bottom:20px}
.m_bottom80 {margin-bottom:80px}
.m_left25 {margin-left:25px}
.height800 {min-height:800px;}
.height485 {height:485px;}
.height190 {height:190px;}
.height155 {height:155px;}

.box_grey {background:#EEEEEE; margin-top:20px; margin-bottom:70px; }
.box_grey_arrow {background: #EEEEEE url(../img/ml/arrow4.png) left 30px no-repeat; margin-top:20px; margin-bottom:70px;}
.box_grey_list{background: #EEEEEE url(../img/ml/arrow4.png) left 30px no-repeat; margin-top:20px; margin-bottom:70px; float:left; width:100%;}
.box_grey_middle1 {background: #EEEEEE url(../img/ml/arrow4.png) left 30px no-repeat; margin-top:20px; margin-right:21px; float:left; width:467px }
.box_grey_middle2 {background: #EEEEEE url(../img/ml/arrow4.png) left 30px no-repeat; margin-top:20px; float:left; width:467px }
.box_grey_full_width {background: #EEEEEE url(../img/ml/arrow4.png) left 30px no-repeat; margin-top:20px; margin-right:21px; float:left; width:100%; }
.box_grey_list_tronsform {/*width:310px;*/ /*height:245px;*/ background:none; padding:0 15px 15px 15px; color:#FFF; font-size:16px; position:relative} 
.box_blue {width:310px; background:#005073 url(../img/ml/tree_title.gif) repeat-y left top; border:1px solid #005073; padding:15px; color:#FFF; font-size:16px; position:relative;} 
.box_blue a:link,.box_blue a:active,.box_blue a:visited{ color:#fff; text-decoration:underline;}
.box_blue a:hover{ color:#fff; text-decoration:none;}
.box_grey_dark {width:310px; background:#BFB7AE url(../img/ml/separator1.gif) repeat-y left top; border:1px solid #A0968A; padding:15px; color:#FFF; font-size:16px; position:relative} 

.box_white {background:#FFF; border:1px solid #e3e3e3}

/* -------------------------------------------  4. STRUCTURE  ---------------------------------------------- */

body {font-family:'PeugeotRegular', Arial, Helvetica, sans-serif; font-size:12px}
#main {width:988px; margin: 0 auto 0 auto; background: url(../img/ml/body_bg.jpg) top center repeat-y; position:relative; padding-bottom:26px}
#container {width:980px; margin: 0 auto 0 auto;}
#top {background:#afc8e6; width:724px; height:17px; float:right; font-family: Arial, Helvetica, sans-serif;margin-top:3px}
	#top div {padding-left:7px; color:#FFF; font-size:10px; margin-top:3px; float:left; }
	#top a {background: url(../img/ml/arrow3.png) center left no-repeat; padding-left:7px; color:#FFF; font-size:10px; float:right; margin:3px 25px 0 0 }
	
#content {margin-left:25px; margin-bottom:60px;   }
#footer {width:988px; height:75px; position:absolute; bottom:0; background:#FFF url(../img/ml/footer_bg.jpg) no-repeat;}
#nav_sub { padding-right:10px; text-align:right; margin-bottom:15px; padding-top:10px; font-family: Arial, Helvetica, sans-serif; }
	#nav_sub a {margin-right:15px; color:#bcbdc0; font-size:10px; }

/* -------------------------------------------  5. HEADER  ---------------------------------------------- */	
#header {height:200px; width:100%; margin:60px 0 20px 0; position:relative;}
#header #visu {background: #f9fcfd url(../img/ml/header_visu.jpg) center right no-repeat; width:100%; height:145px; position:absolute; top:50px}
#header h1 {font-family:'PeugeotRegular', Arial, Helvetica, sans-serif; font-size:36px; color:#005073; text-transform:uppercase; margin:75px 10px 0 30px}
#header h1 span {font-family:'PeugeotLight', Arial, Helvetica, sans-serif; font-size:30px}

/* ------------------------------------------  6. NAV MAIN ------------------------------------------------- */
.branding {position:absolute; top:-10px; left:25px}
#nav_main {color:#78797b;  position:absolute; top:12px; right:25px}
	#nav_main a {color:#78797b; font-family:Arial, Helvetica, sans-serif; font-size:10px; text-transform:uppercase; padding:10px 15px 10px 15px; background:url(../img/ml/separator.gif) center right no-repeat; margin:0 ; font-weight:bold;}
	#nav_main a.last {background:none}
	#nav_main a.selected {background:none; border:1px solid #e3e3e3; color:#48494b}
	#nav_main a:hover {color:#48494b}

/* ------------------------------------------  7. NAV LEFT ------------------------------------------------- */
#column {width:230px; padding-bottom:1px; float:left; background:#e3e3e3; margin:1px; }
#column a {display:block; font-family:'PeugeotRegular', Arial, Helvetica, sans-serif}
#column h2.trigger {
	padding: 19px 10px 13px 14px;
	margin: 1px 1px 0 1px;
	background: #dcdad7 url(../img/ml/toggle_arrow.png) 1px center  no-repeat; 
	width: 202px;
	font-size: 14px;
	font-weight: normal;
	border:1px solid #FFF
}
#column h2.active {background: #dcdad7 url(../img/ml/toggle_arrow1.png) 1px center  no-repeat; }
#column h2.trigger a {color: #005073; text-decoration: none; display: block;}
	#column h2.trigger a:hover {color: #303334;}

#column .toggle_container a {
	margin: 1px 1px 0 1px;
	padding: 8px 10px 8px 26px;
	border: 1px solid #f7f7f7;
	background: #e9e8e7 url(../img/ml/arrow.png) 14px center no-repeat;
	overflow: hidden;
	font-size: 14px;
	width: 190px;
	clear: both;
	color:#303334;
	text-decoration:none
}
#column .toggle_container a.active {background: #e9e8e7 url(../img/ml/arrow1.png) 14px center  no-repeat;}
#column .toggle_container .toggle_container a {background:#eeeeee url(../img/ml/arrow.png) 30px center  no-repeat; padding: 8px 10px 8px 46px; width: 172px; font-size:11px; border:none; margin:0 0 0 1px}
#column .toggle_container .toggle_container a.active {background:#eeeeee url(../img/ml/arrow1.png) 30px center  no-repeat;}
#column .toggle_container .toggle_container .toggle_container a {padding: 8px 10px 8px 66px; width: 152px; background:#eeeeee  url(../img/ml/arrow.png) 50px center  no-repeat; border:none; }
#column .toggle_container .toggle_container .toggle_container a.active {background:#eeeeee url(../img/ml/arrow1.png) 50px center  no-repeat;}
#column .toggle_container .toggle_container .toggle_container .toggle_container a {padding: 8px 10px 8px 86px; width: 132px; background:#eeeeee url(../img/ml/arrow.png) 70px center  no-repeat; border:none; }

/* ------------------------------------------  8. TREE ------------------------------------------------- */
#tree {width:722px; background:#eeeeee; float:left; margin:1px 1px 0 0; font-family:'PeugeotRegular', Arial, Helvetica, sans-serif; font-size:14px; margin-bottom:30px }
#tree .column {width:135px; background:#f7f7f7; float:left; margin-right:1px; min-height:800px; border-left:1px solid #e3e3e3; border-right:1px solid #e3e3e3; border-top:1px solid #e3e3e3;}
#tree .column ul li {border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; height:74px; margin-top:1px; }
#tree .column ul li div {width:136px; height:74px; background:url(../img/ml/diagonals.jpg) repeat; display:table-cell; vertical-align:middle; color:#005073;}
#tree .column ul li div img {margin-right:10px; float:left}
#tree .column ul li div span {background:url(../img/ml/arrow2.png) no-repeat left center; display:block; padding-left:20px;  min-height:32px}
#tree .column h3 {border-bottom:1px solid #e3e3e3; background:#005073 url(../img/ml/tree_title.gif) no-repeat 1px center; height:31px; color:#FFF; padding:17px 5px 0 17px; text-transform:uppercase; font-weight:normal; font-size:12px}
#tree .column_last {width:31px; float:left; height:200px; margin-left:1px;  border-top:1px solid #e3e3e3;}
#tree .column_last h3 {border-bottom:1px solid #e3e3e3; background:#005073 url(../img/ml/tree_title.gif) no-repeat 1px center; height:31px; color:#FFF; padding:17px 5px 0 17px; text-transform:uppercase; font-weight:normal; font-size:12px}
#tree .column_last ul li {border-top:1px solid #e3e3e3; border-bottom:1px solid #e3e3e3; height:74px; width:31px; margin-top:1px; background:url(../img/ml/diagonals.jpg) repeat; display:table-cell; vertical-align:middle; margin-bottom:1px ; display:block}
#tree .column_last .icon1 {margin:10px 0 0 7px; display:block }
#tree .column_last .icon2 {margin:10px 0 0 7px; display:block  }

/* ------------------------------------------  9. PAGE LOGIN ------------------------------------------------- */

p.intro_login {font-family:'PeugeotRegular', Arial, Helvetica, sans-serif; font-size:20px; color:#5a5a55; line-height:32px; padding:30px 0 70px 29px}
p.intro_login span {color:#005073; }
#form_login label {line-height:25px}
#form_login input {background:#5f8fa4; border:none; margin: 0 0 10px 5px; width:220px; color:#FFF; font-size:12px; font-family:Arial, Helvetica, sans-serif; padding-left:10px}
#form_login input.button {height:31px; width:83px; text-transform:uppercase; background:url(../img/ml/btn_login.gif) no-repeat center;  font-family:'PeugeotRegular', Arial, Helvetica, sans-serif; float:right; cursor:pointer; margin-top:15px; border:none }
#form_login p {margin:35px 0 0 5px; float:left}
#form_login p a {font-size:11px; color:#FFF; text-decoration:underline; }
#page_login .box_blue {margin-left:320px; padding-right:0; border-right:none; }

/* ------------------------------------------  10. PAGE FORM ------------------------------------------------- */

#form_template form{ color:#005073; width:955px;}
#form_template form h2{ color:#5a5a55; font-size:24px; padding:25px 0 0 20px;}
	#form_template form fieldset{  border:0 none; padding:20px 0; position:relative;}
	/* 2 cols layout */ 
	#form_template form .left{ float:left; width:370px; padding:5px 5px 5px 20px;}
	#form_template form .right{ float:left; width:500px; margin:55px 0 0 60px; padding:5px 0 ;}
	#form_template form .multibox { float:left; width:500px; }
	#form_template form .mandatory { float:left; margin:50px 0 0 0;}

	/* LABEL */
	#form_template form label{ clear:both; width:312px; text-align:left; display:block; margin:5px 0 0 0; font-size:14px;}
	#form_template form label.adress_num { clear:both; width:96px; text-align:left; display:block; margin:5px 0 0 0; font-size:14px;}
	#form_template form label.box_num { clear:both; width:199px; text-align:left; display:block; margin:5px 0 0 0; font-size:14px;}
	
	/* INPUT*/
	#form_template form input {width:312px; height:20px; border:1px solid #dfdfdf; background:#FFF; margin:8px 0 15px 0; float:left;}
	#form_template form input.adress_num {width:96px; height:20px; border:1px solid #dfdfdf; background:#FFF; margin:8px 0 10px 0;}
	#form_template form input.box_num {width:199px; height:20px; border:1px solid #dfdfdf; background:#FFF; margin:8px 0 10px 0;}
	#form_template form input:focus {border:1px solid #afafaf; background:#fff;}
		#form_template form input.blur {color: #999;}
	
	/* CHECKBOX */
	#form_template form input[type=checkbox]{float:left; border:0 none; background:none; width:13px; height:13px; margin-right:4px; margin-bottom:3px;}
	#form_template form .checkboxTxt{ clear:none; float:left; text-align:left; font-weight:normal; width:275px;}
	
	/* TEXTAREA */
	#form_template form textarea {width:312px; height:50px; border:1px solid #dfdfdf; background:#FFF; margin:5px 0 15px 0;}
	#form_template form textarea.question {width:312px; height:150px; border:1px solid #dfdfdf; background:#FFF; margin:5px 0 5px 0;}
	
	/* RADIO */
	#form_template form .box_input_gender {float:left; margin:5px 0 0 0; padding-bottom:35px;}
	#form_template form .box_input_radio {float:left; margin:5px 0 0 0; padding-bottom:20px;}
	#form_template form input[type=radio] {float:left; margin:5px 6px 0 0; width:auto; border:none; background:none;}
	#form_template form .radioTxt {display:block; float:left; margin:9px 9px 0 0; font-weight:normal; /*hack for IE8 only*/ margin-top /*\**/: 9px\9}
	
	/* SELECT */
	#form_template form select {width:312px; height:20px; font-size:12px; border:1px solid #abc3be; margin:8px 0 15px 0; float:left;}
		
	/* SUBMIT */
	#form_template form input[type=submit]{display:block; float:right; margin:30px 0 0 0; border:0 none; background:url(../img/ml/btn_submit_form.jpg) no-repeat; width:282px; height:50px; color:#fff; font-size:14px; text-transform:uppercase; padding-bottom:5px; /*hack for IE7 only*/ /padding-bottom:2px; cursor:pointer; outline:none;}
	#form_template form input[type=submit]:hover{ }	
	
	/* VALIDATION */
	.validMsg, .errorMsg {
	display:none;
	margin:10px 5px;
	padding:0px;
	width:19px;
	height:20px;
	float:left;
	}
	.selectValidState .validMsg, .selectRequiredState .errorMsg, .textfieldValidState .validMsg, .textfieldRequiredState .errorMsg, .textfieldRequiredMsg .errorMsg, .textfieldInvalidFormatState .errorMsg, .textfieldInvalidFormatMsg .errorMsg, .textfieldMinValueState .textfieldMinValueMsg .errorMsg, .textfieldMaxValueState .textfieldMaxValueMsg .errorMsg, .textfieldMinCharsState .errorMsg, .textfieldMinCharsMsg .errorMsg, .textfieldMaxCharsState .errorMsg, .textfieldMaxCharsMsg .errorMsg, .radioValidState .validMsg, .radioRequiredState .errorMsg, .radioRequiredMsg .errorMsg, .radioInvalidFormatState .radioInvalidFormatMsg .errorMsg, .passwordMinValueState .radioMinValueMsg .errorMsg, .radioMaxValueState .radioMaxValueMsg .errorMsg, .radioMinCharsState .radioMinCharsMsg .errorMsg, .radioMaxCharsState .radioMaxCharsMsg, .checkboxRequiredState .errorMsg, .checkboxRequiredMsg .errorMsg, .checkboxMinSelectionsState .errorMsg, .checkboxMinSelectionsMsg .errorMsg, .checkboxMaxSelectionsState .errorMsg, .checkboxMaxSelectionsMsg .errorMsg, .checkboxValidState .validMsg {
	/*display:inline-block;*/
	display:inline;
	/*margin:0px;
	padding:0px ;
	width:19px;
	height:20px;
	float:right;
	padding-top:-20px;*/
	}
	

/* ------------------------------------------  11. RESUME OFFRE ------------------------------------------------- */
#header h1.resume {margin:40px 10px 0 30px}
#offer_resume .box_blue {margin:25px 0 20px 25px}
#offer_resume .box_blue span {font-size:18px}
#offer_resume .box_blue ul {margin:20px 0 0 0}
#offer_resume .box_blue ul li {background:url(../img/ml/arrow5.png) no-repeat left; padding-left:15px; line-height:24px}
#offer_resume .box_blue .arrow {background:url(../img/ml/arrow5.png) no-repeat left; padding-left:15px;}
#offer_resume .box_grey_dark {margin:-20px 0 20px 25px}
#offer_resume .box_grey_dark li {background:url(../img/ml/arrow6.png) no-repeat left 8px ; padding-left:15px; line-height:24px}
#offer_resume .box_grey_arrow ul {margin:15px 0 20px 25px;}
#offer_resume .box_grey_arrow ul li {background:#FFF url(../img/ml/tree_title.gif) repeat-y 1px top ; border:1px solid #e3e3e3; width:310px; line-height:38px; font-size:18px; color:#005073; padding-left:15px; margin-bottom:1px}
#offer_resume .box_grey_list_tronsform ul {margin:15px 0 20px 25px;}
#offer_resume .box_grey_list_tronsform ul li {background: url(../img/ml/arrow7.png) left 8px no-repeat; /*width:310px; */line-height:24px; font-size:18px; color:#005073; padding-left:15px; margin-bottom:1px}
#offer_resume ul.selection  {margin:30px 0 34px 25px;}
#offer_resume ul.selection li {background:#FFF url(../img/ml/tree_title.gif) repeat-y 1px top ; border:1px solid #e3e3e3; width:310px; line-height:38px; font-size:18px; color:#005073; padding-left:15px; margin-bottom:1px}

#offer_resume .box_white {margin:0 25px 50px 25px}
#offer_resume .box_grey_arrow h2 {float:left}
#offer_resume .box_grey_arrow p {margin-left: 30px; color:#005073;font-size: 14px}
#offer_resume a.link_pdf {float:right; margin:35px 25px 0 0; color:#005073; font-size:14px}
#offer_resume .buttons {float:right; text-transform:uppercase; font-size:16px; margin-right:25px}
#offer_resume .nav { width:900px;  font-size:18px; padding-left:17px; }
#offer_resume .nav a.prev{float:left; font-size:18px;background:url(../img/ml/prev.png) no-repeat right; padding-right:15px; margin-left:15px; color:#005073;}
#offer_resume .nav a.next{float:right;font-size:18px;background:url(../img/ml/next.png) no-repeat left; padding-left:15px; margin-left:15px; color:#005073;}
#offer_resume .buttons a {color:#005073; background:url(../img/ml/arrow7.png) no-repeat left; padding-left:10px; margin-left:15px}
#offer_resume .buttons a:hover {color:#bfb7ae; background:url(../img/ml/arrow6.png) no-repeat left;}

/* ------------------------------------------  12. LISTE TRANSFORMATEURS ------------------------------------------------- */
#grid-example {margin:10px 0 0 27px}
#grid-example a img {margin:0 3px 0 3px}

/* ------------------------------------------  13. LISTE INFO PDF ------------------------------------------------- */
#list_pdf .box_grey_list {margin-bottom:10px;}
#list_pdf ul.selection  {margin:20px 16px 4px 25px;}
#list_pdf ul.selection li {background:#FFF url(../img/ml/tree_title.gif) repeat-y 1px top ; border:1px solid #e3e3e3; width:100%; line-height:38px; font-size:18px; color:#005073; padding-left:15px; margin-bottom: 1px;}

/* ------------------------------------------  14. DETAIL OFFRE ------------------------------------------------- */
#offer_resume .box_grey_arrow #form_offer_detail h2{float:none;}
#offer_resume .box_grey_arrow #form_offer_detail .left{padding:20px 0 0 30px; }
#offer_resume .box_grey_arrow #form_offer_detail .right{  margin:0 0 0 50px; float:none;}
#offer_resume .box_grey_arrow #form_offer_detail #dt31 input{ width:320px;}
#offer_resume .box_grey_arrow #form_offer_detail input[type=submit]{display:block; float:none; margin:30px 0 0 0; border:0 none; background:url(../img/ml/btn_submit_form_long.jpg) no-repeat; width:302px; height:24px; color:#fff;font-family:'PeugeotRegular', Arial, Helvetica, sans-serif; font-size:11px; font-weight:normal; text-transform:uppercase; padding:4px 0 5px 15px; /*hack for IE7 only*/ /padding-bottom:2px; cursor:pointer; outline:none;}