@import "../../style"

$img_path: 'images/'
$over: '_over'
$all_buttons: 'sprite_buttons.png'

@mixin col_and_buttons
	@include column
	@include buttons

@mixin column
	border: 1px solid red
	width: 200px
	padding: 20px
	margin: 10px
	float: left		

@mixin buttons
	@each $image in img1, img2, img3, img4
		// main list style
		.#{$image}
			list:
				style:
					type: none
			// buttons
			a
				display: block
				height: 100px
				background:
					image: url('#{$img_path}#{$image}.jpg')
					repeat: no-repeat
					position: 20px
			// mouse over buttons
			a:hover
				background:
					image: url('#{$img_path}#{$image}#{$over}.jpg')
					repeat: no-repeat
										
#clear
	clear: both
	
	
#no_sprite
	@include col_and_buttons
	
#sprites
	@include column
	li
		list-style-type: none
		height: 100px
		$i: 0
		$j: 98
		$k: 196
		@each $image in sprite-img1, sprite-img2, sprite-img3, sprite-img4
			a.#{$image}
				background: url(#{$img_path}#{$all_buttons}) no-repeat top left
				background-position: 0 -#{$i}px
				display: block  
				width: 48px
				height: 48px
				padding: 0 70px
				$i: $i+$k
			a.#{$image}:hover
				background-position: 0 -#{$j}px
				$j: $j+$k
								
#lemonade
	@include col_and_buttons