/*
 * ___________.__   __      _____          __
 * \_   _____/|  | |  | __ /  _  \________/  |_  ____
 *  |    __)_ |  | |  |/ //  /_\  \_  __ \   __\/ __ \
 *  |        \|  |_|    </    |    \  | \/|  | \  ___/
 * /_______  /|____/__|_ \____|__  /__|   |__|  \___  >
 *         \/           \/       \/                 \/
 * https://www.elkarte.net
 * © ElkArte Forum contributors
 *
 * INTRODUCTION
 * This variant is the standard, light, Elkarte RTL theme.
 * This is eye candy only. All the layout code is in rtl.css.
 * -------------------------------------------------------
 * $CONTENTS
 *
 * 		$GENERAL.............Global resets, clearfixes, etc.
 *		$COMMON..............Common classes to drive you bonkers.
 *		$BBC.................Quotes, code blocks, BBC styles.
 *		$AJAX................The "loading" bar (quick edit, etc).
 *
 *		$MAIN................Forum header, wrapper, and footer.
 *		$MENUS...............Main and secondary menus.
 *		$BREADCRUMBS.........The navigation path breadcrumbs.
 *		$BUTTONS.............Most button strips.
 *		$PAGELINKS...........Page navigation links.
 *
 *		$TABLES..............Generic tables (memberlist, error log, etc).
 *		$SETTINGS............Generic lists for settings pages.
 *		$BOARDS..............Board index, sub-boards, and message index.
 *
 *		$TOPICS..............The display template (topic view), including send.
 *		$EDITOR..............Main editor (posts, events, polls) and topic summary.
 *		$MODERATE............Move topic, split topic, merge topic.
 *
 *		$PROFILE.............The profile areas.
 *		$PERSONAL............The personal messages (PM) areas.
 *		$CALENDAR............Wombats (and the calendar).
 *		$STATISTICS..........The statistics centre.
 *
 *		$HELP................Help pages, help icons and pop-ups, tooltips.
 *		$SEARCH..............Search pages, including memberlist search.
 *		$LOGIN...............Login and registration, maintenance mode.
 *
 *		$ERRORS..............Error messages.
 *		$PROGRESS............Nifty progress bars.
 *		$MEDIA...............Experimental media queries.
 * ------------------------------------------------------- */

:root {
	/* flip right and left colors for RTL */
	--primary_border_right: #C7C7C7;
	--primary_border_left: #CCCCCC;

	--secondary_border_right: #BFBFBF;
	--secondary_border_left: #AFAFAF;
}

/* -------------------------------------------------------
 *	$GENERAL
 * -------------------------------------------------------
 */

body {
	background-image: linear-gradient(to left, var(--body_grad_1) 0%, var(--body_grad_2) 50%, var(--body_grad_1) 100%);
}

/* Styles for main headers. */
.category_header, .forum_category .category_header {
	text-shadow: -1px 1px 0 var(--box_shadow);
}

/* Styles for subsection headers. @todo */
.secondary_header {
	text-shadow: -1px 1px 0 var(--contrast_text);
}

/* -------------------------------------------------------
 * $BBC
 * -------------------------------------------------------
 */

/* -------------------------------------------------------
 * $AJAX
 * -------------------------------------------------------
 */

/* -------------------------------------------------------
 * $MAIN
 * -------------------------------------------------------
 */

#search_form .input_text {
	border-right: 1px solid var(--primary_border_right);
}

#search_form select {
	border-color: var(--transparent);
}

.forumtitle > a {
	text-shadow: -1px 1px 0 var(--contrast_text);
}

/* -------------------------------------------------------
 * $MENUS
 * -------------------------------------------------------
 */

/* -------------------------------------------------------
 * $BOARDICONS
 * -------------------------------------------------------
 */

/* -------------------------------------------------------
 *	$BREADCRUMBS
 * -------------------------------------------------------
 */

.breadcrumb .crumb.active:after, .breadcrumb .crumb:hover:after, .breadcrumb .crumb:last-child {
	background-image: linear-gradient(0deg, var(--menu_button_active), var(--menu_button_active_2));
}

/* -------------------------------------------------------
 * $BUTTONS
 * This section contains code for the quickbuttons (quote, quick edit, etc)
 * and for the buttonlist class (reply, add poll, notify, etc).
 * These classes share some styling.
 * Declarations are amalgamated where styling is shared.
 * -------------------------------------------------------
 */

/* -------------------------------------------------------
 *	$PAGELINKS
 * -------------------------------------------------------
 */

/* -------------------------------------------------------
 *	$TABLES
 * -------------------------------------------------------
 */

/* -------------------------------------------------------
 *	$BOARDS
 * -------------------------------------------------------
 */

.board_latest {
	border-right: 1px solid var(--secondary_border_right);
}

.topic_info {
	border-right-color: var(--transparent);
	border-left-color: var(--primary_border);
	padding: .6rem 1.2rem .6rem 2.2rem;
}

/* -------------------------------------------------------
 *	$TOPICS
 * -------------------------------------------------------
 */

/* Do one override here for .poster. Still saves code all round. */
.poster_avatar .linklevel1, .poster_avatar:hover .linklevel1,
.poster_avatar .linklevel1:focus,
.name.linklevel1, .name.linklevel1:hover, .name.linklevel1:focus {
	border: none;
	background: none;
	box-shadow: none;
}

.poster_div_details {
	border-right-color: var(--primary_border);
	border-left-color: var(--transparent);
}

/* -------------------------------------------------------
 *	$EDITOR
 * -------------------------------------------------------
 */

/* -------------------------------------------------------
 *	$MODERATE
 * -------------------------------------------------------
 */

/* -------------------------------------------------------
 * $TABS
 * --------------------------------------------------------
 */

/* -------------------------------------------------------
 * $PROFILE
 * -------------------------------------------------------
 */

/* -------------------------------------------------------
 * $PERSONAL
 * ------------------------------------------------------- */
#personal_messages .capacity_bar span {
	border-right-color: var(--transparent);
	border-left: 1px solid var(--secondary_border_left);
}

/* -------------------------------------------------------
 * $CALENDAR
 * -------------------------------------------------------
 */

/* -------------------------------------------------------
 * $HELP
 * -------------------------------------------------------
 */

/* -------------------------------------------------------
 * $SEARCH
 * -------------------------------------------------------
 */
#search_form_menu select, #search_form_menu input, #search_form_menu button[type="submit"] {
	border-right-color: var(--menu_border_left);
}

/* -------------------------------------------------------
 *	$MEMBERLIST
 * -------------------------------------------------------
 */

.mlist li div:first-child {
	border-right: 1px solid var(--primary_border);
	border-left-color: var(--transparent);
}

.mlist li div:last-child {
	border-right-color: var(--transparent);
	border-left: 1px solid var(--primary_border);
}

/* -------------------------------------------------------
 * $LOGIN
 * -------------------------------------------------------
 */

/* -------------------------------------------------------
 * $ERRORS
 * -------------------------------------------------------
 */

/* -------------------------------------------------------
 * $PROGRESS
 * -------------------------------------------------------
 */

/* -------------------------------------------------------
 * $STATISTICS
 * -------------------------------------------------------
 */
.stats.floatleft {
	border-right-color: var(--transparent);
	border-left: 1px solid var(--secondary_border_left);
}

/* -------------------------------------------------------
 * $MEDIA
 * -------------------------------------------------------
 */

/* This one does 800 screens at default font size.
   -------------------------------------------------------------------------------------------*/

@media screen and (max-width: 50em) {
}

/* This one does up to 540 screens.
   -------------------------------------------------------------------------------------------*/

@media screen and (max-width: 33.750em) {
	.board_latest {
		border-right-color: var(--transparent);
	}

	.breadcrumb:after {
		content: "";
	}
}