BODY, .canvas {margin:0px;text-align:center;}

.container
{
	display:inline-block;
	min-width:200px;
	width:auto;

	/*border: 1px solid #ddd;*/
	margin:3px;
	padding:5px;
	border-radius:10px;
	text-align:center;
	position: relative;
}

.clock
{
	/*left: 10px;
	top:10px;*/
	width: 250px;
	height: 250px;
	margin: 10px;
	border-radius: 50%;
	border: 0.5em solid #000;
	position: relative;
	font-size:13px;
	font-weight:bold;
	font-family:Arial;
	text-shadow: 0 0 3px #ddd, 0 0 5px #444;
	display:inline-block;
	background-color:#f0f0e0;
	box-shadow: 0px 0px 8px 2px rgba(0,0,0,1.9);
}

.circ {
	width: 2%;
	height: 2%;
	position: absolute;
	left: 49%;
	top:49%;
	border-radius: 50%;
	display:inline-block;
	background-color:#000;
	box-shadow: 0px 0px 1px 1px rgba(0,0,0,.9);
	z-index:110;
}

.hand
{
	z-index:100;
	position: absolute;
	left: 50%;
	transform-origin: 50% 100%;
	/*background-color: #000;*/
	border:0;
	display:inline-block;
	border-top-left-radius:50%;
	border-top-right-radius:50%;
	box-shadow: .12em .12em .12em .02em rgba(0, 0, 0, 0.1);
	--widthH: 0.18;
	width: calc(var(--widthH) * 1%);
	margin-left: calc(var(--widthH) / -2 * 1%);

/*/	height: 42%;
	top:     8%;*/
	background-color:  #000;
}

/* a little sun where the Sun really is */
.si2_hand_0:before,
.si3_hand_0:before,
.dec_hand_0:before,
.dec2_hand_0:before,
.dec4_hand_0:before {
	border-radius: 40%;
	content: "🌞";
	position: absolute;
	top: -0%;
	left: -250%;
	height: 8%;
	width: 600%;
	font-size:100%;
	z-index: 100;
}

.hand_0  {--widthH: 2.5;}
.hand_1  {--widthH: 2  ;}
.hand_2  {--widthH: 1  ;}
.hand_3  {--widthH: 0.5;}

/*
.hand_1:before, .hand_2:before {
	border-radius: 50%;
	content: '●';
	font-size:50%;
	position: relative;
	height: 6%;
	text-align: center;
	display: inline-block;
}

.hand_1:before {top: 40%; left:   0%; margin-left: -100%; font-size: 150%;}
.hand_2:before {top: 10%; left:   0%; margin-left: -250%; font-size: 150%;}
*/

/*
.hand_0:before, .hand_1:before, .hand_2:before {
	border-radius: 50%;
	content: '9';
	background-color: cyan;
	font-size:50%;
	position: relative;
	height: 6%;
	width: 280%;
	/ *width: calc(--widthH * 80%)* /
	border:1px solid red;
	text-align: center;
	display: inline-block;
	transform: scale(2.5);
}
*/
.hand_decoration
{
	position: relative;
	top: 100%;
	width: 200%;
	left: -50%;
	border: 0px solid red;
	border-radius: 10%;
/*	border-radius: 50%;*/
/*	border-top-left-radius:50%;
	border-top-right-radius:50%;*/
transform: rotate(45deg);
text-align:center;
	background-color: inherit;

}


/*.hand_1:before {top: 40%; left:   0%; margin-left: -100%; font-size: 150%;}
.hand_2:before {top: 10%; left:   0%; margin-left: -250%; font-size: 150%;}
*/

.tick_units{
	position: absolute;
	display: inline-block;
	background-color: #000;
	left: 50%;
	box-shadow: 0px 2px 2px 1px rgba(0, 0, 0, 0.1);

	--widthA: 0.3%;
	width: var(--widthA);
	margin-left: calc(var(--widthA) / -2);

	--heightA: 2;
	height: calc(1% * var(--heightA));
	transform-origin: center calc(5000% / var(--heightA));
}

.tick_units_0  {--widthA: 1.5%; --heightA: 4.7;}
.tick_units_1  {--widthA: 0.5%; --heightA: 4;}
.tick_units_2  {--widthA: 0.3%; --heightA: 3;}


.terminator_hour { background-color: red; }

.digits DIV {
	position: absolute;
	width: 20%;
	height: 6%;
	left: 50%;
	margin-left: -10%;/* width/2 */
	margin-top: 4.5%;
	text-align:center;
	display:inline-block;
	transform-origin: center 760%;
	z-index:1;
}

.digital_display
{
	/*white-space:nowrap;*/
	word-break: break-all;
	line-height: 1.5em;
	text-align: center;
	font-size: 1.5em;
	font-weight: bold;
	font-family: 'Droid Sans Mono', Consolas,Menlo,Monaco,'Lucida Console','Liberation Mono','DejaVu Sans Mono','Bitstream Vera Sans Mono','Courier New',monospace;
}

.customize_button, .info_button
{
	position:absolute;
	right: 25px;
	top:10px;
	width: 15px;
	height: 15px;
	border-radius: 4px;
	border: 1px solid #ddd;
	font-size:12px;
	line-height:17px;
	text-align:center;
	cursor:pointer;
}

.info_button
{
	right: 10px;
}


/*UI*/


#menu, #cu_customization {
position:absolute;
top: 5px;
height:20px;
width:20px;
overflow:hidden;
border: 0px solid red;
display:block;
line-height:25px;
background-color: rgba(255,255,255,0.95);
padding:8px;
box-shadow: 1px 1px 1px 1px rgba(0,0,0,1.9);
border-radius:4px;
text-align:left;
}
#menu{
left:5px;
z-index:200;
}
#menu:hover, #menu:active {
height:auto;
width:auto;
padding-bottom:15px;

}

#menu A {
display:block;
color:#29d;
text-decoration:none;
}

A:before {
	content: '● ';
}
#menu A:hover {
text-decoration:underline;
}

#cu_customization{
left:45px;
z-index:199;
}
#cu_customization:hover, #cu_customization:active {
height:auto;
width:auto;

padding-bottom:15px;
}