/*
*	SonicOnline.fr General CSS
*	--------------------------
*/

/*! */
/*! ----------------------------------------------------------- */
/*! 	FONTS, VARIABLES & THEMES 								*/
/*! ----------------------------------------------------------- */

@font-face { font-family: "Merriweather"; src: url('../Fonts/Merriweather-Regular.ttf'); }

:root {

	/* TEXT: size */
	
	--text-size-verysmall: 	12px;
	--text-size-small: 		14px;
	--text-size-normal: 	17px;
	--text-size-big: 		24px;
	
	--text-lineheight-normal: 1.3;
	
	/* Box round */

	--box-round-normal: 4px;
	--box-round-big: 	8px;
	
	
	/* ---- DEFAULT COLORS ---- */


	--bg-color-default: 		#BFC3CA; 	/* Default background color: clear grey */
	--bg-color-default-clearer: #D5D7DA;	/* clearer than the default background */
	--bg-color-default-darker: 	#B6BAC1;
	--bg-color-blue: 			#4D5F75;	/* Secondary background color: blue */
	--bg-color-blue-darker: 	#3A495B;	/* Secondary background color: blue darker */
	--bg-color-white: 			#EBEBEB;	/* Secondary background color: blue */
	--bg-color-black: 			#1E2227;	/* Secondary background color: blue */
	
	--text-color-default: 				#4D5157; 	/* Default text color: dark grey */
	--text-color-default-clearer: 		#7D8187; 	/* Clearer default text color */
	--text-color-black: 				var(--bg-color-black);	/* Black color */
	--text-color-orange: 				#DFA622;	/* Secondary text color: orange */
	--text-color-blue: 					var(--bg-color-blue);	/* same as blue background */
	--text-color-white: 				var(--bg-color-white);	/* White color */
	--text-color-clear-bgblue: 			var(--bg-color-default);	/* Clear text color used with dark background. Same value than default background */
	--text-color-link-default: 			#812215;
	
	
	/* button colors */
	
	--btn-color-veryclear: 			#ACB0B7; /* Very Clear grey. Used for clear buttons */
	
	/* Board post highlight colors */
	
	--bg-color-boardpost-highlight1-title: 		#77743c;
	--bg-color-boardpost-highlight1-content: 	#f9f8d8;
	--bg-color-boardpost-highlight2-title: 		#3c5b26;
	--bg-color-boardpost-highlight2-content: 	#eafade;
	
	
	--color-shadow-black: #1E222799; /* used as shadow. Always dark whatever the theme */
	
	--color-alert-red: 			#B22429;
	--color-alert-red-darker: 	#981F24;
	--color-alert-orange: 		#B3752D;
	--color-alert-green: 		#28AA61;
	
	
	/* ---- BUTTONS (override default values) ---- */
	
	
	--btn-text-size-normal: var(--text-size-normal);
	--btn-text-size-small: var(--text-size-small);
	--btn-text-fontweight: normal;
	
	--btn-round: var(--box-round-normal);
	
	/* BTN CLEAR COLORS */
	
	--btn-clear-border: var(--text-color-default-clearer);
	--btn-clear-text: var(--text-color-default);
	
	--btn-clear-border-hover: var(--text-color-default);
	--btn-clear-text-hover: var(--text-color-black);
	
	--btn-clear-border-selected: var(--bg-color-blue-darker);
	--btn-clear-bg-selected: var(--bg-color-blue);
	--btn-clear-text-selected: var(--text-color-orange);
	
	--btn-clear-border-disabled: var(--btn-color-veryclear);
	--btn-clear-text-disabled: var(--btn-color-veryclear);
	
	/* BTN BLUE COLORS */
	
	--btn-blue-border: var(--bg-color-blue-darker);
	--btn-blue-bg: var(--bg-color-blue);
	--btn-blue-text: var(--bg-color-default);
	
	--btn-blue-border-hover: var(--bg-color-blue-darker);
	--btn-blue-bg-hover: var(--bg-color-blue-darker);
	--btn-blue-text-hover: var(--text-color-white);
	
	/* BTN GREY COLORS */
	
	--btn-grey-border: var(--text-color-default-clearer);
	--btn-grey-bg: var(--btn-color-veryclear);
	--btn-grey-text: var(--text-color-black);
	
	--btn-grey-border-hover: var(--bg-color-black);
	--btn-grey-bg-hover: var(--text-color-default-clearer);
	--btn-grey-text-hover: var(--text-color-white);
	
	/* BTN RED COLORS */
	
	--btn-red-border: var(--color-alert-red-darker);
	--btn-red-bg: var(--color-alert-red);
	--btn-red-text: var(--text-color-white);
	
	--btn-red-border-hover: var(--color-alert-red-darker);
	--btn-red-bg-hover: var(--color-alert-red-darker);
	--btn-red-text-hover: var(--text-color-white);
	
	/* BTN GREEN COLORS */
	
	--btn-green-border: var(--color-alert-green);
	--btn-green-bg: var(--color-alert-green);
	--btn-green-text: var(--text-color-white);
	
	--btn-green-border-hover: #218c39;
	--btn-green-bg-hover: #218c39;
	--btn-green-text-hover: #fff;
	
	/* ---- SLIDER BUTTON ON/OFF VALUES ---- */
	
	--btn-slider-color-border: 		var(--btn-color-veryclear);
	--btn-slider-color-bg: 			var(--bg-color-white);
	--btn-slider-color-shadow: 		var(--color-shadow-black);
	
	--btn-slider-color-selected:	var(--color-alert-green);

	/* ---- ICON FILTERS VALUES ---- */
	
	
	/* go to this website to get values: https://codepen.io/sosuke/pen/Pjoqqp */
	
	--icon-filter-txt-color-headers: invert(16%) sepia(21%) saturate(7156%) hue-rotate(343deg) brightness(101%) contrast(129%); /*#8B0000*/
	
	--icon-filter-blue: invert(36%) sepia(13%) saturate(1057%) hue-rotate(173deg) brightness(90%) contrast(80%);
	/*--icon-filter-white: invert(1);
	--icon-filter-white: invert(91%) sepia(8%) saturate(185%) hue-rotate(179deg) brightness(86%) contrast(87%);*/
	
	--icon-filter-white: invert(100%) sepia(0%) saturate(1%) hue-rotate(272deg) brightness(113%) contrast(84%);
	
	--icon-filter-orange: invert(71%) sepia(46%) saturate(721%) hue-rotate(358deg) brightness(89%) contrast(96%);
	
	--icon-filter-txt-color-headers: var(--icon-filter-blue);
	
	--icon-filter-txt-color-default: invert(40%) sepia(10%) saturate(269%) hue-rotate(177deg) brightness(91%) contrast(89%); /* #60646A */
	
	--icon-filter-darkgrey: invert(24%) sepia(1%) saturate(2207%) hue-rotate(316deg) brightness(88%) contrast(82%); /* #444 */
	--icon-filter-cleargrey: invert(100%) sepia(0%) saturate(7405%) hue-rotate(110deg) brightness(125%) contrast(60%); /* #ccc */
	--icon-filter-grey: invert(53%) sepia(1%) saturate(1358%) hue-rotate(320deg) brightness(87%) contrast(86%); /* #777 */
	--icon-filter-clearblue: invert(51%) sepia(56%) saturate(391%) hue-rotate(175deg) brightness(83%) contrast(86%); /* #5A7FB1 */
	--icon-filter-green: invert(74%) sepia(73%) saturate(443%) hue-rotate(39deg) brightness(99%) contrast(106%); /* #8FF732 */
	
	--icon-filter-xbox-green: invert(43%) sepia(75%) saturate(6976%) hue-rotate(74deg) brightness(98%) contrast(85%); /* #3A7D13 */
	--icon-filter-playstation-blue: invert(54%) sepia(97%) saturate(868%) hue-rotate(175deg) brightness(88%) contrast(94%); /* #379DDC */
	--icon-filter-nintendo-red: invert(44%) sepia(10%) saturate(3734%) hue-rotate(315deg) brightness(82%) contrast(77%); /* #B44E4E */
	--icon-filter-steam-darkblue: invert(18%) sepia(10%) saturate(6202%) hue-rotate(175deg) brightness(97%) contrast(97%); /* #0C3A5F */
	
	
	/* HEADER style (override default values) */
	
	--header-size-coeff-h1: 1.6;	
	--header-size-coeff-h2: 1.25;
	--header-size-coeff-h3: 1.05;
	
	--header-text-color-heading: var(--text-color-blue);
	
	--header-icon-color-filter: var(--icon-filter-txt-color-headers);
	
	/* SEPARATOR (override default values) */
	
	--separator-color: var(--btn-color-veryclear);
	
	
	/* DROPLIST (override default values) */
	
	--droplist-color-shadow: 		var(--color-shadow-black);
	
	--droplist-color-bg-default: 	var(--bg-color-default-clearer);
	--droplist-color-bg-hover: 		var(--bg-color-white);
	--droplist-color-separator: 	var(--btn-color-veryclear);
	
	--droplist-box-round: 			var(--box-round-normal);
	
	--droplist-text-color: 			var(--text-color-default);
	--droplist-text-color-hover: 	var(--text-color-default);
	--droplist-text-size-normal: 	var(--text-size-normal);
	--droplist-text-size-small: 	var(--text-size-small);
	
	
	/* GAMENOTE ICON/BUTTON (override default values) */
	
	--gamenote-default-color-bg: var(--bg-color-white);
	--gamenote-default-color-border:  var(--bg-color-default-darker);
	
	--gamenote-default-color-up: var(--color-alert-green); /* green */
	--gamenote-default-color-down: var(--color-alert-red); /* red */
	
	--gamenote-icon-size-normal: 30px;
	--gamenote-icon-size-small: 20px;
	
	--gamenote-icon-filter-default: var(--icon-filter-cleargrey);
	--gamenote-icon-filter-up: var(--icon-filter-xbox-green);
	--gamenote-icon-filter-down: var(--icon-filter-nintendo-red);
	
	
	/* TOOLTIP (override default values) */
	
	--tooltip-text-color: 		var(--text-color-white);
	--tooltip-text-size: 		var(--text-size-verysmall);
	--tooltip-bg-color: 		var(--bg-color-black);
	--tooltip-border-radius: 	var(--box-round-normal);
	--tooltip-shadow-color: 	var(--bg-color-black);
	
	
	/* DIALOG BOX (override default values) */
	
	--dialogbox-bg-color: var(--bg-color-default-clearer);
	--dialogbox-header-bg-color: var(--bg-color-default-darker);
	--dialogbox-separator-color: var(--bg-color-default-darker);
	--dialogbox-border-radius: var(--box-round-big);
	--dialogbox-shadow-color: var(--color-shadow-black);
	
	
	/* USER AVATAR IMAGE (override default values) */
	
	--user-avatar-image-size: 40px;
	--user-avatar-border-color: var(--text-color-default-clearer);
	--user-avatar-icon-filter-color: var(--icon-filter-txt-color-default);
	
	/* MULTI GALLERY (override default values) */
	
	--multigallery-bg-color: var(--bg-color-default-darker);
	--multigallery-text-size: var(--text-size-big);
	--multigallery-text-color: var(--text-color-white);
	--multigallery-text-bgcolor: var(--color-shadow-black);
	
	/* FIGURE CAPTION (CSS FRAMEWORK) */
	
	--img-caption-color: var(--bg-color-blue);
	
	/* FORM (override default values) */
	
	/*--form-label-text-size: var(--text-size-small);
	--form-caption-text-size: var(--text-size-verysmall);
	
	--form-input-bg-color: var(--bg-color-default-clearer);
	--form-input-border-color: var(--bg-color-default-darker);
	--form-input-border-color-selected: #666;*/
}


/* ---- THEME LIGHT ---- */
 
 
.theme-light {
	/* SAME COLORS THAN DEFAULT */
}


/* ---- THEME DARK ---- */


.theme-dark {
	
	--bg-color-default: 		#2A2723;
	--bg-color-default-clearer:	#322F2B;
	--bg-color-default-darker: 	#201F1D;
	--bg-color-blue: 			#3E5F84;	/* Secondary background color: blue */
	--bg-color-blue-darker: 	#2F4966;	/* Secondary background color: blue darker */
	--bg-color-white: 			#161617;	/* Secondary background color: blue */
	--bg-color-black: 			#EBEBEB;	/* Secondary background color: blue */
	
	
	--text-color-default: 				#B1ADA3;
	--text-color-default-clearer: 		#67625A;
	--text-color-black: 				#BFC3CA;	/* Black color */
	--text-color-orange: 				#EBA100;	/* Secondary text color: orange */
	--text-color-blue: 					#4f7eb5;	/* same as blue background */
	--text-color-white: 				var(--bg-color-white);	/* White color */
	--text-color-clear-bgblue: 			var(--text-color-default);	/* Clear text color used with dark background. Same value than default background */
	
	--btn-color-veryclear: 			#393633; /* Very Clear grey. Used for clear buttons */

	/* Board post highlight colors */
	
	--bg-color-boardpost-highlight1-title: 		#635f15;
	--bg-color-boardpost-highlight1-content: 	#3b380d;
	--bg-color-boardpost-highlight2-title: 		#456231;
	--bg-color-boardpost-highlight2-content: 	#303d26;
	
	
	
	
	/* BTN CLEAR COLORS */
	
	--btn-clear-border: var(--text-color-default-clearer);
	--btn-clear-text: var(--text-color-default);
	
	--btn-clear-border-hover: var(--text-color-default);
	--btn-clear-text-hover: var(--text-color-black);
	
	--btn-clear-border-selected: var(--bg-color-blue-darker);
	--btn-clear-bg-selected: var(--bg-color-blue);
	--btn-clear-text-selected: var(--text-color-orange);
	
	--btn-clear-border-disabled: var(--btn-color-veryclear);
	--btn-clear-text-disabled: var(--btn-color-veryclear);
	
	/* BTN BLUE COLORS */
	
	--btn-blue-border: var(--bg-color-blue-darker);
	--btn-blue-bg: var(--bg-color-blue);
	--btn-blue-text: var(--text-color-orange);
	
	--btn-blue-border-hover: var(--bg-color-blue-darker);
	--btn-blue-bg-hover: var(--bg-color-blue-darker);
	--btn-blue-text-hover: var(--text-color-orange);
	
	/* BTN GREY COLORS */
	
	--btn-grey-border: var(--text-color-default-clearer);
	--btn-grey-bg: var(--btn-color-veryclear);
	--btn-grey-text: var(--text-color-black);
	
	--btn-grey-border-hover: var(--bg-color-black);
	--btn-grey-bg-hover: var(--text-color-default-clearer);
	--btn-grey-text-hover: var(--text-color-black);
	
	/* BTN RED COLORS */
	
	--btn-red-border: var(--color-alert-red-darker);
	--btn-red-bg: var(--color-alert-red);
	--btn-red-text: var(--text-color-white);
	
	--btn-red-border-hover: var(--color-alert-red-darker);
	--btn-red-bg-hover: var(--color-alert-red-darker);
	--btn-red-text-hover: var(--text-color-white);
	
	/* BTN GREEN COLORS */
	
	--btn-green-border: var(--color-alert-green);
	--btn-green-bg: var(--color-alert-green);
	--btn-green-text: var(--text-color-white);
	
	--btn-green-border-hover: #218c39;
	--btn-green-bg-hover: #218c39;
	--btn-green-text-hover: #fff;
	
	
	/* DROPLIST (override default values) */
	
	--droplist-color-shadow: 		var(--color-shadow-black);
	
	--droplist-color-bg-default: 	var(--bg-color-default-clearer);
	--droplist-color-bg-hover: 		var(--bg-color-white);
	--droplist-color-separator: 	var(--text-color-default-clearer);
	
	--droplist-box-round: 			var(--box-round-normal);
	
	--droplist-text-color: 			var(--text-color-default);
	--droplist-text-color-hover: 	var(--text-color-default);
	--droplist-text-size-normal: 	var(--text-size-normal);
	--droplist-text-size-small: 	var(--text-size-small);

}


/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] HTML, BODY, GENERAL SETTINGS						*/
/*! ----------------------------------------------------------- */


html {
    margin: 0px; padding: 0px; /*font-size: 100%;*/
}

body {
    margin: 0px auto; padding: 0px;
    height: 100%;
    background-color: var(--bg-color-default);
        
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    
    font-size: var(--text-size-normal);
    line-height: var(--text-lineheight-normal);
    
    font-style: normal;
    color: var(--text-color-default);
    
    background-size: 2%;
}

body.xmas {
	/*background-image: url(../Imageset/background-xmas.png);
	background-repeat: repeat;*/
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] TEXT SIZES & COLORS								*/
/*! ----------------------------------------------------------- */


a, a:link, a:visited, a:active { color: inherit; }
a:link, a:visited, a:active { text-decoration: none; }

.text-link-colored a:link, 
.text-link-colored a:visited, 
.text-link-colored a:active {color: var(--text-color-link-default);}



/* ---- COLOR WHITE ---- */


.text-color-white, .text-color-white a { 
	color: var(--text-color-white);
}


/* ---- COLOR DEFAULT CLEARER ---- */
/* Text clearer than the default text color */


.text-color-default-clearer, 	.text-color-default-clearer a {
	color: var(--text-color-default-clearer); 
}
a:hover .text-color-default-clearer, .text-color-default-clearer a:hover {
	color: var(--text-color-default);
}


/* ---- COLOR CLEAR BLUE BACKGROUND ---- */
/* Text with the same color than the background. Used with dark background */

.text-color-clear-bgblue, .text-color-clear-bgblue a  { 
	color: var(--text-color-clear-bgblue);	
}


/* ---- COLOR ORANGE ---- */

.txt-orange, .txt-orange a {
	color: var(--text-color-orange);
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] BACKGROUND COLORS									*/
/*! ----------------------------------------------------------- */


.bg-default {
	background-color: var(--bg-color-default);
}

.bg-default-clearer {
	background-color: var(--bg-color-default-clearer);
}

.bg-default-darker {
	background-color: var(--bg-color-default-darker);
}

.bg-blue {
	background-color: var(--bg-color-blue);
}

.bg-blue-darker {
	background-color: var(--bg-color-blue-darker);
}

.bg-white {
	background-color: var(--bg-color-white);
}


/* Note colors */

.bgcolor-note-red {
	background-color: var(--color-alert-red);
}
.bgcolor-note-orange {
	background-color: var(--color-alert-orange);
}
.bgcolor-note-green {
	background-color: var(--color-alert-green);
}
.bgcolor-note-grey {
	background-color: var(--bg-color-default-darker);
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] BOX STYLE											*/
/*! ----------------------------------------------------------- */


/* Box border (override) */

.box-border {
	border-color: var(--btn-color-veryclear);
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] TEXT STYLES 										*/
/*! ----------------------------------------------------------- */


/* ---- QUOTE BLOCK (override) ---- */

blockquote + br {
	display: none; /* to remove "br" created just after "blockquote" */
}

blockquote {
	background-color: var(--bg-color-default);
}

blockquote blockquote {
	border-color: var(--text-color-default-clearer);
}

blockquote .quote-author {
	color: var(--text-color-blue);
}



/* ---- ARTICLE STYLE ---- */

/* Article Font */

.txt-classic {
	font-family: 'Merriweather', Georgia, 'Times New Roman', Times, serif; 
	font-size: var(--text-size-normal);
	line-height: calc(var(--text-lineheight-normal) * 1.4);
}

/* H2 */

.txt-classic h2 {
	font-size: var(--text-size-big);
	margin: 20px 0 15px 0;
	font-weight: bold;
}
.txt-classic h2 + br {
	display: none;
}

@media screen and (max-width: 720px) { .txt-classic h2  {
	margin: 10px 0 8px 0;
}}

/* H3 */

.txt-classic h3 {
	font-size: var(--text-size-normal);
	margin: 20px 0 15px 0;
	font-weight: bold;
}
.txt-classic h3 + br {
	display: none;
}

@media screen and (max-width: 720px) { .txt-classic h3  {
	margin: 10px 0 8px 0;
}}

/* H4 */

.txt-classic h4 {
	font-size: var(--text-size-normal);
	margin: 15px 0 10px 0;
	font-weight: bold;
}
.txt-classic h4 + br {
	display: none;
}

@media screen and (max-width: 720px) { .txt-classic h3  {
	margin: 10px 0 8px 0;
}}

/* article quote */

article blockquote {
	margin: 0px; padding: 0px; 
	padding-left: 15px;
	border-left: 3px var(--bg-color-blue) solid;
	margin-left: 35px;
	width: calc(100% - 58px);
}

@media screen and (max-width: 720px) { article blockquote {
	margin-left: 0px;
	width: calc(96% - 0px);
}}

/* article coms */

section#article_coms blockquote {
	background-color: var(--bg-color-default-darker);
}

section#article_coms .row .left_box .user-avatar {
	--user-avatar-size: 60px;
}

/* article iframe */

article iframe.youtube-player {
	max-width: 96%;
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] PAGE LAYOUT										*/
/*! ----------------------------------------------------------- */


section#main-content {
	width: 940px;
	margin: 0 auto;
	padding-top: 83px; 
	padding-bottom: 60px;
}

@media screen and (max-width: 940px) { section#main-content {
		width: 700px;
}}
@media screen and (max-width: 720px) { section#main-content {
		width: 96%;
		overflow: hidden;
}}

section#main-content #left {
	display: inline-block; vertical-align: top;
	width: 620px;
	margin-right: 20px;
}

@media screen and (max-width: 940px) { section#main-content #left {
	width: 460px;
}}
@media screen and (max-width: 720px) { section#main-content #left {
	width: 100%;
	margin-bottom: 20px; /*margin-top: -10px;*/
	margin-right: 0px;
}}

section#main-content #left-board {
	display: inline-block; vertical-align: top;
	width: 700px;
	margin-right: 20px;
}

@media screen and (max-width: 940px) { section#main-content #left-board {
	
}}
@media screen and (max-width: 720px) { section#main-content #left-board {
	width: 100%;
	margin-right: 0px;
}}

section#main-content #right {
	display: inline-block; vertical-align: top;
	width: 300px;
}

@media screen and (max-width: 940px) { section#main-content #right {
	width: 220px;
}}
@media screen and (max-width: 720px) { section#main-content #right {
	display: none;
}}

section#main-content #right-board {
	display: inline-block; vertical-align: top;
	width: 220px;
}

@media screen and (max-width: 940px) { section#main-content #right-board {
	display: none;
}}
@media screen and (max-width: 720px) { section#main-content #right-board {
	display: none;
}}


/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] GRID STYLES										*/
/*! ----------------------------------------------------------- */


.grid_1 {width: 60px;}		.grid_2 {width: 140px;}		.grid_3 {width: 220px;}		.grid_4 {width: 300px;}
.grid_5 {width: 380px;}		.grid_6 {width: 460px;}		.grid_7 {width: 540px;}		.grid_8 {width: 620px;}
.grid_9 {width: 700px;}		.grid_10 {width: 780px;}	.grid_11 {width: 860px;}	.grid_12 {width: 940px;}

.grid_3-2 {
	width: 218px;
}
.grid_3-2-padding_l {
	padding-left: 10px; width: 208px;
}
.grid_5-2 {
	width: 378px;
}
.grid_5-2-padding_l {
	padding-left: 10px; width: 368px;
}
.grid_6-2 {
	width: 458px;
}
.grid_6-2-padding_l {
	padding-left: 10px; width: 448px;
}
.grid_7-2 {
	width: 538px;
}
.grid_7-2-padding_l {
	padding-left: 10px; width: 528px;
}
.grid_10-2 {width: 778px;}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] IMAGE BOX											*/
/*! ----------------------------------------------------------- */

/*
/* Box with image in background + title on the bottom */

.box-img-title {
	width: 140px; height: 120px;
	border-radius: var(--box-round-normal);
	overflow: hidden;
}

@media screen and (max-width: 940px) { .box-img-title {
	width: 100px;
}}
@media screen and (max-width: 720px) { .box-img-title {
	
}}

.box-img-title .text-bg {
	position: relative;
	top: -50px;
	height: 50px;
	background-color: var(--bg-color-blue);
}

.box-img-title:hover .text-bg {
	background-color: var(--bg-color-blue-darker);
}

.box-img-title .text {
	position: relative;
	top: -100px;
	color: var(--text-color-clear-bgblue);
	padding: 5px;
}

.box-img-title .text {
	color: var(--text-color-clear-bgblue);
}

.box-img-title .title {
	color: var(--text-color-orange);
}


/* ---- box-bgimg-blue ---- */

.box-bgimg-blue .size-620-350 {
	width: 620px; height: 350px;
}
.box-bgimg-blue .size-300-164 {
	width: 300px; height: 164px;
}
.box-bgimg-blue .size-140-164 {
	width: 140px; height: 164px;
}
.box-bgimg-blue .size-300-140, .box-bgimg-blue .size-300-140 img {
	width: 300px; height: 140px;
}

@media screen and (max-width: 940px) { .box-bgimg-blue .size-620-350, .box-bgimg-blue .size-620-350 img {
	width: 460px; height: 270px;
}}
@media screen and (max-width: 940px) { .box-bgimg-blue .size-300-164, .box-bgimg-blue .size-300-164 img {
	width: 220px; height: 120px;
}}
@media screen and (max-width: 940px) { .box-bgimg-blue .size-140-164, .box-bgimg-blue .size-140-164 img {
	width: 100px; height: 120px;
}}
@media screen and (max-width: 940px) { .box-bgimg-blue .size-300-140, .box-bgimg-blue .size-300-140 img {
	width: 220px; height: 103px;
}}

@media screen and (max-width: 720px) { .box-bgimg-blue .size-620-350, .box-bgimg-blue .size-620-350 img {
	width: 100%; height: 169px;
}}

.box-bgimg-blue img {
	object-fit: cover;
}

.box-bgimg-blue a:hover {
	text-decoration: none;
}

.box-bgimg-blue .bg-box {
	position: relative;
	top:-75px;
	height: 75px;
}
.box-bgimg-blue:hover .bg-box.bg-blue {
	opacity:0.8;
}
.box-bgimg-blue .text-box {
	color: var(--text-color-clear-bgblue);
	position: relative;
	top:-150px;
	padding: 6px;
}
.box-bgimg-blue.size-620-350 .text-box {
	padding-left: 12px;
}


/* ---- Box video ---- */

/* btn-play : common to all pages */
.btn-play {
	position: absolute;
	top: 48px; left:114px;
	width: 72px; height: 72px; background-size: 72px 72px;
	background-image: url(../Imageset/video-btn-play2.png);
}

.box-video-blue .text-box {
	color: var(--text-color-clear-bgblue);
	padding: 5px;
	height: 40px;
}

.box-video-blue a:hover {
	text-decoration: none;
}

@media screen and (max-width: 940px) { .box-video-blue .text-box {
	font-size: 0.8em;
	line-height: 1.2em;
	height: 30px;
}}

.box-video-blue.size-200-112 {
	width: 200px;
}

.box-video-blue .size-200-112 {
	width: 200px; height: 112px;
}

@media screen and (max-width: 940px) { .box-video-blue.size-200-112 {
	width: 146px;
}}

@media screen and (max-width: 940px) { .box-video-blue .size-200-112, .box-video-blue .size-200-112 img {
	width: 146px; height: 82px;
}}

.box-video-blue {
	position: relative;
}

.box-video-blue .btn-play {
	top: 19px; left:64px;
}
.box-video-blue:hover .btn-play, .box-round:hover .btn-play {
	opacity: .6;
}


@media screen and (max-width: 940px) { .box-video-blue .size-200-112 .btn-play {
	width: 60px; height: 60px; background-size: 60px 60px;
	top: 11px; left:43px;
}}

/* index-box-video : used on videos index page and in videos page for games*/

.index-box-video {
	width: 300px;
}
.index-box-video img {
	width: 300px; height: 165px;
}
.index-box-video .header-title {
	flex-direction: column;
}

@media screen and (max-width: 940px) {
	.index-box-video {
		width: calc(300px / 1.37); 
	}
	.index-box-video img {
		width: calc(300px / 1.37);  height: calc(165px / 1.37);
	}
}

@media screen and (max-width: 720px) {
	.videos-box {
		justify-content: center;
	}
	.index-box-video {
		width: calc(300px / 1); 
		margin-right: 0px;
	}
	.index-box-video img {
		width: calc(300px / 1);  height: calc(165px / 1);
	}
}


.index-box-video .box-round {
	position: relative;
}

.index-box-video .btn-play {
	top: 48px; left:114px;
}
@media screen and (max-width: 940px) { .index-box-video .btn-play {
	top: 29px; left: 74px;
}}
@media screen and (max-width: 720px) { .index-box-video .btn-play {
	top: 48px; left:114px;
}}

.index-box-video .hover-infos {
	opacity: 0;
	position: absolute;
	bottom:5px;
	padding: 2px 4px 1px 4px;
	border-radius: var(--box-round-normal);
	color: var(--text-color-white);
	background-color: var(--bg-color-blue);
	font-weight: bold;
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] PAGE SUB-MENU										*/
/*! ----------------------------------------------------------- */
/*		Only used on the About page (need a refacto)			*/

nav#page-menu {
	margin: 20px 0px;
}

nav#page-menu ul {
	margin: 0; padding: 0;
	list-style: none;
}

nav#page-menu ul li {	
	display: inline-block;
	height: 23px;
	padding-top: 5px;
	overflow: hidden;
}

nav#page-menu ul li a {
	padding:0px 10px;
	color: var(--text-color-default);
	text-decoration: none;
}

nav#page-menu ul li.selected {
	background-color: var(--bg-color-blue);
	border-radius: var(--box-round-normal);
}

nav#page-menu ul li.selected a {
	color: var(--text-color-orange);
	text-decoration: none;
	text-shadow: none;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] USER REVIEW										*/
/*! ----------------------------------------------------------- */


.widget_user_gameReview_leftSize_wGameBox,
.widget_user_gameReview_leftSize_wUserAvatar {
	display: flex;
}

.widget_user_gameReview_leftSize_wGameBox .gameBox {
	flex-shrink: 0;
	width: 60px;
}

.widget_user_gameReview_leftSize_wGameBox .texts,
.widget_user_gameReview_leftSize_wUserAvatar .texts {
	flex: 2;
}

.widget_user_gameReview_leftSize_wUserAvatar .user-avatar {
	--user-avatar-size: 60px;
	margin-right: 10px;
}

/* gamenote userbox wide */


.gamenote-gamebox-wide {
	display: flex;
	justify-content: space-between;
}

.gamenote-gamebox-wide .gamebox {
	width: 60px;
	flex-shrink: 0;
	margin-right: 10px;
}

.gamenote-gamebox-wide .text {
	width: 100%;
	margin-right: 10px;
}

@media screen and (max-width: 940px) { .gamenote-avatar-wide .text {
	width: 300px;
}}
@media screen and (max-width: 720px) { .gamenote-avatar-wide .text {
	width: 210px;
}}


@media screen and (max-width: 940px) { .gamenote-gamebox-wide .grid_6-2-padding_l {
	width: 300px;
}}

@media screen and (max-width: 720px) { .gamenote-gamebox-wide .grid_6-2-padding_l {
	width: 208px;
	font-size: 0.9em; line-height: 1.2em;
}}

@media screen and (max-width: 720px) { .gamenote-userbox-wide .username {
	width: 140px;
}}





/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] WIDGET : NEWS / ITEM REDUCED						*/
/*! ----------------------------------------------------------- */


.widget-news-item-reduced a {
	display: flex;
	align-items: flex-start;
}

.widget-news-item-reduced a:hover {
	text-decoration: none;
}

.widget-news-item-reduced .widget-news-item-reduced-imgbox {
	position: relative;
}

.widget-news-item-reduced .widget-news-item-reduced-imgfile {
	width: 140px; height: 78px;
	margin-right: 10px;
}

@media screen and (max-width: 940px) { 
	.widget-news-item-reduced .widget-news-item-reduced-imgfile {
		width: 78px; height: 78px;
	}
	.widget-news-item-reduced .widget-news-item-reduced-imgfile img {
		max-width: unset;
		width: 140px; height: 78px;
		margin-left: calc(-140px / 2 + 78px / 2);
	}
}

@media screen and (max-width: 720px) { 
	.widget-news-item-reduced .widget-news-item-reduced-imgfile {
		width: 70px; height: 70px;
	}
	.widget-news-item-reduced .widget-news-item-reduced-imgfile img {
		max-width: unset;
		width: 140px; height: 78px;
		margin-left: calc(-140px / 2 + 70px / 2);
		margin-top: calc(-78px / 2 + 70px / 2);
	}
}

/*.widget-news-item-reduced h3 {
	margin-bottom: 5px;
}*/

@media screen and (max-width: 940px) { 
	.widget-news-item-reduced h3 {
		font-size: 1.15em;
	}
}

@media screen and (max-width: 720px) { 
	.widget-news-item-reduced h3 {
		font-size: 1.1em;
		margin-bottom: 3px;
	}
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] WIDGET : BOARD / LAST UPDATED TOPICS				*/
/*! ----------------------------------------------------------- */


#widget-last-updated-topics .last-updated-topics-row .last-updated-topics-top {
	display: flex;
	margin-bottom: 10px;
	align-items: flex-start;
	justify-content: space-between;
}

#widget-last-updated-topics .last-updated-topics-row .texts {
	flex: 2;
	overflow: hidden;
	white-space: nowrap;
}

#widget-last-updated-topics .last-updated-topics-row .topic-text {
	max-height: 300px;
	overflow: hidden;
	position: relative;
	/*font-size: .95em;
	line-height: 1.2em;*/
}

#widget-last-updated-topics .last-updated-topics-row .topic-text.expanded {
	max-height: unset;
}

#widget-last-updated-topics .show-more {
	width: 100%; height: 60px;
	margin-top: 240px;
	background-color: var(--bg-color-default);
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	bottom:0;
}

#widget-last-updated-topics .last-updated-topics-row .text-button-btn {
	display: none;
	justify-content: center;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	[GEN] WIDGET : Game Press Reviews						*/
/*! ----------------------------------------------------------- */


.widget-games-pressReviews .press-name-note {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 5px;
}

.widget-games-pressReviews .press-note {
	padding: 0 5px;
}


/*! */
/*! ----------------------------------------------------------- */
/*! 	POLL STYLE												*/
/*! ----------------------------------------------------------- */


#poll .title,
#poll_bbcode .title {
	font-weight: bold;
}

#poll .options,
#poll_bbcode .options {
	margin: 10px; margin-bottom: 0px;
}

#poll .options input.bt-radio,
#poll_bbcode .options input.bt-radio {
	margin-right: 10px;
}

#poll .graphic,
#poll_bbcode .graphic {
	margin-top: -1px;
	margin-bottom: 3px;
}

#poll .result-graphic,
#poll_bbcode .result-graphic {
	display: inline-block; vertical-align: top;
	margin: 5px 0px 1px 0px;
	height: 7px;
	background-color: var(--bg-color-blue);
	min-width: 5px;
	max-width: 220px;
}

@media screen and (max-width: 940px) { #poll .result-graphic, #poll_bbcode .result-graphic {
	max-width: 140px;
}}
@media screen and (max-width: 720px) { #poll .result-graphic, #poll_bbcode .result-graphic {
}}

#poll .result-txt, #poll_bbcode .result-txt {
	display: inline-block; vertical-align: top;
	height: 13px;
	width: 30px;
	margin-left: 5px;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	HIGHLIGHTS STYLE										*/
/*! ----------------------------------------------------------- */


/* ---- COMMON --- */

section#highlight #highlight2 {
	margin-bottom: 22px;
}


/* ---- HIGHLIGHT 1: BIG PICTURE ---- */

section#highlight #left-top .box-img-big img {
	width: 620px; height: 350px;
}

@media screen and (max-width: 940px) { section#highlight #left-top .box-img-big img {
	width: 460px; height: 310px;
}}
@media screen and (max-width: 720px) { section#highlight #left-top .box-img-big img {
	width: 300px; height: 180px;
}}

section#highlight #left-top .box-img-big .bg-box {
	position: relative;
	top:-75px;
	height: 75px;
}

section#highlight #left-top .box-img-big .text-box {
	position: relative;
	padding: 10px;
}

@media screen and (max-width: 940px) { section#highlight #left-top .box-img-big .text-box {
	font-size: 0.95em; line-height: 1.0em;
}}
@media screen and (max-width: 720px) { section#highlight #left-top .box-img-big .text-box {
	font-size: 0.85em; line-height: 1.0em;
}}



/* ---- HIGHLIGHT: RIGHT ---- */

section#highlight #right #top  {
	width: 300px; height: 164px;
}

@media screen and (max-width: 940px) { section#highlight #right #top {
	width: 220px; height: 144px;
}}

section#highlight #right #top img  {
	width: 300px; height: 164px;
}

@media screen and (max-width: 940px) { section#highlight #right #top img {
	width: 220px; height: 144px;
}}

section#highlight #right #bottom-left, section#highlight #right #bottom-left img,
section#highlight #right #bottom-right,section#highlight #right #bottom-right img {
	width: 140px; height: 164px;
}

@media screen and (max-width: 940px) { 
	section#highlight #right #bottom-left, section#highlight #right #bottom-left img,
	section#highlight #right #bottom-right, section#highlight #right #bottom-right img {
	width: 100px; height: 144px;
}}

@media screen and (max-width: 940px) { section#highlight #right .text-box {
	font-size: 0.95em; line-height: 1.0em;
}}
@media screen and (max-width: 720px) { section#highlight #right .text-box {
	font-size: 0.95em; line-height: 1.0em;
}}


/**/

section#highlight #right #top .bg-box,
section#highlight #right #bottom-left .bg-box,
section#highlight #right #bottom-right .bg-box {
	position: relative;
	top:-75px;
	height: 75px;
}

section#highlight #right #top .text-box,
section#highlight #right #bottom-left .text-box,
section#highlight #right #bottom-right .text-box {
	position: relative;
	top:-150px;
	padding: 6px;
}


/* ---- HIGHLIGHT: FOR MOBILE ---- */

@media screen and (max-width: 720px) {section#highlight .mobile .content {
	display: flex;
}}

@media screen and (max-width: 720px) {section#highlight .mobile .content .img {
	width: 128px; flex-shrink: 0;
}}



/*! */
/*! ----------------------------------------------------------- */
/*! 	FORM (Override)					 						*/
/*! ----------------------------------------------------------- */


.form-flash-error {
	padding: 10px 20px;
	padding-bottom: 8px;
	margin-bottom: 20px;
	color: var(--text-color-white);
	border-radius: var(--box-round-normal);
	background-color: var(--color-alert-red);
	font-weight: bold;
}

.form-flash-valid {
	padding: 10px 20px;
	padding-bottom: 8px;
	margin-bottom: 20px;
	color: var(--text-color-white);
	border-radius: var(--box-round-normal);
	background-color: var(--color-alert-green);
	font-weight: bold;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	SOCIAL ICONS											*/
/*! ----------------------------------------------------------- */

.icon-link {
	--icon-link-size: 55px;
	width: var(--icon-link-size); height: var(--icon-link-size);
	background-size: calc(10 * var(--icon-link-size)) calc(1 * var(--icon-link-size));
	background-image: url(../Imageset/icons-social.svg);
	display: block;
}

.icon-link.twitter 		{ background-position: calc(-0 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.facebook 	{ background-position: calc(-1 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.discord 		{ background-position: calc(-2 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.youtube 		{ background-position: calc(-3 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.rss	 		{ background-position: calc(-4 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}

.icon-link.twitter-blue 	{ background-position: calc(-5 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.facebook-blue 	{ background-position: calc(-6 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.discord-blue 	{ background-position: calc(-7 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.youtube-blue 	{ background-position: calc(-8 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}
.icon-link.rss-blue	 		{ background-position: calc(-9 * var(--icon-link-size)) calc(-0 * var(--icon-link-size));}

@media screen and (max-width: 940px) { section#right .icon-link {
	--icon-link-size: 50px;
}}



/*! */
/*! ----------------------------------------------------------- */
/*! 	BADGE MINI ICONS										*/
/*! ----------------------------------------------------------- */
/* 		Badges used under avatar in board 						*/

.badge-mini {
	width: 8px; height: 8px;
	border-radius: var(--box-round-big);
	display: inline-block; vertical-align: center;
	border: 1px solid black;
}

/* IMPORTANT: no need of variable because the same value whatever the theme !!! */

.badge-mini.gold {
	border-color: #c3b133;
	background-color: #f9e449;
}
.badge-mini.silver {
	border-color: #8c8c8c;
	background-color: #c4c4c4;
}
.badge-mini.bronze {
	border-color: #7e5514;
	background-color: #c0a06d;
}


/*! */
/*! ----------------------------------------------------------- */
/*! 	COMS ICON												*/
/*! ----------------------------------------------------------- */
/*		the bubble used over the image							*/

.coms-icon {
	position: absolute; display: inline-block;
	top: -6px; left: -6px;
	padding: 3px 4px 2px 4px;
	background-color: var(--bg-color-blue);
	font-weight: bold; text-align: center;
	border: 2px solid var(--bg-color-default);
	border-radius: var(--box-round-normal);
	min-width: 14px;
}

.coms-icon:after {
	content:url(../Imageset/coms-box-visual.svg);
	width: 10px; height: 8px;
	position: absolute;
	bottom: -1px; right: 1px;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	CSS FRAMEWORK - HEADERS (Override)						*/
/*! ----------------------------------------------------------- */

.header .header-title.txt-orange .icon {
	filter: var(--icon-filter-orange);
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	CSS FRAMEWORK - LOADING ICON (Override)					*/
/*! ----------------------------------------------------------- */

.loader .loader-spin {
  border: 6px solid var(--bg-color-default-darker); /* Light grey */
  border-top: 6px solid var(--bg-color-blue); /* Blue */
}






/*! */
/*! ----------------------------------------------------------- */
/*! 	HIDE / SHOW - WEB <> MOBILE								*/
/*! ----------------------------------------------------------- */
/* 		Must be defined at the end 								*/

.hide {	display: none;  }
.show { display: block; }

@media screen and (min-width: 940px) {
	.web 		{ display: compact; }
	.web.inline { display: inline-block; vertical-align: top; }
	.mobile 	{ display: none; }
}

@media screen and (max-width: 940px) { 
	.web 		{ display: compact; }
	.web.inline { display: inline-block; vertical-align: top; }
	.mobile 	{ display: none; }
}

@media screen and (max-width: 720px) {
	.web 			{ display: none; }
	.mobile 		{ display: block; }
	.mobile.inline 	{ display: inline-block; }
}