@charset "UTF-8";
/* CSS Document */

body, div, h1, h2, h3, h4, b, p {
	font-family: arial,helvetica,sans-serif;
}

body {
	background-Color: black;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
	
}

h1 {
	font-size: 24px;
}

#big-one {
	width: 94%;
}

.before-game {
	width: 100vw;
	height: 100vh;
	background-Color: black;
	line-height: 100vh;
}
.before-game .pin-img {
	width: 80vw;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.announcement {
	position: absolute;
	bottom: 2vh;
	width: 100vw;
	color: yellow;
	font-size: 28px;
	line-height: 34px;
	padding: 0px 50px 0px 50px;
	background: #990000;
}

.rotation-box {
	color: white;
	width: 100%;
	height: 100%;
	background-Color: black;
	text-align: center;
	line-height: 24px;
	position: relative;
}	

.gutterbox {
	max-height: 70vh;
	width: 70vw;
	line-height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.gutter-header {
	font-size: 54px;
	line-height: 40px;
	font-weight: 900;
	margin-top: 20px;
	margin-bottom: 70px;
}
.gutter-header i {
	font-weight: 700;
	color: #ffcc66;
}

.gutter-photo img {
	width: 150px;
	height: 150px;
	margin-bottom: 30px;

}

.gutter-quote {
	font-size: 42px;
	line-height: 40px;
	color: #ffffcc;
	margin-bottom: 50px;
	text-wrap: balance;
}
.gutter-quote-smaller {
	font-size: 37px;
	line-height: 35px;
}
.gutter-context {
	font-size: 32px;
	line-height: 40px;
	color: #ccccff;
	text-wrap: balance;
}

.gutter-bigger {
	font-weight:500;
	font-size: 36px;
}

.gutter-fineprint {
	font-size: 22px !important;
	line-height: 30px;
	color: #ccccff;
	text-wrap: pretty;
}

.gutter-smaller {
	font-size: 26px;
	line-height: 30px;
	color: #ffffcc;
	margin-top: -30px;
	margin-bottom: 30px;
	text-wrap: balance;
}
.gutter-disclaimer {
	margin-top: 20px;
	font-size: 24px;
	line-height: 28px;
	font-weight: 300;
	font-style: oblique;
	color: #d0e0d0;
=	text-wrap: balance;
}

.board-frame{
	position: absolute;
	top: 15vh;
	right: 10vw;
	overflow: none;
	width: 8.5in;
	height: 8.5in;
	border: none;
}
.board-label{
	position: absolute;
	top: 15vh;
	left: 5vw;
	overflow: none;
	width: 50%;
	height: 8.5in;
	border: none;
}

.ann-label{
	position: absolute;
	top: 5vh;
	left: 5vw;
	overflow: none;
	width: 50%;
	height: 90vh;
	border: none;
}


.ann-quote {
    font-size: 34px;
    line-height: 34px;
    color: #ffffcc;
    margin-bottom: 50px;
    text-wrap: balance;
	padding-right: 100px;
}

.ann-quote b{
    color: #ffaaaa;
}



.ann-frame {
    position: absolute;
    top: 5vh;
    right: 5vw;
    overflow: none;
    width: 40vw;
    height: 90vh;
    border: none;
}
.ann-frame img {
	width:  40vw;
	max-width: 100%;
	position: absolute;
	bottom: 0px;
	right: 0px;
}

.board-label .pin-img {
	width: 80vw;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


.practice-preview {
	display: none;
	width: 100vw;
	height: 100vh;
	background-Color: #ffffff;

	-webkit-animation: zonkers2 4s infinite;
    animation: zonkers2 4s infinite;
}
.practice-preview div {
	font-size: 156px;
	font-weight: 900;
	width: 80vw;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@-webkit-keyframes zonkers2 {
  0% { 	background-Color: #fff; }
  50% { 	background-Color: #ccc; }
  100% { 	background-Color: #fff; }

} 

@keyframes zonkers2 {
  0% { 	background-Color: #fff; }
  50% { 	background-Color: #ccc; }
  100% { 	background-Color: #fff; }
}


.practice-ending {
	display: none;
	width: 100vw;
	height: 100vh;
	background-Color: #ff0000;
	-webkit-animation: zonkers 4s infinite;
    animation: zonkers 4s infinite;

}
.practice-ending div {
	font-size: 128px;
	font-weight: 900;
	width: 80vw;
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


@-webkit-keyframes zonkers {
  0% { 	background-Color: #f60; }
  50% { 	background-Color: #f00; }
  25%,75% { 	background-Color: #ff0; }

} 

@keyframes zonkers {
  0% { 	background-Color: #f60; }
  50% { 	background-Color: #f00; }
  25%,75% { 	background-Color: #ff0; }
}


@keyframes horizontal-shaking {
 0% { transform: translateX(0) }
 25% { transform: translateX(1px) }
 50% { transform: translateX(-1px) }
 75% { transform: translateX(1px) }
 100% { transform: translateX(0) }
}


@keyframes skew-x-shaking{
 0% { transform: skewX(-15deg); }
 5% { transform: skewX(15deg); }
 10% { transform: skewX(-15deg); }
 15% { transform: skewX(15deg); }
 20% { transform: skewX(0deg); }
 100% { transform: skewX(0deg); }
}

@keyframes skew-y-shaking{
 0% { transform: skewY(-15deg); }
 5% { transform: skewY(15deg); }
 10% { transform: skewY(-15deg); }
 15% { transform: skewY(15deg); }
 20% { transform: skewY(0deg); }
 100% { transform: skewY(0deg); }
}


@keyframes jump-shaking {
  0% { transform: translateX(0) }
  25% { transform: translateY(-1px) }
  35% { transform: translateY(-1px) rotate(.5deg) }
  55% { transform: translateY(-1px) rotate(-.5deg) }
  65% { transform: translateY(-1px) rotate(.5deg) }
  75% { transform: translateY(-1px) rotate(-.5deg) }
  100% { transform: translateY(0) rotate(0) }
}


@keyframes jump-shaking2 {
  0% { transform: translateX(0) }
  25% { transform: translateY(-3px) }
  35% { transform: translateY(-3px) rotate(2deg) }
  55% { transform: translateY(-3px) rotate(-2deg) }
  65% { transform: translateY(-3px) rotate(2deg) }
  75% { transform: translateY(-3px) rotate(-2deg) }
  100% { transform: translateY(0) rotate(0) }
}

@keyframes tilt-n-move-shaking {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(8px, 5px) rotate(8deg); }
  50% { transform: translate(0, 0) rotate(0eg); }
  75% { transform: translate(-8px, 5px) rotate(-8deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

@keyframes skew-x-shaking{
 0% { transform: skewX(-5deg); }
 5% { transform: skewX(5deg); }
 10% { transform: skewX(-5deg); }
 15% { transform: skewX(5deg); }
 20% { transform: skewX(0deg); }
 100% { transform: skewX(0deg); }
}

@keyframes skew-y-shaking{
 0% { transform: skewY(-5deg); }
 5% { transform: skewY(5deg); }
 10% { transform: skewY(-5deg); }
 15% { transform: skewY(5deg); }
 20% { transform: skewY(0deg); }
 100% { transform: skewY(0deg); }
}

.game1_body {
	background-Color: #0000ff;
	display:  table-cell;
}
.game2_body {
	background-Color: #c80000;
	display:  table-cell;
}
.game3_body {
	background-Color: #009000;
	display:  table-cell;
}

.match1 {
	border-left: 5px solid black;
}
.match2 {
	border-left: 5px solid black;
}
.match3 {
}

.bowler-wrapper {
	width: 100%; 
	height: 74px;
}

.header-wrapper {
	width: 100%; 
}



.framehead{
	height: 20px;
	width: 8.33%;
	position: relative;
	display: table-cell;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
	color: white;
}


.teambox {
	height: 35px;
	font-size: 35px;
	font-weight: 700;
	line-height: 35px;
	padding-left: 5px;
	display: table;
	width: 100%;
	color: white;
	text-shadow:	-3px 3px 0 #000,
					3px 3px 0 #000,
					3px -3px 0 #000,
					-3px -3px 0 #000;
}




.bowlerbox {
	background-Color: #ffe;
	width: 100%;
	height: 32px;
	display: table;
	table-layout: fixed;
	border-bottom: 1px solid #666;
	font-size: 28px;
	font-weight: 500;
	line-height: 32px;
	padding-let: 5px;
}

.lanenum {
	width: 1em;
	display: table-cell;
	opacity: .6;
}
.teamname {
	width: 1fr;
	display: table-cell;
	text-align: center;
}
.shortname {
	width: 1fr;
	display: none;
	text-align: center;
}

.infobox {
	width: 100%;
	text-align: center;
	font-size: 24px;
	font-size: 30px;
	text-shadow:	-2px 2px 0 #000,
					2px 2px 0 #000,
					2px -2px 0 #000,
					-2px -2px 0 #000;
}

.team-waiting {
	color: #ffcc00;
    -webkit-animation: pulse 2s infinite;
    animation: pulse 2s infinite;
}
.bowler-up {
	color: #ffff00;
	display: none;
}

.bowler-up img {
	padding-right:10px;
	max-height:50px;
	image-rendering: smooth;
}

.doubled-up img {
	max-height:40px;
}


.game-over {
	color: #ff8080;
	display: none;
}

.shotclock {
	font-size: 24px;
	color: #ffcc00;
    -webkit-animation: pulse2 2s infinite;
    animation: pulse2 2s infinite;
}

.long-delay {
    -webkit-animation: pulse2 1.5s infinite;
    animation: pulse2 1.5s infinite;
}
.longer-delay {
    -webkit-animation: pulse2 .75s infinite;
    animation: pulse2 .75s infinite;
}
.longest-delay {
    -webkit-animation: pulse2 .25s infinite;
    animation: pulse2 .25s infinite;
}

.lollygagger {
	font-size: 40px;
	color: #ffc000;
	font-weight: 500;
    -webkit-animation: pulse2 1.5s infinite;
    animation: pulse2 1.5s infinite;

	text-shadow:	-3px 3px 0 #000,
					3px 3px 0 #000,
					3px -3px 0 #000,
					-3px -3px 0 #000;
}

.lollygaggerer {
	font-size: 46px;
	color: #ffc000;
	font-weight: 700;
    -webkit-animation: pulse2 1s infinite;
    animation: pulse2 1s infinite;

}

.lollygaggerest {
	font-size: 50px;
	color: #ff9000;
	font-weight: 700;
    -webkit-animation: pulse2 .6s infinite;
    animation: pulse2 .6s infinite;
	text-shadow:	-5px 5px 0 #000,
					5px 5px 0 #000,
					5px -5px 0 #000,
					-5px -5px 0 #000;

}



.bowler-present {
	background-Color: #c0ffc0;
}
.bowler-absent {
	background-Color: #ffc0c0;
}
.bowler-prebowled {
	background-Color: #c0c0ff;
}
.bowler-sub {
	background-Color: #ffffc0;
}

.bowler-active{
    -webkit-animation: pulse 1.2s infinite;
    animation: pulse 1.2s infinite;
}

.bowler-active-delay{
    -webkit-animation: pulse2 .5s infinite, jump-shaking .25s infinite;
    animation: pulse2 .5s infinite, jump-shaking .25s infinite;
}

.bowler-active-delay2{
    -webkit-animation: pulse2 .25s infinite, jump-shaking2 .1s infinite;
    animation: pulse2 .25s infinite, jump-shaking2 .25s infinite;
}

.bowler-active-delay3{
    -webkit-animation: tilt-n-move-shaking .25s infinite, pulse2 .5s infinite;
    animation: tilt-n-move-shaking .25s infinite, pulse2 .5s infinite;
}

.bowler-active-dead{
    filter: brightness(50%);
    -webkit-animation: pulse2 5s infinite;
    animation: pulse2 5s infinite;
}



.bowler-active .framebowler {
	color: #ffff00;
}

.bowler-name {
	width: 35%;
	display: table-cell;
	font-weight: 500;
	color: #333;
	padding-left: 10px;
}
.bowler-selected{
	font-weight: 700;
	color: #cc3333;
	background-Color: #ff6;
}
.bowler-status {
	width: 65%;
	display: table-cell;
	text-align: right;
}

.bowler-prebowl {
	margin-left: 10px;
	padding-right: 5px;
	padding-bottom: 2px;
	font-size: 18px;
	visibility: hidden;
}

.bowler-prebowl input {
	width: 3em;
	font-size: 24px;
	height: 28px;
	font-weight: 600;
	border: 3px solid #090;
	border-radius: 4px;
	padding-left: 5pd;
	padding-right: 5px;
}

.bowler-status select {
	font-size: 24px;
}


.bowler-lane {
	width: 80px;
	display: table-cell;
}
.bowler-arrow {
	width: 50px;
	display: table-cell;
	font-weight: 900;
	color: #cc0000;
	font-size: 30px;
	line-height: 20px;
	padding-left: 5px;
    -webkit-animation: pulse 3s infinite;
    animation: pulse 3s infinite;
}
.bowler-arrow img {
	height: 30px;
}

.frame-wrapper {
	display: table-row;
	width:  100%;
	display: table;
	table-layout: fixed;
}

.frame-header-wrapper {
	display: table;
	width:  100%;
	display: table;
	table-layout: fixed;
}

.framebox {
	border-right: 1px solid white;
	height: 76px;
	width: 8.33%;
	position: relative;
	display: table-cell;
}
.framebowler {
	border-right: 1px solid white;
	width: 8.33%;
	position: relative;
	display: table-cell;
	color: white;
	font-size: 28px;
	font-weight: 900;
	text-align: center;
	padding-top: 10px;
	font-stretch: ultra-condensed; 

}

.game1_top {
	background-Color: #c0c0ff;
	color: black;
}
.game1_scoretop {
	background-Color: #3030b0;
	color: black;
}

.game1_bottom {
	background-Color: #3030b0;
	color: white;
}

.game1_bowler {
	background-Color: #006;
}


.game2_top {
	background-Color: #ffc0c0;
	color: black;
}
.game2_scoretop {
	background-Color: #b03030;
	color: black;
}

.game2_bottom {
	background-Color: #b03030;
	color: white;
}

.game2_bowler {
	background-Color: #600;
}



.game3_top {
	background-Color: #b0e0b0;
	color: black;
}
.game3_scoretop {
	background-Color: #309030;
	color: black;
}

.game3_bottom {
	background-Color: #309030;
	color: white;
}

.game3_bowler {
	background-Color: #060;
}



.bowler-up .game1_bowler {
	background-Color: #600;
}

.bowler-up .game2_bowler {
	background-Color: #006;
}

.bowler-up .game3_bowler {
	background-Color: #630;
}

.maxbox {
	height: 74px;
	width: 8.33%;
	position: relative;
	display: table-cell;
}


.frameheader {
	border-bottom: 2px solid white;
	background-Color: #ccc;
	height: 20px;
	width: 100%;
	position: absolute;
	top: 0px;
	right: 0px;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}

.totalheader {
	height: 40px;
	width: 100%;
	position: absolute;
	top: 0px;
	right: 0px;
	font-family: helvetica,arial,sans-serif;
	font-size: 18px;
	font-weight: 600;
	text-align: center;
	color: white;
}


.pinsbox1 {
	height: 38px;
	width: 50%;
	position: absolute;
	top: 0px;
	left: 0px;
	text-align: center;
	line-height: 38px;
	font-weight: bold;
	font-size: 34px;
	color: #000;
}

.pinsbox1 .tenth-frame {
  font-stretch: extra-condensed;
 color: red;
}


.pinsbox2 {
	height: 38px;
	width: 50%;
	position: absolute;
	top: 0px;
	right: 0px;
	text-align: center;
	line-height: 38px;
	font-weight: bold;
	font-size: 34px;
	color: #000;
}


.pinsbox3 {
	height: 38px;
	width: 50%;
	position: absolute;
	top: 0px;
	right: 0px;
	line-height: 38px;
	font-weight: bold;
	font-size: 34px;
	color: #000;
}

.scorebox {
	position: absolute;
	top: 38px;
	height: 35px;
	line-height: 35px;
	font-weight: 500;
	font-size: 30px;
	text-align: center;
	width: 100%;
	color: white;
}


.frame-blind {
	font-size: 24px;
	font-weight: 300;
	font-stretch: ultra-condensed;
}


.maxbox .scorebox{
	font-size: 30px;
	font-weight: 700;
}

.maxbox .frame-blind {
	font-size: 26px;
	font-weight: 700;
}
.frame-prebowled {
	color: #cfc;
}

.frame-edited .pinsbox1{
	color: #c00;
}
.frame-edited .pinsbox2{
	color: #c00;
}
.frame-edited .pinsbox3{
	color: #c00;
}
.frame-edited .scorebox{
	color: #fff;
}


.game1_body .frame-ninepin{
	color: #00a800;
}
.game2_body .frame-ninepin{
	color: #44f;
}
.game3_body .frame-ninepin{
	color: #a6f ;
}



.tenth-frame {
	width: 1fr;
}

.pre-bowled .framebox {
	background-Color: #dfd;
}

.pinsbox1.tenth-frame {
	width: 33.3%;
  font-stretch:condensed
}
.pinsbox2.tenth-frame {
	width: 33.3%;
	left: 33.3%;
  font-stretch:condensed
}
.pinsbox3.tenth-frame {
	width: 33.3%;
	left: 66.7%;
  font-stretch:condensed
}
.framebox.tenth-frame {
	width: 8.33%
}

.frame-played {
	background-Color: #bbd;
}

.frame-active {
	background-Color: #9dd;
}


.ball-active {
	top: 22px;
	-webkit-animation: blink 1.2s infinite;
    animation: blink 1.2s infinite;
}


@-webkit-keyframes pulse {
  0%,100% { opacity: .7; }
  50% { opacity: 1; }
}

@keyframes pulse {
  0%,100% { opacity: .7; }
  50% { opacity: 1; }
}


@-webkit-keyframes pulse2 {
  0%,100% { opacity: .5; }
  50% { opacity: 1; }
}

@keyframes pulse2 {
  0%,100% { opacity: .5; }
  50% { opacity: 1; }
}

@-webkit-keyframes blink {
  0%,100% { 	background-Color: #dff; }
  50% { 	background-Color: #69c; }
}

@keyframes blink {
  0%,100% { 	background-Color: #dff; }
  50% { 	background-Color: #69c; }
}







@-webkit-keyframes winner1 {
  0%,100% { 	background-Color: #0000ff; }
  50% { 	background-Color: #aaaa00; }
}
@keyframes winner1 {
  0%,100% { 	background-Color: #0000ff; }
  50% { 	background-Color: #aaaa00; }
}


@-webkit-keyframes winner2 {
  0%,100% { 	background-Color: #a80000; }
  50% { 	background-Color: #aaaa00; }
}
@keyframes winner2 {
  0%,100% { 	background-Color: #a80000; }
  50% { 	background-Color: #aaaa00; }
}


@-webkit-keyframes winner3 {
  0%,100% { 	background-Color: #00c800; }
  50% { 	background-Color: #aaaa00; }
}
@keyframes winner3 {
  0%,100% { 	background-Color: #00c800; }
  50% { 	background-Color: #aaaa00; }
}




.pinsbox {
	background-Color: #ffe;
	width: 100%;
	height: 30px;
	display: table;
	table-layout: fixed;
	border-top: 1px solid #666;
	font-size: 18px;
	font-weight: 500;
	line-height: 30px;
}


.pins-text {
	display: table-cell;
	width: 200px;
	padding-left: 5px;
}

.pins-buttons {
	display: table;
	width: 100%;
    border-spacing: 10px 2px;
    border-collapse: separate;
}



.pin-button {
	width: 26px;
	height: 26px;
	border: 2px solid #446;
	border-radius: 16px;
	display: table-cell;
	margin-left: 10px;
	text-align: center;
	color: white;
	cursor: pointer;

    background: #427AA8;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzU5YTNlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MjdhYTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top,  #59A3E0 1%, #427AA8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#59A3E0), color-stop(100%,#427AA8));
    background: -webkit-linear-gradient(top,  #59A3E0 1%,#427AA8 100%);
    background: -o-linear-gradient(top,  #59A3E0 1%,#427AA8 100%);
    background: -ms-linear-gradient(top,  #59A3E0 1%,#427AA8 100%);
    background: linear-gradient(to bottom,  #59A3E0 1%,#427AA8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59A3E0', endColorstr='#427AA8',GradientType=0 );

    text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
    box-shadow: 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3);

}

.pin-button:hover {
    background: #59A3E0;
    text-decoration: none;
    filter: none;
}

.button-hidden {
	visibility: hidden;
}


.controls-hidden {
	display: none;
}

.first-team{
	margin-bottom: 5px;
	padding-top: 10px;
}

.second-team{
}

.not-active{
	opacity: .6;
}

.prebowl-active {
	visibility: visible;
}


.bowler-up .game1_top  {
	background-Color: #ffc0c0;
}

.bowler-up .game1_bottom, .bowler-up .game1_scoretop {
	background-Color: #b03030;
}


.bowler-up .game2_top  {
	background-Color: #c0c0ff;
}

.bowler-up .game2_bottom, .bowler-up .game2_scoretop {
	background-Color: #3030b0;
}

.bowler-up .game3_top  {
	background-Color: #d0d060;
}

.bowler-up .game3_bottom, .bowler-up .game3_scoretop {
	background-Color: #c09030;
}




.team-wrapper {
	border: 4px solid white;
	width: 99%;
	position: relative;
}


.team-wrapper .bowler-wrapper .frame-wrapper .framebowler{
	border-top: 2px solid white;
}
.team-wrapper .bowler-wrapper .frame-wrapper .framebox{
	border-top: 2px solid white;
}
.team-wrapper .bowler-wrapper .frame-wrapper .maxbox{
	border-top: 2px solid white;
}

.team-wrapper .bowler-wrapper:first-child .frame-wrapper .framebowler{
	border-top: none;
}
.team-wrapper .bowler-wrapper:first-child .frame-wrapper .framebox{
	border-top: none;
}
.team-wrapper .bowler-wrapper:first-child .frame-wrapper .maxbox{
	border-top: none;
}


.footer-wrapper {
	margin-top: 8px;
	margin-bottom: 10px;
	width: 98%; 
	display: table;
	text-align: right;
	padding-right: 10px;
	position: relative;
}

.footer-blank {
	display: table-cell;
	width: 0px;
}

.footer-label {
	display: table-cell;
	color: white;
	font-size: 35px;
	font-weight: 600;
	width: 10em;
	padding-right: 10px;
	margin-left: 15px;
}

.footer-value {
	display: table-cell;
	color: #333;
	font-size: 35px;
	width: 2.5em;
	background-Color: #ffffc8;
	border: 2px solid white;
	text-align: center;font-weight: 600;
	margin-left: 10px;
   -moz-box-shadow:    inset 0 0 5px #000000;
   -webkit-box-shadow: inset 0 0 5px #000000;
   box-shadow:         inset 0 0 5px #000000;

}	

.flames {
	background-image: url("/images/flames.gif");
	background-position: bottom;
	color: black;
}

.smoke {
	background-image: url("/images/smoke.gif");
	background-position: bottom;
	color: black;
}

#masterWrapper {
	display: table;
	table-layout: fixed;

	width: 96.5vw;
	height: 96.5vh;
}


[id^=matchWrapper] {
	max-height: 98vh;
	padding-top: 2vh;
	padding-left: 0px;
	padding-right: 0px;
	display: table-cell;
}	



.recapWrapper{
	background-Color: black;
	height: 96vh;
}

.recap-inner {
}

.recapWrapper .bowler-wrapper{
	height: auto;
}

.recap-grid {
	display: table;
	padding-left: 10px;
	padding-top: 10px;
}	

.recap-headers {
	display: table-row; 
	margin-top: 5px;
	font-size: 24px;
	font-weight: 700;
	padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid white;
}
.recap-header-name {
	display: table-cell;
	color: #ff8;
	padding-right: 10px;
}
.recap-header-avg {
	display: table-cell;
	color: white;
	padding-left:7px;	
	padding-right: 7px;
	text-align: center;
	color: #ff8;
}
.recap-header-game {
	display: table-cell;
	color: #ff8;
	padding-left: 7px;	
	padding-right: 7px;
	text-align: center;

}
.recap-mode{
	display: table-row; 
	color: white;
	margin-top: 10px;
	font-size: 20px;
	font-weight: 500;
	padding-left: 10px;
}

.recap1 {
	display: table-cell;
}
.recap2 {
	display: table-cell;
}
.recap-name{
	padding-left: 10px;
}
.recap-avg{
	text-align: center;
	color: #888;
}
.recap-game{
	text-align: center;
}
.recap-series{
	text-align: center;
}

.total-wrapper {
	display: table-row; 
	padding-top: 20px;
	font-size: 24px;
	font-weight: 700;
	padding-left: 10px;
	line-height: 28px;
	border-top: 1px solid white;
}
.total-wrapper div {
	display: table-cell;
	text-align: center;
	font-weight: 700;
	color: #afa;
}

.total-label {
	text-align: right;
}
.total-avg {
	color: #afa;
}

.grand-total div {
	color: #f88;
}

.hcp-1 div{
	color: #aaf;
}
.hcp-2 div{
	color: #aaf;
}


.wins-wrapper {
	display: table-row; 
	padding-top: 30px;
	font-size: 24px;
	font-weight: 700;
	padding-left: 10px;
	line-height: 100px;
	margin-bottom: 70px;
}
.wins-wrapper div {
	display: table-cell;
	text-align: center;
	font-weight: 700;
	color: #afa;
}

.wins-blank {
}

.outcome-L {
	color: #ff0000 !important;
	font-size: 36px;
	font-weight: 900;
	text-shadow: 5px 0 0 #000, 0 -5px 0 #000, 0 5px 0 #000, -5px 0 0 #000;
}
.outcome-W {
	color: #00ff00 !important;
	font-size: 36px;
	font-weight: 900;
	text-shadow: 5px 0 0 #000, 0 -5px 0 #000, 0 5px 0 #000, -5px 0 0 #000;
}
.outcome-T {
	color: yellow !important;
	font-size: 36px;
	font-weight: 900;
	text-shadow: 5px 0 0 #000, 0 -5px 0 #000, 0 5px 0 #000, -5px 0 0 #000;
}






.game1_body .game-winner {
   -webkit-animation: winner1 2s infinite;
    animation: winner1 2s infinite;
	background-Color: #6666ff;
}
.game1_body .game-loser {
	background-Color: #333390;
}

.game2_body .game-winner {
   -webkit-animation: winner2 2s infinite;
    animation: winner2 2s infinite;
	background-Color: #c83333;
}
.game2_body .game-loser {
	background-Color: #903333;
}



.game3_body .game-winner {
   -webkit-animation: winner3 2s infinite;
    animation: winner3 2s infinite;
	background-Color: #33a833;
}
.game3_body .game-loser {
	background-Color: #339033;
}

.modal, .modal-backdrop {
    position: absolute !important;
}

.modal-backdrop {
     background-color: rgba(0,0,0,.0001) !important;
}
.modal-content { 
	height: 100% !important;
	background-Color: transparent !important;
}

.modal-body{
	padding: 0px !important;
	height: 100% !important;
	width: 100% !important;
	text-align: center;
	background-color: transparent !important;
	overflow: hidden;
}

.modal-dialog {
	margin-top: 0px !important;
	margin-bottom: 0px !important;
	height: 100% !important;
	width: 100% !important;
	display: flex;
}

.video {
	height:100%;
	max-width:100%;
	z-index: 99999;
}


.anitext {
	background-Color: black !important;
	font-size: 36px;
	color: yellow;
	line-height: 44px;
	font-weight: 500;
	z-index: 99999;
	height: 52px !important;
	width: 100%;
	text-align: center !important;
	border: none !important;
	border-color: transparent !important;
	padding: 4px !important;
	padding-top: 0px !important;
	border: 5px solid black !important;
	overflow: hidden;
	position: relative;
	opacity: .6;
}

.anitext span {
  float: right;
  width: 100%;
}

.anitext div {
  display: block;
  width: 200%;
  height: 52px;

  position: absolute;
  overflow: hidden;

  animation: marquee 3.5s linear infinite;
}

.anitext-longer {
	marquee 10s linear infinite;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -100%; }
}

.anitext2 {
	margin-top: 0px !important;
	margin-bottom: 0px !important;
	background-Color: #ffff00 !important;
	border: 5px solid black;
	width: 100% !important;
	height: 50px;
	text-align: center !important;
	color: black;
	font-size: 36px;
	line-height: 48px;
	font-weight: 500;
	z-index: 99999;
   -moz-box-shadow:    inset 0 0 5px #000000;
   -webkit-box-shadow: inset 0 0 5px #000000;
   box-shadow:         inset 0 0 5px #000000;
	overflow: hidden;
}


.doubled-up {
}

.team1-wrapper {
	padding-bottom: 10px;
}

.team2-wrapper {
	border-top: 5px dashed black;
	padding-top: 15px;
}

.is-split {
 	outline: 3px solid black;
 	outline-offset: -3px;
}
.is-washout {
 	outline: 3px dotted black;
 	outline-offset: -3px;
}

.tocrow {
	color: white;
	font-size: 18px;
	margin-top: -9px;
	margin-bottom: -8px;
	font-weight: 600;
	height:28px;
	line-height: 22px;
}
.tocrow-mini {
	font-weight: 400;
	font-size: 14px;
}

.divnum-0 {
	background-Color: white;
	font-size: 20px;
	line-height: 20px;
	border:2px solid yellow;
	color:black;
	width: 2em;
	font-weight: 700;
}

.divnum-1 {
	background-Color: red;
	font-size: 20px;
	line-height: :20px;
	border:2px solid white;
	color:white;
	width: 2em;
	font-weight: 700;
text-shadow: 1px 0 #fff, -1px 0 #fff, 0 2px #fff, 0 -1px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
.divnum-2 {
	background-Color: blue;
	font-size: 20px;
	line-height: :20px;

	border:2px solid white;
	color:white;
	width: 2em;
	font-weight: 700;
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
.divnum-3 {
	background-Color: green;
	font-size: 20px;
	line-height: 20px;

	border:2px solid white;
	color:white;
	width: 2em;
	font-weight: 700;
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
.divnum-4 {
	background-Color: purple;
	font-size: 20px;
	line-height: 20px;

	border:2px solid white;
	color:white;
	width: 2em;
	font-weight: 700;
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}





.divnum-1-interdiv {
	background-Color: #e4e400;
	font-size: 20px;
	line-height: :20px;
	border:2px solid white;
	color:white;
	width: 2em;
	font-weight: 700;
text-shadow: 1px 0 #fff, -1px 0 #fff, 0 2px #fff, 0 -1px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
.divnum-2-interdiv  {
	background-Color: #ffa0b0;
	font-size: 20px;
	line-height: :20px;

	border:2px solid white;
	color:white;
	width: 2em;
	font-weight: 700;
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
.divnum-3-interdiv  {
	background-Color: #98ffd8;
	font-size: 20px;
	line-height: 20px;

	border:2px solid white;
	color:white;
	width: 2em;
	font-weight: 700;
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
.divnum-4-interdiv  {
	background-Color: #cc9833;
	font-size: 20px;
	line-height: 20px;

	border:2px solid white;
	color:white;
	width: 2em;
	font-weight: 700;
text-shadow: 2px 0 #fff, -2px 0 #fff, 0 2px #fff, 0 -2px #fff,
             1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}





#tocWrapper {
	display: none;
	width: 100vw;
	height: 17vh;
	position: absolute;
	top: 83vh;
	background-Color: black;	
}


.toc-o-ween {
	top: 86vh !important;
	height: 14vh !important;
}

.toc-on {
	height: 83vh;
	max-height: 83vh;

}

.toc-on [id^=matchWrapper] {
	height: 81vh;
	max-height: 81vh;
	background-Color: yellow;
}

.toc-on .recapWrapper  {
	height: 80vh;
	max-height: 80vh;
}



	
#tocDivWrapper{
	display: table;
	width: 98%;
	height: 92%;
	font-size: 18px;
}

.toc-div {
	display: table-cell;
	width: 25%;
	height: 100%;
	background-Color: #ddd;
}



@keyframes rainbowBorder {
  0%   { border-color: red; }
  14%  { border-color: orange; }
  28%  { border-color: yellow; }
  42%  { border-color: green; }
  57%  { border-color: blue; }
  71%  { border-color: indigo; }
  85%  { border-color: violet; }
  100% { border-color: red; }
}

.div0 {
	border: 12px solid red;
	background-Color: #fff;
	animation: rainbowBorder 8s infinite linear;
}

.div1 {
	border: 12px solid red;
	background-Color: #ffe0e0;
}
.div2 {
	border: 12px solid blue;
	background-Color: #e0e0ff;
}
.div3 {
	border: 12px solid green;
	background-Color: #e0ffe0;
}
.div4 {
	border: 12px solid purple;
	background-Color: #ffe0ff;
}


.interdiv1 {
	border: 12px solid #e4e400;
	background-Color: #ffffb0;
}
.interdiv2 {
	border: 12px solid #ffb0b0;
	background-Color: #ffd4d4;
}
.interdiv3 {
	border: 12px solid #98ffd8;
	background-Color: #e0ffef;
}
.interdiv4 {
	border: 12px solid #ffb833;
	background-Color: #ffd8a8;
}


.toc-header {
	width: 90%;
	background-Color: white;
	font-weight: 600;
	border: 4px solid black;
	margin-top: 6px;
	margin-bottom: 6px;
}

.div0 .toc-header{
	border: 4px solid red;
	color: #ff0000;
	animation: rainbowBorder 6s infinite linear;
}


[class^=toc-row] {
	display: table;
	width: 100%;
}

[class^='toc-row'] div {
	display: table-cell;
	margin: 2px;
	padding: 2px;

}
.toc-row-head {
	font-weight: 700;
	width: 20%;
}
.toc-row-body {
	font-weight: 500;
	width: 80%;
}


.markbox {
	font-size: 13px;
	line-height: 13px;
}






/* ~~~~~~ HALLOWEEN THEME ~~~~~~ */


.halloween .spider {
	position: absolute;
	top:	0px;
	z-index: 9999;
	width: 100vw;
	height: 100vh;
}
.halloween .spider img {
	position: absolute;
	top:	0px;
	left: -10vw;
	z-index: 99999;
	width: 110vw;
	opacity: 0.3;
}


.halloween .game1_body {
	background-Color: #660099;
}
.halloween .game1_top {
	background-Color: #c0a0ff;
}
.halloween .game1_scoretop {
	background-Color: #3000b0;
}

.halloween .game1_bottom {
	background-Color: #3000b0;
}

.halloween .game1_bowler {
	background-Color: #330066;
}


.halloween .game1_body .game-winner {
	background-Color: #7800a8;
   -webkit-animation: halloween-winner1 2s infinite;
    animation: halloween-winner1 2s infinite;
}
.halloween .game1_body .game-loser {
	background-Color: #500080;
}
@-webkit-keyframes halloween-winner1 {
  0%,100% { 	background-Color: #7800a8; }
  50% { 	background-Color: #9900cc; }
}
@keyframes halloween-winner1 {
  0%,100% { 	background-Color: #7800a8; }
  50% { 	background-Color: #9900cc; }
}




.halloween .game2_body {
	background-Color: #c86800;
}
.halloween .game2_top {
	background-Color: #ffc0c0;
}
.halloween .game2_scoretop {
	background-Color: #b03030;
}

.halloween .game2_bottom {
	background-Color: #b03030;
}

.halloween .game2_bowler {
	background-Color: #830;
}

.halloween .game2_body .game-winner {
	background-Color: #d87800;
   -webkit-animation: halloween-winner2 2s infinite;
    animation: halloween-winner2 2s infinite;
}
.halloween .game2_body .game-loser {
	background-Color: #b05000;
}
@-webkit-keyframes halloween-winner2 {
  0%,100% { 	background-Color: #d87800; }
  50% { 	background-Color: #ffa000; }
}
@keyframes halloween-winner2 {
  0%,100% { 	background-Color: #d87800; }
  50% { 	background-Color: #ffa000; }
}



.halloween .game3_body {
	background-Color: #222;
}
.halloween .game3_top {
	background-Color: #ccc;
}
.halloween .game3_scoretop {
	background-Color: #666;
}

.halloween .game3_bottom {
	background-Color: #666;
}

.halloween .game3_bowler {
	background-Color: #000;
}

.halloween .game3_body .game-winner {
	background-Color: #333;
   -webkit-animation: halloween-winner3 2s infinite;
    animation: halloween-winner3 2s infinite;
}
.halloween .game3_body .game-loser {
	background-Color: #111;
}
@-webkit-keyframes .=halloween-winner3 {
  0%,100% { 	background-Color: #333; }
  50% { 	background-Color: #555; }
}
@keyframes halloween-winner3 {
  0%,100% { 	background-Color: #333; }
  50% { 	background-Color: #555; }
}

.halloween .recap-mode{
	font-size: 16px;
	padding-left: 4px;
}
.halloween .recap-name{
	text-align: left;
}



.toc-o-ween2 {
	height: 86vh !important;
	max-height: 86vh !important;
}


/* ~~~~~~ THANKSGIVING THEME ~~~~~~ */



.thanksgiving .game1_body {
	background-Color: #b8b800;
}
.thanksgiving .game1_top {
	background-Color: #d8d800;
}
.thanksgiving .game1_scoretop {
	background-Color: #a09000;
}

.thanksgiving .game1_bottom {
	background-Color: #a09000;
/*	color: #963; */
}

.thanksgiving .game1_bowler {
	background-Color: #999900;
}

.thanksgiving .game1_body .game-winner {
   -webkit-animation: thanksgiving-winner1 2s infinite;
    animation: thanksgiving-winner1 2s infinite;
	background-Color: #cfcf00;
}
.thanksgiving .game1_body .game-winner .framehead {
	color: #907070;
}
.thanksgiving .game1_body .game-winner .footer-label {
	color: #907070;
}

.thanksgiving .game1_body .game-loser {
	background-Color: #a0a000;
}
@-webkit-keyframes thanksgiving-winner1 {
  0%,100% { 	background-Color: #cfcf00; }
  50% { 	background-Color: #f0f000; }
}
@keyframes thanksgiving-winner1 {
  0%,100% { 	background-Color: #cfcf00; }
  50% { 	background-Color: #f0f000; }
}

.thanksgiving .game1_body .team-waiting {
	color: #cf8000;
}
.thanksgiving .game1_body .bowler-up {
	color: #e0b000;
}
.thanksgiving .game1_body .game-over {
	color: #ff8080;
}


.thanksgiving .game2_body {
	background-Color: #c86800;
}
.thanksgiving .game2_top {
	background-Color: #ffc0c0;
}
.thanksgiving .game2_scoretop {
	background-Color: #d06030;
}

.thanksgiving .game2_bottom {
	background-Color: #d06030;
}

.thanksgiving .game2_bowler {
	background-Color: #830;
}

.thanksgiving .game2_body .game-winner {
   -webkit-animation: thanksgiving-winner2 2s infinite;
    animation: thanksgiving-winner2 2s infinite;
	background-Color: #d87800;
}
.thanksgiving .game2_body .game-loser {
	background-Color: #b05000;
}
@-webkit-keyframes thanksgiving-winner2 {
  0%,100% { 	background-Color: #d87800; }
  50% { 	background-Color: #ffa000; }
}
@keyframes thanksgiving-winner2 {
  0%,100% { 	background-Color: #d87800; }
  50% { 	background-Color: #ffa000; }
}


.thanksgiving .game3_body {
	background-Color: #685000;
}
.thanksgiving .game3_top {
	background-Color: #b8a000;
}
.thanksgiving .game3_scoretop {
	background-Color: #886000;
}

.thanksgiving .game3_bottom {
	background-Color: #886000;
}

.thanksgiving .game3_bowler {
	background-Color: #604000;
}

.thanksgiving .game3_body .game-winner {
   -webkit-animation: thanksgiving-winner3 2s infinite;
    animation: thanksgiving-winner3 2s infinite;
	background-Color: #887000;
}

.thanksgiving .game3_body .game-loser {
	background-Color: #584000;
}
@-webkit-keyframes thanksgiving-winner3 {
  0%,100% { 	background-Color: #887000; }
  50% { 	background-Color: #a89000; }
}
@keyframes thanksgiving-winner3 {
  0%,100% { 	background-Color: #887000; }
  50% { 	background-Color: #a89000; }
}








.christmas .game1_body {
	background-Color: #009900;
}
.christmas .game1_top {
	background-Color: 00cc00;
}
.christmas .game1_scoretop {
	background-Color: #009900;
}

.christmas .game1_bottom {
	background-Color: #009900;
}

.christmas .game1_bowler {
	background-Color: #007800;
}

.christmas .game1_body  .framehead {
	color: #fff;
}
.christmas .game1_body .footer-label {
	color: #fff;
}

.christmas .game1_body .game-winner {
   -webkit-animation: christmas-winner1 2s infinite;
    animation: christmas-winner1 2s infinite;
	background-Color: #00c000;
}

.christmas .game1_body .game-loser {
	background-Color: #337833;
}
@-webkit-keyframes christmas-winner1 {
  0%,100% { 	background-Color: #00c000; }
  50% { 	background-Color: #00df00; }
}
@keyframes christmas-winner1 {
  0%,100% { 	background-Color: #00c000; }
  50% { 	background-Color: #00df00; }
}





.christmas .game2_body {
	background-Color: #a80000;
}
.christmas .game2_top {
	background-Color: ff6666;
}
.christmas .game2_scoretop {
	background-Color: #990000;
}

.christmas .game2_bottom {
	background-Color: #990000;
}

.christmas .game2_bowler {
	background-Color: #780000;
}

.christmas .game2_body  .framehead {
	color: #fff;
}
.christmas .game2_body .footer-label {
	color: #fff;
}

.christmas .game2_body .game-winner {
   -webkit-animation: christmas-winner2 2s infinite;
    animation: thanksgic0ving-winner2 2s infinite;
	background-Color: #0000;
}

.christmas .game2_body .game-loser {
	background-Color: #783333;
}
@-webkit-keyframes christmas-winner2 {
  0%,100% { 	background-Color: #c00000; }
  50% { 	background-Color: #df0000; }
}
@keyframes christmas-winner2 {
  0%,100% { 	background-Color: #c00000; }
  50% { 	background-Color: #df0000; }
}

.christmas .game2_body .team-waiting {
	color: #cfb000;
}
.christmas .game2_body .bowler-up {
	color: #e0d000;
}
.christmas .game2_body .frame-edited .pinsbox1 {
	color: #00a800;
}
.christmas .game2_body .frame-edited .pinsbox2 {
	color: #00a800;
}
.christmas .game2_body .frame-edited .pinsbox3 {
	color: #00a800;
}
.christmas .game2_body .game-over {
	color: #fff080;
}






.christmas .game3_body {
	background-Color: #f0f0f0;
}
.christmas .game3_top {
	background-Color: fff;
}
.christmas .game3_scoretop {
	background-Color: #00a800;
}

.christmas .game3_bottom {
	background-Color: #00a800;
}

.christmas .game3_bowler {
	background-Color: #ff0000;
}

.christmas .game3_body  .framehead {
	color: #ff0000;
}
.christmas .game3_body .footer-label {
	color: #008800;
}

.christmas .game3_body .team-wrapper { 
	border-color: #888800;
}

.christmas .game3_body .teamname {
	color: #009800;
	text-shadow: none;
}
.christmas .game3_body .shortname {
	color: #009800;
	text-shadow: none;
}

.christmas .game3_body .frame-edited .pinsbox1 {
	color: #c80000;
}
.christmas .game3_body .frame-edited .pinsbox2 {
	color: #c80000;
}
.christmas .game3_body .frame-edited .pinsbox3 {
	color: #c80000;
}


.christmas .game3_body .game-winner {
   -webkit-animation: christmas-winner3 2s infinite;
    animation: christmas-winner3 2s infinite;
	background-Color: #fff;
}


.christmas .game3_body .bowler-up {
	color: #cc0000;
	text-shadow: none;
}



.christmas .game3_body .game-loser {
	background-Color: #ccc;
}
@-webkit-keyframes christmas-winner3 {
  0%,100% { 	background-Color: #ddd; }
  50% { 	background-Color: #fff; }
}
@keyframes christmas-winner3 {
  0%,100% { 	background-Color: #ddd; }
  50% { 	background-Color: #fff; }
}

.christmas .game3_body .framebox {
	border-right: 1px solid #666;
}




#snowfall {
	background-image: url("../images/snowfall.gif");
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 99999;
	opacity: .15;
}



@keyframes fall {
  0% {
    opacity: 0;
  }
  50% {
    opacity: .5;
  }
  100% {
    top: 100vh;
    opacity: .85;
  }
}
@keyframes sway {
  0% {
    margin-left: 0;
  }
  25% {
    margin-left: 50px;
  }
  50% {
    margin-left: -50px;
  }
  75% {
    margin-left: 50px;
  }
  100% {
    margin-left: 0;
  }
}

#snow-container {  
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 0;
  transition: opacity 500ms;
  width: 100%;
  background: linear-gradient(to bottom, #000068 0%, #001 80%, #000 100%);
}
#snow-base {  
  height: 100vh;
  overflow: hidden;
  position: absolute;
  top: 80vh;
  transition: opacity 500ms;
  width: 100%;
  z-index: 99999;
  background: linear-gradient(to bottom, transparent 0%, #fff 1.5%, #fff 100%);

}

.snow {
  animation: fall ease-in infinite, sway ease-in-out infinite;
  color: skyblue;
  position: absolute;
}

.pin-img{ 
	z-index: 30;
}
.pin-img-small { 
	margin-top: 50px;
	z-index: 30;
	height: 20vh;
	line-height: 20vh;
}
.pin-img-smaller { 
	margin-top: 50px;
	z-index: 30;
	height: 15vh;
	line-height: 15vh;
}

#sadness1 {
	position: absolute;
	top: 3vh;
	left: 0vw;
	z-index: 9999999;
	display: none;
}
#sadness2 {
	position: absolute;
	top: 15vh;
	left: 110vw;
	z-index: 9999999;
	display: none;
}
#sadness2 img{
	scale: 1.3;
}


#sadness3 {
	position: absolute;
	top: 6vh;
	width: 100vw;
	z-index: 999999;
	display: none;
}


.tearsfromleft {
  animation-duration: 35s;
  animation-name: leftsad;
  animation-timing-function:linear;
  
}


.tearsfromright {
  animation-duration: 30s;
  animation-name: rightsad;
  animation-timing-function:linear;
  
}


@keyframes leftsad {
  from {
    left: -100vw;
  }
  to {
    left: 100vw;
  }
}


@keyframes rightsad {
  from {
    left: 100vw;
  }
  to {
    left: -100vw;
  }
}


@keyframes roll {
   from  {
     transform: rotate(0deg);
  }
  to {
     transform: rotate(360deg);
   }	
}

@keyframes roll2 {
  from {
    left: -600px;
  }
  to {
    left: 100vw;
  }
}



#endball {
	position: absolute;
	top: 12vh;
	left: -600;
	z-index: 999999;
	display: none;
}

.rollme {
  animation-duration: 1s;
  animation-name: roll;
  animation-timing-function:linear;
  animation-iteration-count: infinite;

}

.moveme {
  animation-duration: 3s;
  animation-name: roll2;
  animation-timing-function:linear;
  animation-iteration-count: 1;

}

.moveleft {
  animation-duration: 8s;
  animation-name: leftslide;
  animation-timing-function:linear;
  animation-iteration-count: 1;
}

.moveright {
  animation-duration: 8s;
  animation-name: rightslide;
  animation-timing-function:linear;
  animation-iteration-count: 1;
}

.startleft{
	left: -400px;
}
.startright{
	right: 100vw;
}
.startleft2{
	left: -800px;
}

@keyframes leftslide {
  from {
    left: 100vw;
  }
  to {
    left: -400px;
  }
}
@keyframes leftslide2 {
  from {
    left: 100vw;
  }
  to {
    left: -600px;
  }
}

@keyframes rightslide {
  from {
    left: -400px;
  }
  to {
    left: 100vw;
  }
}

@keyframes sway-r {
  0% {
    transform: rotate(10deg);
  }
  50% {
    transform: rotate(25deg);
  }
  100% {
    transform: rotate(10deg);
  }
}

@keyframes sway-l {
  0% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(-25deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}


@keyframes shimmy {
  0% {
    margin-left: 0;
  }
  25% {
    margin-left: 2.5px;
  }
  50% {
    margin-left: -2.5px;
  }
  75% {
    margin-left: 2.5px;
  }
  100% {
    margin-top: 0;
  }
}


@keyframes bob {
  0% {
    margin-top: 0;
  }
  25% {
    margin-top: 15px;
  }
  50% {
    margin-top: -15px;
  }
  75% {
    margin-top: 15px;
  }
  100% {
    margin-top: 0;
  }
}

@keyframes hobble {
  0% {
    margin-bottom: 0;
  }
  25% {
    margin-bottom: 5px;
  }
  50% {
    margin-bottom: -5px;
  }
  75% {
    margin-bottom: 5px;
  }
  100% {
    margin-bottom: 0;
  }
}



@keyframes looptyright {
  0% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(0deg);
  }
  85% {
    transform: rotate(90deg);
  }
  90% {
    transform: rotate(180deg);
  }
  95% {
    transform: rotate(270deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

@keyframes looptyleft {
  0% {
    transform: rotate(0deg) scaleX(-1);
  }
  80% {
    transform: rotate(0deg) scaleX(-1);
  }
  85% {
    transform: rotate(-90deg) scaleX(-1);
  }
  90% {
    transform: rotate(-180deg) scaleX(-1);
  }
  95% {
    transform: rotate(-270deg) scaleX(-1);
  }
  100% {
    transform: rotate(-359deg) scaleX(-1);
  }
}




@keyframes flash {
  0% {
    filter: brightness(50%);
  }
  25% {
    filter: brightness(100%);
  }
  50% {
     filter: brightness(150%);
  }
  75% {
   filter: brightness(100%);
  }
  100% {
   filter: brightness(50%);
  }
}



.swayright {
  animation: bob 3s linear infinite, sway-r 4s linear infinite, rightslide 25s linear 1;

}
.swayleft {
  animation: bob 3s linear infinite, sway-l 4s linear infinite, leftslide 25s linear 1;

}

.zipright {
  animation: flash .5s linear infinite, rightslide 10s linear 1;
}
.zipleft {
  animation: flash 0.5s linear infinite, leftslide 10s linear 1;
}



.flyright {
  animation: bob 5s linear infinite, looptyright 8s linear 1, shimmy .05s linear infinite, rightslide 12s linear 1;
}
.flyleft {
  animation: bob 5s linear infinite, looptyleft 8s linear 1, shimmy .05s linear infinite, leftslide 12s linear 1;
}


.creepright {
  animation: hobble .75s linear infinite, rightslide 18s linear 1;
}
.creepleft {
  animation: hobble .75s linear infinite, leftslide2 18s linear 1;
}





.flipit {
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
}


#snowend {
	display: none;
	opacity: 0;
	position: absolute;
	top: 35vh;
	left: 0vw;
	width: 100vw;
	height: 50vh;
	z-index: 999999999;
}

@keyframes strikeit {
  from {
    opacity: 0
  }
  to {
    opacity: 1
  }
}
@keyframes strikeit2 {
  from {
    width: 10vw;
  }
  to {
    width: 70vw;
  }
}

.strikefadein {
  animation-duration: 3s;
  animation-name: strikeit;
  animation-timing-function:linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;

}
.strikewiden {
  animation-duration: 3s;
  animation-name: strikeit2;
  animation-timing-function:linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;

}


#snowsanta {
	display: none;
	filter: brightness(70%);
	position: absolute;
	top: 3vh;
	left: 100vw;
	z-index: 1;
}
#snowsanta img {
	scale: .85;
}
	
#snowmaha{
	display: none;
	opacity: 1;
	position: absolute;
	top: 8vh;
	left: -200px;
	z-index: 0;
}
#snowmaha img {
	scale: 1.15;
}

#snowalien {
	display: none;
	opacity: 1;
	position: absolute;
	top: 12vh;
	left: 100vw;
	z-index: 2;
}
#snowalien img {
	scale: 1.15;
}

#snowsnoop{
	display: none;
	filter: brightness(80%);
	position: absolute;
	top: 6vh;
	left: -300px;
	z-index: 3;
}
#snowsnoop img {
	scale: .85;
}


#snowgrinch{
	display: none;
	filter: brightness(100%);
	position: absolute;
	bottom: -150px;
	left: -800px;
	z-index: 999999999;
}
.snowgrinch1{
	scale: 1.25;
}
.snowgrinch2{
	scale: 1.2;
}
.snowgrinch3 {
	scale: 1.1;
}
.snowgrinch4 {
	scale: 1;
}
.snowgrinch5 {
	scale: .9;
}





/* ~~~~~~ VALENTINE THEME ~~~~~~ */



.valentine .game1_body {
	background-Color: #ffcccc;
}
.valentine .game1_top {
	background-Color: #ffaaaa;
}
.valentine .game1_scoretop {
	background-Color: #cc8080;
}

.valentine .game1_bottom {
	background-Color: #cc8080;
}

.valentine .game1_bowler {
	background-Color: #aa6060;
}

.valentine .game1_body .game-winner {
  -webkit-animation: valentine-winner1 2s infinite;
    animation: valentine-winner3 2s infinite;
	background-Color: #ffcccc; 
}

.valentine .game1_body .game-loser {
	background-Color: #d06666; 
}
@-webkit-keyframes valentine-winner1 {
  0%,100% { 	background-Color: #ffcccc; }
  50% { 	background-Color: #ffe0e0; }
}




.valentine .game2_body {
	background-Color: #c86800;
}
.valentine .game2_top {
	background-Color: #ffc0c0;
}
.valentine .game2_scoretop {
	background-Color: #d06030;
}

.valentine .game2_bottom {
	background-Color: #d06030;
}

.valentine .game2_bowler {
	background-Color: #830;
}

.valentine .game2_body .game-winner {
   -webkit-animation: valentine-winner2 2s infinite;
    animation: valentine-winner2 2s infinite;
	background-Color: #d87800;
}
.valentine .game2_body .game-loser {
	background-Color: #b05000;
}
@-webkit-keyframes valentine-winner2 {
  0%,100% { 	background-Color: #d87800; }
  50% { 	background-Color: #ffa000; }
}
@keyframes valentine-winner2 {
  0%,100% { 	background-Color: #d87800; }
  50% { 	background-Color: #ffa000; }
}


.valentine .game3_body {
	background-Color: #ffaaaa;
}
.valentine .game3_top {
	background-Color: #e09999;
}
.valentine .game3_scoretop {
	background-Color: #cc8080;
}

.valentine .game3_bottom {
	background-Color: #cc8080;
}

.valentine .game3_bowler {
	background-Color: #aa6060;
}

.valentine .game3_body .game-winner {
  -webkit-animation: valentine-winner3 2s infinite;
    animation: valentine-winner3 2s infinite;
	background-Color: #ffcccc; 
}

.valentine .game3_body .game-loser {
	background-Color: #d06666; 
}
@-webkit-keyframes valentine-winner3 {
  0%,100% { 	background-Color: #ffcccc; }
  50% { 	background-Color: #ffe0e0; }
}

.valentine  .game-over {
	color: #ffffcc;
}



.mini-frame-wrapper {
	display: table-row;
	width:  100%;
	display: table;
	table-layout: fixed;
}

.mini-framebox {
	border-right: 1px solid black;
	background-Color: #eee;
	height: 60px;
	width: 10fr;
	position: relative;
	display: table-cell;
	color: black;
}


.mini-maxbox {
	border-left: 1px solid black;
	background-Color: #eef;
	color: black;
	height: 60px;
	width: 80px;
	position: relative;
	display: table-cell;
}


.mini-frameheader {
	border-bottom: 2px solid black;
	background-Color: #ccc;
	height: 20px;
	width: 100%;
	position: absolute;
	top: 0px;
	right: 0px;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	line-height: 20px;
}

.mini-maxheader {
	border-bottom: 2px solid black;
	color: black;
	background-Color: #dde;
	height: 20px;
	width: 100%;
	position: absolute;
	top: 0px;
	right: 0px;
	font-family: helvetica,arial,sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	line-height: 20px;
}


.mini-pinsbox1 {
	height: 20px;
	width: 50%;
	position: absolute;
	top: 20px;
	left: 0px;
	text-align: center;
	line-height: 20px;
	font-weight: bold;
	font-size: 20px;
	color: #009;
}

.mini-pinsbox2 {
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	height: 20px;
	width: 50%;
	position: absolute;
	top: 20px;
	right: 0px;
	text-align: center;
	line-height: 20px;
	font-weight: bold;
	font-size: 20px;
	color: #009;
}


.mini-pinsbox3 {
	border-left: 1px solid black;
	border-bottom: 1px solid black;
	height: 20px;
	width: 50%;
	position: absolute;
	top: 20px;
	right: 0px;
	line-height: 20px;
	font-weight: bold;
	font-size: 20px;
	color: #009;
}

.mini-scorebox {
	position: absolute;
	top: 40px;
	line-height: 20px;
	font-weight: bold;
	font-size: 20px;
	text-align: center;
width: 100%;
}

.mini-teamgame-1 {
	font-size: 36px;
	top: 30px;
}

.mini-teamscore-1 {
	font-size: 24px;
	top: 30px;
}



.mini-tenth-frame {
	width: 30px;
}


.mini-pinsbox2.mini-tenth-frame {
	right: 30px;
}

.mini-framebox.mini-tenth-frame {
	width: 90px;
}


.splitbuttons {
	width: max-content;
	text-align: center;
	display: flex;
    border-spacing: 10px 2px;
	justity-content: center;
}

.split-button-num {
	width: 66px;
	height:66px;
	border: 2px solid #446;
	border-radius: 33px;
	margin: 10px 15px 10px 15px;
	text-align: center;
	color: red;
	cursor: pointer;
	font-size: 32px;
	line-height: 66px;
	font-weight: 700;

	background: white;

    text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
    box-shadow: 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3);

}
.split-selected {
	color: white;
	background-color:red;
}

.ann-quote h1 {
	font-weight: 800;
	font-size:64px;
	color: white;
}

.no-bowler img {
	width:  40vw;
	max-width: 100%;
	position: absolute;
	bottom: 20vh !important;
	right: 0px;
}

.shortname-visible {
	display: table-cell;
}

.shortname-smaller {
	font-size: 26px;	
}

.teamname-smaller {
	font-size: 26px;
}



.halloween-ann-1 {
	display: inline;
}
.halloween-ann-2 {
	display: none;
}
.halloween-ann-3 {
	display: none;
}
.halloween-ann-4 {
	display: none;
}
.halloween-ann-5 {
	display: none;
}
.halloween-ann-6 {
	display: none;
}

.scaryteam .ann-quote b {
	font-size 36px;
	line-height 42px;
}

.scaryteam .ann-quote li {
	font-size 32px;
	line-height 40px;
}




.gutterbox-split {
	max-height: 70vh;
	width: 100vw;
	line-height: auto;
	position: absolute;
	top: 20vh;
}


.splitwrapper {
	height: 620px;
	width: 850px;
}

.splitwrapper .gutter-photo {
	float: left;
}


.gutter-rack {
	height: 465px;
	width: 610px;
	position: relative;
/*	left: 0px; */
	overflow: hidden;
	border: 5px solid gold;
	margin-bottom:20px;
}
.gutter-rack img {
	position: absolute;
	top: 0px;
	left: 0px;
}

.splitpin {
	height: 200px;
	width: 67px;
}




.gutter-pin {
}





.splitpin-1 { 
	scale: .875;
	filter: brightness(100%) drop-shadow(0px -2px 45px rgba(0,0,0));
	top: 280px !important; 
	left: 264px !important;	
}


.splitpin-2 { 
	scale: .825;
	filter: brightness(90%) drop-shadow(0px -2px 45px rgba(0,0,0));
	top: 255px !important; 
	left: 206px !important;
}
.splitpin-3 { 
	scale: .825;
	filter: brightness(90%) drop-shadow(0px -2px 45px rgba(0,0,0));
	top: 255px !important; 
	left: 322px !important;
}




.splitpin-4 { 
	scale: .775;
	filter: brightness(70%) drop-shadow(0px -2px 45px rgba(0,0,0));
	top: 230px !important; 
	left: 148px !important;	
}
.splitpin-5 { 
	scale: .775;
	filter: brightness(70%) drop-shadow(0px -2px 45px rgba(0,0,0));
	top: 230px !important; 
	left: 264px !important;	
}
.splitpin-6 { 
	scale: .775;
	filter: brightness(70%) drop-shadow(0px -2px 45px rgba(0,0,0));
	top: 230px !important; 
	left: 380px !important;	
}





.splitpin-7 { 
	scale: .725;
	filter: brightness(50%) drop-shadow(0px -2px 45px rgba(0,0,0));
	top: 205px !important; 
	left: 90px !important;	
}
.splitpin-8 { 
	scale: .725;
	filter: brightness(50%) drop-shadow(0px -2px 45px rgba(0,0,0));
	top: 205px !important; 
	left: 206px !important;
}
.splitpin-9 { 
	scale: .725;
	filter: brightness(50%) drop-shadow(0px -2px 45px rgba(0,0,0));
	top: 205px !important; 
	left: 322px !important;
}
.splitpin-10 { 
	scale: .725;
	filter: brightness(50%) drop-shadow(0px -2px 45px rgba(0,0,0));
	top: 205px !important; 
	left: 438px !important;
}



.gutter-pin-reflect {
	-webkit-transform: scaleY(-1);
	opacity: .63;
}




.reflect-1 { 
	scale: .875;
	filter: brightness(90%) blur(4px);
	top: 450px !important; 
	left: 264px !important;
}




.reflect-2 { 
	scale: .825;
	filter: brightness(80%) blur(2px);
	top: 420px !important; 
	left: 206px !important;
}
.reflect-3 { 
	scale: .825;
	filter: brightness(80%) blur(2px);
	top: 420px !important; 
	left: 322px !important;
}

.reflect-4 { 
	scale: .775;
	filter: brightness(70%) blur(3px);
	top: 388px !important; 
	left: 148px !important;
}
.reflect-5 { 
	scale: .775;
	filter: brightness(70%) blur(3px);
	top: 388px !important; 
	left: 264px !important;
}
.reflect-6 { 
	scale: .775;
	filter: brightness(70%) blur(3px);
	top: 388px !important; 
	left: 380px !important;
}





.reflect-7 { 
	scale: .725;
	filter: brightness(60%) blur(4px);
	top: 350px !important; 
	left: 90px !important;
}
.reflect-8 { 
	scale: .725;
	filter: brightness(60%) blur(4px);
	top: 350px !important; 
	left: 206px !important;
}
.reflect-9 { 
	scale: .725;
	filter: brightness(60%) blur(4px);
	top: 350px !important; 
	left: 322px !important;
}
.reflect-10 { 
	scale: .725;
	filter: brightness(60%) blur(4px);
	top: 350px !important; 
	left: 438px !important;
}


.light-1 {
	top: 142px !important;
	left: 276px !important;
}
.light-2 {
	top: 108px !important;
	left: 217px !important;
}
.light-3 {
	top: 108px !important;
	left: 336px !important;
}
.light-4 {
	top: 75px !important;
	left: 157px !important;
}
.light-5 {
	top: 76px !important;
	left: 276px !important;
}
.light-6 {
	top: 76px !important;
	left: 395px !important;
}
.light-7 {
	top: 40px !important;
	left: 96px !important;
}
.light-8 {
	top: 40px !important;
	left: 216px !important;
}
.light-9 {
	top: 40px !important;
	left: 336px !important;
}
.light-10 {
	top: 42px !important;
	left: 454px !important;
}







.team-record {
	font-size: 22px;
	color: #d8d8d8;
}










.freda-left {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}


.freda-right {
	position: relative;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}


.freda-left img {
	display: inline-block;          /* ensures transform behaves predictably */
	position: relative;
	top: 80px;
	left: 0px;
	z-index: 9999;
	opacity: .8;

  animation:
    fadeOut 8s ease-in-out  ,
    spin 4s linear infinite;
  transform-origin: center center; /* ensures rotation around center */
}

.freda-right img {
	display: inline-block;          /* ensures transform behaves predictably */
	position: relative;
	top: 80px;
	left: 0px;
	z-index: 9999;
	opacity: .8;

  animation:
    fadeOut 8s ease-in-out ,
    spin2 4s linear infinite;
  transform-origin: center center; /* ensures rotation around center */
}


/* Spin forever around the center */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes spin2 {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}


@keyframes fadeOut {
  0% { opacity: 0; }
  50% { opacity: .0; }
  100% { opacity: .8; }
}






  /* Container keeps the image clipped while it moves across the viewport */
  .stage {
    position: absolute;
    width: 100%;
    height: 621px; /* change to suit your layout */
	bottom: 60px;
    overflow: hidden;
     display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  /* The walker element holds the image and is positioned absolutely so it can travel */
  .walker {
	z-index: 1;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) translateX(calc(-1 * var(--image-offset, 200px)));
    will-change: transform, opacity;
    /* animation control variables */
    --walk-duration: 10s;                 /* total time left_right */
    --image-offset: 200px;                /* approximate image width (used to start/finish off-screen) */
    animation: walk-right var(--walk-duration) linear forwards;
    /* optional: pause on hover for inspection */
  }

  .walker img {
    display: block;
    height: 600px; /* control visible image size */
    width: auto;
    pointer-events: none;
    user-select: none;
	z-index: 999999;

  }

  /* Keyframes: move from off-screen left to off-screen right while fading */
  @keyframes walk-right {
    0% {
      transform: translateY(-50%) translateX(calc(-1 * var(--image-offset, 200px)));
      opacity: .75;
    }
    100% {
      transform: translateY(-50%) translateX(calc(100vw + var(--image-offset, 200px)));
      opacity: .25;
    }
  }

  /* Pause animation when hovering the stage (useful for debugging) */
  .stage:hover .walker {
    animation-play-state: paused;
  }

  /* Respect user preference for reduced motion - do a simple fade instead */
  @media (prefers-reduced-motion: reduce) {
    .walker {
      animation: fade-only 1.5s ease-out forwards;
    }
    @keyframes fade-only {
      from { opacity: 1; }
      to { opacity: 0; }
    }
    /* avoid transform changes for reduced-motion users */
    .walker { transform: translateY(-50%) translateX(0); left: 0; }
  }






  .image-rise {
    position: fixed;
    left: 50%;
    bottom: -40vh;           /* start well below viewport */
    transform: translateX(-50%) scale(0.6);
    opacity: 1;
    will-change: transform, opacity;
    animation: rise-expand 5s ease-out forwards;
  }

  .image-rise img {
    width: 50vw;   /* starting visual size */
    max-width: 600px;
    height: auto;
    display: block;
	z-index: 999999;

  }

  @keyframes rise-expand {
    0% {
      bottom: -40vh;
      transform: translateX(-50%) scale(0.6);
      opacity: 1;
    }

    50% {
      bottom: 50%;                              /* reach vertical center */
      transform: translate(-50%, 50%) scale(1); /* visually centered */
      opacity: 1;
    }

    100% {
      bottom: 50%;
      transform: translate(-50%, 50%) scale(4); /* expand to fill screen */
      opacity: 0;
    }
  }

  /* Respect reduced-motion preference */
  @media (prefers-reduced-motion: reduce) {
    .image-rise {
      animation: fade-only 1.5s ease-out forwards;
      transform: translateX(-50%) scale(1);
      bottom: 50%;
    }
    @keyframes fade-only {
      from { opacity: 1; }
      to { opacity: 0; }
    }
  }