@charset "utf-8";
/* CSS Document */

html, body {
 margin: 0;
 padding: 0;
 }
html {
    background: url(../img/fnd.jpg) repeat;
/*    background-size: cover;*/
}
body {
	font-family: "Georgia";
}
.container {
	width: 820px;
	hight: auto;
	margin: 0 auto; /* la valeur automatique sur les côtés, associée à la largeur, permet de centrer la mise en page */
}
.content {
	margin: 0 auto; /* la valeur automatique sur les côtés, associée à la largeur, permet de centrer la mise en page */
	background-color: #ffffff;
	width: 820px;
	margin-top: 80px;
	margin-left: -20px;
	opacity: 1;
	height: auto;
	padding: 10px;
	overflow: auto;
	border: 10px solid #EAEAEA;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;	
}
.header {
	width: 100%;
	margin-top: 0;
	height: 60px;
	text-align: center;
	vertical-align: top;
	z-index: 9999;
	padding: 5px 0 0 0;
	background-image: url(../img/pat1.jpg);
	background-repeat: repeat-x;
	margin: 0 auto;
	  position: sticky;
  top: 0;
  z-index: 100;
}	
.section
	{
	background-color: #ffffff;
	border-width: 10px;
	border-style: solid;
	border-color: #EAEAEA;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	width: 820px;
	margin: 0 auto;
	opacity: 1;
	height: 730px;
	padding: 10px;
	overflow: auto;
	}
.article
	{
	width: 500px;
 	display: inline-block;		
	margin-top:5px;		
	border-left: dashed #ABABAB 1px;	
	}
.aside
	{
	float: left;
	margin-right: 5px;
	margin-top: 5px;
	height: auto;
	margin-bottom: 10px;
	width: 280px;
	text-align: left;
	border-left: dashed #ABABAB 1px;
	}
/* ~~ Sélecteurs d'éléments/balises ~~ */
ul, ol, dl, {
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	font-family: "Georgia";
	font-size: 1em;	
	margin-top: 0;
	padding-right: 15px;
	padding-left: 15px;
	color: #333333;
	font-style: normal;
}
h1
	{
	margin-top: 0;
	font-weight: normal;
	font-size: 0.95em;
	margin-left:0;
	text-align: justify;
	line-height: 24px;
	color: #666666;
	}
h2
	{
	font-size: 0.9em;
	font-style: normal;
	font-weight: bold;
	}
h3
	{
	font-style: normal;
	text-align: center;
	margin-top: 0;
	}
h4
	{
	font-style: normal;
	font-weight: bold;
	font-size: 0.9em;
	text-align: left;
	margin-bottom: 0;
	margin-top: 5px;
	line-height: 22px;
	}
h5
	{
	font-style: normal;
	font-weight: bold;
	text-align: left;
	margin-left: 0;
	font-size: 0.8em;
	margin-top: 0px;
	margin-bottom: 0px;
	}
h6
	{
	font-style: normal;
	font-weight: normal;
	font-size: 1.25em;
	text-align: center;
	margin-bottom: 0;
	margin-top: 10px;
	line-height: 22px;
	color: #d32f74;
	font-variant: small-caps;
	text-shadow:2px 2px 2px #c2c6c9;
	}
#col
	{
	color: #d32f74;
	}
.gras
	{
	font-family: "Georgia";
	font-weight: 700;
	}
.grasbleu
{
	color:#06C;
	font-weight: 700;	
}	
.ital
	{
	font-family: "Georgia";
	font-style: italic;
	color: #2D2D2D;
	}
.italgr
	{
	font-family: "Georgia";
	font-style: italic;
	color: #2D2D2D;
	font-weight: 600;
	}	
.gauche
	{
	text-align: left;
	}
.droite
	{
	text-align: right;
	}
	
.maj
	{
	font-stretch: wider;
	font-variant: small-caps;
	font-size: 1.1em;
	color: #666;
	margin-bottom: 1em;
	}
#centre
	{
		text-align:center;
	}	
a img { /* ce sélecteur élimine la bordure bleue par défaut affichée dans certains navigateurs autour d'une image lorsque celle-ci est entourée d'un lien. */
	border: 0;
}
/* ~~ La définition du style des liens de votre site doit respecter cet ordre, y compris le groupe de sélecteurs qui créent l'effet de survol. ~~ */
a {
	font-family: "Georgia";
	font-size: 1em;
	color: #d32f74;
	text-decoration: none; /* à moins que vous ne définissiez un style particulièrement exclusif pour vos liens, mieux vaut prévoir un soulignement, qui garantit une identification visuelle rapide. */
	font-weight: normal;
}
a:hover, a:focus { /* ce groupe de sélecteurs offrira à un navigateur au clavier la même expérience de survol que celle d'une personne employant la souris. */
	text-decoration: none;
	color: #999999;
	font-weight: normal;
}
/* ~~ Aucune largeur n'est attribuée à l'en-tête. Il occupera toute la largeur de votre mise en page. ~~ */

/* ~~ Ce sélecteur groupé donne de l'espace aux listes dans la zone de contenu ~~ */
.content ul, .content ol {
	padding: 0 10px 10px 40px; /*  cette marge intérieure reflète la marge intérieure droite dans les en-têtes et la règle de paragraphe ci-dessus. Une marge intérieure a été placée en bas, afin d'assurer un espace entre les autres éléments des listes, et à gauche pour créer le retrait. Vous pouvez les régler comme bon vous semble. */
}
/* ~~ Styles de liste de navigation (peuvent être supprimés si vous optez pour un menu de survol prédéfini tel que Spry) ~~ */
<li>/* ~~ Classes flottant/effacement diverses ~~ */
.fltlft 
{ /* cette classe peut servir à faire flotter un élément depuis la gauche sur votre page. L'élément flottant doit précéder l'élément à côté duquel il doit apparaître sur la page. */
	float: left;
	overflow: hidden;
	padding-right: 10px;	
}
.clearfloat { /* cette classe peut être placée sur un <br /> ou un élément de bloc vide en tant qu'élément final suivant le dernier bloc flottante (dans le .container) si le pied de page est supprimé ou retiré du .container. */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0;
}
.fltrt  {
	float: right;
	overflow: hidden;
	margin-left: 8px;	
}
.imgtxtlft	
	{
	float: left;
	padding: 0px 10px 10px 10px;
	}
.imgtxtrig	
	{
	float: right;
	padding: 0px 10px 10px 10px;
	}	
img
	{
	margin-top: 3px;
	margin-bottom: 3px;
	overflow: hidden;
	}
/* Gradient transparent - color - transparent */	
hr {
    border: 0;
    height: 1px;
    margin-top:0;
    margin-bottom:0;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,0.75), rgba(0,0,0,0)); 
}
.sgn
	{
	vertical-align: bottom;
	margin-bottom: -3px;
	margin-left: 0;
	}	
@font-face {
    font-family: 'GeorgiaRegular';
    src: url('../fonts/georgiai.svg');
    src: url('../fonts/georgia.eot') format('embedded-opentype'),
         url('../fonts/georgia.eot') format('woff'),
         url('../fonts/georgia.eot') format('truetype'),
         url('../fonts/georgia.eot') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'GeorgiaBold';
    src: url('../fonts/georgiab.eot');
    src: url('../fonts/georgiab.eot') format('embedded-opentype'),
         url('../fonts/georgiab.eot') format('woff'),
         url('../fonts/georgiab.ttf') format('truetype'),
         url('../fonts/georgiab.ttf') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GeorgiaItalic';
    src: url('../fonts/georgiab.ttf');
    src: url('../fonts/georgiab.ttf?#iefix') format('embedded-opentype'),
         url('../fonts/georgiai.woff') format('woff'),
         url('../fonts/georgiai.woff') format('truetype'),
         url('../fonts/georgiai.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

#pop
	{color:#c6230f;
	}
/* Let's get this party started */
::-webkit-scrollbar {
    width: 10px;
}
/* Track */
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px #8e908f; 
    -webkit-border-radius: 10px;
    border-radius: 15px;
}
/* Handle */
::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #8e908f; 
    -webkit-box-shadow: inset 0 0 10px #8e908f; 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: #8e908f; 
}
#styl
	{
	width: 90px;
	padding: 2px;
	float: left;
	top: 17px;
	position: absolute;
	}
.chin1
	{
	font-size: 0.9em;
	text-decoration: underline;

	}	
.chin2
	{
	font-size: 1em;
	font-style: normal;
	font-weight: normal;
	font-stretch: extra-expanded;
	margin: 10px 20px 10px 20px;
	}
.chin3
	{
	font-style: normal;
	font-weight: bold;
	font-size: 1em;
	text-align: center;
	margin-bottom: 10px;
	margin-top: 5px;
	line-height: 1.2em;
	}	
.menu
{
	margin: 0 auto;
}
#imgctr
{
	margin: 0 auto;
}
#italjust
{
		text-align: justify;
		font-family: "Georgia";
		font-style: italic;
}
table
	{
	width: 450px;
	margin: 0 auto;
	border-collapse: collapse;	
	}
table, th, td
	 {
	border: 1px solid #CCC;
	font-family: "Georgia";
	font-size: 0.9em;
	color: #666666;
	}	
.td1
	{
	width: 150px;
	background-color: #CCCCCC;
	}
.td2
	{
	width: 300px;
	background-color: #CCCCCC;	
	}
td
	{
	background-color: #fff;
	vertical-align:middle;
	font-style: normal;
	font-weight: normal;
	font-size: 0.95em;
	padding:5px;
	}
.norm
	{
		text-align:left;
		font-size: 1em;
		font-style: normal;
		color: #666666;	
		padding-right: 15px;
		padding-left: 15px;
	}
#big
	{
		font-size:24px;
		text-align:center;
		font-family: "Georgia";
		color:#000;
	}
#small
	{
		font-size:0.8em;
		color: #666666;		
	}
#med
	{
		font-size:1.25em;
		color:#666666;
	}
.textimg
	{
	vertical-align: text-top;
	}
.imgtxtlft	
	{
	float: left;
	margin: 10px 20px 10px 10px;
	}
.imgtxtrig	
	{
	float: right;
	margin: 10px 10px 10px 20px;
	}	
blockquote
	{
	margin: 5px 0px 20px 30px;
	}
iframe {
	width: 1000px;
	margin: 0 auto;
	border: none;
	overflow: hidden;
	border-spacing: 0;
	vertical-align: top;
	height: 400px;
	background-color: transparent;
}
.article {
	width: 700px;
	margin: 0 auto;
	border: none;
}