/*

	terrafirma1.0 by nodethirtythree design
	http://www.nodethirtythree.com

*/

*
{
	margin: 0px;
	padding: 0px;
}

img.rectangle{
max-width:450px;
margin-bottom: 25px;
	}


.mb
{
margin-bottom: 7px;
}

body
{
background: #F9F9F7 url("images/a1.gif") repeat-x;
font-size: 14px;
font-family: "trebuchet ms", helvetica, sans-serif;
color: #212121;
line-height: 18px;
}

a
{
color: #FF7800;
text-decoration: underline;
}

a:hover
{
text-decoration: none;
}

sup
{
font-size: 0.5em;
}


p
{
margin-bottom: 14px;
text-align: justify;
}

img.picA
{
position: relative;
top: -2px;
background:  url("images/a47.gif") no-repeat;
width: 76px;
height: 74px;
padding: 8px;
}

img.picB
{
position: relative;
top: -2px;
background:  url("images/a26.gif") no-repeat;
width: 146px;
height: 75px;
padding: 7px;
}

img.floatleft
{
float: left;
margin: 0px 14px 3px 0px;
}


ul.linklist
{
list-style: none;
}

ul.linklist li
{
border-top: solid 1px #EEEEEE;
padding-top: 5px;
margin: 5px 0px 0px 0px;
}

ul.linklist li.first
{
border-top: 0px;
margin-top: 0px;
padding-top: 0px;
}

#upbg
{
position: absolute;
top: 0px;
left: 0px;
background: #fff url("images/upbg.gif") no-repeat;
width: 747px;
height: 264px;
z-index: 1;
}

#outer
{
position: relative;
width: 747px;
margin: 0 auto;
background: #fff url("images/abg.gif") repeat-y;
}

#inner
{
position: relative;
padding: 13px 30px 13px 30px;
z-index: 2;
}

#header
{
	position: absolute;
	background: #FF7800 url("images/a8.gif") repeat-x;
	width: 494px;
	height: 111px;
	color: #fff;
	padding-left: 20px;
	left: 31px;
	top: 14px;
}

#header span
{
font-weight: normal;
}

#header h1
{
	position: absolute;
	font-size: 23px;
	letter-spacing: -1px;
	top: 43px;
	height: 44px;
	left: 271px;
	width: 196px;
}

#header h2
{
position: absolute;
font-size: 10px;
font-weight: normal;
color: #FCE2CA;
top: 51px;
}

#header sup
{
color: #FCE2CA;
}

#splash
{
	position: absolute;
	right: 30px;
	background: #EAEAE2 url("images/a1.gif") no-repeat;
	width: 458px;
	height: 92px;
	top: 12px;
}

#menu
{
	position: relative;
	background: #46461F url("images/a16.gif") repeat-x;
	height: 65px;
	margin-top: 5px;
	margin-right: 0px;
	margin-bottom: 10px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 6px;
	padding-bottom: 0px;
	padding-left: 4px;
}

#menu ul
{
}

#menu ul li
{
display: inline;
line-height: 52px;
padding-left: 2px;
}

#menu ul li.first
{
border-left: 0px;
}

#menu ul li a
{
	background-color: transparent;
	background-repeat: repeat-x;
	font-size: 12px;
	color: #fff;
	font-weight: bold;
	padding-top: 8px;
	padding-right: 7px;
	padding-bottom: 8px;
	padding-left: 6px;
}

#menu ul li a:hover
{
background: #fff url("images/a18.gif") repeat-x top;
color: #4A4A24;
text-decoration: none;
}

#date
{
position: absolute;
top: 0px;
line-height: 52px;
color: #BDBDA2;
right: 30px;
font-weight: bold;
font-size: 12px;
letter-spacing: -1px;
}

#secondarycontent
{
position: relative;
width: 180px;
float: right;
}

#secondarycontent h3
{
position: relative;
top: 4px;
font-size: 16px;
line-height: 25px;
color: #656551;
letter-spacing: -1px;
background:  url("images/a22.gif") bottom repeat-x;
padding: 0px 0px 10px 10px;
margin-bottom: 20px;
}

#secondarycontent .content
{
padding: 0px 10px 0px 10px;
margin-bottom: 20px;
}

#primarycontent
{
position: relative;
width: 480px;
float: left;
}

#primarycontent h3
{
position: relative;
top: 4px;
font-size: 18px;
line-height: 25px;
color: #656551;
letter-spacing: -1px;
background:  url("images/a22.gif") bottom repeat-x;
padding: 0px 0px 10px 15px;
margin-bottom: 20px;
}

#primarycontent .content
{
padding: 0px 15px 0px 15px;
margin-bottom: 20px;
}

#primarycontent .post
{
margin-bottom: 30px;
}

#primarycontent .post .header
{
position: relative;
}

#primarycontent .post .date
{
position: absolute;
right: 15px;
top: 0px;
line-height: 35px;
color: #AFAFA4;
font-weight: bold;
}

#primarycontent .post .content
{
margin-bottom: 0px;
}

#primarycontent .post .footer
{
position: relative;
top: -10px;
background:  url("images/a33.gif") repeat-x;
height: 64px;
}

#primarycontent .post .footer ul
{
list-style: none;
position: absolute;
right: 15px;
bottom: 15px;
}

#primarycontent .post .footer ul li
{
display: inline;
line-height: 14px;
padding-left: 17px;
margin-left: 25px;
background-repeat: no-repeat;
background-position: 0px 2px;
}

#primarycontent .post .footer ul li.printerfriendly
{
background-image:  url("images/a41.gif");
}

#primarycontent .post .footer ul li.comments
{
background-image:  url("images/a36.gif");
}

#primarycontent .post .footer ul li.readmore
{
background-image:  url("images/a38.gif");
}

#footer
{
position: relative;
clear: both;
height: 66px;
text-align: center;
line-height: 66px;
background-image:  url("images/a50.gif");
color: #A8A88D;
}

#footer a
{
color: #8C8C73;
}


/* ==================================================================
   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 */
#primarycontent {
	float: none;
	width: auto;
	margin-left: 0;
	margin-right: 0;
}

/* les conteneurs gardent leur largeur, sans la subir */
#primarycontent {
	width: auto;
	max-width: 480px;
}
#outer {
	width: auto;
	max-width: 747px;
}

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

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