table { border-collapse:collapse; border-spacing:0; }
table { margin: 1.5em 0; }

/**
 * ------------------------------------------------------------------------------- 
 * TABLES: Row based
 * -------------------------------------------------------------------------------
 */

.rows { width: 100%; }
.rows thead { display: none;background:#5C98A0;color:#FFFFFF;height:2em;} 

.rows tr {
	width: 100%; 
	float: left; 
	display: block;
	padding: 1em 0.5em;
	border-bottom: none;
}

.rows td {
	width: 100%;
	float: left;
	display: block;
	text-align: left;
	padding: 0 0 0.3em 1%;
	position: relative;
}

.rows tbody td:nth-of-type(odd) {
	background: none;
	border-top: none;
	border-bottom: none;
}

.rows tbody td:nth-of-type(1) {
	background: none;
	border: none;
}

.rows td:before {
	width: 7em;
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 0;
}

.rows td:nth-of-type(2):before { content: ""; }
.rows td:nth-of-type(3):before { content: ""; }
.rows td:nth-of-type(4):before { content: ""; }
.rows td:nth-of-type(5):before { content: ""; }


@media screen and (min-width: 700px)  {	

	.rows thead { 
		display: block; 
		padding: 0 0 1.5em 0; 
		margin: 0 0 1em 0; 
	}

	.rows thead tr { border-bottom: 0;padding:0.5em; }
	.rows #fruit { text-indent: -999em; }
	
	.rows tr { 
		border-bottom: none; 
		padding: 0; 
	}
	
	.rows tbody tr:nth-of-type(even) { 
		background: none;
		border-top: 0;
		border-bottom: none;
	}

	.rows th, 
	.rows td {
		width: 30%;
		height: auto;
		float: left;
		text-align: left;
		padding: 0.3em 0;
	}
	
	.rows tbody td:nth-of-type(n) {
		background: none;
		border: none;
	}

	.rows td:nth-of-type(n):before { content: ""; }
	
}

/**
 * ------------------------------------------------------------------------------- 
 * TABLES: Column based
 * -------------------------------------------------------------------------------
 */

.columns { width: 100%; }

.columns tr {
	width: 100%;
	float: left;
	display: block;
	margin: 0 0 1.5em 0;
	padding: 0 0 1em 0;
	border-bottom: 1px solid #333;
}

.columns tr:first-of-type { 
	position: absolute;
	top: -999em;
	left: -999em;
}

.columns td {
	width: 100%;
	display: block;
	float: left;
	clear: both;
	text-align: left;
	padding: 0 0 0.3em 40%;
	position: relative;
}

.columns td:nth-child(2n+1) { 
	background: #a7beaa; 
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
}

.columns td:before {
	width: 7em;
	font-weight: bold;
	position: absolute;
	top: 0;
	left: 0;
}

.columns td:nth-of-type(1):before { content: "Type of grape: "; }
.columns td:nth-of-type(2):before { content: "Dried: "; }
.columns td:nth-of-type(3):before { content: "Seedless: "; }
.columns td:nth-of-type(4):before { content: "Dry colour: "; }

.columns td img {
	width: 15px;
	display: inline;
	padding: 0;
	margin: 0;
}

@media screen and (min-width: 700px){
	
	.columns tr {
		width: 25%;
		float: left;
		margin: 0;
		padding: 0;
		border-bottom: none;
	}
	
	.columns tr:first-of-type { 
		position: relative;
		top: 0;
		left: 0;
	}
	
	.columns th, 
	.columns td {
		width: 100%;
		display: block;
		float: left;
		clear: both; 
		height: 2em;
		padding: 0.3em; 
		text-align:center;
	}
	
	.columns #features { text-indent: -999em; }
	
	.columns td:nth-of-type(n):before { content:""; }

}


/* for IE 8 and below */
.ie .columns tr { width: 25%; border-bottom: none; }
.ie .columns td { border-bottom: 1px solid #ccc; }

.ie .columns #features { text-indent: -999em; }

.ie .columns #features, 
.ie .columns #raisin, 
.ie .columns #sultana, 
.ie .columns #currant {
	margin: 0 0 1em 0;
	border-bottom: none;
}

/* for IE 7 and 6 */
#ie7 .columns th,
#ie6 .columns th {
	width: 20%;
	font-size: 90%;
	text-align: center;
	border-bottom: 1px solid #ccc; 
}

#ie7 .columns td,
#ie6 .columns td { width: 20%; text-align: center; }