/*! Sprites CSS (all sprites created with TexturePacker) */
/*-------------------------*\
	$SPRITES
\*-------------------------*/

/* spriteJJCommons */
.spriteJJCommons {display:inline-block; overflow:hidden; background-repeat: no-repeat; background-image:url(../images/sprites/jjCommons.png); }


.btnX {width:26px; height:26px; background-position: -100px -38px}
.calendarIcon {width:23px; height:21px; background-position: -4px -136px}
.checkbox {width:16px; height:16px; background-position: -105px -98px}
.checkboxChecked {width:16px; height:16px; background-position: -65px -104px}
.cog {width:15px; height:15px; background-position: -125px -106px}
.deleteBtn {width:21px; height:21px; background-position: -31px -136px}
.instCloseBtn {width:123px; height:30px; background-position: -4px -4px}
.radio {width:16px; height:16px; background-position: -85px -98px}
.radioSelected {width:16px; height:16px; background-position: -65px -84px}
.twitterIcon {width:21px; height:18px; background-position: -40px -84px}


/*-------------------------*\
======= Manual actions ======(TODO: reduce these as possible)
\*-------------------------*/

/* All / Global */
/* ------------ */
/* Update all :hover states and move into 641+ area */


/*-------------------------*\
	641+
\*-------------------------*/
@media all and (min-width:641px) {
	/* spriteJJCommon :hover */ 
	.no-touch .btnX:hover { background-position: -100px -68px}
	.no-touch .myAccountLink:hover .cog {background-position: -144px -106px}
	.no-touch .deleteBtn:hover {background-position: -40px -106px}
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
    .twitterIcon {background-size: 128px auto; background-position: -88px -30px; }
    .radio {background-size: 128px auto;  background-position: -106px -64px}
    .radioSelected {background-size: 128px auto;  background-position: -88px -50px}        
    .checkbox {background-size: 128px auto; background-position:  -2px -49px}
    .checkboxChecked {background-size: 128px auto; background-position: -2px -82px}    
    .calendarIcon {background-size: 128px auto; background-position: -2px -19px}
    .cog {background-size: 128px auto; background-position: -111px -30px}
    .deleteBtn {background-size: 128px auto;background-position: -27px -19px}
    .btnX {background-size: 125px auto;background-position: -64px -2px}
        
    .oldIE .btnX {background-position: -100px -38px}
    .oldIE .calendarIcon { background-position: -4px -136px}
    .oldIE .checkbox {background-position: -105px -98px}
    .oldIE .checkboxChecked { background-position: -65px -104px}
    .oldIE .cog {background-position: -125px -106px}
    .oldIE .deleteBtn { background-position: -31px -136px}
    .oldIE .instCloseBtn { background-position: -4px -4px}
    .oldIE .radio { background-position: -85px -98px}
    .oldIE .radioSelected { background-position: -65px -84px}
    .oldIE .twitterIcon { background-position: -40px -84px}
}

@media all and (min-width:641px) and (-webkit-min-device-pixel-ratio: 1.5) {   
    .no-touch .myAccountLink:hover .cog {background-size: 128px auto; background-position: -111px -47px}	
    .no-touch .deleteBtn:hover {background-size: 128px auto; background-position: -65px -30px}
    .no-touch .btnX:hover {background-size: 125px auto; background-position: -91px -2px}
    
	.oldIE.no-touch .btnX:hover { background-position: -100px -68px}
	.oldIE.no-touch .myAccountLink:hover .cog {background-position: -144px -106px}
	.oldIE.no-touch .deleteBtn:hover {background-position: -40px -106px}
}