/**
 * Icons and "feature" box
 */



/* Icon %%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%% */

div.icon, /*backward compatibility*/
span.icon {
	background-color:#999;
	background-position:0 0;
	background-repeat:no-repeat;
	border-radius:50%;
	
	vertical-align:middle;
	display:inline-block;
	width:30px;
	height:30px;
	padding:3px;
}
div.icon.large, /*backward compatibility*/
span.icon.large {
	width:50px;
	height:50px;
	padding:5px;
}


/* Icons: single characters (letters, numbers etc.)
%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
*/
/* "i-number" - class name for backward compatibility */
.icon.i-number,
.icon.i-char {
	font-size: 16px;
	line-height: 30px;
	font-weight: bold;
	text-align: center;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
}
.icon.large.i-number,
.icon.large.i-char {
	font-size: 20px;
	line-height: 50px;
	font-weight: normal;
}

/* Auto-size: allow for big icons */
.icon.auto-size { width: auto; max-width: none; height: auto; max-height: none; }