#publish-footer-factory {
	margin-top: 20px;
	position: relative;
}

.publish-footer-factory-widgets:before,
.publish-footer-factory-widgets:after {
    content: " ";
    display: table;
}

.publish-footer-factory-widgets:after {
    clear: both;
}

.publish-footer-factory-widgets {
	margin-bottom: 20px;
}

.footer-factory-widget:only-of-type {
	margin-left:  0 !important;				/* these override the margins set below */
	margin-right: 0 !important;
	width: 100%;
}

/* the following are quantity queries for CSS (http://alistapart.com/article/quantity-queries-for-css).
 * the first will match when there are only two widget areas on-screen.  the second will match when there
 * are three.  the prior rule will make sure to style a single widget area. 
 */
 
.footer-factory-widget:nth-last-child(2):first-child,
.footer-factory-widget:nth-last-child(2):first-child ~ .footer-factory-widget {
	width: calc(50% - 2rem);
	float: left;
}
	
.footer-factory-widget:nth-last-child(3):first-child,
.footer-factory-widget:nth-last-child(3):first-child ~ .footer-factory-widget {
	width: calc(33.3% - 2rem);
	float: left;
}
	
.footer-factory-widget:first-child {
	margin-right: 2rem;
}

.footer-factory-widget:nth-last-child(3):first-child + .footer-factory-widget {
	margin-left:  1rem;
	margin-right: 1rem;	
}

.footer-factory-widget:last-child {
	margin-left: 2rem;	
}

.publish-footer-factory-content {
	clear: left;
}