2 box-sizing: border-box;
9 background: transparent;
13 /* transform: scale(1.5);
14 transform-origin: top left; */
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; */
137 .lowerthird-headline-hidden {
142 .lowerthird-headline-animate-in {
143 -webkit-animation: scale-out 1.0s;
145 .lowerthird-headline-animate-out {
146 -webkit-animation: scale-in 1.0s;
148 .lowerthird-headline-content {
152 .lowerthird-headline-content-hidden {
153 clip: rect(0px,0px,200px,0px);
155 .lowerthird-headline-content-animate-in {
156 -webkit-animation: wipe-out 2.0s ease;
158 .lowerthird-headline-content-animate-out {
159 -webkit-animation: wipe-in 2.0s ease;
160 clip: rect(0px,0px,200px,0px);
161 -webkit-animation-fill-mode: both;
163 .lowerthird-subheading {
170 border-collapse: collapse;
172 border: 1px solid black;
174 align-items: center; */
175 /*background: linear-gradient(to right, #44c, #33a 15px); */
176 background-image: url(lowerthird-bg2.png);
180 .lowerthird-subheading-hidden {
181 clip: rect(0px,0px,200px,0px);
183 .lowerthird-subheading-animate-in {
184 -webkit-animation: scale-out-small 1.6s ease;
186 .lowerthird-subheading-animate-out {
187 -webkit-animation: scale-in-small 1.6s ease;
190 -webkit-animation-fill-mode: both;
192 .lowerthird-subheading-content {
196 .lowerthird-subheading-content-hidden {
200 .lowerthird-subheading-content-animate-in {
201 -webkit-animation: wipe-out 2.2s ease;
203 .lowerthird-subheading-content-animate-out {
204 -webkit-animation: wipe-in 2.2s ease;
205 clip: rect(0px,0px,200px,0px);
207 .lowerthird-picture {
217 .lowerthird-picture-hidden {
222 .lowerthird-picture-animate-in {
223 -webkit-animation: scale-out 1.0s;
225 .lowerthird-picture-animate-out {
226 -webkit-animation: scale-in-no-border 1.0s;
228 .lowerthird-picture-content {
232 .lowerthird-picture-content-hidden {
233 clip: rect(0px,0px,200px,0px);
235 .lowerthird-picture-content-animate-in {
236 -webkit-animation: wipe-out 2.0s ease;
237 -webkit-animation-delay: 0.3s;
238 -webkit-animation-fill-mode: both;
240 .lowerthird-picture-content-animate-out {
241 -webkit-animation: wipe-in 2.0s ease;
242 clip: rect(0px,0px,200px,0px);
245 /* these are hidden when actually run in casparcg */
258 /* background: rgba(0, 0, 170, 0.8); */
259 background: transparent;
265 border-spacing: 0px 7px;
267 border-collapse: separate;
268 text-transform: uppercase;
272 text-transform: none;
276 text-transform: none;
279 -webkit-animation: fade-in 1.0s ease;
280 -webkit-animation-delay: 0.0s;
281 -webkit-animation-fill-mode: both;
283 #carousel tr.subfooter {
284 -webkit-animation: fade-in 1.0s ease;
285 -webkit-animation-delay: 0.25s;
286 -webkit-animation-fill-mode: both;
288 #carousel tr.subfooter th {
292 /* background: rgba(0, 0, 170, 0.8); */
293 background: linear-gradient(to bottom, rgba(0, 0, 170, 0.9), rgba(0, 0, 130, 0.9));
294 /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
295 -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
297 #carousel tr.footer {
298 -webkit-animation: fade-in 2.0s ease;
299 -webkit-animation-delay: 0.5s;
300 -webkit-animation-fill-mode: both;
302 #carousel td, #carousel th {
306 #carousel tr.footer td {
308 text-transform: none;
319 #carousel td.matchup {
324 text-transform: none;
326 #carousel .streamtime {
328 text-transform: none;
332 #carousel .playerpadding {
334 background: rgba(0,0,0,0);
336 #carousel th.playernum, #carousel .playername {
339 #carousel th.playernum {
342 padding-left: 0px; margin-left: 0px;
345 #carousel .playername {
346 text-transform: none;
350 .nplayed, .gd, .pts {
361 @-webkit-keyframes from-left {
363 -webkit-transform:translateX(-200%);
366 -webkit-transform:translateX(0);
369 @-webkit-keyframes to-left {
371 -webkit-transform:translateX(0);
374 -webkit-transform:translateX(-200%);
377 @-webkit-keyframes from-top {
379 -webkit-transform:translateY(-40px);
382 -webkit-transform:translateY(0);
385 @-webkit-keyframes to-top {
387 -webkit-transform:translateY(0);
390 -webkit-transform:translateY(-40px);
394 @-webkit-keyframes scale-out {
402 @-webkit-keyframes scale-in {
405 border: 2px solid #ccc;
409 border: 2px solid #ccc;
412 @-webkit-keyframes scale-in-no-border {
420 @-webkit-keyframes scale-out-small {
430 border: 1px solid black;
436 @-webkit-keyframes scale-in-small {
439 border: 1px solid black;
443 border: 1px solid black;
453 @-webkit-keyframes wipe-out {
455 clip: rect(0px,0px,200px,0px);
458 clip: rect(0px,0px,200px,0px);
461 clip: rect(0px,1050px,200px,0px);
464 @-webkit-keyframes wipe-in {
466 clip: rect(0px,1050px,200px,0px);
468 20% { /* Not symmetrical! */
469 clip: rect(0px,0px,200px,0px);
472 clip: rect(0px,0px,200px,0px);
475 @-webkit-keyframes fade-in {
483 @-webkit-keyframes fade-out {