/* Start of CMSMS style sheet 'Layout: Ecovia' */
/*****************
browsers interpret margin and padding a little differently, 
we'll remove all default padding and margins and
set them later on
******************/
* {
margin:0;
padding:0;
}

/*
Set initial font styles
*/
body {
   text-align: left;
   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
   font-size: 75.01%;
   line-height: 1em;
}

/*
set font size for all divs,
this overrides some body rules
*/
div {
   font-size: 1em;
}

/*
if img is inside "a" it would have 
borders, we don't want that
*/
img {
   border: 0;
}

/*
default link styles
*/
/* set all links to have underline and bluish color */
a {
   text-decoration: underline;
/* css validation will give a warning if color is set without background color. this will explicitly tell this element to inherit bg colour from parent element */
   color: #E5371E; 
}


/* remove underline on hover and change color */
a:hover {
   text-decoration: none;
   color: #E5371E;
}
a.pdf, a.pdfmain{ padding: 5px 0;color: #333!important;}
a.pdfmain {line-height: 1.2em;}
.couleur {color: #E63B1C!important;font-size: 1.09em!important;}
/*****************
basic layout 
*****************/
body {
   background: #F3F3F3 url(images/bg-body.jpg) repeat-x;
   color: #333;
}

/* center wrapper, min max width */
div#pagewrapper {
   margin: 0 auto;     /* this centers wrapper */
   width: 1000px;
}


/*** header ***
we will hide text and replace it with a image
we need to assign a height for it
*/

div#top {
	background: url(images/bg-header.jpg) repeat-y center top;
}

	div#header {
	   height: 74px; /* adjust according your image size */    
		margin: 0 auto;
		width: 1000px;
		overflow: hidden;
	}
		div#header #positionnement {position: absolute;margin: 29px 0 0 20px;}
		div#header h1{
			background: url(images/logo-ecovia.png) no-repeat;
			height: 92px; 
			width: 264px;
			
			
		}
			div#header h1 a {
			/* you can set your own image here */
				display: block; 
				height: 92px; 
				width: 264px;
				text-indent: -999em;  /* this hides the text */
				text-decoration:none; /* old firefox would have shown underline for the link, this explicitly hides it */
				
				
			}
		
		div#langues {
			padding-top: 13px;
			float: right;
			margin-right: 13px;
		}

div#search {
   float: right;
   width: 27em;     /* enough width for the search input box */
   text-align: right;
   padding: 0.6em 0 0.2em 0;
   margin: 0 1em;
}

div.breadcrumbs {
   padding: 0 0 1.2em 0; /* CSS short hand rule first value is top then right, bottom and left */
   font-size: 90%;             /* its good to set fontsizes to be relative, this way viewer can change his/her fontsize */
   text-align: right;
   color: #A9A7A7;
}
div.breadcrumbs a {color: #A9A7A7!important;text-decoration: none!important;}
div.breadcrumbs a:hover {text-decoration: underline;}
 div.breadcrumbs span.lastitem { 
   
 }


div#content {
   margin: 0 auto 2em 0;
   background: url(images/bg-content.png) repeat-y right top;
   overflow: hidden;
   height: 1%;
}

div#centre{
	background: #fff;
	/*margin: 0 0 0 250px;*/
        overflow: hidden;
        height: 1%;
        width: 750px;
        float: right;
}
div#main {
   margin-left: 0; /* this will give room for sidebar to be on the left side, make sure this space is bigger than sidebar width */
   background: #fff;
   padding: 11px 16px 0 26px;
  overflow: hidden;
  height: 1%;
}
div#main #colonne3 {width: 240px;float: right;}
#colonne3 #visu-produit {margin-bottom: 11px;}
#colonne3 .block {background: #E4E4E4 url(images/block-bottom.png) no-repeat bottom;padding-bottom: 11px; margin: 10px 0;}
#colonne3 .block h3 {background: #E4E4E4 url(images/block-top.png) no-repeat top;padding: 11px 12px 0;}
#colonne3 .block p, #colonne3 .block ul {margin: 0 12px 5px; line-height: 1.2em;}
#colonne3 .block  a{color: #333; text-decoration: none;}
#colonne3 .block a:hover{color: #E5371E}
#colonne3 #block-choix ul {margin: 0 18px 5px;}
#colonne3 #block-choix ul li {margin: 0; border-bottom: 1px solid #fff; list-style-type: none; padding: 5px 0 5px 8px;background: url(images/puce-noire.png) no-repeat left 8px}

#colonne3 #block-pdf {overflow: hidden;}
#colonne3 #block-pdf ul {}
#colonne3 #block-pdf ul li{list-style-type: none;margin: 10px 0;padding-left: 20px; position: relative;}
#colonne3 #block-pdf ul li img {position: absolute; margin-left: -20px;}
#colonne3 #block-pdf af{ padding: 3px 0;}
div#mainCentre{
	margin: 0 273px 0 0;
	padding: 11px 0 0 26px;
}
div#contenu {margin-right: 270px;}
div#sidebar, div#sidebarLeft {
   float: left;  
   width: 250px;  
   display: inline;  /* FIX ie doublemargin bug */
   margin: 60px 0 0;
   font-size: 1.09em;
}
#adresse {background: url(images/curve.png) no-repeat 35px bottom; padding:0 0 105px 35px;}
#adresse p{margin: 2px 0;}
#adresse p#tel {margin: 5px 0}
div#sidebarLeft #adresse a{color: #333;font-size: 0.92em}

div#sidebarRight {
	width: 265px;
	float: right;
	font-size: 1.09em;
}
	div#sidebarRight #block{
		background: #F3F3F3;
		padding-top: 11px;
	}
	div#sidebarRight p{
		color: #525252;
		font-size: 0.92em;
		padding: 0 15px 1.5em;
		line-height: 1.1em;
		margin: 0;
	}
	div#nav-metiers {margin-bottom: 15px;}
	div#sidebarRight #nav-metiers  .vignette{
		display: block;
		width: 264px;
		height: 78px;
		position: relative;
		color: #fff;
		text-decoration: none;
                z-index: 1

	}
	
	div#sidebarRight #nav-metiers .vignette span {
		position: absolute;
		bottom:5px;
		right: 5px;
		line-height: 1em;
		font-family: Arial, Verdana, sans-serif;
		text-align: right;
		font-weight: 600;
	}
/* if sidebar doesnt include menu but content add class="hascontent" */
div#sidebar.hascontent {
   padding: 0 1%;
   width: 24%;  /* make width smaller if there's padding, or it will get too wide for the floated divs in IE */
}

div#footer {
    /*clear:both;       */
   color: #666;
   padding: 0 5px 0 258px;
   margin: 0 0 20px 0;
}
div#footer #rainbow {float: right;}
div#footer p {
   font-size: 0.83em;
   padding: 0 0 8px;      /* some air for footer */
   margin:0;
   line-height: 150%;
}

div#footer p a {
   color: #666; 
   text-decoration: none;
}
div#footer p a:hover {
	color: #E5371E;
}
/* as we hid all hr for accessibility we create new hr with extra div element */
div.hr {
   height: 1px;
   margin: 1.8em 0;
   border-bottom: 1px solid #d1d1d1;
}

/* relational links under content */
div.left49 {
  float: left;
  width: 49%;  /* 50% for both left and right might lead to rounding error on some browser */
}

div.right49 {
  float: right;
  width: 49%;
  text-align: right;
}




/********************
CONTENT STYLING
*********************/
div#content {
	font-size: 0.92em;
}

/* HEADINGS */
div#content h1 {
   font-size: 2em;  /* font size for h1 */
   line-height: 1em;
   margin: 0;
}
div#content h2 {
   color: #E63A1D; 
   font-size: 1.91em; 
   font-weight: 500;
   text-align: left; 
/* some air around the text */
   padding-bottom: 1px;
   line-height: 1.5em;
/* and some air under the border */
   margin: 0 0 12px 0;
}
div#content h2#titre-accueil {color: #333;margin: 25px 0 5px;}
div#content h2#titre-accueil span {font-size: 0.67em;}
div#content h3 {
   color: #333; 
   font-size: 1.27em;
   line-height: 1.3em;
   margin: 0 0 12px 0;
}
div#content h3 span {display: block;font-size: 2em;font-family: Trebuchet MS, Verdana, Helvetica, sans-serif;text-transform:uppercase; line-height: 0.9em;}
div#sidebarRight h3{
	font-size: 1em!important; 
	color: #333;
	padding: 0 15px;
	line-height: 1em;
}
.couleur{
	color: #E63B1C;
}
div#colonne3 h3{color: #333; font-size: 1em; margin: 0 0 7px;}
div#content h4 {
   color: #E5361F; 
   font-size: 1.09em;
   line-height: 1.1em;
   margin: 2.2em 0 8px 10px;
   background: url(images/puce-orange.png) no-repeat left 5px;
   padding-left: 10px;
}
div#content h5 {
   font-size: 1.1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
h6 {
   font-size: 1em;
   line-height: 1.3em;
   margin: 0 0 0.25em 0;
}
/* END HEADINGS */

/* TEXT */
p {
   font-size: 1em;
   margin: 0 0 1.5em 0;  /* some air around p elements */
   line-height:1.4em;
   padding: 0;
}
blockquote {
   border-left: 10px solid #ddd;
   margin-left: 10px;
}
pre {
   font-family: monospace;
   font-size: 1.0em;
}
strong, b {
/* explicit setting for these */
   font-weight: bold;
}
em, i {
/* explicit setting for these */
   font-style:italic;
}

/* END TEXT */

/* LISTS */
div#main ul,
div#mainCentre ul,
div#main ol,
div#mainCentre ol,
div#main dl,
div#mainCentre dl  {
  font-size: 1.0em;
   line-height:1.4em;
   margin: 0 0 1.5em 0;
}
div#main ul li,
div#mainCentre ul li,
div#main ol li, 
div#mainCentre ol li {
   margin: 0 0 0.25em 10px;
   padding-left: 8px;
   background: url(images/puce-noire.png) no-repeat left 5px;
   list-style-type: none;
}
div#main ul ul li,
div#mainCentre ul ul li {
   margin: 0 0 0.25em 10px;
   padding-left: 8px;
   background: url(images/puce-arrow-orange.png) no-repeat left 6px;
   list-style-type: none;
}
div#colonne3 #block-pdf ul li {background: none!important;}
div#dl dt {
   font-weight: bold;
   margin: 0 0 0.25em 3em;
}
div#dl dd {
   margin: 0 0 0 3em;
}
/* END LISTS */

/****** ACCUEIL **********/
div .bloc-accueil {float: left; margin: 22px 0; padding: 5px 0;}
div .bloc-accueil p {margin: 0;}
div#secteur {padding-right: 2%;width: 42%; border-right: 1px solid #D1D1D1}
div#contact {width: 52%; padding-left:3%; }
div#contact a{color: #E5371E}

div#metiers-accueil {font-family: Arial, Verdana, Helvetica;font-size: 1.08em;}
div#metiers-accueil .vignette {width: 115px; float: left; margin-left: 2px;position: relative; text-align: right; color: #333; text-decoration: none; opacity: 0.85; filter : alpha(opacity=85); }
div#metiers-accueil .vignette:hover {opacity: 1; filter : alpha(opacity=100); }
div#metiers-accueil .vignette span {position: absolute; top: 75px; right: 5px;}

div#menu-produits {margin-top: 20px;}
div#menu-produits a{color: #E5371E}
div#menu-produits .bloc33, div#menu-produits .bloc33l {width: 29%; float: left;margin: 0 0 60px 0; padding: 20px 2% 60px; border-right: 1px solid #d4d4d4;}
div#menu-produits .bloc33 h4, div#menu-produits .bloc33l h4 {text-transform: uppercase; font-size: 1.27em; color: #333; margin: 0 0 5px; background: none!important;padding-left: 0!important;}
.fitted {cursor: pointer;}
.hovered a {text-decoration: none;}
div#menu-produits div#last-bloc {border-right: 0 none;}
div#menu-produits .bloc33 img, div#menu-produits .bloc33l img {margin-top: 20px;}
div#menu-produits .bloc33 p, div#menu-produits .bloc33l p{margin: 0 0 1em 0;}



table {border-collapse: collapse; line-height: 1.1em;}
table p {line-height: 1em;}
table th, td {}
tr{border: 1px solid #d1d1d1}
td, th {border: 1px dotted #d1d1d1; padding: 5px; } 

/***** PAGE METIERS *****/
div.visu-metier {width: 105px; height: 106px;float: right; padding: 76px 5px 0 0; text-align: right;}
div.visu-metier p {line-height: 1.1em; margin: 0;font-size: 1.04em; font-family: Arial,Verdana,Helvetica,sans-serif}
.note {font-size: smaller; font-style: italic; padding-left: 10px;margin:0}
div.note {text-align: right;padding-left: 0px;}
table .note {padding-left: 0;}



/* End of 'Layout: Ecovia' */