// ----------------------------------------------------------------
// Tables
// ----------------------------------------------------------------

$table-Border: 1px solid #ccc; // sets consistent boarder styling for table elements

// Removes most of the table spacing issues
table{
  @extend %margin-bottom;
  border-collapse:collapse;
  border-spacing:0;
}

.table-Base{
	background:#fafafa;
	font-size:$base;
	width:100%; // make tables always take up the entire width of their containing parent.
	
	th, 
	td{
  	padding:$spacing; 
  	text-align:left;
	}
}

.table-Header{
	background:#eee;
}

.table-Body{
	// style?
}

.table-Footer{
	background:#e3e3e3;
}

.table-Border{
	@extend .table-Base;
	border-bottom:$table-Border;
	border-right:$table-Border;
	
	tr{border-top:$table-Border}
	th, td{border-left:$table-Border}
}

.table-Stripe{
	@extend .table-Base;
	
	tr:nth-child(2n){background:$c-Light}
}