/* CSS table */
.table{
	display:table;
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	border-bottom:0px solid #dddddd;
	color:#6d6d6d;
	margin:0px 5px 0px 5px;
	width: 570px;
}
.table-head{
	 display: table-header-group;
}
.table-head .column{ 
	background:#222222;
	color:#7d7d7d;
	border-right:1px solid #5d5d5d;
	border-bottom:none;
}
.table-head .column:hover{
	background:#333333;
}
.row{
	display:table-row;
}
.row .column:nth-child(1){
	border-left:1px solid #eeeeee;
}
.row:last-child .column{
	border-bottom:none;
}
.column{
	display:table-cell;
	padding:5px 10px;
	border-bottom:1px solid #eeeeee;
	border-right:1px solid #eeeeee;
}
.column:hover{
	background:#f9f9f9;
}
/* --- */
@media all and (max-width: 570px){
	.table,
	.row,
	.column,
	.column:before{
		display:block;
	}
	.table,
	.row .column:last-child{
		border-bottom:none;
	}
	.table-head{
		position:absolute;
		top:-1000em;
		left:-1000em;
	}
	.row{
		border:1px solid #eeeeee;
		border-top:2px solid #dddddd;
		border-bottom:2px solid #dddddd;
		margin:20px 0;
	}
	.row .column:nth-child(1){
		border-left:none;
	}
	.row .column:last-child{
		border-right:none;
	}
	.row:last-child .column,
	.column{
		border-bottom:1px solid #eeeeee;
	}
	.column:before{
		font-weight:bold;
		padding-right:20px;
		font-size:12px;
		content:" "attr(data-label)" //";
	}
}