main.css

@import url("main_original.css");


/*** CORRECTIFS ***/

/* Empêche le nom des tables de sortir du cadre du menu. */
#menu ul ul.groups li a {
	width: auto;
	max-width: 120px;
	text-wrap: balance;
}

/* Les iframes de petites dimensions ne sont pas transparentes sur Chrome. On change cela ici. */
iframe#HistoryFrame, iframe#LoginFrame {
	display: block;
	width: 8px;
	height: 8px;
}

/* Améliore l'alignement vertical de l'icône accompagnant certains liens et boutons. */
a.buttonOff, a.button, a.groupButton {
	background-position: 3px 50%;
}
.teaser ul.desc li {
	background-position: 2px 50%;
}
.contactLink {
	background-position: 2px 50%;
}
#siteSound a {
	background-position: 2px 50%;
}
#menu a.logout {
	background-position: 15px 50%;
	text-wrap: nowrap;
}
#menu a.admin {
	background-position: 15px 50%;
}
.game .chat .chrono .field1 {
	background-position: 2% 50%;
}
.game .chat .chrono .field2 {
	background-position: 98% 50%;
}
.ack, .nack {
	background-position: 3px 2px;
}

/* Corrections diverses mineures. */
#groupMain .table.tableClick.members a {
	text-decoration: none;
}
#rankingContainer .gameHelp.gameScore .gameHelpHeader {
	overflow-x: hidden;
}
a.contactButton {
	margin-top: 0px;
}
.game .chat #input input.button {
	line-height: normal;
}
.groupChat input.button {
	font-size: 10pt;
	line-height: normal;
}
.firstJoin a.button {
	width: 340px;
	padding-top: 0px;
}

/***********************************/

/* Page d'aide */

/* Empêche le sommaire de dépasser s'il est plus long que la page elle-même. */
.guide {
	min-height: 540px;
}

/***********************************/

/* Page de profil ("Ma page") */

/* Corrige le mauvais alignement du lien "Modifier" sur Chrome. */
.userSheet a.edit {
	display: table;
	width: 65px;
	margin-left: 240px;
}

/* Empêche le texte "Vous ne pouvez pas le défier pour le moment" de déborder du cadre. */
.matchOptions a.largeButton.disabled em {
	line-height: 8pt;
}

/***********************************/

/* Pages des jeux */

/* Aligne correctement le conteneur entre les avatars des deux joueurs. */
.game .chat #infosContainer {
	margin-left: 54px;
}


/*** AJOUTS ***/

/* Retire la bordure par défaut des champs de texte, présente sur certains navigateurs lorsque l'élément est actif. */
input, textarea {
	outline-style: none;
}

/***********************************/

/* Page : "game/play_generic.html" */

/* La propriété "border-color: white;" n'est normalement appliquée que lorsque le joueur connecté a la main (via la classe "p1turn"). */
/* Cela est également ajouté pour ".p2turn" car les jeux fonctionnent de manière locale dans l'archive, et donc les deux joueurs partagent le même écran. */
.p2turn .gameClient .swf {
	border-color: white;
}

/* Affiche un texte aligné à droite, pour une raison similaire au commentaire précédent. */
.p2turn #infos .ifPlayer2 {
	display: block;
	text-align: right !important;
}

/* La feuille de style originale prévoit d'afficher le texte en gras pour ces deux règles. */
/* Dans les faits, ce n'était pas le cas sur cafejeux.com car les pseudos étaient insérés dans des éléments <a> dont l'une des règles CSS est... d'utiliser un niveau de graisse normale. */
/* Les pseudos ne sont pas pas cliquables dans cette partie-là de l'archive, essentiellement pour éviter des interactions non désirées, d'où l'ajout ci-dessous. */
.p2turn .chat .users .field2, .p1turn .chat .users .field1 {
	font-weight: normal;
}

/* Le sélecteur ".p2offline" n'est normalement utilisé que pour indiquer que l'adversaire a été déconnecté du serveur de jeux. L'adversaire étant toujours à droite, ".p1offline" n'existe logiquement pas. */
/* Le sélecteur ".p1offline" est créé ici car on l'utilise, avec ".p2offline", pour mettre en évidence le joueur qui a perdu en fin de partie. */
.p1offline .chat .field1 {
	background-color: #85505e;
	color: #cd9899;
}
.p1offline .chat .av1 .avatar {
	border-color: red;
}
.p1offline .chat .users .field1 {
	background-image: url(img/icons/small_error.gif);
	background-position: 98% 1px;
	background-repeat: no-repeat;
}

/* Empêche la sélection du texte à proximité de la zone de jeu, quand une partie est en cours. */
.game table.p1turn, .game table.p2turn {
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

/***********************************/

/*** Pages "+ de sucres" ***/
/* L'archive réimplémente les anciennes pages "+ de sucres" ("bank" dans la barre d'adresse), spécifiques à cafejeux.com. Celles-ci avaient été remplacées par une version commune à tous les sites Motion Twin. */
/* La page principale "bank" n'existait donc plus au moment où cette archive a été constituée. Mais elle a pu être reproduite à partir d'une capture d'écran trouvée sur internet et est identique à la page originale. */
/* Aucune capture d'écran n'existait en revanche pour les sous-pages de la rubrique. Elles ont donc été reproduites sur la base du modèle HTML de AlphaBounce, un autre site de Motion Twin. */
/* Le rendu n'est donc pas garanti 100% conforme à l'original pour ces pages, expliquant pourquoi certaines des règles CSS ci-dessous ont été ajoutées. En revanche, les images proviennent bien de cafejeux.com. */

.bank ul.cb li span.value {
	position: absolute;
	margin: 68px 0 0 10px;
}

.bank ul.cb li span.value img {
	vertical-align: 0%;
}

.bank ul#countries {
	display: inline-block; /* IE 11 */
	display: grid;
	padding-left: 0px;
	list-style: none;
	grid-template-columns: repeat(17, 1fr);
	grid-row-gap: 5px;
	grid-column-gap: 10px;
}

.bank ul#countries li {
	float: left;
}

.bank ul.bankMeans {
	float: left;
}

.bank ul.bankMeans li span:not(.infos):not(.infos span) {
	position: absolute;
	width: 110px;
	margin: 72px 0 0 0;
	font-size: 14px;
	text-align: center;
	color: #bbb;
	z-index: 100;
}

.bank ul.bankMeans li .logo {
	height: 95px;
}

.bank ul.bankMeans li span.infos img {
	vertical-align: -10%;
}

.bank #meanDetails {
	min-height: 83px;
}

.bank ul.tutorial span img {
	float: none;
}