.marker { 
	/* position, size */
	display:		inline-block;
	position: 		absolute; 
	width: 			4em; 
	height:			1em;
	padding: 		2.5em .5em 2.5em .5em;
	/* corners */
	border-radius: 	.5em;
	/* shadow */ 
	box-shadow: 	0 0 .5em 0 rgba(0, 0, 0, 1);
	/* text */
	font-family:	Verdana, Geneva, sans-serif;
	text-align:		center;
	color:			white;
	font-weight:	bold;
} 
.marker:before { /* inset border */
	content: 		"";
	position: 		absolute;
	top: 			.4em;
	left: 			.4em;
	right: 			.4em;
	bottom: 		.4em;
	border: 		.2em solid rgba(255, 255, 255, 1);
	border-radius:	.4em;
}
.marker.disabled:before { /* disabled version of marker  */
	content:	"\00D7"; /* × (&times) */
	color:		black;
	border:		none;
	font-size:	6em;
	position:	absolute;
	top:		-0.15em;
	left:		-.01em;
	opacity:	.5;
}
.marker::after { /* 'triangle' (bottom arrow) - color should(?) be same as .marker:before */
    content: 			"";
    position: 			absolute;
    width: 				0;
    height: 			0;
    margin-left:   		-0.5em;
    bottom: 	   		-1em;
    left: 				2.25em;
    box-sizing: 		border-box;
    border: 			.5em solid transparent;
    transform-origin: 	0 0;
    transform: 			rotate(-45deg);
    box-shadow: 		-.2em .2em .30em 0 rgba(0, 0, 0, .4);
}
/* font sizing */
.marker SPAN.one-digit { 
	font-size:		2.5em;
	line-height:	.3em; 
}
.marker SPAN.two-digit {
	font-size:		2em;
	line-height:	.5em; 
}
.marker SPAN.three-digit {
	font-size:		1.5em;
	line-height:	.75em; 
}

/* mouse hover */
.marker:hover 			{ transform:scale(1.1); cursor:pointer; }
.marker.disabled:hover 	{ transform:none;		cursor:default; }

/* COLORING */
/* red */
.marker-red					{ background: red; } 									/* marker */
.marker-red:after			{ border-color: transparent transparent red red; } 		/* triangle (arrow) */
.marker-red-frame:before	{ border-color: white; } 								/* inset border */
/* blue */
.marker-blue				{ background: blue; } 									/* marker */
.marker-blue:after			{ border-color: transparent transparent blue blue; } 	/* triangle (arrow) */
.marker-blue-frame:before	{ border-color: cyan; } 								/* inset border */
/* green */
.marker-green 				{ background: green; }									/* marker */
.marker-green:after			{ border-color: transparent transparent green green; }	/* triangle (arrow) */
.marker-green-frame:before	{ border-color: orange; }								/* inset border */
/* gray */
.marker-gray 				{ background: gray; }									/* marker */
.marker-gray:after			{ border-color: transparent transparent gray gray; }	/* triangle (arrow) */
.marker-gray-frame:before	{ border-color: black; }								/* inset border */

/**** E X A M P L E ****/
#big    { font-size:16px; background-color:gray; }
#medium { font-size:12px; background-color:lightgray; }
#small  { font-size:8px;  background-color:darkgray; }

.container { position:relative; min-height:10em; padding-bottom:1em; }