/*
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 3.0 License

Name       : Big Business
Description: A two-column, fixed-width design with a bright color scheme.
Version    : 1.0
Released   : 20120210
*/

* {
	margin: 0;
	padding: 0;
}

a {
	text-decoration: underline;
	color: #0F8C8C;
}

a:hover {
	text-decoration: none;
}

body {
	font-size: 11.5pt;
	color: #5C5B5B;
	line-height: 1.75em;
	background: #E0DCDC url(images/img01.gif) repeat-x top left;
}

body,input {
	font-family: Georgia, serif;
}

strong {
	color: #2C2B2B;
}

br.clearfix {
	clear: both;
}

h1,h2,h3,h4 {
	font-weight: normal;
	letter-spacing: -1px;
}

h2 {
	font-size: 2.25em;
}

h2,h3,h4 {
	color: #2C2B2B;
	margin-bottom: 1em;
}

h3 {
	font-size: 1.75em;
}

h4 {
	font-size: 1.5em;
}

img.alignleft {
	margin: 5px 20px 20px 0;
	float: left;
}

img.aligntop {
	margin: 5px 0 20px 0;
}

img.pic {
	padding: 5px;
	border: solid 1px #D4D4D4;
}

p {
	margin-bottom: 1.5em;
}

ul {
	margin-bottom: 1.5em;
}

ul h4 {
	margin-bottom: 0.35em;
}

.box {
	overflow: hidden;
	margin-bottom: 1em;
}

.date {
	background: #6E6E6E;
	padding: 5px 6px 5px 6px;
	margin: 0 6px 0 0;
	color: #FFFFFF;
	font-size: 0.8em;
	border-radius: 2px;
}

#content {
	width: 665px;
	float: left;
	padding: 0;
}

#content-box1 {
	width: 320px;
	float: left;
}

#content-box2 {
	margin: 0 0 0 345px;
	width: 320px;
}

#footer {
	margin: 40px 0 120px 0;
	text-align: center;
	color: #8C8B8B;
}

#footer a {
	color: #8C8B8B;
}

#header {
	height: 75px;
	position: relative;
	background: #6E6E6E url(images/img03.jpg) top left no-repeat;
	padding: 45px;
	color: #FFFFFF;
	width: 888px;
	border: solid 1px #7E7E7E;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	overflow: hidden;
}

#logo {
	line-height: 160px;
	height: 160px;
	padding: 5px 0 0 0;
	position: absolute;
	top: 0;
	left: 45px;
}

#logo a {
	text-decoration: none;
	color: #FFFFFF;
	text-shadow: 0 1px 1px #3E3E3E;
}

#logo h1 {
	font-size: 3.25em;
}

#slogan {
	line-height: 160px;
	height: 160px;
	padding: 5px 0 0 0;
	position: absolute;
	right: 45px;
	top: 0;
}

#slogan h2 {
	color: #BEBEBE;
	font-size: 1.25em;
	text-shadow: 0 1px 1px #3E3E3E;
}

#menu {
	padding: 0 45px 0 45px;
	position: relative;
	background: #209D9D url(images/img02.gif) repeat-x top left;
	margin: 0 0 0 0;
	height: 60px;
	line-height: 60px;
	width: 890px;
	border-top: solid 1px #5AD7D7;
	text-shadow: 0 1px 1px #007D7D;
}

#menu a {
	text-decoration: none;
	color: #FFFFFF;
	font-size: 1.25em;
	letter-spacing: -1px;
}

#menu ul {
	list-style: none;
}

#menu ul li {
	padding: 0 20px 0 20px;
	display: inline;
}

#menu ul li.first {
	padding-left: 0;
}

#page {
	padding: 45px 45px 15px 45px;
	position: relative;
	width: 890px;
	margin: 0;
}

#page .section-list {
	list-style: none;
	padding-left: 0;
}

#page .section-list li {
	clear: both;
	padding: 30px 0 30px 0;
}

#page ul {
	list-style: none;
}

#page ul li {
	border-top: solid 1px #D4D4D4;
	padding: 15px 0 15px 0;
}

#page ul li.first {
	padding-top: 0;
	border-top: 0;
}

#page-bottom {
	position: relative;
	margin: 0;
	background: #6E6E6E url(images/img03.jpg) top left no-repeat;
	border: solid 1px #7E7E7E;
	width: 888px;
	padding: 45px 45px 0 45px;
	color: #DCDCDC;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

#page-bottom a {
	color: #F5F5F5;
}

#page-bottom h2, #page-bottom h3, #page-bottom h4 {
	color: #FFFFFF;
}

#page-bottom ul {
	list-style: none;
}

#page-bottom ul li {
	border-top: solid 1px #8F8F8F;
	padding: 15px 0 15px 0;
}

#page-bottom ul li.first {
	padding-top: 0;
	border-top: 0;
}

#page-bottom-content {
	width: 665px;
	float: left;
}

#page-bottom-sidebar {
	width: 200px;
	margin: 0 0 0 690px;
}

#search input.form-submit {
	margin-left: 1em;
	color: #FFFFFF;
	padding: 10px;
	background: #2FACAC;
	border: 0;
}

#search input.form-text {
	border: solid 1px #8F8F8F;
	padding: 10px;
}

#sidebar {
	width: 200px;
	padding: 0;
	margin: 0 0 0 690px;
}

#splash {
	margin: 0 0 0 0;
	height: 100px;
	position: relative;
	padding: 45px 45px 10px 45px;
	width: 890px;
}

#splash .pic {
	padding: 9px;
}

#wrapper {
	position: relative;
	width: 980px;
	margin: 75px auto 0 auto;
	background: #FFFFFF;
}


/* ==================================================================
   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;
	clear: both;
}
.pied-col {
	flex: 1 1 240px;
	min-width: 0;
}
.pied-col > *:first-child { margin-top: 0; }

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

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

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

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

/* Les colonnes suivent le cadre du site.
   Posees dans le pied, elles en prenaient toute la largeur, jusqu'au
   bord de la fenetre, tandis que le reste de la page tient dans un
   cadre centre. On leur donne ce meme cadre. */
.pied-3col {
	width: 980px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* Les blocs restes larges de force.
   La passe responsive n'avait desserre que les conteneurs
   menant au texte. Ceux-ci gardaient leur largeur fixe, et
   un seul suffit a faire deborder la page sur telephone. */
#header {
	max-width: 100%;
}
#menu {
	max-width: 100%;
}
#page-bottom {
	max-width: 100%;
}
#page-bottom-content {
	max-width: 100%;
}
