/**** Ok, as far as notes, the background is beige, and the header was fully 
assembled and absolute positioned,  The same with the three columns, contain 
everything,  stacked from top to bottom, absolute positioned.  The template 
title is absolute positioned, seperately, so I could overlay across the page 
columns.  Drop me an email for minor bugs.  Tested in free Editor Nvu and in 
DW, in IE and in Firefox. Validates xhtml and Css.  ******/

/*****   IMPORTANT NOTE: The basics are here, the canvas, images, colors, coding.  
Still may want or need to recode some of it, to fit your own technique.  Due to cross-
browser compatibility issues with liquid designs; which are somewhat different to work 
wit, I use no left or right pad/margin, at all, on outer divs, but instead nest two divs, 
like sticking a 3 inch box into a 4 inch box, to give you a 1/2 inch margin.  The outer 
at nearly full width, leave a few percent for play, style content centered, "margin:0 auto; and 
text-align:center;" and then insert an inner div, at 90 percent width (100 if needed), 
centered or floated, and a little pad to the inner div, if needed, .  The inner gets all 
styles, border, color, whatever.  This provides a fake or faux left/right pad/margin, as 
needed, by adjusting width percentage. You could also float the outer left, and the inner 
right, to give you the same outcome, as I did in my A12 template's left column.  *******/    



/*************** CSS Document *******************/

/***** CSS Document ******/
/***********  default font-size:12px, use 100% for that  ********/
/*****  90%=11px, 80% in forms, 85% otherwise roughs 10 to 10.5px, a minimum  *****/
/******  NOTEs: DW wont view all docs properly, try browsers first, before modification  *******/
/****  divs must float left for dw to view border, most pages must be 100% wide to view proper ********/
/*********  to center page is confusing, when float left is necessary  ************/
/**** trick for "center with float left" is float left 100% wide w/body margin sides 5% or more *****/
/**** Above not a 100% fix for dw view, borders still flakey *****/
/*****  another trick to keep position going, is only float what needs floating  *********/
/*****  try add or remove <br> in end of empty divs, or remove float, make dw view properly *******/
/*****  NOTE: The <strong> tag &/or no clear float at base, made link repeat at base of page  *****/
/**** The trick hack to stop hover jumpy links, is to put every section into a div, classed seperate  ****/
/******  any div that has a specified margin/pad can't have links without containers  *****/
/******  another hack, is to classify all links, so that they don't margin/pad jumpy  *****/
/*****  the divs containing links can't have set width and margin/pad alterations, or theyll be jumpy  *******/
/**** Hack: Removed width to stop jumpy hover-links, setting pad-margin made it width:auto  *****/
/**** Jumpy Links solved with px instead of % on pad/margin  ****/
/****  Rows of divs must be in wrappers, to wrap correctly, so they don't hang when wrapping"  ***/




/***  Height to "li a" works to allow full width 
         links when width:100% is not an option; 
		 and seems to force divs to hold contents, 
		 when float is not an option.  Height needs 
		 accuracy, or problematic with Firefox ****/
/****  FLOAT:LEFT WAS NEVER USED IN MANY HORIZONTAL ULs  *****/

/********  Not Blocked/Floated  **********/
/****  Appears that inner divs go against prior divs, but which ones?  *********/
/****  Deleting all unnecessary div borders resolved doublewide dw blowout  *****/
/*****  divs out of order, caused absolute columns to vanish  ******/
/***  absolute positioning, use left (never right dimension) fixes layering problem ******/
/**** bodycontainer floated left caused doublewide blowout  ******/


/****   VERY IMPORTANT NOTE  ****/
/****   
   KEEP ALL ABSOLUTE POSITIONED DIVS INSIDE OF THE CANVAS_WRAP DIV, TO 
   KEEP ALL ABSOLUTE POSITIONED WORK BOXES VISIBLE IN Nvu and Dreamweaver 
   Editors.  IT's JUST A Z-INDEX RELATED FIX FOR WYSIWYG HTML EDITORS.
   VERY IMPORTANT NOTE  ****/

/***  Colors Used In the Original Template:
#92847B: Taupe Body Background 
#5c5c5c: Canvas Left Column Dark Gray: 
#FFFFFF: White Center/Right Canvas 
#372F2C: Darkest Black Rose Left Header
#736B68: Lighter Taupe Rose, Right Header
#7F7F7F: Medium Gray, Left Nav Hover and Header Title Gray
#336699: Blue Links, Center Column
#B48181: Mauve Links and Mauve H2 Margin
#A99D61: Gold, Header Text and left/top/base Links
****/




body {
	margin:0 auto;
	padding:0;
	font-size:.70em;
	font-family:verdana, arial, helvetica, sans-serif;
	background-image: url("../media_v2/fond_jaune.gif");
	background-repeat: repeat-x;
	background-color: #FCF2D7;

}
.wrap {
margin:0 auto;
padding: 0;
width:70%;
text-align:center;
}
  

/* The background-image's for the .wrap below are for preloading 
all the page's images, just add your own images to the pattern */  
/***  Preload media_v2  ***/
.wrap {
	background-image: url("../media_v2/arrowwhite_left.gif");
	background-image: url("../media_v2/arrowblack_left.gif");
	background-image: url("../media_v2/dualarrowgold.gif");
	background-image: url("../media_v2/brush.gif");
	background-image: url("../media_v2/camera1.jpg");
	background-image: url("../media_v2/camera2.jpg");
	background-image: url("../media_v2/camera3.jpg");
	background-image: url("../media_v2/ebay.gif");
	background-image: url("../media_v2/shadow_leftontaupe.jpg");
	background-image: url("../media_v2/shadow_rightontaupe.jpg");
	background-repeat: no-repeat;
	background-position: -5000px -5000px;}
/**** end preload images ****/

/***  Here's another CSS image preload trick: 
/***  PRELOAD IMAGES AGAIN, BY PUTTING IMAGES 
IN THIS CLASS,  AT THE BASE OF THE HTML  *******/
.hiddenpic {display:none;}
/**** end preload images ****/


.style4 {color: #93857B}


img {margin: 0; padding: 0; border:0;}

p {}

.canvas {
	float:left;
	margin:0 auto;
	padding: 0;
	width:100%;
	height: 100%;
	text-align:left;
	background-image: url(../media_v2/fond_gauche.jpg);
	background-repeat: repeat-y;
}
/****   VERY IMPORTANT NOTE  ****/
/****   
   KEEP ALL ABSOLUTE POSITIONED DIVS INSIDE OF THE MAIN WRAP DIV, AND BE 
   SURE TO SET THE Z-INDEX STACK ORDER; TO KEEP ALL ABSOLUTE POSITIONED 
   WORK BOXES VISIBLE IN Nvu and Dreamweaver Editors.  IT's JUST A FIX 
   FOR WYSIWYG HTML EDITORS.
 
   VERY IMPORTANT NOTE  ****/
   
/******  This is the title text, absolute positioned over the entire 
Template:  Positioned Text box, basically.  Just keep all absolute divs
inside of the wrapper and use css's z-index if necessary.  *****/

.absolute_title {
	position:absolute;
	top:19px;
	left:5%;
	margin:0;
	padding:0;
	height:auto;
	width:90%;
	background-color:transparent;
	border:0px solid #FFFFFF;
	color:#FFFFFF;
	font-weight:bold;
	font-size:12px;
	text-indent:10%;
	text-align:center;
	z-index:1000;

}


.left_column {
	margin:0 auto;
	padding:0;
	float:left;
	width:24.8%;
	border:0px solid #eaeaea;
	text-align:left;
}

.header_left {
display:block;
margin:0 auto;
margin-top:10px;
padding:0;
padding-left:9px;
width:auto;
height:auto;
text-align:left;
color:#FFFFFF;
}

.header_leftrowone {
display:block;
margin:0 auto;
padding:0;
width:100%;
height:5px;
background-color: #372F2C;
text-align:center;
color:#FFFFFF;
font-size:2px;
}
.header_leftrowtwo {
	display:block;
	padding:0;
	width:100%;
	height:100px;
	background-color: #000000;
	text-align:right;
	color:#FFFFFF;
	background-image: url(../media_v2/logo.jpg);
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	background-repeat: no-repeat;
	background-position: left;
}
.header_leftrowthree {
display:block;
margin:0 auto;
padding:0;
width:100%;
height:15px;
background-color: #372F2C;
text-align:center;
color:#FFFFFF;
}

.sidebox_a,
.sidebox_b,
.sidebox_c,
.sidebox_d,
.sidebox_e {
	display:block;
	margin-top:15px;
	padding:0;
	height:70px;
	width:75%;
	border:1px solid #7f7f7f;
	color:#ffffff;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFF;
}

.sidebox_a {
	background-color: #FFF;
	background-repeat: no-repeat;
	background-position: center;
}

.sidebox_c {
	background-color: #FFF;
	background-repeat: no-repeat;
	background-position: center;
}
.sidebox_d {
	background-color: #FFF;
}
.sidebox_e {
	background-color: #FFF;
	border:1px solid black;
	text-align: center;
	vertical-align: middle;
	color: #333;
}

.right_column {
overflow:auto;
display:block;
float:right;
margin:0 auto;
padding:0;
height: 100%;
width:75%;
background: #FFFFFF url("../media_v2/shadow_rightontaupe.jpg") repeat-y right;
text-align:center;
}

.header_right {
	margin:0 auto;
	margin-top:10px;
	padding:0;
	padding-right:9px;
	width:auto;
	height:auto;
	text-align:center;

}

.header_rightrowone {
margin:0;
padding:0;
width:100%;
height:5px;
background-color: #736B68;
text-align:center;
color:#FFFFFF;
font-size:2px;}

.header_rightrowtwo {
	margin:0;
	padding:0;
	width:100%;
	height:100px;
	text-align:center;
	color:#ffffff;
	background-color: #000;
	background-image: url("../media_v2/fond_banniere.jpg");
	background-repeat: repeat-x;
}
.header_rightrowthree {
	margin:0;
	padding:0;
	width:100%;
	height:15px;
	background-color: #000;
	text-align:center;
	color:#FFFFFF;
	font-weight:normal;
}


/***** Adding overflow:auto to any boxes 
will auto scrollbar if needed.  ******/

.content_wrapper {
display:block;
margin:0% auto;
margin-top:20px;
padding:0;
width:95%;
text-align:center;
}
.content_left {
float:left;
margin:0;
padding:0;
width:70%;
text-align:left;
}

.content_right {
	float:right;
	margin:0;
	padding-left:0px;
	width:28%;
	text-align:center;
	border-left:1px dashed #999999;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
}

/***  This is the sample table 200 height  ****/
.content_right_e {
overflow:auto;
display:block;
margin:0 auto;
margin-top:5px;
padding:0;
width:95%;
height:200px;
text-align:left;
}

.bodylinks_menu {
	display:block;
	float:left;
	width:100%;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: dashed;
	border-bottom-style: dashed;
	border-top-color: #FFD200;
	border-bottom-color: #666666;
	margin-top: 10px;
	
	margin-bottom: 4px;
	
	padding-top: 10px;
	
	padding-bottom: 4px;
	
}


.footer {
	display:block;
	clear:both;
	width:100%;
	color: #000000;
	text-align:center;
	margin-right: auto;
	margin-left: auto;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #000;
	background-color: #FF9;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #CCC;
}

.footer_lien {
	display:block;
	clear:none;
	width:100%;
	text-align:right;
	margin-right: auto;
	margin-left: auto;
	background-color: #FFC;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #CCC;
	margin-top: 0px;
	padding-top: 10px;
	height: 120px;
}


/****  "topmenu" HORIZONTAL  ****/
.topmenu {margin:0 auto; padding:0;width:100%; text-align:center;}
ul.topmenu {
	padding-bottom:2px;
	list-style: disc inside;
	text-align: right;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
}
ul.topmenu li {margin:0; padding:0; display:inline; width:25%;}
/****  "topmenu" horizontal menu link styles  ****/
ul.topmenu li a:link, ul.topmenu a:visited { color:#A99D61;  font-weight:normal;width:100%; }
ul.topmenu li a:hover, ul.topmenu a:active  {color:#336699;  font-weight:normal; width:100%; background-color: #cccccc;  }











/***  leftnavs VERTICAL  ***/
.leftnav {
	display:block;
	clear:both;
	margin-top:20px;
	padding-left:5%;
	width:95%;
	text-align:center;
	text-indent:0px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
}
.leftnav ul{display:block;clear:both;margin:0 auto; padding:0; text-align:left;text-indent:0px;}
.leftnav ul li {
	display:block;
	width:100%;
	margin:0;
	padding:0;
	border-bottom:1px solid #7f7f7f;
	text-indent:0px;
	list-style-image: none;
	list-style-type: none;
}

/****  Side menu link styles  ****/
.leftnav ul li a:link, .leftnav ul li a:visited {color:#FFFFFF; font-weight:normal; display:block; width:100%;padding: 4px 0px;text-decoration:none;}
.leftnav ul li a:hover, .leftnav ul li a:active {color:#FFFFFF; font-weight:normal; display:block; width:100%;padding: 4px 0px;text-decoration:underline; background: #666666 url("../media_v2/arrowwhite_left.gif") no-repeat right center;}

/* the following 3 rules are for the submenu, if you removed the submenu remove these rules as well */
.leftnav ul ul li {line-height: 10px;	border-bottom: none}
.leftnav ul ul li a:link,  .leftnav ul ul li a:visited {color:#cccccc; text-indent:10px;}
.leftnav ul ul li a:hover, .leftnav ul ul li a:active, .current_page {
background: transparent url("../media_v2/arrowblack_left.gif") no-repeat right center;}



/***  bodylinks_column: Body columned menus  ***/
.bodylinks_column {
	display:block;
	float:left;
	width:100%;
	text-align:left;
	padding: 5px;
}
ul.bodylinks_column {
	display:block;
	float:left;
	display:block;
	width:49.5%;
	text-align: left;
	margin-top: 2px;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 2px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}
ul.bodylinks_column li {
	margin:0;
	padding:0;
	list-style: none;
	text-align: left;
}
/****  bodylinks_column Link/hover Styles  ****/
ul.bodylinks_column a:link, .bodylinks_column a:visited {
	color:#336699;
	font-weight:normal;
	text-decoration:underline;
	background: url("../media_v2/dualarrowgold.gif") no-repeat top left;
	padding-left: 15px;
	text-align: left;
}
ul.bodylinks_column a:hover, .bodylinks_column a:active {color:#B48181;font-weight:normal;text-decoration:underline;background: transparent url("../media_v2/dualarrowgold.gif") bottom left no-repeat;}


/****  "basemenu" HORIZONTAL   ****/
.basemenu {display:block; margin:0 auto;  padding:0; width:auto; text-align:center;}
ul.basemenu {display:block; margin:0; padding:0; padding-bottom:2px; list-style: none inside; text-align: center;}
ul.basemenu li {margin:0; padding:0; display:inline; width:25%;}
/****  "basemenu" menu link styles   ****/
ul.basemenu li a:link, ul.basemenu li a:visited {color:#336699;font-weight:normal;}
ul.basemenu li a:hover, ul.basemenu li a:active  {color:#B48181;font-weight:normal;background-color: #eaeaea;font-weight:normal;}

/****  "baselien" HORIZONTAL   ****/
.baselien {display:block; margin:0 auto;  padding:0; width:auto; text-align:center;}
ul.baselien {
	display:block;
	margin:0;
	padding-bottom:2px;
	text-align: left;
	float: left;
	width: 19%;
	padding-top: 0;
	padding-right: 0;
	border-right-width: 1px;
	border-right-style: dashed;
	border-right-color: #666;
	list-style-position: inside;
	list-style-image: url("../media_v2/arrowblack_right.gif");
	list-style-type: none;
	padding-left: 5px;
	font-size: 9px;
}

/****  "basemenu" menu link styles   ****/
ul.baselien li a:link, ul.baselien li a:visited {
	color:#CCC;
	
}
ul.baselien li a:hover, ul.baselien li a:active  {
	color:#666;
}

/****  LEFT SMALL BOXES: LINK STYLES: GOLD LINKS WITH BLUE ON HOVER  *****/
.sidebox_a a:link, .sidebox_a a:visited,
.sidebox_b a:link, .sidebox_b a:visited,
.sidebox_c a:link, .sidebox_c a:visited,
.sidebox_d a:link, .sidebox_d a:visited,
.sidebox_e a:link, .sidebox_e a:visited {
color:#A99D61;font-weight:normal;
}

.sidebox_a a:hover, .sidebox_a a:active,
.sidebox_b a:hover, .sidebox_b a:active,
.sidebox_c a:hover, .sidebox_c a:active,
.sidebox_d a:hover, .sidebox_d a:active,
.sidebox_e a:hover, .sidebox_e a:active {
color:#336699;font-weight:normal;background-color: #eaeaea;font-weight:normal;
}

/****  Page Link Styles (NOT MENU LINKS)  *****/
a:link, a:visited {color:#336699; font-weight:normal;}
a:hover, a:active {
	color:#000;
	font-weight:normal;
	list-style-image: none;
	list-style-type: none;
	list-style-position: inside;
}



h1 {
	border-bottom: 1px solid #CCCCCC;
	border-top: 1px solid #CCCCCC;
	border-right: 20px solid #B48181;
	color: #C90;
	font-size: 13px;
	font-weight:normal;
	text-align: left;
	height: auto;
	width: auto;
	margin-right: 2px;
	margin-left: 2px;
	padding-right: 2px;
	padding-left: 2px;
}
	
h2 {
	margin:0;
	padding:0;
	color: #A99D61;
	font-size: 1.2em;
	font-weight:normal;
	border-top-width: 1px;
	border-right-width: 20px;
	border-bottom-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-top-color: #CCCCCC;
	border-right-color: #FEA500;
	border-bottom-color: #CCCCCC;
}	

h3 {
	margin:0;
	padding:0;
	color: #FFA600;
	font-size: 2em;
	font-weight:bold;
}
.CarteCandidat {
	margin-top: 0px;
	margin-bottom: 15px;
}


.Depot-annonce
{
	display:block;
	
	width:224px;
	height:60px;
	background:url("../media_v2/annonce.gif") no-repeat;
	text-decoration:none;
	float: right;
	vertical-align: middle;
}
.Depot-annonce:hover
{
	background-position:-224px top;
	text-decoration:none;
	display: block;
	float: right;
	vertical-align: middle;
}
.Depot-cv
{
	display:block;
	float:left;
	width:217px;
	height:40px;
	background:url("../media_v2/cv.gif") no-repeat;
	text-decoration:none;
	float: left;
	margin-top: 50px;
}
.Depot-cv:hover
{
	background-position:-217px top;
	text-decoration:none;
	display: block;
	float: left;
	margin-top: 50px;
}

.inscription
{
	display:block;
	float:left;
	width:217px;
	height:40px;
	background:url("../media_v2/inscription.gif") no-repeat;
	text-decoration:none;
	float: left;
	margin-top: 50px;
}
.inscription:hover
{
	background-position:-217px top;
	text-decoration:none;
	display: block;
	float: left;
	margin-top: 50px;
}

.Depot-cv-alerte
{
	display:block;
	float:left;
	width:217px;
	height:40px;
	background:url("../media_v2/cv.gif") no-repeat;
	text-decoration:none;
	vertical-align: middle;
	
	
}
.Depot-cv-alerte:hover
{
	background-position:-217px top;
	text-decoration:none;
	display: block;
	float: left;
	vertical-align: middle;
	
}
.Depot-annonce2
{
	display:block;
	width:217px;
	height:40px;
	background:url("../media_v2/annonce2.gif") no-repeat;
	text-decoration:none;
	float: right;
	vertical-align: middle;

}
.Depot-annonce2:hover
{
	background-position:-215px top;
	text-decoration:none;
	display: block;
	float: right;
	vertical-align: middle;

}
.pagination {
	font-size: 12px;
	margin: 3px;
	padding: 5px;
}