* {margin: 0; padding: 0; border: 0;}

/*--------structure de page type (par Tony Grant - Croisix)

la structure est comparable a une page sur base <table> avec les colonnes (<tr>) qui sont des <div class="line"> et des cellules (<td>) qui sont des <div class="item">
chaque "item" doit contenir un  <div class="sap-content"></div>

exemple :

<div id="optionnel" class="line">	  	
	  <div class="item" id="myid">
	    <div class="sap-content">contenu de votre choix</div>
	  </div>
	  
	  <div class="item" id="anotherid">
	    <div class="sap-content">contenu de votre choix</div>
	  </div>
	   
	   etc.
	   ...repeter pour chaque colonne dans une ligne
	   
</div>

repeter selon les besoins, voici l'exemple d'une page simple

line  id=header 
line  id=breadcrumbs
line  item id=menu_gauche id=contenu id=.... autant que de colonnes
line  id=footer

-----------*/


/*--------styles de base--------------*/

body 		{background-color: black;font-family: Arial, Helvetica, sans-serif;	font-size: 100%;color: #333333;text-align:center;	}
body.popup	{background-color: white;}
h1 			{
	font-size: 1.6em;
	color: #565F49;
	margin-top:1em;
	margin-bottom:1em;
	padding-left:13px;
	line-height:1.15em;
}
.tabboutique h1	{margin-top:0px;}/*alignement du titre des bouquins dans la boutique*/
h2 			{
	font-size: 1.4em;
	margin-top: 1em;
	margin-bottom: 0.8em;
	color: #565F49;
	padding-left:0px;
	margin-left:13px;
	border-bottom:1px solid #999999;
}
#coltexteAdmin h2	{margin-left:0;}
.sanstrait	{border-bottom:0px;}
.supprmarge	{margin-left:0px;margin-top:5px;}
h3 			{
	font-size: 1.1em;
	margin-top: 1em;
	margin-bottom: 0.2em;
	color: #565F49;
	padding-left:0px;
	margin-left:13px;
	border-bottom:#999999 1px solid;
}
h4 			{font-size: 1em;font-weight: bold;	margin-top:0;border-bottom:#999999 1px solid;margin-bottom:5px;}
p  			{line-height: 1.3em;color: #333333;padding-left:13px;}
p.marge10	{margin-bottom:10px;}
.marge5		{margin-bottom:5px;}
.indexplusgrand {line-height: 1.75em;padding-left:0px;}/*en page d'accueil : le padding left supprime celui de p ou de h2*/
.sanspadding 	{padding-left:0px;padding-right:0px;}/*en page d'accueil : le padding left supprime celui de p*/

.source		{font-style: italic; color:#666666;font-size:0.8em;} /*en accueil - veille eco internationale*/
.petit		{font-size:11px;} /* qq liens accueil - en absolu (au lieu d'une taille relative en em) car 0.9 est trop grand et 0.8 est trop petit...*/
.important	{font-weight:bold;color: #CC0000}/*pour les * dans les formulaires */
.commentaire {font-size:0.9em;color: #CC0000;font-style:italic}/*pour les * dans les formulaires */

table 				{color: white}
#coltexteAdmin table{width:770px;}
tr 					{color: #333333;}
td, th				{line-height: 1.3em;padding-left:7px;padding-right:3px;vertical-align:top;}
td 					{font-size: 1em;}
#coltexteAdmin td	{padding-left:3px;font-size:11px;}
td.fond_fonce		{background-color:#3e4435;color:white;} /*admin : coloration td si page non publiee par exemple*/
.sansmarge 			{padding:0px;}/* en page d'accueil, zone rechercher - pour annuler celui de td ou de h1 (panier) */
tr.entete			{background-color:#AF9270; color:white; /*text-transform:capitalize;*/ text-align:center; font-weight:bold; }
tr.entete td		{padding:7px;}
tr.fond_clair		{background-color:#E3DACE;}
tr.fond_clair2		{background-color:#F4F1EC;}
tr.fond_clair td,tr.fond_clair2 td	{border-bottom:1px solid white;}

ul 				{padding-left:13px;}
ul.listepdf 	{margin-top:5px;list-style-position: outside;} /*pour colBoxFarRight (c3) - attention, si utilise au centre (C0 ou C1 et C2) il y a des styles specifiques pour ul et li*/
li.listepdf 	{list-style-position: outside;
				 list-style-image: url(../images/picto-pdf-pour-li.gif);
				 margin-left:18px;padding:0 0 5px 0;
				 font-size:0.89em;
				}
ul.listecarres 	{list-style-position: outside;}/*pour colBoxFarRight (c3) - attention, si utilise au centre (C0 ou C1 et C2) il y a des styles specifiques pour ul et li*/
li.listecarres 	{
	list-style-position: outside;
	list-style-image: url(../images/carre-liens.gif);
	margin-left:15px;
	font-size:0.89em;
	padding:0 0 5px 0;
				}

/******************* les liens *****************************/
a 				{color: #CC0000;text-decoration: none }
a:hover 		{text-decoration: underline	}
td.fond_fonce a	{color:white;} /*admin*/
.plus 			{background:transparent url(../images/plus-gris.gif) no-repeat 1% 5px; padding-left:15px;}
.carreliens		{background:url(../images/carre-liens.gif) no-repeat 2% 5px; padding-left:15px;}
.carreliensR		{background:url(../images/carre-liens-rouge.gif) no-repeat 2% 5px; padding-left:15px;}
.panier 		{background:transparent url(../images/picto-panier.gif) no-repeat 2% 2px; padding-left:23px;}
.pdf			{background-color: transparent;background:url(../images/picto-pdf-pour-li.gif) no-repeat 2% center;padding:0 0 0 20px}
.rss {background:transparent url(../images/picto-rss.gif) no-repeat 2% 0px; padding-left:18px;}
.pdfpetit		{background:url(../images/picto-pdf-pour-li.gif) no-repeat 2% 0;padding:0 0 5px 20px}
.deconnexion 	{background:transparent url(../images/picto-deconnexion.gif) no-repeat top left; padding-left:13px;}
.reserve 		{padding-left:23px;background-color: transparent;
				 background-image: url(../images/picto-pdf-acces-reserve.gif);
				 background-repeat: no-repeat;
				 background-position: 2% 0px;}
.gris			{color:#333333;}
.gris:hover		{color: #CC0000;text-decoration:none;}
.highlight:hover{background-color: #f3ecd6;} /*pour les MontrerCalque dans breves internationales et resume des docs*/
/*a.actif { passé dans la feuille de style de Spry MenuBarHorizontal.css
	background-color: #7E1512;
	background-image:url(../images/onglet_over.gif);
	background-repeat:repeat-x;
	color: #FFF;
}*/

img 			{display: block; /*needed to avoid alignment with baseline of text*/}
img.bottom 		{position:relative;	top: 5px;	vertical-align: baseline;	float: left; }

#menuhome2 img		{display:compact}
hr					{border: none 0; border-top: 2px dotted #cccccc;/*the border*/ 
					 width: 100%;height: 2px;margin-bottom: 5px;margin-top: 8px;} 
.positionnement		{padding-left:13px;} /*sur div ou td pour la marge de gauche dans la zone centrale*/
div.floatG			{float: left;position:relative;padding:5px 10px 5px 13px;}
div.boutique		{
	margin:5px 0px 5px 0px;
	border:1px solid #f3ecd6;
	width:185px;
	overflow:hidden;
	background-color: #f3ecd6;
}
div.encadre			{background-color:#E3DACE;}
.fond_marron		{background-color:#f3ecd6;} /* zone contact dans le tableau de moteur-recher-publications */
div.spacer			{background-color:white;height:9px;}/*espacement entre elements dans colBoxFarRight*/
.trait				{border-bottom:1px solid #CC0000;}
.clear				{clear:both}
/*--------- MENU PRINCIPAL en absolu pour passer au dessus des autres div --------------------------*/
#menugeneral	{position:absolute;top:43px;left:50%;margin-left:-349px;width:640px;z-index:2000;}
/*--------- DIV QUI ENGLOBE TOUTE LA PAGE ---------------------------------------------------------*/
#container {margin:0px auto;font-size: 0.8em;overflow: hidden;padding:0px;background-color:white;
			text-align:left;width:1000px;	}

/*---------- BANDEAU -----------------------------------------------------------------------------*/
#fond {top:0px;margin-top:-1px;	margin-left:15px;	width:1000px;}

	/*---------fond gris sur photo------*/
	#grey {position:absolute;margin-top:-5px;z-index:1000;	height:70px;width:1000px;margin-left:-15px;background-color:#000000;
	opacity:.70;filter:alpha(opacity=70);-moz-opacity:0.7;vertical-align:top;padding:3px; }
		#logo{	position:absolute;	top:1px;	left:10px;	z-index:1000;		}

	/*----------menu sur fond degrade--------*/
	#menu{position:absolute;left:151px;bottom:109px;z-index:2000;}
	/*----------petit menu de droite ---------*/

	#menu2{position:absolute;left:813px;bottom:114px;z-index:1001;width:150px;}
	p.white a.white {position:absolute;right:30px;bottom:110px;color:#FFFFFF;font-size:0.9em;}

/*---------- CHEMIN ------------------------------------------------------------------------------*/
#breadcrumbs {margin-left: -100%;width: 100%;background-color: #fff;z-index:1000;font-size: 10px;font-weight: bold;} 
.breadcrumbs {line-height: 0.9em;color: #5B654E;background-color:white;padding: 8px 5px 8px 25px;}


/*---------- CONTENU DE LA PAGE ----------------------------------------------------------------*/
.line 	{ /*---------lignes : contiennent des item un par colonne ----------*/
		float: left; width: 100%; display: block; position: relative; /*prevents shifting when changing viewport in IE;thanks to Alan Gresley*/z-index:500;
		}
	.item 	{ /*---------------- colonnes - contiennent sap-content ------*/
				position: relative; float: left;  left: 100%;overflow: hidden;z-index:1;}/**/
		.sap-content 	{ /*------sap=simulated absolute position---------*/
								overflow: hidden;z-index:1;} /**/

/* end generic; all sap elements must have margin-left and with defined */



/*-----------menu, premier item, ligne 2-------*/

#menu_gauche {
	margin-left: -98.5%;
	width: 17%;
	margin-top:-15px;
	z-index: 1000; 

}
div.MenuL a {
	display: block;	
	background-color: #f3ecd6;
	padding: 0.5em 0.5em;
	color: #3e4435;
	text-decoration: none;
	border-top:#FFFFFF solid 1px;
}
div.MenuLon a {
	display: block;	
	background-color: #3e4435;
	padding: 0.5em 0.5em;
	color: white;
	text-decoration: none;
	border-top:#FFFFFF solid 1px;
}
div.ssMenuL a {
	display: block;
	background-color: #FAF7EF;
	padding: 0.3em 0.3em 0.3em 1.2em;
	color: #3e4435;
	text-decoration: none;
	border-top:#FFFFFF solid 1px;
}

div.ssMenuLon a {
	display: block;
	background-color: #FAF7EF;
	padding: 0.3em 0.3em 0.3em 1.2em;
	color: #CC0000;	
	text-decoration: none;
	border-top:#FFFFFF solid 1px;
	}
div.MenuL a:hover, div.MenuL a:focus, div.MenuLon a:hover
{
	background-color: #3e4435;
	color: #FFF;
}

div.ssMenuL a:hover, div.ssMenuL a:focus, div.ssMenuLon a:hover
{
	background-color: #3e4435;
	color: #FFF;
}

/*-----------colonnes de largeur variable-------*/
/*------------ HOME PAGE ---------------------------------------------------------------------------------*/
#menuhome{position:absolute;left:151px;bottom:0px;z-index:1000;}


	/*----------petit menu de droite ---------*/
	#menuhome2{position:absolute;left:813px;bottom:5px;z-index:1001;width:150px;}
		p.homewhite a.homewhite {position:absolute;right:30px;bottom:5px;color:#FFFFFF;font-size:0.9em;}
#anim {
	margin-left:-98.5%;
	width:77.0%;
	background-color:#FAF7EF;
}

#leftIndex {
	margin-left:-98.5%;
	width:37.5%;
	
	}
#leftIndex h1 {font-size:1.4em;clear:right;margin-top:-2px;margin-left:10px;margin-bottom: 0.5em;
				font-variant: small-caps;letter-spacing: 0.05em;}
#leftIndex h2 {font-variant: small-caps;font-size:1em;letter-spacing: 0.08em;margin : 0 0 0.05em 0; border-bottom:white;}
	
	.redsquare {
	float: left;
	}	

			
#middleIndex {

	margin-left:-60%;
	width:38.5%;

			}
	
#middleIndex h2 {font-variant: small-caps;font-size:1em;letter-spacing: 0.08em;margin : 0 0 0.05em 13px; border-bottom:white;}

	
#middleIndex	li	{
	line-height: 1.3em;
	list-style-type: square;
	list-style-position: inside;
	}			
			
	.titreindex {

			background-image: url(../images/bg-385.jpg);
			background-repeat: repeat-y;
			background-color: #CC0000;
			margin-bottom: 0.5em;
			font-variant: small-caps;
			font-weight:lighter;
			color: #FFFFFF;
			padding: 3px 3px 3px 13px;
			width:100%;
			}			

#colBoxFarRightHome {
	margin-left:-21.5%;
	width:20%;
	height: 175px;
	background-color: #f3ecd6;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	}

#colBoxFarRightHome p {
	padding-right: 2px;
	padding-left: 28px;
	padding-bottom: 0px;
	padding-top: 7px;
	font-size:0.89em;
	line-height:1.4em;
	}

/*-------fin home page------------*/
.titre585,.titre385,.titre785 {background-repeat: repeat-y;
			background-color: #CC0000;
			font-variant: small-caps;
			font-weight:lighter;
			color: #FFFFFF;
			padding: 3px 3px 3px 13px;
			margin-bottom:15px;
			width: 100%;
			}
/*CO*/
#coltexte585 		{margin-left:-80%;width:58.5%;}
#coltexte585	ul	{margin-bottom: 1em;}
#coltexte585	li	{line-height: 1.3em;list-style: square;list-style-position: outside;
					margin-left:18px;padding-left:1px;}
#coltexte585	li ul li{line-height: 1.3em;list-style-type: circle;list-style-position: outside;
					margin-left:-14px;padding-left:1px;}
.titre585 		{background-image: url(../images/bg-585.jpg);}

/*CO et pas de C3 : contenu central sur 1 grande colonne */
#coltexte785 	{margin-left:-80%;width:78.5%;}
.titre785		{background-image: url(../images/bg-785.jpg);}
#coltexte785	ul	{margin-bottom: 1em;}
#coltexte785	li	{line-height: 1.3em;list-style: square;list-style-position: outside;
					margin-left:18px;padding-left:1px;}

/*C1 - colonne n1 lorsque le contenu central est en 2 colonnes */
#coltexte385 {margin-left:-80%;width:38.5%;}
.titre385 {background-image: url(../images/bg-385.jpg);}
#coltexte385	li	{
	line-height: 1.3em;
	list-style: square;
	list-style-position: outside;
	margin-left:18px;
	padding-left:1px;
	}
	#coltexte385	li ul li{
	line-height: 1.3em;
	list-style-type: circle;
	list-style-position: outside;
	margin-left:-14px;
	padding-left:1px;
	}
/*C2 - colonne n2 lorsque le contenu central est en 2 colonnes */
#colBoxRight {
	margin-left:-40%;
	width:18.5%;
	}

#colBoxRight h1, #colBoxRight p, #colBoxRight ul {padding-left:0px;} /*suppression de l'espacement*/
#colBoxRight h2 {margin-left:0px;} /*suppression de l'espacement*/
#colBoxRight	li	{
	line-height: 1.3em;
	list-style: square;
	list-style-position: inside;
	}
#colBoxRight ul.ficheactions {
	margin-top:5px;
}
#colBoxRight li.ficheactions {
	list-style-position: outside;
	list-style-image: url(../images/picto-pdf-pour-li.gif);
	margin-left:20px;padding:0px 0px 5px 0px;
}


.titre185rouge {/* titre de colBoxRight de la zone Nos actions R&D */
	background-image: url(../images/bg-185-rouge.jpg);
	background-repeat: repeat-y;
	background-color: #993300;
	font-variant: small-caps;
	font-weight:lighter;
	color: #FFFFFF;
	padding: 3px 2px 3px 13px;
	width:100%;
	font-size:1em;
	line-height: 1.3em;
	}
	
/*C3 - colonne n3 - contenus contributifs */
#colBoxFarRight {
	margin-left:-20%;
	width:18.5%;
	background-color: #f3ecd6;
	}	
#colBoxFarRightFlotte { /*C3 mais dans une page avec C0 large : evite de perdre toute la colonne de droite car elle flotte en fait dans C0*/
	width:185px;
	background-color:white;
	padding-left:15px;
	float:right;
	z-index:100;
	margin-top:-38px;

}
#colBoxFarRightFlotteint	{background-color:#f3ecd6;}
/*#colBoxFarRight	li,#colBoxFarRightFlotte li	{
	line-height: 1.3em;
	list-style: square;
	list-style-position: outside;
	}
*/
#colBoxFarRight p,#colBoxFarRightFlotte p {
	padding-right: 2px;
	padding-bottom: 1px;
	padding-top: 1px;
	font-size:0.89em;

	}
#colBoxFarRight td {font-size:0.89em;padding:0px;}
.titre185 {/* titres de colBoxFarRight - applique a une div pour plus de liberte sur les paragraphes dans cette zone */
	background-image: url(../images/bg-185.jpg);
	background-repeat: repeat-y;
	background-color: #993300;
	font-variant: small-caps;
	font-weight:lighter;
	color: #FFFFFF;
	padding: 3px 2px 3px 13px;
	width:170px;
	font-size:1em;
	line-height: 1.3em;
	}

/*-------------pied de page-------------------*/

#footerline {
	border-bottom: none;
	}

#footer {
	margin-left: -100%;
	width: 98.5%;
	background-color: #fff;
	}
.colassocie {
	margin-top: -19px;
	background-color: #f3ecd6;
	margin-bottom: -1px;
}

.footer { 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	line-height: 0.9em;
	color: #5B654E;
	background-color: #FFFFFF	;
	padding: 3px 3px 8px 13px;
	}
	

/* ------------------- admin & forms ----------------------*/

#coltexteAdmin {
	margin-left:-80%;
	width:78.5%;
	}

#voir {
	width:100%;
	overflow:scroll;
	}

#pageadmin {
    padding: 4px 4px;
	margin: 0px 1px 0px 0px;
	background-color: #f3ecd6;
	border-left: solid 1px #CCC;
	border-bottom: solid 2px #999;
	border-top: solid 1px #CCC;
	border-right: solid 2px #999
	}

form.adminform fieldset	{margin-bottom: 10px;}
form.adminform legend 	{padding: 0 2px;font-size: 1.1em;font-weight: bold;}
form.adminform label {
  	display: inline-block;
  	line-height: 110%;
 	vertical-align: top;
  	text-align:right;
	width: 30%; /* Width of labels */
	}
form.adminform label.assoc	{text-align:left;}
form.adminform fieldset ol	{margin: 0;padding: 0;margin-top:5px;}
form.adminform fieldset li	{list-style: none;padding: 5px;margin: 0;}
form.adminform em 			{font-style: italic;}

form.adminform input {width: 50%;padding:2px;margin-bottom:3px;}
form.adminform textarea {width: 50%; height: 150px; padding:2px;margin-bottom:3px;}

form.adminform input#rech_site	{height:15px;width:120px;padding:0px 0px 1px 2px;margin:-1px -2px 5px 0;font-size:0.9em;background-color:black;border:1px solid #B9B9B9;color:#B9B9B9;}
form.adminform .public {border:1px solid #E3DACE;}
form.adminform input.public {width : 260px;margin-bottom:10px;}
form.adminform .etroit {width:20px;height:13px;}
form.adminform select {width: 50%;height: auto; margin-bottom:3px;}
form.adminform select.public {width : 260px;margin-bottom:7px;}
form.adminform select.large	{width:460px;margin-bottom:7px}/*Pour le select de Type_doc dans le module doc de l'admin*/
form.adminform select#ordre {width: 40px; /* Width of textarea */}
form.adminform input.bouton {width:150px;margin-top:5px;background-color:white; border: 1px solid #cccccc;background-image: url(../images/bg-185-rouge.jpg);color:white}
form.adminform input.radio		{width: 15px; margin-left:0px;margin-bottom:0;}
form.adminform input.checkbox	{width: 15px; margin-left:0px;margin-bottom:0;}

form.adminform select#type {
  width: 250px; /* Width of textarea */
 
  }
form.adminform input#checkbox {
  width: 15px; /* Width of checkbox */
  margin-left: 15px;

}

form.adminform input#radio {
  width: 15px; /* Width of radio */
  margin-left: auto;

}

form.adminform span.radio {
	line-height: 1.8;
  	vertical-align: middle;
  }

form.adminform input#button{
  width: 130px;
  margin-top:5px;
  background-color:#ffffff; 
  border: 1px solid #cccccc; 
  background-image: url(../images/bg-185-rouge.jpg);color:white

}

form.adminform fieldset fieldset label {
  margin-left: 32%; /* Width plus 3 (html space) */
}

form.adminform p.liens {
position:relative;
top: -18px;
left: 222px;
 }

/*------------- AJAX suggestion contenu -------*/
#attente {visibility:hidden;height:0px;}
#suggestion {visibility:hidden;height:0px;position: relative;margin: 10px 0px 0px 0px;padding:5px;width:260px;background-color:#FFFFFF;-moz-border-radius: 7px;-webkit-border-radius:7px;border: 1px solid #000;color: #212427;overflow:auto;}