// 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 .

// Twentyfifteen Media Queries / Breakpoints
// @media screen and (max-width: 22em) // Additional for xtra small mobile only
// @media screen and (max-width: 30em) // Additional small only
// @media screen and (min-width: 38.75em)
// @media screen and (min-width: 46.25em)
// @media screen and (min-width: 55em)
// @media screen and (min-width: 59.6875em)
// @media screen and (min-width: 77.5em)
// @media screen and (min-width: 87.6875em)

// Mixins and Variables

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

// A simple mixin to handle font-sizing to match 2015 62.5% approach
@mixin font-size($font-size: 16) {
	$rem-font-value: ($font-size / 10);
	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;
}

// 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;
}

// 2015 font family
@mixin default-font-sans() {
	font-family: "Noto Sans", sans-serif;
}

@mixin default-font-serif() {
	font-family: "Noto Serif", serif;
}

// Variables: color definitions
$content-background: #fff;
$light-background:   #f7f7f7;
$medium-background:  #ccc;
$dark-background:    #555;
$border-color:       #999;    // border color is varied using rgba
$border-light:       #eaeaea; // BP dividers
$border-med:         #ddd;
$body-text:          #333;    // 2015 body text color
$bp-button-hover:    #ededed; // this is the default BP button hover background
$notice-error:       #c85a6e;
$notice-warning:     #d05656;
$notice-info:        #9fd1e2;
$notice-update:      #ced98c;
$stripe-odd:         #ebf0ff;
$stripe-even:        #dbe5ff;
$unread:             #dce5ff;
$link-action:        #c82b2b;

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

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

@version 3.0.0

This sheet supports the primary BuddyPress styles in buddypress.css

If you are running as a child theme of twentyfifteen 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, Forums
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.1.3 - Group Send Invites
		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
*-------------------------------------------------------------------------------
*/

// Twentyfifteen  adds a generic grouped ruleset of clear:both;
// for all heading h# elements this is problematic where floats are concerned
// We reset this here under our #buddypress namespace
#buddypress {

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

// As BP screens have specific content lets adjust the themes primary elements
// to maximise the screen real estate for BP pages.

.buddypress {

	div.clear {
		display: none;
	}

	main {
		padding-top: 4%;

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

		article {
			margin: 0 4%;
			padding-top: 8.3333%;

			@media screen and (min-width: 59.6875em) {
				margin: 0 0 0 1px;
			}

			@media screen and (min-width: 87.6875em) {
				margin: 0 4.3333% 0 8.3333%;
			}

			.entry-header,
			.entry-content {
				padding: 0 3rem 3rem;
			}

			#buddypress {
				margin-bottom: $spacing-val-lg;
			}
		} // .article
	} // .main

	.site-footer {
		margin: 0 4%;

		@media screen and (min-width: 59.6875em) {
			margin: 0 0 0 35.2941%;
			width: 61.8235%;
		}
	}
} // .buddypress (body class)

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

// Remove 2015 border bottom on BP links/spans

.buddypress #buddypress {

	.item-list-tabs,
	.activity-header,
	.activity-inner,
	.activity-comments,
	.item-title,
	.load-more,
	.field-visibility-settings-toggle,
	#latest-update,
	table,
	.avatar-nav-items {

		a {
			border-bottom: 0;
		}
	}

	.pagination-links {

		a,
		span {
			border-bottom: 0;
		}
	}
} // close .buddypress #buddypress

/**
*----------------------------------------------------------
* @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 are seemingly over weighted in selectors

#buddypress {

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

		ul {

			li.selected {

				a {
					background: $dark-background;
					color: #fff;
					opacity: 1;
				}
			}
		}
	}
	// Global Nav Styles
	div.item-list-tabs {

		ul {
			background-color: $light-background;
			border-bottom: 1px solid rgba($border-light, 0.9);
			border-top: 1px solid rgba($border-light, 0.9);
			overflow: hidden;
			padding: $spacing-val-xs 0;

			li {

				a {

					span {
						border-radius: 25%;
					}
				}
			}
		}
	}

	/*__ Horizontal menus __*/
	#object-nav {

		ul {
			overflow: hidden;

			li {
				float: none;
			}

			li:not(.selected) {

				a {
					opacity: 0.7;
				}
			}

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

				li {
					float: left;
				}
			}
		}
	}

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

		ul {
			background-color: $light-background;
			border-bottom: 0;
			padding: 0;

			li.last {
				background: $content-background;
				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;
				}

				select,
				label,
				option {

					@include font-size(14);
				}

				select {
					font-style: italic;
				}
			}

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

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

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

		ul {

			li.selected,
			li.current {

				a {
					background: $dark-background;
					color: #fff;
					opacity: 1;
				}
			}
		}
	}

} // 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

@media screen and (min-width: 55em) {

	.bp-user #buddypress,
	.single-item.groups #buddypress {
		background: $light-background;
	}

	#buddypress {

		#item-header,
		#item-body {
			background: $content-background;
		}

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

			ul {
				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);
			}
		}

	} // close  #buddypress
} // close @media

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

#buddypress {

	div.pagination {
		box-shadow: none;

		.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 2015 font-family
#buddypress {

	.item-list {

		.activity-header,
		.activity-meta {

			@include default-font-sans();
		}

		a.activity-time-since {
			color: #717171;
		}
	}
}

// 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 2015 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;

				@media screen and (min-width: 38.75em) {
					margin-bottom: 0;
				}
				text-align: center;

				a {
					border-bottom: 0;
				}

				img.avatar {
					display: inline-block;
					float: none;
					// Quite early on we need to move avatars to the left(right)
					@media screen and (min-width: 38.75em) {
						display: block;
						float: left;
					}
				}
			}

			.item {
				margin-left: 25%;

				span.activity {
					font-style: italic;
				}

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

			@media screen and (min-width: 59.6875em) {

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

				.item {
					left: 10%;
					margin-left: 0;
					position: relative;
					width: 55%;
				}
			}// close @media

			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
				@media screen and (min-width: 59.6875em) {
					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

					@media screen and (min-width: 38.75em) {
						// keep buttons to a row small tablet up
						margin: 0 $spacing-val-sm $spacing-val-sm 0;
						width: auto;
					} // close @media

					@media screen and (min-width: 59.6875em) {
						// 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

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

			#whats-new-post-in-box {

				select {

					@include font-size(14);
					max-width: 120px;
				}
			}
		}

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

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

				#whats-new-submit {
					float: none;

					input {
						width: 100%;
					}
				}
			}

			#whats-new-options {
				display: flex;
				flex-direction: column;

				#whats-new-submit {
					order: 2;
				}

				#whats-new-post-in-box {
					order: 1;
				}
			}
		} // close @media

		#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;
					outline: 0;
					padding-left: 0.4em;
				}
			}

			@media screen and (min-width: 30em) {

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

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

		} // close #whats-new-options

	} // 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);
				}
			}

			@media screen and (min-width: 46.25em) {

				.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(13);
				}
			}
		}

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

			.activity-header {
				line-height: inherit;
				margin-right: 0;

				p {
					background-color: $light-background;
					border: 1px solid rgba($border-light, 0.6);
					color: #717171;
					padding: 0 0.2em;
				}

				img.avatar {
					display: inline-block;
					margin-bottom: 0 !important; // have to match to BP
				}
			} // close .activity-header

			.activity-meta {

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

					@media screen and (min-width: 38.75em) {
						display: inline-block;
						margin: 0;
					}
				}
			}

		} // 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 {
		background: none; // counter the .bp-user faux column background
		#activity-stream {

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

			li.mini {

				.activity-header {

					@include font-size(16);

					@media screen and (min-width: 46.25em) {

						@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 {
			margin: $spacing-val-sm 0 0;

			a {
				color: #717171;
			}

			&.has-comments {
				border-left: 1px solid $border-light;
			}

			.ac-form {
				padding: $spacing-val-md 0 0;
			}

			> ul {
				background: rgba($light-background, 0.6);
				margin: 15px 0 0 2px;

				@media screen and (min-width: 38.75em) {
					margin-left: 70px;
				}

				ul {
					// all nested ul margins & padding flattened initially
					margin-left: 1%;
					padding-left: 0;

					@media screen and (min-width: 30em) {
						margin-left: 1%;
						padding-left: 1em;
					}
				}

				ul li {
					border-left: 1px solid $border-light;
					border-top: 0;
					padding-left: 0.2em;
				}

				.acomment-meta {
					border-bottom: 1px solid $border-light;
					color: #737373;
					font-style: italic;
				}

				// Display the user avatar stacked up to 30em
				// reduce/widen the content margins
				@media screen and (max-width: 38.75em) {

					.acomment-avatar {
						display: block;
						text-align: center;

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

					.acomment-content,
					.acomment-meta,
					.acomment-options {
						margin: $spacing-val-xs;
					}

					.acomment-content {
						padding: 0 $spacing-val-sm;
					}
				} // close @media

			} // close the ul li comments construct

			.ac-reply-avatar {
				display: none;
			}

			.ac-reply-content {
				margin-left: 0;
				padding-left: 0;
			}

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

				.ac-reply-avatar {
					display: block;
				}

				.ac-reply-content {
					overflow: hidden;
				}
			}

			.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 {

		@media screen and (min-width: 59.6875em) {

			li {

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

				.action {
					float: right;
				}
			}
		}

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

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


/**
*-----------------------------------------------------------
* @subsection 6.1 - Item Header Global
*-----------------------------------------------------------
*/

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

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

		main {

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

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

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

	#buddypress {

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

			#item-header {

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

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

			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 {

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

			#item-header {

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

		// Move visual flow of avatar & item-actions at narrow width,
		// avatar first after group title
		@media screen and (max-width: 38.75em) {

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

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

					a {
						border-bottom: 0;

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

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

				#item-actions {
					order: 3;
				}
			}
		} // close @media

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

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

				@media screen and (min-width: 38.75em) {
					clear: none;
					float: right;
					width: 50%;
				}

				h2 {
					background: $dark-background;
					color: $content-background;

					@include font-size(14);

					@media screen and (min-width: 46.25em) {

						@include font-size(16);
					}

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

			@media screen and (min-width: 46.25em) {

				#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%;

				a {
					border-bottom: 0;
					display: inline-block;
					float: none;
				}
			}

			@media screen and (min-width: 46.25em) {

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

					img.avatar,
					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
*-----------------------------------------------------------
*/
// Manage the margins inherited from 2015 inside the item-body sections
// generally far too large a top margin for headings in our lists
#item-body {

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 1em 0;

		a {
			border-bottom: 0;
		}
	}
}

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


/**
*-----------------------------------------
* @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;
		}
		// remove backgrounds from request list member names.
		#request-list {

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

.groups.edit-details {

	#group-settings-form {

		label {
			background: $dark-background;

			@include border-top-radius(4px);
			color: $content-background;
			display: inline-block;
			margin-bottom: 0;
			padding: 0.2em;
			width: 80%;

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

		}

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

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

	}
} // close .groups.edit-details

.groups.group-settings {

	#group-settings-form,
	#create-group-form {

		div.radio {

			label {
				border: 1px solid $border-light;
				padding: 0.2em;
			}

			ul {
				color: #767676;

				@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
*-----------------------------------------
*/

/* Members loop */

.groups.group-members {

	#buddypress {

		#members-group-list {

			li {

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

					> a {
						border-bottom: 0;
						display: block;
						margin-bottom: $spacing-val-sm;
						text-align: center;

						img.avatar {
							display: inline;
							float: none;
						}
					}
				}

				h5 {
					display: inline-block;

					@include font-size(14);

					@media screen and (min-width: 59.6875em) {

						@include font-size(16);
					}

					margin: 0;

					a {
						border-bottom: 0;
					}
				} //  close h5

				span.activity {

					@include font-size(12);
				}

				.action {
					top: 0;
				}
			} // close li
		}
	}
}

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

	#subnav {

		li {

			@media screen and (max-width: 38.75em) {
				background: $content-background;
				padding: $spacing-val-md 0;
			}

			width: 100%;

			#search-members-form {
				float: right;

				@media screen and (max-width: 38.75em) {
					margin: 0;
					width: 100%;

					label {

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

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

/**
*-----------------------------------------
* @subsection 6.2.1.3 - Group Send Invites
*-----------------------------------------
*/

.groups.group-invites {

	#item-body {

		.item-list {

			.action {
				margin-bottom: 0;
			}
		}
	}

	@media screen and (min-width: 46.25em) {

		#buddypress {

			#item-body {

				#message {
					margin-top: 0;
				}
			}
		}
	}

	@media screen and (min-width: 55em) {

		#buddypress {

			#send-invite-form {
				margin-top: 0;
			}
		}
	}

	#item-body {

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

			.left-menu {
				float: none;
				margin: $spacing-val-sm 0;

				#invite-list {
					height: auto;
					width: auto;
				}
			}

			.main-column {
				margin-left: 0;
			}

			.submit {

				input {
					display: inline-block;
					width: 100%;
				}
			}

		} // close @media
	} // close .item-body

} // close .groups.group-invites

/**
*-----------------------------------------------------
* @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);
			}

			@media screen and (min-width: 46.25em) {

				th {

					@include font-size(16);
				}

				td {

					@include font-size(14);
				}
			}

			@media screen and (min-width: 77.5em) {

				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%;

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

			select,
			input {

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

			select {
				float: left;
				margin-right: 0;
				width: 100%;

				@media screen and (min-width: 30em) {
					width: 60%;
				}
			}

			input {
				float: right;

				@include default-font-serif();
				line-height: 1.5;
				margin-top: $spacing-val-sm;
				width: 100%;

				&[disabled]:hover {
					background: none;
				}

				@media screen and (min-width: 30em) {
					margin-top: 0;
					width: 38%;
				}
			}

		} // close .notifications-options-nav

	} // close #BuddyPress

} // close .bp-user

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

.bp-user {

	#buddypress {

		.profile {

			.bp-widget {

				h2 {
					background: lighten($dark-background, 10%);
					color: #fff;
					margin-bottom: 0;
					padding: 0.4em;
				}

				table {
					margin-top: 0;
				}
			}
		}
	}
}

/* Edit Profile */
.bp-user {

	#buddypress {

		.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 {

					@include font-size(14);
				}

				.field-visibility-settings-close,
				.visibility-toggle-link {
					background: $dark-background;
					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;
				}

				@media screen and (min-width: 46.25em) {

					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: lighten($dark-background, 10%);
				}
			}

			tr {

				td {
					background: $content-background;
					display: inline-block;
					float: left;
				}

				td.thread-star,
				td.thread-options {
					border-bottom-color: darken($border-light, 20%);
					border-bottom-width: 2px;
					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-from {
					height: 2.6em;

					@media screen and (max-width: 38.75em) {
						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;

					@media screen and (max-width: 38.75em) {
						clear: both;

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

			tr.unread {

				td {
					background: $unread;
					border-color: darken($border-light, 10%);
					border-bottom-color: darken($border-light, 20%);
				}
			}

			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: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;
				}
			}
		}

	} // close #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 {

			th.title {
				width: 75%;
			}

			td.yes,
			td.no {
				vertical-align: middle;
			}
		}
		// Profile visibility table td widths
		table.profile-settings {
			width: 100%;

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

			@media screen and (min-width: 46.25em) {

				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
*-------------------------------------------------------------------------------
*/

#buddypress {

	// Match BP form elements to Themes(2015) 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.3);

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

	select {
		border: 1px solid rgba($border-color, 0.5);
	}

	// Overrides for embedded WP editors.
	.wp-editor-wrap {

		a.button,
		button,
		input[type="submit"],
		input[type="button"],
		input[type="reset"] {
			padding: 0 5px 1px;
		}
	}

} // close #buddypress


#buddypress {

	// Manage form control widths override BP 75% width.

	.standard-form,
	.group-create-form {

		li {
			float: none;
			list-style: none;
		}

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

	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 & twentyfifteen

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

			label {
				float: left;
				width: 80%;
			}

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

			input[type="text"],
			input[type="submit"] {

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

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

			input[type="submit"] {
				float: right;
				font-weight: 400;
				padding: 0.2em 1em;
				text-align: center;
				text-transform: none;
				width: 20%;
			}
		}// close form

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

	// Shift the search parent to the right and allow to shrinkwrap
	@media screen and (min-width: 38.75em) {

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

			form {

				label,
				input[type="text"],
				input[type="submit"] {
					width: auto;
				}
			}
		}
	} // close @media

	@media screen and (min-width: 77.5em) {

		.dir-search,
		.message-search {

			form {

				input[type="text"] {

					@include font-size(16);
				}

				input[type="submit"] {

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

} // close #buddypress

/**
*-------------------------------------------------------------------------------
* @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: lighten($dark-background, 10%);
			border-color: darken($border-light, 20%);
			color: $content-background;
		}

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

	@media screen and (min-width: 55em) {

		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

} // #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 {

	#item-body {

		div#message {
			margin-top: $spacing-val-md;

			@media screen and (min-width: 55em) {
				margin-right: $spacing-val-md;
			}
		}
	}

	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

} // close  #buddypress

// Without direct classes on our mesages ( 'warning' )
// we need to use the body classes
.delete-group {

	#buddypress {

		div#message.info {

			p {

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

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