/*

AcgApp defines several classes to be used in combination with locally defined classes to assist in applying layout-specific CSS.

The classes are created as follows:

		breakPoints:
		[
			{ className:"acgRwdNarrow", max:767 },
			{ className:"acgRwdWide", min:768 },
			{ className:"acgRwdPhone", max:599 },
			{ className:"acgRwdTablet", min:600, max:1023 },
			{ className:"acgRwdTabletNarrow", min:600, max:767 },
			{ className:"acgRwdTabletWide", min:768, max:1023 },
			{ className:"acgRwdDesktop", min:1024 }
		]

For example, defining:
.acgRwdNarrow .myClass
{
...
}
would create CSS that would apply to any "myClass" elements when the app is running in a "acgRwdNarrow" layout.

*/

/*
Display Classes

Display classes are used to specify elements which should only be seen in specific layouts.

For example, any element that includes "acgRwdDisplayPhone" would ONLY be shown in acgRwdPhone layout.

*/
.acgRwdDisplayNarrow, .acgRwdDisplayWide, .acgRwdDisplayPhone, .acgRwdDisplayTablet, .acgRwdDisplayTabletNarrow, .acgRwdDisplayTabletWide, .acgRwdDisplayDesktop, .acgRwdDisplayPortrait, .acgRwdDisplayLandscape
{
	display:none !important;
}

@media (max-width:767px)
{
	.acgRwdDisplayNarrow
	{
		display:revert !important;
	}
}
@media (min-width:768px)
{
	.acgRwdDisplayWide
	{
		display:revert !important;
	}
}
@media (max-width:599px)
{
	.acgRwdDisplayPhone
	{
		display:revert !important;
	}
}
@media (min-width:600px) and (max-width:1023px)
{
	.acgRwdDisplayTablet
	{
		display:revert !important;
	}
}
@media (min-width:600px) and (max-width:767px)
{
	.acgRwdDisplayTabletNarrow
	{
		display:revert !important;
	}
}
@media (min-width:768px) and (max-width:1023px)
{
	.acgRwdDisplayTabletWide
	{
		display:revert !important;
	}
}
@media (min-width:1024px)
{
	.acgRwdDisplayDesktop
	{
		display:revert !important;
	}
}

@media (orientation:portrait)
{
	.acgRwdDisplayPortrait
	{
		display:revert !important;
	}
}

@media (orientation:landscape)
{
	.acgRwdDisplayLandscape
	{
		display:revert !important;
	}
}

/*
Responsive Tables

Responsive Table classes help to make tabular data and layouts responsive by making the data use a single column in narrow layouts and multiple columns in wide layouts.

In addition, some "helper" classes are defined to define column widths (when showing multiple columns).

There are 2 different underlying "strategies" for defining the layout:

acgRwdTable, acgRwdTableCell: 	Uses display:table and display:table-cell to show columns
acg-flex-table, acg-flex-table-cell:	Uses CSS "flex" mode show columns

*/
.acgRwdTable
{
	display:block !important;
	jtext-align:center;
	width:100%;
}
.acgRwdTableCell
{
	display:block !important;
	jwidth:100%;
	jtext-align:center;
}
@media screen and (min-width:768px)
{
	.acgRwdTable
	{
		display:table !important;
	}
	.acgRwdTableCell
	{
		display:table-cell !important;
		vertical-align:middle;
		jtext-align:left;
	}
}

@media screen and (min-width:768px)
{
	.acgRwdWidth67
	{
		width:67%;
	}

	.acgRwdWidth66
	{
		width:66.4%;	/* 66.6 causes wrapping... */
	}

	.acgRwdWidth33
	{
		width:33.3%;
	}

	.acgRwdWidth50
	{
		width:50%;
	}

	.acgRwdWidth60
	{
		width:60%;
	}

	.acgRwdWidth40
	{
		width:40%;
	}

	.acgRwdWidth75
	{
		width:74.8%;
	}

	.acgRwdWidth25
	{
		width:25%;
	}
}

.acgRwdFlexTable
{
	display:block;
}

.acgRwdWide .acgRwdFlexTable
{
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
	justify-content:space-between; /* use 'space-evenly' if outer gutter is desired */
}

.acgRwdNarrow .acgRwdFlexTableCell
{
	width:100% !important;
}

.acgRwdWide .acgRwdFlexGrid
{
	display:grid;
}

.acgRwdNarrow .acgRwdFlexGrid
{
	grid-template-columns:100% !important;
}


/*
@media screen and (min-width:768px)
{
	.acg-flex-table
	{
		display:flex;
		flex-direction:row;
		flex-wrap:wrap;
		justify-content:space-between; // use 'space-evenly' if outer gutter is desired
	}
}

@media screen and (max-width:767px)
{
	.acg-flex-table-cell
	{
		width:100% !important;
	}
}

@media screen and (max-width:768px)
{
	.acg-flex-col, .acg-flex-col2, .acg-flex-col3, .acg-flex-col3-stack, .acg-flex-col4, .acg-flex-col4-stack
	{
		width:100%;
		margin-bottom:1em;
	}
}

@media screen and (min-width:768px)
{
	.acg-flex-col2
	{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box; 
		box-sizing: border-box;
		
		width:calc(1/2*100% - 0.5em);
	}
	.acg-flex-col3, .acg-flex-col3-stack
	{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box; 
		box-sizing: border-box;
		
		width:calc(1/3*100% - 0.67em);
	}
	.acg-flex-col4, .acg-flex-col4-stack
	{
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box; 
		box-sizing: border-box;
		
		width:calc(1/4*100% - 0.75em);
	}
}
*/