/* Image sprites.
   To create a div with fixed aspect ratio, see http://www.mademyday.de/css-height-equals-width-with-pure-css.html
   To calculate percentages for background size and positions, see http://www.browniesblog.com/A55CBC/blog.nsf/dx/responsive-css-sprites.html
*/

/********************/
/* Home Page sprite */
/********************/

/* Div 851x493px or scaled down maintaining aspect ratio */
.home-sprite-top{
	position: relative;
	max-width: 851px;
    background-image: url("/images/home-sprite.png");
    background-size: 235% auto;  /* total image width divided by display image width (2000 / 851 = 235%) */
    background-clip: padding-box;
    background-position: 0 0;
}
.home-sprite-top:before{
	content: "";
	display: block;
	padding-top: 57.9%; 	/* makes the div maintain its aspect ratio (493 / 851 = 57.9%) */
}

/* A bunch of 250x100 divs */
.home-sprite{
	position: relative;
	max-width: 250px;
    background-image: url("/images/home-sprite.png");
    background-size: 800% auto;  /* total image width divided by display image width (2000 / 250 = 800%) */
    background-clip: padding-box;
}
.home-sprite:before{
	content: "";
	display: block;
	padding-top: 40%; 	/* makes the dive maintain its aspect ratio (100 / 250 = 40%) */
}
.home-sprite1{
    background-position: 0 100%;  /* x: 0 / (2000 - 250) = 0%; y: 500 / (600 - 100) = 100% */
}
.home-sprite2{
    background-position: 14.28% 100%; /* x: 250 / (2000 - 250) = 14.28%; y: 500 / (600 - 100) = 100% */
}
.home-sprite3{
    background-position: 28.57% 100%; /* x: 500 / (2000 - 250) = 28.57%; y: 500 / (600 - 100) = 100% */
}
.home-sprite4{
    background-position: 42.86% 100%; /* x: 750 / (2000 - 250) = 42.86%; y: 500 / (600 - 100) = 100% */
}
.home-sprite5{
    background-position: 57.14% 100%; /* x: 1000 / (2000 - 250) = 57.14%; y: 500 / (600 - 100) = 100% */
}
.home-sprite6{
    background-position: 71.43% 100%; /* x: 1250 / (2000 - 250) = 71.43%; y: 500 / (600 - 100) = 100% */
}
.home-sprite7{
    background-position: 85.71% 100%; /* x: 1500 / (2000 - 250) = 85.71%; y: 500 / (600 - 100) = 100% */
}
.home-sprite8{
    background-position: 100% 100%; /* x: 1750 / (2000 - 250) = 100%; y: 500 / (600 - 100) = 100% */
}

/***************/
/* Main sprite */
/***************/

.main-sprite {
    background-image: url('/images/main-sprite.png?v=1.0');
}

/* Payments: div 361x30px or scaled down maintaining aspect ratio */
.main-sprite-payments {
	position: relative;
	max-width: 361px;
    background-size: 144% auto;  /* total image width divided by display image width (520 / 361 = 144%) */
    background-clip: padding-box;
    background-position: left bottom;
}
.main-sprite-payments:before {
	content: "";
	display: block;
	padding-top: 8.31%; 	/* makes the div maintain its aspect ratio (30 / 361 = 8.31%) */
}

.main-sprite-norton {
    width: 100px;
    height: 40px;
    background-position: -120px -77px;
}
.main-sprite-mcafee {
    width: 100px;
    height: 40px;
    background-position: -222px -77px;
}
.main-sprite-ssl {
    width: 100px;
    height: 40px;
    background-position: -324px -77px;
}
.main-sprite-moneyback {
    width: 118px;
    height: 118px;
    background-position: 0 0;
}
.main-sprite-bbb {
    width: 195px;
    height: 75px;
    background-position: -320px 0;
}
.main-sprite-approved {
    width: 195px;
    height: 75px;
    background-position: -120px 0;
}
