/*
*	SonicOnline.fr - Games
*	----------------------
*/

/*! */
/*! ----------------------------------------------------------- */
/*! 	INDEX					 								*/
/*! ----------------------------------------------------------- */


/*! */
/*! ---- GAMELIST FOR PC ---- */


section#GamesIndex .game-matrix {
	flex-wrap: wrap;
}

section#GamesIndex .game-matrix .game-item {
	width: 140px;
}

section#GamesIndex .game-matrix .game-item .game-img img {
	width: 140px; height: 100px;
}

@media screen and (max-width: 940px) { section#GamesIndex .game-matrix .game-item img {
	width: 100px; height: 71px;
}}


/*! */
/*! ---- GAMELIST FOR MOBILE ---- */


section#GamesIndex .mobile.game-list {
	display: none;
}

@media screen and (max-width: 720px) { section#GamesIndex .mobile.game-list  {
	display: block;
}}

section#GamesIndex .mobile.game-list a {
	padding: 5px 0px;
	display: block;
	text-decoration: none;
}

section#GamesIndex .mobile.game-list .game-item-list .game-img {
	width: 60px; height: 42px;
}

section#GamesIndex .mobile.game-list {
	font-size: 1.1em;
}




/*! */
/*! ----------------------------------------------------------- */
/*! 	GAME ITEM PAGE			 								*/
/*! ----------------------------------------------------------- */

/*! */
/*! ---- TOP HEADER ---- */

#GameOverview-header {
	margin-bottom: 10px;
}

#GameOverview-header .blue-part {
	display: flex;
	align-items: center;
	
	position: relative;
	height: 90px;
	overflow: hidden;
	margin-top: -90px;
	padding: 0px 20px;
}

@media screen and (max-width: 940px) { 
	#GameOverview-header img {
		max-width: unset;
		width: 940px;
		height: 250px;
		margin-left: calc(100% / 2 - 940px / 2);
	}
}

@media screen and (max-width: 720px) { 
	
	#GameOverview-header .blue-part {
	flex-wrap: wrap;
}}

#GameOverview-header .blue-part .gamename-part {
	flex: 2;
}

@media screen and (max-width: 720px) { #GameOverview-header .blue-part .gamename-part {
	flex-shrink: 0;
	width: 100%;
	flex:none;
}}

#GameOverview-header .blue-part .game-count {
	height: 60px;
	display: flex;
	align-items: center;
	margin: 5px;
	text-align: center;
	padding: 0 10px;
}

@media screen and (max-width: 940px) { #GameOverview-header .blue-part .game-count {
	margin: 2px;
	padding: 0 5px;
	font-size: .9em;
}}

@media screen and (max-width: 720px) { #GameOverview-header .blue-part .game-count {
	display: none;
}}

#GameOverview-header .blue-part .game-platforms {
	text-overflow: ellipsis;
}


/*! */
/*! ---- USER BUTTONS ---- */


#GameOverview-Index-UserButtons {
	display: flex;
	text-align: right;
	font-size: .8em;
	line-height: 1.2em;
}

#GameOverview-Index-UserButtons div.note-button,
#GameOverview-Index-UserButtons div.write-button,
#GameOverview-Index-UserButtons div.addToCollec-button {
	flex: 1;
	display: flex;
	border-top: 1px var(--btn-color-veryclear) solid;
	border-bottom: 1px var(--btn-color-veryclear) solid;
	height: 50px;
	justify-content: center;
}

/* Override buttons values */

#GameOverview-Index-UserButtons .btn,
#popup-menu-destination .note-btn-pltfm .btn {
	padding: 2px 2px;
}

#GameOverview-Index-UserButtons .btn .btn-icon,
#popup-menu-destination .note-btn-pltfm .btn .btn-icon {
	width: 25px; height: 25px;
	background-image: url(../Imageset/btn-icons.svg); /* REMOVE SVG CALL !!!!!! */
	background-size: calc(14 * 25px) 25px;
}

#GameOverview-Index-UserButtons .btn-icon-notedown,
#popup-menu-destination .note-btn-pltfm .btn-icon-notedown {
	background-position: calc(8 * -25px) 0px;
}
#popup-menu-destination .note-btn-pltfm  .btn.selected .btn-icon-notedown {
	background-position: calc(9 * -25px) 0px;
}

#GameOverview-Index-UserButtons .btn-icon-noteup,
#popup-menu-destination .note-btn-pltfm .btn-icon-noteup {
	background-position: calc(10 * -25px) 0px;
}
#popup-menu-destination .note-btn-pltfm  .btn.selected .btn-icon-noteup {
	background-position: calc(11 * -25px) 0px;
}

#GameOverview-Index-UserButtons .btn-icon-write {
	background-position: calc(12 * -25px) 0px;
}
#GameOverview-Index-UserButtons .btn-icon-add{
	background-position: calc(13 * -25px) 0px;
}

#GameOverview-Index-UserButtons > div:hover {
	cursor: pointer;
	background-color: white;
}

#GameOverview-Index-UserButtons div.write-button {
	border-left: 1px var(--btn-color-veryclear) solid;
	border-right: 1px var(--btn-color-veryclear) solid;
}

#GameOverview-Index-UserButtons div.note-button div.open-button,
#GameOverview-Index-UserButtons div.write-button div.open-button,
#GameOverview-Index-UserButtons div.addToCollec-button div.open-button {
	display: flex;
	align-items: center;
}


/*! */
/*! ====== Game Overview Page - User Buttons - Popup menu */

#popup-menu-destination #status-form .status-btn-pltfm,
#popup-menu-destination #note-form .note-btn-pltfm {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 5px;
}

#popup-menu-destination #status-form .status-btn-pltfm .btn,
#popup-menu-destination #note-form .note-btn-pltfm .btn {
	margin-left: 5px;
}

#popup-menu-destination .popup-content .description {
	margin-bottom: 20px;
	font-size: .95em;
}

#popup-menu-destination .popup-content .popup-content-submit-btn {
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

#popup-menu-destination .popup-content .popup-menu-note-bottom {
	margin-top: 10px;
}

#GameOverview-Index-UserButtonsBottom {
	display: flex;
	margin-bottom: 20px;
}

#GameOverview-Index-UserButtonsBottom > div {
	flex:1;
	padding: 5px 10px;
}

/*! */
/*! ====== Game Overview Page - Notes */

#GameOverview-Index-Notes {
	display: flex;
	justify-content: space-around;
	margin: 40px 0px;
}

@media screen and (max-width: 720px) { #GameOverview-Index-Notes {
	flex-direction: column;
	justify-content: center;
	align-items: center;
}}

#GameOverview-Index-Notes .game-note {
	display: flex;
}

@media screen and (max-width: 720px) { #GameOverview-Index-Notes .game-note  {
	margin-bottom: 10px;
}}

#GameOverview-Index-Notes .title {
	font-weight: bold;
	font-variant: small-caps;
	margin-top: 3px;
}

#GameOverview-Index-Notes .game-note .note {
	width: 80px; height: 80px;
	margin-right: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 3em;
	font-weight: bold;
}

#GameOverview-Index-Notes .asterisk {
	font-size: .5rem;
}

#GameOverview-Index-UserReviews .widget_user_gameReview_leftSize_wGameBox {
	margin: 10px 0;
}


/*! */
/*! ====== Game Overview Page - Videos */

#GameOverview-Index-Videos {
	display: flex;
	justify-content: space-between;
}

@media screen and (max-width: 720px) { #GameOverview-Index-Videos  {
	flex-wrap: wrap;
	justify-content: center;
}}


/*! */
/*! ====== Game Overview Page - Images */

/*#GameOverview-Index-Images {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

#GameOverview-Index-Images > div {
	display: flex;
	align-items: center;
	flex-direction: column;
}*/

/*#GameOverview-Index-Images .image {
	flex-shrink: 0;
}*/

#GameOverview-Index-Images .image {
	width: 190px;
	height: 106px;
	background-color: var(--bg-color-default-darker);
}

#GameOverview-Index-Images .image a {
	
}

#GameOverview-Index-Images img {
	width: inherit;
	height: 106px;
	max-width: unset;
	margin-left: calc(190px / 2 - 100% / 2);
	
}

@media screen and (max-width: 940px) { #GameOverview-Index-Images .image {
	width: 150px; height: 83px;
}}


/*! */
/*! ---- PRESS REVIEWS ---- */


.widget-games-pressReviews {
	margin: 10px 0;
}


/*! */
/*! ---- RIGHT DATES ---- */


@media screen and (max-width: 940px) { #GameOverview-rightInfos .GameOverview-date-out .game-box {
	display: none;
}}

#GameOverview-rightInfos .GameOverview-date-out .game-dates {
	
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	GAME USER REVIEWS		 								*/
/*! ----------------------------------------------------------- */


#GameOverview-UserReviews .widget_user_gameReview_leftSize_wGameBox {
	margin: 10px 0;
}

/*! */
/*! Game Overview - Top Header */


section#games .gamecard-header {
	height: 250px;
}

@media screen and (max-width: 720px) { section#games .gamecard-header {
	height: 100%;
	background-color: rgba(49,70,97,1);
}}

section#games .gamecard-header .image {
	width: 940px; height: 250px;
	background-color: var(--bg-color-white);
}

section#games .gamecard-header .bg-box {
	position: relative;
	top:-80px;
	height: 80px;
}

section#games .gamecard-header .gamecard-infos {
	position: relative;
	top:-160px;
	height: 80px;
}


@media screen and (max-width: 940px) { section#games .gamecard-header .top-name {
	width: 360px;
	font-size: 0.8em;
}}
@media screen and (max-width: 720px) { section#games .gamecard-header .top-name {
	font-size: 1.0em;
}}


section#games .gamecard-header .left-counters {
	text-align: right;
}

@media screen and (max-width: 940px) { section#games .gamecard-header .left-counters {
	width: 320px;
}}

section#games .gamecard-header .left-counters .counter {
	height: 40px;
	text-align: center;
}

@media screen and (max-width: 940px) { section#games .gamecard-header .left-counters .counter {
	padding: 10px 5px; margin-left: 5px;
}}

section#games .gamecard-header .left-counters .counter .nb {
}

@media screen and (max-width: 940px) { section#games .gamecard-header .left-counters .counter .nb {
	font-size: 1.6em;
}}


section#games .mobile-gamecard-header .name {
	font-size: 1.5em;
	font-weight: bold;
}

section#games .mobile-gamecard-header .box {
	width: 120px;
}

section#games .mobile-gamecard-header .infos {
	width: 180px;
}

section#games .mobile-gamecard-header .category-links .box-padding {
	padding: 5px 10px;
}

section#games .mobile-gamecard-header .category-links .box-round {
	width: 125px; margin-right: 5px;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	GAME ITEM PAGE - NOTES			 						*/
/*! ----------------------------------------------------------- */


#ajax-overview-notes {
	min-height: 300px;
}

/*#ajax-overview-notes .loading-icon {
	width: 600px; height: 300px;
}*/

section#notes-overview .users,
section#notes-overview .press {
}

@media screen and (max-width: 940px) { section#notes-overview .users, section#notes-overview .press {
	width: 210px;
}}
@media screen and (max-width: 720px) { section#notes-overview .users, section#notes-overview .press {
	width: 280px;
}}

@media screen and (max-width: 940px) { section#notes-overview .users .title, section#notes-overview .press .title {
	width: 210px;
}}
@media screen and (max-width: 720px) { section#notes-overview .users .title, section#notes-overview .press .title {
	width: 280px;
}}

section#notes-overview .graphic {
	height: 130px;
}

section#notes-overview .details {
	margin-top: 43px;
}

section#notes-overview .press .details {
	margin-top: 55px;
}

section#notes-overview .user_stats {
	text-align: center;
	margin-bottom: 5px;
	margin-top: 10px;
}


@media screen and (max-width: 940px) { section#notes-overview .box-separator, section#notes-overview .user-review-box {
	
}}
@media screen and (max-width: 720px) { section#notes-overview .box-separator, section#notes-overview .user-review-box {
	display: none;
}}

section#notes-overview .box-separator, section#notes-overview .user-review-box .user-avatar {
	--user-avatar-size: 88px;
}

section#notes-overview .user-review-box .bts-status {
	width: 32px; margin-right: 10px;
}


section#notes-overview .user-review-box .right-box {
	width: 400px;
}

@media screen and (max-width: 940px) { section#notes-overview .user-review-box .right-box {
	width: 240px;
}}
@media screen and (max-width: 720px) { section#notes-overview .user-review-box .right-box {

}}

section#notes-overview .user-review-box form label,
section#notes-overview .user-review-box form .bbcode-buttons,
section#notes-overview .user-review-box form .form-submit-btn,
section#notes-overview .user-review-box form .visual_select_field_user_game_card_note {
	display: none;
}

section#notes-overview .user-review-box form label {
	font-weight: bold;
	margin-bottom: 10px;
	width: 390px;
}

section#notes-overview .user-review-box form textarea {
	width: 380px; height: 50px;
	margin-bottom: 10px;
}

@media screen and (max-width: 940px) { section#notes-overview .user-review-box form textarea {
	width: 220px;
	margin-bottom: 0px;
}}

section#notes-overview .user-review-box form .visual_select_field_user_game_card_note .visual_select {
	display: inline-block; vertical-align: top;
	margin-right: 10px;
	margin-bottom: 10px;
	cursor: pointer;
}


/* User versus */

section#games-versus .versus-left,
section#games-versus .versus-right {
	width: 275px;
}

@media screen and (max-width: 940px) { section#games-versus {
	
}}
@media screen and (max-width: 720px) { section#games-versus {
	display: none;
}}

section#games-versus .versus-left .user-avatar,
section#games-versus .versus-right .user-avatar {
	--user-avatar-size: 29px;
}

section#games-versus .versus-center {
	width: 30px; margin-left: 10px; margin-right: 10px; height: 120px;
	padding-top: 97px;
	font-size: 1.2em;
	text-align: center; color: white;
	font-weight: bold;
	background-image: url(../Imageset/game-versus-separator.png);
	background-position: center top;
	background-repeat: repeat-y;
}

/* Left Sum Up */

section#game-overview-sumup {
	
}

section#game-overview-sumup .box {
	width: 124px;
	/*text-align: center;*/
}

section#game-overview-sumup .infos {
	width: 154px;
	margin-top: 5px;
}

section#game-overview-sumup .infos div {
	margin-bottom: 3px;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	GAME VIDEOS			 									*/
/*! ----------------------------------------------------------- */


section#game-overview-videos {
	
}

@media screen and (max-width: 940px) { section#game-overview-videos {
	
}}
@media screen and (max-width: 720px) { section#game-overview-videos {
	display: none;
}}


/*! */
/*! ----------------------------------------------------------- */
/*! 	GAME PRESS REVIEWS			 							*/
/*! ----------------------------------------------------------- */


section#game-overview-press .name,
section#game-overview-press .note {
	height: 18px;
}

@media screen and (max-width: 940px) { section#game-overview-press .grid_3-2 {
	width: 138px;
}}
@media screen and (max-width: 720px) { section#game-overview-press .name {
	
}}

section#game-overview-press .name.wide {
	width: 560px;
}

@media screen and (max-width: 940px) { section#game-overview-press .name.wide {
	width: 380px;
}}
@media screen and (max-width: 720px) { section#game-overview-press .name.wide {
	width: 220px;
}}

section#game-overview-press .note {
	width: 60px;
	text-align: center;
	border-radius: var(--box-round-normal);
	background-color: var(--bg-color-white);
	font-weight: bold;
}

/*section#game-overview-press .note.note-red {
	background-color: #ee6456;
}
section#game-overview-press .note.note-orange {
	background-color: #ffb751;
}
section#game-overview-press .note.note-green {
	background-color: #53d773;
}*/


/**
*	Overview news
*/

section#game-overview-news {
	margin-bottom: 20px;
}

/*section#game-overview-news div a {
	text-decoration: none;
	color: #333;
}*/

/*! */
/*!	Games user review edit
*/


#games-review-edit .inputClass {
	width: 100%;
}

#games-review-edit .inputClass textarea {
	font-size: .9em;
}

section#games-review-edit form .visual_select_field_user_game_card_note {
	text-align: center;
}

section#games-review-edit form .visual_select_field_user_game_card_note .visual_select {
	display: inline-block; vertical-align: top;
	margin-right: 10px;
	margin-bottom: 30px;
	cursor: pointer;
}



/*! */
/*! ----------------------------------------------------------- */
/*! 	GAME IMAGES			 								*/
/*! ----------------------------------------------------------- */


section#game-overview-images .image {
	width: 86px; height: 48px;
}
@media screen and (max-width: 940px) { section#game-overview-images .image {
	width: 60px; height: 35px;
}}
@media screen and (max-width: 720px) { section#game-overview-images .image {

}}

section#game-overview-images-wide .image, section#game-overview-images-wide .image img {
	width: 190px; height: 106px;
}
@media screen and (max-width: 940px) { section#game-overview-images-wide .image, section#game-overview-images-wide .image img {
	width: 140px; height: 78px;
}}
@media screen and (max-width: 720px) { section#game-overview-images-wide .image, section#game-overview-images-wide .image img {
	width: 85px; height: 47px;
}}

section#game-images #images {
	min-height: 80px;
}

section#game-images #gamecard_image_loading {
	margin-left: 443px; margin-top: 25px;
	width: 35px; height: 35px;
	background-image: url(../Imageset/loading.gif);
	
}

section#game-images .image, section#game-images .image img {
	width: 175px; height: 98px;
}



@media screen and (max-width: 940px) { section#game-images .image {
	width: 128px; height: 72px;
}}
@media screen and (max-width: 720px) { section#game-images .image {
	width: 134px; height: 75px;
}}