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: 3px solid black;
33 border: 3px solid #008;
35 .team1color, .team2color {
59 /* Clock, to the right of score */
65 border-collapse: collapse;
67 border: 3px solid black;
70 border: 3px solid #008;
77 -webkit-transform:translateX(-200%);
79 .clockbug-animate-in {
80 -webkit-animation: from-left 1s ease;
82 .clockbug-animate-out {
83 -webkit-animation: to-left 1s ease;
84 -webkit-transform:translateX(-200%);
87 /* Comment, below score */
93 border-collapse: collapse;
95 border: 3px solid black;
98 border: 3px solid #008;
106 -webkit-transform:translateY(-40px);
108 .commentbug-animate-in {
109 -webkit-animation: from-top 0.5s ease;
111 .commentbug-animate-out {
112 -webkit-animation: to-top 0.5s ease;
113 -webkit-transform:translateY(-40px);
117 .lowerthird-headline {
122 border-collapse: collapse;
124 border: 2px solid #ccc;
128 /*background: linear-gradient(to right, #ccc, #fff 15px); */
129 background-image: url(lowerthird-bg.png);
131 /* padding-top: 20px; */
133 .lowerthird-headline-hidden {
138 .lowerthird-headline-animate-in {
139 -webkit-animation: scale-out 1.0s;
141 .lowerthird-headline-animate-out {
142 -webkit-animation: scale-in 1.0s;
144 .lowerthird-headline-content {
148 .lowerthird-headline-content-hidden {
149 clip: rect(0px,0px,200px,0px);
151 .lowerthird-headline-content-animate-in {
152 -webkit-animation: wipe-out 2.0s ease;
154 .lowerthird-headline-content-animate-out {
155 -webkit-animation: wipe-in 2.0s ease;
156 clip: rect(0px,0px,200px,0px);
158 .lowerthird-subheading {
165 border-collapse: collapse;
167 border: 1px solid black;
169 align-items: center; */
170 /*background: linear-gradient(to right, #44c, #33a 15px); */
171 background-image: url(lowerthird-bg2.png);
173 .lowerthird-subheading-hidden {
174 clip: rect(0px,0px,200px,0px);
176 .lowerthird-subheading-animate-in {
177 -webkit-animation: scale-out-small 1.6s ease;
179 .lowerthird-subheading-animate-out {
180 -webkit-animation: scale-in-small 1.6s ease;
183 -webkit-animation-fill-mode: both;
185 .lowerthird-subheading-content {
189 .lowerthird-subheading-content-hidden {
193 .lowerthird-subheading-content-animate-in {
194 -webkit-animation: wipe-out 2.2s ease;
196 .lowerthird-subheading-content-animate-out {
197 -webkit-animation: wipe-in 2.2s ease;
198 clip: rect(0px,0px,200px,0px);
200 .lowerthird-picture {
210 .lowerthird-picture-hidden {
215 .lowerthird-picture-animate-in {
216 -webkit-animation: scale-out 1.0s;
218 .lowerthird-picture-animate-out {
219 -webkit-animation: scale-in-no-border 1.0s;
221 .lowerthird-picture-content {
225 .lowerthird-picture-content-hidden {
226 clip: rect(0px,0px,200px,0px);
228 .lowerthird-picture-content-animate-in {
229 -webkit-animation: wipe-out 2.0s ease;
230 -webkit-animation-delay: 0.3s;
231 -webkit-animation-fill-mode: both;
233 .lowerthird-picture-content-animate-out {
234 -webkit-animation: wipe-in 2.0s ease;
235 clip: rect(0px,0px,200px,0px);
238 /* these are hidden when actually run in casparcg */
251 /* background: rgba(0, 0, 170, 0.8); */
252 background: transparent;
258 border-spacing: 0px 7px;
260 border-collapse: separate;
261 text-transform: uppercase;
265 text-transform: none;
269 text-transform: none;
272 -webkit-animation: fade-in 1.0s ease;
273 -webkit-animation-delay: 0.0s;
274 -webkit-animation-fill-mode: both;
276 #carousel tr.subfooter {
277 -webkit-animation: fade-in 1.0s ease;
278 -webkit-animation-delay: 0.25s;
279 -webkit-animation-fill-mode: both;
281 #carousel tr.subfooter th {
285 /* background: rgba(0, 0, 170, 0.8); */
286 background: linear-gradient(to bottom, rgba(0, 0, 170, 0.8), rgba(0, 0, 130, 0.8));
287 /* -webkit-animation: fade-in calc(counter(rowNumber) * 1.0)s ease; */
288 -webkit-animation: fade-in calc(counter-value(rowNumber) * 1.0s) ease;
290 #carousel tr.footer {
291 -webkit-animation: fade-in 2.0s ease;
292 -webkit-animation-delay: 0.5s;
293 -webkit-animation-fill-mode: both;
295 #carousel td, #carousel th {
299 #carousel tr.footer td {
301 text-transform: none;
312 #carousel td.matchup {
317 text-transform: none;
319 #carousel .streamtime {
321 text-transform: none;
324 .nplayed, .gd, .pts {
335 @-webkit-keyframes from-left {
337 -webkit-transform:translateX(-200%);
340 -webkit-transform:translateX(0);
343 @-webkit-keyframes to-left {
345 -webkit-transform:translateX(0);
348 -webkit-transform:translateX(-200%);
351 @-webkit-keyframes from-top {
353 -webkit-transform:translateY(-40px);
356 -webkit-transform:translateY(0);
359 @-webkit-keyframes to-top {
361 -webkit-transform:translateY(0);
364 -webkit-transform:translateY(-40px);
368 @-webkit-keyframes scale-out {
376 @-webkit-keyframes scale-in {
379 border: 2px solid #ccc;
383 border: 2px solid #ccc;
386 @-webkit-keyframes scale-in-no-border {
394 @-webkit-keyframes scale-out-small {
404 border: 1px solid black;
410 @-webkit-keyframes scale-in-small {
413 border: 1px solid black;
417 border: 1px solid black;
427 @-webkit-keyframes wipe-out {
429 clip: rect(0px,0px,200px,0px);
432 clip: rect(0px,0px,200px,0px);
435 clip: rect(0px,1050px,200px,0px);
438 @-webkit-keyframes wipe-in {
440 clip: rect(0px,1050px,200px,0px);
442 20% { /* Not symmetrical! */
443 clip: rect(0px,0px,200px,0px);
446 clip: rect(0px,0px,200px,0px);
449 @-webkit-keyframes fade-in {
457 @-webkit-keyframes fade-out {