.SK, #TripEditor { font-size: 11pt; } 
table.SK, .SK td, #TripEditor table, #TripEditor tr, #TripEditor td { border-collapse: collapse; border-color:#777; } 
body:not(.AllowSelect) .SK { user-select: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -o-user-select: none; } 
.SK tr { color: #333; } 
.SK .Hide { display: none; } 
.SK.Period tr td.clickMe { color: black; background: #ff9010; }
.SK.Period tr.Edit .EditButton .ui-button { background: #3f3; }
.SK.Period tr.Edits:not(.Edit) { display: none; }
.SK.Period tr:not(.Edit) .EditOnly { display: none; }
.SK.Period tr.IgnoreEdit .EditOnly { display: none; }
.SK.Period tr.Edit .NoEditOnly { display: none; }
.SK.Period td:not(.Used) > .UsedOnly { display: none; }
.SK.Period td:not(.OtherUsed) > .OtherUsedOnly { display: none; }
.SK.Period td.Used > .FirstUnusedOnly { display: none; }
.SK.Period td.OtherUsed > .FirstUnusedOnly { display: none; }
.SK.Period td:not(.Used) + td > .FirstUnusedOnly { display: none; }
.SK.Period tr.HasSP .AddSP { display: none; }
.SK.Period tr:not(.HasSP) .InitialSP { display: none; }
.SK.Period tr:not(.IsOR) .OROnly { display:none; }
.SK.Period .Active { background: #3f3; }
.SK.Period { width: 98%; table-layout:fixed; margin: 0.5em 1%; } 
.SK.Period thead td { font-size: 95%; background-color: #cccccc; color: #333333; } 
.SK.Period .SmallHead>div { font-size: 75%; transform: rotate(270deg); } 
.SK.Period td { text-align: center; vertical-align: middle; } 
.SK.Period tr { background-color: #FFF; height: 31px; } 
.SK.Period.Forwards tr:nth-child(odd) { background-color: #e9f6da; } 
.SK.Period.Backwards tr:nth-last-child(odd) { background-color: #e9f6da; } 
.SK.Period tr.Timeout { background-color: #e0d0f0; height: 31px; } 
.SK.Period.Forwards tr.Timeout:nth-child(odd) { background-color: #e0d0f0; } 
.SK.Period.Backwards tr.Timeout:nth-last-child(odd) { background-color: #e0d0f0; } 
.SK.Period tr .Darker { background-color: #e9f6da; } 
.SK.Period.Forwards tr:nth-child(odd) .Darker { background-color: #d3ecb6; } 
.SK.Period.Backwards tr:nth-last-child(odd) .Darker { background-color: #d3ecb6; } 
.SK.Period.Backwards tr.SP td { border-bottom-style: dotted; } 
.SK.Period.Forwards tr.SP td { border-top-style: dotted; } 
.SK.Period.Forwards tr.Edits:not(.Before) td { border-top-style: dotted; } 
.SK.Period.Backwards tr.Edits:not(.Before) td { border-bottom-style: dotted; } 
.SK.Period.Forwards tr.Edits.Before td { border-bottom-style: dotted; } 
.SK.Period.Backwards tr.Edits.Before td { border-top-style: dotted; } 
.SK.Period .EditButton { width: 30px; background-color: #FFF; }
.SK.Period .EditButton .ui-button { padding: .4em; }
.SK.Period .JamNumber { width: 30px; } 
.SK.Period .Overtime .JamNumber::after { font-size: 50%; content: "OT"; vertical-align: top; padding-left: 1px; } 
.SK.Period .Jammer { width: 50px; } 
.SK.Period .Jammer>span { width: 100%; height: 100%; } 
.SK.Period .Narrow, .Period .SmallHead { width: 14px; } 
.SK.Period #head { font-size: calc(200% - 1px); } 
.SK.Period .Trip, .Period .JamTotal, .Period .GameTotal { width: 9%; } 
.SK.Period .GameTotal, .SK.Period .JamTotal,.SK.Period .Lost, .SK.Period .Trip2 { border-left-width: 2px; } 
.SK.Period tr .GameTotal { background-color: #d3ecb6; } 
.SK.Period .hasAnnotation { position: relative; } 
.SK.Period .hasAnnotation::after { position: absolute; right: 2px; top: 2px; height: 5px; width: 5px; background-color: red; content: ""; } 

#TripEditor input[type="number"] { width: 50px; } 
#TripEditor table { width: 100%; } 
#TripEditor td { padding: 0.25em; text-align: center; width: 33%; } 
#TripEditor td.close { text-align: right; } 
#TripEditor .header { font-weight: bold; } 
#TripEditor .ui-button { font-size: 75%; } 
#TripEditor .ui-button.checked { background: #3f3; } 
#TripEditor .Hide { display: none; } 
#TripEditor .Invisible { visibility: hidden; } 

#skaterSelector .Hide { display: none; } 

#osOffsetEditor .Offset { width: 40px; } 
#osOffsetEditor .Reason { margin: 0px 5px; } 

.SK.Period .noTripAlert { position: relative; } 
.SK.Period .noTripAlert::after { position: absolute; right: 2px; top: 2px; height: 5px; width: 5px; background-color: red; content: ""; }