/*
Theme Name:		UMS Virtue Directory Listings
Description:    This is the CSS Stylesheet for the Directory Listings.
Version:        1.0.0
Author:         US: IT Web Technologies
Text Domain:	virtue
Template:		virtue
*/

.directory-listing {
	position: relative; /* Needed to place the :before pseudo element in the proper position */
	list-style: none;
	padding: 0;
	margin: 0;
	-moz-column-count: 2;
	-webkit-column-count: 2;
	column-count: 2;
	-moz-column-gap: 20px;
	-webkit-column-gap: 20px;
	column-gap: 20px;
}

/* This 'cuts' the top margin of .directory-listing so it's displayed in the same way as the other */
.directory-listing:before {
	content: " ";
	position: absolute;
	display: block;
	width: 100%;
	height: 1px;
	
	/* Put the gaps on the <.directory-listing> top margin */
	top: -1px;
	
	/* Background-size = 1/4 of the width + 1/4 of the space between columns */
	background-size: calc(50% + 5px) 1px;
	
	/* Or it will hide the border-top of the .directory-listing */
	background-color: transparent;
	
	/* The actual white gaps at the top */
	background-image: linear-gradient(
	90deg,
	transparent calc(100% - 20px), /* All the <.directory-listing-columns> width minus the gap is transparent */
	white 20px);  /* Those 20px are white */
}

.directory-listing-columns {
	-webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
	page-break-inside: avoid; /* Firefox */
	break-inside: avoid; /* IE 10+ */
	margin: 0 0 1px 0;
	padding: 0 0 1em 0;
}

/* This will hide the top margin of the last columns without elements */
.directory-listing-columns:last-child:before {
	position: absolute;
	/* You want to place the top  */
	margin-left: calc(50% + 5px);
	content: " ";
	display: block;
	background-color: white;
	width: 10px;
	height: 1px;
	top: -1px;
	width: 100%;
}