/* Styles pages famille Dardel & heraldique*/
@font-face {font-family: FCopperplate; src: url(../../Typo/Copperplate.ttf);}
@font-face {font-family: FCambria; src: url(../../Typo/Cambria.ttf);}

H1 {
	font-family: Trebuchet, "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
	font-weight: bold;
	font-style: italic;
	font-size: 360%;
	text-align: center;
	color: #111;
	text-shadow: #999 4px 4px 2px;
	width: 84%;
	margin: auto;
}
H1.copper {font-family: FCopperplate; font-style: normal; font-size: 250%;}
H2 {
	font-weight: bold;
	font-size: 200%;
	font-style: italic;
	text-shadow: #CCC 4px 4px 2px;
	text-align: center;
	color: #111;
	width: 84%;
	margin: auto;
}

H3 {
	font-weight: bold;
	font-size: 133%;
	font-style: italic;
	text-shadow: #CCC 4px 4px 2px;
	text-align: center;
	color: #111;
}

H4 {
	font-family: Trebuchet, "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
	font-weight: bold;
	font-size: 300%;
}

H5 {
	font-family: Trebuchet, "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
	font-weight: bold;
	color: #900;
	font-size: 167%;
	text-decoration: none;
}

H6 {
	font-family: Palatino, Times, serif;
	font-weight: bold;
	font-size: 300%;
	color: #900;
	text-align: center;
}

BODY, TD, TH, UL, LI {
	font-family: Trebuchet, "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
	font-size: 14px;
	}

BODY.Tengwar {background: #EEE url(images/Tengwar.jpg);}
BODY.Vinci {background: #EEE url(images/Vinci.jpg);}
BODY.Papier {background: #EEE url(images/Papier.jpg);}
BODY.Ciel {background: #EEE url(images/Ciel512.jpg);}
BODY.Blason {background: #FFF url(images/Blason_Dardel_blanc.svg);}

A:link	IMG	{opacity: 1;}
A:hover IMG {opacity: 0.5;}

A.pasdeco {text-decoration: none;}
A[target] {background-color: #EEF;}

HR.tube {background: #AAF url(images/Tube1.gif) repeat-x;
	height: 10px;
	margin: 0; padding: 0;
	border-style: none;
	}

DIV.main {
	margin-left: 15%; margin-right: 15%; 
	padding: 1.0em 1.5em 0.6em 1.5em;
	text-align: justify;
	background-color: #f8f6f8;
	-moz-box-shadow: 0px 0px 4px 2px white;
	-webkit-box-shadow: 0px 0px 4px 2px white;
	box-shadow: 0px 0px 4px 2px white;
	}

TABLE.maintable {
	background-color: #fcfcfc;
	-moz-box-shadow: 0px 0px 4px 2px white;
	-webkit-box-shadow: 0px 0px 4px 2px white;
	box-shadow: 0px 0px 4px 2px white;
	}

TABLE.maintable TD, TABLE.maintable TH { 
	border-style: solid;
	border-right-color: #999;
	border-bottom-color: #999;
	border-left-color: #DDD;
	border-top-color: #DDD;
	border-width: 1px;
	}
A:link    {color:#00A}
A:visited {color:#715}
A:hover   {color:#900}
A:active  {color:#F00}

A.FootNoteReference
	{font-size: 80%;
	vertical-align: +30%;
	text-decoration: none;}

DIV.FootNoteText 	{font-size: 85%;}

DIV.infodumois {
	position: absolute;
	top: 20em;
	right: 6px;
	background-color: #F9F9F9;
	border: 1px solid #BBE;	
	color: #666;
	font-size: 13px;
	font-style: italic;	
	width: 10%;
	padding: 4px;
	box-shadow: 0px 0px 4px 2px #55B;
	}

IMG {border-color: #AAF; max-width: 100%; height: auto; }
IMG:hover {border-color: #A22;}
IMG { max-width: 100%; height: auto; }

HR.tube {background: #AAF url(images/Tube1.gif) repeat-x;
	height: 10px;
	margin: 0; padding: 0;
	border-style: none;
	}

DIV.bloc, HR.bloc {
	clear: both;
	}

SUP, SUB {
	font-family: Geneva, Arial, sans-serif;
	font-size: 70%;
	line-height: 80%;
	}
	
SUP {vertical-align: +40%;}
SUB {vertical-align: -20%;}
	
.alaligne {clear: both;}
.billebleue{ list-style-image: url(images/BilleBleue.gif);}
.billerouge{ list-style-image: url(images/BilleRouge.gif);}
.blanc {color: #FFF;}
.bleu {color: #00A;}
.bleufonce {color: #005;}
.bleumoyen {color: #339;}
.bloc {clear: both;}
.centre {text-align: center;}
.cambria {font-family: FCambria;}
.copper {font-family: FCopperplate;}	
.droite {float: right; margin-left: 12px;}
.fondblanc {background-color: white;}
.fondbleu {background-color: #F6F6FF;}
.fondgris {background-color: #BBB;}
.fondpale {background-color: #F8F6F8;}
.gauche {float: left; margin-right: 12px;}
.grand {font-size: 140%;}
.grand20 {font-size: 180%;}
.grand24 {font-size: 200%;}
.grand32 {font-size: 250%;}
.grand40 {font-size: 350%;}
.grec {font-family: Symbol;}
.gris {color: #555;}
.grisfonce {color: #333;}
.grispale {color: #AAA;}
.indented {margin-left: +2em;}
.ital {font-style: italic;}
.jaune {color: #FF0;}
.justif {text-align: justify;}
.legende {	text-align: center; font-style: italic;}	
.normal {font-size: 14px; font-weight: normal;}
.ombre {text-shadow: #999 4px 4px 2px;}
.pad10 {padding: 10px;}
.pad20 {padding: 20px;}
.pad50 {padding: 50px;}
.pasjustif {text-align: left;}
.plusbas {padding-top: 1em;}
.pluspetit {font-size: 80%;}
.pluspetit2 {font-size: 66%;}
.plusgrand {font-size: 133%;}
.plusgrand2 {font-size: 120%;}
.rouge {color: #A00;}
.rougemoyen {color: #900;}
.rougefonce {color: #722;}
.sansbord {border: 0px ! important;}
.smallcaps {font-variant: small-caps;}
.verdana {font-family: Verdana, Geneva, Arial, sans-serif;}
.vert {color: #181;}
.vertfonce {color: #033;}
.vertfonce2 {color: #272;}
.violet {color: #319;}

.autre_langue {
	float: right;
	margin-left: 10px;
	}
.bleugras {
	font-weight: bold;
	color: #009
	}
.bordvert {
	font-family: Verdana, Geneva, Arial, sans-serif;
	font-weight: bold;
	font-size: 100%;
	border: groove green 4px;
	}	
.button {  
	font-family: Chicago, "Arial bold", Arial, sans-serif; 
	font-size: 12px;
	color: #000; 
	background-color: #EEE; 
	height: auto; 
	width: auto;
	}
.center50 {
	margin-left: 25%;
	margin-right: 25%;
	text-align: justify;
	}
.center60 {
	margin-left: 20%;
	margin-right: 20%;
	text-align: justify;
	}
.center60c {
	margin-left: 20%;
	margin-right: 20%;
	text-align: center;
	}
.center70 {
	margin-left: 15%;
	margin-right: 15%;
	text-align: justify;
	}
.center80 {
	margin-left: 10%;
	margin-right: 10%;
	}
.center95 {
	margin-left: 2.5%;
	margin-right: 2.5%;
	}
.grandrouge {
	font-family: Trebuchet, "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
	font-size: 200%;
	font-weight: bold;
	color: #A00;
	text-decoration: none;
	}
.grandgras {
	font-size: 240%;
	font-weight: bold;
	}
.grandvert {
	font-size: 300%;
	font-weight: bold;
	color: #050;
	}
.grasbleu {
	font-size: 167%;
	font-weight: bold;
	color: #004
	}
.grasrouge {
	font-weight: bold;
	color: #A00
	}
.grasvert {
	font-size: 167%;
	font-weight: bold;
	color: #040
	}
.grispetit {
	font-size: 80%;
	color: #333;
	}
.lettrine {
	font-size: 550%;
	font-weight: bold;
	float: left;
	padding-right: 5px;
	line-height: 80%;
	}
.nodeco {
	font-family: Trebuchet, "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
	font-weight: bold;
	text-decoration: none;
	}
.plusgrandjaune {
	color: #FF9;
	font-size: 133%;
	}
.plusgrandrouge {
	font-size: 133%;
	color: #A00;
	font-weight: bold;
	}
.sansgras {
	font-family: Trebuchet, "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
	font-weight: bold;
	font-size: 125%;
	}
.sansgrand {
	font-family: Trebuchet, "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
	font-weight: bold;
	font-size: 170%;
	}
.updates {
	color: #666;
	font-size: 75%;
	}
.vertsurblanc {
	background-color: #FFF;
	color: #033;
	}
	
/* Small DIV in heraldique & Tintin ListeAutos */
 DIV#autoDIV, DIV#autoDIV2 { 
	position: fixed; 
	color: #FFF;
	background: #555 url(images/tenture_grise.jpg); 
/*	opacity: 0; */
	box-shadow: 0px 0px 6px 3px #999;
	}
 DIV#autoDIV { 
	top: 4px; 
	text-align: center;
	}
DIV#autoDIV2 { 
	top: 4px; 
	text-align: left;
	padding-top: 12px;
	padding-left: 12px;
	padding-right: 12px;
	}
DIV#fleches { 
	position: fixed; 
	background: transparent; 
	right: 2px; 
	bottom: 100px; 
	font-size: 80%;
	text-align: center;
	z-index: 1; 
	}

DIV.update {
	font-size: 80%;
	position: absolute;
	top: 10px;
	left: 10px;
	text-align: center;
	}
DIV.musique {
	font-size: 80%;
	position: absolute;
	top: 10px;
	right: 10px;
	text-align: center;
	z-index: 3; 
	}

DIV.piedcentre {
	font-size: 80%;
	position: relative; 
	bottom: 4px; 
	text-align: center;
	margin: auto;
	width: 80%;
	}
DIV.pieddroit {
	font-size: 80%;
	position: absolute;
	right: 10px;
	text-align: center;
	}
DIV.piedgauche {
	font-size: 80%;
	position: absolute;
	left: 10px;
	text-align: center;
	}
.bouton {
	position: relative;
	top: 4px;
	right: 3px;
	width: 180px;
	font-weight: bold;
	font-family: Trebuchet, "Trebuchet MS", Verdana, Geneva, Arial, sans-serif;
	font-size: 150%;
	}
.bouton100 {width: 100px;}

DIV.bordgris {
	background-color: rgba(254,254,254,0.6); 	
	border-top: #E2E2E2 solid 6px;
	border-left: #D6D6D6 solid 6px;
	border-bottom: #999 solid 6px;
	border-right: #969696 solid 6px;
	}

.intertitre {
	text-align: center; font-size: 180%; 
	font-weight: bold; font-style: italic; 
	padding: 0.5em 0em; 		/* Top & bottom, right & left */
	margin: 0.5em 0em;
	background-color: #DDE;
	border-width: 2px;
	border-color: #DDD #999 #999 #DDD; /* Top, right, bottom, left */
	border-style: solid;
	}

/* container for "Boxes" */
DIV.container {
	clear: both;
	text-align: center;
	padding: 5px;
	margin-top: 5px;
	}

.boxes, .boxes_h, .boxes0 {
	line-height: 1.33; 
	display: inline-block;
	border: solid 2px;
	border-color: #E9E9E6 #BBB #BBB #E9E9E6;
	text-align: center;
	vertical-align: top; 
	padding: 4px;
	margin: 2px;
	}
.boxes0 {border: 0px;}

/*****************************************/
@media screen and (max-width: 700px) {
	.center50 {margin-left: 8%; margin-right: 8%;}
	}
@media screen and (max-width: 500px) {
	H1 {font-size: 150%; width: 75%;}
	H2 {font-size: 125%; width: 70%;}
	DIV.musique {max-width: 3em;}
	DIV.update {max-width: 5em;}
	DIV.main {margin-left: 4%; margin-right: 4%; margin-top: 30px; text-align: left;}
	DIV.container {padding: 2px;}
	.pad10 {padding: 4px;}
	.center80, .center70, .center60, center60c {margin-left: 2%; margin-right: 2%;}
	.center50 {margin-left: 4%; margin-right: 4%;}
	DIV.gauche, DIV.droite {float: none; text-align: center; margin: auto;}
	.center50 {margin-left: 6%; margin-right: 6%;}
	TABLE.bordgris, DIV.bordgris {border-width: 3px;}
	.intertitre {font-size: 130%;} 
	}