* { margin: 0px; padding: 0px; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-user-select: none; }

@font-face { font-family: Bouton; src: url('../font/gnuolane rg.otf'); } 

body { font-family: Arial, Verdana; background-color: black; font-family: Bouton; }

html,body,#viewport{ width: 480px; height: 300px; margin: auto; position: relative; }

#chargement{ display: none;}
#viewport { display: block !important; }

#ecran_accueil{ background-image: url("../img/480x300/splash.jpg"); background-size: 480px 300px; }

.carte{	width: 50px; height: 70px; float: left; margin-left: 10px; border-radius: 10px; }
.carte_cachee { -webkit-transform: rotateY(-180deg); }

.dos_carte { -webkit-backface-visibility: hidden; }

.masque_carte, .image_carte,.dos_carte { width: 50px; height: 70px;position: absolute; }
.image_carte, .dos_carte { border-radius: 3px; }
.masque_carte { background-image: url("../img/480x300/icone-garder2.png"); background-repeat: no-repeat; background-position: top right;/*background-color: black;*/ display: none; z-index: 3; }
.image_carte { background-image: url("../img/480x300/cartes5.png"); background-color: white; background-size: 650px 280px; background-position: top left; color: red; font-weight: bold; text-align: center; z-index: 1; }
.dos_carte { z-index: 2; background-image: url("../img/480x300/doscarte2.png"); }

#bloqueur,#table,#menu_rejouer,#menu_regles, #ecran_accueil { position: absolute; width: 480px; height: 300px; }

#ecran_accueil { z-index: 1500; color: white; font-size: 4em; }

#menu_rejouer { display: none; z-index: 1001; background-color: rgba(0,0,0,0.5); }
#menu_rejouer input{ display: block; margin: auto; width: 250px; margin-top: 20px; height: 40px; }
#conteneur_rejouer { width: 300px; margin: auto; background-color: rgba(255,255,255,0.7); padding-top: 10px; padding-bottom: 10px; margin-top: 70px; border-radius: 10px; border: 2px solid #ff48a4; }
#message_rejouer { font-size: 1.2em; width: 250px; margin: auto; text-align: center; }
#message_rejouer strong { color: #ff48a4; }

#menu_regles { display: none; z-index: 1001; background-color: rgba(0,0,0,0.5); }
#conteneur_regles { width: 400px; margin: auto; background-color: rgba(255,255,255,0.7); margin-top: 20px; border-radius: 10px; border: 2px solid #ff48a4; }
#conteneur_regles p, #conteneur_regles h1 { padding-left: 10px; padding-right: 10px; text-align: justify; }
#conteneur_regles h1 { font-size: 1.5em; padding-top: 10px; }
#conteneur_regles p { font-size: 0.9em;padding-bottom: 10px;  }
#conteneur_regles a { color: black; }

#bouton_regles, #bouton_plus { display: block; position: absolute; top: 10px; width: 33px; height: 33px; background-size: 33px 33px; }
#bouton_regles { right: 10px; background-image: url("../img/480x300/bouton_regles.png"); }
#bouton_plus { right: 50px; background-image: url("../img/480x300/bouton_plus.png"); }

#bouton_regles { right: 10px; }
#bouton_cgu { right: 50px; }

#bloqueur { z-index: 1000; }
#table{ color: #ffcdde; border-collapse: collapse; background-size: 100%; background-repeat: no-repeat; background-position: top center; } /*#470825*/

#table_haut{ height: 100px; }
#table_bas { height: 100px; }


#bas { padding-top: 10px; background-color: #470825; height: 91px;}
#conteneur_boutons { width: 30%; float: right; }
#conteneur_boutons input { width: 80%; }
#conteneur_cartes { width: 70%; }

#conteneur_indication { float: left; padding-left: 25px;
background-image: url("../img/480x300/fleche.png"); background-repeat: no-repeat; background-size: 15px 15px; background-position: 5px 50%; }
#conteneur_credit { background-color: rgba(0,0,0,0.4); text-align: right; padding-right: 5px; }

#haut{ height: 170px; padding-top: 10px; }
#banniere { width: 300px; height: 50px; margin: auto; /*background-color: red;*/ }

input[type="button"]{
	background-color: #ff48a4;
	border: 1px solid #4a0326;
	padding: 3px;
	padding-left: 10px;
	padding-right: 10px;
	background-image: linear-gradient(top,#ff48a4 0%,#a6125d 100%);
	background-image: -webkit-linear-gradient(top,#ff48a4 0%,#a6125d 100%);
	background-image: -moz-linear-gradient(top,#ff48a4 0%,#a6125d 100%);
	-webkit-box-shadow: 0px 0px 5px #000;
	color: #ffcdde;
	font-size: 1.2em;
	font-family: Bouton;
}

input[type="button"]:disabled{
	background-image: linear-gradient(top,#510b2a 0%,#a6125d 100%);
	background-image: -webkit-linear-gradient(top,#510b2a 0%,#a6125d 100%);
	background-image: -moz-linear-gradient(top,#510b2a 0%,#a6125d 100%);
	color: #90747d;
}

#photo{
	width: 480px;
	height: 300px;
	position: absolute;
	background-color: black;
	background-repeat: no-repeat;
	background-size: 480px
}