/* cmsms stylesheet: SpryMenuBar modified: 20/07/2016 20:39:19 */
@charset "UTF-8";

/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	font-family: rosarioregular;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	list-style-type: none;
	position: relative;
	cursor: pointer;
	float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	position: absolute;
	left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin-top: -5%;
	margin-left: 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	color: #FFF;
	text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover
{
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
}
ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
}
.nav .nav_container #MenuBar1 li a.MenuBarItemSubmenu{
	background-repeat: no-repeat;
	background-position: left top;
	padding-right: 18px;
	padding-left: 18px;
	padding-top: 14px;
	padding-bottom: 14px;
	height: 30px;
	font-size: 8.6pt;
	color: #FFF;
	text-align: center;
	background-image: url(../IMAGES_OK/menu_horizontal_fond_et_over.jpg);
}
.nav .nav_container #MenuBar1 li.actif a.MenuBarItemSubmenu {
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-right: 18px;
	padding-left: 18px;
	padding-top: 14px;
	padding-bottom: 14px;
	height: 30px;
	font-size: 8.6pt;
	color: #FFF;
	text-align: center;
	background-image: url(../IMAGES_OK/menu_horizontal_fond_et_over.jpg);
}
.nav .nav_container #MenuBar1 li a.MenuBarItemSubmenuHover {
	background-image: url(../IMAGES_OK/menu_horizontal_fond_et_over.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
}
.nav .nav_container #MenuBar1 li.image {
	background-image: url(../IMAGES_OK/menu_horizontal_fond_et_over.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}
.nav .nav_container #MenuBar1 li .shadow.MenuBarSubmenuVisible {
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	width: 254px;
	padding-bottom: 5px;
}
.nav .nav_container #MenuBar1 li .MenuBarSubmenuVisible li {
	background-repeat: repeat;
	background-position: left bottom;
	font-size: 10pt;
	text-align: left;
	background-image: url(../IMAGES_OK/menu_horizontal_deploiement01.jpg);
}
.nav .nav_container #MenuBar1 li .MenuBarSubmenuVisible li a {
	padding-left: 30px;
	padding-top: 8px;
	padding-right: 0px;
	padding-bottom: 8px;
	width: 220px;
	margin: 0px;
}
a.last-menu {
padding-left:5px
padding-top:0px;
padding-right:0px;
padding-bottom:5px;
}
.nav .nav_container #MenuBar1 li .MenuBarSubmenuVisible li a:hover {
	background-image: url(../IMAGES_OK/menu_horizontal_deploiement_over.jpg);
	background-position: left top;
	background-repeat: repeat;
}
/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
	filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
	display: inline;
	f\loat: left;
	background: #FFF;
	}
}
/* cmsms stylesheet: SpryMenuBar_0 modified: 19/07/2016 10:49:36 */
(function() { // BeginSpryComponent

if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};

Spry.BrowserSniff = function()
{
	var b = navigator.appName.toString();
	var up = navigator.platform.toString();
	var ua = navigator.userAgent.toString();

	this.mozilla = this.ie = this.opera = this.safari = false;
	var re_opera = /Opera.([0-9\.]*)/i;
	var re_msie = /MSIE.([0-9\.]*)/i;
	var re_gecko = /gecko/i;
	var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
	var r = false;

	if ( (r = ua.match(re_opera))) {
		this.opera = true;
		this.version = parseFloat(r[1]);
	} else if ( (r = ua.match(re_msie))) {
		this.ie = true;
		this.version = parseFloat(r[1]);
	} else if ( (r = ua.match(re_safari))) {
		this.safari = true;
		this.version = parseFloat(r[2]);
	} else if (ua.match(re_gecko)) {
		var re_gecko_version = /rv:\s*([0-9\.]+)/i;
		r = ua.match(re_gecko_version);
		this.mozilla = true;
		this.version = parseFloat(r[1]);
	}
	this.windows = this.mac = this.linux = false;

	this.Platform = ua.match(/windows/i) ? "windows" :
					(ua.match(/linux/i) ? "linux" :
					(ua.match(/mac/i) ? "mac" :
					ua.match(/unix/i)? "unix" : "unknown"));
	this[this.Platform] = true;
	this.v = this.version;

	if (this.safari && this.mac && this.mozilla) {
		this.mozilla = false;
	}
};

Spry.is = new Spry.BrowserSniff();

// Constructor for Menu Bar
// element should be an ID of an unordered list (<ul> tag)
// preloadImage1 and preloadImage2 are images for the rollover state of a menu
Spry.Widget.MenuBar = function(element, opts)
{
	this.init(element, opts);
};

Spry.Widget.MenuBar.prototype.init = function(element, opts)
{
	this.element = this.getElement(element);

	// represents the current (sub)menu we are operating on
	this.currMenu = null;
	this.showDelay = 250;
	this.hideDelay = 600;
	if(typeof document.getElementById == 'undefined' || (navigator.vendor == 'Apple Computer, Inc.' && typeof window.XMLHttpRequest == 'undefined') || (Spry.is.ie && typeof document.uniqueID == 'undefined'))
	{
		// bail on older unsupported browsers
		return;
	}

	// Fix IE6 CSS images flicker
	if (Spry.is.ie && Spry.is.version < 7){
		try {
			document.execCommand("BackgroundImageCache", false, true);
		} catch(err) {}
	}

	this.upKeyCode = Spry.Widget.MenuBar.KEY_UP;
	this.downKeyCode = Spry.Widget.MenuBar.KEY_DOWN;
	this.leftKeyCode = Spry.Widget.MenuBar.KEY_LEFT;
	this.rightKeyCode = Spry.Widget.MenuBar.KEY_RIGHT;
	this.escKeyCode = Spry.Widget.MenuBar.KEY_ESC;

	this.hoverClass = 'MenuBarItemHover';
	this.subHoverClass = 'MenuBarItemSubmenuHover';
	this.subVisibleClass ='MenuBarSubmenuVisible';
	this.hasSubClass = 'MenuBarItemSubmenu';
	this.activeClass = 'MenuBarActive';
	this.isieClass = 'MenuBarItemIE';
	this.verticalClass = 'MenuBarVertical';
	this.horizontalClass = 'MenuBarHorizontal';
	this.enableKeyboardNavigation = true;

	this.hasFocus = false;
	// load hover images now
	if(opts)
	{
		for(var k in opts)
		{
			if (typeof this[k] == 'undefined')
			{
				var rollover = new Image;
				rollover.src = opts[k];
			}
		}
		Spry.Widget.MenuBar.setOptions(this, opts);
	}

	// safari doesn't support tabindex
	if (Spry.is.safari)
		this.enableKeyboardNavigation = false;

	if(this.element)
	{
		this.currMenu = this.element;
		var items = this.element.getElementsByTagName('li');
		for(var i=0; i<items.length; i++)
		{
			if (i > 0 && this.enableKeyboardNavigation)
				items[i].getElementsByTagName('a')[0].tabIndex='-1';

			this.initialize(items[i], element);
			if(Spry.is.ie)
			{
				this.addClassName(items[i], this.isieClass);
				items[i].style.position = "static";
			}
		}
		if (this.enableKeyboardNavigation)
		{
			var self = this;
			this.addEventListener(document, 'keydown', function(e){self.keyDown(e); }, false);
		}

		if(Spry.is.ie)
		{
			if(this.hasClassName(this.element, this.verticalClass))
			{
				this.element.style.position = "relative";
			}
			var linkitems = this.element.getElementsByTagName('a');
			for(var i=0; i<linkitems.length; i++)
			{
				linkitems[i].style.position = "relative";
			}
		}
	}
};
Spry.Widget.MenuBar.KEY_ESC = 27;
Spry.Widget.MenuBar.KEY_UP = 38;
Spry.Widget.MenuBar.KEY_DOWN = 40;
Spry.Widget.MenuBar.KEY_LEFT = 37;
Spry.Widget.MenuBar.KEY_RIGHT = 39;

Spry.Widget.MenuBar.prototype.getElement = function(ele)
{
	if (ele && typeof ele == "string")
		return document.getElementById(ele);
	return ele;
};

Spry.Widget.MenuBar.prototype.hasClassName = function(ele, className)
{
	if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
	{
		return false;
	}
	return true;
};

Spry.Widget.MenuBar.prototype.addClassName = function(ele, className)
{
	if (!ele || !className || this.hasClassName(ele, className))
		return;
	ele.className += (ele.className ? " " : "") + className;
};

Spry.Widget.MenuBar.prototype.removeClassName = function(ele, className)
{
	if (!ele || !className || !this.hasClassName(ele, className))
		return;
	ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
};

// addEventListener for Menu Bar
// attach an event to a tag without creating obtrusive HTML code
Spry.Widget.MenuBar.prototype.addEventListener = function(element, eventType, handler, capture)
{
	try
	{
		if (element.addEventListener)
		{
			element.addEventListener(eventType, handler, capture);
		}
		else if (element.attachEvent)
		{
			element.attachEvent('on' + eventType, handler);
		}
	}
	catch (e) {}
};

// createIframeLayer for Menu Bar
// creates an IFRAME underneath a menu so that it will show above form controls and ActiveX
Spry.Widget.MenuBar.prototype.createIframeLayer = function(menu)
{
	var layer = document.createElement('iframe');
	layer.tabIndex = '-1';
	layer.src = 'javascript:""';
	layer.frameBorder = '0';
	layer.scrolling = 'no';
	menu.parentNode.appendChild(layer);
	
	layer.style.left = menu.offsetLeft + 'px';
	layer.style.top = menu.offsetTop + 'px';
	layer.style.width = menu.offsetWidth + 'px';
	layer.style.height = menu.offsetHeight + 'px';
};

// removeIframeLayer for Menu Bar
// removes an IFRAME underneath a menu to reveal any form controls and ActiveX
Spry.Widget.MenuBar.prototype.removeIframeLayer =  function(menu)
{
	var layers = ((menu == this.element) ? menu : menu.parentNode).getElementsByTagName('iframe');
	while(layers.length > 0)
	{
		layers[0].parentNode.removeChild(layers[0]);
	}
};

// clearMenus for Menu Bar
// root is the top level unordered list (<ul> tag)
Spry.Widget.MenuBar.prototype.clearMenus = function(root)
{
	var menus = root.getElementsByTagName('ul');
	for(var i=0; i<menus.length; i++)
		this.hideSubmenu(menus[i]);

	this.removeClassName(this.element, this.activeClass);
};

// bubbledTextEvent for Menu Bar
// identify bubbled up text events in Safari so we can ignore them
Spry.Widget.MenuBar.prototype.bubbledTextEvent = function()
{
	return Spry.is.safari && (event.target == event.relatedTarget.parentNode || (event.eventPhase == 3 && event.target.parentNode == event.relatedTarget));
};

// showSubmenu for Menu Bar
// set the proper CSS class on this menu to show it
Spry.Widget.MenuBar.prototype.showSubmenu = function(menu)
{
	if(this.currMenu)
	{
		this.clearMenus(this.currMenu);
		this.currMenu = null;
	}
	
	if(menu)
	{
		this.addClassName(menu, this.subVisibleClass);
		if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
		{
			if(!this.hasClassName(this.element, this.horizontalClass) || menu.parentNode.parentNode != this.element)
			{
				menu.style.top = menu.parentNode.offsetTop + 'px';
			}
		}
		if(Spry.is.ie && Spry.is.version < 7)
		{
			this.createIframeLayer(menu);
		}
	}
	this.addClassName(this.element, this.activeClass);
};

// hideSubmenu for Menu Bar
// remove the proper CSS class on this menu to hide it
Spry.Widget.MenuBar.prototype.hideSubmenu = function(menu)
{
	if(menu)
	{
		this.removeClassName(menu, this.subVisibleClass);
		if(typeof document.all != 'undefined' && !Spry.is.opera && navigator.vendor != 'KDE')
		{
			menu.style.top = '';
			menu.style.left = '';
		}
		if(Spry.is.ie && Spry.is.version < 7)
			this.removeIframeLayer(menu);
	}
};

// initialize for Menu Bar
// create event listeners for the Menu Bar widget so we can properly
// show and hide submenus
Spry.Widget.MenuBar.prototype.initialize = function(listitem, element)
{
	var opentime, closetime;
	var link = listitem.getElementsByTagName('a')[0];
	var submenus = listitem.getElementsByTagName('ul');
	var menu = (submenus.length > 0 ? submenus[0] : null);

	if(menu)
		this.addClassName(link, this.hasSubClass);

	if(!Spry.is.ie)
	{
		// define a simple function that comes standard in IE to determine
		// if a node is within another node
		listitem.contains = function(testNode)
		{
			// this refers to the list item
			if(testNode == null)
				return false;

			if(testNode == this)
				return true;
			else
				return this.contains(testNode.parentNode);
		};
	}

	// need to save this for scope further down
	var self = this;
	this.addEventListener(listitem, 'mouseover', function(e){self.mouseOver(listitem, e);}, false);
	this.addEventListener(listitem, 'mouseout', function(e){if (self.enableKeyboardNavigation) self.clearSelection(); self.mouseOut(listitem, e);}, false);

	if (this.enableKeyboardNavigation)
	{
		this.addEventListener(link, 'blur', function(e){self.onBlur(listitem);}, false);
		this.addEventListener(link, 'focus', function(e){self.keyFocus(listitem, e);}, false);
	}
};
Spry.Widget.MenuBar.prototype.keyFocus = function (listitem, e)
{
	this.lastOpen = listitem.getElementsByTagName('a')[0];
	this.addClassName(this.lastOpen, listitem.getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
	this.hasFocus = true;
};
Spry.Widget.MenuBar.prototype.onBlur = function (listitem)
{
	this.clearSelection(listitem);
};
Spry.Widget.MenuBar.prototype.clearSelection = function(el){
	//search any intersection with the current open element
	if (!this.lastOpen)
		return;

	if (el)
	{
		el = el.getElementsByTagName('a')[0];
		
		// check children
		var item = this.lastOpen;
		while (item != this.element)
		{
			var tmp = el;
			while (tmp != this.element)
			{
				if (tmp == item)
					return;
				try{
					tmp = tmp.parentNode;
				}catch(err){break;}
			}
			item = item.parentNode;
		}
	}
	var item = this.lastOpen;
	while (item != this.element)
	{
		this.hideSubmenu(item.parentNode);
		var link = item.getElementsByTagName('a')[0];
		this.removeClassName(link, this.hoverClass);
		this.removeClassName(link, this.subHoverClass);
		item = item.parentNode;
	}
	this.lastOpen = false;
};
Spry.Widget.MenuBar.prototype.keyDown = function (e)
{
	if (!this.hasFocus)
		return;

	if (!this.lastOpen)
	{
		this.hasFocus = false;
		return;
	}

	var e = e|| event;
	var listitem = this.lastOpen.parentNode;
	var link = this.lastOpen;
	var submenus = listitem.getElementsByTagName('ul');
	var menu = (submenus.length > 0 ? submenus[0] : null);
	var hasSubMenu = (menu) ? true : false;

	var opts = [listitem, menu, null, this.getSibling(listitem, 'previousSibling'), this.getSibling(listitem, 'nextSibling')];
	
	if (!opts[3])
		opts[2] = (listitem.parentNode.parentNode.nodeName.toLowerCase() == 'li')?listitem.parentNode.parentNode:null;

	var found = 0;
	switch (e.keyCode){
		case this.upKeyCode:
			found = this.getElementForKey(opts, 'y', 1);
			break;
		case this.downKeyCode:
			found = this.getElementForKey(opts, 'y', -1);
			break;
		case this.leftKeyCode:
			found = this.getElementForKey(opts, 'x', 1);
			break;
		case this.rightKeyCode:
			found = this.getElementForKey(opts, 'x', -1);
			break;
		case this.escKeyCode:
		case 9:
			this.clearSelection();
			this.hasFocus = false;
		default: return;
	}
	switch (found)
	{
		case 0: return;
		case 1:
			//subopts
			this.mouseOver(listitem, e);
			break;
		case 2:
			//parent
			this.mouseOut(opts[2], e);
			break;
		case 3:
		case 4:
			// left - right
			this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
			break;
	}
	var link = opts[found].getElementsByTagName('a')[0];
	if (opts[found].nodeName.toLowerCase() == 'ul')
		opts[found] = opts[found].getElementsByTagName('li')[0];

	this.addClassName(link, opts[found].getElementsByTagName('ul').length > 0 ? this.subHoverClass : this.hoverClass);
	this.lastOpen = link;
	opts[found].getElementsByTagName('a')[0].focus();
  
        //stop further event handling by the browser
	return Spry.Widget.MenuBar.stopPropagation(e);
};
Spry.Widget.MenuBar.prototype.mouseOver = function (listitem, e)
{
	var link = listitem.getElementsByTagName('a')[0];
	var submenus = listitem.getElementsByTagName('ul');
	var menu = (submenus.length > 0 ? submenus[0] : null);
	var hasSubMenu = (menu) ? true : false;
	if (this.enableKeyboardNavigation)
		this.clearSelection(listitem);

	if(this.bubbledTextEvent())
	{
		// ignore bubbled text events
		return;
	}

	if (listitem.closetime)
		clearTimeout(listitem.closetime);

	if(this.currMenu == listitem)
	{
		this.currMenu = null;
	}

	// move the focus too
	if (this.hasFocus)
		link.focus();

	// show menu highlighting
	this.addClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
	this.lastOpen = link;
	if(menu && !this.hasClassName(menu, this.subHoverClass))
	{
		var self = this;
		listitem.opentime = window.setTimeout(function(){self.showSubmenu(menu);}, this.showDelay);
	}
};
Spry.Widget.MenuBar.prototype.mouseOut = function (listitem, e)
{
	var link = listitem.getElementsByTagName('a')[0];
	var submenus = listitem.getElementsByTagName('ul');
	var menu = (submenus.length > 0 ? submenus[0] : null);
	var hasSubMenu = (menu) ? true : false;
	if(this.bubbledTextEvent())
	{
		// ignore bubbled text events
		return;
	}

	var related = (typeof e.relatedTarget != 'undefined' ? e.relatedTarget : e.toElement);
	if(!listitem.contains(related))
	{
		if (listitem.opentime) 
			clearTimeout(listitem.opentime);
		this.currMenu = listitem;

		// remove menu highlighting
		this.removeClassName(link, hasSubMenu ? this.subHoverClass : this.hoverClass);
		if(menu)
		{
			var self = this;
			listitem.closetime = window.setTimeout(function(){self.hideSubmenu(menu);}, this.hideDelay);
		}
		if (this.hasFocus)
			link.blur();
	}
};
Spry.Widget.MenuBar.prototype.getSibling = function(element, sibling)
{
	var child = element[sibling];
	while (child && child.nodeName.toLowerCase() !='li')
		child = child[sibling];

	return child;
};
Spry.Widget.MenuBar.prototype.getElementForKey = function(els, prop, dir)
{
	var found = 0;
	var rect = Spry.Widget.MenuBar.getPosition;
	var ref = rect(els[found]);

	var hideSubmenu = false;
	//make the subelement visible to compute the position
	if (els[1] && !this.hasClassName(els[1], this.MenuBarSubmenuVisible))
	{
		els[1].style.visibility = 'hidden';
		this.showSubmenu(els[1]);
		hideSubmenu = true;
	}

	var isVert = this.hasClassName(this.element, this.verticalClass);
	var hasParent = els[0].parentNode.parentNode.nodeName.toLowerCase() == 'li' ? true : false;
	
	for (var i = 1; i < els.length; i++){
		//when navigating on the y axis in vertical menus, ignore children and parents
		if(prop=='y' && isVert && (i==1 || i==2))
		{
			continue;
		}
		//when navigationg on the x axis in the FIRST LEVEL of horizontal menus, ignore children and parents
		if(prop=='x' && !isVert && !hasParent && (i==1 || i==2))
		{
			continue;
		}
			
		if (els[i])
		{
			var tmp = rect(els[i]); 
			if ( (dir * tmp[prop]) < (dir * ref[prop]))
			{
				ref = tmp;
				found = i;
			}
		}
	}
	
	// hide back the submenu
	if (els[1] && hideSubmenu){
		this.hideSubmenu(els[1]);
		els[1].style.visibility =  '';
	}

	return found;
};
Spry.Widget.MenuBar.camelize = function(str)
{
	if (str.indexOf('-') == -1){
		return str;	
	}
	var oStringList = str.split('-');
	var isFirstEntry = true;
	var camelizedString = '';

	for(var i=0; i < oStringList.length; i++)
	{
		if(oStringList[i].length>0)
		{
			if(isFirstEntry)
			{
				camelizedString = oStringList[i];
				isFirstEntry = false;
			}
			else
			{
				var s = oStringList[i];
				camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
			}
		}
	}

	return camelizedString;
};

Spry.Widget.MenuBar.getStyleProp = function(element, prop)
{
	var value;
	try
	{
		if (element.style)
			value = element.style[Spry.Widget.MenuBar.camelize(prop)];

		if (!value)
			if (document.defaultView && document.defaultView.getComputedStyle)
			{
				var css = document.defaultView.getComputedStyle(element, null);
				value = css ? css.getPropertyValue(prop) : null;
			}
			else if (element.currentStyle) 
			{
					value = element.currentStyle[Spry.Widget.MenuBar.camelize(prop)];
			}
	}
	catch (e) {}

	return value == 'auto' ? null : value;
};
Spry.Widget.MenuBar.getIntProp = function(element, prop)
{
	var a = parseInt(Spry.Widget.MenuBar.getStyleProp(element, prop),10);
	if (isNaN(a))
		return 0;
	return a;
};

Spry.Widget.MenuBar.getPosition = function(el, doc)
{
	doc = doc || document;
	if (typeof(el) == 'string') {
		el = doc.getElementById(el);
	}

	if (!el) {
		return false;
	}

	if (el.parentNode === null || Spry.Widget.MenuBar.getStyleProp(el, 'display') == 'none') {
		//element must be visible to have a box
		return false;
	}

	var ret = {x:0, y:0};
	var parent = null;
	var box;

	if (el.getBoundingClientRect) { // IE
		box = el.getBoundingClientRect();
		var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
		var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
		ret.x = box.left + scrollLeft;
		ret.y = box.top + scrollTop;
	} else if (doc.getBoxObjectFor) { // gecko
		box = doc.getBoxObjectFor(el);
		ret.x = box.x;
		ret.y = box.y;
	} else { // safari/opera
		ret.x = el.offsetLeft;
		ret.y = el.offsetTop;
		parent = el.offsetParent;
		if (parent != el) {
			while (parent) {
				ret.x += parent.offsetLeft;
				ret.y += parent.offsetTop;
				parent = parent.offsetParent;
			}
		}
		// opera & (safari absolute) incorrectly account for body offsetTop
		if (Spry.is.opera || Spry.is.safari && Spry.Widget.MenuBar.getStyleProp(el, 'position') == 'absolute')
			ret.y -= doc.body.offsetTop;
	}
	if (el.parentNode)
			parent = el.parentNode;
	else
		parent = null;
	if (parent.nodeName){
		var cas = parent.nodeName.toUpperCase();
		while (parent && cas != 'BODY' && cas != 'HTML') {
			cas = parent.nodeName.toUpperCase();
			ret.x -= parent.scrollLeft;
			ret.y -= parent.scrollTop;
			if (parent.parentNode)
				parent = parent.parentNode;
			else
				parent = null;
		}
	}
	return ret;
};

Spry.Widget.MenuBar.stopPropagation = function(ev)
{
	if (ev.stopPropagation)
		ev.stopPropagation();
	else
		ev.cancelBubble = true;
	if (ev.preventDefault) 
		ev.preventDefault();
	else 
		ev.returnValue = false;
};

Spry.Widget.MenuBar.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
{
	if (!optionsObj)
		return;
	for (var optionName in optionsObj)
	{
		if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
			continue;
		obj[optionName] = optionsObj[optionName];
	}
};

})(); // EndSpryComponent
/* cmsms stylesheet: SpryPanel modified: 19/07/2016 10:49:36 */
@charset "UTF-8";

/* SpryCollapsiblePanel.css - version 0.5 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main CollapsiblePanel container. For our
 * default style, the CollapsiblePanel is responsible for drawing the borders
 * around the widget.
 *
 * If you want to constrain the width of the CollapsiblePanel widget, set a width on
 * the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill
 * up available space.
 *
 * The name of the class ("CollapsiblePanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * CollapsiblePanel container.
 */
.CollapsiblePanel {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the CollapsiblePanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open or close the panel.
 *
 * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * CollapsiblePanel panel tab container.
 */
.CollapsiblePanelTab {
	margin: 0px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	background-image: url(../IMAGES_OK/menu_horizontal_deploiement01.jpg);
	background-repeat: repeat;
	background-position: left top;
	font-family: rosarioregular;
	font-size: 10pt;
	padding-top: 5px;
	padding-right: 2px;
	padding-bottom: 10px;
	padding-left: 30px;
	width: 218px;
	color: #FFF;
	line-height: 20px;
	text-decoration: none;
	clear: none;
	float: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	list-style-image: none;
	list-style-type: none;
	outline:0;
}

/* An anchor tag can be used inside of a CollapsiblePanelTab so that the
 * keyboard focus ring appears *inside* the tab instead of around the tab.
 * This is an example of how to make the text within the anchor tag look
 * like non-anchor (normal) text.
 */
.CollapsiblePanelTab a {
	text-decoration: none;
	background-image: url(../IMAGES_OK/menu_horizontal_arrow.png);
	background-repeat: no-repeat;
	background-position: left center;
	line-height: 28px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	outline:0;
}

/* This is the selector for a CollapsiblePanel's Content area. It's important to note that
 * you should never put any padding on the content area element if you plan to
 * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
 * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
 *
 * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style a
 * CollapsiblePanel content container.
 */
.CollapsiblePanelContent {
	margin: 0px;
	width: 215px;
	color: #FFF;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 30px;
	background-color: #63bd84;
}
.CollapsiblePanelContent a        {
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
	margin: 0px;
}
.CollapsiblePanelContent a:hover      {
	background-image: none;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color: #168451;
}
.nav .nav_container #MenuBar1 li .shadow.MenuBarSubmenuVisible li .CollapsiblePanelContent a {
	background-image: none;
	margin: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;

}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "CollapsiblePanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the CollapsiblePanel.
 */
.CollapsiblePanelOpen .CollapsiblePanelTab {
	background-image: url(../IMAGES_OK/menu_horizontal_arrow_open.png);
	background-repeat: no-repeat;
	background-position: 10px center;
}

/* This is an example of how to change the appearance of the panel tab when the
 * CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is programatically added and removed
 * whenever the CollapsiblePanel is closed.
 */

.CollapsiblePanelClosed .CollapsiblePanelTab {
	background-image: url(../IMAGES_OK/menu_horizontal_arrow.png);
	background-repeat: no-repeat;
	background-position: 10px center; /* background-color: #EFEFEF */
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.CollapsiblePanelTabHover,  .CollapsiblePanelOpen .CollapsiblePanelTabHover {
	background-image: url(../IMAGES_OK/menu_horizontal_deploiement_over.jpg);
	background-repeat: repeat-x;
	background-position: left bottom;
}
.CollapsiblePanelTabHover, .CollapsiblePanelClosed .CollapsiblePanelTabHover {
	background-image: url(../IMAGES_OK/menu_horizontal_deploiement_over.jpg);
	background-repeat: repeat-x;
	background-position: left bottom;
}

/* This is an example of how to change the appearance of all the panel tabs when the
 * CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed
 * whenever the CollapsiblePanel gains or loses keyboard focus.
 */
.CollapsiblePanelFocused .CollapsiblePanelTab {
}
/* cmsms stylesheet: SpryPanel2 modified: 19/07/2016 10:49:36 */
@charset "UTF-8";
/* SpryCollapsiblePanel.css - version 0.5 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main CollapsiblePanel container. For our
 * default style, the CollapsiblePanel is responsible for drawing the borders
 * around the widget.
 *
 * If you want to constrain the width of the CollapsiblePanel widget, set a width on
 * the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill
 * up available space.
 *
 * The name of the class ("CollapsiblePanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * CollapsiblePanel container.
 */
.CollapsiblePanel2 {
	margin: 0px;
	padding: 0px;
}
/* This is the selector for the CollapsiblePanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open or close the panel.
 *
 * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * CollapsiblePanel panel tab container.
 */
.CollapsiblePanel2Tab {
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	font-family: rosarioregular;
	font-size: 14px;
	outline:0;
}
.CollapsiblePanel2Tab p.vert {
	line-height: 40px;
	height: 40px;
	padding-left: 30px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 5px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	background-image: url(../IMAGES_OK/separation_verte_07.jpg);
	background-position: left bottom;
	background-repeat: no-repeat;
	color: #52b777;
}
.CollapsiblePanel2Tab p:Hover  {
	color: #287245;
	font-family: 'rosariobold';
	text-decoration: none;
}
.CollapsiblePanel2Tab span {
	vertical-align:middle;
	display:inline-block;
	line-height:1.2; /* on rétablit le line-height */
	text-align:left;
	margin-top: 2px;
}
/* This is the selector for a CollapsiblePanel's Content area. It's important to note that
 * you should never put any padding on the content area element if you plan to
 * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
 * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
 *
 * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style a
 * CollapsiblePanel content container.
 */
.CollapsiblePanel2Content {
	margin: 0px;
	padding: 0px;
	background-image: url(../IMAGES_OK/separation_verte_07.jpg);
	background-repeat: no-repeat;
	background-position: 5px bottom;
}
.CollapsiblePanel2Content p {
	color: #52b777;
	padding-left: 35px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
}

.sidebar1 p.ced {
	color: #52b777;
	padding-left: 35px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
}

.CollapsiblePanel2Content p a {
	color: #52b777;
}
.CollapsiblePanel2Content p a:hover {
	color: #287245;
	background-image: none;
	font-family: rosariobold;
	text-decoration: none;
}
/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "CollapsiblePanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the CollapsiblePanel.
 */
.CollapsiblePanelOpen .CollapsiblePanel2Tab {
	font-family: rosariobold;
	color: #287245;
	background-image: url(../IMAGES_OK/fond_over_menu2_03.jpg);
	background-repeat: no-repeat;
	background-position: 5px top;
}
.CollapsiblePanelOpen .CollapsiblePanel2Tab p.vert {
	background-image: url(../IMAGES_OK/fond_over_menu2_03.jpg);
	background-repeat: no-repeat;
	background-position: 5px top;
	font-family: rosariobold;
	color: #287245;
}
/* This is an example of how to change the appearance of the panel tab when the
 * CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is programatically added and removed
 * whenever the CollapsiblePanel is closed.
 */

.CollapsiblePanelClosed .CollapsiblePanel2Tab {
	background-image: url(../IMAGES_OK/menu_horizontal_arrow.png);
	background-repeat: no-repeat;
	background-position: 20px center;
}
/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.CollapsiblePanel2TabHover,  .CollapsiblePanelOpen .CollapsiblePanel2TabHover {
	font-family: rosariobold;
	color: #287245;
	text-decoration: none;
}
.CollapsiblePanel2TabHover, .CollapsiblePanelClosed .CollapsiblePanel2TabHover {
	background-image: url(../IMAGES_OK/menu_horizontal_arrow.png);
	background-repeat: repeat-x;
	background-position: 5px center;
}
/* This is an example of how to change the appearance of all the panel tabs when the
 * CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed
 * whenever the CollapsiblePanel gains or loses keyboard focus.
 */
.CollapsiblePanelFocused .CollapsiblePanel2Tab {
}
/* cmsms stylesheet: Vincent_02_10_bis modified: 19/07/2016 17:59:19 */
@charset "UTF-8";
body {
	margin: 0;
	padding: 0;
	color: #000;
	font-family: rosarioregular;
	font-size: 100%;
	line-height: 1.4;
	background-image: url(../IMAGES_OK/background.jpg);
	background-repeat: repeat-x;
	background-position: left 25px;
}
@font-face {
    font-family: 'rosariobold';
    src: url('../../rosario-bold-webfont.eot');
    src: url('../../rosario-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../../rosario-bold-webfont.woff') format('woff'),
url('../../rosario-bold-webfont.ttf') format('truetype'),
url('../../rosario-bold-webfont.svg#rosariobold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rosarioregular';
    src: url('../../rosario-regular-webfont.eot');
    src: url('../../rosario-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../../rosario-regular-webfont.woff') format('woff'),
url('../../rosario-regular-webfont.ttf') format('truetype'),
url('../../rosario-regular-webfont.svg#rosarioregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rosarioitalic';
    src: url('../../rosario-italic-webfont.eot');
    src: url('../../rosario-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../rosario-italic-webfont.woff') format('woff'),
url('../../rosario-italic-webfont.ttf') format('truetype'),
url('../../rosario-italic-webfont.svg#rosarioitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
a:link, a:visited, a:hover, a:active {
	outline:0;
} 
ul, ol, dl {
	margin: 0px;
	padding: 0px;
}

/* ~~ Ce conteneur à largeur fixe entoure toutes les autres divs ~~ */
.container {
	width: 960px;
	margin: 0 auto;
}
.header01 {
	height: 151px;
	background-image: url(../IMAGES_OK/fond_banniere_01.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0px;
	padding: 0px;
}
.header02 {
	height: 151px;
	background-image: url(../IMAGES_OK/fond_banniere_02.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0px;
	padding: 0px;
}
.header03 {
	height: 151px;
	background-image: url(../IMAGES_OK/fond_banniere_03.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0px;
	padding: 0px;
}
.header04 {
	height: 151px;
	background-image: url(../IMAGES_OK/fond_banniere_04.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0px;
	padding: 0px;
}
.header05 {
	height: 151px;
	background-image: url(../IMAGES_OK/fond_banniere_05.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0px;
	padding: 0px;
}
.header06 {
	height: 151px;
	background-image: url(../IMAGES_OK/fond_banniere_06.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0px;
	padding: 0px;
}
/* ~~ Aucune largeur n'est attribuée à l'en-tête. Il occupera toute la largeur de votre mise en page. Il contient un espace réservé pour une image, qui doit être remplacé par votre logo lié. ~~ */
.header07 {
	height: 151px;
	background-image: url(../IMAGES_OK/fond_banniere_07.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0px;
	padding: 0px;
}
.header08 {
	height: 151px;
	background-image: url(../IMAGES_OK/fond_banniere_08.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0px;
	padding: 0px;
}
.header_container {
	width: 960px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 15px;
}
.nav {
	height: 58px;
	margin: 0px;
	padding: 0px;
	background-image: url(../IMAGES_OK/menu_horizontal_fond.jpg);
	background-repeat: repeat-x;
	background-position: left top;
}
.nav_container {
	width: 970px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}

/* ~~ Colonnes pour la mise en page. ~~ 

1) La marge intérieure n'est placée qu'en haut et/ou en bas des divs. Les éléments à l'intérieur de ces divs posséderont une marge intérieure sur les côtés. Vous évitez ainsi de devoir recourir à des « calculs de modèle de boîte ». N'oubliez pas que si vous ajoutez une marge intérieure latérale ou une bordure à la div proprement dite, elle sera ajoutée à la largeur que vous définissez pour créer la largeur totale. Vous pouvez également supprimer la marge intérieure de l'élément dans la div et placer une seconde div à l'intérieur, sans largeur et possédant une marge intérieure appropriée pour votre concept.

2) Toutes les colonnes étant flottantes, aucune marge ne leur a été attribuée. Si vous devez ajouter une marge, évitez de la placer du côté vers lequel vous effectuez le flottement (par exemple, une marge droite sur une div configurée pour flotter vers la droite). Dans de nombreux cas, vous pouvez plutôt employer une marge intérieure. Pour les divs où cette règle ne peut pas être respectée, ajoutez une déclaration « display:inline » à la règle de la div, afin de contourner un bogue qui amène certaines versions d'Internet Explorer à doubler la marge.

3) Comme des classes peuvent être employées à plusieurs reprises dans un document (et que plusieurs classes peuvent aussi être attribuées à un élément), les colonnes ont reçu des noms de classes au lieu d'ID. Par exemple, deux divs de barre latérale peuvent être empilées si nécessaire. Elles peuvent être très facilement remplacées par des ID si vous le souhaitez, pour autant que vous ne les utilisiez qu'une fois par document.

4) Si vous préférez que la navigation se trouve à droite et pas à gauche, faites flotter ces colonnes en sens opposé (toutes vers la droite au lieu de vers la gauche). Leur rendu s'effectuera dans l'ordre inverse. Il n'est pas nécessaire de déplacer les divs dans le code HTML source.

*/
.sidebar1 {
	float: left;
	width: 232px;
	padding-bottom: 5px;
	margin-top: 20px;
	margin-right: 8px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
}
.sidebar1 .menu_gauche_shadow {
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-bottom: 5px;
	margin-bottom: 10px;
}
.sidebar1 .menu_gauche {
	width: 228px;
	background-color: #FFF;
	background-image: url(../IMAGES_OK/Fond_titre_menu_page_int_03.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	padding-bottom: 10px;
}
.sidebar1 .menu_gauche p.menu {
	line-height: 40px;
	height: 40px;
	color: #52b777;
	background-image: url(../IMAGES_OK/separation_verte_07.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-left: 30px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 5px;
}
.sidebar1 .menu_gauche p.menu a{
	color: #52b777;
}
.sidebar1 .menu_gauche p.menu a:hover {
	color: #287245;
	background-image: none;
	font-family: rosariobold;
	text-decoration: none;
}
.sidebar1 .menu_gauche p.menu span {
	vertical-align:middle;
	display:inline-block;
	line-height:1.2; /* on rétablit le line-height */
	text-align:left;
	margin-top: -5px;
}
.sidebar1 .acces_rapide_shadow {
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-bottom: 5px;
}
.sidebar1 .acces_rapide {
	background-image: url(../IMAGES_OK/menu_gauche_fond_titre01_03.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	width: 228px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	margin: 0px;
	background-color: #FFF;
}
.sidebar1 .telecharger_shadow {
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-bottom: 5px;
	margin-top: 10px;
}
.sidebar1 .telecharger {
	background-image: url(../IMAGES_OK/menu_gauche_fond_titre02_13.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	width: 228px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	margin: 0px;
	background-color: #FFF;
}
.sidebar1 .evenements_shadow {
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-bottom: 5px;
	margin-top: 10px;
}
.sidebar1 .evenements {
	background-image: url(../IMAGES_OK/menu_gauche_fond_titre02_13.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	width: 198px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 30px;
	background-color: #FFF;
	margin: 0px;
}
.sidebar1 .evenements h1 {
	color: #856542;
	font-size: 16px;
	font-weight: normal;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 15px;
	margin-left: -20px;
	line-height: 20px;
}
.sidebar1 .evenements p.gras {
	font-family: rosariobold;
	margin-right: 10px;
}
.sidebar1 .evenements img.cal  {
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: -30px;
	float: left;
}
.sidebar1 .evenements img.sep {
	padding: 0px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: -30px;
}

.sidebar1 .economie_shadow {
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-bottom: 5px;
	margin-top: 10px;
	height: 57px;
	width: 227px;
	padding-right: 5px;
}
.sidebar1 .economie_shadow .economie h1 a {
	color: #85655A;
}
.sidebar1 .economie {
	background-image: url(../IMAGES_OK/menu_gauche_fond_titre02_13.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	width: 228px;
	margin: 0px;
	background-color: #FFF;
	height: 57px;
	padding: 0px;
}
.sidebar1 a  {
	text-decoration: none;
	color: #666666;
}
.sidebar1 a:hover {
	text-decoration: underline;
	color: #666666;
}
.sidebar1 h1  {
	color: #856542;
	font-size: 16px;
	font-weight: normal;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 15px;
	margin-left: 10px;
	line-height: 20px;
}
.sidebar1 h2 {
	font-size: 16px;
	font-weight: normal;
	color: #FFF;
	line-height: 18px;
	height: 48px;
	margin: 0px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
}
.sidebar1 p  {
	color: #666666;
	margin-left: 10px;
	font-size: 14px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	text-align: left;
	line-height: 14px;
}
.sidebar1 p img.separation{
	margin-top: 4px;
	margin-bottom: 7px;
}
.sidebar1 img.picto {
	margin-right: 8px;
}
.content {
	width: 472px;
	float: left;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
}
.content .flash {
	background-image: url(../IMAGES_OK/milieu_flash_news_05.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 28px;
	width: 462px;
	color: #aa9783;
	padding-left: 10px;
	padding-top: 30px;
	font-size: 14px;
}
.content .ariane, .content .breadcrumb {
	height: 20px;
	width: 462px;
	color: #856542;
	font-size: 12px;
	font-family: RosarioBold;
	text-transform:lowercase;
}
.content .actualites {
	border: 1px solid #b4b4b4;
	margin-top: 15px;
	background-image: url(../IMAGES_OK/fond_titre_actualites_15.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-color: #FFF;
	padding: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.content .actualites h1 {
	color: #FFF;
	font-size: 16px;
	text-transform: uppercase;
	margin: 0px;
	padding: 0px;
	font-weight: normal;
}
.content .actualites h2 {
	font-family: Georgia;
	font-size: 16px;
	color: #666633;
	font-weight: normal;
	padding: 0px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.content .actualites h3 {
	color: #999;
	font-size: 11px;
	font-weight: normal;
	margin: 0px;
	padding: 0px;
}
.content .actualites p {
	font-size: 14px;
	color: #666;
	line-height: 14px;
}
.content .actualites .lire_la_suite{
	color: #666633;
	text-align: right;
	display: block;
}
.content .actualites .lire_la_suite a {
	color: #666633;
	text-decoration: none;
}
.content .actualites .lire_la_suite a:hover {
	color: #666633;
	text-decoration: underline;
}
.content .actualites hr {
	color: #c5de9e;
	background-color: #c5de9e;
	height: 1px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
.content .cdp {
	border: 1px solid #b4b4b4;
	margin-top: 5px;
	background-color: #FFF;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 10px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-left: 15px;
}
.content .cdp h1 img{
	float: right;
	line-height: 40px;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.content .cdp h1 {
	color: #287245;
	font-size: 20px;
	margin: 0px;
	padding: 0px;
	font-weight: normal;
	font-family: Georgia, "Times New Roman", Times, serif;
	line-height: 30px;
	height: 30px;
}
.content .cdp h2 {
	font-family: Georgia;
	font-size: 14px;
	color: #287245;
	font-weight: bold;
	padding: 0px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	line-height: 16px;
}
.content .cdp h3 {
	color: #999;
	font-size: 11px;
	font-weight: normal;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #CCC;
	border-bottom-color: #CCC;
	padding: 0px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	line-height: 20px;
}
.content .cdp h3 .nom {
	float: right;
	color: #999;
}
.content .cdp h4 {
	font-family: Georgia;
	font-size: 14px;
	color: #287245;
	padding: 0px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	line-height: 16px;
	font-weight: normal;
}
.content .cdp p.legende {
	font-size: 10px;
	color: #999;
	margin: 0px;
	padding: 0px;
}
.content .cdp p {
	font-size: 12px;
	color: #666;
	line-height: 14px;
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.content .cdp p strong {
	font-family: 'rosariobold';
	font-weight: normal;
	color: #333;
}
.content .cdp .retour{
	color: #b6d18c;
	text-align: right;
	display: block;
}
.content .cdp .retour a {
	color: #b6d18c;
	text-decoration: none;
}
.content .cdp .retour a:hover {
	color: #b6d18c;
	text-decoration: underline;
}
.content .cdp hr {
	color: #c5de9e;
	background-color: #c5de9e;
	height: 1px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
.content .cdp map area {
	outline:0;
}
.sidebar2 {
	float: left;
	width: 232px;
	margin-top: 20px;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
	margin-left: 8px;
}
.sidebar2 .rechercher {
	background-image: url(../IMAGES_OK/rechercher_08.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	outline:0;
}
.sidebar2 .rechercher form a img.validation {
	cursor: Pointer;
	outline:0;
}
.sidebar2 form #recherche {
	height: 18px;
	width: 180px;
	color: #666666;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 10px;
	background-image: url(../IMAGES_OK/rechercher_08.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	outline:0;
}

.sidebar2 form #cntnt01searchinput {
	height: 18px;
	width: 180px;
	color: #666666;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 10px;
	background-image: url(../IMAGES_OK/rechercher_08.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	outline:0;
}




.sidebar2 .devises_shadow {
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	padding-bottom: 5px;
}
.sidebar2 .devises {
	color: #FFF;
	margin-top: 15px;
	width: 228px;
	background-color: #52b777;
}
.sidebar2 .devises #ok {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-image: url(../IMAGES_OK/bouton_ok_devises_29.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 25px;
	width: 31px;
	cursor: Pointer;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 25px;
	padding: 0px;
	outline:0;
}
.sidebar2 .devises #chiffre {
	background-image: url(../IMAGES_OK/fond_champ_devises_21.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 25px;
	width: 192px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #666666;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
	outline:0;
}
.sidebar2 .devises #resultat {
	background-image: url(../IMAGES_OK/fond_champ_devises_21.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 25px;
	width: 192px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #666666;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 10px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
	outline:0;
}
.sidebar2 .devises select {
	width: 145px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	padding: 0px;
	color: #3A8E5A;
	height: 25px;
	outline:0;
}
.sidebar2 .taux_shadow {
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	padding-bottom: 5px;
}
.sidebar2 .taux {
	width: 218px;
	color: #666666;
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	background-color: #FFF;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
}
.sidebar2 .taux table td {
	margin: 0px;
	padding: 0px;
	font-size: 15px;
	line-height: 17px;
}
.sidebar2 h1 {
	font-size: 15px;
	color: #FFF;
	font-weight: normal;
	margin: 0px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 10px;
}
.sidebar2 h2 {
	color: #52B777;
	font-size: 15px;
	font-weight: normal;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin: 0px;
}
		


/* ~~ Styles de pied de page ~~ */
.footer {
	position: relative;/* donne hasLayout à IE6 de façon à permettre un effacement correct */
	clear: both; /* cette propriété d'effacement force le .container à comprendre où se terminent les colonnes et à les contenir */
	background-image: url(../IMAGES_OK/fond_footer02_56.jpg);
	background-repeat: repeat-x;
	background-position: center bottom;
	height: 250px;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
}
.footer .nav_diapo {
	color: #666633;
	text-align: right;
	float: right;
	margin-right: 10px;
}
.footer_container {
	width: 960px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	height: 147px;
}
.footer .monnaie_shadow {
	height: 141px;
	width: 232px;
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	float: left;
}
.footer .monnaie_shadow a {
	text-decoration: none;
	cursor: Pointer;
}
.footer .monnaie {
	background-image: url(../IMAGES_OK/visuel_monnaie_50.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 137px;
	width: 228px;
	cursor: Pointer;
}
.footer .patrimoine_shadow {
	height: 141px;
	width: 232px;
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	float: left;
	margin-left: 10px;
}
.footer .patrimoine {
	background-image: url(../IMAGES_OK/visuel_patrimoine_51.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 137px;
	width: 228px;
	cursor: Pointer;
}
.footer .banque_shadow {
	height: 141px;
	width: 232px;
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	float: left;
	margin-left: 10px;
}
.footer .banque {
	background-image: url(../IMAGES_OK/visuel_banque_53.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 137px;
	width: 228px;
}
.footer .actu_shadow {
	height: 141px;
	width: 232px;
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	float: left;
	margin-left: 10px;
}
.footer .actu_shadow a {
	text-decoration: none;
}
.footer .actu {
	background-image: url(../IMAGES_OK/visuel_actu_54.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 137px;
	width: 228px;
	cursor: Pointer;
}
.footer h1  {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	font-weight: normal;
	color: #FFF;
	background-image: url(../IMAGES_OK/fond_titre_footer_50.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 10px;
	margin: 0px;
}
.footer .pdp {
	text-transform: uppercase;
	color: #265b64;
	font-size: 11px;
	text-align: center;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-family: 'rosariobold';
}
.footer .pdp a {
	text-decoration: none;
	color: #265b64;
}
.footer .pdp a:hover {
	text-decoration: underline;
	color: #265b64;
}


		

/* ~~ Classes flottant/effacement diverses ~~ */
.fltrt {  /* cette classe peut servir à faire flotter un élément depuis la droite sur votre page. L'élément flottant doit précéder l'élément à côté duquel il doit apparaître sur la page. */
	float: right;
	margin-left: 8px;
}
.fltlft { /* cette classe peut servir à faire flotter un élément depuis la gauche sur votre page. L'élément flottant doit précéder l'élément à côté duquel il doit apparaître sur la page. */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* cette classe peut être placée sur une div <br /> ou vide, en tant qu'élément final suivant la dernière div flottante (dans le .container) si le paramètre .footer est supprimé ou retiré du .container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/* line 7, ../sass/lightbox.sass */
body:after {
  content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
  display: none;
}

/* line 11, ../sass/lightbox.sass */
.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

/* line 20, ../sass/lightbox.sass */
.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}
/* line 28, ../sass/lightbox.sass */
.lightbox .lb-image {
  display: block;
  height: auto;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
/* line 32, ../sass/lightbox.sass */
.lightbox a img {
  border: none;
}

/* line 35, ../sass/lightbox.sass */
.lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 44, ../sass/lightbox.sass */
.lb-container {
  padding: 4px;
}

/* line 47, ../sass/lightbox.sass */
.lb-loader {
  position: absolute;
  top: 43%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

/* line 56, ../sass/lightbox.sass */
.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../img/loading.gif) no-repeat;
}

/* line 63, ../sass/lightbox.sass */
.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

/* line 71, ../sass/lightbox.sass */
.lb-container > .nav {
  left: 0;
}

/* line 74, ../sass/lightbox.sass */
.lb-nav a {
  outline: none;
}

/* line 77, ../sass/lightbox.sass */
.lb-prev, .lb-next {
  width: 49%;
  height: 100%;
  cursor: pointer;
  /* Trick IE into showing hover */
  display: block;
}

/* line 84, ../sass/lightbox.sass */
.lb-prev {
  left: 0;
  float: left;
}
/* line 87, ../sass/lightbox.sass */
.lb-prev:hover {
  background: url(../img/prev.png) left 48% no-repeat;
}

/* line 90, ../sass/lightbox.sass */
.lb-next {
  right: 0;
  float: right;
}
/* line 93, ../sass/lightbox.sass */
.lb-next:hover {
  background: url(../img/next.png) right 48% no-repeat;
}

/* line 96, ../sass/lightbox.sass */
.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 103, ../sass/lightbox.sass */
.lb-data {
  padding: 0 4px;
  color: #bbbbbb;
}
/* line 106, ../sass/lightbox.sass */
.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}
/* line 111, ../sass/lightbox.sass */
.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}
/* line 115, ../sass/lightbox.sass */
.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}
/* line 121, ../sass/lightbox.sass */
.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../img/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
/* line 130, ../sass/lightbox.sass */
.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
/* cmsms stylesheet: marquee modified: 19/07/2016 10:49:36 */
.dygraph-axis-label.dygraph-axis-label-x
{
text-align:center;
color:#52B777;
font-weight:900;
font-size:8px;
}
.dygraph-axis-label.dygraph-axis-label-y
{
text-align:center;
color:#52B777;
font-weight:500;
font-size:10px;
}
.marquee {
height: 16px;
width: 440px;
color: #aa9783;
background-color:white;
border:0px;
font-family:rosarioregular;
font-size:14px;
#height:60px;
#font-size:1.2em;
overflow: hidden;
#overflow-style: marquee-line;
white-space: nowrap
}
/* cmsms stylesheet: popup modified: 19/07/2016 10:49:36 */
#popupNews{ 
        display: none; 
        background-color:#FFF; 
        opacity:0.2;
        filter : alpha(opacity=20);
	position: fixed; 
	left: 0; 
	top: 0;
	width: 100%; 
	height: 100%;
	z-index: 2000;

}
#popupNews_content{
	text-align: justify;
	position: fixed;
	top:30%;
	width: 400px;
	z-index:2001;
	padding:0px 0px;
	margin:0px auto;
	display: none;
	border: 0px solid #303030;
	border-radius:0px;

}
#popupNews_content h2.orangeh2{
	line-height:1.5em;
	margin:0 0 0.5em 4px;
	padding-bottom:1px;
	padding-left:1em;
	text-align:left;
	font-size:1.5em;
	color: #9D501E;
}


#popupNews_content .cdp {
	border: 1px solid #287245;
	background-color: #FFF;
	padding-top: 10px;
	padding-right: 50px;
	padding-bottom: 10px;
	padding-left: 50px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}

#popupNews_close .float {
	float: right;
	padding-left: 0px;
	margin-top: -5px;
}

#popupNews_content .cdp h1 {
	color: #287245;
	font-size: 20px;
	font-weight: normal;
	font-family: Georgia, "Times New Roman", Times, serif;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding: 0px;
	text-transform: uppercase;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #287245;
}
#popupNews_content .cdp table {
	margin: 0px;
	padding: 0px;
}
#popupNews_content .cdp table.form td {
	font-size: 14px;
	color: #666;
	line-height: 16px;
	margin: 0px;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 5px;
	padding-left: 3px;
}
#popupNews_content .cdp form .submit{
	cursor: pointer;
	color: #287245;
	height: 25px;
	background-color: #287245;
	background-image: url(../IMAGES_OK/fond_over_menu2_03.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	font-family: rosarioregular;
	width: 160px;
	font-size: 14px;
}
#popupNews_content .cdp form .submit:hover {
	color: #000;
	font-family: rosariobold;
	font-weight: normal;
	width: 160px;
}
#popupNews_content .cdp select {
	width: 145px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding: 0px;
	color: #3A8E5A;
	height: 25px;
	outline:0;
	border: 1px solid #999;
	background-color: #FFF;
}





#popupNews_close{
	text-decoration: none;
	text-indent: -999em;
	float: right;
       	height: 25px;
	width: 25px;
	margin-right: -15px;
	cursor: pointer;
}

caca{
	background:url(http://www.banque-comores.km/uploads/close.png) no-repeat;
}

.popupNewsSummary{
    border-left: 1px dotted #CCCCCC;
    font-size: 1.2em;
    line-height: 1.1em;
    margin: 5px 0 15px 5px;
    padding-left: 10px;
}
#popupNews_content a.popup_more{
    border-left: 1px dotted #888888;
    cursor: pointer;
    display: block;
    padding: 0 0 0 10px;
text-decoration: none;
color: #A3A0A0;
font-size: 0.9em;
margin-bottom: 10px;
}

.popupNews_content a{
    color: #FFFFFF;
    text-decoration: underline;
}

a.popupNews_more{
}

*html #popupNews{
position: absolute;
}
*html #popupNews_content {
position: absolute;
}
/* cmsms stylesheet: css_spry_2_a_7 modified: 26/07/2016 14:32:00 */
@charset "UTF-8";

/* SpryValidationSelect.css - version 0.4 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* These are the classes applied on the messages
 * (required message and invalid state message)
 * which prevent them from being displayed by default.
 */ 
.selectRequiredMsg, .selectInvalidMsg {
	display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states (required, invalid).
 * These classes set a default red border and color for the error text.
 * The state class (.selectRequiredState or .selectInvalidState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.selectRequiredState .selectRequiredMsg,
.selectInvalidState .selectInvalidMsg {
	display: inline;
	color: #CC3333;
}

/* The next three group selectors control the way the core element (SELECT) looks like when the widget is in one of the states: 
 * focus, required / invalid, valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the SELECT
 * - the widget id is placed on the SELECT element itself (there are no error messages)
 */
 
/* When the widget is in the valid state the SELECT has a green background applied on it. */
.selectValidState select, select.selectValidState {
}

/* When the widget is in an invalid state the SELECT has a red background applied on it. */
select.selectRequiredState, .selectRequiredState select,
select.selectInvalidState, .selectInvalidState select {
}

/* When the widget has received focus, the SELECT has a yellow background applied on it. */
.selectFocusState select, select.selectFocusState {
}

@charset "UTF-8";

/* SpryTabbedPanels.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* Horizontal Tabbed Panels
 *
 * The default style for a TabbedPanels widget places all tab buttons
 * (left aligned) above the content panel.
 */

/* This is the selector for the main TabbedPanels container. For our
 * default style, this container does not contribute anything visually,
 * but it is floated left to make sure that any floating or clearing done
 * with any of its child elements are contained completely within the
 * TabbedPanels container, to minimize any impact or undesireable
 * interaction with other floated elements on the page that may be used
 * for layout.
 *
 * If you want to constrain the width of the TabbedPanels widget, set a
 * width on the TabbedPanels container. By default, the TabbedPanels widget
 * expands horizontally to fill up available space.
 *
 * The name of the class ("TabbedPanels") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabbedPanels container.
 */
.TabbedPanels {
	overflow: hidden;
	clear: none;
	width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}

/* This is the selector for the TabGroup. The TabGroup container houses
 * all of the tab buttons for each tabbed panel in the widget. This container
 * does not contribute anything visually to the look of the widget for our
 * default style.
 *
 * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabGroup container.
 */
.TabbedPanelsTabGroup {
	padding: 0px;
	-moz-user-select: none;
	-khtml-user-select: none;
	outline:0;
	margin: 0px;
}

/* This is the selector for the TabbedPanelsTab. This container houses
 * the title for the panel. This is also the tab "button" that the user clicks
 * on to activate the corresponding content panel so that it appears on top
 * of the other tabbed panels contained in the widget.
 *
 * For our default style, each tab is positioned relatively 1 pixel down from
 * where it wold normally render. This allows each tab to overlap the content
 * panel that renders below it. Each tab is rendered with a 1 pixel bottom
 * border that has a color that matches the top border of the current content
 * panel. This gives the appearance that the tab is being drawn behind the
 * content panel.
 *
 * The name of the class ("TabbedPanelsTab") used in this selector is not
 * necessary to make the widget function. You can use any class name you want
 * to style this tab container.
 */
.TabbedPanelsTab {
	position: relative;
	float: left;
	list-style: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
	font-family: rosarioregular;
	font-size: 14px;
	font-weight: normal;
	color: #00783A;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;
	-moz-user-select: none;
	-khtml-user-select: none;
	outline:0;
	margin: 0px;
	background-color: #E1F1E4;
}

/* This selector is an example of how to change the appearnce of a tab button
 * container as the mouse enters it. The class "TabbedPanelsTabHover" is
 * programatically added and removed from the tab element as the mouse enters
 * and exits the container.
 */
.TabbedPanelsTabHover {
	background-color: #69A87F;
	-moz-user-select: none;
	-khtml-user-select: none;
	outline:0;
}

/* This selector is an example of how to change the appearance of a tab button
 * container after the user has clicked on it to activate a content panel.
 * The class "TabbedPanelsTabSelected" is programatically added and removed
 * from the tab element as the user clicks on the tab button containers in
 * the widget.
 *
 * As mentioned above, for our default style, tab buttons are positioned
 * 1 pixel down from where it would normally render. When the tab button is
 * selected, we change its bottom border to match the background color of the
 * content panel so that it looks like the tab is part of the content panel.
 */
.TabbedPanelsTabSelected {
	background-color: #69A87F;
	color: #FFF;
	-moz-user-select: none;
	-khtml-user-select: none;
	outline:0;
	font-size: 16px;
	height: 25px;
	padding-top: 10px;
	margin-top: -11px;
}

/* This selector is an example of how to make a link inside of a tab button
 * look like normal text. Users may want to use links inside of a tab button
 * so that when it gets focus, the text *inside* the tab button gets a focus
 * ring around it, instead of the focus ring around the entire tab.
 */
.TabbedPanelsTab a {
	color: black;
	text-decoration: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	outline:0;
}

/* This is the selector for the ContentGroup. The ContentGroup container houses
 * all of the content panels for each tabbed panel in the widget. For our
 * default style, this container provides the background color and borders that
 * surround the content.
 *
 * The name of the class ("TabbedPanelsContentGroup") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the ContentGroup container.
 */
.TabbedPanelsContentGroup {
	clear: both;
}

/* This is the selector for the Content panel. The Content panel holds the
 * content for a single tabbed panel. For our default style, this container
 * provides some padding, so that the content is not pushed up against the
 * widget borders.
 *
 * The name of the class ("TabbedPanelsContent") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the Content container.
 */
.TabbedPanelsContent {
	overflow: hidden;
	border-top-width: thick;
	border-top-style: solid;
	border-top-color: #69A87F;
}

/* This selector is an example of how to change the appearnce of the currently
 * active container panel. The class "TabbedPanelsContentVisible" is
 * programatically added and removed from the content element as the panel
 * is activated/deactivated.
 */
.TabbedPanelsContentVisible {
}

/* Vertical Tabbed Panels
 *
 * The following rules override some of the default rules above so that the
 * TabbedPanels widget renders with its tab buttons along the left side of
 * the currently active content panel.
 *
 * With the rules defined below, the only change that will have to be made
 * to switch a horizontal tabbed panels widget to a vertical tabbed panels
 * widget, is to use the "VTabbedPanels" class on the top-level widget
 * container element, instead of "TabbedPanels".
 */

.VTabbedPanels {
	overflow: hidden;
	zoom: 1;
}

/* This selector floats the TabGroup so that the tab buttons it contains
 * render to the left of the active content panel. A border is drawn around
 * the group container to make it look like a list container.
 */
.VTabbedPanels .TabbedPanelsTabGroup {
	float: left;
	width: 10em;
	height: 20em;
	background-color: #EEE;
	position: relative;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
}

/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTab {
	float: none;
	margin: 0px;
	border-top: none;
	border-left: none;
	border-right: none;
}

/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTabSelected {
	background-color: #EEE;
	border-bottom: solid 1px #999;
}

/* This selector floats the content panels for the widget so that they
 * render to the right of the tabbed buttons.
 */
.VTabbedPanels .TabbedPanelsContentGroup {
	clear: none;
	float: left;
	padding: 0px;
	width: 30em;
	height: 20em;
}

/* Styles for Printing */
@media print {
.TabbedPanels {
	overflow: visible !important;
}
.TabbedPanelsContentGroup {
	display: block !important;
	overflow: visible !important;
	height: auto !important;
}
.TabbedPanelsContent {
	overflow: visible !important;
	display: block !important;
	clear:both !important;
}
.TabbedPanelsTab {
	 overflow: visible !important;
	 display: block !important;
	 clear:both !important;
}
}

@charset "UTF-8";

/* SpryMenuBarHorizontal.css - version 0.6 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

 LAYOUT INFORMATION: describes box model, positioning, z-order

 *******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
	padding: 0;
	list-style-type: none;
	font-size: 100%;
	cursor: default;
	font-family: rosarioregular;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}
ul.MenuBarHorizontal li:last-child {border-right: solid 1px rgb(181, 222, 226);}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
	z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
	list-style-type: none;
	position: relative;
	cursor: pointer;
	float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
	list-style-type: none;
	font-size: 100%;
	z-index: 1020;
	cursor: default;
	position: absolute;
	left: -1000em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
	left: auto;
	max-width:250px;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
	position: absolute;
	margin-top: -5%;
	margin-left: 95%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
}

/*******************************************************************************

 DESIGN INFORMATION: describes color scheme, borders, fonts

 *******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
	display: block;
	cursor: pointer;
	color: #FFF;
	text-decoration: none;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{
}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover
{
background-color:transparent;
}
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
}
ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{
}
.nav .nav_container #MenuBar1 li a.MenuBarItemSubmenu{
	background-repeat: no-repeat;
	background-position: left top;
	padding-right: 18px;
	padding-left: 18px;
	padding-top: 14px;
	padding-bottom: 14px;
	height: 30px;
	font-size: 8.6pt;
	color: #FFF;
	text-align: center;
	background-image: url(../IMAGES_OK/menu_horizontal_fond_et_over.jpg);
}
.nav .nav_container #MenuBar1 li.actif a.MenuBarItemSubmenu {
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-right: 18px;
	padding-left: 18px;
	padding-top: 14px;
	padding-bottom: 14px;
	height: 30px;
	font-size: 8.6pt;
	color: #FFF;
	text-align: center;
	background-image: url(../IMAGES_OK/menu_horizontal_fond_et_over.jpg);
}
.nav .nav_container #MenuBar1 li a.MenuBarItemSubmenuHover {
	background-image: url(../IMAGES_OK/menu_horizontal_fond_et_over.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
}
.nav .nav_container #MenuBar1 li.image {
	background-image: url(../IMAGES_OK/menu_horizontal_fond_et_over.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}
.nav .nav_container #MenuBar1 li .shadow.MenuBarSubmenuVisible {
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	width: 254px;
	padding-bottom: 5px;
}
.nav .nav_container #MenuBar1 li .MenuBarSubmenuVisible li {
	background-repeat: repeat;
	background-position: left bottom;
	font-size: 10pt;
	text-align: left;
	background-image: url(../IMAGES_OK/menu_horizontal_deploiement01.jpg);
}
.nav .nav_container #MenuBar1 li .MenuBarSubmenuVisible li a.last-menu {
padding-left:0px;
padding-top:0px;
padding-right:0px;
padding-bottom:5px;
}
.nav .nav_container #MenuBar1 li .MenuBarSubmenuVisible li a.last-menu:hover {
background:#63bd84;
}
.nav .nav_container #MenuBar1 li .MenuBarSubmenuVisible li a {
	padding-left: 30px;
	padding-top: 8px;
	padding-right: 0px;
	padding-bottom: 8px;
	width: 220px;
	margin: 0px;
}
.nav .nav_container #MenuBar1 li .MenuBarSubmenuVisible li a:hover {
	background-image: url(../IMAGES_OK/menu_horizontal_deploiement_over.jpg);
	background-position: left top;
	background-repeat: repeat;
}
/*******************************************************************************

 SUBMENU INDICATION: styles if there is a submenu under a given menu item

 *******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
}

/*******************************************************************************

 BROWSER HACKS: the hacks below should not be changed unless you are an expert

 *******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
	position: absolute;
	z-index: 1010;
	filter:alpha(opacity:0.1);
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
	ul.MenuBarHorizontal li.MenuBarItemIE
	{
	display: inline;
	f\loat: left;
	background: #FFF;
	}
}

@charset "UTF-8";
/* SpryCollapsiblePanel.css - version 0.5 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main CollapsiblePanel container. For our
 * default style, the CollapsiblePanel is responsible for drawing the borders
 * around the widget.
 *
 * If you want to constrain the width of the CollapsiblePanel widget, set a width on
 * the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill
 * up available space.
 *
 * The name of the class ("CollapsiblePanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * CollapsiblePanel container.
 */
.CollapsiblePanel3 {
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
}
/* This is the selector for the CollapsiblePanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open or close the panel.
 *
 * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * CollapsiblePanel panel tab container.
 */
.CollapsiblePanel3Tab {
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	font-family: rosarioregular;
	font-size: 14px;
	outline:0;
}
.CollapsiblePanel3Tab p.verte {
	line-height: 30px;
	height: 30px;
	padding-left: 30px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	background-position: left bottom;
	background-repeat: no-repeat;
	color: #999;
	font-family: 'rosariobold';
	font-size: 14px;
	background-image: url(../IMAGES_OK/fond_onglet_organigramme_10.jpg);
}
.CollapsiblePanel3Tab p.verte:Hover  {
	color: #287245;
	font-family: 'rosariobold';
	text-decoration: none;
	background-color: #FFF;
}
.CollapsiblePanel3Tab span {
	vertical-align:middle;
	display:inline-block;
	line-height:1.2; /* on rétablit le line-height */
	text-align:left;
	margin-top: -5px;
}
/* This is the selector for a CollapsiblePanel's Content area. It's important to note that
 * you should never put any padding on the content area element if you plan to
 * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
 * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
 *
 * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style a
 * CollapsiblePanel content container.
 */
.CollapsiblePanel3Content {
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding: 0px;
}
.CollapsiblePanel3Content p.verte {
	color: #287245;
	padding-left: 30px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 5px;
	border-top-width: 2px;
	border-bottom-width: 2px;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #CCC;
	border-bottom-color: #CCC;
	margin: 0px;
}
.CollapsiblePanelOpen .CollapsiblePanel3Tab p.verte {
	background-image: url(../IMAGES_OK/fond_onglet_organigramme_hover_12.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	font-family: rosariobold;
	color: #287245;
}
/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.CollapsiblePanel3TabHover,  .CollapsiblePanelOpen .CollapsiblePanel3TabHover {
	text-decoration: none;
}
/* This is an example of how to change the appearance of all the panel tabs when the
 * CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed
 * whenever the CollapsiblePanel gains or loses keyboard focus.
 */
.CollapsiblePanelFocused .CollapsiblePanel3Tab {
}

@charset "UTF-8";
/* SpryCollapsiblePanel.css - version 0.5 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main CollapsiblePanel container. For our
 * default style, the CollapsiblePanel is responsible for drawing the borders
 * around the widget.
 *
 * If you want to constrain the width of the CollapsiblePanel widget, set a width on
 * the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill
 * up available space.
 *
 * The name of the class ("CollapsiblePanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * CollapsiblePanel container.
 */
.CollapsiblePanel2 {
	margin: 0px;
	padding: 0px;
}
/* This is the selector for the CollapsiblePanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open or close the panel.
 *
 * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * CollapsiblePanel panel tab container.
 */
.CollapsiblePanel2Tab {
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	font-family: rosarioregular;
	font-size: 14px;
	outline:0;
}
.CollapsiblePanel2Tab p.vert {
	line-height: 40px;
	height: 40px;
	padding-left: 30px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 5px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	background-image: url(../IMAGES_OK/separation_verte_07.jpg);
	background-position: left bottom;
	background-repeat: no-repeat;
	color: #52b777;
}

p.vert {
	line-height: 40px;
	height: 40px;
	padding-left: 30px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 5px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	background-image: url(../IMAGES_OK/separation_verte_07.jpg);
	background-position: left bottom;
	background-repeat: no-repeat;
	color: #52b777;
}

p.vert a {
	color: #52b777;
	text-decoration: none;
}
.CollapsiblePanel2Tab p:Hover  {
	color: #287245;
	font-family: 'rosariobold';
	text-decoration: none;
}
p.vert a:Hover {
	color: #287245;
	font-family: 'rosariobold';
	text-decoration: none;
}
span.vert{
	vertical-align:middle;
	display:inline-block;
	line-height:1.2; /* on rétablit le line-height */
	text-align:left;
	margin-top: 3px;
}
/* This is the selector for a CollapsiblePanel's Content area. It's important to note that
 * you should never put any padding on the content area element if you plan to
 * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
 * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
 *
 * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style a
 * CollapsiblePanel content container.
 */
.CollapsiblePanel2Content {
	margin: 0px;
	padding: 0px;
	background-image: url(../IMAGES_OK/separation_verte_07.jpg);
	background-repeat: no-repeat;
	background-position: 5px bottom;
}
.CollapsiblePanel2Content p {
	color: #52b777;
	padding-left: 35px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
}
.CollapsiblePanel2Content p a {
	color: #52b777;
}
.CollapsiblePanel2Content p a:hover {
	color: #287245;
	background-image: none;
	font-family: rosariobold;
	text-decoration: none;
}


.CollapsiblePanel2Content p a.menu_en_cours{
	color: #287245;
	background-image: none;
	font-family: rosariobold;
	text-decoration: none;
}
.CollapsiblePanel2Content p a.menu_en_cours:hover {
	color: #287245;
	background-image: none;
	font-family: rosariobold;
	text-decoration: none;
}


/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "CollapsiblePanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the CollapsiblePanel.
 */
.CollapsiblePanelOpen .CollapsiblePanel2Tab {
	font-family: rosariobold;
	color: #287245;
	background-image: url(../IMAGES_OK/fond_over_menu2_03.jpg);
	background-repeat: no-repeat;
	background-position: 5px top;
}
.CollapsiblePanelOpen .CollapsiblePanel2Tab p.vert {
	background-image: url(../IMAGES_OK/fond_over_menu2_03.jpg);
	background-repeat: no-repeat;
	background-position: 5px top;
	font-family: rosariobold;
	color: #287245;
}
/* This is an example of how to change the appearance of the panel tab when the
 * CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is programatically added and removed
 * whenever the CollapsiblePanel is closed.
 */

.CollapsiblePanelClosed .CollapsiblePanel2Tab {
	background-image: url(../IMAGES_OK/menu_horizontal_arrow.png);
	background-repeat: no-repeat;
	background-position: 20px center;
}
/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.CollapsiblePanel2TabHover,  .CollapsiblePanelOpen .CollapsiblePanel2TabHover {
	font-family: rosariobold;
	color: #287245;
	text-decoration: none;
}
.CollapsiblePanel2TabHover, .CollapsiblePanelClosed .CollapsiblePanel2TabHover {
	background-image: url(../IMAGES_OK/menu_horizontal_arrow.png);
	background-repeat: repeat-x;
	background-position: 5px center;
}
/* This is an example of how to change the appearance of all the panel tabs when the
 * CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed
 * whenever the CollapsiblePanel gains or loses keyboard focus.
 */
.CollapsiblePanelFocused .CollapsiblePanel2Tab {
}

@charset "UTF-8";

/* SpryCollapsiblePanel.css - version 0.5 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main CollapsiblePanel container. For our
 * default style, the CollapsiblePanel is responsible for drawing the borders
 * around the widget.
 *
 * If you want to constrain the width of the CollapsiblePanel widget, set a width on
 * the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill
 * up available space.
 *
 * The name of the class ("CollapsiblePanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * CollapsiblePanel container.
 */
.CollapsiblePanel {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the CollapsiblePanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open or close the panel.
 *
 * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * CollapsiblePanel panel tab container.
 */
.CollapsiblePanelTab {
	margin: 0px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	background-image: url(../IMAGES_OK/menu_horizontal_deploiement01.jpg);
	background-repeat: repeat;
	background-position: left top;
	font-family: rosarioregular;
	font-size: 10pt;
	padding-top: 5px;
	padding-right: 2px;
	padding-bottom: 10px;
	padding-left: 30px;
	width: 218px;
	color: #FFF;
	line-height: 20px;
	text-decoration: none;
	clear: none;
	float: none;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	list-style-image: none;
	list-style-type: none;
	outline:0;
}

/* An anchor tag can be used inside of a CollapsiblePanelTab so that the
 * keyboard focus ring appears *inside* the tab instead of around the tab.
 * This is an example of how to make the text within the anchor tag look
 * like non-anchor (normal) text.
 */
.CollapsiblePanelTab a {
	text-decoration: none;
	background-image: url(../IMAGES_OK/menu_horizontal_arrow.png);
	background-repeat: no-repeat;
	background-position: left center;
	line-height: 28px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	outline:0;
}

/* This is the selector for a CollapsiblePanel's Content area. It's important to note that
 * you should never put any padding on the content area element if you plan to
 * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
 * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
 *
 * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style a
 * CollapsiblePanel content container.
 */
.CollapsiblePanelContent {
	margin: 0px;
	width: 215px;
	color: #FFF;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 30px;
	background-color: #63bd84;
}
.CollapsiblePanelContent a        {
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 0px;
	margin: 0px;
}
.CollapsiblePanelContent a:hover      {
	background-image: none;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	color: #168451;
}
.nav .nav_container #MenuBar1 li .shadow.MenuBarSubmenuVisible li .CollapsiblePanelContent a {
	background-image: none;
	margin: 0px;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "CollapsiblePanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the CollapsiblePanel.
 */
.CollapsiblePanelOpen .CollapsiblePanelTab {
	background-image: url(../IMAGES_OK/menu_horizontal_arrow_open.png);
	background-repeat: no-repeat;
	background-position: 10px center;
}

/* This is an example of how to change the appearance of the panel tab when the
 * CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is programatically added and removed
 * whenever the CollapsiblePanel is closed.
 */

.CollapsiblePanelClosed .CollapsiblePanelTab {
	background-image: url(../IMAGES_OK/menu_horizontal_arrow.png);
	background-repeat: no-repeat;
	background-position: 10px center; /* background-color: #EFEFEF */
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */

/* This is an example of how to change the appearance of all the panel tabs when the
 * CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed
 * whenever the CollapsiblePanel gains or loses keyboard focus.
 */
.CollapsiblePanelFocused .CollapsiblePanelTab {
}

@charset "UTF-8";

/* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main Accordion container. For our default style,
 * we draw borders on the left, right, and bottom. The top border of the Accordion
 * will be rendered by the first AccordionPanelTab which never moves.
 *
 * If you want to constrain the width of the Accordion widget, set a width on
 * the Accordion container. By default, our accordion expands horizontally to fill
 * up available space.
 *
 * The name of the class ("Accordion") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * Accordion container.
 */
.Accordion {
	overflow: hidden;
	color: #2B7748;
}

/* This is the selector for the AccordionPanel container which houses the
 * panel tab and a panel content area. It doesn't render visually, but we
 * make sure that it has zero margin and padding.
 *
 * The name of the class ("AccordionPanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel container.
*/
.AccordionPanel {
	margin: 0px;
	padding: 0px;
}

/* This is the selector for the AccordionPanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open a specific panel.
 *
 * The name of the class ("AccordionPanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel tab container.
 *
 * NOTE:
 * This rule uses -moz-user-select and -khtml-user-select properties to prevent the
 * user from selecting the text in the AccordionPanelTab. These are proprietary browser
 * properties that only work in Mozilla based browsers (like FireFox) and KHTML based
 * browsers (like Safari), so they will not pass W3C validation. If you want your documents to
 * validate, and don't care if the user can select the text within an AccordionPanelTab,
 * you can safely remove those properties without affecting the functionality of the widget.
 */
.AccordionPanelTab {
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	background-image: url(../IMAGES_OK/menu_horizontal_arrow.png);
	background-repeat: no-repeat;
	background-position: 10px 50%;
	padding-top: 2px;
	padding-right: 2px;
	padding-bottom: 2px;
	padding-left: 25px;
	line-height: 14px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
}

/* This is the selector for a Panel's Content area. It's important to note that
 * you should never put any padding on the panel's content area if you plan to
 * use the Accordions panel animations. Placing a non-zero padding on the content
 * area can cause the accordion to abruptly grow in height while the panels animate.
 *
 * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
 * Content container.
 *
 * The name of the class ("AccordionPanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel content container.
 */
.AccordionPanelContent {
	overflow: auto;
	margin: 0px;
	height: 50px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 25px;
	line-height: 14px;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "AccordionPanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the Accordion.
 */
.AccordionPanelOpen .AccordionPanelTab {
	background-color: #EEEEEE;
	background-image: url(../IMAGES_OK/menu_horizontal_arrow_open.png);
	background-repeat: no-repeat;
	background-position: 10px 50%;
	padding-left: 25px;
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.AccordionPanelTabHover {
	color: #555555;
}
.AccordionPanelOpen .AccordionPanelTabHover {
	color: #555555;
}

/* This is an example of how to change the appearance of all the panel tabs when the
 * Accordion has focus. The "AccordionFocused" class is programatically added and removed
 * whenever the Accordion gains or loses keyboard focus.
 */
.AccordionFocused .AccordionPanelTab {
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open when the Accordion has focus.
 */
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
}
/* Rules for Printing */

@media print {

  .Accordion {
  overflow: visible !important;
  }
  
  .AccordionPanelContent {
	display: block !important;
	overflow: visible !important;
	height: auto !important;
  }
}

@charset "UTF-8";

/* SpryValidationTextField.css - version 0.4 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */


/* These are the classes applied on the error messages
 * which prevent them from being displayed by default.
 */ 
.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
	display: none;
}

/* These selectors change the way messages look when the widget is in one of the error states.
 * These classes set a default red border and color for the error text.
 * The state class (e.g. .textfieldRequiredState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
	display: inline;
	color: #CC3333;
}



/* The next three group selectors control the way the core element (INPUT) looks like when the widget is in one of the states: * focus, required / invalid / minValue / maxValue / minChars / maxChars , valid 
 * There are two selectors for each state, to cover the two main usecases for the widget:
 * - the widget id is placed on the top level container for the INPUT
 * - the widget id is placed on the INPUT element itself (there are no error messages)
 */
 
 /* When the widget is in the valid state the INPUT has a green background applied on it. */
.textfieldValidState input, input.textfieldValidState {
	background-color: #FFF;
}

/* When the widget is in an invalid state the INPUT has a red background applied on it. */
input.textfieldRequiredState, .textfieldRequiredState input, 
input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, 
input.textfieldMinValueState, .textfieldMinValueState input, 
input.textfieldMaxValueState, .textfieldMaxValueState input, 
input.textfieldMinCharsState, .textfieldMinCharsState input, 
input.textfieldMaxCharsState, .textfieldMaxCharsState input {
	background-color: #F00;
}

/* When the widget has received focus, the INPUT has a yellow background applied on it. */
.textfieldFocusState input, input.textfieldFocusState {
	background-color: #E2FFE2;
}

/* This class applies only for a short period of time and changes the way the text in the textbox looks like.
 * It applies only when the widget has character masking enabled and the user tries to type in an invalid character.
 */
.textfieldFlashText input, input.textfieldFlashText {
	color: #FFF !important;
}

/* When the widget has the hint message on, the hint text can be styled differently than the user typed text. */
.textfieldHintState input, input.textfieldHintState {
	/*color: red !important;*/
}
/* cmsms stylesheet: css_2_a_7 modified: 21/07/2016 13:19:47 */
@charset "UTF-8";
body {
	margin: 0;
	padding: 0;
	color: #000;
	font-family: rosarioregular;
	font-size: 100%;
	line-height: 1.4;
	background-image: url(../IMAGES_OK/background.jpg);
	background-repeat: repeat-x;
	background-position: left 25px;
}
@font-face {
    font-family: 'rosariobold';
    src: url('../../rosario-bold-webfont.eot');
    src: url('../../rosario-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../../rosario-bold-webfont.woff') format('woff'),
url('../../rosario-bold-webfont.ttf') format('truetype'),
url('../../rosario-bold-webfont.svg#rosariobold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rosarioregular';
    src: url('../../rosario-regular-webfont.eot');
    src: url('../../rosario-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../../rosario-regular-webfont.woff') format('woff'),
url('../../rosario-regular-webfont.ttf') format('truetype'),
url('../../rosario-regular-webfont.svg#rosarioregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'rosarioitalic';
    src: url('../../rosario-italic-webfont.eot');
    src: url('../../rosario-italic-webfont.eot?#iefix') format('embedded-opentype'),
url('../../rosario-italic-webfont.woff') format('woff'),
url('../../rosario-italic-webfont.ttf') format('truetype'),
url('../../rosario-italic-webfont.svg#rosarioitalic') format('svg');
    font-weight: normal;
    font-style: normal;
}
a:link, a:visited, a:hover, a:active {
	outline:0;
} 
ul, ol, dl {
	margin: 0px;
	padding: 0px;
}

/* ~~ Ce conteneur à largeur fixe entoure toutes les autres divs ~~ */
.container {
	width: 960px;
	margin: 0 auto;
}
.header01 {
	height: 151px;
	background-image: url(../IMAGES_OK/fond_banniere_01.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0px;
	padding: 0px;
}
.header02 {
	height: 151px;
	background-image: url(../IMAGES_OK/fond_banniere_02.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0px;
	padding: 0px;
}
.header03 {
	height: 151px;
	background-image: url(../IMAGES_OK/fond_banniere_03.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0px;
	padding: 0px;
}
.header04 {
	height: 151px;
	background-image: url(../IMAGES_OK/fond_banniere_04.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0px;
	padding: 0px;
}
.header05 {
	height: 151px;
	background-image: url(../IMAGES_OK/fond_banniere_05.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0px;
	padding: 0px;
}
.header06 {
	height: 151px;
	background-image: url(../IMAGES_OK/fond_banniere_06.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0px;
	padding: 0px;
}
/* ~~ Aucune largeur n'est attribuée à l'en-tête. Il occupera toute la largeur de votre mise en page. Il contient un espace réservé pour une image, qui doit être remplacé par votre logo lié. ~~ */
.header07 {
	height: 151px;
	background-image: url(../IMAGES_OK/fond_banniere_07.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0px;
	padding: 0px;
}
.header08 {
	height: 151px;
	background-image: url(../IMAGES_OK/fond_banniere_08.jpg);
	background-repeat: no-repeat;
	background-position: center top;
	margin: 0px;
	padding: 0px;
}
.header_container {
	width: 960px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	padding-top: 15px;
}
.nav {
	height: 58px;
	margin: 0px;
	padding: 0px;
	background-image: url(../IMAGES_OK/menu_horizontal_fond.jpg);
	background-repeat: repeat-x;
	background-position: left top;
}
.nav_container {
	width: 970px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}


/* ~~ Colonnes pour la mise en page. ~~ 

1) La marge intérieure n'est placée qu'en haut et/ou en bas des divs. Les éléments à l'intérieur de ces divs posséderont une marge intérieure sur les côtés. Vous évitez ainsi de devoir recourir à des « calculs de modèle de boîte ». N'oubliez pas que si vous ajoutez une marge intérieure latérale ou une bordure à la div proprement dite, elle sera ajoutée à la largeur que vous définissez pour créer la largeur totale. Vous pouvez également supprimer la marge intérieure de l'élément dans la div et placer une seconde div à l'intérieur, sans largeur et possédant une marge intérieure appropriée pour votre concept.

2) Toutes les colonnes étant flottantes, aucune marge ne leur a été attribuée. Si vous devez ajouter une marge, évitez de la placer du côté vers lequel vous effectuez le flottement (par exemple, une marge droite sur une div configurée pour flotter vers la droite). Dans de nombreux cas, vous pouvez plutôt employer une marge intérieure. Pour les divs où cette règle ne peut pas être respectée, ajoutez une déclaration « display:inline » à la règle de la div, afin de contourner un bogue qui amène certaines versions d'Internet Explorer à doubler la marge.

3) Comme des classes peuvent être employées à plusieurs reprises dans un document (et que plusieurs classes peuvent aussi être attribuées à un élément), les colonnes ont reçu des noms de classes au lieu d'ID. Par exemple, deux divs de barre latérale peuvent être empilées si nécessaire. Elles peuvent être très facilement remplacées par des ID si vous le souhaitez, pour autant que vous ne les utilisiez qu'une fois par document.

4) Si vous préférez que la navigation se trouve à droite et pas à gauche, faites flotter ces colonnes en sens opposé (toutes vers la droite au lieu de vers la gauche). Leur rendu s'effectuera dans l'ordre inverse. Il n'est pas nécessaire de déplacer les divs dans le code HTML source.

*/
.sidebar1 {
	float: left;
	width: 232px;
	padding-bottom: 5px;
	margin-top: 20px;
	margin-right: 8px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
}
.sidebar1 .menu_gauche_shadow {
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-bottom: 5px;
	margin-bottom: 10px;
}
.sidebar1 .menu_gauche {
	width: 228px;
	background-color: #FFF;
	background-image: url(../IMAGES_OK/Fond_titre_menu_page_int_03.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	padding-bottom: 10px;
}
.sidebar1 .menu_gauche p.menu {
	line-height: 40px;
	height: 40px;
	color: #52b777;
	background-image: url(../IMAGES_OK/separation_verte_07.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	padding-left: 30px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 5px;
}
.sidebar1 .menu_gauche p.menu a{
	color: #52b777;
}
.sidebar1 .menu_gauche p.menu a:hover {
	color: #287245;
	background-image: none;
	font-family: rosariobold;
	text-decoration: none;
}

.sidebar1 .menu_gauche p.menu a.menu_en_cours{
	color: #287245;
	background-image: none;
	font-family: rosariobold;
	text-decoration: none;
}
.sidebar1 .menu_gauche p.menu a.menu_en_cours:hover {
	color: #287245;
	background-image: none;
	font-family: rosariobold;
	text-decoration: none;
}


.sidebar1 .menu_gauche p.menu span {
	vertical-align:middle;
	display:inline-block;
	line-height:1.2; /* on rétablit le line-height */
	text-align:left;
	margin-top: -5px;
}
.sidebar1 .acces_rapide_shadow {
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-bottom: 5px;
}
.sidebar1 .acces_rapide {
	background-image: url(../IMAGES_OK/menu_gauche_fond_titre01_03.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	width: 228px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	margin: 0px;
	background-color: #FFF;
}
.sidebar1 .telecharger_shadow {
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-bottom: 5px;
	margin-top: 10px;
}
.sidebar1 .telecharger {
	background-image: url(../IMAGES_OK/menu_gauche_fond_titre02_13.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	width: 228px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 0px;
	margin: 0px;
	background-color: #FFF;
}
.sidebar1 .evenements_shadow {
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-bottom: 5px;
	margin-top: 10px;
}
.sidebar1 .evenements {
	background-image: url(../IMAGES_OK/menu_gauche_fond_titre02_13.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	width: 198px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 30px;
	background-color: #FFF;
	margin: 0px;
}
.sidebar1 .evenements h1 {
	color: #856542;
	font-size: 16px;
	font-weight: normal;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 15px;
	margin-left: -20px;
	line-height: 20px;
}
.sidebar1 .evenements p.gras {
	font-family: rosariobold;
	margin-right: 10px;
}
.sidebar1 .evenements img.cal  {
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: -30px;
	float: left;
}
.sidebar1 .evenements img.sep {
	padding: 0px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: -30px;
}
.sidebar1 .economie_shadow {
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	padding-bottom: 5px;
	margin-top: 10px;
	height: 57px;
	width: 227px;
	padding-right: 5px;
}
.sidebar1 .economie_shadow .economie h1 a {
	color: #85655A;
}
.sidebar1 .economie {
	background-image: url(../IMAGES_OK/menu_gauche_fond_titre02_13.jpg);
	background-position: left top;
	background-repeat: no-repeat;
	width: 228px;
	margin: 0px;
	background-color: #FFF;
	height: 57px;
	padding: 0px;
}
.sidebar1 a  {
	text-decoration: none;
	color: #666666;
}
.sidebar1 a:hover {
	text-decoration: underline;
	color: #666666;
}
.sidebar1 h1  {
	color: #856542;
	font-size: 16px;
	font-weight: normal;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 15px;
	margin-left: 10px;
	line-height: 20px;
}
.sidebar1 h2 {
	font-size: 16px;
	font-weight: normal;
	color: #FFF;
	line-height: 18px;
	height: 48px;
	margin: 0px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
}
.sidebar1 p  {
	color: #666666;
	margin-left: 10px;
	font-size: 14px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	text-align: left;
	line-height: 14px;
}
.sidebar1 p img.separation{
	margin-top: 4px;
	margin-bottom: 7px;
}
.sidebar1 img.picto {
	margin-right: 8px;
}
.content {
	width: 472px;
	float: left;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
}
.content .flash {
	background-image: url(../IMAGES_OK/milieu_flash_news_05.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 28px;
	width: 462px;
	color: #C9B59D;
	padding-left: 10px;
	padding-top: 30px;
	font-size: 14px;
}
.content .ariane, .content .breadcrumb {
	width: 462px;
	color: #856542;
	font-size: 12px;
	font-family: RosarioBold;
	text-transform:lowercase;
}
.content .ariane a, .content .breadcrumb a {
	color: #856542;
	text-decoration: none;
}
.content .ariane a:hover, .content .breadcrumb a:hover {
	color: #856542;
	text-decoration: underline;
}
.content .actualites {
	border: 1px solid #b4b4b4;
	margin-top: 15px;
	background-image: url(../IMAGES_OK/fond_titre_actualites_15.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	background-color: #FFF;
	padding: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
}
.content .actualites h1 {
	color: #FFF;
	font-size: 16px;
	text-transform: uppercase;
	margin: 0px;
	padding: 0px;
	font-weight: normal;
}
.content .actualites h2 {
	font-family: Georgia;
	font-size: 16px;
	color: #666633;
	font-weight: normal;
	padding: 0px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
	line-height: 16px;
}
.content .actualites h3 {
	color: #999;
	font-size: 11px;
	font-weight: normal;
	margin: 0px;
	padding: 0px;
}
.content .actualites h4 {
	font-family: Georgia;
	font-size: 14px;
	color: #287245;
	padding: 0px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	line-height: 16px;
}
.content .actualites p {
	font-size: 14px;
	color: #666;
	line-height: 16px;
	text-align: justify;
}
.content .actualites .lire_la_suite{
	color: #666633;
	text-align: right;
	display: block;
}
.content .actualites .lire_la_suite a {
	color: #666633;
	text-decoration: none;
}
.content .actualites .lire_la_suite a:hover {
	color: #666633;
	text-decoration: underline;
}
.content .actualites hr {
	color: #c5de9e;
	background-color: #c5de9e;
	height: 1px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
hr {
	color: #c5de9e;
	background-color: #c5de9e;
	height: 1px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}

.content .actualites li {
	font-family: rosarioregular;
	font-size: 14px;
	color: #666;
	margin-left: 30px;
	padding: 0px;
	margin-right: 20px;
	margin-top: 0px;
	margin-bottom: 5px;
	line-height: 16px;
}
.content .cdp {
	border: 1px solid #b4b4b4;
	margin-top: 5px;
	background-color: #FFF;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 10px;
	padding-right: 15px;
	padding-bottom: 10px;
	padding-left: 15px;
}
.content .cdp h1 img{
	line-height: 40px;
	margin: 0px;
	padding: 0px;
	float: right;
}
.content .cdp h1 {
	color: #287245;
	font-size: 20px;
	font-weight: normal;
	font-family: Georgia, "Times New Roman", Times, serif;
	line-height: 24px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding: 0px;
}
.content .cdp h1.souligne {
	color: #287245;
	font-size: 20px;
	margin: 0px;
	padding: 0px;
	font-weight: normal;
	font-family: Georgia, "Times New Roman", Times, serif;
	line-height: 25px;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	border-bottom-color: #287245;
	text-transform: uppercase;
}
.content .cdp h2 {
	font-family: Georgia;
	font-size: 16px;
	color: #287245;
	font-weight: bold;
	padding: 0px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	line-height: 18px;
}
.content .cdp h3 {
	color: #999;
	font-size: 11px;
	font-weight: normal;
	border-top-width: 1px;
	border-bottom-width: 1px;
	border-top-style: dotted;
	border-bottom-style: dotted;
	border-top-color: #CCC;
	border-bottom-color: #CCC;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	line-height: 20px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.content .cdp h3 .nom {
	color: #999;
	float: right;
}
.content .cdp h4 {
	font-family: Georgia;
	font-size: 16px;
	color: #287245;
	padding: 0px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	line-height: 20px;
	font-weight: normal;
}
.content .cdp h5 {
	color: #999;
	font-size: 14px;
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	line-height: 20px;
	padding: 0px;
	font-family: rosariobold;
	font-weight: normal;
}
.content .cdp h6 {
	color: #b6d18c;
	font-size: 12px;
	font-weight: normal;
	line-height: 12px;
	margin: 0px;
	padding-top: 20px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.content .cdp h6 .vert {
	font-family: rosariobold;
	font-weight: normal;
	color: #287245;
}
.content .cdp h6 a {
	color: #b6d18c;
	text-decoration: none;
}
.content .cdp h6 a:hover {
	text-decoration: underline;
}
.content .cdp .vignettes {
	margin-top: 10px;
}
.content .cdp table {
	margin: 0px;
	padding: 0px;
}
.content .cdp p.legende {
	font-size: 10px;
	color: #999;
	margin: 0px;
	padding: 0px;
	text-align: left;
	line-height: 10px;
}
.content .cdp p {
	font-size: 14px;
	color: #666;
	line-height: 1.4em;
	padding: 0px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	text-align: justify;
}
.content .cdp .lire_la_suite {
	color: #666633;
	text-align: right;
	display: block;
}
.content .cdp .lire_la_suite a {
	color: #666633;
	text-decoration: none;
}
.content .cdp .lire_la_suite a:hover {
	color: #666633;
	text-decoration: underline;
}
.content .cdp table.chiffres  td{
	font-size: 12px;
	color: #666;
	line-height: 14px;
	margin: 0px;
	padding: 3px;
}
.content .cdp table.form td {
	font-size: 14px;
	color: #666;
	line-height: 16px;
	margin: 0px;
	padding-top: 3px;
	padding-right: 3px;
	padding-bottom: 10px;
	padding-left: 3px;
}
.content .cdp p a {
	color: #666;
	text-decoration: underline;
}
.content .cdp p a:hover {
	color: #666;
	text-decoration: none;
}
.content .cdp p strong {
	font-family: 'rosariobold';
	font-weight: normal;
	color: #333;
}
.content .cdp form .submit{
	cursor: pointer;
	color: #287245;
	height: 25px;
	background-color: #287245;
	background-image: url(../IMAGES_OK/fond_over_menu2_03.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	font-family: rosarioregular;
	width: 160px;
	font-size: 12px;
}
.content .cdp form .submit:hover {
	color: #000;
	font-family: rosariobold;
	font-weight: normal;
	width: 160px;
}
.content .cdp select {
	width: 145px;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding: 0px;
	color: #3A8E5A;
	height: 25px;
	outline:0;
	border: 1px solid #999;
	background-color: #FFF;
}
.content .cdp #CV {
	color: #3A8E5A;
}
.content .cdp #LM {
	color: #3A8E5A;
}
.content .cdp .puces {
	font-family: rosarioregular;
	font-size: 14px;
	color: #666;
	margin-left: 30px;
	padding: 0px;
	margin-right: 20px;
	margin-top: 5px;
	margin-bottom: 5px;
	line-height: 16px;
}
.content .cdp .retour{
	color: #b6d18c;
	text-align: right;
	display: block;
	margin-bottom: 40px;
}
.content .cdp .retour a {
	color: #b6d18c;
	text-decoration: none;
}
.content .cdp .retour a:hover {
	color: #b6d18c;
	text-decoration: underline;
}
.content .cdp hr {
	color: #c5de9e;
	background-color: #c5de9e;
	height: 1px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
}
.content .cdp map area {
	outline:0;
}
.sidebar2 {
	float: left;
	width: 232px;
	margin-top: 20px;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
	margin-left: 8px;
}
.sidebar2 .rechercher {
	background-image: url(../IMAGES_OK/rechercher_08.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	outline:0;
}
.sidebar2 .rechercher form a img.validation {
	cursor: Pointer;
	outline:0;
}
.sidebar2 form #recherche {
	height: 18px;
	width: 180px;
	color: #666666;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 10px;
	background-image: url(../IMAGES_OK/rechercher_08.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	outline:0;
}
.sidebar2 form #cntnt01searchinput {
	height: 18px;
	width: 180px;
	color: #666666;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin: 0px;
	padding-top: 5px;
	padding-right: 0px;
	padding-bottom: 5px;
	padding-left: 10px;
	background-image: url(../IMAGES_OK/rechercher_08.jpg);
	background-repeat: no-repeat;
	background-position: left center;
	outline:0;
}

.sidebar2 .devises_shadow {
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	padding-bottom: 5px;
}
.sidebar2 .devises {
	color: #FFF;
	margin-top: 15px;
	width: 228px;
	background-color: #52b777;
}
.sidebar2 .devises #ok {
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	background-image: url(../IMAGES_OK/bouton_ok_devises_29.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 25px;
	width: 31px;
	cursor: Pointer;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 25px;
	padding: 0px;
	outline:0;
}
.sidebar2 .devises #chiffre {
	background-image: url(../IMAGES_OK/fond_champ_devises_21.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 25px;
	width: 192px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #666666;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
	outline:0;
}
.sidebar2 .devises #resultat {
	background-image: url(../IMAGES_OK/fond_champ_devises_21.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 25px;
	width: 192px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	color: #66666;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 10px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
	outline:0;
}
.sidebar2 .devises select {
	width: 145px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 10px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	padding: 0px;
	color: #3A8E5A;
	height: 25px;
	outline:0;
}
.sidebar2 .taux_shadow {
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	padding-bottom: 5px;
}
.sidebar2 .taux {
	width: 218px;
	color: #666666;
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	background-color: #FFF;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 10px;
}
.sidebar2 .taux table td {
	margin: 0px;
	padding: 0px;
	font-size: 15px;
	line-height: 17px;
}
.sidebar2 h1 {
	font-size: 15px;
	color: #FFF;
	font-weight: normal;
	margin: 0px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 10px;
}
.sidebar2 h2 {
	color: #52B777;
	font-size: 15px;
	font-weight: normal;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin: 0px;
}
		
		
/* ~~ Styles de pied de page ~~ */
.footer {
	position: relative;/* donne hasLayout à IE6 de façon à permettre un effacement correct */
	clear: both; /* cette propriété d'effacement force le .container à comprendre où se terminent les colonnes et à les contenir */
	background-image: url(../IMAGES_OK/fond_footer02_56.jpg);
	background-repeat: repeat-x;
	background-position: center bottom;
	height: 250px;
	padding-top: 10px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 0;
}
.footer .nav_diapo {
	color: #666633;
	text-align: right;
	float: right;
	margin-right: 10px;
}
.footer_container {
	width: 960px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	height: 147px;
}
.footer .monnaie_shadow {
	height: 141px;
	width: 232px;
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	float: left;
}
.footer .monnaie_shadow a {
	text-decoration: none;
	cursor: Pointer;
}
.footer .monnaie {
	background-image: url(../IMAGES_OK/visuel_monnaie_50.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 137px;
	width: 228px;
	cursor: Pointer;
}
.footer .patrimoine_shadow {
	height: 141px;
	width: 232px;
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	float: left;
	margin-left: 10px;
}
.footer .patrimoine {
	background-image: url(../IMAGES_OK/visuel_patrimoine_51.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 137px;
	width: 228px;
	cursor: Pointer;
}
.footer .banque_shadow {
	height: 141px;
	width: 232px;
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	float: left;
	margin-left: 10px;
}
.footer .banque {
	background-image: url(../IMAGES_OK/visuel_banque_53.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 137px;
	width: 228px;
}
.footer .actu_shadow {
	height: 141px;
	width: 232px;
	background-image: url(../IMAGES_OK/shadow_menu.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	float: left;
	margin-left: 10px;
}
.footer .actu_shadow a {
	text-decoration: none;
}
.footer .actu {
	background-image: url(../IMAGES_OK/visuel_actu_54.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	height: 137px;
	width: 228px;
	cursor: Pointer;
}
.footer h1  {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 16px;
	font-weight: normal;
	color: #FFF;
	background-image: url(../IMAGES_OK/fond_titre_footer_50.png);
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 10px;
	margin: 0px;
}
.footer .pdp {
	text-transform: uppercase;
	color: #265b64;
	font-size: 11px;
	text-align: center;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	font-family: 'rosariobold';
}
.footer .pdp a {
	text-decoration: none;
	color: #265b64;
}
.footer .pdp a:hover {
	text-decoration: underline;
	color: #265b64;
}
footer.news-meta {
font-size:12px;
color:#666;
}
/* ~~ Classes flottant/effacement diverses ~~ */
.fltrt {  /* cette classe peut servir à faire flotter un élément depuis la droite sur votre page. L'élément flottant doit précéder l'élément à côté duquel il doit apparaître sur la page. */
	float: right;
	margin-bottom: 20px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 10px;
}
.fltrtCopie {
	float: right;
	margin-bottom: 20px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 10px;
}
.fltlft { /* cette classe peut servir à faire flotter un élément depuis la gauche sur votre page. L'élément flottant doit précéder l'élément à côté duquel il doit apparaître sur la page. */
	float: left;
	margin-bottom: 10px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 10px;
	margin-left: 0px;
}
.fltlftCopie {
	float: left;
	margin-bottom: 20px;
	padding: 0px;
	margin-top: 0px;
	margin-right: 10px;
	margin-left: 10px;
}
.clearfloat { /* cette classe peut être placée sur une div <br /> ou vide, en tant qu'élément final suivant la dernière div flottante (dans le .container) si le paramètre .footer est supprimé ou retiré du .container */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/* line 7, ../sass/lightbox.sass */
body:after {
  content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
  display: none;
}

/* line 11, ../sass/lightbox.sass */
.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

/* line 20, ../sass/lightbox.sass */
.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}
/* line 28, ../sass/lightbox.sass */
.lightbox .lb-image {
  display: block;
  height: auto;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  -ms-border-radius: 3px;
  -o-border-radius: 3px;
  border-radius: 3px;
}
/* line 32, ../sass/lightbox.sass */
.lightbox a img {
  border: none;
}

/* line 35, ../sass/lightbox.sass */
.lb-outerContainer {
  position: relative;
  background-color: white;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 44, ../sass/lightbox.sass */
.lb-container {
  padding: 4px;
}

/* line 47, ../sass/lightbox.sass */
.lb-loader {
  position: absolute;
  top: 43%;
  left: 0%;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

/* line 56, ../sass/lightbox.sass */
.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../img/loading.gif) no-repeat;
}

/* line 63, ../sass/lightbox.sass */
.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

/* line 71, ../sass/lightbox.sass */
.lb-container > .nav {
  left: 0;
}

/* line 74, ../sass/lightbox.sass */
.lb-nav a {
  outline: none;
}

/* line 77, ../sass/lightbox.sass */
.lb-prev, .lb-next {
  width: 49%;
  height: 100%;
  cursor: pointer;
  /* Trick IE into showing hover */
  display: block;
}

/* line 84, ../sass/lightbox.sass */
.lb-prev {
  left: 0;
  float: left;
}
/* line 87, ../sass/lightbox.sass */
.lb-prev:hover {
  background: url(../img/prev.png) left 48% no-repeat;
}

/* line 90, ../sass/lightbox.sass */
.lb-next {
  right: 0;
  float: right;
}
/* line 93, ../sass/lightbox.sass */
.lb-next:hover {
  background: url(../img/next.png) right 48% no-repeat;
}

/* line 96, ../sass/lightbox.sass */
.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 4px;
  -webkit-border-bottom-left-radius: 4px;
  border-bottom-left-radius: 4px;
  -moz-border-radius-bottomright: 4px;
  -webkit-border-bottom-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
/* line 38, ../../../../.rvm/gems/ruby-1.9.3-p392/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/utilities/general/_clearfix.scss */
.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

/* line 103, ../sass/lightbox.sass */
.lb-data {
  padding: 0 4px;
  color: #bbbbbb;
}
/* line 106, ../sass/lightbox.sass */
.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}
/* line 111, ../sass/lightbox.sass */
.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}
/* line 115, ../sass/lightbox.sass */
.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}
/* line 121, ../sass/lightbox.sass */
.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../img/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
}
/* line 130, ../sass/lightbox.sass */
.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}