2 -webkit-box-sizing: border-box;
3 Box-Sizing: border-box;
4 -webkit-backface-visibility: hidden;
5 -webkit-transition: translate3d(0,0,0);
12 background: transparent;
14 -webkit-font-smoothing: antialiased !important;
17 font-family: 'Lato', sans-serif;
27 border-collapse: collapse;
29 border: 1px solid black;
33 border: 1px solid #000;
35 .team1color, .team2color {
40 background-color: red;
41 background-image: linear-gradient(to right, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
44 background-color: green;
45 background-image: linear-gradient(to left, rgba(0,0,0,0.2), rgba(0,0,0,0.05) 3px, rgba(0,0,0,0));
52 background: linear-gradient(to bottom, #00a, #008);
56 background: linear-gradient(to bottom, #00c, #00a);
61 /* Clock, to the right of score */
67 border-collapse: collapse;
69 border: 1px solid black;
72 border: 1px solid #000;
73 background: linear-gradient(to bottom, #00a, #008);
79 -webkit-transform:translateX(-200%);
81 .clockbug-animate-in {
82 -webkit-animation: from-left 1s ease;
84 .clockbug-animate-out {
85 -webkit-animation: to-left 1s ease;
86 -webkit-transform:translateX(-200%);
89 /* Comment, below score */
95 border-collapse: collapse;
97 border: 1px solid black;
100 border: 1px solid #000;
101 background: linear-gradient(to bottom, #00a, #008);
108 -webkit-transform:translateY(-40px);
110 .commentbug-animate-in {
111 -webkit-animation: from-top 0.5s ease;
113 .commentbug-animate-out {
114 -webkit-animation: to-top 0.5s ease;
115 -webkit-transform:translateY(-40px);
119 .lowerthird-headline {
124 border-collapse: collapse;
126 border: 2px solid #ccc;
130 /*background: linear-gradient(to right, #ccc, #fff 15px); */
131 background-image: url(lowerthird-bg.png);
133 /* padding-top: 20px; */
135 .lowerthird-headline-hidden {
140 .lowerthird-headline-animate-in {
141 -webkit-animation: scale-out 1.0s;
143 .lowerthird-headline-animate-out {
144 -webkit-animation: scale-in 1.0s;
146 .lowerthird-headline-content {
150 .lowerthird-headline-content-hidden {
151 clip: rect(0px,0px,200px,0px);
153 .lowerthird-headline-content-animate-in {
154 -webkit-animation: wipe-out 2.0s ease;
156 .lowerthird-headline-content-animate-out {
157 -webkit-animation: wipe-in 2.0s ease;
158 clip: rect(0px,0px,200px,0px);
160 .lowerthird-subheading {
167 border-collapse: collapse;
169 border: 1px solid black;
171 align-items: center; */
172 /*background: linear-gradient(to right, #44c, #33a 15px); */
173 background-image: url(lowerthird-bg2.png);
175 .lowerthird-subheading-hidden {
176 clip: rect(0px,0px,200px,0px);
178 .lowerthird-subheading-animate-in {
179 -webkit-animation: scale-out-small 1.6s ease;
181 .lowerthird-subheading-animate-out {
182 -webkit-animation: scale-in-small 1.6s ease;
185 -webkit-animation-fill-mode: both;
187 .lowerthird-subheading-content {
191 .lowerthird-subheading-content-hidden {
195 .lowerthird-subheading-content-animate-in {
196 -webkit-animation: wipe-out 2.2s ease;
198 .lowerthird-subheading-content-animate-out {
199 -webkit-animation: wipe-in 2.2s ease;
200 clip: rect(0px,0px,200px,0px);
202 .lowerthird-picture {
212 .lowerthird-picture-hidden {
217 .lowerthird-picture-animate-in {
218 -webkit-animation: scale-out 1.0s;
220 .lowerthird-picture-animate-out {
221 -webkit-animation: scale-in-no-border 1.0s;
223 .lowerthird-picture-content {
227 .lowerthird-picture-content-hidden {
228 clip: rect(0px,0px,200px,0px);
230 .lowerthird-picture-content-animate-in {
231 -webkit-animation: wipe-out 2.0s ease;
232 -webkit-animation-delay: 0.3s;
233 -webkit-animation-fill-mode: both;
235 .lowerthird-picture-content-animate-out {
236 -webkit-animation: wipe-in 2.0s ease;
237 clip: rect(0px,0px,200px,0px);
240 /* these are hidden when actually run in casparcg */
253 /* background: rgba(0, 0, 170, 0.8); */
254 background: transparent;
260 border-spacing: 0px 7px;
262 border-collapse: separate;
263 text-transform: uppercase;
267 text-transform: none;
271 text-transform: none;
274 -webkit-animation: fade-in 1.0s ease;
275 -webkit-animation-delay: 0.0s;
276 -webkit-animation-fill-mode: both;
278 #carousel tr.subfooter {
279 -webkit-animation: fade-in 1.0s ease;
280 -webkit-animation-delay: 0.25s;
281 -webkit-animation-fill-mode: both;
283 #carousel tr.subfooter th {
287 /* background: rgba(0, 0, 170, 0.8); */
288 background: linear-gradient(to bottom, rgba(0, 0, 170, 0.9), rgba(0, 0, 130, 0.9));
289 /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
290 -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
292 #carousel tr.footer {
293 -webkit-animation: fade-in 2.0s ease;
294 -webkit-animation-delay: 0.5s;
295 -webkit-animation-fill-mode: both;
297 #carousel td, #carousel th {
301 #carousel tr.footer td {
303 text-transform: none;
314 #carousel td.matchup {
319 text-transform: none;
321 #carousel .streamtime {
323 text-transform: none;
327 #carousel .playerpadding {
329 background: rgba(0,0,0,0);
331 #carousel th.playernum, #carousel .playername {
334 #carousel th.playernum {
337 padding-left: 0px; margin-left: 0px;
340 #carousel .playername {
341 text-transform: none;
345 .nplayed, .gd, .pts {
356 @-webkit-keyframes from-left {
358 -webkit-transform:translateX(-200%);
361 -webkit-transform:translateX(0);
364 @-webkit-keyframes to-left {
366 -webkit-transform:translateX(0);
369 -webkit-transform:translateX(-200%);
372 @-webkit-keyframes from-top {
374 -webkit-transform:translateY(-40px);
377 -webkit-transform:translateY(0);
380 @-webkit-keyframes to-top {
382 -webkit-transform:translateY(0);
385 -webkit-transform:translateY(-40px);
389 @-webkit-keyframes scale-out {
397 @-webkit-keyframes scale-in {
400 border: 2px solid #ccc;
404 border: 2px solid #ccc;
407 @-webkit-keyframes scale-in-no-border {
415 @-webkit-keyframes scale-out-small {
425 border: 1px solid black;
431 @-webkit-keyframes scale-in-small {
434 border: 1px solid black;
438 border: 1px solid black;
448 @-webkit-keyframes wipe-out {
450 clip: rect(0px,0px,200px,0px);
453 clip: rect(0px,0px,200px,0px);
456 clip: rect(0px,1050px,200px,0px);
459 @-webkit-keyframes wipe-in {
461 clip: rect(0px,1050px,200px,0px);
463 20% { /* Not symmetrical! */
464 clip: rect(0px,0px,200px,0px);
467 clip: rect(0px,0px,200px,0px);
470 @-webkit-keyframes fade-in {
478 @-webkit-keyframes fade-out {