*				{margin:0; padding:0; box-sizing:border-box; -moz-box-sizing: border-box}
html 			{font-size:62.5%}
body			{background:white url("../images/fond-ph.jpg") repeat}

.titre1			{font-size:2.4rem; text-align:center; padding:20px 10px 10px 10px; font-weight:bold}
.titre2			{font-size:1.4rem; text-align:center; padding: 0px 10px 20px 10px}
.warning		{font-size:1.2rem; text-align:center; padding: 5px 0 0 0; font-style:italic}

a 				{color: #B80000; text-decoration: none}
a:hover 		{color: #D80000; border-bottom-style: dashed; border-bottom-width: 1px}

.bloc			{padding:10px 20px 0 20px; display:inline-block;
				 font-family: Georgia, "Times New Roman", serif; font-size:1.2rem; line-height:1.5; text-align:left;
				 break-inside:avoid-column; break-inside:avoid}
.bloc h1		{padding:0; font-variant:small-caps; letter-spacing:1px; color:#6D0000; font-size:1.8rem; line-height:1; break-after:avoid}
.bloc h1 span	{padding:1px 4px; background-color:#F0F0F0; color:#444; font-family: arial, sans-serif; font-size:1.0rem; font-weight:normal; font-variant:none; letter-spacing:normal}

.trad			{padding:2px 0 0px 0; font-family: arial, sans-serif; font-size:1.2rem}

.ecole			{padding:2px 0 4px 0; text-align:left; font-style:italic}
.type			{padding:2px 0 0px 0; text-align:left; font-style:italic}
.prerequis		{padding:2px 0 0px 0; text-align:left; font-style:italic}
.description	{padding:4px 0 6px 0; text-align:justify}
.resume			{font-size:1.1rem; text-align:center; padding:5px 0 0 0; font-style:italic; color:#707070}

div.classe 		{display:inline-block; margin:4px 4px 8px 0; padding:0 3px; background-color:#6D0000; font-family: arial, sans-serif; font-size:1.1rem; color:white}
div.tcoe 		{display:inline-block; margin:4px 4px 8px 0; padding:0 3px; background-color:#DA801A; font-family: arial, sans-serif; font-size:1.1rem; color:white}
div.source		{display:inline-block; margin:4px 4px 8px 0; padding:0 3px; background-color:white; font-family: arial, sans-serif; font-size:1.1rem}
div.ref			{padding:4px 0 4px 0; font-family: arial, sans-serif; font-size:1.1rem}

p				{padding:0; margin:9px 0 9px 0}
ul	 			{list-style:square outside; margin-left:17px}
li				{margin-top:3px}
.center			{text-align:center}
.niveau			{font-size:1.8rem; font-weight:bold; text-align:center; background-color:#444; color:white; padding:4px; margin:10px 0 10px 0}

.bloc table		{margin-top:6px; border-spacing:0; font-family: arial, sans-serif; font-size:1.1rem}
.bloc table th	{font-weight:bold; vertical-align:bottom}
.bloc table td	{vertical-align:top}
.bloc table th, .bloc table td {min-width:45px; padding:2px 4px 2px 4px; text-align:left}
.bloc table th.center, .bloc table td.center {text-align:center}
.bloc table td.center {text-align:center}

.picture		{text-align:center; margin-bottom:8px; font-family: arial, sans-serif; font-size:1rem; font-style:italic}
.picture img	{border:4px solid #888; max-width:100%; max-height:400px; height:auto; width:auto}
.poison, .herbe {float:right; margin:0 0 5px 10px}

.monstre		{break-inside:avoid-column; break-inside:avoid}
.orange			{border:1px black solid; background-color:#e69a28; width:100%; height:6px}
.jaune			{background-color: #fdf1dc; padding:10px 8px 5px 8px; margin:0 2px 0 2px; box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.5);
				 background-image: url("../images/fond-mm-effet.png"), url("../images/fond-ph.jpg");
				 background-repeat: no-repeat, repeat}
div svg			{width:100%; height:5px}
.sansSerif		{font-family: arial, sans-serif}
.red			{color:#6D0000}
.carac			{display:inline-block; padding-left:16px; text-align:center}
.rub			{color:#6D0000; margin:10px 0 5px 0; border-bottom:1px solid #B30303; font-size:1.2rem; font-weight: bold; font-variant:small-caps}

div .variant	{background-color:#DBE2C2; font-family: arial, sans-serif;
				 border-top:4px solid #404040; border-bottom:4px solid #404040;
				 padding:5px 10px 0px 10px; margin:10px 0 0 0}
div .variant::first-letter {font-size:15px}

.blocCarte		{display:inline-block; position:relative; width:6.3cm; height:8.8cm; margin:1px 0 0 1px; padding:3px; vertical-align:top; border:4px solid black;
				 background:white url("../images/fond-ph.jpg") repeat; overflow:hidden;
				 font-family: Georgia, "Times New Roman", serif; font-size:1.2rem; line-height:1.3; text-align:left; color:black} 
.blocCarte h1	{font-size:1.2rem; padding:4px 4px 3px 4px}
.blocCarte a	{text-decoration:none; color:black}
.blocCarte .orange	{border:0px black solid; height:0px}
.blocCarte .trad 	{display:none}
.blocCarte .ecole	{padding:2px 0 4px 0}
.blocCarte .type	{padding:2px 0 0px 0}
.blocCarte .carac	{padding-left:1px}
.blocCarte .description	{padding:2px}
.blocCarteP		{font-size:1.1rem; line-height:1.2}
.blocCarteTP 	{font-size:1.0rem; line-height:1.1}
.blocCarteTTP	{font-size:0.9rem; line-height:1.0}
.blocCarte .classe	{display:none}
.blocCarte .tcoe	{display:none}
.blocCarte .source	{position:absolute; bottom:-1px; left:0px; width:100%; margin:4px 4px 0 0; padding:4px 0 0 0; background:black; color:white; font-size:0.9rem; line-height:1.3; letter-spacing:0px}

.cols1			{column-span:all; width:990px; margin-left:auto; margin-right:auto}
.cols2			{column-count:2; width:990px; margin-left:auto; margin-right:auto}
.cols1A			{width:990px; margin-left:auto; margin-right:auto}
.content		{display:inline-block; width:490px; border:1px}
.ads			{display:inline-block; width:490px; border:1px; padding:20px 0 0 20px; vertical-align:top; min-height:600px}
.cel			{display:none}
.nocel			{display:inline-block}

@media print {
	html 	{font-size:62.5%}
	body	{background-image:none}
	.cols1A	{column-count:1; width:100%}
	.content	{width:100%}
	.titre1	{padding-top:0}
	.bloc	{width:100%; min-width:200px; padding:10px 10px 0 10px; font-size:1.1rem; line-height:1.3}
	.bloc a:link, .bloc a:visited, .bloc a:hover {color:#000; text-decoration: none}
	.bloc h1				{font-size:1.2rem}
	.bloc h1:first-letter 	{font-size:1.6rem}
	.prerequis		{padding-top:3px}
	.description	{padding-top:3px}

	div.source	{border:1px solid grey}
	.blocCarte div.source {border-style:none}
	div.ref		{display:none}

	.ads	{display:none}
}

@media only screen and (max-width:980px) { 
	html 	{font-size:80%}
	.bloc	{width:100%; min-width:auto; padding:3%; font-size:1.2rem; margin:0}
	.cols2	{column-count:1; width:100%}
	.cols1A	{width:100%; margin:0}
	.content	{width:100%}
	.ads 		{width:100%; padding:5px; min-height:280px}
	.cel		{display:inline-block}
	.nocel		{display:none}
}