/* CSS Document */
/* Mise en forme du site d'IRIS WebTools */
/* www.iris-interactive.fr */

body {
	background-color:#71999B;
	font-family:'Trebuchet MS', Verdana, sans-serif;
	font-size:11px;
	margin:0;
	padding:0;
	text-align:center;
}

#page {
	width:768px;
	text-align:left;
	margin:0 auto 5px;
	padding:0;
}


/* -------------------------------------------------------------------------------------------- */
/* Déclarations de styles applicables à la barre de fonctions right top */
/* -------------------------------------------------------------------------------------------- */

#fonctions {
	background:#000000 url(../images/bg-fonctions.gif) no-repeat left top;
	text-align:right;
	height:26px;
	padding:4px 5px 0;
}
html>body #fonctions {
	height:22px;
}
#fonctions ul {
	margin:0;
	padding:0;
	display:inline;
	float:right;
}
#fonctions li {
	margin:0;
	padding:0 5px;
}
#fonctions li, #fonctions li a {
	display:block;
	float:left;
	height:16px;
	width:16px;
	text-decoration:none;
}
#fonctions li a.home {
	background:#000000 url(../images/bg-fonc-a.gif) no-repeat 0 0;
}
#fonctions li a:hover.home {
	background:#000000 url(../images/bg-fonc-a.gif) no-repeat 0 -16px;
}
#fonctions li a.mail {
	background:#000000 url(../images/bg-fonc-a.gif) no-repeat -16px 0;
}
#fonctions li a:hover.mail {
	background:#000000 url(../images/bg-fonc-a.gif) no-repeat -16px -16px;
}
#fonctions li a.send {
	background:#000000 url(../images/bg-fonc-a.gif) no-repeat -32px 0;
}
#fonctions li a:hover.send {
	background:#000000 url(../images/bg-fonc-a.gif) no-repeat -32px -16px;
}
#fonctions li a span {
	position:absolute;
	left:-999em;
}
#fonctions li a:hover span {
	left:auto;
	white-space:nowrap;
	background-color:#000000;
	color:#FFFFFF;
	border:1px solid #FFFFFF;
	text-decoration:none;
	padding:2px 5px;
	margin:18px 0 0;
}
@media screen and (min-width: 768px) {
	#fonctions li {
		margin-right:5px !important;
	}
	#fonctions li, #fonctions li a {
		display:inline !important;
		float:none !important;
	}
}


/* -------------------------------------------------------------------------------------------- */
/* Déclarations de styles applicables à l'entête (logo + dégradé) */
/* -------------------------------------------------------------------------------------------- */

#header {
	background:#71999B url(../images/bg-header.gif) no-repeat left top;
	height:131px;
	padding:0;
	margin:0;
}
#header h1 {
	position:absolute;
	left:-999em;
}
div.logo {
	display:block;
	width:200px;
	height:124px;
	padding:9px 0 0 10px;
}
div.logo a {
	display:block;
	width:200px;
	height:115px;
	text-decoration:none;
}
div.logo a:hover {
	background-color:transparent;
}
div.logo a span {
	position:absolute;
	left:-999em;
	text-decoration:none;
	background:#000000 url(../images/bg-logo-span.gif) no-repeat 3px 3px;
	border:1px solid #FFFFFF;
	color:#FFFFFF;
	padding:2px 5px 2px 20px;
	cursor:pointer
}
div.logo a:hover span {
	left:auto;
}


/* -------------------------------------------------------------------------------------------- */
/* Déclarations de styles applicables à la barre de navigation */
/* -------------------------------------------------------------------------------------------- */

#navigation {
	background:#000000 url(../images/bg-navigation.gif) no-repeat left top;
	height:30px;
	padding:4px 5px 0;
	font-size:12px;
}
html>body #navigation {
	height:26px;
}
@media screen and (min-width: 768px) {
	#navigation {
		background:#000000 url(../images/bg-navigation-opera.gif) no-repeat left top;
		height:30px !important;
		height:60px !important;
	}
}
#navigation ul {
	margin:0;
	padding:0; 
	list-style:none;
}
#navigation li {
	display:block;
	float:left;
	background:url(../images/bg-navigation-li.gif) no-repeat right top;
	padding:0 6px; 
	margin:0;
	list-style:none;
}

#navigation a {
	color:#FFFFFF;
	text-decoration:none;
	display:block;
	padding:1px;
}
#navigation a:hover {
	border-bottom:2px solid #C0D040;
}
#navigation a:active {
	border-bottom:2px solid #D62B68 !important;
}


/* -------------------------------------------------------------------------------------------- */
/* Déclarations de styles applicables aux sous menus */
/* -------------------------------------------------------------------------------------------- */

#navigation li ul { 
	position:absolute;
	background-color:#000000;
	width:155px;
	left:-999em; 
	text-align:left;
}

#navigation li:hover ul, #navigation li.sfhover ul { 
	left:auto;
}
#navigation li:hover a, #navigation li.sfhover a { 
	border-bottom:2px solid #C0D040;
}
#navigation li ul li {
	background-image:none;
	width:155px;
	padding:1px;
	text-align:left;
}
#navigation li ul li a {
	width:153px;
	padding:5px;
	color:#CFCFCF;
	border:none !important;
}
html>body #navigation li ul li, #navigation li ul li a {
	width:143px;
}


/* -------------------------------------------------------------------------------------------- */
/* Nous créons une navigation spécifique à Opera, les menus déroulants verticaux passant 
sous l'animation Flash */
/* La nouvelle navigation est donc horizontale, et permet de conserver l'ensemble du menu 
cliquable et de visualiser l'animation */
/* -------------------------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {
	#navigation ul {
		background-color:transparent !important;
		clear:both;
		width:768px !important;
		display:inline !important;
		float:left !important;
	}
	#navigation li ul {
		background-color:transparent !important;
		clear:both;
		width:768px !important;
		display:inline !important;
		float:left !important;
	}
	#navigation li ul li, #navigation li ul li a {
		width:auto !important;
	}
}
#navigation li ul li a:hover {
	color:#FFFFFF;
	background:url(../images/bg-navigation-li-a.gif) repeat left top;
}
#navigation li ul li a:active {
	color:#FFFFFF;
	background-image:none;
	background-color:#D62B68;
	border:none !important;
}


/* -------------------------------------------------------------------------------------------- */
/* Déclarations de styles applicables à la zone d'animation en page d'accueil */
/* -------------------------------------------------------------------------------------------- */

#animation {
	background:url(../images/bg-animation.gif) no-repeat left top;
	height:203px;
	padding:8px 9px 10px;
}
html>body #animation {
	height:185px;
}
@media screen and (min-width: 768px) {
	#animation {
		height:203px !important;
	}
}


/* -------------------------------------------------------------------------------------------- */
/* Déclarations de styles applicables au chemin de navigation */
/* -------------------------------------------------------------------------------------------- */

#wire {
	background:#71999B url(../images/bg-wire.gif) no-repeat left bottom;
	margin:0;
	padding:0 5px 5px;
	font-size:10px;
}
#wire ul {
	padding:0;
	margin:0;
	list-style:none;
	display:inline;
}
#wire li {
	background:url(../images/list-wire.gif) no-repeat 0 4px;
	padding:0 5px 0 12px;
	margin:0;
	list-style:none;
	display:inline;
}
#wire a {
	color:#D62B68;
	text-decoration:none;
}
#wire a:hover {
	text-decoration:underline;
}


/* -------------------------------------------------------------------------------------------- */
/* Déclarations de styles applicables au contenu */
/* -------------------------------------------------------------------------------------------- */

#content {
	background:#71999B url(../images/bg-content.gif) repeat-y left top;
	margin:0;
	padding:6px 6px 5px;
	color:#465253;
	text-align:justify;
}
#content h2 {
	background:#FFFFFF url(../images/bg-h2.gif) no-repeat 0 2px;
	font-size:20px;
	padding:0 0 5px 35px;
	margin:0 5px 5px;
	color:#E30D8D;
	border-bottom:1px dotted #A7BB26;
}
#content h3 {
	font-size:16px;
	padding:0 5px 10px;
	margin:0;
	color:#D62B68;
}
#content h4 {
	font-size:14px;
	padding:0 5px 10px;
	margin:0;
	color:#A7BB26;
}
#content h5 {
	background:#7A96DF url(../images/bg-h5.gif) no-repeat 5px 8px;
	font-size:13px;
	padding:3px 20px;
	margin:0 5px 10px;
	color:#FFFFFF;
}
#content p {
	padding:0 5px 10px;
	margin:0;
}
#content p.img_news {
	background-color:#ECEADD;
	text-align:center;
	padding:0;
	margin:0 5px 10px;
}
#content ul {
	padding:0 5px 10px;
	margin:0;
}
#content li {
	background:url(../images/list-content.gif) no-repeat 0 4px;
	list-style:none;
	padding:0 0 5px 15px;
	margin:0;
}
#content .col2 ul.competences li, #content .col1 ul.competences li {
	background-image:none;
	padding:0;
	display:block;
	float:left;
	height:40px;
}
#content .col2 ul.competences li {
	width:44px;
}
#content .col1 ul.competences li {
	width:41px;
}
html>body #content .col2 ul.competences li {
	width:43px;
}
html>body #content .col1 ul.competences li {
	width:40px;
}
#content ul.competences li a img {
	border:none;
}
#content dl {
	background:url(../images/bg-dl.gif) no-repeat 5px 4px;
	padding:0 5px 10px 25px;
	margin:0;
}
#content dl.tools {
	background:url(../images/bg-dl-tools.gif) no-repeat 5px 2px;
}
#content dt {
	padding:0 0 5px;
	margin:0;
	color:#D62B68;
	font-weight:bold;
	font-size:12px;
}
#content dd {
	padding:0 0 5px;
	margin:0;
	font-size:10px;
}
#content blockquote {
	background-color:#ECE9D8;
	color:#3A4142;
	padding:10px;
	margin:10px 5px;
	font-size:12px;
}
#content a {
	color:#A7BB26;
	text-decoration:none;
}
#content a:hover {
	text-decoration:underline;
}
#content dt a {
	color:#D62B68;
}
#content i {
	color:#858585;
	font-style:normal;
}
#content small {
	color:#858585;
	font-size:10px;
}
#content strong {
	color:#D62B68;
	font-weight:normal;
}
#content em {
	color:#465253;
	font-style:normal;
}
#content acronym {
	border-bottom:1px dotted #D62B68;
	cursor:help;
}
#content form {
	padding:0 5px 5px;
	margin:0;
}
#content form, input, select, textarea, fieldset, legend {
	font-family:'Trebuchet MS', Verdana, sans-serif;
	font-size:11px;
}
#content legend {
	color:#465253;
}
#content input, textarea {
	background-color:#E4EBBC;
	border:none
}
#content fieldset {
	border:1px solid #E4EBBC;
	padding:5px;
	margin-bottom:5px;
}
#content fieldset.small {
	width:182px;
}
html>body #content fieldset {
	clear:both;
}
html>body #content fieldset.small {
	width:167px;
	float:left;
	clear:none;
}
#content input#strMessengerAction {
	background-color:#DF1879;
	color:#FFFFFF;
}
#content form.search {
	padding:15px;
	margin:0;
	text-align:center;
}
#content form.search input.text, #content form.search input.submit {
	border:1px solid #E4EBBC;
	background:#FFFFFF url(../images/bg-search-input.gif) repeat-x left bottom;
	margin:10px 0;
}
#content form.search input.text {
	width:215px;
}
#content form.search input.radio {
	background-color:transparent;
}
#content table, tr, td {
	font-family:'Trebuchet MS', Verdana, sans-serif;
	font-size:11px;
	vertical-align:top;
}
#content table.ressources {
	width:567px;
}
#content table.ressources th {
	background:#000000 url(../images/bg_table-ressources_th.gif) repeat-x left top;
	border-bottom:1px solid #999999;
	border-top:1px solid #999999;
	padding:5px;
	font-weight:normal;
	color:#FFFFFF;
}
#content table.ressources h4 {
	margin:5px -10px 10px -5px;
	padding:0 0 5px 5px;
	background-image:none;
	border-bottom:1px solid #999999;
	font-size:13px;
	color:#DF1879;
}
html>body #content table.ressources h4 {
	margin:5px 0 10px;
	padding:0 0 5px 0;
}
#content table.navlist {
	width:557px;
	margin:0 5px;
	clear:both;
}
#content table.navretour {
	width:747px;
	margin:0 5px;
	clear:both;
}
#content table.navretour a {
	color:#DF1879;
}
#content table.navlist td, 
#content table.navretour td {
	background:#000000 url(../images/bg_table-ressources_th.gif) repeat-x left top;
	padding:5px;
	font-weight:normal;
	color:#FFFFFF;
}
#content table.navlist td.first {
	width:200px;
	text-align:left;
}
#content table.navlist td.second {
	text-align:center;
}
#content table.navlist td.third {
	width:200px;
	text-align:right;
}
#content table.navlist td.first a, 
#content table.navlist td.third a, 
#content table.navretour a.back {
	padding:0 15px;
	color:#DF1879;
	text-decoration:none;
}
#content table.navlist td.first a, 
#content table.navretour a.back {
	background:url(../images/a-list-first.gif) no-repeat left 5px;
}
#content table.navlist td.third a {
	background:url(../images/a-list-third.gif) no-repeat right 5px;
}
#content table.navlist td.first a:hover, 
#content table.navlist td.third a:hover, 
#content table.navretour a:hover.back {
	text-decoration:underline;
}


#content a.ref {
	color:#000000;
	font-size:11px;
}
#content a:hover.ref {
	text-decoration:none;
	color:#DF1879;
}
#content a.ref img {
	border:3px solid #EAE9D8;
}
#content a:hover.ref img {
	border:3px solid #DF1879;
}

/* Déclarations de styles gérant le colonnage multiple ---------------------------------------- */

#content .col1, #content .col2, #content .col3 {
	float:left;
	margin:0;
}
#content .col1 {
	width:189px;
}
#content .col2 {
	width:378px;
}
#content .col3 {
	width:567px;
}


/* -------------------------------------------------------------------------------------------- */
/* Déclarations de styles applicables au pied de page */
/* -------------------------------------------------------------------------------------------- */

#foot {
	background:#71999B url(../images/bg-foot.gif) no-repeat left top;
	margin:0;
	padding:5px;
	font-size:10px;
	text-align:center;
}
#foot p {
	color:#E7EEEE;
	padding:0;
	margin:0;
}
#foot a {
	color:#E7EEEE;
	text-decoration:none;
	border:none;
}
#foot a:hover {
	text-decoration:underline;
}
#foot a img {
	border:none;
}


/* -------------------------------------------------------------------------------------------- */
/* Déclarations de styles génériques */
/* -------------------------------------------------------------------------------------------- */

.spacer {
	width:100%;
	clear:both;
	font-size:1px;
}
.center {
	text-align:center;
}


/* -------------------------------------------------------------------------------------------- */
/* rollover jolis sur liens avec title */
/* -------------------------------------------------------------------------------------------- */

div.nicetitle {
	z-index:1000;
	position: absolute;
	overflow: hidden;
	width: auto;
	text-align: left;
}
div.nicetitle .text {
	color: #FFFFFF;
	font-weight: bold;
}

div.nicetitle div {
	background: #000000;
	padding: .6em;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	font-size: .8em;
	color: #FFFFFF;
}