Charro CSS

                Never    
CSS
       
html { overflow-y: hidden; }




body {
	font-family: "comic sans ms", verdana;
	font-weight: 400;
	font-size: 85%;
	width:75%;
	margin: 0% auto;
	background: #ecf0f1;
    color: #e90d19;
	
	}
#Affiche
{
	position:absolute;
	border:hidden;
	left:13%;
}
	
#element {
	border-color: #F37729;
	box-shadow: 0 0 50px #E40527;
	font-size : 100% ; 
	}	
#Affichage1{
	border-color: #FF5405;
	box-shadow: 0 0 50px #E40527;
	font-size : 100% ;
	}
#Affichage2{
	border-color: #FF5405;
	box-shadow: 0 0 50px #E40527;
	font-size : 100% ;
	}
#Base {
	border-color: #E40527;
	box-shadow: 0 0 50px #E40527;
	font-size : 14px ;
}
#Text
{
    padding: 0% 50% 0% 0%;
	margin: 0.5% 0% 0% -24%;
	float: right;
	width: 10%;
}
#ligne2
{
  float:;
  margin: 0% -50% 0% 8%;
}
#deck1
{
	visibility:visible;
	position:absolute;
	left:5%;
	top:60%;
	left:26%;	
	height:35%;
	width:45%;
	display:block;
}
#deck2
{
	
	position:absolute;
	left:5%;
	top:60%;
	left:26%;
	visibility:hidden;
	height:35%;
	width:45%;
}
#deck3
{
	
	position:absolute;
	left:5%;
	top:60%;
	left:26%;
	visibility:hidden;
	height:35%;
	width:45%;
}
#deck4
{
	
	position:absolute;
	left:5%;
	top:60%;
	left:26%;
	visibility:hidden;
	height:35%;
	width:45%;
}
#deck5
{
	
	position:absolute;
	left:5%;
	top:60%;
	left:26%;
	visibility:hidden;
	height:35%;
	width:45%;
}
#deck6
{
	/* border:solid; */
	position:absolute;
	left:5%;
	top:60%;
	left:26%;
	/* visibility:hidden; */
	height:35%;
	width:45%;
	
}
img
{
	max-width:100%;
	max-height:100%;
	border:solid white;
	border-radius:22%;
}
#carte11
{
	position:absolute;
	width:25%;
	height:100%;
}
#carte12
 {
	position:absolute;
	left:16%;
	width:25%;
	height:100%;
	} 
#carte13
 {
	position:absolute;
	left:32%;
	width:25%;
	height:100%;
	}
#carte14
 {
	position:absolute;
	left:48%;
	width:25%;
	height:100%;
	}
#carte15
 {
	position:absolute;
	left:64%;
	width:25%;
	height:100%;
	}
#carte16
 {
	position:absolute;
	left:80%;
	width:25%;
	height:100%;
	}
#carte21
 {
	position:absolute;
	width:25%;
	height:100%;
	}
#carte22
 {
	position:absolute;
	left:16%;
	width:25%;
	height:100%;
	}
#carte23
 {
	position:absolute;
	left:32%;
	width:25%;
	height:100%;
	}
#carte24
 {
	position:absolute;
	left:48%;
	width:25%;
	height:100%;
	}
#carte25
 {
	position:absolute;
	left:64%;
	width:25%;
	height:100%;
	}
#carte26
 {
	position:absolute;
	left:80%;
	width:25%;
	height:100%;
	}
#carte31
 {
	position:absolute;
	width:25%;
	height:100%;
	}
#carte32
 {
	position:absolute;
	left:16%;
	width:25%;
	height:100%;
	}
#carte33
 {
	position:absolute;
	left:32%;
	width:25%;
	height:100%;
	}
#carte34
 {
	position:absolute;
	left:48%;
	width:25%;
	height:100%;
	}
#carte35
 {
	position:absolute;
	left:64%;
	width:25%;
	height:100%;
	}
#carte36
 {
	position:absolute;
	left:80%;
	width:25%;
	height:100%;
	}
#carte41
 {
	position:absolute;
	width:25%;
	height:100%;
	}
#carte42
 {
	position:absolute;
	left:16%;
	width:25%;
	height:100%;
	}
#carte43
 {
	position:absolute;
	left:32%;
	width:25%;
	height:100%;
	}
#carte44
 {
	position:absolute;
	left:48%;
	width:25%;
	height:100%;
	}
#carte45
 {
	position:absolute;
	left:64%;
	width:25%;
	height:100%;
	}
#carte46
 {
	position:absolute;
	left:80%;
	width:25%;
	height:100%;
	}
#carte51
 {
	position:absolute;
	width:25%;
	height:100%;
	}
#carte52
 {
	position:absolute;
	left:16%;
	width:25%;
	height:100%;
	}
#carte53
 {
	position:absolute;
	left:32%;
	width:25%;
	height:100%;
	}
#carte54
 {
	position:absolute;
	left:48%;
	width:25%;
	height:100%;
	}
#carte55
 {
	position:absolute;
	left:64%;
	width:25%;
	height:100%;
	}
#carte56
 {
	position:absolute;
	left:80%;
	width:25%;
	height:100%;
	}
#carte61
 {
	
	position:absolute;
	width:25%;
	height:100%;
	}
#carte62
 {
	
	position:absolute;
	left:16%;
	width:25%;
	height:100%;
	}
#carte63
 {
	 
	position:absolute;
	left:32%;
	width:25%;
	height:100%;
	}
#carte64
 {
	
	position:absolute;
	left:48%;
	width:25%;
	height:100%;
	}
#carte65
 {

	position:absolute;
	left:64%;
	width:25%;
	height:100%;
	}
#carte66
 {

	position:absolute;
	left:80%;
	width:25%;
	height:100%;
	}
.Button
{
	width:150px;
	margin: 10px 10px 10px 10px auto;
    height:100%;
}
body{
  text-align:center;
}

/* Masquer le bouton radio d'origine */
input[type=radio]{
    display: none;
}

/* Affichage par défaut du bouton radio personnalisé */
input[type=radio] + label:before {
    background: #fff;
    border: 2px solid #ccc;
    border-radius: 50%;
    margin-top: -3px;
    margin-right: 6px;
    display: inline-block;
    vertical-align: middle;
    content: '';
    width: 17px;
    height: 17px;
}
/* Affichage du bouton radio personnalisé quand il est sélectionné */
input[type=radio]:checked + label:before {
    background: #fb8819;
    border-color: #fb8819;
    box-shadow: inset 0px 0px 0px 2px #fff;
}

#ButtonBlock
{
	visibility:hidden;
	margin-left: auto;
    margin-right: auto;
	/* text-align:center; */
	border:solid black 4px;
	background-color:#e5e1e0;
	border-radius:20%;
	width: 15%;
	height:12%;
	display: block;	
	position:absolute;
	left: 42%;
	right:42%;
	top:77%;

}
#Chiffre0
{
	visibility:hidden;
}
#Chiffre1
{
	float:left;
	text-align: center;
	/* width: 20%; */
}
#Chiffre2
{
	float:left;
	text-align: center;
	/* margin-left:20% */
}
#Chiffre3
{
	float:left;
	text-align: center;
	/* margin-left:20% */
}
#Chiffre4
{
	float:left;
	text-align: center;
	/* margin-left:20% */
}
#Chiffre5
{
	float:left;
	text-align: center;
	/* margin-left:20% */
}
#Chiffre6
{
	float:left;
	text-align: center;
	/* margin-left:20% */
}
#Chiffre7
{
	float:left;
	text-align: center;
	/* margin-left:20% */
}
#Chiffre8
{
	float:left;
	text-align: center;
	/* margin-left:20% */
}
#Chiffre9
{
	float:left;
	text-align: center;
	/* margin-left:20% */
}
#Chiffre10
{
	float:left;
	text-align: center;
	/* margin-left:20% */
}
#ButtonBlock
{
    margin-bottom:14px;
}
label{
    cursor:pointer;
}

#demarrage
{
	position: absolute;
	top:73%;
	left:25%;
	right:25%;
	visibility:hidden;
	
	
}
.Affichage
{
	font-weight: bolder;
	text-align: center;
}
	
input {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	border:1px solid #E40527;
	font-size:15px;
	width:100px;
	min-height:20px;
	margin-bottom:5px;
	margin-top:5px;
	border-radius: 150px;
	}
	
#tour
{
	/* float; */
	margin-right: 100%;
}
#Valider
{
	
	visibility:hidden;
	position: absolute;
	top:73%;
	left:25%;
	right:25%;
}

#ChoixJoueur
{
	visibility:hidden;
	margin-left: auto;
    margin-right: auto;
	border:solid black 4px;
	background-color:#e5e1e0;
	border-radius:20%;
	width: 13%;
	height:15%;
	display: block;	
	position:absolute;
	left: 42%;
	right:42%;
	top:77%;
}
#Joueur_0
{
	visibility:hidden;
}
#Joueur_1 , #Joueur_2 , #Joueur_3 , #Joueur_4 , #Joueur_5 , #Joueur_6
{
	float:left;
	text-align: center;
}

#Reception
{
	visibility:hidden;
	position:absolute;
	background-color:#e5e1e0;
	border:solid black 4px;
	width: 50%;
	height:90%;
	margin-left: auto;
    margin-right: auto;
	border-radius:20%;
	left: 25%;
	right:25%;
	top:5%;
}
#RecepBouton
{
	/* border:solid; */
	width:30%;
	position:absolute;
	top:10%;
	left:35%
}

#Relancer
{
	/* border:solid; */
	width:30%;
	position:absolute;
	top:12.80%;
	left:35%
}
#Recep1
{
/* border:solid; */
	width:35%;
	position:absolute;
	top:11%;
	left:32%	
}
#Recep2
{
/* border:solid; */
	visibility: hidden;
	width:35%;
	position:absolute;
	top:11%;
	left:32%	
}
#Recep3
{
/* border:solid; */
	visibility: hidden;
	width:35%;
	position:absolute;
	top:11%;
	left:32%	
}
#EmplacementAnnonce1
{
	
	position:absolute;
	left:31%;
	top:15%;
	width:38%;
	height:80%;
}
#EmplacementAnnonce2
{
	visibility: hidden;
	position:absolute;
	left:31%;
	top:50%;
	width:38%;
	height:80%;
}
#EmplacementAnnonce3
{
	visibility: hidden;
	position:absolute;
	left:31%;
	top:85%;
	width:38%;
	height:80%;
}
#EmplacementReception1
{
	
	position:absolute;
	left:31%;
	top:15%;
	width:35%;
	height:73%;
}
#EmplacementReception2
{
	visibility: hidden;
	position:absolute;
	left:31%;
	top:20%;
	width:35%;
	height:73%;
}
#EmplacementReception3
{
	visibility: hidden;
	position:absolute;
	left:31%;
	top:25%;
	width:35%;
	height:73%;
}
#Score
{
	/* border:solid; */
	position:absolute;
	left: 65%;
	width:30%;
	height:50%;
	top:0%;
}
#Score1
{
	display: flex;
    justify-content: start;
	/* border:solid; */
	position:absolute;
	top:0%;
	left:52%;	
	height:10%;
	width:45.5%;
}
#Score2
{
	display: flex;
    justify-content: start;
	/* border:solid; */
	position:absolute;
	top:10%;
	left:52%;	
	height:10%;
	width:45.5%;
}
#Score3
{
	/* border:solid; */
	position:absolute;
	top:20%;
	left:52%;	
	height:10%;
	width:45.5%;
}
#Score4
{
	/* border:solid; */
	position:absolute;
	top:30%;
	left:52%;	
	height:10%;
	width:45.5%;
}
#Score5
{
	/* border:solid; */
	position:absolute;
	top:40%;
	left:52%;	
	height:10%;
	width:45.5%;
}
#Score6
{
	/* border:solid; */
	position:absolute;
	top:50%;
	left:52%;	
	height:10%;
	width:45.5%;
}

#ScoreCarte11
{
	position:absolute;
	right:120%;
	width:17.5%;
	height:120%;
	
}
#ScoreCarte12
 {
	position:absolute;
	right:105%;
	width:17.5%;
	height:120%;
	} 
#ScoreCarte13
 {
	position:absolute;
	right:90%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte14
 {
	position:absolute;
	right:75%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte15
 {
	position:absolute;
	right:60%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte16
 {
	position:absolute;
	right:45%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte17
 {
	position:absolute;
	right:30%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte18
 {
	position:absolute;
	right:15%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte19
 {
	position:absolute;
	right:0%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte110
 {
	position:absolute;
	right:-15%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte21
 {
	position:absolute;
	right:120%;
	width:17.5%;
	height:120%;
	/* border:solid; */
	}
#ScoreCarte22
 {
	position:absolute;
	right:105%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte23
 {
	position:absolute;
	right:90%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte24
 {
	position:absolute;
	right:75%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte25
 {
	position:absolute;
	right:60%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte26
 {
	position:absolute;
	right:45%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte27
 {
	position:absolute;
	right:30%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte28
 {
	position:absolute;
	right:15%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte29
 {
	position:absolute;
	right:0%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte210
 {
	position:absolute;
	right:-15%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte31
 {
	position:absolute;
	right:120%;
	width:17.5%;
	height:120%;
	
	}
#ScoreCarte32
 {
	position:absolute;
	right:105%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte33
 {
position:absolute;
	right:90%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte34
 {
	position:absolute;
	right:75%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte35
 {
	position:absolute;
	right:60%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte36
 {
	position:absolute;
	right:45%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte37
 {
	position:absolute;
	right:30%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte38
 {
	position:absolute;
	right:15%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte39
 {
	position:absolute;
	right:0%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte310
 {
	position:absolute;
	right:-15%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte41
 {
	position:absolute;
	right:120%;
	width:17.5%;
	height:120%;
	
	}
#ScoreCarte42
 {
	position:absolute;
	right:105%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte43
 {
	position:absolute;
	right:90%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte44
 {
	position:absolute;
	right:75%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte45
 {
	position:absolute;
	right:60%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte46
 {
	position:absolute;
	right:45%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte47
 {
	position:absolute;
	right:30%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte48
 {
	position:absolute;
	right:15%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte49
 {
	position:absolute;
	right:0%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte410
 {
	position:absolute;
	right:-15%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte51
 {
	position:absolute;
	right:120%;
	width:17.5%;
	height:120%;
	
	}
#ScoreCarte52
 {
	position:absolute;
	right:105%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte53
 {
	position:absolute;
	right:90%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte54
 {
	position:absolute;
	right:75%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte55
 {
	position:absolute;
	right:60%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte56
 {
	position:absolute;
	right:45%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte57
 {
	position:absolute;
	right:30%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte58
 {
	position:absolute;
	right:15%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte59
 {
	position:absolute;
	right:0%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte510
 {
	position:absolute;
	right:-15%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte61
 {
	position:absolute;
	right:120%;
	width:17.5%;
	height:120%;
	
	}
#ScoreCarte62
 {
	position:absolute;
	right:105%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte63
 {
	position:absolute;
	right:90%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte64
 {
	position:absolute;
	right:75%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte65
 {
	position:absolute;
	right:60%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte66
 {
	position:absolute;
	right:45%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte67
 {
	position:absolute;
	right:30%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte68
 {
	position:absolute;
	right:15%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte69
 {
	position:absolute;
	right:0%;
	width:17.5%;
	height:120%;
	}
#ScoreCarte610
 {
	position:absolute;
	right:-15%;
	width:17.5%;
	height:120%;
	}
	
	
	
#J1
{
	position:absolute;
	top:3%;
	left: -14%	
}
#J2
{
	position:absolute;
	top:13%;
	left: -14%	
}
#J3
{
	position:absolute;
	top:23%;
	left: -14%	
}
#J4
{
	position:absolute;
	top:33%;
	left: -14%	
}
#J5
{
	position:absolute;
	top:43%;
	left: -14%	
}
#J6
{
	position:absolute;
	top:53%;
	left: -14%	
}

#ValideLimite
{
	
	/* Attribut d'arriere plan */
	border-radius:30%;
	margin-left: auto;
    margin-right: auto;
	width: 40%;
	height:60%;
	border:solid white 4px;
	background-color:#e5e1e0;
	z-index:6;
	/* Visibilité de la div */
	visibility:visible;
	border:none;
	/* Position de la div */
	position:absolute;
	left:20%;
	right:20%;
	top: 35% 
	
}
#limite30
{
	position:absolute;
	left:5%;
	z-index:6;
	top: 10%;
	width:50%;
	height:30%;
	border:none;
}
#limite40
{
	position:absolute;
	left:45%;
	z-index:6;
	top: 10%;
	width:50%;
	height:30%;
	border:none;
}
#limite50
{
	position:absolute;
	left:25%;
	top: 50%;
	width:50%;
	height:30%;
	z-index:6;
	border:none;
}

/* #valider2 */
/* { */
	/* position:absolute; */
	/* left:20%; */
	/* right:20%; */
	/* top: 75% */
/* } */
#CarteAnnonce1
{
	position:absolute;
	/* top:23%;	 */
	width:50%;
	height:50%;
	left:-10%;
	
}
#CarteAnnonce2
{
	position:absolute;
	/* top:23%;	 */
	width:50%;
	height:50%;
	left:-10%;
	
}
#CarteAnnonce3
{
	position:absolute;
	width:50%;
	height:50%;
	left:-10%;
	
}
#fond
{
	position:absolute;
	width:100%;
	height:180%;
	left: -50%;
	top:0.5%;
}
#salon 
{
	position:absolute;
	width:100%;
	height:100%;
	border:none;
	top:-2.5%;
	z-index:5;
	border-radius:0%;
}
#Retournement1
{
	width:60%;
	position:absolute;
	top:-12%;
	left:22%;
	
}
#Retournement2
{
	width:60%;
	position:absolute;
	top:-12%;
	left:22%;
	
}
#Retournement3
{
	width:60%;
	position:absolute;
	top:-12%;
	left:22%;
	
}
#Retournement4
{
	width:60%;
	position:absolute;
	top:-12%;
	left:22%;
	
}
#Retournement5
{
	width:60%;
	position:absolute;
	top:-12%;
	left:22%;
	
}
#Retournement6
{
	width:60%;
	position:absolute;
	top:-12%;
	left:22%;
	
}

#G3
{
	visibility:hidden;
	position:absolute;
	left:10%;
	top:11.5%;
	width:40%;
	height:45%;
	z-index:6;
	border:none;
}

#G4
{
	visibility:hidden;
	position:absolute;
	right:9.75%;
	top:10%;
	width:40%;
	height:45%;
	z-index:6;
	border:none;
}
#G5
{
	visibility:hidden;
	position:absolute;
	left:10%;
	top:55%;
	width:40%;
	height:45%;
	z-index:6;
	border:none;
}
#G6
{
	visibility:hidden;
	position:absolute;
	right:10%;
	top:55%;
	width:40%;
	height:45%;
	z-index:6;
	border:none;
}

#FondNoir
{
	position:absolute;
	z-index:5;
	left:-10%;
	
	background-color:black;
	
	width:110%;
	height:100%;
	
}


#Affiche2
{
	position:absolute;
	z-index:6;
	border-radius:5%;
	border:none;
	width:25%;
	height:25%;
	left:85%;
	top:0%;
}

#Regle
{
	position:absolute;
	z-index:7;
	border:none;
	top: 45%;
	right:-50%;
	width:10%;
	height:10%;
}

#Regletxt
{
	z-index:8;
	border-radius:30%;
	margin-left: auto;
    margin-right: auto;
	width: 40%;
	height:55%;
	border:solid white 4px;
	background-color:#e5e1e0;
	visibility:hidden;
	border:solid;
	position:absolute;
	left:80%;
	top: 0% 
	
}

Raw Text