@charset "UTF-8";

/*
 * @autor : Etienne Bégué
 * @email : contact@txori.com
 * @date : 2012-2025
 */


/* Reset */

html, body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, a, span, blockquote, label, input, textarea, form, fieldset {
	border: 0;
	font: inherit;
	font-size: 100%;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

/* html */

html {
	scroll-behavior: smooth;
}

/* Body */

body {
	font-family: Geneva, Arial, Helvetica, sans-serif !important;
	background: #bbb url(../img/header_960.webp) no-repeat bottom center;
	background-size: 100% auto;
	background-attachment: fixed;
	position: relative; /* important for layering */

	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--bg-color, rgba(0, 0, 0, 0.05));
	pointer-events: none;
	z-index: -1;
	transition: background 1s ease;
}

/* Title */

h1 { font-size: 1.75em; margin-bottom: 1em; }
h2 { font-size: 1.25em; margin-bottom: 1em; }
h3 { font-size: 1.1em; }
h4 { font-size: 1em; }
h5 { font-size: 0.9em; }
h6 { font-size: 0.75em; }

/* Paragraph */

p {
	margin-bottom: 0.8em;
	text-align: justify;
}
p.left		{ text-align: left; }
p.right		{ text-align: right; }
p.center	{ text-align: center !important;	}
p.justify	{ text-align: justify; }

/* Div */

div.left	{ float: left; }
div.right	{ float: right; }

/*
div.hline	{ margin-top: 8px; margin-bottom: 8px; border-top: 1px solid #ddd; }
*/

/* Liste */

ul,ol {
	margin-left: 2em;
	margin-bottom: 0.8em;
}

li {
	padding: 0.1em 0;
}

/* Image */

img { border: none; max-width:100%; }
img.left { float: left; margin-right: 1em; }
img.right { float: right; margin: 4px 4px 4px 8px; }
img.center { display: block; margin: 4px auto; }
img.top { vertical-align: text-top; } 
img.bottom { vertical-align: text-bottom; }
img.middle { vertical-align: middle; } 

img.pixel {
	image-rendering: pixelated;
	image-rendering: -moz-crisp-edges;
	image-rendering: crisp-edges;
}

/* Links */

a:link, a:active, a:visited, a.active, .active a {
	color: #990000;
	text-decoration: none;
}

a:hover {
	color: #006666;
	text-decoration: underline;
}

/* Common */

input { vertical-align: middle; }

textarea {
	width: 100%;
	max-width: 100%!important;
}

.center	{
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
}

.clear { clear:both; }

/* Gamecard */

.gamecard {
	display: inline-block;
	width: 160px;
	height: 208px;
	margin: 0 .4em 1.2em;
	padding: 0 2px;
	position: relative;
	vertical-align: text-top;
	text-align: center;
	text-decoration: none !important;
	font-size: 1em;
	color: #333;
	background: Gainsboro no-repeat;
	border: 1px solid Grey;
	border-radius: 10px 10px 10px 32px;
	box-shadow: inset 0 -1px 1px rgba(0,0,0,.45), 0 2px 2px rgba(0,0,0,.25);
	transition: all .1s ease;
}

.gamecard:hover {
	cursor: pointer;
	background: #F8BA57 !important;
	transform: scale(1.05) translateY(-2px);
	box-shadow: 0 8px 16px rgba(0,0,0,.45), inset 0 -1px 1px rgba(0,0,0,.25);
	z-index: 10;
}

.gamecard:visited {
	color: #fff;
}

.gamecard img {
	border: 1px solid #333;
}

.gamecard .title {
	font-weight: bold;
	color: #333;
	line-height: 24px;
}

.gamecard .date {
	position: absolute;
	bottom: 20px;
	left: 20px;
	font-size: .8em;
	text-decoration: none;
}

.gamecard .icons {
	position: absolute;
	bottom: 10px;
	right: 12px;
	font-size: larger;
	color: dimgray;
}

.gamecard .icons img {
	width: auto;
	height: 24px;
	margin-left: 2px;
	border: 0 !important;
}

/* Code */

code {
	display: block;
	background: #222;
	color: #ddd;
	padding: 1em;
	margin: 1em;
	word-break: break-word;
	max-height: 32em;
	overflow: auto;
	overflow-y: auto;
	white-space: pre-wrap; /* ← Remplace 'pre' pour autoriser les retours à la ligne */
	word-break: break-all; /* ← Force le retour même sur les mots longs (ex: URLs) */
}


/* Bug */

.bug {
	border: 2px solid Red !important;
	background: PeachPuff !important;
	color: Red !important;
}

/* Article */

.article_preview {
	position: relative;
	background: #fefefe;
	display: inline-block;
	margin: 0 1em 2em;
	padding: 1em;
	box-shadow: 0 10px 20px 0 rgba(0, 0, 0, .1);
	color: black !important;
	text-decoration: none !important;
	z-index: 2;
	transition: all 0.1s ease; /* Transition pour les effets de survol */
	width: 40%;
	min-width: 300px;
}

/* Effet de "soulèvement" léger au survol */
.article_preview:hover {
	transform: translateY(-4px);
}

/* Cible uniquement les pseudo-éléments de l'article survolé */
.article_preview:hover:before,
.article_preview:hover:after {
	transform: rotate(0.1deg); /* Annule la rotation des feuillets */
	left: -1px;
}

/* Style des feuillets (inchangé) */
.article_preview:before, 
.article_preview:after {
	content: "";
	height: 98%;
	position: absolute;
	width: 100%;
	z-index: -1;
	transition: transform 0.2s ease;
}

.article_preview:before {
	background: #fcfcfc;
	box-shadow: 0 0 8px rgba(0,0,0,0.2);
	left: -5px;
	top: 4px;
	transform: rotate(-2.5deg);
}

.article_preview:after {
	background: #fff;
	box-shadow: 0 0 3px rgba(0,0,0,0.2);
	right: -3px;
	top: 1px;
}

.article_small {
	transition: all 0.4s ease;
}

.article_small:hover {
	cursor: pointer;
	background: #DBE5E0;
}

.article_preview img {
	max-width: 140px;
	width: 30%;
	height: auto;
	margin-right: 1em;
}

.article_preview_date {
	position: absolute;
	top: 1em;
	right: 1em;
	color: #666;
	font-size: .9em;
}

.article_preview_title {
	margin: 0.8em 0 0;
}

img.cover {
	margin:0 1em 1em 0;
	width: 20%;
	max-width: 140px;
	min-width: 70px;
	height: auto;
}

/* Static */

.static-content {
	font-size: 1em;
	margin: 24px 0 12px 0;
}

.static-banner {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 12px;
	height: 200px;
	border: 1px solid grey;
	border-radius: 10px;
	background: #f5f5f5;
}

.static-box {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 12px;
	border: 1px solid grey;
	background: #f5f5f5;
	padding: 12px;
	border-radius: 10px;
}

/* Lire la suite de ... */

.more {
	text-align: center;
	padding-top: 12px;
	font-size: 1.2em;
}

/* Pagination */

#pagination {
	text-align: center;
	font-size: 1em;
	margin: 24px 0 22px 0;
}

#pagination .p_page, #pagination .p_prev a, #pagination .p_first a, #pagination .p_last a, #pagination .p_next a {
	border: 2px solid grey;
	background: #f5f5f5;
	padding: 8px;
}
#pagination .p_prev a, #pagination .p_first a, #pagination .p_last a, #pagination .p_next a, #pagination .p_prev a:visited, #pagination .p_first a:visited, #pagination .p_last a:visited, #pagination .p_next a:visited {
	color: #333;
	text-decoration: none;
}

#pagination .p_prev a:hover, #pagination .p_first a:hover, #pagination .p_last a:hover, #pagination .p_next a:hover {
	background-color: #DBE5E0;
	cursor: pointer;
}

#pagination .p_prev a, #pagination .p_last a {
	border-radius: 10px 0 0 10px;
}

#pagination .p_next a, #pagination .p_first a {
	border-radius: 0 10px 10px 0;
}

#pagination .p_first a {
	border-radius: 20px 10px 10px 20px;
}

#pagination .p_last a {
	border-radius: 10px 20px 20px 10px;
}

/* PluXML Error message */

.error-content {
	font-size:12px;
	margin:40px 0 20px;
}

/* FAQ */

.questions {
	display: none;
}

input[type="radio"]:checked + label + .answer {
	display: block;
}

.question {
	position: relative;
	margin: 0;
	padding: 0.5em 2em 0.5em 3em;
	display: block;
	cursor: pointer;
	font-size: 1.1em;
}

.question:hover {
	color: crimson;
}

.question::before {
	content: '▶';
	position: absolute;
	left: 1em;
	top: 35%;
	transform: translateY(-30%);
	transition: transform 0.3s ease;
}

.questions:checked + .question::before {
	transform: translateY(-30%) rotate(90deg);
}

.questions:checked ~ .answer {
	height: auto;
	opacity: 1;
	padding: 2em 2em 1em 4em;
}

.answer {
	padding: 0 2em 0 4em;
	height: 0;
	overflow: hidden;
	position: relative;
	opacity: 0;
	transition: 0.3s ease;
}

/* Gamepad */

.hidden { visibility: hidden; }

.button_ {
	border: none;
	color: white;
	text-decoration: none;
	font-size: 30px;
	cursor: pointer;
	border-radius: 50%;
	width: 100px;
	height: 100px;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 200;
}

.button_:active, .button_:focus {
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

#button_esc {
	border: none;
	color: white;
	text-decoration: none;
	font-size: 10px;
	cursor: pointer;
	border-radius: 20%;
	width: 60px;
	height: 30px;
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 200;
	background-color: #777;
	opacity: 0.3;
	left: 60px;
	top: 30px;
}

#button_esc:hover {
	opacity: 0.4;
}

#button_x {
	background-color: #04AA6D;
	opacity: 0.3;
	right: 110px;
	bottom: 30px;
}

#button_x:hover {
	opacity: 0.4;
}

#button_o {
	background-color: #AA046D;
	opacity: 0.3;	
	right: 30px;
	bottom: 110px;
}

#button_o:hover {
	opacity: 0.4;
}

#game-box {
	width:100%;
	position:relative;
}

/* Intégration vidéo youtube et autres */

.video {
	position: relative;
	margin: 0 auto; /* Center the video horizontally */
	width: 90%;
	max-width: 640px; 
	overflow: hidden;
	margin-bottom: 1em;
}

.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video_16_9 {
	padding-bottom: 56.25%; /* Aspect ratio of 16:9 (height/width = 9/16 = 0.5625) */
}

.video_4_3 {
	padding-bottom: 75%; /* Aspect ratio of 4:3 (height/width = 3/4 = 0.75) */
}

@media (min-width: 704px) {
	.video {
		width: 640px;
		max-width: 100%; /* Adjust maximum width to prevent overflow */
	}

	.video_16_9 {
		height: 360px;
		padding-bottom: 0; /* Remove padding-bottom */
	}

	.video_4_3 {
		height: 480px; /* Adjust height for 4:3 aspect ratio */
		padding-bottom: 0; /* Remove padding-bottom */
	}
}

/* BlueSky */

.bluesky-embed {
	display: block;
	margin: 0 auto;
	text-align: center;
}

/* Loader pour remplacer Ruffle */

:root {
	--splash-screen-background: #f5f5f5;
	--logo-display: none;
}





#section {
	width: 100%;
	max-width: 970px;
	margin-left: auto;
	margin-right: auto;
	flex: 1;
}

#section:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

/* Buttons */

div.button, button {
	color: white !important;
	background-color: #FF6651;
	text-decoration: none;
	font-weight: bold;
	border-radius: 18px;
	box-shadow: 2px 2px 2px #aaa;
	cursor: pointer;
	width: fit-content;
	display: inline-block;
	padding: 0.5em 1em;
	margin: 1em;
	transition: all 0.1s ease;
	border: none;
	user-select: none;
	font-size: 1em;
}

div.button:hover, button:hover {
	background-color: #F2462E;
	transform: scale(1.1);
}

div.button a {
	color: white !important;
	text-decoration: none !important;
}

div.button:hover a {
	color: white !important;
}

.buttons {
	text-align: center;
}

/* iFrame (ex: youtube) */

iframe {
	border-width: 0;
}


.radius { border-radius: 10px; }

.hidden { visibility: hidden; }

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}

.clear { clear: both; }



#header {
	width: 100%;
	max-width: 970px;
	margin: 0 auto 1.6em !important;
	padding: 12px 0 0 0 !important;
	position: relative;
}

#title {
	position: relative;
	width: 100%;
	max-width: 970px;
	overflow: hidden;
}


.box {
	font-size: 1em;
	background: #f5f5f5;
	padding: 1em !important;
	margin-bottom: 0.8em !important;
	border-radius: 10px;
	box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
}

.banner {
	height: 200px;
	padding: 0 !important;
}

/* Missive pour DEV et GOLD */

.missive {
	background: #f6ffe1;
	padding: 16px !important; /* pun.div fait iech */
	margin-bottom: 0.8em;
	display:flex;
	align-items:flex-start;
	gap:3em;
}

/* Warning message pour admin */

.warning {
	background: #fff6e1;
	border: 1px solid lightcoral !important;
	padding: 16px !important; /* pun.div fait iech */
	margin-bottom: 0.8em;
}

.warning .fa-solid {
	margin-left: 1em;
	color: #ff6651;
}

.warningtext {
	font-weight: bold;
	color: red;
}

/* Social buttons */

div.social {
	position:absolute;
	right:21px;
	top:21px;
}

div.social img {
	width:32px;
	height:32px;
	filter: grayscale(0.8);
	transition: all 0.2s ease;
}

div.social img:hover {
	filter: none;
}

/* Logo Txori */

img.logo {
	width:80%;
	max-width:200px;
	padding-bottom:10px;
	transition: all 0.4s ease;
}

img.logo:hover {
	transform: scale(1.02);
}

/* Nuages */

.clouds {
	position: absolute;
	left: 0;
	width: 200%;
	height: 50%;
	background-repeat: repeat-x;
	background-size: 970px 100%;
	transform: translateZ(0);
	z-index: -2;
}

.clouds_4 {
	bottom: 75px;
	background-image: url('../img/clouds_4.webp');
	animation: scrollLayer4 200s linear infinite;
	filter: blur(4px);
}

.clouds_3 {
	bottom: 50px;
	background-image: url('../img/clouds_3.webp');
	animation: scrollLayer3 150s linear infinite;
	filter: blur(3px);
}

.clouds_2 {
	bottom: 25px;
	background-image: url('../img/clouds_2.webp');
	animation: scrollLayer2 100s linear infinite;
	filter: blur(2px);
}

.clouds_1 {
	bottom: 0;
	background-image: url('../img/clouds_1.webp');
	animation: scrollLayer1 60s linear infinite;
	filter: blur(2px);
	z-index: -1;
}

/* Animations pour le scrolling */

@keyframes scrollLayer1 {
	from { background-position: 0 0; }
	to { background-position: 970px 0; }
}

@keyframes scrollLayer2 {
	from { background-position: 0 0; }
	to { background-position: 970px 0; }
}

@keyframes scrollLayer3 {
	from { background-position: 0 0; }
	to { background-position: 970px 0; }
}

@keyframes scrollLayer4 {
	from { background-position: 0 0; }
	to { background-position: 970px 0; }
}


/* CSS pour ordinateur */

@media screen and (min-width: 641px)
{
	/* Bouton Register */

	#registerbutton {
		position: sticky;
		left: 50%;
		transform: translateX(-50%) translateY(-60px);
	}
}

/* CSS pour mobile */

@media screen and (max-width: 640px) {
	#registerbutton {
		position: sticky;
		left: 50%;
		transform: translateY(-60px);
	}
}

/** Menu de navigation **/

#nav, #navfloat {
	min-height: 24px;
	padding: 2px 25px;
	border-radius: 0 0 24px 24px;
	background-color: rgba(1, 1, 1, 0.8);
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
}

#navfloat {
	display: none;
	position: fixed;
	top: 0;
	width: fit-content;
	box-shadow: 0px 0px 4px 0px #000000;
	z-index: 1000;
}

#nav a, #navfloat a {
	transition: color 0.2s ease;
	display: inline-block;
	padding: 0 10px;
	color: #f5f5f5;
	text-decoration: none;
	margin-top: 1px;
}

#nav a:hover, #navfloat a:hover { color: orange; }

.mobile-title {
	border-bottom: solid #333 4px;
	background-color: #D9DDDF;
}

.mobile-topnav {
	overflow: hidden;
	position: relative;
	margin-bottom: 12px;
}

.mobile-topnav #mobile-links {
	display: none;
}

.mobile-topnav a.txori {
	padding: 1em;
	display: inline-block !important;
}

.mobile-topnav a.icon {
	background: #990000;
	position: absolute;
	right: 0;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	font-size: 19px;
	display: flex; /* Use flexbox for centering */
	justify-content: center; /* Horizontal centering */
	align-items: center; /* Vertical centering */
	margin: 16px !important;
	text-align: center;
	color: white;
	text-decoration: none;
}

.mobile-topnav a.icon i {
	margin: 0 !important; /* Remove custom margins */
}

.mobile-topnav a.link {
	color: white;
	background-color: #333;
	padding: 0.6em 0 0.6em 10%;
	text-decoration: none;
	font-size: 18px;
	display: block;
	text-align: left;
}

/*
.mobile-topnav a.icon:hover, .mobile-topnav a.link:hover {
	background-color: #ddd;
	color: black;
	border: none;
}
*/

/** Modal **/

.cache {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.7);
	z-index: 1;
}

.modal_content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	padding: 20px;
	width: 90%;
	max-width: 800px;
}

.modal_header {
	margin: 0.8em !important;
	text-align: center;
}

/** Footer **/

#footer {
	clear: both;
	width: 100%;
	max-width: 970px;
	background-color: rgba(1, 1, 1, 0.8);
	line-height: 24px;
	color: #ddd;
	text-align: center;
	font-size: 1em;
	border-radius: 10px 10px 0 0;
	margin: 0.8em auto 0;
	user-select: none;
}

#footer a {
	color: #ddd;
	font-weight: bold;
	text-decoration: none;
}

#footer a:hover { color: orange; }



/* Override ChatBro css */

div.PeerFly320x50, div.chatbro_body iframe {
	display: none !important;
	height:0px !important;
}

.chatbro_container .chatbro_movable_chat {
	/* so it appears over Yollamedia bottom ad */
	z-index: 2147483647 !important;
}

.chatbro_chat .chatbro_movable_chat .chatbro_body .chatbro_messages_wrapper .chatbro_modal_block .chatbro_messages {
	scroll-behavior: none !important;
}

.chatbro_dropdown_menu_plan_wrapper{display:none !important}
.chatbro_dropdown_menu_patron_wrapper{display:none !important}
.chatbro_copyright_link{display:none !important}

/* Google translate */

#wtgbr { visibility: hidden; }

/* FontAwesome */

.fa-solid, .fa-regular {
	margin-left: 7px;
	margin-right: 10px !important;
}

.fa-empty {
	color: lightgray !important;
}

.fa-full {
	color: #ff6651 !important;
}

/* Tags */

.tags {
	text-align: center;
}

.tags a {
	display: inline-block;
	height: 24px;
	line-height: 24px;
	position: relative;
	margin: 0.5em;
	padding: 0 10px 0 12px;
	background: #666;
	-webkit-border-bottom-right-radius: 3px;
	border-bottom-right-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	border-top-right-radius: 3px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	color: #fff !important;
	text-shadow: 0 1px 2px rgba(0,0,0,0.2);
	text-decoration: none;
	white-space: nowrap;
}

.tags a:before {
	content: "";
	position: absolute;
	top: 0;
	left: -12px;
	width: 12px;
	height: 24px;
	background: #666;
	clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

.tags a:after {
	content: "";
	position: absolute;
	top: 10px;
	left: 1px;
	float: left;
	width: 5px;
	height: 5px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #fff;
	-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,0.4);
	box-shadow: -1px -1px 2px rgba(0,0,0,0.4);
}

/* Archives */

.archives {
	text-align: center;
}

.archives a {
	display: inline-block;
	height: 24px;
	line-height: 24px;
	position: relative;
	margin: 0.5em;
	padding: 0 10px 0 12px;
	background: #666;
	-webkit-border-bottom-right-radius: 3px;
	border-bottom-right-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	border-top-right-radius: 3px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
	color: #fff !important;
	text-shadow: 0 1px 2px rgba(0,0,0,0.2);
	text-decoration: none;
	white-space: nowrap;
}

.archives a:before {
	content: "";
	position: absolute;
	top:0;
	left: -12px;
	width: 0;
	height: 0;
	border-color: transparent #666 transparent transparent;
	border-style: solid;
	border-width: 12px 12px 12px 0;
}

.archives a:after {
	content: "";
	position: absolute;
	top: 10px;
	left: 1px;
	float: left;
	width: 5px;
	height: 5px;
	-webkit-border-radius: 50%;
	border-radius: 50%;
	background: #fff;
	-webkit-box-shadow: -1px -1px 2px rgba(0,0,0,0.4);
	box-shadow: -1px -1px 2px rgba(0,0,0,0.4);
}

/* CGU */

.cgu_title {
	background: gainsboro;
	padding: 8px;
	font-size: 1.4em;
	font-weight: bold;
	margin: 1.5em 0;
}

.cgu_icon {
	font-size: 1.3em !important;
	margin: 0 0.6em 0 0.3em !important;
}

.cgu_email{
	vertical-align:middle;
	height:1em;
}
	
/* Override ChatBro css */

.chatbro_dropdown_menu_plan_wrapper{display:none !important}
.chatbro_dropdown_menu_patron_wrapper{display:none !important}
.chatbro_copyright_link{display:none !important}
/*.chatbro_minimized_chat{right:10px !important}*/

/* Fake ChatBro css */

.chatbro-button-f {
	width: 53px;
	height: 50px;
	background-color: #FF6651;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
	position: fixed;
	bottom: 12px;
	right: 12px;
	z-index: 2147483647;
}

.chatbro-icon-f {
	font-size: 16px;
	color: white;
	transform: scale(-1.05,0.9);
	display: flex;
	justify-content: center;
	align-items: center;
}

.chatbro-icon-f i {
	margin:3px 0 0 3px !important;
}


/*
FORUM
*/

/*****************************************************************
1. INITIAL SETTINGS
*****************************************************************/

/* A classer */

.width25 { width: 25%; }
.width50 { width: 50%; }
.width75 { width: 75%; }


/* Limited Reset
----------------------------------------------------------------*/

.pun select {
	padding-bottom: 1px;
	padding-top: 1px;
}


/* Tableau */

.pun table {
	border-collapse: collapse;
	border-spacing: 0;
	border: 0;
	empty-cells: show;
	width: 100%;
	word-break: break-all;
}

.pun tr:hover {
	background: #DBE5E0;
}

/* Affichage forum index et viewforum */

.forums {
	margin: 0 1em !important;
	box-sizing: border-box;
	font-size: 1.1em;
	list-style: none !important;
}

.forums i, .topics i {
	margin-left: 0 !important;
	margin-right: 1em !important;
}

.forums li a {
	padding: 0.3em 0.3em 0.3em 0.4em !important;
	display: block;
}

.forums li a:hover, .topics li a:hover {
	background: #DBE5E0;
	cursor: pointer;
	text-decoration: none;
}

.topics {
	margin: 0;
	padding: 0;
	list-style: none !important;
}

.topic-content {
	display: flex;
	align-items: center;
	padding: .3em .3em .3em .4em !important;
}

.topic-content i {
	color: black; /* Cadenas noir */
}

.topic-main {
	flex-grow: 1;
	overflow: hidden;
	padding: .2em 0 !important;
	display: block;
	min-width: 0; /* Nécessaire pour que text-overflow fonctionne */
}

.topic-count {
	flex-shrink: 0;
	width: 3em;
	text-align: right;
	font-size: .923em;
	color: #666;
}

.topic-byuser {
	color: #666;
	font-size: 0.9em;
	margin-left: 0.5em;
}


.pun strong, .pun th, .pun span.warntext, .pun p.warntext {
	font-weight: bold;
}

.pun em {
	font-style: italic;
}

.pun .actions span {
	padding-left: 16px;
	padding-right: 8px;
	background: url(../img/bull.png) center left no-repeat;
	display: inline-block;
	line-height: normal;
}

/* Hidden Elements
----------------------------------------------------------------*/

#brdfooter h2, #brdstats h2, #debug h2, #brdstats .conl dt, #brdstats .conr dt, #modcontrols dt,
#searchlinks dt, div.postright h3, .pun .subscribelink span, #announce .hd, #reportform h2, .pun .required strong span, .pun .icon div {
	display: block;
	overflow: hidden;
	position: absolute;
	text-indent: -9999em;
	width: 0;
}

/* Generic Float Clear
----------------------------------------------------------------*/

.pun .inbox, .pun #brdmain, .pun .crumbs, .pun .pagepost, .pun .block2col {
	min-height: 1px;
}

* html .pun .inbox, * html .pun #brdmain, * html .pun .crumbs, * html .pun .pagepost, * html .pun .block2col {
	display: inline-block;
}

* html .pun .inbox, * html .pun #bdrdmain, * html .pun .crumbs, * html .pun .pagepost, * html .pun .block2col {
	display: block;
}

.pun .inbox:after, .pun #brdmain:after, .pun .crumbs:after, .pun .pagepost:after, .pun .block2col:after {
	content: " ";
	display: block;
	height: 0;
	font-size: 0;
	clear: both;
	visibility: hidden;
}

.pun .block2col .inbox:after {
	content: none;
	clear: none;
}

.clearl {
	clear: left;
}

/*****************************************************************
2. COMMON STYLES
*****************************************************************/

/* Page Layout
----------------------------------------------------------------*/

.pun {
	/*padding: 24px 0;*/
}

#punredirect, #punmaint {
	padding: 60px 20% 12px 20%;
}

#puninstall, #pundb_update {
	padding: 20px 10%;
}

.pun .punwrap {
	border: 1px solid;
	padding: 12px;
	border-radius: 10px;
}

.pun .top-box {
	position: relative;
}

.pun .top-box div {
	margin-left: 50%;
}

.pun .end-box {
	position: relative;
}

.pun .end-box div {
	margin-left: 50%;
}

#punredirect h2, #punmaint h2 {
	border-bottom-style: dotted;
	border-bottom-width: 1px;
	margin-bottom: 3px;
}

/* Section Spacing and Borders */

.contour {
	font-size: 1em;
	border: 1px solid lightgray !important;
	background: #f5f5f5;
	margin: 12px 0 !important;
}

#punredirect #brdmain, #punmaint #brdmain {
	border: 0;
	margin: 0;
	padding: 0;
}

#quickpost {
	border-style: solid none none none;
	border-width: 2px 0 0 0;
	margin-top: 12px;
	padding-top: 12px;
}

#announce {
	padding: 12px;
	margin-bottom: 12px;
	background-color: lightgreen;
}

/* Stats du forum */

#brdstats {
	padding-top: 12px;
}

#brdstats .conl {
	float: left;
}

#brdstats .conr {
	float: right;
	text-align: right;
}

#brdstats #onlinelist {
	clear: both;
}

#brdstats #onlinelist dt, #brdstats #onlinelist dd {
	display: inline;
}

/* Footer
----------------------------------------------------------------*/

.pun #modcontrols {
	margin-top: 12px;
	text-align: center;
}

.pun #modcontrols dd {
	display: inline;
}

.pun #brdfooter #modcontrols dd span {
	display: inline-block;
	line-height: normal;
	padding-left: 18px;
	white-space: nowrap;
}

.pun #brdfooter .conl {
	float: left;
}

.pun #brdfooter .conr {
	text-align: right;
	float: right;
}

.pun #brdfooter #poweredby a {
	font-size: 1.077em;
	font-weight: bold;
}

.pun #brdfooter #qjump {
	padding-top: 5px;
}

.pun #brdfooter #qjump * {
	white-space: nowrap;
}

.pun #brdfooter #searchlinks dd span {
	background: url(../img/bull.png) center left no-repeat;
	display: inline-block;
	line-height: normal;
	padding-left: 18px;
	white-space: nowrap;
}

.pun #brdfooter #feedlinks {
	padding-bottom: 0;
}

.pun #brdfooter #feedlinks span {
	background: url(../img/feed.png) center left no-repeat;
	display: inline-block;
	padding-left: 18px;
	white-space: nowrap;
}

.pun #debugtime {
	border-style: dotted none none none;
	border-width: 1px 0 0 0;
	margin-top: 7px;
	text-align: center;
}

/* Breadcrumbs, Postlink, Pagination
----------------------------------------------------------------*/

.pun .linkst .inbox, .pun linksb .inbox, .pun .postlinksb .inbox {
	overflow: hidden;
}

.pun .linksb, .pun .postlinksb, .pun .linkst, .pun .crumbs {
	clear: both;
	position: relative;
	margin-left: 0;
}

.pun .postlinksb .crumbs {
	margin-right: 11em;
}

.pun .crumbs li {
	float: left;
	padding-right: 0.4em;
	display: contents;
}

.pun .crumbs li strong {
	font-weight: normal;
}

.pun .pagelink {
	float: left;
}

.pun .pagelink strong, .pun .pagelink a, .pun .pagelink span.spacer {
	border-style: none none none solid;
	border-width: 0 0 0 1px;
	display: inline-block;
	padding: 0 12px 0 10px;
	margin-right: -6px;
}

.pun .pagelink .item1 {
	border: 0;
}

.pun .pagelink .pages-label {
	display: inline-block;
}

.pun .postlink {
	float: right;
	font-weight: bold;
	text-align: right;
}

.pun .modbuttons {
	float: right;
	padding: 5px 0 3px 0;
}

.pun .modbuttons input {
	margin-left: 8px;
}

.pun .subscribelink {
	right: 0;
	text-align: right;
	top: 33px;
}

#punindex .subscribelink {
	top: 0px;
}

#punindex .linksb {
	height: 12px;
}

/*****************************************************************
4. MAIN TABLES
*****************************************************************/

.pun #brdmain .blocktable {
	position: relative;
}

#punindex #brdmain .blocktable h2, #punsearch #vf h2 {
	font: 1.2em/1.462em Arial, Helvetica, sans-serif;
	font-weight: bold;
	padding: 12px 0 8px 8px;
}

#punindex .blocktable th.tcl, #punsearch #vf th.tcl {
	font-size: 0;
	text-indent: -9999em;
}

.pun .blocktable .box {
	border-style: solid;
	border-width: 1px;
	margin-bottom: -1px;
	overflow: hidden;
	position: relative;
}

* html .pun .blocktable .box {
	display: inline-block;
}

.pun .blocktable table {
	table-layout: fixed;
}

.pun .blocktable table tr {
	border-style: none none solid none;
	border-width: 1px;
	border-color: lightgray;
}

.pun .blocktable table tr:last-child {
	border-style: none !important;
}

.pun .blocktable th {
	padding: 7px 8px;
	text-align: left;
}

.pun .blocktable td {
	padding: 7px 8px;
	line-height: 1.3077em;
	text-align: left;
}

.pun .blocktable h3 {
	font-size: 1.077em;
	padding: 0;
}

.pun .blocktable p {
	padding: 0;
}

.pun .blocktable .tcl p {
	padding: 5px 0 0 0;
}

.pun .blocktable .tcl {
	width: auto;
}

.pun .blocktable .tc2, .pun .blocktable .tc3, .pun .blocktable .tcmod {
	padding-right: 12px;
	text-align: right;
	width: 10%;
}

.pun .blocktable .tcr {
	width: 30%;
}

.pun .blocktable td .newtext, .pun .blocktable td .pagestext, .pun .blocktable td .byuser {
	white-space: nowrap;
}

.pun .blocktable .tcl h3 span.newtext {
	font-size: 0.929em;
	font-weight: normal;
}

.pun #vf td.tcl span.stickytext, .pun #vf td.tcl span.closedtext {
	font-size: 1em;
	font-weight: bold;
}

#punsearch #vf .tc2 {
	padding-left: 8px;
	padding-right: 8px;
	text-align: left;
	width: 18%;
}

#users1 .tcr {
	width: 25%;
}

#users1 .tc2 {
	padding-left: 8px;
	padding-right: 8px;
	text-align: left;
	width: 25%;
}

#debug {
	margin-top: 12px;
}

#debug .tcl {
	width: 10%;
}

#punredirect #debug .tcl, #punmaint #debug .tcl {
	width: 20%;
}

#debug .tcr {
	width: 90%;
	white-space: normal
}

#punindex .tcr .byuser {
	display: block
}

#punindex td.tc2, #punindex td.tc3, #punindex td.tcr, .pun #vf td.tc2, .pun #vf td.tc3,
.pun #vf td.tcr, #punindex td.tcl div.forumdesc, .pun #vf td.tcl span {
	font-size: 0.923em;
	color: #666;
}

.pun #vf td.tcl span a {
	font-weight: normal;
}

.pun .blocktable .tclcon {
	height: 1%;
	min-height: 1px;
	overflow: hidden;
	position: relative;
}

.pun .blocktable .tclcon div {
	width: 100%;
	overflow: hidden;
}

.pun .icon {
	border-style: solid;
	border-width: 8px;
	float: left;
	height: 0;
	overflow: hidden;
	width: 0;
	position: relative;
	top: 2px;
	margin-right: 12px;
}

.pun .iposted .ipost {
	font-weight: bold;
	left: 0;
	padding-left: 4px;
	position: absolute;
	text-align: center;
	top: 0;
	width: 8px;
}

/*****************************************************************
MAIN POSTS
*****************************************************************/

/* Structure
----------------------------------------------------------------*/

.pun .blockpost {
	border-style: solid;
	margin: 12px 0;
	overflow: hidden;
	position: relative;
	border-radius: 10px;
}
/*
* html .pun .blockpost {
	display: inline-block;
}
*/

#punsearch .blockpost h2 {
	height: auto;
	padding-left: 36px;
	white-space: normal;
}

#punsearch .blockpost h2 span span {
	white-space: nowrap;
	display: inline-block;
	font: 1.077em "Trebuchet MS", Arial, Helvetica, sans-serif
}

#punsearch .blockpost .icon {
	position: absolute;
	top: 0;
	margin-top: -2.154em;
}

.pun .blockpost .inbox {
	float: right;
	position: relative;
	width: 100%;
}

.pun .blockpost .postleft, .pun .blockpost .postfootleft {
	width: 80px;
	float: left;
	margin-left: -90px;
}

.pun .blockpost .postleft dl {
	padding: 0;
}

#punviewtopic .blockpost dt, #punmoderate .blockpost dt {
	display: block;
	position: absolute;
	padding: 0.538em 0 0.538em 12px;
	height: 1.462em;
	top: -2.615em;
	left: 0;
	overflow: hidden;
	width: 206px;
}

.pun .blockpost dt strong {
	font-size: 1.231em;
	font-weight: bold;
}

.pun .blockpost .postleft dd {
	font-size: 0.923em;
}

.pun .blockpost .postleft .usertitle {
	padding: 4px 0 6px 0;
	font-size: 1em;
}

.pun .blockpost .postinfo {
	padding: 0.8em;
	max-height: 80px;
	background: linear-gradient(0.1turn, #DCDCDC, #F5F5F5);
}

.pun .blockpost .postinfo .conr {
	float: right;
}

/* Forum viewtopic Post avatar */

.postavatar {
	float: right;
	margin-left: 0.8em;
	margin-bottom: 0.8em;
	width:80px;
	height:80px;
	background-repeat: no-repeat;
}

/* Forum viewtopic Post name in bubble */

.postname {
	position: relative;
	float: right;
	background-color: #fff;
	padding: 0.5em 1em;
	margin-right: 1em;
	border-radius: 16px;
	user-select: none;
	box-shadow: 2px 2px 4px darkgray;
}

.postname::before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	top: 50%;
	bottom: 100%;
	right: -0.7rem;
	border: .75rem solid transparent;
	border-top: none;
	border-bottom-color: #ffffff;
	filter: drop-shadow(0.4rem 0.2rem 0 rgba(1, 0, 0, .1));
}

/* Porum viewtopic Post date */

.postdate {
	font-size: smaller;
	color: gray !important;
}




.pun .postmsg {
	width:100%;
	overflow: hidden;
	word-wrap: break-word;
}

.pun .blockpost .postfootright {
	padding: 0 1em 1em;
	display: flex;
	float: right;
}

.pun .postfoot p, .pun .postfoot ul {
	padding: 0;
}

.pun .blockpost .postfootright li {
	display: inline;
}

.pun .blockpost .postfootright li span {
	display: inline-block;
	padding-left: 16px;
	margin-left: 8px;
	line-height: normal;
	background: url(../img/bull.png) center left no-repeat;
}

.pun .blockpost .usercontacts {
	padding: 7px 0;
}

.pun .blockpost .usercontacts .email {
	background: url(../img/email.png) left 65% no-repeat;
	margin-right: 5px;
	padding-left: 21px;
	display: inline-block;
	line-height: normal;
}

.pun .blockpost .usercontacts .website {
	background: url(../img/ext.png) left 65% no-repeat;
	padding-left: 18px;
	display: inline-block;
	line-height: normal;
}

.pun .postsignature hr {
	border:none;
	height: 1px;
	margin-left: 0px;
	text-align: left;
}

/* Content (includes other user content)
----------------------------------------------------------------*/

.pun .usercontent {
	padding: 7px 0;
}

.help {
	float: right;
}

.pun .usercontent h1, .pun .usercontent h2, .pun .usercontent h3,
.pun .usercontent h4, .pun .usercontent h5, .pun .usercontent h6 {
	padding: 7px 0 0 0;
}

.pun .postmsg h5, #punhelp h5 {
	font-size: 1.231em;
	font-weight: bold;
	padding: 7px 0;
}

.pun .usercontent ul, .pun .postmsg ul {
	list-style: disc;
}

.pun .usercontent ol, .pun .postmsg ol {
	list-style: decimal;
}

.pun .usercontent ol.alpha, .pun .postmsg ol.alpha {
	list-style: lower-alpha;
}

.pun .usercontent li p, .pun .postmsg li p {
	padding: 0;
}

.pun span.bbu {
	text-decoration: underline;
}

.pun span.bbs, .pun del {
	text-decoration: line-through;
}

.pun .postmsg ins, #punhelp samp ins {
	text-decoration: none;
}

.pun .blockpost .postmsg .postedit {
	font-size: 0.8em;
	float: right;
	font-style: italic;
	/*margin-top: 12px;*/
}

.postedit {
	font-size: 0.8em;
	float: right;
	font-style: italic;
	color: #666;
}

.pun .blockform .postsignature, .pun .blockpost .postsignature {
	font-size: 0.923em;
}

.pun .quotebox {
	border-style: solid;
	border-width: 2px;
	margin: 12px;
	padding: 12px 12px 0 12px;
}

.pun .quotebox cite {
	display: block;
	font-weight: bold;
	line-height: 1.462em;
}

.pun .quotebox blockquote {
	overflow: hidden;
	width: 100%;
}

.pun .postmsg img, #punhelp samp img {
	vertical-align: middle;
	
}

.pun .postmsg .postimg img {
	max-width: 100%;
	vertical-align: middle;
	margin: 0.5em 0.5em 0.5em 0;
	image-rendering: pixelated;
}

.pun .postmsg .postimg a:link img, .pun .postmsg .postimg a:visited img {
	border-style: solid;
	border-width: 2px;
}

/*****************************************************************
MAIN FORMS
*****************************************************************/

.pun #quickpost legend, #punpost legend, #punedit legend {
	overflow: hidden;
}

.pun .blockform .box {
	border-style: solid;
	border-width: 1px;
	padding-bottom: 12px;
}

* html .pun .blockform .box {
	display: inline-block;
}

.pun .blockform .forminfo, .pun .error-info {
	padding: 12px 18px;
	border-style: solid;
	border-width: 1px;
	position: relative;
}

.pun .blockform .forminfo {
	margin-top: 12px;
}

#pundelete .blockform .forminfo {
	margin-top: 33px;
}

.pun .forminfo h3 {
	padding-bottom: 0;
}

.pun .error-list li {
	padding-left: 24px;
	background: url(../img/exclaim.png) center left no-repeat;
}

.pun legend {
	font-weight: bold;
	padding: 10px 19px 4px 19px;
}

* html .pun legend {
	margin-left: -7px;
}

*:first-child+html .pun legend {
	margin-left: -7px;
}

/*
.pun fieldset p {
	padding: 0 0 7px 0;
	width: 100%;
}

.pun fieldset .usercontent p {
	padding: 7px 0;
}

.pun fieldset label {
	display: block;
	padding: 0 0 7px 0;
}
*/


fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

.cf-turnstile {
	margin-bottom: 1em;
}

label input[type="checkbox"] {
    cursor: pointer;
}

.checkbox {
	cursor: pointer;
}

.deactivated {
	opacity: 0.5;
	cursor: not-allowed;
}

.login_label {
	display: block;
	width: 300px;
	text-align: left; /* Aligns text INSIDE the label to left */
	margin-bottom: 1em;
	margin-left: auto;
	margin-right: auto; /* Centers the entire label block */
}



.pun label em {
	font-weight: normal;
	font-style: normal;
}

.pun .required strong {
	background: url(../img/asterisk.png) center right no-repeat;
	font-weight: normal;
	padding-right: 14px;
	white-space: pre;
	display: inline-block;
	line-height: normal;
}

.pun label input, .pun label select, .pun label textarea {
	/*margin-top: 2px;*/
	margin-right: 1em;
}

.pun label.conl {
	display: inline-block;
	padding-right: 12px;
}

.pun .rbox {
	padding: 3px 0;
}

.pun .rbox label {
	padding: 1em 0 0 1em;
	/*
	position: relative;
	min-height: 1px;
	*/
}

* html .pun .rbox label {
	text-indent: -3px;
	height: 1%;
}
/*
.pun .rbox input {
	margin: 3px 0.75em 3px -1.75em;
	float: left;
	position: relative;
	vertical-align: middle;
	padding: 0;
	height: 1em;
	width: 1em;
}
*/
.pun select, .pun input[type=text], .pun input[type=password] {
	width: 100%;
	padding: 0.2em;
	border: 1px solid lightgray !important;
	box-sizing: border-box;
}

.pun input[type=date] {
	/*width: 100%;*/
	padding: 0.1em;
	border: 1px solid lightgray !important;
}

.pun textarea {
	width: 100%;
	padding: 0.5em;
	box-sizing: border-box; /* Pour ne pas dépasser sur la droite */
	border: 1px solid lightgray !important;
}

.pun #quickpost .txtarea {
	padding-right: 12px;
	position: relative;
}

.pun .blockform .bblinks {
	padding-top: 0;
}

.pun .blockform .bblinks li {
	display: inline;
}

.pun .blockform .bblinks li span {
	background: url(../img/help.png) center left no-repeat;
	margin-right: 8px;
	padding-left: 20px;
	display: inline-block;
}

.pun #quickpost .bblinks {
	padding-top: 0;
}

.pun #quickpost .bblinks li {
	display: inline;
}

.pun #postreview {
	padding-top: 12px;
}

.pun #postpreview .postright {
	padding: 0;
}

.pun #postpreview .postbody {
	border-style: solid;
	border-width: 1px;
	float: none;
	margin: 0 18px 12px 18px;
	padding: 0;
	padding: 4px 18px 4px 18px;
	width: auto;
}

.pun span.email {
	background: url(../img/email.png) left 65% no-repeat;
	margin-right: 5px;
	padding-left: 21px;
	display: inline-block;
	line-height: normal;
}

.pun span.website {
	background: url(../img/ext.png) left 65% no-repeat;
	padding-left: 18px;
	display: inline-block;
	line-height: normal;
}

#punmisc #rules .box {
	border-style: solid;
	border-width: 1px;
	padding: 5px 18px;
}


#punhelp .box {
	border-style: solid;
	border-width: 1px;
	padding: 7px 12px;
}

.pun .multiselect {
	float: left;
	padding-bottom: 7px;
}

.pun .checklist {
	border-width: 1px;
	border-style: solid;
	max-height: 9em;
	width: 20em;
	overflow: auto;
	padding: 0.25em 0.5em;
	margin: 0.25em 16px 0 0.15em;
}

.pun .checklist legend {
	padding: 0;
}

.pun .checklist legend span {
	width: auto;
	max-width: 25em;
}

.pun .checklist .checklist-item {
	position: relative;
}

.pun .checklist .checklist-item label {
	padding: 0 0 0 1.75em;
}

.pun .checklist .checklist-item .fld-input {
	position: absolute;
	left: 0;
	top: 0;
	padding: 0;
	margin: 0;
}

.pun .checklist .checklist-item input {
	margin: 0;
	height: 1.55em;
	width: 1.55em;
}

/*****************************************************************
PROFILES (+ ADMIN MENU)
*****************************************************************/

/* Profile / Admin
----------------------------------------------------------------*/

.pun .blockmenu {
	padding-bottom: 12px;
}

.pun .blockmenu .block2 {
	padding-top: 19px;
}

.pun .blockmenu ul {
	border-top-style: dotted;
	border-top-width: 1px;
	padding: 0;
}

.pun .blockmenu li {
	border-bottom-style: dotted;
	border-bottom-width: 1px;
	font-weight: bold;
	padding: 0;
}

.pun .blockmenu a:link, .pun .blockmenu a:visited {
	display: block;
	padding: 9px 6px 3px 6px;
	min-height: 1px;
	text-decoration: none;
}

* html .pun .blockmenu a:link, * html .pun .blockmenu a:visited {
	height: 1%;
}

.pun .blockmenu a:hover, .pun .blockmenu a:active, .pun .blockmenu a:focus {
	text-decoration: none;
}

.username {
	font-size: 1.75em;
	margin-bottom: 0.1em;
}

#viewprofile dt, #adstats dt {
	padding: 7px 0;
	position: absolute;
	width: 13em;
	left: 0;
}

#viewprofile dl {
	border-style: solid none none none;
	border-width: 1px;
	margin: 7px 0;
	padding: 0;
	width: 100%;
	position: relative;
}

#adintro, #adstats {
	border-style: solid;
	border-width: 1px;
}

#adintro li span {
	display: inline-block;
	padding-left: 16px;
	margin-left: 8px;
	line-height: normal;
	background: url(../img/bull.png) center left no-repeat;
}

#adstats .inbox, #adintro .inbox {
	padding: 12px;
}

#adstats dl {
	margin: 0;
	padding: 0;
	width: 100%;
	position: relative;
}

#viewprofile dd, #adstats dd {
	border-style: none none solid none;
	border-width: 1px;
	padding: 7px 0 7px 13em;
}

/*****************************************************************
COLOUR SCHEME
*****************************************************************/

/* Basic defaults and Common Items
----------------------------------------------------------------*/

.pun .punwrap {
	background: #f5f5f5;
	border: 1px solid grey;
	color: #333;
}

.pun .pagepost, #brdstats #onlinelist, #brdfooter #searchlinks, #brdfooter #modcontrols,
#punmaint h2, #punredirect h2, #adminconsole .submittop, .pun #debugtime, .pun .pagelink a, .pun .pagelink * {
	border-color: #bbc6b2;
}

.pun .postmsg .postimg a:link img, .pun .postmsg .postimg a:visited img {
	border-color: #047E00;
}

.pun .postmsg .postimg a:hover img, .pun .postmsg .postimg a:active img, .pun .postmsg .postimg a:focus img {
	border-color: #73A900;
}

/* Main Tables
----------------------------------------------------------------*/

.pun .blocktable .box {
	background: #f5f5f5;
	border-color: lightgray;
}

#adminconsole fieldset th, #adminconsole fieldset td {
	border-color: lightgray;
}

.pun .blocktable td {
	border-color: lightgray;
}

.pun .blocktable th {
	background: gainsboro;
	border-color: lightgray;
	color: #444;
}

.pun .blocktable td.tcl span.stickytext {
	color: lightgray;
}

/* Main Posts
----------------------------------------------------------------*/

.pun .blockpost {
	border-color: lightgray;
	background-color: #f5f5f5;
}

.pun .blockpost .postbody, .pun .blockpost .postfoot {
	padding: 1em;
}

.pun .blockpost .postfootright li {
	color: #fcfcf4;
}

.pun .postmsg, #punhelp samp {
	color: #333;
}

.pun .postsignature, .pun .postmsg .postedit {
	color: #666;
}

.pun .quotebox {
	border-color: gainsboro;
	color: #566579;
}

.pun .quotebox h5 {
	color: #566579;
}

.pun .quotebox cite {
	color: #888;
}

.pun .postmsg hr {
	background: #bbc6b2;
}

.pun .postmsg ins, #punhelp samp ins {
	background-color: #ff0;
}

/* Main Forms + Profile
----------------------------------------------------------------*/

.pun .blockform .box, #adstats, #adintro, #postpreview {
	border-color: transparent;
	border-radius: 10px;
}

#punmisc #rules .box, #punhelp .box {
	border-color: lightgray;
	background: #f5f5f5;
	border-radius: 10px;
}

.pun .forminfo {
	background: #f5f5f5;
	border-color: #dce6d8;
}

#puninstall form#install .forminfo {
	background: #32671d;
	color: #fff;
}

.pun .error-info {
	background: #ffffe1;
	border-color: #dfe6ee;
}

.pun .error-info .fa-solid {
	margin-left: 1em;
	color: #ff6651;
}

#puninstall form#install .error-info {
	background: #ffffe1;
	border-color: #dfe6ee;
	color: #333;
}

#adintro .inbox, #adstats .inbox {
	background: white;
	border-color: lightgray;
	border-radius: 10px;
}

.pun label, .pun legend, #adminconsole fieldset th {
	color: #444;
}

.pun .blockmenu ul, .pun .blockmenu li {
	border-color: #bbc6b2;
}

.pun .blockmenu a:hover, .pun .blockmenu a:active, .pun .blockmenu a:focus {
	background: #ffffe6;
}

.pun .blockmenu .isactive a:link, .pun .blockmenu .isactive a:visited {
	color: #333;
	background: #f6f6ea;
	}

.pun #viewprofile dt, #adstats dt {
	color: #888;
}

.pun #viewprofile dl, .pun #viewprofile dd, #adstats dl, #adstats dd {
	border-color: lightgray;
}

#adminconsole fieldset td.nodefault {
	background: #d59b9b;
}

.pun .multiselect {
	color: #888;
}

.pun .checklist {
	background: white;
	border-color: #ccc;
}

/* Status Indicators */

.pun .icon {
	border-color: #eef1e8 #dbddd4 #e6e8df #eef1e8;
}

.pun .iredirect .icon {
	border-color: #bbc6b2;
	border-width: 1px;
	padding: 7px;
}

.pun .inew .icon {
	border-color: #50a42f #408426 #32671d #4a982c;
}

.pun .inewadmin .icon {
	border-color: #ff6651 #e55941 #c53e2d #ff7f67;
}

/* Something extra for the honeypot spam mod */

.pun .usernamefield {
	display: none;
}

/* Badges utilisateurs */

.badges {
	font-size: 1.4em;
	user-select: none;
}

#viewprofile h1, #profile1 h1{
	margin-bottom: 0.1em !important;
}

/* Profile picture utilisateur */

.avatar_frame {
	width: 80px;
	height: 80px;
	border: 5px solid #dcdcdc;
	padding: 4px;
	margin: 0 12px 12px 0;
	float: left;
}

.avatar_member {
	transition: 0.5s ease;
}

.avatar_member:hover {
	border: 5px solid orange;
}

/* Couleur utilisateur */

.field_user_color {
	display: flex;
	padding: 0!important;
}

#user_color {
	-webkit-appearance: none;
	padding: 0;
	border-color: #8B0000;
	border-radius: 10px;
	width: 20px;
	height: 20px;
	margin-left: 5px;
	margin-right: 10px;
	cursor: pointer;
}

#user_color::-webkit-color-swatch {
	border: none;
	border-radius: 10px;
	padding: 0;
}

#user_color::-webkit-color-swatch-wrapper {
	border: none;
	border-radius: 10px;
	padding: 0;
}

.label_user_color {
	margin-top: 2px;
	padding: 0;
	color: darkred !important;
	cursor: pointer;
}

.label_user_color:hover {
	color: red !important;
	text-decoration: underline;
	cursor: pointer;
}

input[type="radio"].radio-color {
	appearance: none;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background-clip: content-box;
	padding: 2px;
	margin: 2px;
	cursor: pointer;
	transition: transform 0.1s;
}

input[type="radio"].radio-color:checked {
	border: 2px solid #555;
	padding: 3px;
}

input[type="radio"]:hover.radio-color {
	transform: scale(1.2);
}

input[type="radio"]#Red { background-color: #F44336; }
input[type="radio"]#Pink { background-color: #E91E63; }
input[type="radio"]#Purple { background-color: #9C27B0; }
input[type="radio"]#DeepPurple { background-color: #673AB7; }
input[type="radio"]#Indigo { background-color: #3F51B5; }
input[type="radio"]#Blue { background-color: #2196F3; }
input[type="radio"]#LightBlue { background-color: #03A9F4; }
input[type="radio"]#Cyan { background-color: #00BCD4; }
input[type="radio"]#Teal { background-color: #009688; }
input[type="radio"]#Green { background-color: #4CAF50; }
input[type="radio"]#LightGreen { background-color: #8BC34A; }
input[type="radio"]#Lime { background-color: #CDDC39; }
input[type="radio"]#Yellow { background-color: #FFEB3B; }
input[type="radio"]#Amber { background-color: #FFC107; }
input[type="radio"]#Orange { background-color: #FF9800; }
input[type="radio"]#DeepOrange { background-color: #FF5722; }
input[type="radio"]#Brown { background-color: #795548; }
input[type="radio"]#Gray { background-color: #9E9E9E; }
input[type="radio"]#BlueGray { background-color: #607D8B; }
input[type="radio"]#DarkCharcoal { background-color: #333333; }

/* Modal CGU */

#termsModal {
	display:none;
}

.modal-body {
	overflow-y: auto;
	border-top: 1px solid !important;
	border-bottom: 1px solid !important;
	padding: 12px !important;
}

/* Google search */

.gsib_a { padding: 0px !important; }
.gsib_b { content-visibility: hidden; }

/* div qui contient la barre de recherche, le bouton search et les résultats */
.gsc-control-cse {
	padding: 0em !important;
	background-color: #f5f5f5 !important;
	border: 0 !important
}

/* div qui englobe la barre de recherche gsc-input-box */
.gsc-input { padding: 0.2em !important; }

/* Barre de recherche Google */
.gsc-input-box {
	background-color: #f5f5f5 !important;
	margin-right: 1em !important;
	border: 0 !important;
}
input[name="search"] {
	box-sizing: border-box !important;
	border: 2px solid transparent !important;
}
input[name="search"]:focus {
	border-color: #101010 !important;
	border-radius: 4px;
}

/* Bouton de recherche Google */
.gsc-search-button-v2 {
	background-color: #FF6651 !important;
	border: 0 !important;
	box-shadow: rgb(0 0 0 / 30%) 0px 2px 4px 0px !important;
	height: 32px;
	border-radius: 18px !important;
	padding: 0 20px !important;
}
.gsc-search-button-v2:hover { background-color: #F2462E !important }

.gcsc-more-maybe-branding-root {
	visibility: hidden !important;
	height: 0 !important
}

.gsc-cursor { font-size: 1.2em }

.gsc-adBlock { display:none !important }

.gsc-search-box tr:hover { background: none !important }