colinbate/jsbin.asuHobU.html

## jsbin.asuHobU.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Agents</title>
</head>
<body>
  <div class="square">
  <div class="box">
  <div class="agent mr-green"></div>
<div class="agent mr-gray"></div>
<div class="agent mr-blue"></div>
<div class="agent mr-red"></div>
<div class="agent mr-purple"></div>
<div class="agent mr-yellow"></div>
<div class="agent mr-orange"></div>
    </div></div>
</body>
</html>

## jsbin.asuHobU.less
/* CSS Agent Pawns: An Experiment by Colin Bate */

.agent.mr-gray {
	.make-agent(#b8bfb9);
}

.agent.mr-blue {
	.make-agent(#2569cc);
}

.agent.mr-red {
	.make-agent(#c0001b);
}

.agent.mr-purple {
	.make-agent(#303c9b);
}

.agent.mr-green {
	.make-agent(#409944);
}

.agent.mr-yellow {
	.make-agent(#feed38);
}

.agent.mr-orange {
	.make-agent(#e96823);
}

.make-agent(@base) {
  background-color: @base;
  background-image: -webkit-linear-gradient(top, lighten(@base, 10%), @base 80%);
  box-shadow: 0px 5px 0 darken(@base, 20%), 0 5px 3px #444, 0 8px 6px #999;
  &:after {
    background-color: #e96823;
    background-image: -webkit-radial-gradient(6px 5px, circle, lighten(@base, 10%), darken(@base, 20%));
    box-shadow: 1px 1px 0 darken(@base, 20%), 1px 3px 3px darken(@base, 10%);
  }
}

.agent {
	width: 50px; height: 20px;
	border-radius: ~"20px / 10px";
	position: relative;
	margin: 7px 0px;
	font-size: 6px;
	display: inline-block;
}

.agent:after {
	content: "";
	width: 26px; height: 20px;
	position: absolute;
	top: -5px;
	left: 12px;
	border-radius: ~"13px / 10px";
}

.box {
  display: inline-block;
  vertical-align: middle;
  background-color: #ccc;
  text-align: center;
  padding: 0;
}

.square {
  background-color: #fbb;
  width: 112px;
  height: 159px;
  padding: 0;
  margin: 0;

  &:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -0.25em;
  }
}

body { text-align: center }
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>Agents</title>
	</head>
	<body>
	<div class="square">
	<div class="box">
	<div class="agent mr-green"></div>
	<div class="agent mr-gray"></div>
	<div class="agent mr-blue"></div>
	<div class="agent mr-red"></div>
	<div class="agent mr-purple"></div>
	<div class="agent mr-yellow"></div>
	<div class="agent mr-orange"></div>
	</div></div>
	</body>
	</html>
	/* CSS Agent Pawns: An Experiment by Colin Bate */

	.agent.mr-gray {
	.make-agent(#b8bfb9);
	}

	.agent.mr-blue {
	.make-agent(#2569cc);
	}

	.agent.mr-red {
	.make-agent(#c0001b);
	}

	.agent.mr-purple {
	.make-agent(#303c9b);
	}

	.agent.mr-green {
	.make-agent(#409944);
	}

	.agent.mr-yellow {
	.make-agent(#feed38);
	}

	.agent.mr-orange {
	.make-agent(#e96823);
	}

	.make-agent(@base) {
	background-color: @base;
	background-image: -webkit-linear-gradient(top, lighten(@base, 10%), @base 80%);
	box-shadow: 0px 5px 0 darken(@base, 20%), 0 5px 3px #444, 0 8px 6px #999;
	&:after {
	background-color: #e96823;
	background-image: -webkit-radial-gradient(6px 5px, circle, lighten(@base, 10%), darken(@base, 20%));
	box-shadow: 1px 1px 0 darken(@base, 20%), 1px 3px 3px darken(@base, 10%);
	}
	}

	.agent {
	width: 50px; height: 20px;
	border-radius: ~"20px / 10px";
	position: relative;
	margin: 7px 0px;
	font-size: 6px;
	display: inline-block;
	}

	.agent:after {
	content: "";
	width: 26px; height: 20px;
	position: absolute;
	top: -5px;
	left: 12px;
	border-radius: ~"13px / 10px";
	}

	.box {
	display: inline-block;
	vertical-align: middle;
	background-color: #ccc;
	text-align: center;
	padding: 0;
	}

	.square {
	background-color: #fbb;
	width: 112px;
	height: 159px;
	padding: 0;
	margin: 0;

	&:before {
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.25em;
	}
	}

	body { text-align: center }