.timer {
	position:absolute;
	font-size: 120px;
	width:1em;
	height:1em;
	float: left;
	z-index:98;
	top:20px;
	left:20px;
}
.timer > .percent {
	position: absolute;
	top: 1.05em;
	left: 0;
	width: 3.33em;
	font-size: 0.3em;
	text-align:center;
	line-height:1em;
}
.percent_detail{ font-size:16px; line-height:1em;}

.timer > #slice {
	position:absolute;
	width:1em;
	height:1em;
	clip:rect(0px,1em,1em,0.5em);
}
.timer > #slice.gt50 {
	clip:rect(auto, auto, auto, auto);
}
.timer > #slice > .pie {
	border: 0.1em solid #DD8B34;
	position:absolute;
	width:0.8em; /* 1 - (2 * border width) */
	height:0.8em; /* 1 - (2 * border width) */
	clip:rect(0em,0.5em,1em,0em);
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em; 
	border-radius:0.5em; 
	z-index:2;
}
.timer > #slice > .pie.fill {
	-moz-transform:rotate(180deg) !important;
	-webkit-transform:rotate(180deg) !important;
	-o-transform:rotate(180deg) !important;
	transform:rotate(180deg) !important;
}
.timer.fill > .percent {
	display: none;
}




.timer.fill > #slice > .pie {
	border: transparent;
	background-color: #c0c0c0;
	width:1em;
	height:1em;
}

.timer > #slice2 {
	position:absolute;
	width:1em;
	height:1em;
	clip:rect(auto, auto, auto, auto);
	opacity:0.5;
}

.timer > #slice2 > .pie_back {
	border: 0.1em solid #f0f0f0;
	position:absolute;
	width:0.8em; /* 1 - (2 * border width) */
	height:0.8em; /* 1 - (2 * border width) */
	z-index:1;
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em; 
	border-radius:0.5em; 
}

.timer > .bg {
	background-color:rgba(255,255,255,0.5);
	width:100%;
	height:100%;
	top:0px;
	left:0px;
	z-index:0;
	position:absolute;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}