@charset "utf-8";
/* CSS Document */

ul.draw-grouping, ul.draw-grouping ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
  clear: right;
}

ul.draw-grouping li {
    padding-left: 2px;
    padding-right: 2px;
    white-space: nowrap;
    background-color: #fff;
    color: #2a2f32;
}

ul.draw-grouping > li {
    float: left;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
    text-indent: 2px;
    margin-right: 2px;
    margin-bottom: 12px;
    background-color: #060;
    color: #fff;
    width: 173px;
}

table.draw-grouping {
	width: 100%;
	border-collapse: collapse;
	color: #2a2f32;
}
.draw-grouping tr:nth-of-type(odd) {
	background-color: #eee;
}
.draw-grouping th {
	background-color: #060;
	color: #fff;
	font-weight: bold;
}
.draw-grouping td, .draw-grouping th {
	padding: 6px;
	text-align: left;
}
.draw-grouping tr:last-of-type {
	border-bottom: 1px solid #2a2f32;
}

@media 
only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

	/* Force table to not be like tables anymore */
	table.draw-grouping, .draw-grouping thead, .draw-grouping tbody, .draw-grouping th, .draw-grouping td, .draw-grouping tr { 
		display: block; 
	}
	
	/* Hide table headers (but not display: none;, for accessibility) */
	.draw-grouping thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	.draw-grouping tr { border: 1px solid #2a2f32; }
	
	.draw-grouping td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #2a2f32; 
		position: relative;
		padding-left: 50%; 
	}
	
	.draw-grouping td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		content: attr(data-label);	
	}
}