html {
	margin: 0;
	padding: 0;
}
body {
	position: relative;
	left:0;
	top:0;
	margin: 0;
	padding: 0;
	background-color: #e7edd8;
/*	background: transparent url(../images/jod230x123.gif) no-repeat 150px 50px;*/
}

/* haut de toutes les pages */
#top-of-page {
	position: relative;
	left: 0; top:0;
	width: 100%;
	height: 160px;
	background-color: transparent;
}
/* la grille de base se présente ainsi, avec des hauteurs fixes par ligne (hauteur totale: 160px) :
		A1	B1	C1: dans A1 on met la recherche, qui occupe toute la ligne
		A2	B2	C2: dans A2 on met la recherche par mots clés, dans B2 le logo (qui occupe aussi B3), et dans C2 la banner
		A3	B3	C3: A3 est le prolongement de A2, B3 et C3 sont vides (non déclarés en html) mais servent à héberger un menu javascript
*/
/* pour toutes les cellules, définir leur emplacement et dimensions *de base*, sans se préoccuper de savoir si elles existent ou non  */
#A1,#A2,#A3,#B1,#B2,#B3,#C1,#C2,#C3{ position: absolute; margin: 0; padding: 0 }
#A1,#A2,#A3 { left: 0px ; width: 225px }
#B1,#B2,#B3 { left: 225px; width: 165px }
#C1,#C2,#C3 { left: 720px; width: 580px }
#A1,#B1,#C1 { top: 0px; height: 30px }
#A2,#B2,#C2 { top: 35px; height: 120px }
/*#A3,#B3,#C3 { top: 135px; height: 25px }*/
/*	voici la grille résultante, et ci-après les déclarations pour les cellules individuelles :
		A1	B1
		A2	B2	C2
*/
#A1 {
	background: transparent;
	height: 30px;
	width: 100%;
}
#A2 {
/*	background: transparent url(../images/logo222x100.gif) no-repeat right top;*/
}
#A3 {
	background: transparent;
}
#B1 {
	background-color: transparent;
}
#B2 {
/*	background: transparent url(../images/logo_right2.gif) no-repeat left top;*/
}
#B2 img {
	margin: 0; padding: 0;
}
#C1 { 
/*	display: none;*/
	background-color: transparent;
}
#C2 {
	width: auto;
	background-color: transparent;
}
#C2 img {
	position: relative;
	left: 5px; top: 5px;
	margin: 0; padding: 0;
}
#C3 {
	width: 700px;
	background-color: transparent;
}
/* zone recherche (en haut à gauche) */
div#search form {
	position: relative;
	left: 5px; top: 0px;
	margin: 0; padding: 0;
}
div#search form input {
	position: relative;
	left: 5px; top: 0px;
	margin: 0; padding: 0;
}
div#search  form input#searchclick {
	top: 5px;
}

div#new {
	width: 100%;
	height: 45px;
	background: #e7edd8;/* b0b99c*/
}

/* footer */

div#footer {
	height: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	background: #e7edd8 url(../navpics/fondcylinv.jpg) repeat-x left top;
	background: #e7edd8;
}
#footer p,#footer p a {
	margin:0;
	padding: 0;
	font: 8pt verdana, arial,sans-serif;
	color: #444;
/*	letter-spacing: 2px;*/
	text-decoration: none;
}
#footer span#menu-bottom a {
	color: #369;
	font-weight: bold;
}
#footer a:hover {
	text-decoration: underline;
}

/* articles */

div#spip_postscriptum {
	width: 80%;
	text-align: center;
	font-size: 90%;
}
div#spip_postscriptum>div.spip_doc_titre {
	text-align: center;
	font-size: 80%;
}
#spip_chapo,#spip_soustitre {
	color:#708FBE;
	font-weight: bold;
	font-size: 105%;
	text-align: justify;
}

/* fiche technique inclue dans article */

/* centering the table with a div doesn't work - must be set inline */
div#fichetechnique {
/*	background-color: #669; /* 669 */
	color: #fff;
	text-align: center;
}
div#fichetechnique table {
	text-align: center !important;
}

div#fichetechnique td {
	background-color: #669; /* 669 */
	color: #fff;
/*	border: solid dotted 1px #666666;*/
	margin: 3px;
	text-align: left;
}
div#fichetechnique table td p.spip {
	color: #fff;
	text-align: left;
}
div#fichetechnique table td h3 {
	margin-top: 0;
	text-align: center;
}

/* rubriques */

div#descriptif_rubrique {
/*	border: 1px solid black;*/
}

p#keywords {
	display: none;
}

/* see GLOBALS['puce'] in mes_fonctions.php3 */
#fiche-technique p.mypuce, li.spip {
	margin: 0 auto;
	background: url(../puce.gif) no-repeat left 2px;
	padding-left: 13px;
}
p.mypuce a.spip_in {
	background: url(../navpics/arrow.gif) no-repeat left 2px;
	margin: 0 0 0 10px;
	padding: 0 0 0 12px;
	padding-left: 12px;
}
/* différence avec p.mypuce : top of image */
li.spip {
	background: url(../puce.gif) no-repeat left top;
}

/* voila un truc facile et rigolo, valable uniquement pour le mottosticker (en fait, n'importe quel texte animé fait l'affaire, mais pas d'image)
	1. définir le mottositcker
	2. définir le div qui le contient, *avec* une image de fond dans le css *et* une couleur de fond appropiée dans le div (inline CSS)
	3. et dans le div, mettre une autre image (voir la démo)
*/
div#mottosticker {
	display: none; /**/
	position: absolute;
	top: 36px;
	left: 290px;
	width: 493px;
	height: 125px;
}
#banner-mottosticker {
	width: 493px;
/*	background: transparent url(images/mountain2.jpg) no-repeat left top;*/
	z-index: 10;
}

#logos {
	width: 100%;
}
#logos ul {
	margin: 0;
	padding: 0;
	width: 100%;
	display: inline;
	list-style: none;
}
#logos li {
	margin-right: 5px;
	padding: 0;
	display: inline;
}
#logos a img {
	border: none;
}

.advertising {
/*	top: 4px;*/
	margin: 10px 0;
	padding: 0;
	width: 160px;
	background-color: #eee;
	border: 1px solid #aaa;
	text-align: center;
}
.advertising p {
	margin: 0 0 3px 0;
	text-align: center;
/*	font: 8pt arial,tahoma,helvetica,sans-serif;*/
	color: #888;
}
.advertising .encart {
	margin: 0;
	padding: 2px;
	text-align: center;
}
.advertising .encart img {
	margin: 2px 0;
}
.advertising .encart p {
	text-align: justify;
	color: #000;
	font: 8pt arial,helvetica,sans-serif;
}
.ad-encart {
	width: 160px;
	height: 80px;
}

#footer p#auteur {
	margin:2px 0 0 0;
	text-align:center;
}
#footer p#auteur, p#auteur a {
	padding: 4px 0;
	color:#777;
	font: normal 8pt arial,tahoma,helvetica,sans-serif;
}