@charset "utf-8";

body{ background: url(images/bg_img.jpg) top center no-repeat #1e3956; border:0; font:12px Arial, Helvetica, sans-serif; color:#727b77; line-height:16px;margin:0;padding:0;}
/*body{background-color:#000;border:0; font:12px Arial, Helvetica, sans-serif; color:#727b77; line-height:16px;margin:0;padding:0;}*/
.tab{ background: url(images/fdoo.gif) bottom right no-repeat}

.gf8 { color: #646464; font-size: 8px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; letter-spacing: 0px; text-decoration: underline }
.gf8:hover { color: #00448a; font-size: 8px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; letter-spacing: 0px; text-decoration: underline }
.gf11 { color: #646464; font-size: 11px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none }
.g11 { color: #646464; font-size: 11px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none }
.gf14 { color: #464646; font-size: 14px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none ; letter-spacing: 3px; }
.bl12 { color: #fff; font-size: 12px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none }
.blg12 { color: #fff; font-size: 12px; font-weight: bold; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none }
.bl14 { color: #fff; font-size: 14px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none ; letter-spacing: 3px; }
.g12 { color: #c8c8c8; font-size: 12px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none }
.g10:hover { color: #f63; font-size: 10px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none }
.gf11:hover { color: #00448a; font-size: 11px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none }
.g12:hover { color: #f63; font-size: 12px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none }
.gf24 { color: #464646; font-size: 24px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none ; letter-spacing: 3px; }
.g12t { color: #464646; font-size: 12px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none ; letter-spacing: 2px; }
.g12t:hover { color: #00448a; font-size: 12px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none ; letter-spacing: 2px; }
.g20t { color: #464646; font-size: 20px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none ; letter-spacing: 2px; }
.g20t:hover { color: #00448a; font-size: 20px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none ; letter-spacing: 2px; }
.g20a { color: #00448a; font-size: 20px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none ; letter-spacing: 2px; }
.g20a:hover { color: #464646; font-size: 20px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none ; letter-spacing: 2px; }
.bl11 { color: #FFFFFF; font-size: 11px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none }

.v11 { color: #00448a; font-size: 11px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none }
.v18 { color: #00448a; font-size: 18px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none }

.v12t { color: #00448a; font-size: 12px; font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular; text-decoration: none ; letter-spacing: 2px; }
.input{ float:right; width:120px; padding:6px 2px 7px; background:#fff; border:1px solid #dcdcdc; font:11px Arial, Helvetica, sans-serif;  color:#a4a4a4;}
.input2{ float:right; width:150px; padding:6px 2px 7px; background:#fff; border:1px solid #dcdcdc; font:12px Arial, Helvetica, sans-serif; color:#a4a4a4;}
.input3{ width:200px; padding:2px 2px 2px; background:#fff; border:1px solid #dcdcdc; font:12px Arial, Helvetica, sans-serif; color:#a4a4a4;}
.input4{ width:170px; padding:2px 2px 2px; background:#fff; border:1px solid #dcdcdc; font:12px Arial, Helvetica, sans-serif; color:#a4a4a4;}
.input5{ width:295px; padding:2px 2px 2px; background:#fff; border:1px solid #dcdcdc; font:12px Arial, Helvetica, sans-serif; color:#a4a4a4;}

a.inscription {background:transparent;width:220px;height:60px;display:block;background-image:url(images/button-inscrivez-vous.png)}
a.inscription:hover	{background-position:0px -65px;}

form	{margin:0;padding:0;}

.pictoSupport{width:50px;}

/* ============================= structure generale	 ====================== */
.lueur		{position:relative;width:930px;}
.bas1		{background: url(images/grad-bas1.png) top left no-repeat;height:11px;}
.bas2		{background: url(images/grad-bas2.png) top left no-repeat;height:19px;}
.haut1		{background: url(images/grad-haut1.png) top left no-repeat;height:17px;}
.haut2		{background: url(images/grad-haut2.png) top left no-repeat;height:10px;}
#englobante	{position:relative;top:0px;width:930px;background:url(images/grad-englobante.png) top left repeat-y;}
 #fondblanc	{position:relative;top:0px;width:900px;background-color:white;}
 #contenant	{position:relative;top:0px;width:870px;padding-left:30px;text-align:left;background:url(images/fond-bandeau.jpg) top left  no-repeat;}
 #contenant >table 	{width:870px}

/* ============================= haut 	 ====================== */
#logo					{float:left;margin-top:26px;}
#accesEspaceClient		{width:250px;float:right;font-size:12px;letter-spacing:normal !important;color:#000000;}
#accesEspaceClient input {float:right;width:119px;height:16px;background:url(images/fond-input-espaceclient.png) top left no-repeat;
						 font-size:11px;color:#a4a4a4;border:0;margin:0 0 3px 0;padding:3px 0 0 5px}

.titreespaceClient		{color:#00448a;font-size:15px;letter-spacing:1px;padding:10px 0 0 25px;font-weight:bold;background:url(images/picto-espace-client.png) top left no-repeat;margin:0 12px 10px 0}
#accesEspaceClient .gf8 {margin-right:45px}

/* ============================= content ====================== */

.left {float:left;}
.right {float:right;}
.clear {clear:both;}
.shadow { -moz-box-shadow: 1px 4px 12px #000000;-webkit-box-shadow: 1px 4px 12px #000;box-shadow: 1px 4px 12px #000;
	  	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000')";
		filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=180, Color='#000000');}
.blanc {color:#fff;}
.vert {color:#74b1f3;}
.noir {color:#333;}
.bleu { color:#314F51;}
.wrapper {width:100%; overflow:hidden;}

#content {width:100%; overflow:hidden}

#banners{position:relaive;top:0px;left:0px;width:100%; overflow:hidden; font-size:12px;color:#ddd;}
#banners div img {margin:0 auto; display:block;}
#banners .pad{ padding:0 15px 20px 12px; position:relative; }
#banners p {padding:0px 7px 7px 7px;line-height:18px;margin:0;}
#banners h3 { font-size:11px;margin:10px 0px 0px 0px; padding:0; text-align:center; padding-top: 10px;}
#banners h3 span {   font-size: 18px;left: 5px;margin-right: 5px;position: absolute;}
#banners h2{ color:#fff; font-size:25px; line-height:10px; padding:10px 0 10px 0; letter-spacing:-2px; margin:0px; text-align:center;}
#banners h2 span{ display:block; margin-top:-10px;}
#banners .ensavoirplus{ background:transparent;width:134px;height:42px;display:block;}
#banners .ensavoirplus:hover {background-position:0px -50px;}

#banner1, #banner2, #banner3, #banner4,#banner5{ float:left; width:279px; height:350px; margin-right:1px;}

#banner1{ background:url(images/gradCadre-1.jpg) repeat-x;}
/*#banner1 p {background-color:#394E51;}*/
/*#banner1 {background:#304d4f;}*/
#banner1 .ensavoirplus {background-image:url(images/button1.png);}
/*#banner1 .button span{ background:url(images/button1.png) top left no-repeat}
#banner1 .button span span{ background:url(images/button1_right.png) top right no-repeat}
#banner1 .button span span span{ background:url(images/button1_fond.png) top right repeat-x;}*/
#banner1:hover {/*background-color:#304d4f;*/color:white;cursor:pointer}

/*#banner2{ background:#356d65; color:#aec5c1;}*/
#banner2{ background:url(images/gradCadre-2.jpg) repeat-x;}
/*#banner2 p { background-color:#477C75;}*/
#banner2 .ensavoirplus { background-image:url(images/button2.png);}
/*#banner2 .button span{ background:url(images/button2_left.png) top left no-repeat}
#banner2 .button span span{ background:url(images/button2_right.png) top right no-repeat}
#banner2 .button span span span{ background:url(images/button2_fond.png) top right repeat-x;}*/
#banner2:hover 	{/*background-color:#356d65;*/color:white;cursor:pointer;}

/*#banner3{ background:#60805a; color:#bfccbd}*/
#banner3{ background:url(images/gradCadre-3.jpg) repeat-x;}
/*#banner3 p{ background-color:#60785A;}*/
#banner6 .ensavoirplus, #banner3 .ensavoirplus { background-image:url(images/button3.png) ;}
/*#banner3 .button span{ background:url(images/button3_left.png) top left no-repeat}
#banner3 .button span span{ background:url(images/button3_right.png) top right no-repeat}
#banner3 .button span span span{ background:url(images/button3_fond.png) top right repeat-x;}*/
#banner3 .list1{ margin-top:-4px; padding-bottom:15px}
#banner3 .list1 li{ line-height:25px;}
#banner3 .list1 li a{ color:#bfccbd; padding-left:11px; background:url(images/marker_1.gif) 0 5px no-repeat}
#banner3:hover {/*background-color:#60805a*/;color:white;cursor:pointer}

/*#banner4{ background:#60805a; color:#bfccbd}*/
#banner4{ background:url(images/gradCadre-4.jpg) repeat-x;}
/*#banner4 p { background-color:#83A17C;}*/
#banner4 .ensavoirplus {background-image:url(images/button4.png) ;}
/*#banner4 .button span{ background:url(images/button4_left.png) top left no-repeat}
#banner4 .button span span{ background:url(images/button4_right.png) top right no-repeat;}
#banner4 .button span span span{ background:url(images/button4_fond.png) top right repeat-x;}*/
#banner4 .list1{ margin-top:-4px; padding-bottom:15px}
#banner4 .list1 li{ line-height:25px;}
#banner4 .list1 li a{ color:#bfccbd; padding-left:11px; background:url(images/marker_1.gif) 0 5px no-repeat}
#banner4:hover {/*background-color:#60805a;*/color:white;cursor:pointer}

#banner5{ background:#00448a; margin-right:0; color:#e0e7ce}
#banner5{ background:url(images/gradCadre-5.jpg) repeat-x; }
/*#banner5 p {background-color:#748744;}*/
#banner5 .ensavoirplus { background-image:url(images/button5.png);}
/*#banner5 .button span{ background:url(images/button5_left.png) top left no-repeat;}
#banner5 .button span span{ background:url(images/button5_right.png) top right no-repeat;}
#banner5 .button span span span{ background:url(images/button5_fond.png) top right repeat-x;}*/
#banner5:hover {/*background-color:#00448a;*/color:white;cursor:pointer}

#en_savoir_plus1{position: absolute;left: 70px;	top: 285px;z-index:2;}
#en_savoir_plus2{position: absolute;left: 70px;	top: 285px;z-index:2}
#en_savoir_plus3{position: absolute;left: 70px;	top: 285px;z-index:2}
#en_savoir_plus4{position: absolute;left: 70px;	top: 285px;z-index:2}
#en_savoir_plus5{position: absolute;left: 70px;	top: 285px;z-index:2}

#banner6 { background-color:#1e3956; height:170px; margin-top:5px;}
#traduction{width:600px; margin-left:20px; margin-top:20px; color:#ccc;}
#traduction h2 {color:#fff; display:inline; margin-right:10px}
#traduction h3 {display:inline;}
.pictoTraduction { margin-left:20px; margin-right:20px; margin-top:20px;}

.line1{ background:url(images/line_ver.gif) 219px 0 repeat-y}
.line2{ background:url(images/line_ver.gif) 419px 0 repeat-y}
.line3{ background:url(images/line_ver.gif) 300px 0 repeat-y}

.fd1{background:#304d4f;}

.pad_left1{ padding-left:40px;}
.pad_left2{ padding-left:55px;}
.pad_bot1{ padding-bottom:26px}
.pad_bot2{ padding-bottom:6px;}
.marg_right1{ margin-right:35px;}
.marg_right2 {margin-right:12px;}

.trait	{height:1px;border-bottom:1px solid #9A9A9A;margin:5px 0 5px 0}

.font1{ color:#1869bb}
.font2{ font-size:10px; color:#b0bcb7; text-transform:uppercase}

.link1{ font-size:13px; text-transform:uppercase}

.under{ padding-bottom:29px; border-bottom:1px solid #d9d9d9; margin-bottom:14px;}

.list1 li{ line-height:22px;}
.list1 li a{ padding-left:12px; background:url(images/marker_2.gif) 0 5px no-repeat}

/* ============================= footer ====================== */

footer { padding:27px 0 33px 20px; font-size:11px; text-transform:uppercase; color:#81a99b;}
footer a{ color:#fff}

/* ============================= forms ============================= */

#ContactForm {}
#ContactForm a{ margin-left:20px; float:right; margin-top:25px;}
#ContactForm .input {width:217px; height:15px; border:1px solid #d0d0d0; background:#fff; padding:2px 5px; margin-bottom:5px;color:#727b77; font:12px Arial, Helvetica, sans-serif;}
#ContactForm textarea {width:245px; height:57px; border:1px solid #d0d0d0; background:#fff; padding:2px 5px; margin-bottom:5px;color:#727b77; font:12px Arial, Helvetica, sans-serif; overflow: auto}

.col_1{ width:220px; float:left;}
.col_2{ width:580px; float:left; padding-left:39px}
.cola_1{ width:320px; float:left;}
.cola_2{ width:480px; float:left; padding-left:39px}

/* ============================= tabs en JQuery par Henriette ============================= */
dl.tabs {position:relative;margin:0;padding:0}
  dl.tabs dt {color:#464646;float:left;letter-spacing: 2px;font-size:12px;margin:0 5px 0 0;
			  font-family: Verdana, Helvetica, Arial, Geneva, Swiss, SunSans-Regular;line-height:normal}
			
	dl.tabs dd {background:white;width:840px;height:360px;clear:both;display:block;}
					
 /* Si JS est active, nouveau style attribue dynamiquement a dl.tabs */
 dl.tabs.interieur {}
 	dl.tabs.interieur dt {cursor:pointer;}
	dl.tabs.interieur dt:hover {color:#00448a;}
	dl.tabs.interieur dt.active {border:none;cursor:default;color:#00448a;}
		dl.tabs.interieur dd {position:absolute;left:0;top:35px;margin:0;z-index:111;clear:none;display:none;}
		dl.tabs.interieur dd.active {display:block;border-top:1px solid #9A9A9A;}

		
/* ============================= JQuery pour Location de Fichiers ============================= */
.crit-geo-ligne {
    border-bottom: 1px solid #DBDBDB;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 4px;
}

.crit-geo-ligne-pave-droit {
    float: right;
    width: 30px;
    padding-right: 5px;
}
.crit-geo-line-first {
    border-top: 1px solid #DBDBDB;
}
.crit-geo-line-li {
    list-style-type: none;
    margin-left: 0px;
}

a.accordion {
    padding-left: 14px;
    text-decoration: none;
    font-weight: bold;
    color: #6e6b6b;
    font-size: 12px;
    background: transparent url(images/oo.gif) no-repeat;
}

.entre {
    padding-left: 15px;
    padding-right: 10px;
    float: right;
    border-left: 1px solid #DBDBDB;
}



.crit-geo-line-top {
	border-top: 1px solid #DBDBDB;
}

.crit-geo-line {
	border-bottom: 1px solid #DBDBDB;
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 4px;
}

.rech-ville {
    float: right;
    visibility: hidden;
    display: none;
}

.rech-ville a {
    display: inline;
    width: 30px;
    height: 20px;
}
.current .rech-ville {
    display: inline;
    visibility: visible;
}


.crit-geo-ligne-h {
    height: 150px;
}

.crit-geo-rech {
    border-bottom: solid 1px #DBDBDB;
    margin-top: 1px;
}

.crit-geo-res {
    font-size: 12px;
    font-weight: bold;
    margin: 0px;
    padding: 2px 0 0 12px;
    color: #666;
}

#crit-geo {
    
    width: 530px;
    margin-bottom: 20px;
    border-right: 1px solid #DBDBDB;
    border-left: 1px solid #DBDBDB;
    border-top: 1px solid #DBDBDB;
}
#crit-geo .rech-ville {
    float: right;
    visibility: hidden;
    display: none;
}
#crit-geo .rech-ville a {
    display: inline;
    width: 30px;
    height: 20px;
	padding-right:20px;
}
#crit-geo .current .rech-ville {
    display: inline;
    visibility: visible;
}
#crit-geo .crit-geo-c {
    padding: 1px 0px 5px 10px;
    margin-top: 6px;
    width: 515px;
    visibility: hidden;
    display: none;
    background-color: #f2f2f2;
}


#crit-geo .current .crit-geo-c {
    display: block;
    visibility: visible;
}
#crit-geo .tout-div {
    height: 118px;
    overflow: auto;
}
#crit-geo .tout-div .left {
    width: 47%;
}
#crit-geo .tout-div .right {
    width: 47%;
}
#crit-geo .tout-div.petit {
    height: 120px;
}
#crit-geo a {
    text-decoration: none;
}

#crit-geo .crit-geo-ligne-pave-gauche {
    float: left;
    width: 120px;
	padding-right: 65px;
}

#crit-soc div.current a.accordion span {
    color: #666;
}
#crit-soc a.accordion span {
    color: #666;
}
#crit-soc .age-c {
    background-color: #f2f2f2;
	margin-top:6px;
}


#crit-soc div div {
    display: none;
}
#crit-soc div.current div {
    display: block;
}

.crit-soc-c {
    margin-top: 0px;
    padding-top: 0px;
	border-top: 1px solid #DBDBDB;
    border-left: 1px solid #DBDBDB;
    border-right: 1px solid #DBDBDB;
    overflow: auto;
    width: 252px;
}

.styled {
    border: 0;
    line-height: 2.5;
    padding: 0 20px;
    font-size: 1rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(0, 68, 138, 1);
    background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}

.styled:hover {
    background-color: rgba(0, 68, 138, 1);
}

.styled:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}


/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 20%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}