/* -------------------------------------------  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 */


body {font-family:Arial, Helvetica, sans-serif; font-size:12px}

#top, #nav_main, #nav_sub {display:none}

h2{ 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_top20 {margin-top:20px}
.m_bottom80 {margin-bottom:80px}


.box_grey {background:#EEEEEE; margin-top:20px; margin-bottom:20px; }
.box_grey_arrow {background: #EEEEEE url(../img/ml/arrow4.png) left 30px no-repeat; margin-top:20px; margin-bottom:70px;}
.box_grey_middle1 {background: #EEEEEE url(../img/ml/arrow4.png) left 30px no-repeat; margin-top:20px; margin-right:21px; float:left; width:310px }
.box_grey_middle2 {background: #EEEEEE url(../img/ml/arrow4.png) left 30px no-repeat; margin-top:20px; float:left; width:310px }

.box_blue {width:280px; 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_grey_dark {width:280px; 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}

/* -------------------------------------------  5. HEADER  ---------------------------------------------- */	
#header {height:200px; width:100%; margin:60 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:Arial, Helvetica, sans-serif; font-size:24px; color:#005073; text-transform:uppercase; margin:75px 10px 0 0}
#header h1 span {font-family:Arial, Helvetica, sans-serif; font-size:18px}

/* ------------------------------------------  7. NAV LEFT ------------------------------------------------- */
#column {width:130px; padding-bottom:1px; float:left; background:#e3e3e3; margin:1px; }
#column a {display:block; font-family:Arial, Helvetica, sans-serif}
#column h2.trigger {
	padding: 5px 10px 5px 14px;
	margin: 1px 1px 0 1px;
	background: #dcdad7 url(../img/ml/toggle_arrow.png) 1px center  no-repeat; 
	width: 106px;
	font-size: 11px;
	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: 5px 10px 5px 26px;
	border: 1px solid #f7f7f7;
	background: #e9e8e7 url(../img/ml/arrow.png) 14px center no-repeat;
	overflow: hidden;
	font-size: 11px;

	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; 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; 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; background:#eeeeee url(../img/ml/arrow.png) 70px center  no-repeat; border:none; }

/* ------------------------------------------  8. TREE ------------------------------------------------- */
#tree {width:555px; float:left; margin:1px 1px 0 0; font-family:'PeugeotRegular', Arial, Helvetica, sans-serif; font-size:11px; margin-bottom:30px;}
#tree .column {width:108px; background:#f7f7f7; float:left; margin-right:1px; 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 a {width:107px; height:74px; background:url(../img/ml/diagonals.jpg) repeat; display:table-cell; vertical-align:middle; color:#005073; cursor: pointer}
#tree .column ul li a img {margin-right:10px; float:left}
#tree .column ul li a 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 10px; text-transform:uppercase; font-weight:normal; font-size:10px}
#tree .column_last {display:none}

/* ------------------------------------------  11. RESUME OFFRE ------------------------------------------------- */
#header h1.resume {margin:40px 10px 0 30px}
#offer_resume .box_blue {margin:25px 0 20px 25px; width:240px;}
#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; width:240px;}
#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:30px 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_white {margin:0 25px 50px 25px}
#offer_resume .box_grey_arrow h2 {float:left}
#offer_resume a.link_pdf, #offer_resume .buttons, #offer_resume .box_white, #form_template {display:none}

#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:260px; line-height:38px; font-size:18px; color:#005073; padding-left:15px; margin-bottom:1px}