/* ==============================
Code CSS du site : tutocalibre.fr
Auteur : Alixe

Charte graphique :
================
Bleu très foncé : #0A246A
Bleu soutenu : #1931CF
Bleu clair : #DFE0FF
Blanc : #FFFFFF    = #F6F3E9
Jaune : #FF8000

Bleu très foncé : #0A246A  : couleur de police; bordure du menuV ; police du menuV
Bleu soutenu : #1931CF => #0A246A : ex, bordure nb, bleu, fond vu, h4, H5, liens, bannière visitée     
Bleu moyen clair: #7C7EFF => #1C4E63 (bleu foncé vert): bordure  banière, fond foncé, H1, fond H2, fond H3, H6, lien visité et survolé
Bleu clair : #DFE0FF => #F2F2F2 (gris): fond nb, fond H4, fond lien visité, bord du sommaire et des interview, fond des tableau, fond caption, fond menuV niv 2
Blanc : #FFFFFF   => #F6F3E9
Jaune : #CAAD78 => #946E3A (marron): bannière, jaune, strong, liens visités sommaire



 ===============================*/



/*  GENERAL - STRUCTURE DE LA PAGE ===============================*/

body
	  {
		margin: auto; 	/*pas de marge*/
		padding: 1em 1em 1em 13em; /* Une marge intérieure à gauche pour que le corps ne passe pas sous le menu vertical */
		background-color : #F6F3E9;		/*fond blanc*/
		font-family: sans-serif, Gorgia, Times New Roman, Verdana, "Trebuchet MS", Arial ;		/*polices de caractère*/
		font-size : 1em;	/*taille de caractère*/
		color: #0A246A;		/*couleur de police : bleu le plus foncé*/
        width:900px;
	  }

	
	/*PARTIES FIXES=================*/

	div#menu	/*cette drôle de formulation est indispensable pour que Internet Explorer comprenne ce qui suit*/
		{
	  position: absolute;	/*reste en place en haut de l'écran (seulement pour IE)*/
	  top: 0em;	/*marge en haut*/
	  left: 1em;	/*marge gauche*/
	  width: 11em;	/*largeur*/
	  }
	@media screen	/*également indispensable même si je comprends pas ce que ça veut dire*/
		{
		* html
			{
			overflow-y: hidden;
			}
		 * html body
			{
		    overflow: scroll;
		    height: 100%;
            width:800px;
			}
		}
	
		/*ça c'est pour les autres navigateur que Internet Explorer*/
		html>body #menu {
			position: fixed;
			}	

	/*FIN des parties fixes========================*/
			
	p, form
		{
			margin-bottom : 2%;		/*pour aérer les paragraphes*/
			text-align:justify;		/*texte justifé*/
			margin-left : 3%;		/*Retrait*/
		}

	#banniere
		{
		background-color : #F6F3E9;		/*fond blanc*/
		border-bottom :solid;
		border-top : solid;
		border-color : #1C4E63;
		color : #946E3A;
		padding-top : 0em;
		padding-right : 11em;
		}

  hr 
  {
  margin-top:5em;
  width:80%;
  color: #946E3A;
  background-color: #946E3A;
  height: 0.2em;
  border: 0;
  
  }
/*Classes à tout faire =================*/

		.centre	{text-align : center; margin:auto;}
		.gras	{font-weight :  bold;}
		.it	{font-style : italic;}
		.droite	{text-align : right; padding-right:0.5em;}
		.fonce	{background :#1C4E63;}
		.petit	{font-size : 90%;}
		.retrait{margin-left:10%;}
		.sans_retrait{margin-left:-10%;}
		.ident{margin-left:3%;}
		.ident2{margin-left:6%;}
		.ident3{margin-left:9%;}
		.clair{clear:both;}
		.blanc{background :#F6F3E9;}
		.saute{padding-top:1em;}
		.espace{margin-top:2em;}
		.jaune {color:#946E3A;}
    .lien_discret a, a.lien_discret {text-decoration: none;}
    .vert {color : green;}
    .bas {margin-top:5em;}
    
		.sans_puce {
     		list-style-type : none;
     		list-style-position : outside;
     		line-height : 1em;
     		padding-bottom : 0.1em;
     		padding-top : 0.1em;
		}


		.ex, .nb, .lien { /*exemples et nb : police plus petite, en bleu, marge*/
			font-size : 95%;
			color : #0A246A;
			margin-left : 15%;
			}


		div.ex, div.nb, div.lien { /*exemples et nb : marges quand sont dans des div */
			margin-bottom : 1em;
			margin-top : 1em;
			}
		
		div.ex p, span.ex {	/*les paragraphes dans une div ex et les span  : leur marge ne doit pas s'ajouter à celle inhérentes à la classe ex*/
			margin-left : 0;
			}	

		td.ex {	/*quand l'exemple est dans un tableau, ne doit pas être réduit car la police dans un tableau l'est déjà*/
			font-size : 100%;
			}
		

		.nb {	/*important : encadré et fond blanc*/
			background : #FFFFFF;
			border: solid  0.1em #0A246A;
			padding : 0.5em;
			margin-left : 6em;
			}

		.lien {	/*important : encadré et fond bleu*/
			background : #E2DCC5;
			border: solid  0.1em #946E3A;
			padding : 0.5em;
			margin-left : 6em;
			color : #522718;
			}
		
    .lien a:link, .lien a:visited {
      color :#522718;
      font-weight :  bold;
      }

		.ff, q {	/*pour les citations*/
			font-family: serif;
			font-weight :  bold;
			}
			
		q {  quotes : none;}

		.strong, strong, .strong a:link, .strong a:visited {
			font-weight :  bold;
			color : #946E3A;
			font-size : 107%;
			}
		
		.bleu
		{
			font-weight :  bold;
			color : #0A246A;
		}

          
    code, .code, code p {
      background : #FFFFFF;
      font-family:"Courier New", Courier, monospace;
      font-size:80%;
    }
    
    .nb code {
      background : #F6F3E9;
      font-family:"Courier New", Courier, monospace;
      font-size:80%;
    }


/*TITRES==========================*/

	h1
		{
			font-weight :  bold;
			font-variant : small-caps;
			text-align : center;
			margin-top : 1em;
			color : #1C4E63 ;
			clear:both;

		}

	h2
		{
			margin-top : 5%;
			margin-bottom : 2%;
			font-weight :  bold;
			font-size : 2em;
			font-variant : small-caps;
			background : #1C4E63 ;
			text-align : left;
			color : #FFFFFF;
		}

	h3
	{
			margin-top : 5%;
			margin-bottom : 2%;
			font-weight :  bold;
			font-size : 1.2em;
			font-variant : small-caps;
			background : #1C4E63 ;
			text-align : left;
			color : #FFFFFF;

	}





	h4
		{
			margin-top : 3%;
			margin-bottom : 1% ;
			color : #0A246A;
			font-variant : small-caps;
			font-size : 20px;
			font-weight : bold;
			margin-left : 5%;
			background : #FFFFFF;
		}


	h5
		{
			margin-top : 3%  ;
			margin-bottom : 1% ;
			color : #0A246A;
			font-size : 120%;
			margin-left : 7%;
		}



	h6
		{
			margin-bottom : 0mm;
			font-style :  italic;
			color : #1C4E63;
			margin-left : 5%;
			font-size : 100%;
			margin-left : 9%;
		}


/*  IMAGES  ========================*/

	img
		{	display: block; padding-top:0.5em; padding-bottom:0.5em; }

	img.enligne
		{	display: inline;
			vertical-align : top;
			padding:0em;
		}




/*  LIENS ================================*/

	a	{font-size : 95%;}

	a:link	{color : #0A246A;}

 	a:visited  {color : #1C4E63;}

 	a:hover	{
		background : #FFFFFF;
		color : #1C4E63 ;

		}

		a.droite, a:visited.droite, a:hover.droite {
		text-align:right;
		display: block;
		margin: O;
		color : FF8000;
		background : #F6F3E9;
		}

	#banniere a:visited
	{
		color : #0A246A;
	}

	id a {padding-top:90px;}

/*  LISTES  =======================*/


	ul, ol	{margin-top: 0.5em; margin-left : 6%;}

	li	{margin-bottom : 0.5em;}

	li hr {margin:0;}

  .sans_puce
		{
			list-style-type : none;
		}

      jaune.ul {color:#946E3A;}



	dt {font-weight :  bold;
		margin-top:0.5em	;
			}

	dd {font-weight : normal;
			margin-top :0.5em	;
			margin-bottom :0.5em	;
		}

		
	dl.mod dd { 
	    margin-top :0.5em	;
	    margin-bottom :0.5em	;
	    color : #946E3A;
  }
	
		dt.strong
		{
		text-align:center;
		}

/*liste sommaire*/


  ul.sommaire, dl.interview , dl.sommaire 	/*les caractéristiques des listes des sommaires*/
		{
			width:65%;
          }

  ul.sommaire, dl.interview , dl.sommaire, dl.news
          {
			line-height : 1em;
			background : #F6F3E9;
			/*border: 0.5em solid #1C4E63;*/
			font-size : 95%;
			font-weight : bold;
			margin-top:0.5em;
			margin-left:5%;
			padding-bottom : 0.1em;
			padding-top : 0em;
			padding-left:2em;
			padding-right:0.5em;
			text-align:justify;		/*texte justifé*/
			list-style-type : none;
			list-style-position : outside;
          }


			dl.interview
		{
			width : 90%;
		}
		
      dl.news
          {
               width:90%;
			         border: 0.5em solid #FFFFFF;               
          }

			dl.interview dd
		{
			color : 0A246A;
		}

			dl.interview hr
		{
		border: 0.1em solid #FFFFFF;
		margin-left:-2em;

		}


		ul.sommaire a:hover	{background : #FFFFFF;}

	ul.sommaire ul a   /*les caractéristiques des liens sous-titre des sommaires*/
		{
			padding-left : 1em;
			font-weight : normal;
		}


		ul.sommaire a, dt.sommaire a, div#banniere a {	/*les caractéristiques des liens des listes*/
			font-size : 100%;
			text-decoration: none;
			}
		
		div#banniere a {
			font-weight : bold;
		}
		


		li.titre, li.titre a, dt.titre, dt.titre a /*les caractéristiques des titres des sommaires et définitions*/
			{
			background :#1C4E63;
			color:white;
			margin-left:-1.7em;
			margin-right:-.4em;
			text-align:center;
			font-size : 115%;
			line-height :1.3em;
			font-variant : small-caps;
			margin-top:0;

			}


		li.rubrique, li.rubrique a, dt.rubrique, dt.rubrique a /*les caractéristiques des titres des sommaires et définitions*/
			{
			background :white;
			color:#1C4E63;
			margin-left:-1.7em;
			margin-right:-.4em;
			text-align:center;
			font-size : 115%;
			line-height :1.3em;
			font-variant : small-caps;
			margin-top:0;

			}




/*LES TABEAUX==============================*/

	table
		{
			border-spacing : 0.5em;
			background :#F6F3E9;
			margin-top : 1em;
			border-collapse: collapse;
			border-color:white;
			width:100%;
			text-align:left;
		}

	 th
		{
			background : #1C4E63;
			color:white;
			font-weight : bold;
			text-align:center;
		}


		.lg2
		{width:50%;
		}

		.lg3
		{width:33%;
		}

		.lg4
		{width:25%;
		}

		.lg5
		{width:20%;
		}

		.lg6
		{width:16.66%;
		}

		.lg7
		{width:75%;
		}
		
	td, th
		{
			empty-cell:show;
			border:solid;
			border-width : 0.1em;
			vertical-align:top;
			padding:0.2em;
			border-color:#1C4E63;

		}

	caption, caption a, caption a:visited  /*les caractéristiques titres de tableau*/
		{
			margin-top : 1em;
			background : #FFFFFF;
			color:white;
			font-weight : bold;
			color: #0A246A;
			text-decoration: none;
		}

	table.petit
	 	{
		 	width:90%;
		 	font-size : 90%;
	 	}

  table.bas {
      position:fixed ;
      bottom:0;
      margin-bottom:1em;
      width: 10em;
      border: 0.5em solid #1C4E63;
    }
    
    .input {
    text-align:center;
    }
    
    .champ {
    border:1px solid #1C4E63;
    border-radius:4px;
    margin-bottom:0.5em;
    }
    .bouton {
    font-size :75%;
    }
  

/*  MENU Horizontal ==================================*/

				
		#menuV {
		position: absolute; /* placement du menu, à modifier selon vos besoins */
		top: 5em;
		left: 0;
		width: 10em;
		}
		
		#menuV dl,#menuV ul,#menuV li {
		margin: 0;
		padding: 0;
		list-style-type: none;
		}
		#menuV dt {
			margin: 2px 0;
			height: 20px;
			cursor: pointer;
			text-align: center;
			font-weight: bold;
			background: #1C4E63;
			border: 1px solid #0A246A;
			color : #FFFFFF;
		}
		#menuV dd {
			border: 1px solid #0A246A;
			display: none;
			position: absolute;
			z-index: 100;
			left: 7em;
			margin-top: -2em;
			width: 15em;
			display: none;

			text-align: left;
			background: #F2F2F2;
			color : #0A246A;
			padding-left:0.2em;
			}
			
		#menuV a{
		color : #F2F2F2;
		text-decoration: none;
		display: block;
		border: 0 none;
		height: 100%;		
		}

    #menuV dd a{
		color : #0A246A;
		text-decoration: none;
		display: block;
		border: 0 none;
		height: 100%;		
		}

		#menuV a:hover{
			background: #0A246A;
		}

		#menuV dd a:hover{
			background: #FFFFFF;
		}

		#menuV dt.blanc a:link, #menuV dt.blanc a:hover,#menuV dt.blanc a:visited {
			background: #1C4E63;
			color:#FFFFFF;
		}