#mine-wrapper .game-wrapper .users { width: 180px; padding: 0 10px 0 0; } #mine-wrapper .game-wrapper .users .user-container { background: #FFFFFF; height: 40%; font-family: 'Open Sans', sans-serif; padding: 5px; margin: 5px; z-index: 99; -webkit-border-radius: 10px; border-radius: 10px; } #mine-wrapper .game-wrapper .users .user-container.user-blue { background: rgb(35, 111, 135); background: -moz-linear-gradient(top, rgba(35, 111, 135, 1) 0%, rgba(149, 207, 245, 1) 100%); background: -webkit-linear-gradient(top, rgba(35, 111, 135, 1) 0%, rgba(149, 207, 245, 1) 100%); background: linear-gradient(to bottom, rgba(35, 111, 135, 1) 0%, rgba(149, 207, 245, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#236f87', endColorstr='#95cff5', GradientType=0); margin-top: 0; } #mine-wrapper .game-wrapper .users .user-container.user-red { background: rgb(173, 10, 5); background: -moz-linear-gradient(top, rgba(173, 10, 5, 1) 0%, rgba(246, 125, 82, 1) 100%); background: -webkit-linear-gradient(top, rgba(173, 10, 5, 1) 0%, rgba(246, 125, 82, 1) 100%); background: linear-gradient(to bottom, rgba(173, 10, 5, 1) 0%, rgba(246, 125, 82, 1) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ad0a05', endColorstr='#f67d52', GradientType=0); } #mine-wrapper .game-wrapper .users .user-container .user-header { background: -moz-linear-gradient(top, rgba(255, 255, 255, 0.7) 39%, rgba(255, 255, 255, 0.21) 87%, rgba(0, 0, 0, 0) 100%); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.7) 39%, rgba(255, 255, 255, 0.21) 87%, rgba(0, 0, 0, 0) 100%); background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 39%, rgba(255, 255, 255, 0.21) 87%, rgba(0, 0, 0, 0) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00000000', GradientType=0); position: relative; font: bolder 25px 'Changa One', cursive; letter-spacing: 5px; text-transform: uppercase; text-align: center; padding: 6px 5px 20px 5px; margin-bottom: 40px; -webkit-border-radius: 5px; border-radius: 5px; -webkit-text-shadow: 1px 1px 0 #FFF; text-shadow: 1px 1px 0 #FFF; } #mine-wrapper .game-wrapper .users .user-container.user-blue .user-header { color: #236f87; } #mine-wrapper .game-wrapper .users .user-container.user-red .user-header { color: #AD0A05; } #mine-wrapper .game-wrapper .users .user-container .user-header > img { position: absolute; left: 50%; bottom: 0; width: 40%; margin-left: -20%; margin-bottom: -25%; } #mine-wrapper .game-wrapper .users .user-container .user-header > img.user-cursor { display: block; width: 30%; top: 20px; left: 10px; margin-left: 0; -webkit-animation: cursorJumping 1.2s cubic-bezier(.36, .07, .19, .97) infinite; animation: cursorJumping 1.2s cubic-bezier(.36, .07, .19, .97) infinite; } #mine-wrapper .game-wrapper .users .user-container .user-header > img.user-cursor::after { content: ''; width: 50px; height: 50px; background: #1A6844; animation: animate .5s linear infinite; position: absolute; top: 0; left: 0; border-radius: 3px; } @keyframes cursorJumping { 0% { top: 15px; } 50% { top: 25px; } 100% { top: 15px; } } #mine-wrapper .game-wrapper .users .user-container .user-name { min-height: 30px; font-weight: normal; text-align: center; white-space: nowrap; text-overflow: ellipsis; padding: 3px 0; margin: 0 5px; overflow: hidden; } #mine-wrapper .game-wrapper .users .user-container.user-blue .user-name { border-top: 1px dashed #0b3776; border-bottom: 1px dashed #0b3776; color: #0b3776; } #mine-wrapper .game-wrapper .users .user-container.user-red .user-name { color: #fdf612; border-top: 1px dashed #fdf612; border-bottom: 1px dashed #fdf612; } #mine-wrapper .game-wrapper .users .user-container .user-caret { height: 30px; font-size: 30px; text-align: center; line-height: 15px; } #mine-wrapper .game-wrapper .users .user-container.user-blue .user-caret > i { color: #0b3776; } #mine-wrapper .game-wrapper .users .user-container.user-red .user-caret > i { color: #fdf612; } #mine-wrapper .game-wrapper .users .user-container .user-desc { height: 65px; font-size: 14px; text-align: center; } #mine-wrapper .game-wrapper .users .user-container.user-blue .user-desc { color: #0b3776; } #mine-wrapper .game-wrapper .users .user-container.user-red .user-desc { color: #fdf612; }