/* INTRODUCTION
/* This variant is the standard, light, Elkarte default theme.
/* This is eye candy only. All the layout code is in index.css.
/*
/* All theme variants depend on the layout code for stability.
/* It is better to copy code to a variant CSS file for testing.
/* ------------------------------------------------------- */
/* $CONTENTS - still a bit WIP. @todo
/*
/*		$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.
/*		$LINKTREE............The 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.
/* ------------------------------------------------------- */




/*	$GENERAL	*/
/* ------------------------------------------------------- */
body {
	background-image: linear-gradient(to left, #333 0%, #888 50%, #333 100%);
}
fieldset {
	box-shadow: inset 1px -1px 3px #fff;
}
legend {
	background: url(../../images/selected_open.png) no-repeat scroll right center transparent;
	cursor: pointer;
	padding-right: 20px;
	padding-left: 0;
	margin-left: 0;
	margin-right: 15px;
}
.collapsed legend {
	background: url(../../images/selected_rtl.png) no-repeat scroll right center transparent;
}

/* The OpenID login form */
.openid_login {
	padding-left: 0;
	padding-right: 20px;
	background-position: 98% 50%;
}

/* Common button styling. */
/* It is being replaced with three classes: */
/*    .button_submit is not floated */
/*    .right_submit is right floated */
/*    .left_submit is left floated */
/* The button_reset class may need attention too. */
.button_submit, .right_submit, .left_submit, .button_reset,
/* Anchors styled to look like buttons. */
/* These have standard body text size. Can be chained with smalltext class. */
.linkbutton:link, .linkbutton_right:link, .linkbutton_left:link,
.linkbutton:visited, .linkbutton_right:visited, .linkbutton_left:visited {
	border-left: 1px solid #afafaf;
	border-right: 1px solid #bfbfbf;
	box-shadow: -1px 1px 2px #e5e5e5;
}

/* Hover effects. */
.button_submit:hover, .right_submit:hover, .left_submit:hover,
.button_reset:hover,
.linkbutton:hover, .linkbutton_right:hover, .linkbutton_left:hover {
	border-left: 1px solid #ccc;
	border-right: 1px solid #afafaf;
	box-shadow: -2px 1px 1px rgba(0,0,0,0.07) inset;
}

/* @todo - Test this everywhere. */
.standard_category {
	box-shadow: -1px 2px 4px #eee;
}

/* Styles for main headers. */
.category_header, .forum_category .category_header {
	text-shadow: -1px 1px 0 #ebebeb;
}
/* Styles for subsection headers. @todo */
.secondary_header {
	text-shadow: -1px 1px 0 #fff;
}

/*	$BBC		*/
/* ------------------------------------------------------- */
/* Extra quote styling */
.bbc_standard_quote, .bbc_alternate_quote, .quoteheader {
	box-shadow: -2px 2px 2px #ddd;
}

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

/*	$MAIN.		*/
/* ------------------------------------------------------- */
/* Maintenance mode warning. */
.notice {
	font-weight: 700;
	color: #a80000;
}
#search_form .input_text {
	border-radius: 0 2px 2px 0;
	border-right: 1px solid #ccc;
}
#search_form .button_submit {
	border-radius: 2px 0 0 2px;
}
#search_form select {
	border-style: solid none;
}
.forumtitle>a {
	text-shadow: -1px 1px 0 #fff;
}
/* News section. */
#news>h2 {
	float: right;
	margin: 7px 12px 0 -4em;
}
#news_line, #elkFadeScroller {
	box-shadow: -1px 2px 3px #eee;
}

/*	$MENUS		*/
/* ------------------------------------------------------- */
/* Level 1 Menu bar: link or button. General styling. */
.linklevel1, .linklevel1:link, .linklevel1:visited {
	border-left: 1px solid #afafaf;
	border-right: 1px solid #bfbfbf;
	box-shadow: -1px 1px 2px #e5e5e5;
}
/* Level 1 button hover and focus effects. */
.linklevel1:hover, .listlevel1:hover .linklevel1,
.linklevel2:hover, .listlevel2:hover .linklevel2,
.linklevel3:hover, .listlevel3:hover .linklevel3,
#menu_sidebar .linklevel1:hover, #menu_sidebar .listlevel1:hover .linklevel1,
#menu_current_area>strong>.linklevel1 {
	border-left: 1px solid #ccc;
	border-right: 1px solid #afafaf;
	box-shadow: -2px 1px 1px rgba(0,0,0,0.07) inset;
}
.poster li.poster_online:hover .linklevel1 {
	border-left: 1px solid #ccc;
	border-right: 1px solid #afafaf;
	box-shadow: -2px 1px 1px rgba(0,0,0,0.07) inset;
}
.poster li.poster_online .nolink {
	border-left: 1px solid #afafaf;
	border-right: 1px solid #bfbfbf;
	box-shadow: -1px 1px 2px #e5e5e5;
}
/* Level 1 active buttons. */
.linklevel1.active, .listlevel1:hover .active,
#collapse_button .linklevel1, .pm_indicator {
	border-left: 1px solid #38642e;
	border-right: 1px solid #38642d;
	box-shadow: -1px 1px 2px #bbb;
}
/* Hover effects for those buttons. */
.linklevel1.active:hover,.listlevel1:hover .linklevel1.active,
#collapse_button .linklevel1:hover, .linklevel1:hover .pm_indicator {
	border-left: 1px solid #5aa049;
	border-right: 1px solid #2d5024;
	box-shadow: -1px 1px 1px rgba(0,0,0,0.3) inset;
}
/* Levels 2 and 3: drop menu wrapper. */
.menulevel2, .menulevel3 {
	border-left: 1px solid #afafaf;
	border-right: 1px solid #bfbfbf;
	box-shadow: -3px 3px 3px rgba(0,0,0,0.2);
}
/* Tricky PM indicator. Define it carefully,
/* just in case someone tries to use this class elsewhere. */
.pm_indicator {
	right: auto;
	left: -0.4em;
	float: right;
	border-radius: 8px 8px 0 8px;
	box-shadow: -2px 2px 3px rgba(0,0,0,0.25), 0 -1px 0 #3d6e32 inset;
}
#dropdown_menu_1 .pm_indicator {
	margin-left: 2px;
}
/* Admin menu icons. */
.linklevel2>img {
	margin: 0 -4px 0 0;
}
/* Level 2: subsection indicators. */
.listlevel2.subsections .linklevel2:after,
#menu_sidebar .subsections .linklevel1:after,
#menu_sidebar .subsections:hover .linklevel1:after {
	right: auto;
	left: 6px;
	content: "\2190";
}

/*	$BOARDICONS	*/
/* ------------------------------------------------------- */
.board_icon {
	float: right;
}
.board_key:before {
	float: right;
}
.category_boards .board_icon, .board_key:before {
	background-image: url(../../images/_light/board_icons_rtl.png);
}

/*	$LINKTREE	*/
/* ------------------------------------------------------- */
/* The navigation list (i.e. linktree) */
/* Wrapper/background. */
.navigate_section {
	box-shadow: -1px 2px 3px #eee;
}
/* Color for linktree items. */
.linktree:after {
	box-shadow: -2px 2px 0 1px rgba(204, 204, 204, 0.9);
}
.linktree {
	box-shadow: 0 2px 0 -1px #ccc, -3px 2px 0 -1px #ccc, -3px -1px 0 -1px #ccc;
}

/*	$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.
/* ------------------------------------------------------- */
/* Styles for the standard button lists.
/* ------------------------------------------------------- */
/* The active one */
.buttonlist li a.active {
	box-shadow: -1px 1px 2px #ccc;
}

/* The quick buttons. */
/* ------------------------------------------------------- */
/* Radius left end of the first (Quote) button. */
.linklevel1.quote_button {
	border-radius: 0 2px 2px 0;
}
/* Radius right end of the last button. */
.linklevel1.post_options, .linklevel1.remove_button {
	border-radius: 2px 0 0 2px;
}

/*	$PAGELINKS	*/
/* ------------------------------------------------------- */
.pagelinks .navPages:hover, .pagelinks .current_page {
	border-left: 1px solid #ccc;
	border-right: 1px solid #afafaf;
	box-shadow: -2px 1px 1px rgba(0,0,0,0.07) inset;
}
.pagelinks :first-child {
	border-radius: 0 2px 2px 0;
}
.pagelinks :last-child {
	border-radius: 2px 0 0 2px;
}
/* our buddies « » */
.small_pagelinks:before {
	content: '\00AB';
	float: right;
}
.small_pagelinks:after {
	content: '\00BB';
	float: right;
}

/* Globally accessible top/bottom links. */
#gotop, #gobottom {
	border-radius: 20px 0 0 0;
}
#gobottom {
	border-radius: 0 0 0 20px;
}

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

/*	$BOARDS		*/
/* ------------------------------------------------------- */
/* Set up some general framing classes. @todo */
/*    .forum_category for board index/sub-boards. */
/*    .forumposts for thread pages and recent posts, etc. */
/*    .content_category for general divisions around the place. */
/* All styled the same in default variant, but available for fun and games. */

/* The board categories and newsfader - some shared styling. */
.forum_category, .forumposts, .content_category {
	box-shadow: -1px 2px 3px #eee;
}
/* @todo - Clean this up, once new classes are assigned to old windowbg stuffz. */
.board_latest {
	border-right: 1px solid #ccc;
	border-left: 0;
}
/* The board description and who-is-viewing stuff. */
#description_board {
	box-shadow: -1px 2px 4px #eee;
}
.topic_listing {
	box-shadow: -1px 2px 4px #eee;
}
.jump_to_header {
	box-shadow: -2px 1px rgba(1,1,1,0.07) inset;
}

.new_some_board:before {
	background-position: -298px -14px;
}
.new_none_board:before {
	background-position: -370px -14px;
}
.new_redirect_board:before {
	background-position: -440px -14px;
}
/* --------------------------------------------------------------------- */
/* The following are alternative layout orders for the board index rows. */
/* They are basic demonstrations only. Extra custom styling can be done.
/* These demos can be commented and un-commented to see them in action.
/* Note: similar tricks can be performed with the new message index too.
/* --------------------------------------------------------------------- */
/* This one simply puts the board stats back in the old SMF location. */
/*
.board_stats {
	text-align: right;
	padding: 1px 0 1px 6px;
	float: right;
}
*/
/* This one flips the row left to right, and sets the lastpost text to LTR. */
/*
.board_row {
	direction: ltr;
}
.board_latest {
	direction: ltr;
}
*/
/* This one does the LTR flip, and puts the board icon at far right. */
/*
.board_row {
	direction: ltr;
}
.icon_anchor {
	float: left;
	padding: 2px 6px 0 0;
}
.board_latest {
	direction: rtl;
}
*/
/* ------------------------------------------------------ */
/* This is where the fun starts. Absolute positioning. :D */
/* ------------------------------------------------------ */
/* This one takes the previous example, and puts the board icon back to far left. */
/*
.board_row {
	direction: ltr;
}
.icon_anchor {
	left: auto;
	right: 8px;
}
.board_latest {
	direction: rtl;
	padding-left: 0;
	padding-right: 66px;
}
*/
/* You want more? Ok. This one does the above, but also puts board stats over
/* at far right, and sets board name and description back to left aligned. */
/*
.board_row {
	direction: ltr;
}
.board_info {
	direction: rtl;
	padding-right: 0;
	padding-left: 8.4em;
}
.icon_anchor {
	left: auto;
	right: 8px;
}
.board_latest {
	direction: rtl;
	padding-left: auto;
	padding-right: 66px;
}
.board_stats {
	right: auto;
	left: 8px;
}
*/
/* There are more options, but those should be enough to give the general idea. */
/* ------------------------------------------------ */
/* End alternative layouts. Back to standard stuff. */
/* ------------------------------------------------ */

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

/* On to the posts */
.forumposts {
	box-shadow: -1px 2px 4px #eee;
}

/* @todo - Save code by amalgamating common button background declarations. */
.poster_online .linklevel1 {
	border-left: 1px solid #afafaf;
	border-right: 1px solid #bfbfbf;
	box-shadow: -1px 1px 2px #eee;
}
.poster_online .linklevel1:hover {
	border-left: 1px solid #ccc;
	border-right: 1px solid #bbb;
	box-shadow: -1px 1px 1px rgba(0,0,0,0.07) inset;
}
/* 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 {
	background: none;
	border: none;
	box-shadow: none;
	color: #4b863c;
}

.requiredfield {
	border-left: 1px solid #5aa049;
	border-right: 1px solid #2d5024;
}

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

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


/* Styles for the $TABS	*/
/* We can't control what jqueryui pollutes the DOM with, so deal with it */
/* Styles for the profile summary tabs, or any jquery ui tabs */
/* ---------------------------------------------------------- */

.ui-tabs .ui-state-hover {
	border-left: 1px solid #ccc;
	border-right: 1px solid #afafaf;
}

/* $PROFILE	*/
/* ------------------------------------------------------- */
.profile_pie {
	background: url(../images/_light/stats_pie_rtl.png);
}

/* $PERSONAL	*/
/* ------------------------------------------------------- */

#personal_messages .capacity_bar span {
	border-right: 0;
	border-left: 1px solid #adadad;
}

/* $CALENDAR	*/
/* ------------------------------------------------------- */
/* Used to indicate the current day. */
.weekdays {
	border-right: 0;
	border-left: 2px solid #ddd;
}

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

/* Styles for the tooltips. */
.tooltip {
	box-shadow: -3px 3px 3px rgba(0,0,0,0.3);
}

/*	$SEARCH		*/
/* ------------------------------------------------------- */

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

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

.errorbox {
	background: #fee url(../../images/profile/warning_mute.png) 98% 50% no-repeat;
}

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

/* $STATISTICS	*/
/* ------------------------------------------------------- */
.stats.floatleft {
	border-right: 0;
	border-left: 1px solid #ccc;
}

/*	$MEDIA		*/

/* This one does 800 screens at default font size. */
@media screen and (max-width: 50em) {
	#menu_sidebar {
		box-shadow: -3px 3px 3px rgba(0,0,0,0.3);
	}
	#main_menu .linklevel1 {
		margin-right: 0;
		margin-left: 2px;
	}
}
/* This one does up to 540 screens. */
@media screen and (max-width: 33.750em) {
	#gobottom {
		border-radius: 0;
	}
	#gotop {
		border-radius: 8px 0 0 0;
	}
	.board_latest {
		border-left: auto;
		border-right: 0;
	}
	.topic_listing>li {
		box-shadow: -3px 3px 6px #e5e5e5;
	}
	.forumposts .windowbg, .forumposts .windowbg2 {
		box-shadow: -3px 3px 6px #e5e5e5;
	}
	.linktree:after {
		content: "";
	}
}