/*Mise en forme globale*/
div.card_conteneur
{
	display: inline-block;
	position: relative; 
}

div.card
{
	width: 375px;
	height: 530px;
	margin: 10px;
	text-align: left;
	border: 18px solid #000;
	border-radius: 17px;
	padding: 0px;
	position: relative;
	font-size: 15px;
	box-shadow: 8px 8px 12px;
	font-family: sans-serif;
	display: inline-block;
	color: #000;
	background-image: url('./fonds/back.png');
}

div.card.mini
{
	border-width: 9px;
	border-radius: 8.5px;
	width: 220px;
	height: 312px;
	font-size: 12px;
}

/* ??? Je sais pas ce que ça fait mais ça casse l'affichage des images */
/*div.card.mini img:not(.se):not(.picture)
{
	width: 10px;
}*/

div.card img.se{display: none;}

div.card.mini img.se
{
	width: auto;
	display:block;
	position: absolute;
	bottom: 3px;
	left:95px;
}

div.card .number_id
{
	font-weight: bold;
	color: #555;
	font-size: 12px;
	position: absolute;
	z-index: 999;
	right: 0px;
	bottom: -16px;
}

div.card.mini .number_id{display: none;}

div.card h1, div.card h2
{
	margin: 0px;
	margin-left:-7px;
	padding: 0px;
	padding-left: 10px;
	text-align: left;
	width: 100%;
	height: auto;
	min-height: 16px;
	font-weight: bold;
	border-radius:10px;
	border: 2px solid;
	position: relative;
	box-shadow: -4px -4px 10px black inset, 4px 4px 10px #fcfdcd inset;
	font-size: 22px;
	background-image: none;
	color: rgba(255,255,255,0.8);
	text-shadow: none;
}

#corps div.card h2{text-align: left;}

div.card h1:after
{
	content: none;
}

div.card.mini h1
{
	font-size: 13px;
}

div.card h2
{
	margin-top: -2px;
	font-size: 17px;
	width: 85%;
}

div.card.mini h2
{
	font-size: 10px;
}

div.card h2:after
{
	text-align: center;
	padding-top: 0;
	padding-bottom: 3px;
	width: 20px;
	height: 18px;
	position: absolute;
	right: -38px;
	margin-top: 2px;
	background-color: rgba(255,255,255,0.7);
	border: 2px solid #000;
	border-radius: 10px;
}

div.card.mini h2:after
{
	right: -26px;
	top: 2px;
	padding: 0;
	padding-top: 1px;
}

div.card p.picture
{
	width: 96%;
	height: 45%;
	overflow: hidden;
	margin: auto;
	border: 2px solid;
	border-top: 0px;
	background-color: #000;
	position: relative;
}

div.card p.picture span
{
	position: absolute;
	right: 0px;
	top: -2px;
	display: block;
	width: 20px;
	height: 40px;
	padding-right: 20px;
	text-align: right;
	line-height: 40px;
	color: #000;
	font-weight: bold;
	font-size: 18px;
	border: 3px solid #000;
	border-right: 0px;
	border-top: 0px;
	border-bottom-left-radius: 20px;
	background-color: rgba(255,255,255,0.9);
	box-shadow: -2px -2px 5px black inset, 4px 4px 10px #fcfdcd inset;
	color: rgba(255,255,255,0.8);
	background-image: url('./icons/BC.png');
	background-repeat: no-repeat;
	background-position: right center;
}

div.card p.picture img
{
	width: 100%;
	height: 100%;
}

div.card p.body
{
	background-color: rgba(255,255,255,0.9);
	height: 172px;
	width: 91%;
	margin: auto;
	margin-top: 7px;
	padding: 10px;
	padding-top: 3px;
	border: 2px solid;
	border-radius: 5px;
	position: relative;
	line-height: 16px;
}

div.card p.body:after
{
    content: '';
	background-image: url('./fonds/series.png');
    width: 88px;
    height: 95px;
	background-position: left;
    position: absolute;
    top: 50px;
    left: 137px;
}

div.card.mini p.body:after
{
	left: 61px;
	top: 10px;
}

div.card.mario p.body:after{background-position: 0 0;}
div.card.dk p.body:after{background-position: -88px 0;}
div.card.zelda p.body:after{background-position: -176px 0;}
div.card.metroid p.body:after{background-position: -264px 0;}
div.card.kirby p.body:after{background-position: -352px 0;}
div.card.starfox p.body:after{background-position: -440px 0;}
div.card.pokemon p.body:after{background-position: -528px 0;}
div.card.fzero p.body:after{background-position: -616px 0;}
div.card.mother p.body:after{background-position: -704px 0;}
div.card.pikmin p.body:after{background-position: -792px 0;}
div.card.fireemblem p.body:after{background-position: -880px 0;}

div.card.mini p.body
{
	width: 85%;
	height: 33%;
}

div.card p.body label
{
	font-weight: bold;
	display: block;
	margin-bottom: 2px;
	margin-top: 2px;
}

div.card p.body label span
{
	font-weight: normal;
	font-style: oblique;
}

div.card.mini p.body label+span
{
	display: none;
}

div.card p.body span.quote
{
	font-style: oblique;
	font-size: 12px;
	display: block;
	width: 95%;
	border: 0;
	border-top: 1px solid #555;
	color: #555;
	position: absolute;
	bottom: 3px;
	padding: 0;
	text-align: left;
}

div.card.mini p.body span.quote, div.card p.body span.quote:empty
{
	display: none;
}

div.card .PF, div.card .PC
{
	border: 3px solid #000;
	border-left: 0px;
	border-bottom: 0px;
	width: 40px;
	height: 20px;
	font-weight: bold;
	font-size: 20px;
	position: absolute;
	padding-left: 25px;
	line-height: 20px;
	left: 0px;
	bottom: 0px;
	background-image: url('./icons/BPF.png');
	background-repeat: no-repeat;
	background-position: left center;
	background-color: rgba(255,255,255,0.9);
	border-top-right-radius: 20px;
	box-shadow: -2px -2px 5px black inset, 2px 2px 5px #fcfdcd inset;
	color: #fff;
}

div.card.magie .PF, div.card.magie .PC
{
	display: none;
}

div.card .PC
{
	border-left: 3px solid #000;
	border-right: 0px;
	border-top-right-radius: 0px;
	border-top-left-radius: 20px;
	background-image: url('./icons/BPC.png');
	background-position: right center;
	padding-left: 0px;
	padding-right: 25px;
	left: auto;
	right: 0px;
	text-align: right;
}

div.card div.copyrigths
{
	font-size: 10px;
	font-style: oblique;
	text-align: center;
	line-height: 10px;
	color: #000;
	text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
}

div.card div.copyrigths img
{
	margin-top: 3px;
}

div.card div.copyrigths a, div.card div.copyrigths a:visited, div.card div.copyrigths a:hover,
#corps div.card div.copyrigths a,#corps div.card div.copyrigths a:visited,#corps div.card div.copyrigths a:hover
{
	font-weight: bold;
	color: #000;
	text-decoration: none;
}

div.card div.copyrigths a:hover, #corps div.card div.copyrigths a:hover
{
	text-decoration: underline;
}

div.card.mini div.copyrigths
{
	display: none;
}

/*Simulation de zoom*/
div.card_conteneur {float: left;}
div.card_conteneur+*:not(.card_conteneur){clear: both;}
div.card_conteneur .card.mini+div.card
{
	visibility: hidden;
	position: absolute;
	top: -156px;
	left: -110px;
}

div.card_conteneur a.card.mini+div.card{left: -420px;}
div.card_conteneur a.card.mini+div.card.show_right{left: 100px;}

div.card_conteneur .card.mini:hover+div.card, div.card_conteneur .card.mini+div.card:hover
{
	visibility: visible;
	z-index: 999;
}

/*Spécificités du Rouge*/	
div.card.red {background-image: url('./fonds/R.png');}

div.card.red .PF, div.card.red .PC, div.card.red p.picture span {background-color: rgba(200,0,0,0.7);}

div.card.red h1, div.card.red h2{background-color: #cc0404; background-color: rgba(204, 4, 4, 0.6);}

div.card.red h1, div.card.red h2, div.card.red p.picture, div.card.red p.body, div.card.red p.picture span {border-color: #990505;}

div.card.red h2:after {content: url('./icons/R.png');}

/*Spécificités du Vert*/	
div.card.green {background-image: url('./fonds/G.png');}

div.card.green .PF, div.card.green .PC, div.card.green p.picture span {background-color: rgba(0,200,0,0.7);}

div.card.green h1, div.card.green h2{background-color: rgb(0, 130, 0); background-color: rgba(0, 130, 0, 0.6);}

div.card.green h1, div.card.green h2, div.card.green p.picture, div.card.green p.body, div.card.green p.picture span {border-color: #059905;}

div.card.green h2:after {content: url('./icons/G.png');}

/*Spécificités du Bleu*/	
div.card.blue {background-image: url('./fonds/B.png');}

div.card.blue .PF, div.card.blue .PC, div.card.blue p.picture span {background-color: rgba(0,0,200,0.7);}

div.card.blue h1, div.card.blue h2{background-color: #0606d9; background-color: rgba(6, 6, 217, 0.6);}

div.card.blue h1, div.card.blue h2, div.card.blue p.picture, div.card.blue p.body, div.card.blue p.picture span {border-color: #050599;}

div.card.blue h2:after {content: url('./icons/B.png');}

/*Spécificités du Blanc*/	
div.card.white{background-image: url('./fonds/W.png');}

div.card.white .PF, div.card.white .PC, div.card.white p.picture span {background-color: rgba(200,200,200,0.7);}

div.card.white .PF, div.card.white .PC {color: rgb(15, 15, 15);}

div.card.white h1, div.card.white h2 {background-color: #ccc; background-color: rgba(204, 204, 204, 0.6); color: rgb(15, 15, 15);}

div.card.white h1, div.card.white h2, div.card.white p.picture, div.card.white p.body, div.card.white p.picture span {border-color: #999;}

div.card.white h2:after {content: url('./icons/W.png');}

div.card.white p.body {background-color: rgba(255,255,255,0.5);}

/*Spécificités du Marron*/	
div.card.brown {background-image: url('./fonds/M.png');}

div.card.brown .PF, div.card.brown .PC, div.card.brown p.picture span {background-color: rgba(206,123,57,0.7);}

div.card.brown h1, div.card.brown h2{background-color: #915627; background-color: rgba(145, 86, 39, 0.6); }

div.card.brown h1, div.card.brown h2, div.card.brown p.picture, div.card.brown p.body, div.card.brown p.picture span {border-color: #490505;}

div.card.brown h2:after {content: url('./icons/M.png');}

/*Spécificités du Jaune*/	
div.card.yellow {background-image: url('./fonds/Y.png');}

div.card.yellow .PF, div.card.yellow .PC, div.card.yellow p.picture span {background-color: rgba(200,200,0,0.7);}

div.card.yellow h1, div.card.yellow h2{background-color: #b2b200; background-color: rgba(178, 178, 0, 0.6);}

div.card.yellow h1, div.card.yellow h2, div.card.yellow p.picture, div.card.yellow p.body, div.card.yellow p.picture span {border-color: #999905;}

div.card.yellow h2:after {content: url('./icons/Y.png');}

/*Spécificités du Violet*/	
div.card.purple {background-image: url('./fonds/P.png');}

div.card.purple .PF, div.card.purple .PC, div.card.purple p.picture span {background-color: rgba(153,50,204,0.7);}

div.card.purple h1, div.card.purple h2{background-color: #6b228f; background-color: rgba(107, 34, 143, 0.6);}

div.card.purple h1, div.card.purple h2, div.card.purple p.picture, div.card.purple p.body, div.card.purple p.picture span {border-color: #8821bb;}

div.card.purple h2:after {content: url('./icons/P.png');}