/*
*	SonicOnline.fr - Board
*	----------------------
*/

/*! */
/*! ----------------------------------------------------------- */
/*! 	TOP MENU				 								*/
/*! ----------------------------------------------------------- */


section#board-index .board-topmenu, section#board-last-messages .board-topmenu {
	display: none;
}

@media screen and (max-width: 940px) { 
	section#board-index .board-topmenu,
	section#board-last-messages .board-topmenu {
		display: flex;
		margin-bottom: 10px;
		justify-content: flex-end;
	}
	section#board-index .page-top-links,
	section#board-last-messages .page-top-links {
		display: none;
	}
	section#board-index h2.header {
		display: none;
	}
}

/* ---- LAST MESSAGE PAGE ---- */

section#board-index .board-topmenu .btn,
section#board-last-messages .board-topmenu .btn {
	margin-right: 10px;
}

@media screen and (max-width: 940px) { 
	#board-last-messages .page-hierarchy-top {
		display: none;
	}
	#board-last-messages #widget-last-updated-topics .header-right {
		display: none;
	}
}


/*! */
/*! ----------------------------------------------------------- */
/*! 	GENERAL STYLE			 								*/
/*! ----------------------------------------------------------- */


section#board-forum,
section#board-topic,
section#board-topic-post,
section#board-topic-post-preview {
	margin-bottom: 20px;
}

section#board-forum .board_tree,
section#board-topic .board_tree,
section#board-topic-post .board_tree {
	font-size: 12px;
	margin-bottom: 10px;
	color: var(--color-texte-default-clearer);
	text-shadow: 0px -1px 0px white;
}

section#board-forum .board_tree a,
section#board-topic .board_tree a,
section#board-topic-post .board_tree a {
	color: var(--color-texte-default-clearer);
	text-decoration: none;
}

section#board-forum .board_tree a:hover,
section#board-topic .board_tree a:hover,
section#board-topic-post .board_tree a:hover {
	text-decoration: underline;
}

@media screen and (max-width: 720px) { section#board-topic .topic-title .topic-title-right .btn-text {
	display: none;
}}


/*! */
/*! ----------------------------------------------------------- */
/*! 	TOP LINKS (button | pages | links)				 		*/
/*! ----------------------------------------------------------- */


section#board-forum .page-hierarchy-top, section#board-topic .page-hierarchy-top {
	margin-bottom: 10px;
}

section#board-forum .page-hierarchy-bottom, section#board-topic .page-hierarchy-top {
	margin-top: 10px;
}

@media screen and (max-width: 720px) { section#board-forum .page-hierarchy-top, section#board-topic .page-hierarchy-top {
	font-size: .9em;
	margin-bottom: 20px;
}}

@media screen and (max-width: 720px) { section#board-forum .page-hierarchy-bottom, section#board-topic .page-hierarchy-bottom {
	margin-top:20px;
	font-size: .9em;
}}

section#board-forum .page-hierarchy-top a, 
section#board-topic .page-hierarchy-top a,
section#board-forum .page-hierarchy-bottom a, 
section#board-topic .page-hierarchy-bottom a {
	font-weight: bold;
}

section#board-forum .page-hierarchy-top div, 
section#board-topic .page-hierarchy-top div,
section#board-forum .page-hierarchy-bottom div, 
section#board-topic .page-hierarchy-bottom div {
	display: inline-block;
}

section#board-forum .page-hierarchy-top .icon-home, 
section#board-topic .page-hierarchy-top .icon-home,
section#board-forum .page-hierarchy-bottom .icon-home, 
section#board-topic .page-hierarchy-bottom .icon-home,
section#board-last-messages .page-hierarchy-top .icon-home
 {
	display: inline-block;
	width: 12px; height: 12px;
	background-size: cover;
	background-image: url(../Imageset/board/forum-icons.svg);
	background-position: 12px 0;
	margin-right: 2px;
}

@media screen and (max-width: 720px) { section#board-forum .page-top-links .links, section#board-topic .page-top-links .links {
	margin-top: 0px;
}}

@media screen and (max-width: 720px) { section#board-topic .page-top-links .mobile.links {
	width: 100%;
	padding: 10px 0;
}}

@media screen and (max-width: 940px) { section#board-forum .page-top-links .grid_6, section#board-topic .page-top-links .grid_6 {
	width: 300px;
}}
@media screen and (max-width: 720px) { section#board-forum .page-top-links .grid_6, section#board-topic .page-top-links .grid_6 {
	display: block; width: 100%; 
	margin: 0px; margin-bottom: 10px; text-align: center;	
}}



/*! */
/*! ----------------------------------------------------------- */
/*! 	BOARD ROW										 		*/
/*! ----------------------------------------------------------- */


section#board-index .row,
section#board-forum .row {
	padding: 15px 0px;
	border-top: 1px var(--btn-color-veryclear) solid;
}

section#board-forum .row .topic-pinned {
	width: 15px; height: 65px;
	margin-top: -15px;
	margin-bottom: -15px;
	border-top-right-radius: var(--box-round-normal);
	border-bottom-right-radius: var(--box-round-normal);
	opacity: 1;
	display: flex;
	align-items: center
}

section#board-forum .row .topic-pinned .icon {
	filter: var(--icon-filter-orange);
}

section#board-index .row div.box0,
section#board-forum .row div.box0 {
	width: var(--forum-icon-size); height: var(--forum-icon-size);
	margin: 0px 10px;
}


/* ---- ICONS ---- */


section#board-index .row div.box0.read, section#board-index .row div.box0.unread,
section#board-forum .row div.box0,
section#board-index .row div.box0 {
	--forum-icon-size: 35px;
	background-image: url(../Imageset/board/forum-icons.svg);
	background-size: calc(5 * var(--forum-icon-size)) calc(1 * var(--forum-icon-size));
}

section#board-index .row div.box0.read,
section#board-forum .row div.box0.read,
section#board-forum .row div.box0.read.unlocked {
	background-repeat: no-repeat;
	background-position: calc(-0 * var(--forum-icon-size)) calc(-0 * var(--forum-icon-size));
}

section#board-forum .row div.box0.read.locked {
	background-repeat: no-repeat;
	flex-shrink: 0;
	background-position: calc(-3 * var(--forum-icon-size)) calc(-0 * var(--forum-icon-size));
}

section#board-index .row div.box0.unread,
section#board-forum .row div.box0.unread,
section#board-forum .row div.box0.unread.unlocked {
	background-repeat: no-repeat;
	background-position: calc(-1 * var(--forum-icon-size)) calc(-0 * var(--forum-icon-size));
}

section#board-forum .row div.box0.unread.locked {
	background-repeat: no-repeat;
	flex-shrink: 0;
	background-position: calc(-2 * var(--forum-icon-size)) calc(-0 * var(--forum-icon-size));
}

section#board-index .row div.box1,
section#board-topic .row div.box1 {
	width: 335px;
}

section#board-forum .row div.box1 {
	width: 540px;
	margin-right: 10px;
}

@media screen and (max-width: 940px) { section#board-forum .row div.box1 {
	width: 300px;
}}
@media screen and (max-width: 720px) { section#board-forum .row div.box1 {
	margin-right: 0px;
}}

section#board-forum .row div.box1bis {
	width: 40px;
}

@media screen and (max-width: 940px) { section#board-forum .row div.box1bis {
	
}}
@media screen and (max-width: 720px) { section#board-forum .row div.box1bis {
	display: none;
}}

/*section#board-forum .row div.box1bis .fav-icon {
	width: 20px; height: 20px;
	background-image: url(../Imageset/board/topic-fav-icon.svg);
	background-repeat: no-repeat;
	background-position: center center;
}

section#board-forum .row div.box1bis .hot-topic-icon{
	width: 20px; height: 20px;
	background-image: url(../Imageset/icon-fire.png);
	background-repeat: no-repeat;
	background-position: center center;
}*/

section#board-index .row div.box2,
section#board-topic .row div.box2 {
	width: 70px;
}

section#board-forum .row div.box2 {
	width: 85px;
}

@media screen and (max-width: 940px) { section#board-index .row div.box2, section#board-forum .row div.box2 {
	
}}
@media screen and (max-width: 720px) { section#board-index .row div.box2 {
	margin-right: 10px;
}}

@media screen and (max-width: 720px) { section#board-forum .row div.box2 {
	display: none;
}}

section#board-index .row div.box3,
section#board-forum .row div.box3,
section#board-topic .row div.box3 {
	width: 198px;
}

@media screen and (max-width: 940px) { section#board-index .row div.box3, section#board-forum .row div.box3 {
	
}}
@media screen and (max-width: 720px) { section#board-index .row div.box3, section#board-forum .row div.box3 {
	display: none;
}}

section#board-forum .row div.box3 {
	width: 160px;
}

section#board-index .row div.box3 .user-avatar,
section#board-forum .row div.box3 .user-avatar,
section#board-topic .row div.box3 .user-avatar {
	--user-avatar-size: 30px;
}


/*! */
/*! ----------------------------------------------------------- */
/*! 	TOPIC ROW										 		*/
/*! ----------------------------------------------------------- */


@media screen and (max-width: 720px) { section#board-topic .row .top-row.mobile {
	display: flex;	
	z-index: 1;
}}

@media screen and (max-width: 940px) { section#board-topic .row .top-row .username {
	width: 458px;
}}
@media screen and (max-width: 720px) { section#board-topic .row .top-row .username {
	display: block; width: 150px;
}}

section#board-topic .row .top-row .date {
	margin-top: 5px;
}

@media screen and (max-width: 940px) { section#board-topic .row .top-row .date {
	
}}
@media screen and (max-width: 720px) { section#board-topic .row .top-row .date {
	display: block; width: 280px; text-align: left;
	margin-top: 0px;
}}

section#board-topic .row .mobile .user-avatar {
	--user-avatar-size:40px;
	margin-right: 10px;
}

section#board-topic .row .mobile .user-avatar-right {
	width: 220px;
	margin-top: 2px;
}

section#board-topic .row .content .left_box {
	position: relative;
}

@media screen and (max-width: 720px) { section#board-topic .row .content .left_box {
	display: none;
}}

section#board-topic .row .content .left_box .user-avatar {
	--user-avatar-size: 100px;
}

@media screen and (max-width: 720px) { section#board-topic .row .content .left_box .user-avatar {
	
}}

/* override droplist values for avatar */
section#board-topic .row .content .left_box .droplist .droplist-item {
	padding: 6px 20px;
}
section#board-topic .row .content .left_box .droplist .droplist-menu {
	top: 20px;
}

section#board-topic .row .content .left_box .user-icon-teamso {
	width: 25px; height: 25px;
	position: absolute;
	top: 20px; left: 0px;
	background-image: url(../Imageset/user-icon-teamso.png);
}

section#board-topic .row .content .left_box .badges {
	color: var(--text-color-default);
	font-size: var(--text-size-verysmall);
}

section#board-topic .row .content .right_box {
	width: 100%;
}

@media screen and (max-width: 720px) { section#board-topic .row .content .right_box .box-separator {
	display: none;
}}

section#board-topic .row .content .right_box .edit-date {
	padding-top: 10px;
	font-size: var(--text-size-verysmall);
	color: var(--text-color-default-clearer);
	font-style: italic;
}


/* ---- SIGNATURE ---- */


section#board-topic .row .content .right_box .signature {
	max-height: 100px;
	overflow: hidden;
}

section#board-topic .row .content .right_box .signature a {
	color: var(--color-texte-default);
	text-decoration: underline;
}

section#board-topic .row .content .right_box .signature img {
	display: inline;
}

section#board-topic .reply-block {
	margin-top: 20px;
}

section#board-topic .reply_form .title {
	margin-bottom: 10px;
}

section#board-topic .moderator-links {
	text-align: right;
}

section#board-topic .moderator-links .menu {
	right:0px;
}

@media screen and (max-width: 720px) { section#board-topic #form .inputClass {
	width: 100%;
}}

section#board-topic #form textarea,
section#board-topic-post-preview form textarea {
	width: 750px;
}


/* ---- TOPIC FORM ---- */


@media screen and (max-width: 940px) { section#board-topic #form textarea {
	width: 690px;
}}
@media screen and (max-width: 720px) { section#board-topic #form .bbcode-buttons, section#board-topic #form textarea {
	width: calc(96% - 12px);
}}

@media screen and (max-width: 720px) { section#board-topic #form .bbcode-buttons {
	font-size: 1.3em;
}}
@media screen and (max-width: 720px) { section#board-topic #form textarea {
	font-size: 1em;
}}


/* ---- TOPIC HIGHLIGHT COLORS ---- */


section#board-topic .top-row.topicHighlight2 {
	background-color: var(--bg-color-boardpost-highlight1-title);
}

section#board-topic .content.topicHighlight2 {
	background-color: var(--bg-color-boardpost-highlight1-content);
}


section#board-topic .top-row.topicHighlight3 {
	background-color: var(--bg-color-boardpost-highlight2-title);
}

section#board-topic .content.topicHighlight3 {
	background-color: var(--bg-color-boardpost-highlight2-content);
}


/*! */
/*! ----------------------------------------------------------- */
/*! 	MISC											 		*/
/*! ----------------------------------------------------------- */


.multi-quote {
	display: inline-block; position:fixed;
    bottom:0; right:0; z-index: 100;
    
	margin: 20px; padding: 10px;
	border-radius: var(--box-round-normal);
	border: 2px var(--btn-color-veryclear) solid;
	background-color: white;
	box-shadow: 0px 1px 5px var(--color-shadow-black);
}

.multi-quote .erase {
	display: inline-block; vertical-align: top;
	font-size: 0.8em;
	font-weight: bold;
	color: var(--btn-color-veryclear);
	cursor: pointer;
	padding: 3px 5px;
}