.kingdom-wide-clock.outer_face.small
{
    width: 125px; /* width of clock */
    height: 125px; /* height of clock */
    box-shadow: inset 0 0 5px gray;	
}

.kingdom-wide-clock.outer_face.medium
{
    width: 200px; /* width of clock */
    height: 200px; /* height of clock */
    box-shadow: inset 0 0 10px gray;
}

.kingdom-wide-clock.outer_face.large
{
    width: 300px; /* width of clock */
    height: 300px; /* height of clock */
    box-shadow: inset 0 0 15px gray;
}

.kingdom-wide-clock.outer_face
{
    border-radius: 50%;
    position: relative;
    background: white;
    border: 0 solid gray; /* thickness of outer border */
    display: inline-block;
    margin: 0 10px 80px 10px;
}

.kingdom-wide-clock.outer_face::before, 
.kingdom-wide-clock.outer_face::after, 
.kingdom-wide-clock.outer_face .marker
{ /* time markers syle */
    content: "";
    position: absolute;
    width: 8px; /* width of 12-6 and 3-9 markers */
    height: 100%;
    background: black;
    z-index: 0;
    left: 50%;
    margin-left: -4px; /* set this value of 1/2 marker width */
    top: 0
}

.kingdom-wide-clock.outer_face::after
{
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg)
}

.kingdom-wide-clock.outer_face .marker
{
    background: gray;
    width: 6px; /* width of all other markers */
    margin-left: -3px /* set this value of 1/2 marker width */
}

.kingdom-wide-clock.outer_face .marker.oneseven
{
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg)
}

.kingdom-wide-clock.outer_face .marker.twoeight
{
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg)
}

.kingdom-wide-clock.outer_face .marker.fourten
{
    -moz-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    -webkit-transform: rotate(120deg);
    transform: rotate(120deg)
}

.kingdom-wide-clock.outer_face .marker.fiveeleven
{
    -moz-transform: rotate(150deg);
    -ms-transform: rotate(150deg);
    -webkit-transform: rotate(150deg);
    transform: rotate(150deg)
}

.kingdom-wide-clock .inner_face
{
    position: relative;
    width: 88%;
    height: 88%;
    background: white;
    -moz-border-radius: 1000px;
    -webkit-border-radius: 1000px;
    border-radius: 1000px;
    z-index: 1000;
    left: 6%; /* set this value of 1/2 width value*/
    top: 6% /* set this value of 1/2 height value*/
}

.kingdom-wide-clock .inner_face::before
{
    /* clock center circle small */
    content: "";
    width: 18px; /* width of inner circle */
    height: 18px; /* height of inner circle */
    border-radius: 50%;
    margin-left: -9px; /* set this value of 1/2 width value*/
    margin-top: -9px; /* set this value of 1/2 height value*/
    background: black;
    position: absolute;
    top: 50%;
    left: 50%;
    box-shadow: 0 0 30px blue;
}

.kingdom-wide-clock .inner_face::after
{
    text-transform: uppercase;
    position: absolute;
    width: 100%;
    font: normal 12px Arial;
    color: gray;
    text-align: center;
    top: 80%;
}

.kingdom-wide-clock .hand, 
.kingdom-wide-clock .hand.hour
{
    position: absolute;
    width: 8px; /* width of hour hand */
    height: 30%; /* height of hour hand */
    top: 20%; /* set top to 50% - height */
    left: 50%;
    margin-left: -4px; /* set this value to 1/2 width */
    background: black;
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -moz-transform-origin: bottom;
    -ms-transform-origin: bottom;
    -webkit-transform-origin: bottom;
    transform-origin: bottom;
    z-index: -1;
    -moz-box-shadow: 0 0 3px gray;
    -webkit-box-shadow: 0 0 3px gray;
    box-shadow: 0 0 3px gray;
    border-radius: 50% 50%;
}

.kingdom-wide-clock .hand.minute
{
    height: 45%; /* height of min hand */
    top: 5%; /* set top to 50% - height */
    width: 5px; /* width of min hand */
    margin-left: -2.5px; /* set this value to 1/2 width */
}

.kingdom-wide-clock .hand.second
{
    height: 50%; /* height of sec hand */
    width: 2px; /* width of sec hand */
    margin-left: -1px; /* set this value to 1/2 width */
    top: 0;
    background: red;
}

.kingdom-wide-clock.r .hand.minute,
.kingdom-wide-clock.r .hand.hour
{
	transition: all 0.7s ease-in;
}

.kingdom-wide-clock .digital
{
    position: absolute;
    width: 100%;
    color: black;
    text-align: center;
    bottom: -45px;
    z-index: 1002;
    font: normal 25px Arial;
}


/*=============================================================================================*/

.kingdom-wide-clock.outer_face.small::before, 
.kingdom-wide-clock.outer_face.small::after, 
.kingdom-wide-clock.outer_face.small .marker
{ /* time markers syle */
    width: 4px; /* width of 12-6 and 3-9 markers */
    margin-left: -2px; /* set this value of 1/2 marker width */
}

.kingdom-wide-clock.outer_face.small .marker
{
    background: gray;
    width: 4px; /* width of all other markers */
    margin-left: -2px /* set this value of 1/2 marker width */
}

.kingdom-wide-clock.small .inner_face::before
{
    width: 12px; /* width of inner circle */
    height: 12px; /* height of inner circle */
    margin-left: -6px; /* set this value of 1/2 width value*/
    margin-top: -6px; /* set this value of 1/2 height value*/
    box-shadow: 0 0 20px blue;
}

.kingdom-wide-clock.small .hand, 
.kingdom-wide-clock.small .hand.hour
{
    width: 4px; /* width of hour hand */
    margin-left: -2px; /* set this value to 1/2 width */
    -moz-box-shadow: 0 0 2px gray;
    -webkit-box-shadow: 0 0 2px gray;
    box-shadow: 0 0 2px gray;
}

.kingdom-wide-clock.small .hand.minute
{
    width: 3px; /* width of min hand */
    margin-left: -1.5px; /* set this value to 1/2 width */
}

.kingdom-wide-clock.small .hand.second
{
    width: 1px; /* width of sec hand */
    margin-left: -0.5px; /* set this value to 1/2 width */
}

.kingdom-wide-clock.small .inner_face::after
{
    top: 115%;
    font: normal 9px Arial;
}

.kingdom-wide-clock.large .inner_face::after
{
    top: 85%;
}

.kingdom-wide-clock.small .digital
{
    font-size: 18px;
    bottom: -60px;
}

.kingdom-wide-clock.large .digital
{
    font-size: 28px;
    bottom: -60px;
}

/*=============================================================================================*/

.kingdom-wide-aq
{
	border: solid 1px silver;
	padding: 10px 0 0 0;
	width: auto;
	display: inline-block;
	border-radius: 3px;
	background: #e8e8e8;
}

.kingdom-wide-aq span
{
	display: block;
	text-align: center;
	font-size: 12px;
	color: gray;
}