@charset "UTF-8";
@import url("reset.css"); /* -- reset all CSS styles --- */

/* ----- Feuille de style "La fabrique des mots"  version 2 + autres améliorations 31/05/10 ------- */
/* modifications le 23/05 en fonction de la dernière CSS de Mina */

/* ----- Couleurs -------------------------------------- 
bleu (M)    # 0000aa
coral		# FF382B	
grau_hell	# DDDDE5	221 221 229
grau_hover	# E7E7ED	231 231 237
            # a9b0ba
graudunkel	# 4B4942	75 73 66
grau-footer # 555368	85 83 104
-------------------------------------------------------- /* 


/* ----------------- generell -------------------------- */
html * {font-size: 62,5%;}

body{
	color: #555368;
	background: #fff ;
	font-family: "Verdana", Arial, Helvetica, Tahoma, sans-serif;
	font-size: 62.5%;
	line-height: 2.2em;	}
a       {text-decoration: none;color: #FF382B;} 
a:hover {color: #0000aa;}     
hr      {display: none;}
strong  {font-weight: bold;}
	
/* ----------------- zone principale et trois colonnes ----------------------------- */

	#main{position: absolute; overflow:auto; left:100px; top: 10px; width: 1100px;} /* border: 1px solid black; */

/* ----------------- colonne de gauche, choix de la langue ------------------------- */
	div#gauche {position: fixed; width:110px;} /* border: 1px solid red; */
	div#gauche a.choix {color: coral;}
	
	#langue h2{color: #58584D; font-weight:normal; font-size:13px;}
	#langue	ul li        {width: 20px; float:left;  margin: 0 4px 0 0; border: 1px solid #dddde5;}
	#langue	ul li a      {display: block;padding:1px 0 1px 2px;height: 20px;color: #555368;}
	#langue	ul li a:hover{color: #0000aa;}
	
/* ---------------- colonne de droite  -------------------------------------------- */	
	#droite {position: fixed; width:200px;  margin-left: 740px; }
	#logo {float: left;width:192px; height: 167px;margin-bottom: 10px; padding:2px; border: 1px solid #ff382b;}

/* ----- liens vers les autres pages ----- */
div#menu {font-size:13px; padding-bottom: .5em; width: 200px; float:left;}
   #menu a         { color: #555368; display: block;
		             padding: .2em .5em .2em .0em; line-height: 1.2em;
	                 border-bottom: 1px dashed #a9b0ba; text-decoration: none;}
   #menu a:link    { color: #000000;}
   #menu a:hover   { color: #0000aa;}
   #menu a.choix   { color: #ff382b;}

/* ----- liens vers les traducteurs ----- */
   #traducteurs {float: left;width:240px;margin:20px 0 20px 0;padding: 0px 10px 10px 0px;line-height:1.6em;}	
   #traducteurs a:hover {color: #0000aa;}                           
   #traducteurs a.choix {color: #ff382b;}
   #traducteurs	ul {font-size:1.2em;line-height:1.6em;}
   #traducteurs	ul li a {display: block;padding:1px 0 1px 1px;height: 18px;color: #a9b0ba;}
   
/* ---------- colonne du milieu ------------------------float: left;------------ margin-left:140px -------padding: 0 20px 0 0;----------------------------- */
	#milieu   {position: relative; left:160px; width:520px;}  /*  border: 1px solid #ff382b;*/
	
	div#entete, div#paragraphe, div#mentions, div#paragris, div#photrad, div#affiche {float:left;} 
	
	div#entete {background:#fff; width:520px; margin:60px 0 80px 0; text-align:center; }
	div#entete h2{color: #a9b0ba; font-weight:bold; font-size:13px;} /* couleur initiale #a9b0ba */

	div#paragraphe      {background:#FFF; width:520px; margin-bottom:20px;}  
	div#paragraphe p    {font-family: verdana; font-size:1.2em; text-align:justify;}
	div#paragraphe h2   {color: #FF382B; font-weight:bold; font-size:13px;}
	div#paragraphe span {font-style: italic;} /*font-size:1.1em;*/

	div#paragris        {background:#dddde5; width:500px; padding:10px 10px 10px 10px; }  /* 500 = 520-10-10 !*/
	div#paragris p      {font-size:1.2em; text-align:justify;}
	div#paragris h2     {color: #FF382B; font-weight:bold; font-size:13px;}
	div#paragris h3     {color: #4B4942; font-weight:bold; font-size:13px;}
	div#paragris span   {font-family: times; font-style: italic; font-size:1.2em;}
	
	div#mentions        {background:#fff; width:500px; padding: 10px 10px 10px 10px; margin-top: 30px; border: 1px dashed #ddcce5;}
	div#mentions p      {font-family: verdana; font-size: 10px; text-align:justify; line-height: 120%}

	div#biotrad         {background:#fff; width:500px; padding:10px;margin-bottom:20px; border: 1px dashed #ff382b;}
	div#biotrad p       {font-size:1.2em;text-align:justify;}
	div#biotrad h2      {color: #FF382B; font-weight:bold; font-size:13px;}
	div#biotrad span    {font-family: verdana; font-style: italic; font-size:1.1em;}

 	div#photrad            {width:520px;line-height:16px;margin-bottom:20px;}
	div#photrad img        {border:1px solid #DDDDE5; -moz-opacity:0.3; opacity:0.3;filter:alpha(opacity=30);}
	div#photrad img:hover  {border:1px solid #0000aa; -moz-opacity:  1; opacity:1; filter:alpha(opacity=100);}
   div#photrad img.active {border:1px solid #FF382B; -moz-opacity:  1; opacity:1; filter:alpha(opacity=100);}
    
 	div#photid             {width:520px;line-height:16px;margin:10px 0 10px 0;}
 	div#photid img         {border:1px solid white;} 
 	div#photid img.active  {border:1px solid #FF382B;}

	.clear {clear:both;float:none;}
	
div#xiti       {position:fixed; left: 50%; margin-left: -506px; bottom: 5px;  } 

/* ---------- fin ---------------------------------------------------------------------------------------- */