html {
	height: 100%;
}
body {
	font-family: "Helvetica", "Trebuchet MS", Arial, _sans;
	height: 100%;
	font-size: 0.8em;
	color: #333333;
	margin: 0;
	padding: 0;
}


/*** GLOBAL **/

a {
	text-decoration: none;
	outline: none;
}
a:hover {
	text-decoration: underline;
}
p {
	margin: 4px 0;
}
p.entete {
	margin-top: 10px;
	font-weight: bold;
}
.white-border {
	border-bottom: 1px solid #FFFFFF;
}
.gray-border {
	border-bottom: 1px solid #EEEEEE;
}
.list-item {
	display: block;
	padding: 7px 0;
	margin-bottom: 7px;
}
.clear { clear: both; }

/*** CONTAINERS **/

#the-big-img {
	position: absolute;
	left: 0;
	bottom: 20px;
}

#content {
	/*border: 1px red solid; /** TODO : DEBUG **/
	position: absolute;
	left: 400px;
	bottom: 24px;
	height: 620px;
}

#dynamic-content {
	padding: 0 30px;
}

#footer {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 6px 0;
	background: #000000;
	color: #CCCCCC;
	font-size: 11px;
}
#footer a {
	color: #CCCCCC;
}

#footer .signature {
	float: left;
	margin: 0 0 0 15px;
}

#footer .menu {
	float: left;
	margin: 0 0 0 200px;
}




/*** TITLES **/

h1 {
	font-variant: small-caps;
	font-weight: normal;
	font-size: 1.5em;
	
}

h2 {
	font-variant: small-caps;
	font-weight: normal;
	font-size: 1.2em
}


/*** Actus **/

.actu-head {
	background: url(../images/plus-btn.png) center right no-repeat;
	cursor: pointer;
}
.actu-body {
	display:none;
}




/**** MENU **/



#zone-menu-container
{
	position: absolute;
	bottom: 20px;
	z-index: 3;
}

#zone-menu
{
	height: 635px;
	width: 100px;
}

#menu-container,
#menu-container ul,
#menu-container li {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 1em;
}
#menu-container {
	position: absolute;
	background: #000000;
	color: #FFFFFF;
	z-index: 10;
	margin: 0;
	padding: 10px;
	overflow: hidden;

}
#menu-container li {
	float: left;
}
#menu {
	display: none;
}
#menu-title a {
	display: block;
	float: left;
	color: #FFFFFF;
	padding: 1px 3px;
	margin-right: 10px;
}
#menu li {
	list-style: none;
	float: left;
	margin-top: 5px;
	text-transform: uppercase;
	border-left: 1px #CCCCCC dotted;
}
#menu li li {
	float: none;
	border: none;
	text-transform: none;
}
#menu li ul {
	margin-left: 10px;
	padding: 0;
}
#menu a {
	display: block;
	color: #FFFFFF;
	padding: 1px 3px 1px 20px;
	margin: 0 10px;
}
#menu ul .sub a {
	background: url(../images/white-arrow.gif) no-repeat 6px 6px;
}
#menu li#menu-close {
	float: right;
	border: none;
}
#menu li#menu-close a {
	padding: 0;
	margin: 0;
}
/***/
#menu .pink a {
	background: url(../images/pink-arrow.png) no-repeat transparent;
}
#menu .pink a:hover {
	background-color: #c82261; 
	text-decoration: none;
}
#menu .pink ul a:hover {
	background-color: transparent;
	color: #c82261;
}
/***/
#menu .blue a {
	background: url(../images/blue-arrow.png) no-repeat transparent;
}
#menu .blue a:hover {
	background-color: #0063b9; 
	text-decoration: none;
}
#menu .blue ul a:hover {
	background-color: transparent;
	color: #0063b9;
}
/***/
#menu .green a {
	background: url(../images/green-arrow.png) no-repeat transparent;
}
#menu .green a:hover {
	background-color: #7b9100; 
	text-decoration: none;
}
#menu .green ul a:hover {
	background-color: transparent;
	color: #7b9100;
}

/***/
#menu .yellow a {
	background: url(../images/yellow-arrow.png) no-repeat transparent;
}
#menu .yellow a:hover {
	background-color: #d0a024; 
	text-decoration: none;
}
#menu .yellow ul a:hover {
	background-color: transparent;
	color: #d0a024;
}

/** COLORS 
 vert : #7b9100
 rose : #c82261
 jaune : #d0a024
 blue : #0063b9
*/



/*** PLUGINS **/

.scrollable {

	/* required settings */
	position:relative;
	width: 720px;
	height: 300px;
	overflow: hidden;
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accommodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:relative;
}

/*
	a single item. must be floated in horizontal scrolling.
	typically, this element is the one that *you* will style
	the most.
*/
.items div.page {
	float:left;
	width: 720px;
	margin-right: 30px;
}

/* position and dimensions of the navgator */
#list-items-nav {
	margin-left:328px;
	width:200px;
	height:20px;
}


/* items inside navgator */
#list-items-nav a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../images/navigator-dot.png) 0 0 no-repeat;
	display:block;
	font-size:1px;
}

/* mouseover state */
#list-items-nav a:hover {
	background-position:0 -8px;      
}

/* active state (current page state) */
#list-items-nav a.active {
	background-position:0 -16px;     
}
.tooltip {
	background: #000000;
	padding: 10px;
	width: 261px;
	display:none;
	color:#fff;
	text-align:left;
	font-size:12px;	
	line-height: 2;
}

.tooltip img {
	width: 260px;
	margin-bottom: 3px;
}
.tooltip a {
	color: #FF007D;
}