// Stylesheet Guidence Notes
// Table of content represents a guide to sections of the sheet.
// Note that not all sections may be described in the body of the
// rulesets only those that require styles for a given theme.
// Sub sections might not exist but can be added as required
// as per BP Lists - 'activity' section.

// We follow the dictats of the parent theme in respect of media queries,
// font sizing etc. Media queries are used in a modular sense (OOCSS)
// rather than described as blocks to the end of the sheet, this aids ease
// of managing media queries, scalability & flexibility.

// 2017 Media Queries / Breakpoints.
$small-up-2017:      "min-width: 30em";
$med-small-up-2017:  "min-width: 48em";
$medium-up-2017:     "min-width: 55em";
$large-up-2017:      "min-width: 67em";
$x-large-up-2017:    "min-width: 79em";


// In addition BP will use the em breakpoints as  referenced below to provide
// a series of finer breakpoints for max widths, to allow fine adjustments;
// For main structural elements we use the themes values, only using bp
// breakpoints to manage granular elements in loops etc.

$x-small-only-bp: "max-width: 22em"; // for xtra small mobile only
$small-only-bp:   "max-width: 38.75em"; //  small only
$small-up-bp:     "min-width: 38.75em"; //  small only
$med-only-bp:     "max-width: 46.25em"; // med small only

// Mixins and Variables

// simplify remembering/writing media queries
// written as:
// @include medium-up {
//  body {property: value;}
// }
//

@mixin x-small-only {

	@media screen and ($x-small-only-bp) {

		@content;
	}
}

@mixin small-only {

	@media screen and ($small-only-bp) {

		@content;
	}
}

@mixin medium-only-bp {

	@media screen and ($med-only-bp) {

		@content;
	}
}

@mixin small-up-bp {

	@media screen and ($small-up-bp) {

		@content;
	}
}

@mixin small-up {

	@media screen and ($small-up-2017) {

		@content;
	}
}

@mixin med-small-up {

	@media screen and ($med-small-up-2017) {

		@content;
	}
}

@mixin medium-up {

	@media screen and ($medium-up-2017) {

		@content;
	}
}

@mixin large-up {

	@media screen and ($large-up-2017) {

		@content;
	}
}

@mixin x-large-up {

	@media screen and ($x-large-up-2017) {

		@content;
	}
}

// Common spacing values
$spacing-val-lg: 40px;
$spacing-val-md: 20px;
$spacing-val-sm: 10px;
$spacing-val-xs: 5px;

// A simple mixin to handle font-sizing
// 2017 uses a basic pixel font size approach, we'll stick with rem/px
@mixin font-size($font-size: 16) {
	$rem-font-value: ($font-size / 16);
	font-size: ($font-size * 1px);
	font-size: $rem-font-value + rem;
}

// Border border-radius mixins
@mixin border-radius($radius) {
	-webkit-border-radius: $radius;
	-moz-border-radius: $radius;
	-ms-border-radius: $radius;
	border-radius: $radius;
	background-clip: padding-box;
}

@mixin border-top-radius($radius) {
	-webkit-border-top-right-radius: $radius;
	border-top-right-radius: $radius;
	-webkit-border-top-left-radius: $radius;
	border-top-left-radius: $radius;
	background-clip: padding-box;
}

@mixin border-right-radius($radius) {
	-webkit-border-bottom-right-radius: $radius;
	border-bottom-right-radius: $radius;
	-webkit-border-top-right-radius: $radius;
	border-top-right-radius: $radius;
	background-clip: padding-box;
}

@mixin border-bottom-radius($radius) {
	-webkit-border-bottom-right-radius: $radius;
	border-bottom-right-radius: $radius;
	-webkit-border-bottom-left-radius: $radius;
	border-bottom-left-radius: $radius;
	background-clip: padding-box;
}

@mixin border-left-radius($radius) {
	-webkit-border-bottom-left-radius: $radius;
	border-bottom-left-radius: $radius;
	-webkit-border-top-left-radius: $radius;
	border-top-left-radius: $radius;
	background-clip: padding-box;
}

@mixin border-radius-none() {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-ms-border-radius: 0;
	border-radius: 0;
}

// Box sizing
@mixin box-model($box-model) {
	-webkit-box-sizing: $box-model;
	-moz-box-sizing: $box-model;
	box-sizing: $box-model;
}

// Calc
@mixin calc($property, $expression) {
	#{$property}: -webkit-calc(#{$expression});
	#{$property}: -moz-calc(#{$expression});
	#{$property}: calc(#{$expression});
}

// BP message boxes
@mixin message-box($background, $text-color: null) {

	@if $text-color {
		// if a param was passed through
		$text-color: $text-color;
	} @else {
		$text-color: darken($background, 50%);
	}

	background: lighten($background, 10%);
	border: 1px solid darken($background, 10%);
	color: $text-color;
}

// 2017 font family
@mixin default-font-sans() {
	font-family: "Libre Franklin", "Helvetica Neue", helvetica, arial, sans-serif;
}

// Variables: color definitions

$dark-grey:     #555;
$medium-grey:   #878787;
$light-grey:    #dcdcdc;
$x-light-grey:  #f7f7f7;
$white:         #fff;

$body-text:          #333;
$bp-light-text:      $medium-grey;
$bp-xlight-text:     #eee;
$content-background: #fff;
$off-white:          #fafafa;
$cream-background:   #f7f5e7;
$light-background:   $x-light-grey;
$medium-background:  $medium-grey;
$dark-background:    $dark-grey;
$border-color:       #bebebe;
$border-light:       #eaeaea; // BP dividers
$border-med:         #ddd;
$background-hover:   #db572f; // 2017 link background hover
$bp-button-hover:    #ededed; // this is the default BP button hover background
$notice-error:       #c85a6e;
$notice-warning:     #d05656;
$notice-info:        #7dd4ff;
$notice-update:      #ced98c;
$stripe-odd:         #ebf0ff;
$stripe-even:        #dbe5ff;
$unread:             $x-light-grey;
$link-action:        #c82b2b;

/*--------------------------------------------------------------

This is the BuddyPress companion stylesheet for
the WordPress twentyseventeen theme.

@version 3.2.0

This sheet supports the primary BuddyPress styles in buddypress.css

If you are running as a child theme of twentyseventeen this stylesheet will be
loaded by default. If you want to modify the styles the normal BP Theme Compat
hierarchy works and you can copy the file to buddypress/css/ or community/css/
in your child themes root & either start over or modify the rulesets.

If you do not require the styles you can dequeue them from the themes
functions file.

Please see this codex article for more information:
http://codex.buddypress.org/themes/buddypress-companion-stylesheets/

----------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 Theme Structural Elements & overrides
2.0 - Navigation - General
	2.1 - Navs - Object Nav / Sub Nav (item-list-tabs)
	2.2 - Pagination
3.0 - Images
4.0 - BP Lists / Loops Generic
	4.1 - Activity Loop
		4.1.1 Whats New Activity
		4.1.2 - Activity Listing
		4.1.3 - Activity Comments
	4.2 - Members Loop
	4.3 - Groups Loop
	4.4 - Blogs Loop
5.0 - Directories - Members, Groups, Blogs, Register, activation
6.0 - Single Item screens: User Account & Single Group Screens
	6.1 - Item Headers: Global
		6.1.1 - item-header: Groups
		6.1.2 - item-header: User Accounts
	6.2 - Item Body: Global
		6.2.1 - item-body: Groups
			6.2.1.1 - Management settings screens
			6.2.1.2 - Group members list
		6.2.2 - item-body: User Accounts
			6.2.2.1 - classes, pag, filters
			6.2.2.2 - Extended Profiles
			6.2.2.3 - Groups
			6.2.2.4 - friends
			6.2.2.5 - Private Messaging Threads
			6.2.2.6 - Settings
7.0 - Forms  -  General
8.0 - Tables -  General
9.0 - Error / Success Messages
10.0 - Ajax Loading, Widgets, General classes
--------------------------------------------------------------*/

/**
*-------------------------------------------------------------------------------
* @section 1.0 - Theme - Structural Elements. overrides, Globals
*-------------------------------------------------------------------------------
*/

.buddypress {
	// Remove any empty clearing elements, CSS provides clearing.
	div.clear {
		display: none;
	}

	// deal with global clearing property set on heading elements
	// - for the moment we'll just specify this on  lists ul only

	ul.item-list {

		h1,
		h2,
		h3,
		h4,
		h5,
		h6 {
			clear: none;
			padding: 0;
		}
	}

	// Ensure no text decoration or box shadow causing underlined effect.
	#page a {
		box-shadow: none;
		text-decoration: none !important;
	}

	.entry-title {
		text-align: center;

		@include medium-up {
			text-align: left;
		}
	}

} // close .buddypress

// reduce the overlarge entry title margins
@include medium-up {

	.buddypress.bp-user.page,
	.buddypress.single-item.groups,
	.buddypress.groups.group-create,
	.directory.buddypress.page-one-column {

		.site-content {
			padding-top: $spacing-val-lg;
		}

		.entry-header {
			margin: $spacing-val-sm 0;
		}
	}
}

// Open up the content width areas for BP screens to allow max widths.
// This takes into account the ability to columnize pages in 2017.
// Only effect changes based on breakpoints.

@include med-small-up {

	body.buddypress.page.page-two-column {

		#primary {

			.entry-header {
				width: 30%;
			}

			.entry-content {
				width: 68%;
			}
		}
	}

	body.buddypress:not(.has-sidebar),
	body.buddypress:not(.page-two-column) {

		#primary.content-area {
			max-width: 100%;
			width: 100%;

			.entry-content,
			.content-bottom-widgets {
				margin-left: 0;
				margin-right: 0;
			}
		}

		.sidebar {
			float: left;
			margin-left: 75%;
			padding: 0;
			width: 25%;
		}

	} // body.buddypress
}

// 2017 allows for selecting two distinct color schemes.
// Our companion styles respect themes colors & inherit or avoid
// setting backgrounds/colors so selecting the dark scheme generally
// allows the theme to reset the BP text/headings etc to white
// In places we do set backgrounds, Navs, search forms etc these
// are added here under the themes body class to enable changing

// Some element colors are inherited from BP original sheet so need to
// be reset under the dark scheme, where set in this sheet we simply state them
// only for the light scheme, additionally elements such as BP form styles
// need styles removing & are handled later in 'Forms' section
body.colors-dark {

	#buddypress {

		//tabs border bottom color needs to match dark background
		#group-create-tabs.item-list-tabs {

			li.selected,
			li.current {
				border-bottom-color: #222;

				a {
					color: inherit;
				}
			}
		}

		div.item-list-tabs {

			ul {

				li.selected,
				li.current {

					a {
						background: none;
						color: inherit;
					}
				}
			}
		}

		#object-nav {

			li:not(.current):focus,
			li:not(.current):hover {

				a {
					color: #555;
				}
			}
		}

		// With the dark scheme the subnav links lose definition as nav menu links,
		// add a border top to clarify the li.last element seperated from links.
		#subnav.item-list-tabs {

			ul {
				border-bottom: 1px solid rgba($border-light, 0.9);
				margin-bottom: $spacing-val-md;

				li.last {
					border-top: 1px solid rgba($border-light, 0.9);
				}
			}

			select {

				// we're forced to set a back color as Chrome won't
				// accept inherit/none whereas FF does.
				option {
					background-color: #333;
				}
			}
		}

		// lists text: descr, meta, etc
		.item-list {

			div.meta {
				color: #ddd;
			}

			div.item-desc,
			.activity-header p,
			.activity-comments ul,
			.acomment-meta {
				color: $bp-xlight-text;
			}

			.activity-meta,
			.action {

				a {
					background: $off-white;

					&:focus,
					&:hover {
						background: $white;
					}
				}
			}
		}

		#latest-update {
			color: $bp-xlight-text;
		}

		div.pagination * {
			color: #ddd;
		}

		#item-header {

			.user-nicename {
				color: $bp-xlight-text;
			}
		}

		#item-body {

			table {

				thead {

					tr,
					th {
						background: none;
						color: $bp-xlight-text;
					}
				}

				tr.alt {

					td {
						background: none;
						color: $bp-xlight-text;
					}
				}

				.field-visibility-settings,
				.field-visibility-settings-notoggle {
					color: #eee;
				}

			}

			fieldset {
				background: none;
			}

			.checkbox,
			.radio {

				label {
					color: #eee;
				}
			}

			div#invite-list {
				background: none;
			}
		}

	} // close #buddypress
}


body.colors-dark.group-members {

	#buddypress {

		#subnav {

			li {
				background: none;
			}

			.groups-members-search {

				form {
					margin-bottom: $spacing-val-md;
					margin-top: 0;
				}
			}
		}
	}
}

// remove borders for dir component screens.
.directory.colors-dark {

	#buddypress {

		#subnav.item-list-tabs {

			ul {
				border-bottom: 0;
				border-top: 0;

				li.last.filter {
					border-top: 0;
				}
			}
		}

		div.activity {

			ul.item-list {
				border-top: 0;
			}
		}
	}
}

body.colors-light {

	#buddypress {

		div.item-list-tabs {

			ul {
				background-color: $off-white;
			}
		}

		div#subnav.item-list-tabs {

			ul {
				background-color: $light-background;

				li.last {
					background: $content-background;
				}
			}
		}

		.item-list {

			.activity-header {

				p {
					background-color: $light-background;
					color: $bp-light-text;
				}
			}

			.activity-comments {

				.acomment-meta {
					color: #737373;
				}
			}
		}

		#item-body {

			.profile {

				h2 {
					background: $medium-grey;
					color: #fff;
				}
			}
		}

		table {

			tr.alt {

				td {
					background: #f5f5f5;
					color: $body-text;
				}
			}
		}

		div#invite-list {
			background: $off-white;
		}
	} // close #buddypress
}

/**
*-------------------------------------------------------------------------------
* @section 2.0 - Navigation - General
*-------------------------------------------------------------------------------
*/

/**
*----------------------------------------------------------
* @section 2.1 - Navs Object Nav / Sub Nav (item-list-tabs)
*
* The main navigational elements for all BP screens
*----------------------------------------------------------
*/

// We have a need to override BP specifity
// so some rulesets sets will appear over weighted in selectors

#buddypress {

	// active/current states all navs
	div.item-list-tabs {

		ul {

			li.selected {

				a {
					background: inherit;
					opacity: 1;
				}
			}
		}
	}

	// global nav styles
	div.item-list-tabs {

		ul {
			border-bottom: 1px solid rgba($border-light, 0.9);
			overflow: hidden;
			padding: 0;

			li {

				a {

					span {
						border-radius: 25%;
					}
				}
			}
		}
	} // close item-list-tabs

} // close #buddypress


/*__ Horizontal menus __*/
#buddypress {

	#object-nav {

		ul {
			overflow: hidden;

			li {
				float: none;
			}

			@include small-only {

				li:not(:last-child) {
					border-bottom: 1px solid $border-light;
				}
			}

			li:not(.selected) {

				@include small-only {

					&:focus,
					&:hover {
						background: darken($cream-background, 2%);
					}
				}
			}

			@include small-up-bp {

				li {
					float: left;
				}
			}
		}
	}

	div#subnav.item-list-tabs {
		margin-top: 0;

		ul {
			border-bottom: 0;
			margin-top: $spacing-val-xs;
			padding: 0;

			li.last {
				margin-top: 0;
				padding: $spacing-val-xs $spacing-val-xs $spacing-val-xs 0;
				width: 100%;

				select,
				select:focus {
					background: transparent;
					border: 0;
					outline: 0;
				}

				label {
					display: inline;
				}

				select,
				label,
				option {

					@include font-size(14);
				}

				select {
					font-style: italic;
					height: auto;
				}
			}

			@include small-up-bp {

				li.last {
					text-align: right;
				}
			}
		} // close ul
	} // close #subnav

} // close #buddypress


/*__ Vertical menu User Account / Group single screens __*/

// This block contains rules to re-factor the item-body structural element
// to sit alongside the vert menu
// 2017 right sidebar is displayed if the widget sidebar has widgets;
// we'll only display object nav as a vert menu if not .two-column-page.

@include medium-up {

	body:not(.page-two-column) {

		#buddypress {

			#object-nav {
				border-right: 1px solid $border-med;
				float: left;
				margin-right: -1px;
				width: 200px;

				ul {
					background: none;
					border-bottom: 0;
					padding: 0;

					li {
						float: none;
						overflow: hidden;

						span {
							background: $content-background;
							border-radius: 10%;
							float: right;
							margin-right: 2px;
						}
					}
				}
			}

			#item-body {
				border-left: 1px solid $border-med;
				overflow: hidden;
				padding: 0 0 0 $spacing-val-md;
				width: auto;

				#subnav {
					margin: 0 0 0 (-$spacing-val-md);

					ul {
						margin-top: 0;
					}
				}
			}

		} // close  #buddypress
	} // close body:not(.sidebar)
} // close @media


// Tabbed Nav styling
// Primarilly used for group create screens & ? directory nav.

@include med-small-up {

	#buddypress {

		#group-create-tabs.item-list-tabs {

			ul:before,
			ul:after {
				content: " ";
				display: table;
			}

			ul:after {
				clear: both;
			}

			ul {
				background: none;
				border: 0;
				border-bottom: 1px solid $border-med;
				overflow: visible;
				padding-bottom: 0;

				li {
					float: left;
					width: auto;
				}

				li.selected,
				li.current {
					border: 1px solid $border-med;
					border-bottom-color: $content-background;

					@include border-top-radius(4px);
					margin-bottom: -1px;

					a {
						background: none;
						color: $body-text;
						outline: none;
					}
				}
			}

		} // close .item-list-tabs

		#subnav {

			ul {
				border-bottom: 0;
			}

		} // close #subnav
	} // close #buddypress

} // close @media

/**
*----------------------------------------------------------
* @section 2.2 - Pagination
*----------------------------------------------------------
*/

#buddypress {

	div.pagination {
		box-shadow: none;
		font-weight: 400;
		min-height: 0;

		&:before,
		&:after {
			height: 0;
			width: 0;
		}

		.pag-count {
			margin-left: 0;
		}

		.pagination-links {
			margin-right: 0;

			span,
			a {
				height: auto;
				line-height: 1;
				padding: 5px;
			}

			.prev,
			.next {
				background-color: transparent;
				color: inherit;
				overflow: visible;
				width: auto;

				&:before {
					display: none;
				}
			}

			.prev {
				left: auto;
				position: static;
			}

			.next {
				position: static;
				right: auto;
			}
		} // close .pagination-links
	} // close .pagination
} // close #buddypress

/**
*-------------------------------------------------------------------------------
* @section 4.0 - BP Lists / Loops Generic
*-------------------------------------------------------------------------------
*/

// Adjusts Meta items and various elements to match 2017 font-family
#buddypress {

	.item-list {

		.activity-header,
		.activity-meta {

			@include default-font-sans();
		}
	}
}

#buddypress {

	.activity-meta {

		.button {

			&:focus,
			&:hover {
				background: inherit;
				color: #000;
			}
		}
	}

	.action {

		.generic-button {

			a {

				&:focus,
				&:hover {
					background: inherit;
					color: #000;
				}
			}
		}
	}
} // close #buddypress

// Trying to position the action div absolute has bad consequences where
// aditional items are displayed, floating is an alternative that
// allows natural flow expansion.
// This block:
// * Manages li items, Stacks them small screen, floated left at wider screens.
// * Adjusts display of action buttons at small screen mobile up.
// Adjusts Meta items to match 2017 font-family

#buddypress {

	ul.item-list {

		li {
			overflow: hidden !important;

			// Undo BP floats to center avatars initially mobile up
			.item-avatar {
				margin-bottom: $spacing-val-sm;

				@include small-up-bp {
					margin-bottom: 0;
				}

				text-align: center;

				a {
					border-bottom: 0;
				}

				img.avatar {
					display: inline-block;
					float: none;
					margin-bottom: $spacing-val-sm;

					// Quite early on we need to move avatars to the left(right)
					@include small-up {
						display: block;
						float: left;
					}
				}
			}

			.item {
				overflow: hidden;

				@include med-small-up {
					margin-left: 15%;
				}

				span.activity {
					font-style: italic;
				}

				.item-desc {
					margin-left: 0;
					width: 94%;
				}

				.item-title {

					@include font-size(18);
					line-height: 1.2;
					text-align: center;

					@include small-up {
						text-align: left;
					}

					width: 100%;

					.update {
						display: block;

						@include font-size(13);

						@include medium-up {

							@include font-size(14);
						}

						padding: $spacing-val-sm 0;
						text-align: left;
					}
				}

			}

			@include medium-up {

				.item-avatar,
				.item,
				.action {
					float: left;
				}

				.item {
					left: 5%;
					margin-left: 0;
					position: relative;
					width: 55%;

					.item-title {

						@include font-size(22);
					}
				}

			}// close medium-up

			div.action {
				clear: left;
				float: none;
				margin-bottom: -$spacing-val-md;
				// remove BP margin left
				margin-left: 0;
				padding: $spacing-val-md 0 $spacing-val-xs;

				// push the actions to the right
				@include medium-up {
					clear: none;
					float: right;
					margin-bottom: 0;
					padding: 0;
				}

				position: relative;
				text-align: left;
				top: 0;

				div {
					display: inline-block;
					margin: $spacing-val-sm 0;
					width: 100%;

					a {
						display: block;
						width: 100%;
					}
					// Provisionally lets keep the 'action' div
					// position but inline-block the buttons

					@include small-up {
						// keep buttons to a row small tablet up
						margin: 0 $spacing-val-sm $spacing-val-sm 0;
						width: auto;
					} // close @media

					@include medium-up {
						// take buttons to block to stack them when floated right
						clear: right;
						float: right;
						margin: 0 0 $spacing-val-sm 0;
					} // close @media

				} // close div

				.meta {
					font-style: italic;
				}

			} // close .action

		} // close li
	} // close .item-list
} // close #buddypress

/**
*----------------------------------------------------------
* @section 4.1 - Activity
*----------------------------------------------------------
*/

/**
*-----------------------------------------------------
* @section 4.1.1 - Activity Whats New
*-----------------------------------------------------
*/

#buddypress {

	form#whats-new-form {

		// Line-height issue inherited from BP rules, override.
		p.activity-greeting {
			line-height: 1.4;
		}

		// corrective measure for clipped elements due to JS inline styling

		@include medium-only-bp {

			#whats-new-content {
				clear: left;
				margin: $spacing-val-sm 0 $spacing-val-md;
				padding: $spacing-val-sm 0 0;
			}
		}

		#whats-new-content.active {

			#whats-new-options[style] {

				#whats-new-post-in-box {
					border: 1px solid rgba($border-color, 0.5);
					float: left;
					line-height: 1.5;
					margin-top: 12px;
					padding-left: 0.2em;
					width: 100%;

					select {
						background: none;
						border: 0;
						float: right;
						margin: 0;
						min-height: 1.5em;
						padding-left: 0.4em;
					}
				}

				@include small-up {

					#whats-new-post-in-box {
						width: auto;
					}

					#whats-new-submit {
						float: right;
					}
				}

			} // close #whats-new-options
		} // close #whats-new-content.active

	} // close #whats-new-form

	// User account form requires matching bp default specificity
	#item-body {

		form#whats-new-form {
			margin: $spacing-val-lg 0;
		}
	}
} // close #buddypress

/**
*-----------------------------------------------------
* @section 4.1.2 - Activity Listing
*-----------------------------------------------------
*/

#buddypress {

	#activity-stream {

		// re-size activity avatars and stack small screen
		// refactor main elements positioning medium up.
		li {
			padding: 25px 0 15px;

			.activity-avatar {
				float: none;
				text-align: center;

				a {
					display: inline-block;

					img.avatar {
						display: inline;
						float: none;
						height: 60px;
						margin-bottom: $spacing-val-md;
						margin-left: 0;
						width: 60px;
					}
				}
			} // close .activity-avatar

			.activity-content {
				margin-left: 0;

				.activity-header {

					@include font-size(14);

					a {
						color: #0075c4;
					}
				}
			}

			@include med-small-up {

				.activity-avatar {
					float: left;
					margin-right: $spacing-val-sm;
					text-align: left;

					a {
						border-bottom: 0;
					}
				}

				.activity-content {
					margin: 0;
					overflow: hidden;

					.activity-header {

						@include font-size(16);
					}
				}

			} // close @media

		} // close li

		li.mini {

			.activity-avatar {

				a {

					img.avatar {
						height: 30px;
						margin-left: 15px;
						width: 30px;
					}
				}
			}

			.activity-content {

				.activity-header {

					@include font-size(14);
				}
			}
		}

		.activity-content {
			margin-top: -12px;

			.activity-header {
				margin-right: 0;

				p {
					border: 1px solid rgba($border-light, 0.6);
					margin-top: 0;
					padding: 0 0.2em;
				}

				img.avatar {
					box-shadow: none;
					display: inline-block;
					margin: 0 5px !important; // have to match to BP
					vertical-align: middle;
				}
			} // close .activity-header

			.activity-meta {

				a {
					display: block;
					margin-bottom: $spacing-val-xs;

					@include small-up {
						display: inline-block;
						margin-bottom: 0;
						width: auto;
					}
				}
			}

		} // close .activity-content

		.load-more {
			background: $light-background;
			border: 1px solid transparent;
			padding: $spacing-val-sm;

			&:focus,
			&:hover {
				background: darken($light-background, 1%);
				border: 1px solid rgba(#9fd1e2, 0.3);

				a {
					font-style: italic;
				}
			}

			a {
				display: block;
			}
		}

	} // close #activity-stream
} // close #buddypress

/* Single activity view  - activity permalink */

.activity-permalink {

	#buddypress {

		#activity-stream {

			li.activity-item {
				padding: $spacing-val-md;
			}

			li.mini {

				.activity-header {

					@include font-size(16);

					@include med-small-up {

						@include font-size(20);
					}

					margin-bottom: $spacing-val-lg;

					p {
						padding: $spacing-val-md;
					}
				}
			}
		}
	}
}

/**
*-----------------------------------------------------
* @section 4.1.3 - Activity Comments
*-----------------------------------------------------
*/
#buddypress {

	#activity-stream {

		.activity-comments {
			border-left: 1px solid $border-light;
			margin: $spacing-val-md 0 $spacing-val-md;

			@include small-up {
				margin-left: $spacing-val-md;
			}

			ul {
				margin: 15px 0 0 2px;

				li {
					border-top: 1px solid $border-color;
				}

				a {
					color: #0077c7;
				}
			}

			.acomment-meta {
				border-bottom: 1px solid $border-light;
			}

			.ac-form {

				input[type="submit"],
				.ac-reply-cancel {
					color: rgba($body-text, 0.8);
					display: inline-block;
					font-family: inherit;

					@include font-size(12);
					font-weight: 400;
					line-height: 1.2;
					padding: 4px 10px;
					text-transform: lowercase;
					width: 100px;
				}

				.ac-reply-cancel {
					border: 1px solid rgba($border-color, 0.7);
					text-align: center;

					&:focus,
					&:hover {
						background: $bp-button-hover;
					}
				}

			} // close .ac-form

		} // close .activity-comments
	} // close .activity

} // close #buddypress

/**
*----------------------------------------------------------
* @section 4.2 - Members Loop
*----------------------------------------------------------
*/

#buddypress {

	#members-list {

		@include medium-up {

			li {

				.item-avatar,
				.item {
					float: left;
				}

				.action {
					float: right;
				}
			}

			li.is-current-user {

				.item {
					float: none;
					left: 0;
					padding-left: 5%;
					width: auto;
				}
			}
		}

	} // close #members-list
} //close #BuddyPress

/**
*-------------------------------------------------------------------------------
* @section 5.0 - Directories
*-------------------------------------------------------------------------------
*/

/**
*-----------------------------------------------------------
* @subsection Registration
*-----------------------------------------------------------
*/

#buddypress {

	#signup_form.standard-form {

		#profile-details-section,
		#basic-details-section,
		#blog-details-section {
			float: none;
			width: 100%;

			@include small-up-bp {
				width: 48%;
			}
		}

		@include small-up {

			#profile-details-section {
				float: right;
			}

			#basic-details-section {
				float: left;
			}
		}

	}
}

/**
*-------------------------------------------------------------------------------
* @section 6.0 - Single Item screens: User Account & Single Group Screens
*-------------------------------------------------------------------------------
*/


/**
*-----------------------------------------------------------
* @subsection 6.1 - Item Header Global
*-----------------------------------------------------------
*/
@include med-small-up {


	.bp-user.page-two-column {

		#buddypress {

			#cover-image-container {

				#item-header-cover-image {

					#item-header-content {
						margin-left: 140px;
						margin-top: -100px;
					}
				}
			}
		}
	}

	.single-item.groups.page-two-column {

		#buddypress {

			#cover-image-container {

				#item-header-cover-image {

					#item-header-content {
						margin-left: 10px;
					}
				}
			}
		}
	}

} // close media

.bp-user,
.single-item.groups {

	#buddypress {

		// we need to remove the cover image dec styles
		// & reset them for med up  only.
		#item-header-cover-image {

			.user-nicename {
				color: $body-text;
				text-shadow: none;
			}
		}

		@include med-small-up {

			#item-header-cover-image {

				.user-nicename {
					color: $white;
					text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
				}
			}
		}

		#item-header-content {

			#item-meta {

				@include font-size(14);
				text-align: left;

				p {
					margin-bottom: 0.5em;
				}
			}
		}
	}

	@include medium-only-bp {

		main {

			header.entry-header {
				padding-bottom: 1rem;
			}
		}
	}

	@include small-only {

		h1,
		#item-header-content {
			text-align: center;
		}
	}

	#buddypress {

		@include medium-only-bp {

			#item-header {

				.generic-button {
					float: none;
					margin: 1.5em 0 0;
				}
			}
		}

		@include small-only {

			h1 {
				margin-bottom: 0;
			}

			#item-header-avatar {

				img.avatar {
					margin-right: 0;
				}
			}

			#item-header-content {
				width: 100%;
			}
		}
	}
}

/**
*-----------------------------------------------------
* @subsection 6.1.1 - item-header Groups
*
* Group Specific Item Header
*-----------------------------------------------------
*/

.single-item.groups {

	#buddypress {

		@include medium-only-bp {

			#item-header {

				#item-meta {
					margin-bottom: $spacing-val-md;
				}
			}
		}

		// Move visual flow of avatar & item-actions at narrow width,
		// avatar first after group title
		@include small-only {

			div#item-header {
				display: flex;
				flex-direction: column;

				#item-header-avatar {
					order: 1;
					text-align: center;

					a {

						img {
							display: inline-block;
							float: none;
						}
					}
				}

				#item-header-content {
					order: 2;
				}

				#item-actions {
					order: 3;

					h2 {
						border-bottom: 1px solid $border-light;
						text-align: center;
					}
				}
			}
		} // close @media

		div#item-header {
			padding-bottom: $spacing-val-lg;

			div#item-actions {
				margin: 0;
				width: 100%;

				@include small-up-bp {
					border-left: 1px solid $border-light;
					clear: none;
					float: right;
					padding-left: 0.2em;
					width: 30%;
				} // close @media

				@include med-small-up {
					width: 40%;
				}

				ul {
					margin-top: 0;
					padding-left: 0;
				}

				h2 {

					@include font-size(14);

					@include med-small-up {

						@include font-size(16);
					}

					padding: 0.2em;
				}
			} // close item-actions

			@include med-small-up {

				#item-header-avatar,
				#item-header-content {
					float: left;
				}

				#item-header-avatar {
					width: 21%;
				}

				#item-header-content {
					margin-left: 4%;
					width: 40%;
				}

				div#item-actions {
					float: right;
					width: 28%;
				}

			} // close @media

		} // close #item-header
	} // close #buddypress
} // close .groups

/**
*-----------------------------------------------------
* @subsection 6.1.2 - Item Header User Accounts
*
* User Accounts Specific Item Header
*-----------------------------------------------------
*/

.bp-user {

	#buddypress {

		#item-header {
			padding: $spacing-val-md 0;

			#item-header-avatar {
				text-align: center;
				width: 100%;

				img.avatar,
				a {
					display: inline-block;
					float: none;
				}
			}

			@include med-small-up {

				#item-header-avatar {
					float: left;
					width: 20%;

					a {
						float: left;
					}
				}

				#item-header-content {
					float: right;
					margin-right: 5%;
					width: 69%;
				}

			} // close @media

		} // close #item-header

	} // close #buddypress
} // close .bp-user

/**
*-----------------------------------------------------------
* @subsection 6.2 - Item Body: Global
*-----------------------------------------------------------
*/


/**
*----------------------------------------------------
* @subsection 6.2.1 - Item Body Groups
*
* Groups specific item body rules -  screens
*----------------------------------------------------
*/

.groups.single-item.members {

	#buddypress {

		#subnav.item-list-tabs {

			ul {
				background: none;
				border-top: 0;
			}

		}
	}

}

/**
*-----------------------------------------
* @subsection 6.2.1.1 - Group Management
*-----------------------------------------
*/

// headings settings screens & general global settings styles
.groups {

	#group-settings-form {

		h3 {
			background: $dark-background;
			color: $content-background;
			padding: 0.2em;
		}
	}
}

.groups.edit-details {

	#group-settings-form {

		label {
			margin-bottom: 0;
			padding: 0.2em;
			width: 80%;
		}

		textarea + p label {
			background: none;
			color: inherit;

			@include font-size(14);
			width: auto;
		}

		textarea {
			height: auto;
			min-height: 100px;
			overflow: auto;
		}
	}
} // close .groups.edit-details

.groups.group-settings {

	#group-settings-form {

		div.radio label {
			border: 1px solid $border-light;
			padding: 0.2em;

			ul {
				color: rgba($body-text, 0.6);

				@include font-size(14);
			}
		}

	}
} // close .groups.group-settings

.groups.group-avatar {

	form > p {
		margin-top: $spacing-val-md;
	}

}

.groups.manage-members {

	#group-settings-form {

		.item-list {

			li {
				border-bottom: 1px solid $border-light;

				img,
				h5 {
					float: left;

					> a {
						border-bottom: 0;
					}
				}

				span.small {
					clear: left;
					display: block;
					float: none;
					margin-top: $spacing-val-sm;

					a {
						display: inline-block;
						margin: $spacing-val-xs 0;
						width: 100%;

						@media screen and (min-width: 38.75em) {
							width: auto;
						}
					}
				}

				h5 {
					margin: 0;
				}

			}
		}
	}
} // close .groups.manage-members

/**
*-----------------------------------------
* @subsection 6.2.1.2 - Group members
*-----------------------------------------
*/

// Massage the members search for groups nav specifically.
.groups.group-members {

	#subnav {

		li {

			@include small-only {
				background: $content-background;
				padding: $spacing-val-md 0;
			}

			width: 100%;

			#search-members-form {
				float: right;

				@include small-only {
					margin: 0;
					width: 100%;

					label {

						input[type="text"] {
							width: 100%;
						}
					}
				}

				margin: $spacing-val-xs 0 0;
			}
		}
	}
}

/**
*-----------------------------------------------------
* @subsection 6.2.2 - Item Body User Accounts
*
* User Account specific item body rules
*-----------------------------------------------------
*/

.bp-user {

	.entry-title {
		margin-bottom: 0.5em;
	}
}

/**
*--------------------------------------------
* @subsection 6.2.2.1 - classes, pag, filters
*--------------------------------------------
*/
.bp-user {

	#buddypress {

		table {

			th {

				@include font-size(14);
			}

			td {

				@include font-size(12);
			}

			a {
				color: #0074c2;
			}

			@include medium-up {

				th {

					@include font-size(16);
				}

				td {

					@include font-size(14);
				}
			}

			@include large-up {

				th {

					@include font-size(18);
				}

				td {

					@include font-size(16);
				}
			}
		}

		.pag-count {
			font-style: italic;
		}

		.notifications-options-nav,
		.messages-options-nav {

			float: left;
			width: 100%;

			@include small-up-bp {
				width: 300px;
			}

			select {
				height: auto;
			}

			select,
			input {

				@include font-size(14);
				outline: 0;
				padding: 0;
			}

			select {
				float: left;
				margin-right: 1%;
				width: 59%;
			}

			input {
				float: right;
				font-family: inherit;
				line-height: 20px;
				width: 40%;
			}

			input[disabled="disabled"]:focus,
			input[disabled="disabled"]:hover {
				background: none;
			}


		} // close .notifications-options-nav/.messages-options-nav

	} //close #buddypress
} // close .bp-user

/**
	*-------------------------------------------
	* @subsection 6.2.2.2 - Extended Profiles
	*-------------------------------------------
	*/

.bp-user {

	#buddypress {

		.profile {

			h2 {
				margin: $spacing-val-lg 0 $spacing-val-sm;
				padding: 0.1em 0 0.1em 0.4em;
			}

			table {
				margin-top: 0;
			}

			.profile-fields {

				tr.alt {

					td {
						color: $body-text;
					}
				}

				tr:last-child {
					border-bottom: 0;
				}
			}

			/* Edit profile */

			#profile-edit-form {

				.button-nav:before,
				.button-nav:after {
					content: " ";
					display: table;
				}

				.button-nav:after {
					clear: both;
				}

				ul.button-nav {
					border-bottom: 1px solid $border-light;
					margin-left: 0;

					li {
						float: left;
						margin-bottom: 0;

						&.current {
							border: 1px solid $border-light;
							border-bottom-color: #fff;
							margin-bottom: -1px;
						}
					} // li

					a {
						background: none;
						border: 0;

						@include font-size(18);
					}
				} //.button-nav

				.field-visibility-settings-toggle,
				.field-visibility-settings-notoggle,
				.field-visibility-settings {

					@include font-size(14);
					margin-top: $spacing-val-sm;
				}

				.field-visibility-settings-close,
				.visibility-toggle-link {
					background: $dark-background;

					@include border-radius(3px);
					color: #fff;
					padding: 0.2em 0.5em;
				}
			} // close profile form

			.bp-avatar {

				#bp-delete-avatar {

					a {
						font-size: inherit;
					}
				}
			}
		} // close .profile

	} // close #buddypress
} // close .bp-user

/**
	*-------------------------------------------
	* @subsection 6.2.2.3 - Groups
	*-------------------------------------------
	*/

.bp-user {

	#buddypress {

		#groups-list {

			li {

				.item {

					@media screen and (min-width: 77.5em) {
						left: 5%;
						width: 50%;
					}
				}
			}
		}

	} // close #buddypress
} // close .bp-user

/**
	*-------------------------------------------
	* @subsection 6.2.2.5 - Private Messaging
	*-------------------------------------------
	*/

.bp-user {

	#buddypress {

		#message-thread {
			//Single message view

			a {
				border-bottom: 0;
			}

			#message-subject {
				background: lighten($dark-background, 10%);
				color: $content-background;
				padding: 0.3em 0 0.3em 0.2em;
			}

			#message-recipients {
				font-style: italic;

				a.confirm {
					border: 1px solid $border-light;
					font-style: normal;
				}
			}

			.message-metadata {

				&:after {
					clear: both;
					content: "";
					display: table;
				}

				img.avatar {
					float: none;
				}

				@include med-small-up {

					img.avatar {
						float: left;
					}
				}

				.message-star-actions {
					float: right;
					margin-right: $spacing-val-xs;
					position: static;
				}
			} // close .message-meta

			.message-content {
				background: $light-background;
				border: 1px solid $border-light;
				margin: $spacing-val-sm 0 0 0;
				padding: 0.3em;
			}

			#send-reply {

				.message-content {
					background: $content-background;
					border: 0;
				}
			}

			.alt {
				background: $content-background;
			}
		} // close message-thread  Singular view!

		#message-threads {

			thead {

				tr {
					background: none;
					border-bottom: 1px solid $border-color;


					th {
						background: #555;
					}
				}
			}

			tr {
				border-bottom: 5px solid $medium-grey;

				td {
					display: inline-block;
					float: left;
				}

				td.thread-star,
				td.thread-options {
					border-bottom-color: $border-color;
					border-bottom-width: 1px;
					height: 2.4em;
					padding-bottom: 0.2em;
					padding-top: 0.2em;

					@media screen and (max-width: 46.25em) {
						padding-top: 0;
					}
				}

				td.bulk-select-check,
				td.thread-star,
				td.thread-from,
				td.thread-info,
				td.thread-options {
					border-top: 0;
				}

				td.thread-star {
					vertical-align: middle;

					.message-action-star {
						line-height: 1.2;
					}
				}

				td.bulk-select-check,
				td.thread-from {
					height: 3em;

					@include small-only {
						height: 5.2em;
					}
				}

				td.thread-from,
				td.thread-options {
					border-left: 0 !important;

					@include calc(width, "100% - 30px");
					margin-left: 0;
				}

				td.thread-info {
					padding-left: 41px;
					width: 100%;
				}

				td.thread-options {
					text-align: right;

					a {

						@include font-size(12);
						line-height: 2.2;
					}
				}

				span.from {
					display: none;
				}

				span.activity {
					display: block;
					float: right;
					line-height: 2;

					@include small-only {
						clear: both;

						@include font-size(11);
						width: 100%;
					}
				}
			}

			tr.unread {

				td {
					background: none;
					border-color: $border-color;
				}
			}

			th {
				display: none;
			}

			th.bulk-select-all {
				border-bottom: 0;
				display: inline-block;
				text-align: left;
			}

			th.bulk-select-all,
			td.bulk-select-check,
			td.thread-star {
				border-right: 0;
				width: 30px;
			}
		}

		.acfb-holder {
			list-style: none;

			li {
				margin-left: 0;
			}

			li.friend-tab {
				background: lighten($notice-info, 20%);
				border: inherit;
				margin-right: 0;
				padding: 0.5em;

				span.p {
					// the 'X' close
					padding-left: $spacing-val-sm;

					&:focus,
					&:hover {
						color: $link-action;
						cursor: pointer;
					}
				}

				a {
					border-bottom: 0;
					text-decoration: none;

					img {
						// this is the tiny user avatar
						display: inline;
						height: 20px;
						vertical-align: middle;
						width: 20px !important; // override inline style
					}
				}
			}
		}

		#message-threads.sitewide-notices {

			td {
				width: 100%;

				strong {
					background: lighten($dark-background, 10%);
					color: $content-background;
					display: block;
					margin-bottom: 0.4em;
					padding-left: 0.2em;
				}

				a {
					display: inline-block;
				}
			}

			td:first-child {
				display: none;
			}

			td:nth-child(2) {

				strong {
					margin: -8px -8px 8px;
				}
			}

			td:first-child + td + td {
				// notice date
				border-bottom: 0;

				span {
					line-height: 1;
				}
			}

			td:last-child {
				// notice actions
				border-bottom-color: darken($border-light, 20%);
				line-height: 1;
				text-align: right;

				a:last-child:after {
					content: attr(title);
					display: block;
					line-height: initial;
					text-indent: 0;
				}
			}
		}

	} // #buddypress

	// acfb auto complete name list sits in doc footer before body close
	.ac_results {
		background: #eee;
		padding-left: $spacing-val-sm;

		ul {
			margin: 0;
		}

		li {
			margin: $spacing-val-sm 0;

			&:focus,
			&:hover {
				cursor: pointer;
			}
		}
	}

} // close .bp-user

/**
	*------------------------------
	* @subsection 6.2.2.6 - Settings
	*------------------------------
	*/

.bp-user {

	#buddypress {

		#settings-form {
			// 'p' = email notification screen sub heading
			> p {

				@include font-size(20);
				margin: $spacing-val-md 0 $spacing-val-sm;
			}
		}

		table.notification-settings {

			td.yes,
			td.no {
				vertical-align: middle;
			}
		}

		// Profile table td widths
		table.profile-settings {
			width: 100%;

			th.field-group-name,
			td.field-name {
				width: 50%;
			}

			@include med-small-up {

				th.field-group-name,
				td.field-name {
					width: 70%;
				}
			}

			th.title,
			td.field-visibility {
				width: 30%;
			}

			td.field-visibility {

				select {
					width: 100%;
				}
			}
		}

	} // close #buddyPress

} // close .bp-user

/**
*-------------------------------------------------------------------------------
* @section 7.0 - Forms  - General
*-------------------------------------------------------------------------------
*/

// Attempt to reset form control widths
#main {

	#buddypress {

		.standard-form {

			li {
				float: none;
			}

			input[type="text"],
			input[type="email"],
			input[type="password"],
			textarea {
				width: 100%;
			}
		}
	}
}

#buddypress {

	// Match BP form elements to Themes(2017) styling where styles
	// are not inherited or being overriden.
	div.activity-comments {

		form {

			.ac-textarea {
				background: $light-background;
				border: 1px solid rgba($border-color, 0.5);

				textarea {
					background: none;
					border: 0;
				}
			}
		}
	}

	// 2017 sets large height on selects lets try to manage that
	select {
		height: auto;
	}

	.standard-form {

		// Keep BP form element borders to 1px rather than 2013 2px
		input[type="text"],
		input[type="email"],
		input[type="password"],
		button,
		select,
		textarea {
			border-color: rgba($border-color, 0.5);
			border-width: 1px;
		}

		select {
			color: #737373;
		}

	} // close .standard-form

	#signup_form.standard-form {

		div.submit {
			float: none;

			input {
				margin-right: 0;
			}
		}
	}

} // close #buddypress

#buddypress {

	div.dir-search,
	div.message-search,
	li.groups-members-search {
		float: none;
		margin: $spacing-val-sm 0;

		// Stylise the seach form elements, in part this deals with padding
		// issues on the submit & sizing issues between bp styles & 2017

		form { // *sigh* only to bludgeon over specified rules
			border: 1px solid rgba($border-color, 0.6);
			position: relative;

			@include border-radius(2px);
			overflow: hidden;

			label {
				float: left;
				margin: 0;
				width: 70%;
			}

			input[type="text"] {
				float: left;
				margin: 0;
				width: 100%;
			}

			input[type="text"],
			input[type="submit"] {
				border: 0;

				@include font-size(14);
				line-height: inherit;
			}

			input[type="text"] {
				border-right: 1px solid rgba($border-color, 0.6);
				font-weight: 400;
				padding: 0.2em 0 0.2em 0.2em;
			}

			input[type="submit"] {

				@include border-radius-none();
				float: right;
				font-weight: 400;
				padding: 0.2em 1em;
				text-align: center;
				text-transform: none;
				width: 30%;
			}
		} // close form

	} // close .dir-search, .message-search

	// Dirs & certain components hide search hides labels so can't width the
	// label element adjust so that the input takes reduced width.

	div.dir-search {
		margin-top: 0;
	}

	.dir-search #search-members-form,
	#search-groups-form,
	#search-message-form {

		input[type="text"] {
			float: left;
			margin: 0;
			width: 70%;
		}
	}

	// Shift the search parent to the right and allow to shrinkwrap

	@include small-up {

		div.dir-search,
		div.message-search,
		li.groups-members-search {
			float: right;
			margin-bottom: 5px !important;
		}

	} // close @media


	@include large-up {

		.dir-search,
		.message-search,
		li.groups-members-search {

			form {

				input[type="text"] {

					@include font-size(16) ;
				}

				input[type="submit"] {

					@include font-size(16) ;
				}
			}
		}
	}

} // close #buddypress

// Adjustments for form elements colors, backgrounds, borders under
// the dark scheme.
body.colors-dark {

	#page { // for weight

		#buddypress {

			.dir-search,
			.groups-members-search,
			.message-search {

				form {
					background: #333;
					border-color: #555;

					@include border-radius(2px);
					padding: 1px;
				}

				input[type="text"] {
					background: none;
				}

				input[type="submit"] {

					@include border-radius(2px);
				}
			}
		}

		.message-search {
			margin-top: 0;
		}
	}
}

/**
*-------------------------------------------------------------------------------
* @section 8.0 - Tables - General
*-------------------------------------------------------------------------------
*/

// Adjust table font sizes, default too large proportionally
// This approach will require refinement and perhaps re-location to
// a more general typography section to manage BP elements grouped under
// breakpoints. Provide top/bottom margins for tables, lacking in BP styles

#buddypress {

	table {

		@include font-size(14);
		margin: $spacing-val-md 0;

		tr th {
			background: $light-background;
			border-color: $border-light;
			color: $body-text;
		}

		// Reduce the themes inherited paragraph margins in tables
		p {
			margin-bottom: 0.5em;
		}
	}

	@include medium-up {

		table {

			@include font-size(16);
		}
	}
}

/*__ User Account tables __*/

#buddypress {

	// Manage some table cells widths that are disproportionate to their content
	.notifications,
	.messages-notices {

		th {
			width: 30%;

			&.bulk-select-all {
				text-align: center;
				width: 10%;
			}
		}

		.bulk-select-check,
		.thread-star {
			text-align: center;
		}

		.notification-actions,
		td.thread-options {
			text-align: center;

			a {
				display: inline-block;
				margin: 0;
				padding: 0;
			}
		}

		// Notices action buttons, this maybe better moved, temp for now to address
		// styling issues - this will need styling ideas
		td {

			.button {
				border: 0;
				display: block;
				padding: 0;
				text-align: center;
			}
		}

	} // .notifications, .message-notices

	.notifications { // table element

		.actions { // th element
			text-align: center;
		}
	}

} // #buddypress

/**
*-------------------------------------------------------------------------------
* @section 9.0 - Error / Success messages
*-------------------------------------------------------------------------------
*/

// message args ($variable-color, text-color)
// Leave text-color undefined to automagically set text color
// to background color darker by 50%

#buddypress {

	div#message {

		p {

			@include font-size(18);
			font-weight: 700;
		}

		&.info {

			p {

				@include message-box($notice-info);
			}
		}

		&.updated {

			p {

				@include message-box($notice-update);
			}
		}

	} // close #message

	.bp-avatar-status,
	.bp-cover-image-status {

		.warning {
			background: #7dd4ff;
			border: 1px solid #000;
			color: $body-text;

			@include font-size(16);
		}
	}

} // close  #buddypress

// Without direct classes on our mesages ( 'warning')
// we need to use the body classes
// @todo If this class .warning is included in main BP styles remove from here

.delete-group {

	#buddypress {

		div#message.info {

			p {

				@include message-box($notice-warning);
			}
		}
	}
}

/**
*-------------------------------------------------------------------------------
* @section 10.0 - Ajax Loading, Widgets, General classes
*-------------------------------------------------------------------------------
*/

#buddypress {

	.acfb-holder {

		li.friend-tab {
			background: $notice-info;
			border: inherit;
		}
	}
}