/*
	-- -- -- -- -- -- --
	MULTI-MEDIA INTERACTIVE
	Description: Icon Rules
	Last Update: 8/20/2011
	Authors: Ryan Schoch
	Copyright 2011 Multi-Media Interactive 
	
	Dependencies
	 - reset.less
	-- -- -- -- -- -- --
*/

@import 'common.less'; /* Needed for LESS variables/mixins/functions */

/* Icons >>
-------------------------------------------------------------- */
.mm_icon {
	background: transparent url(imgs/sprite.icons.png) 0 0 no-repeat;
	.inline-block();
	
	/* Networking >>
	-------------------------------------------------------------- */
	&.facebook {
		background-position: 0 -150px;
		width: 24px;
		height: 24px;
	}
	
	&.twitter {
		background-position: 0 -180px;
		width: 24px;
		height: 24px;
	}
	
	&.linkedin {
		background-position: 0 -210px;
		width: 24px;
		height: 24px;
	}
	
	&.youtube {
		background-position: 0 -240px;
		width: 24px;
		height: 24px;
	}
	
	&.rss {
		background-position: 0 -270px;
		width: 24px;
		height: 24px;
	}
	
	/* Capabilities >>
	-------------------------------------------------------------- */
	&.web {
		background-position: 0 -320px;
		width: 16px;
		height: 14px;
	}
	
	&.mobile {
		background-position: 0 -350px;
		width: 11px;
		height: 16px;
	}
	
	&.video {
		background-position: 0 -380px;
		width: 16px;
		height: 13px;
	}
	
	&.motion {
		background-position: 0 -410px;
		width: 16px;
		height: 11px;
	}
	
	&.print {
		background-position: 0 -440px;
		width: 16px;
		height: 13px;
	}
	
	&.brand {
		background-position: 0 -470px;
		width: 16px;
		height: 16px;
	}
	
	&.graphic {
		background-position: 0 -510px;
		width: 16px;
		height: 13px;
	}
	
	&.writing {
		background-position: 0 -540px;
		width: 16px;
		height: 16px;
	}
	
	&.web-hover {
		background-position: 0 -570px;
		width: 16px;
		height: 14px;
	}
	
	&.mobile-hover {
		background-position: 0 -600px;
		width: 11px;
		height: 16px;
	}
	
	&.video-hover {
		background-position: 0 -630px;
		width: 16px;
		height: 13px;
	}
	
	&.motion-hover {
		background-position: 0 -660px;
		width: 16px;
		height: 11px;
	}
	
	&.print-hover {
		background-position: 0 -690px;
		width: 16px;
		height: 13px;
	}
	
	&.brand-hover {
		background-position: 0 -720px;
		width: 16px;
		height: 16px;
	}
	
	&.graphic-hover {
		background-position: 0 -750px;
		width: 16px;
		height: 13px;
	}
	
	&.writing-hover {
		background-position: 0 -780px;
		width: 16px;
		height: 16px;
	}
	
	&.close {
		background-position: 0 -830px;
		width: 20px;
		height: 20px;
	}
}