1 /* CSS Document 
  2    Stopwatch blinking lights and LED's
  3 ***/
  4 
  5 /* Red LED Starts Here */
  6 .led-red {
  7    margin: 0 auto;
  8    /* Let width & height be inherited from parent
  9    width: 24px;
 10    height: 24px;
 11    ***/
 12    background-color: #740000;
 13    border-radius: 50%;
 14    border: 0px none !important;
 15    box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #680000 0 -1px 4px, rgba(255, 0, 0, 0.5) 0 1px 4px;
 16    /* Animation reference
 17    ***/
 18 }
 19 .blink-red {
 20    -webkit-animation: blinkRed 1.0s infinite;
 21    -moz-animation: blinkRed 1.0s infinite;
 22    -ms-animation: blinkRed 1.0s infinite;
 23    -o-animation: blinkRed 1.0s infinite;
 24    animation: blinkRed 1.0s infinite;
 25 }
 26 @-webkit-keyframes blinkRed {
 27    from { background-color: #740000; }
 28    50% { background-color: #FF0000; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #680000 0 -1px 4px, rgba(255, 0, 0, 0.5) 0 1px 0;}
 29    to { background-color: #740000; }
 30 }
 31 @-moz-keyframes blinkRed {
 32    from { background-color: #740000; }
 33    50% { background-color: #FF0000; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #680000 0 -1px 4px, rgba(255, 0, 0, 0.5) 0 1px 0;}
 34    to { background-color: #740000; }
 35 }
 36 @-ms-keyframes blinkRed {
 37    from { background-color: #740000; }
 38    50% { background-color: #FF0000; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #680000 0 -1px 4px, rgba(255, 0, 0, 0.5) 0 1px 0;}
 39    to { background-color: #740000; }
 40 }
 41 @-o-keyframes blinkRed {
 42    from { background-color: #740000; }
 43    50% { background-color: #FF0000; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #680000 0 -1px 4px, rgba(255, 0, 0, 0.5) 0 1px 0;}
 44    to { background-color: #740000; }
 45 }
 46 @keyframes blinkRed {
 47    from { background-color: #740000; }
 48    50% { background-color: #FF0000; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #680000 0 -1px 4px, rgba(255, 0, 0, 0.5) 0 1px 0;}
 49    to { background-color: #740000; }
 50 }
 51 /* END of Red LED CSS */
 52 
 53 /* Yellow LED Starts Here */
 54 .led-yellow {
 55    margin: 0 auto;
 56    /* Let width & height be inherited from parent so 
 57       we can use a field of any size!
 58    width: 24px;
 59    height: 24px;
 60    ***/
 61    background-color: #808002;
 62    border: 0px none !important;
 63    border-radius: 50%;
 64    box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #747402 0 -1px 4px, #FF0 0 1px 4px;
 65 }
 66 .blink-yellow {
 67    -webkit-animation: blinkYellow 1.0s infinite;
 68    -moz-animation: blinkYellow 1.0s infinite;
 69    -ms-animation: blinkYellow 1.0s infinite;
 70    -o-animation: blinkYellow 1.0s infinite;
 71    animation: blinkYellow 1.0s infinite;
 72 }
 73 @-webkit-keyframes blinkYellow {
 74    from { background-color: #808002; }
 75    50% { background-color: #E1E104; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #747402 0 -1px 4px, #FFE700 0 1px 0; }
 76    to { background-color: #808002; }
 77 }
 78 @-moz-keyframes blinkYellow {
 79    from { background-color: #808002; }
 80    50% { background-color: #E1E104; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #747402 0 -1px 4px, #FFE700 0 1px 0; }
 81    to { background-color: #808002; }
 82 }
 83 @-ms-keyframes blinkYellow {
 84    from { background-color: #808002; }
 85    50% { background-color: #E1E104; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #747402 0 -1px 4px, #FFE700 0 1px 0; }
 86    to { background-color: #808002; }
 87 }
 88 @-o-keyframes blinkYellow {
 89    from { background-color: #808002; }
 90    50% { background-color: #E1E104; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #747402 0 -1px 4px, #FFE700 0 1px 0; }
 91    to { background-color: #808002; }
 92 }
 93 @keyframes blinkYellow {
 94    from { background-color: #808002; }
 95    50% { background-color: #E1E104; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #747402 0 -1px 4px, #FFE700 0 1px 0; }
 96    to { background-color: #808002; }
 97 }
 98 /* END of Yellow LED CSS */
 99 
100 /* Green LED Starts Here */
101 .led-green {
102    margin: 0 auto;
103    /* Let width & height be inherited from parent so 
104       we can use a field of any size!
105    width: 24px;
106    height: 24px;
107    ***/
108    background-color: #36670B;
109    border: 0px none !important;
110    border-radius: 50%;
111    box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #304701 0 -1px 4px, #89FF00 0 1px 4px;
112 }
113 .blink-green {
114    -webkit-animation: blinkGreen 1.0s infinite;
115    -moz-animation: blinkGreen 1.0s infinite;
116    -ms-animation: blinkGreen 1.0s infinite;
117    -o-animation: blinkGreen 1.0s infinite;
118    animation: blinkGreen 1.0s infinite;
119 }
120 @-webkit-keyframes blinkGreen {
121    from { background-color: #36670B; }
122    50% { background-color: #ABFF00; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #304701 0 -1px 4px, #89FF00 0 1px 0; }
123    to { background-color: #36670B; }
124 }
125 @-moz-keyframes blinkGreen {
126    from { background-color: #36670B; }
127    50% { background-color: #ABFF00; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #304701 0 -1px 4px, #89FF00 0 1px 0; }
128    to { background-color: #36670B; }
129 }
130 @-ms-keyframes blinkGreen {
131    from { background-color: #36670B; }
132    50% { background-color: #ABFF00; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #304701 0 -1px 4px, #89FF00 0 1px 0; }
133    to { background-color: #36670B; }
134 }
135 @-o-keyframes blinkGreen {
136    from { background-color: #36670B; }
137    50% { background-color: #ABFF00; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #304701 0 -1px 4px, #89FF00 0 1px 0; }
138    to { background-color: #36670B; }
139 }
140 @keyframes blinkGreen {
141    from { background-color: #36670B; }
142    50% { background-color: #ABFF00; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #304701 0 -1px 4px, #89FF00 0 1px 0; }
143    to { background-color: #36670B; }
144 }
145 /* END of Green LED CSS */
146 
147 /* Blue LED Starts Here */
148 .led-blue {
149    margin: 0 auto;
150    /* Let width & height be inherited from parent so 
151       we can use a field of any size!
152    width: 24px;
153    height: 24px;
154    ***/
155    background-color: #0A6078;
156    border: 0px none !important;
157    border-radius: 50%;
158    box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #006 0 -1px 4px, #3D86F5 0 1px 4px;
159 }
160 .blink-blue {
161    -webkit-animation: blinkBlue 1.0s infinite;
162    -moz-animation: blinkBlue 1.0s infinite;
163    -ms-animation: blinkBlue 1.0s infinite;
164    -o-animation: blinkBlue 1.0s infinite;
165    animation: blinkBlue 1.0s infinite;
166 }
167 @-webkit-keyframes blinkBlue {
168    from { background-color: #0A6078; }
169    50% { background-color: #24E0FF; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #006 0 -1px 4px, #3D86F5 0 1px 0; }
170    to { background-color: #0A6078; }
171 }
172 @-moz-keyframes blinkBlue {
173    from { background-color: #0A6078; }
174    50% { background-color: #24E0FF; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #006 0 -1px 4px, #3D86F5 0 1px 0; }
175    to { background-color: #0A6078; }
176 }
177 @-ms-keyframes blinkBlue {
178    from { background-color: #0A6078; }
179    50% { background-color: #24E0FF; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #006 0 -1px 4px, #3D86F5 0 1px 0; }
180    to { background-color: #0A6078; }
181 }
182 @-o-keyframes blinkBlue {
183    from { background-color: #0A6078; }
184    50% { background-color: #24E0FF; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #006 0 -1px 4px, #3D86F5 0 1px 0; }
185    to { background-color: #0A6078; }
186 }
187 @keyframes blinkBlue {
188    from { background-color: #0A6078; }
189    50% { background-color: #24E0FF; box-shadow: rgba(0, 0, 0, 0.2) 0 0 2px 1px, inset #006 0 -1px 4px, #3D86F5 0 1px 0; }
190    to { background-color: #0A6078; }
191 }
192 /* END of Blue LED CSS */