/******************************************************************
Site Name:
Author:

Stylesheet: Retina Screens & Devices Stylesheet

When handling retina screens you need to make adjustments,
especially if you're not using font icons. Here you can add them in
one neat place.

******************************************************************/

/*
EXAMPLE
Let's say you have an image and you need to make sure it look good
on retina screens. Let's say we have an icon with the dimensions
24px x 24px. In your regular stylesheet, it would look something
like this:

.icon {
	background: url(img/test.png) no-repeat;
	height: 24px;
	width: 24px;
}

For retina screens, we have to make some adjustments, so that images
don't look blurry. So, taking into account the image above and the
dimensions, this is what we would put in our retina stylesheet:

.icon {
	background: url(img/test@2x.png) no-repeat;
	background-size: 24px 24px;
}

So, you would create the same icon, but at double the resolution, meaning
it would be 48px x 48px. You'd name it the same, but with a @2x at the end
(this is pretty standard practice). Set the background image so it matches
the original dimensions and you are good to go.

*/
