/* CSS assembled by Marko Mihelcic at mcville and James Koster from sixshootermedia*/

body {
	margin:0;
	font-family:"Trebuchet MS", Arial, Verdana;
	font-size:0.9em;
	color:#555555;
	background-color:#FFFFFF;
	text-align:left;
}



a {
	color:#4D87CE;
	font-weight:bold;
	text-decoration:none;
}
a:hover {
	color:#2a65ad;
}

ol,ul {

}

li {
	list-style-image:url(../images/backgrounds/li.gif);
	line-height:10px;
	text-align:left;
}

#menu {
	width:100%;
	padding-top:10px;
	padding-bottom:10px;
	background-color:#FFFFFF;
	margin-bottom:10px;
	color:#FFFFFF;
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-variant:small-caps;
	background-image:url(../images/backgrounds/back.png);
}
#menu a {
	color:#FFFFFF;
	text-decoration:none;
	padding:10px;
	padding-top:20px;
	padding-bottom:20px;
	
}
#menu a:hover {
	border-bottom:1px solid #ffffff;
	border-left:1px solid #243482;
	border-right:1px solid #243482;
	padding-left:9px;
	padding-right:9px;
	color:#000000;
	background-color:#FFFFFF;
	background-image:url(../images/backgrounds/hover.jpg);
}

#header {
	width:750px;
	margin:0 auto 0 auto;
	margin-bottom:20px;
}
#header h1 {
	font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
	font-size:20px;
	text-transform:uppercase;
	font-weight:normal;
	margin:0;
	padding:0;
	padding-top:5px;
	color:#253183;
	margin-bottom:10px;
	text-align:left;
}
#header h2 {
	font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
	font-size:15px;
	text-transform:uppercase;
	text-align:right;
	font-weight:normal;
	margin:0;
	padding:0;
	color:#000000;
	border-bottom:1px solid #eeeeee;
}

#content {
	width:720px;
	text-align:left;
}

.introduction {
	font-family:Helvetica, Arial, sans-serif;
	line-height:10px;
	font-size:12px;
	color:#99B198;
	text-indent:15px;
	background-image:url(../images/backgrounds/desc.jpg);
	background-position:bottom left;
	padding-left:0;
	padding-right:200px;
	padding-bottom:15px;
	padding-top:0;
	background-repeat:no-repeat;
	
}
.logo {
	float:left;
	margin-right:30px;
}
.clearer {
	clear:both;
}

#sidebar {

	width:160px;
	float:right;
	font-size:95%;
	color:#253183;
	text-align:left;
}
#sidebar h1 {
	font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
	font-size:20px;
	text-transform:uppercase;
	font-weight:normal;
	border-bottom:1px solid #eeeeee;
	color:#253183;
	text-align:right;
}
.submenu {
}
.submenu a {
	display:block;
	width:100%;
	background-image:url(../images/backgrounds/submenua.png);
	background-position:right;
	background-repeat:no-repeat;
	padding:5px;
	padding-right:0;
}
.submenu a:hover {
	background-color:#eeeeee;
	background-image:url(../images/backgrounds/submenua_hover.jpg);
	background-repeat:repeat-y;
}
#mainbar {
	margin-right:185px;
	padding-right:35px;
	background-image:url(../images/backgrounds/mainbar.jpg);
	background-position:top right;
	background-repeat:no-repeat;
}

#mainbar h1 {
	font-family:"Century Gothic", "Trebuchet MS", "Arial Narrow", Arial, sans-serif;
	font-size:15px;
	text-transform:uppercase;
	font-weight:normal;
	border-bottom:1px solid #eeeeee;
	color:#253183;
}

#mainbar p {
	padding:5px;
	line-height:20px;
}

#mainbar .articleimg {
	float:right;
	padding:5px;
	border:1px solid #eeeeee;
	margin-left:20px;
	margin-top:10px;
	margin-bottom:10px;
}
#mainbar .articleimg2 {

	padding:5px;
	border:1px solid #eeeeee;
	margin-left:20px;
	margin-top:10px;
	margin-bottom:10px;
}



#footer {
	width:80%;
	background-color:#253183;
	border-top:1px solid #81C0FF;
	border-bottom:5px solid #253169;
	padding-top:5px;
	padding-bottom:5px;
	color:#FFFFFF;
}
#footer a {
	color:#81C0FF;
}
#footer a:hover {
	color:#AFD7FF;
}


/* ==================================================================
   PIED DE PAGE SUR TROIS COLONNES

   Ce site portait une ou plusieurs barres laterales a largeur fixe :
   sur telephone, elles poussaient le contenu hors de l'ecran. Leur
   contenu est desormais dans le pied de page, reparti sur trois
   colonnes qui se replient l'une sous l'autre quand la place manque.
   ================================================================== */

*, *::before, *::after { box-sizing: border-box; }
img, iframe, video, table { max-width: 100%; }
img { height: auto; }

.pied-3col {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0 28px;
}
.pied-col {
	flex: 1 1 240px;
	min-width: 0;
}
.pied-col > *:first-child { margin-top: 0; }

/* la colonne de contenu reprend toute la largeur */
#mainbar {
	float: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

/* les conteneurs gardent leur largeur, sans la subir */
#content {
	width: auto;
	max-width: 720px;
}

/* le pied ajoute aux pages qui n'en avaient pas */
.pied-ajoute {
	width: auto;
	max-width: 720px;
	margin: 24px auto 0 auto;
	padding: 18px 10px;
	clear: both;
}

@media screen and (max-width: 760px) {
	.pied-col { flex: 1 1 100%; }
}