// ----------------------------------------------------------------
//		Floats & Clearing
// ----------------------------------------------------------------
.float-Left	  {float:left}
.float-Right  {float:right}
.float-None	  {float:none}
.clear		  {clear:both}
.clearfix	  {@include clearfix}
.overflow	  {overflow:hidden}


// Consistent Margin Bottom
%margin-bottom{margin-bottom:$spacing*3}

// ----------------------------------------------------------------
//		Showing & Hiding
// ----------------------------------------------------------------
.d-Block, .show{display:block}
.d-None, .mobile-Show{display:none} 
	// change display value for .mobile-Show in the appropriate @media break-point
	
// Hides from screenreaders and browsers
.hidden{display:none!important; visibility:hidden}

// Hide from browsers but not from screen readers
.invis, %invis{@include invisible}

// ----------------------------------------------------------------
//		Reoccuring HTML Elements
// ----------------------------------------------------------------
// Profile Picture
.pic, %pic{
	border:1px solid $c-White;
	@include border-radius(4px);
	@include box-shadow($bs-4);
	display:inline-block;
	overflow:hidden;
	width:90px;
	
	img{display:block}
}

// Make picture into a circle
.pic-Rounded{
	@extend %pic;
	@include border-radius(100px);
}
/* 
	Code Example
	--------------------------
	<a href="#" title="TITLE" class="pic-Rounded">
		<img src="/img/little-V.jpg" alt="" />
	</a>
*/

// Media Item
.media, %media{
	margin-bottom:$spacing*4;
	@extend .clearfix;
	position:relative;
	z-index:2;
	.media-Text >:last-child{margin-bottom:0}
	.media-Object{float:left; margin:0 $spacing*4 $spacing*2 0; max-width:30%;}
}

// Have media element appear on the right hand side
.media-Reverse, %media-Reverse{
	@extend %media;
	.media-Object{float:right; margin:0 0 $spacing*2 $spacing*4; max-width:30%}
}

.media-No-Wrap{
	@extend %media;
	padding-left:100px;
	.media-Text{float:left; width:100%}
	.media-Object{margin-left:-100px; margin-right:0}
}

.media-No-Wrap-Reverse{
	@extend %media-Reverse;
	padding-right:100px;
	.media-Object{margin-right:-100px; margin-left:0}
}
/* 
	Code Example
	--------------------------
	<div class="media">
		<div class="media-Object">
			<img src="/img/little-V.jpg" alt="" />
		</div>
		<div class="media-Text">
			<h1>Title for Meida Element</h1>
			<p>Paragraph text to go along with media element.</p>
		</div>
	</div>
	
	-- 	Divs were used in this example, but the media element could be applied to various situations.
		Ie. could be used for a header or footer area where a logo is placed on the right or left w/text to the side.
*/


// Call out boxes
.emph-Block{
	background:#fafafa;
	border:1px solid #ddd;
	@include border-radius(4px);
	@include box-shadow($bs-4);
	margin-bottom:$spacing*4;
	min-height:50px;
	padding:$spacing*4;
	
	& > :last-child{margin-bottom:0}
}