User:The Tiger Pro 9000/global.css

.segment { background: white; position: absolute; -webkit-transition: background 0.15s; -moze-transition: background 0.15s; transition: background 0.15s; }

.segment-1, .segment-2, .segment-3 { width: 76px; height: 12px; left: 12px; } .segment-1:before, .segment-2:before, .segment-3:before { content: ''; position: absolute; left: -12px; border-top: 6px solid transparent; border-right: 6px solid white; border-left: 6px solid transparent; border-bottom: 6px solid transparent; } .segment-1:after, .segment-2:after, .segment-3:after { content: ''; position: absolute; right: -12px; border-top: 6px solid transparent; border-right: 6px solid transparent; border-left: 6px solid white; border-bottom: 6px solid transparent; }

.segment-1 { top: 0; }

.segment-2 { top: 92px; width: 70px; left: 15px; }

.segment-3 { bottom: 6px; }

.segment-4, .segment-5, .segment-6, .segment-7 { width: 12px; height: 76px; } .segment-4:before, .segment-5:before, .segment-6:before, .segment-7:before { content: ''; position: absolute; top: -12px; border-top: 6px solid transparent; border-right: 6px solid transparent; border-left: 6px solid transparent; border-bottom: 6px solid white; left: 0; } .segment-4:after, .segment-5:after, .segment-6:after, .segment-7:after { content: ''; position: absolute; bottom: -12px; border-top: 6px solid white; border-right: 6px solid transparent; border-left: 6px solid transparent; border-bottom: 6px solid transparent; right: 0; }

.segment-4, .segment-5 { top: 15px; }

.segment-6, .segment-7 { bottom: 20px; }

.segment-4, .segment-6 { left: 0; }

.segment-5, .segment-7 { right: 0; }

-webkit-transition: background 5.0s; -moze-transition: background 5.0s; transition: background 5.0s; }
 * 1) body {

.clock { height: 200px; margin-top: 250px; text-align: center; position: relative; background: transparent; } .clock > div, .clock > div + div { margin-right: 20px; } .clock #seconds-ones, .clock #seconds-tens, .clock #minutes-ones, .clock #minutes-tens, .clock #hours-ones, .clock #hours-tens { display: inline-block; height: 100%; width: 100px; position: relative; } .clock #seconds-ones.time-0 .segment-2, .clock #seconds-tens.time-0 .segment-2, .clock #minutes-ones.time-0 .segment-2, .clock #minutes-tens.time-0 .segment-2, .clock #hours-ones.time-0 .segment-2, .clock #hours-tens.time-0 .segment-2 { visibility: hidden; } .clock #seconds-ones.time-1 .segment-1, .clock #seconds-tens.time-1 .segment-1, .clock #minutes-ones.time-1 .segment-1, .clock #minutes-tens.time-1 .segment-1, .clock #hours-ones.time-1 .segment-1, .clock #hours-tens.time-1 .segment-1 { visibility: hidden; } .clock #seconds-ones.time-1 .segment-2, .clock #seconds-tens.time-1 .segment-2, .clock #minutes-ones.time-1 .segment-2, .clock #minutes-tens.time-1 .segment-2, .clock #hours-ones.time-1 .segment-2, .clock #hours-tens.time-1 .segment-2 { visibility: hidden; } .clock #seconds-ones.time-1 .segment-3, .clock #seconds-tens.time-1 .segment-3, .clock #minutes-ones.time-1 .segment-3, .clock #minutes-tens.time-1 .segment-3, .clock #hours-ones.time-1 .segment-3, .clock #hours-tens.time-1 .segment-3 { visibility: hidden; } .clock #seconds-ones.time-1 .segment-4, .clock #seconds-tens.time-1 .segment-4, .clock #minutes-ones.time-1 .segment-4, .clock #minutes-tens.time-1 .segment-4, .clock #hours-ones.time-1 .segment-4, .clock #hours-tens.time-1 .segment-4 { visibility: hidden; } .clock #seconds-ones.time-1 .segment-6, .clock #seconds-tens.time-1 .segment-6, .clock #minutes-ones.time-1 .segment-6, .clock #minutes-tens.time-1 .segment-6, .clock #hours-ones.time-1 .segment-6, .clock #hours-tens.time-1 .segment-6 { visibility: hidden; } .clock #seconds-ones.time-2 .segment-4, .clock #seconds-tens.time-2 .segment-4, .clock #minutes-ones.time-2 .segment-4, .clock #minutes-tens.time-2 .segment-4, .clock #hours-ones.time-2 .segment-4, .clock #hours-tens.time-2 .segment-4 { visibility: hidden; } .clock #seconds-ones.time-2 .segment-7, .clock #seconds-tens.time-2 .segment-7, .clock #minutes-ones.time-2 .segment-7, .clock #minutes-tens.time-2 .segment-7, .clock #hours-ones.time-2 .segment-7, .clock #hours-tens.time-2 .segment-7 { visibility: hidden; } .clock #seconds-ones.time-3 .segment-4, .clock #seconds-tens.time-3 .segment-4, .clock #minutes-ones.time-3 .segment-4, .clock #minutes-tens.time-3 .segment-4, .clock #hours-ones.time-3 .segment-4, .clock #hours-tens.time-3 .segment-4 { visibility: hidden; } .clock #seconds-ones.time-3 .segment-6, .clock #seconds-tens.time-3 .segment-6, .clock #minutes-ones.time-3 .segment-6, .clock #minutes-tens.time-3 .segment-6, .clock #hours-ones.time-3 .segment-6, .clock #hours-tens.time-3 .segment-6 { visibility: hidden; } .clock #seconds-ones.time-4 .segment-1, .clock #seconds-tens.time-4 .segment-1, .clock #minutes-ones.time-4 .segment-1, .clock #minutes-tens.time-4 .segment-1, .clock #hours-ones.time-4 .segment-1, .clock #hours-tens.time-4 .segment-1 { visibility: hidden; } .clock #seconds-ones.time-4 .segment-3, .clock #seconds-tens.time-4 .segment-3, .clock #minutes-ones.time-4 .segment-3, .clock #minutes-tens.time-4 .segment-3, .clock #hours-ones.time-4 .segment-3, .clock #hours-tens.time-4 .segment-3 { visibility: hidden; } .clock #seconds-ones.time-4 .segment-6, .clock #seconds-tens.time-4 .segment-6, .clock #minutes-ones.time-4 .segment-6, .clock #minutes-tens.time-4 .segment-6, .clock #hours-ones.time-4 .segment-6, .clock #hours-tens.time-4 .segment-6 { visibility: hidden; } .clock #seconds-ones.time-5 .segment-6, .clock #seconds-tens.time-5 .segment-6, .clock #minutes-ones.time-5 .segment-6, .clock #minutes-tens.time-5 .segment-6, .clock #hours-ones.time-5 .segment-6, .clock #hours-tens.time-5 .segment-6 { visibility: hidden; } .clock #seconds-ones.time-5 .segment-5, .clock #seconds-tens.time-5 .segment-5, .clock #minutes-ones.time-5 .segment-5, .clock #minutes-tens.time-5 .segment-5, .clock #hours-ones.time-5 .segment-5, .clock #hours-tens.time-5 .segment-5 { visibility: hidden; } .clock #seconds-ones.time-6 .segment-5, .clock #seconds-tens.time-6 .segment-5, .clock #minutes-ones.time-6 .segment-5, .clock #minutes-tens.time-6 .segment-5, .clock #hours-ones.time-6 .segment-5, .clock #hours-tens.time-6 .segment-5 { visibility: hidden; } .clock #seconds-ones.time-7 .segment-2, .clock #seconds-tens.time-7 .segment-2, .clock #minutes-ones.time-7 .segment-2, .clock #minutes-tens.time-7 .segment-2, .clock #hours-ones.time-7 .segment-2, .clock #hours-tens.time-7 .segment-2 { visibility: hidden; } .clock #seconds-ones.time-7 .segment-3, .clock #seconds-tens.time-7 .segment-3, .clock #minutes-ones.time-7 .segment-3, .clock #minutes-tens.time-7 .segment-3, .clock #hours-ones.time-7 .segment-3, .clock #hours-tens.time-7 .segment-3 { visibility: hidden; } .clock #seconds-ones.time-7 .segment-4, .clock #seconds-tens.time-7 .segment-4, .clock #minutes-ones.time-7 .segment-4, .clock #minutes-tens.time-7 .segment-4, .clock #hours-ones.time-7 .segment-4, .clock #hours-tens.time-7 .segment-4 { visibility: hidden; } .clock #seconds-ones.time-7 .segment-6, .clock #seconds-tens.time-7 .segment-6, .clock #minutes-ones.time-7 .segment-6, .clock #minutes-tens.time-7 .segment-6, .clock #hours-ones.time-7 .segment-6, .clock #hours-tens.time-7 .segment-6 { visibility: hidden; } .clock #seconds-ones.time-9 .segment-6, .clock #seconds-tens.time-9 .segment-6, .clock #minutes-ones.time-9 .segment-6, .clock #minutes-tens.time-9 .segment-6, .clock #hours-ones.time-9 .segment-6, .clock #hours-tens.time-9 .segment-6 { visibility: hidden; }

.divider { display: inline-block; width: 26px; height: 200px; position: relative; } .divider:before, .divider:after { content: ''; position: absolute; width: 18px; height: 18px; background: white; left: 3px; } .divider:before { top: 20%; } .divider:after { top: 70%; }

/*# sourceMappingURL=style.css.map */