body{font-family:"Segoe UI",Arial,sans-serif;background:#007ac3;color:#fff;height:100%;min-height:100%;overflow:hidden}.timer{font-size:.75em;display:block;margin-top:-2px;color:gray}.substitute-timer{font-size:.9em;display:block;margin-top:-3px;color:#000}.time-to-substitute{color:red}h3{margin:0;padding:0;margin-bottom:5px}@keyframes pulse-source{0%{-moz-box-shadow:0 0 0 0 rgba(0,0,0,.4);box-shadow:0 0 0 0 rgba(0,0,0,.4)}70%{-moz-box-shadow:0 0 0 10px rgba(0,0,0,0);box-shadow:0 0 0 10px rgba(0,0,0,0)}100%{-moz-box-shadow:0 0 0 0 rgba(0,0,0,0);box-shadow:0 0 0 0 rgba(0,0,0,0)}}@keyframes pulse-target{0%{-moz-box-shadow:0 0 0 0 rgba(255,255,255,.4);box-shadow:0 0 0 0 rgba(255,255,255,.4)}70%{-moz-box-shadow:0 0 0 10px rgba(255,255,255,0);box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{-moz-box-shadow:0 0 0 0 rgba(255,255,255,0);box-shadow:0 0 0 0 rgba(255,255,255,0)}}@keyframes pulse_animation{0%{transform:scale(0.95);box-shadow:0 0 0 0 rgba(255,255,255,.4)}70%{transform:scale(1.1);box-shadow:0 0 0 10px rgba(255,255,255,0)}100%{transform:scale(0.95);box-shadow:0 0 0 10px rgba(255,255,255,0)}}#content{margin:auto;position:relative;text-align:center;padding:0;max-width:500px;height:100%;min-height:100%;overflow:hidden}#content #hockeyPlayer{height:90px;position:absolute;bottom:20px;right:3px}#content #installBtn{height:40px;width:100px;position:absolute;bottom:20px;left:3px;font-weight:bold;font-size:14px;text-align:center;cursor:pointer;outline:none;color:#fff;background-color:#113c72;border:none;border-radius:5px;box-shadow:0 0 3px #111;display:none}#cancelSection{position:absolute;list-style:none;padding:0;margin:0;display:none}#cancelSection li{width:55px;height:55px;background-color:transparent}ul{list-style:none;position:relative;margin:auto}ul.substitute-players{float:left;width:210px}ul.on-field-players{background:url("../images/background.svg");background-size:100%;background-position-y:100%}ul.on-field-players li,ul.substitute-players li{border:1px solid #000;width:55px;height:55px;margin-bottom:5px;vertical-align:middle;text-align:center;position:absolute;color:#000;border-radius:50%;background:#fff url(../images/players/player.png) no-repeat top center;background-size:cover;box-shadow:0 0 0 rgba(204,169,44,.4)}ul.on-field-players li.attacker,ul.substitute-players li.attacker{background-color:#e38e8e}ul.on-field-players li.defender,ul.substitute-players li.defender{background-color:#87ff6f}ul.on-field-players li.highlighted,ul.substitute-players li.highlighted{animation:pulse-target 1s infinite;animation-name:pulse_animation;animation-duration:700ms;transform-origin:70% 70%;animation-iteration-count:infinite;animation-timing-function:linear}ul.on-field-players li.sortable-chosen,ul.substitute-players li.sortable-chosen{animation:pulse-source 1s infinite;opacity:.5}ul.on-field-players li.sortable-drag,ul.substitute-players li.sortable-drag{animation:none;background-image:url(../images/players/player-white.png);background-color:transparent;border:2px solid #fff;color:#fff}ul.on-field-players li.sortable-drag .timer,ul.on-field-players li.sortable-drag .substitute-timer,ul.substitute-players li.sortable-drag .timer,ul.substitute-players li.sortable-drag .substitute-timer{display:none}ul.on-field-players li::after,ul.substitute-players li::after{color:#fff;position:absolute;top:38px;font-size:.75em}ul.on-field-players li .timer,ul.substitute-players li .timer{font-size:.75em;display:block;color:#fff;position:absolute;left:0;right:0;margin:auto;bottom:-35px;opacity:.75}ul.on-field-players li .substitute-timer,ul.substitute-players li .substitute-timer{font-size:.9em;display:block;margin-top:-20px;color:#fff}ul.on-field-players li .substitute-timer.time-to-substitute,ul.substitute-players li .substitute-timer.time-to-substitute{color:red;text-shadow:0 1px 2px #333;font-weight:bold}ul.on-field-players li .name,ul.substitute-players li .name{position:absolute;bottom:-20px;left:0;right:0;margin:auto;text-shadow:0 1px 3px #000;color:#fff;font-weight:bold}#fieldPlayers{height:380px;background-color:green;margin-bottom:10px}#fieldPlayers li:nth-child(1){top:0px;left:50px}#fieldPlayers li:nth-child(1)::after{content:"1"}#fieldPlayers li:nth-child(2){top:0px;left:0;right:0;margin:auto}#fieldPlayers li:nth-child(2)::after{content:"2"}#fieldPlayers li:nth-child(3){top:0px;right:50px}#fieldPlayers li:nth-child(3)::after{content:"3"}#fieldPlayers li:nth-child(4){top:95px;left:0;right:0;margin:auto}#fieldPlayers li:nth-child(4)::after{content:"4"}#fieldPlayers li:nth-child(5){bottom:130px;left:50px}#fieldPlayers li:nth-child(5)::after{content:"5"}#fieldPlayers li:nth-child(6){bottom:130px;left:0;right:0;margin:auto}#fieldPlayers li:nth-child(6)::after{content:"6"}#fieldPlayers li:nth-child(7){bottom:130px;right:50px}#fieldPlayers li:nth-child(7)::after{content:"7"}#fieldPlayers li:nth-child(8){background-image:url(../images/players/keeper.png);bottom:35px;background-color:gray;position:absolute;color:#fff;vertical-align:middle;text-align:center;border:1px solid #fff;left:0;right:0;margin:auto}#fieldPlayers li:nth-child(8) .timer{display:none}#substitutePlayersContainer{background-color:#333;border:1px solid #fff;height:128px;clear:both;position:relative}#substitutePlayersContainer ul.substitute-players{float:left;width:210px;height:100px;left:0;top:8px;position:absolute}#substitutePlayersContainer ul.substitute-players li:nth-child(1){top:16px;left:10px}#substitutePlayersContainer ul.substitute-players li:nth-child(1)::after{content:"6"}#substitutePlayersContainer ul.substitute-players li:nth-child(2){top:16px;left:87px}#substitutePlayersContainer ul.substitute-players li:nth-child(2)::after{content:"7"}#substitutePlayersContainer ul.substitute-players li:nth-child(3){top:16px;left:164px}#substitutePlayersContainer ul.substitute-players li:nth-child(3)::after{content:"8"}#substitutePlayersContainer ol.substitute-players-order{margin-right:22px;margin-top:3px;list-style-type:upper-roman;top:0;right:15px;position:absolute;width:50px}#substitutePlayersContainer ol.substitute-players-order::before{font-size:.85em;opacity:.5;opacity:.5}#substitutePlayersContainer ol.substitute-players-order.defenders::before{content:"Verdedigers";color:#87ff6f}#substitutePlayersContainer ol.substitute-players-order.attackers{right:125px}#substitutePlayersContainer ol.substitute-players-order.attackers::before{content:"Aanvallers";color:#e38e8e}#substitutePlayersContainer ol.substitute-players-order li{color:#fff;font-size:.9em;text-align:left;padding-left:10px}ul li::after{color:#000;position:absolute;bottom:2px;margin:auto;left:0;right:0;font-weight:bold}#startStopButton,#resetButton{padding:5px 20px 5px 20px;font-size:1.5em;display:block;margin:10px auto auto}#startStopButton{width:250px;height:50px;font-size:24px;text-align:center;cursor:pointer;outline:none;color:#fff;background-color:#da9b00;border:none;border-radius:5px;box-shadow:0 0 3px #111;background-size:40px;background-repeat:no-repeat;background-position:left;background-position-x:10px}#startStopButton.start{background-image:url("../images/icon-play.svg")}#startStopButton.stop{background-image:url("../images/icon-stop.svg")}#startStopButton.reset{background-color:red}#resetButton{width:250px;height:50px;font-size:24px;text-align:center;cursor:pointer;outline:none;color:#fff;background-color:red;border:none;border-radius:5px;box-shadow:0 0 3px #111;background-size:40px;background-repeat:no-repeat;background-position:left;background-position-x:10px}#resetButton:active{background-color:#900;box-shadow:0 1px #666;transform:translateY(2px)}#startStopButton:active{background-color:#bf8904;box-shadow:0 1px #666;transform:translateY(2px)}#game-timer{font-size:4em;display:block;margin-top:15px;text-shadow:0 2px 5px #000;font-family:"Orbitron",sans-serif;position:absolute;bottom:17px;left:0;right:0}#game-timer.negative{color:red}