/*
	Plugin Name:   WooCommerce Data Sheets
	Template Name: Single Product Styles (CSS)
*/

/*** Mobile First Start ***/
.data-sheet.pdf-file-icon:before
{
  content: '';
  display: inline-block;
	background-repeat: no-repeat;
	vertical-align: middle;
}

.data-sheet > .data-sheet-file-size
{
	font-size: 80%;
}

.shop_attributes .data-sheet.pdf-file-icon:before
{
	width: 16px;
  height: 16px;
	margin: 0 5px 0 0;
  background-image: url('../images/shop_attributes-pdf-icon-low-dpi.png');
}

.panel .data-sheet.pdf-file-icon:before
{
	width: 32px;
  height: 32px;
	margin: 0 10px 0 0;
  background-image: url('../images/panel-pdf-icon-low-dpi.png');
}

.panel .data-sheet
{
	width: 100%;
	padding: 10px;
	display: table;
	box-sizing: border-box;
}
/*** Mobile First End ***/



/***
	Mobile First (High DPI) Start
	- https://gist.github.com/marcedwards/3446599
	- http://www.ivanthevariable.com/css-retina-sprites/
***/
@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
only screen and (-o-min-device-pixel-ratio: 13/10),
only screen and (min-resolution: 120dpi)
{
	.panel .data-sheet.pdf-file-icon:before
	{
		background-image: url('../images/panel-pdf-icon-high-dpi.png');
		background-size: 32px 32px; /* Half of high resolution size */
	}

	.shop_attributes .data-sheet.pdf-file-icon:before
	{
		background-image: url('../images/shop_attributes-pdf-icon-high-dpi.png');
		background-size: 16px 16px; /* Half of high resolution size */
	}
}
/*** Mobile First (High DPI) End ***/