@charset "UTF-8";

.products_table {
	margin-top: 10px;
	max-width: 1000px;
	td {
		vertical-align: top;
		padding-bottom: 20px;
		padding-right: 10px;
	}
	td:last-child {
		vertical-align: bottom;
	}
	a {
		text-decoration:none;
		color: #000;
		&.more_info { 
			padding: 5px;
			border-radius: 5px;
			background-color: #9cf;
			font-size: 16px;
			width: 100px;
			display: block;
			text-align: center;
			font-weight: bold;
		}
	}
	td:last-child {
		a {
			float: right;
		}
		padding-right: 0px;
	}
	img {
		width: 300px;
	}
	span.product_title {
		font-size: 18px;
		color: #000;	
		font-weight: bold;
		margin-bottom: 15px;
	}
	span.description { 
		font-size: 16px;
		color: #000;	
	}
	span.pages, span.publication_date, span.author {
		font-size: 15px;
	}
	span.pages {
		font-weight: bold;
	}
}

.piano_stores_table {
	td {
		padding-bottom: 10px;
		padding-right: 10px;
		&.store_info {
			vertical-align: top;
		}
	}
	a {
		text-decoration:none;
		color: #000;
	}
	p { 
		line-height: 1.5;
		margin: 0;
	}
	img {
		max-width: 300px;
		max-height: 200px;
	}
	p.store_title {
		font-size: 18px;
		color: #000;	
		font-weight: bold;
	}
	p.store_town, p.store_city, p.store_post_code { 
		font-size: 16px;
		color: #000;	
	}
	p.store_website, p.store_telephone {
		font-size: 15px;
	}
	p.store_website a { 
		color: #999;
	}
}

/* Mobile Styles */

@media only screen and (max-width: 600px) {
	
	.products_table {
		display:block;
		margin-bottom:20px;
		width: 100%;
		thead {
			display: none;
		}
		td { 
			display: block;
			padding-bottom: 0px;
			vertical-align: top;
			width: 100% !important;
			clear: both;
		}
		/*td:before {
		  	content: attr(data-col);
		  	display: inline-block;
		  	float: left;
		}*/
		td:last-child {
			a {
				margin-bottom:20px;
			}
		}
		img {
			max-width: 100%;
		}
	}	
	.piano_stores_table {
		display:block;
		margin-top: 15px;
		thead {
			display: none;
		}
		tr { 
			display: block;	
		}
		td { 
			display: grid;
			padding-bottom: 0px;
			margin-bottom: 20px;
		}
		td:nth-child(odd) {
			display: none;
		}
		td::before {
		  	content: attr(data-col)'';
		  	display: inline-block;
		  	width: 0;
		}
	}	
	
}