.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
.optionable {
	position:relative;
}
.optionable .shadow {
	position:absolute;
	display:none;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: rgba(75, 75, 75, 0.7);
	box-sizing: border-box;
}

.optionable .shadow div {
	position:absolute;
	box-sizing: border-box;
	width:100%;
	padding:0;
	margin:0;
}
.optionable .shadow div div{
	display: inline-block;
	position:relative;
	list-style: none;
}
.optionable .shadow div div.button{
	background:rgb(200, 200, 200);
	-webkit-border-radius: 3px;
		moz-border-radius: 3px;
		min-width:24px;
		min-height: 26px;
		max-width: 50%;
	border-radius: 3px;
	cursor: pointer;
	color:#626262;
}
.optionable .shadow div div.button:hover {
	background:rgb(120, 120, 120);
	color:#FFF;
}
.optionable .shadow div div.button[class^="ti-"], [class*=" ti-"] {
	box-sizing: border-box !important;
	padding: 3%!important;
	text-align:center;
	font-size:1.1em;
}
.optionable .shadow div div.button .bubble {
	display:none;
	position:absolute;
	padding: 5px 5px;
	margin-top:7px;
	width:auto;
	min-width:90%;
	text-align: center;
	background:#000;
	font-size:0.6em;
	font-weight: 700;
	color:#FFF;
	z-index:9999;
}
.optionable .shadow div div.button .bubble:before{
	content: '';
    position: absolute;
    top:-7px;
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #000;
    clear: both;
}
.optionable .shadow div div.button:hover .bubble {
	display:block;
}