/* ------- Clock container ------ */

div#clock {
    position:relative; /* childs are abs. positionned */
    display:block;
    width:248px; height:248px; /* keep square */
    border-radius:50%; /* All round */
    margin:20px auto; /* as you want, or float left */
    transition: all 250ms linear; /* for mouseover effect */
        -webkit-transition:all 250ms linear;
        -moz-transition:all 250ms linear;
        -ms-transition:all 250ms linear;
        -o-transition:all 250ms linear;
    background: transparent url(../images/clock/back.png) no-repeat scroll left top;
    }
    /*div#clock:hover {
        transform:scale(1.3);
            -moz-transform:scale(1.3);
            -webkit-transform:scale(1.3);
            -ms-transform:scale(1.3);
            -o-transform:scale(1.3);           
    }*/

/* ------- JS elements ------ */

div.innerCenter {
    position:absolute;
    z-index:0;
    top:50%; left:50%;
    width:150px; height:150px; /* diameter */
    margin:-75px 0 0 -75px; /* centered with half diameter */
    border-radius:50%;
    box-shadow:0 0 3px rgba(255,255,255,0.2), 0 0 10px rgba(255,255,255,0.2);
        -moz-box-shadow:0 0 3px rgba(255,255,255,0.2), 0 0 10px rgba(255,255,255,0.2);
        -webkit-box-shadow:0 0 3px rgba(255,255,255,0.2), 0 0 10px rgba(255,255,255,0.2);
        -ms-box-shadow:0 0 3px rgba(255,255,255,0.2), 0 0 10px rgba(255,255,255,0.2);
        -o-box-shadow:0 0 3px rgba(255,255,255,0.2), 0 0 10px rgba(255,255,255,0.2);
}
div.sec, div.min, div.hour {
    position:absolute;
    top:0px;
    left:124px; /* half #clock width */
    height:248px; /* #clock height */
    /* transition: all 200ms linear; // rotate anticlockwise from 359° to >0° */
}
    div.sec {
        width:22px;
        z-index:12;
        left: 114px;
    }
    div.min {
        width:22px;
        left:114px; /* half #clock width minus half this width (-1px) */
        z-index:10;
    }
    div.hour {
        width:22px;
        left:114px;
        z-index:11;
    }

div.clockwise {
    position:absolute;
    left:0; right:0;
    bottom:49%; /* center of the #clock inside hour,min,sec */
    background:#FFF;
    background:rgba(255,255,255,0.4);
    /*border-radius:2px;
    box-shadow:0 0 3px rgba(255,255,255,0.25);
        -moz-box-shadow:0 0 3px rgba(255,255,255,0.25);
        -webkit-box-shadow:0 0 3px rgba(255,255,255,0.25);
        -ms-box-shadow:0 0 3px rgba(255,255,255,0.25);
        -o-box-shadow:0 0 3px rgba(255,255,255,0.25);*/
}
    div.sec div.clockwise {
    	top:32px; /* dist from clock border */
    	background: transparent url(../images/clock/seconds_new.png) no-repeat scroll left top;
    	height: 101px;
    }
    div.min div.clockwise {
    	top:26px;
    	background: transparent url(../images/clock/minutes_new.png) no-repeat scroll left top;
    	height:101px;
    }
    div.hour div.clockwise {
    	top:26px;
    	background: transparent url(../images/clock/hours_new.png) no-repeat scroll left top;
    	height:101px;
    	/*left: 3px;*/
    }

div.digit, div.time {
    position:absolute;
    z-index:5;
    width:18px; height:18px;
    font:10px/18px 'Orbitron', arial,verdana,sans-serif;
    text-align:center;
    color:#FFF;
    color:rgba(255,255,255,0.33);
    text-shadow:0 0 2px rgba(255,255,255,0.25);
    /* border-radius:50%;
    box-shadow:inset 0 0 3px rgba(255,255,255,0.3);
        -moz-box-shadow:inset 0 0 3px rgba(255,255,255,0.3);
        -webkit-box-shadow:inset 0 0 3px rgba(255,255,255,0.3);
        -ms-box-shadow:inset 0 0 3px rgba(255,255,255,0.3);
        -o-box-shadow:inset 0 0 3px rgba(255,255,255,0.3); */
}
    div.digit span {
        color:rgba(255,255,255,0.75); /* 12, 3, 6 and 9 */
    }

div.time {
    top:68%; left:50%;
    width:130px; /* clock width */
    height:12px; /* diameter */
    margin:-6px 0 0 -65px; /* centered with half width*/
    font:10px/12px 'Courrier New', 'Courier', serif;
    text-align:center;
    color:#FFF;
    color:rgba(255,255,255,0.3);
    /*text-shadow:0 1px 0 rgba(155,155,155,0.45);*/
}

div#clock div.heart {
	background: transparent url(../images/clock/heart.png) no-repeat scroll left top;
	width: 248px;
	height: 248px;
	z-index: 2;
	position: absolute;
}
div#clock div.brain {
	background: transparent url(../images/clock/brain.png) no-repeat scroll left top;
	width: 248px;
	height: 248px;
	z-index: 3;
	position: absolute;
}
div#clock div.red {
	background: transparent url(../images/clock/red.png) no-repeat scroll left top;
	width: 248px;
	height: 248px;
	z-index: 4;
	position: absolute;
}
div#clock div.black {
	background: transparent url(../images/clock/black.png) no-repeat scroll left top;
	width: 248px;
	height: 248px;
	z-index: 5;
	position: absolute;
}
div#clock div.bezel {
	background: transparent url(../images/clock/bezel.png) no-repeat scroll left top;
	width: 248px;
	height: 248px;
	z-index: 5;
	position: absolute;
}