// A snap table is an abstraction of a full page table that I use repeatedly in projects.  All of the table dialogs (editing, new, details, functions, etc) are embedded in the table its self.
// A basic table will have a load more link in the controls, and will load a fixed number of values.  A scroll bar attached to the table contents will provide means of accessing all the data.
// The table header will be separated (in a separate HTML table) such that it is always visible.
// Often an action column will be in the mix to provide buttons related to the row, or if in the header will be an action on the table (such as a + button for adding new rows).
.snapTable
	display table
	content-box border-box
	padding 10px 20px
	height 100%
	width 100%
	text-align left
	position relative

	.tableControls
		display table
		width 100%
		text-align right
		margin-right 20px
		a
			font-size 12px
			font-family "Arial", san-serif
			font-weight 800
			color #2d1b8c
			text-decoration none
		a:hover
			text-decoration underline
		a.disabled
			visibility hidden
	.table
		table-layout fixed
		min-width 100%
		tr.selected
			background-color #feff00
	.separatedTableHeader
		.actions
			text-align center
	.listContainer
		position absolute
		top 100px
		left 0
		right 0
		bottom 0
		.listRow
			display table-row
			.listCell
				display table-cell
				position relative
				height 100%
				width 100%
				.tableContainer
					position absolute
					top 0
					bottom 0
					left 0
					right 0
					width auto
					height auto
					border 0
					font-size 12.5px
					overflow-y auto
					table
						table-layout fixed
						width 100%
						thead
							display none
							visibility hidden