.gif-player { float: left; margin: 0 16px 0 0;
/* float: left; margin: 0 0 0 0; width: 420px; height: 320px; */ }

.gif-player .canvas { background: #111; box-shadow: 0px 1px 3px #888;
border: 8px solid white; }

.gif-player .canvas img { display: block; }

.gif-ctrl { position: relative; bottom: 100%; width: 100%; height: 100%;
/* border: 1px solid gray; */ cursor: pointer; }

.gif-player-e .gif-ctrl  { background-position: center; background-repeat: no-repeat;
background-image: url('./play_button_128.png'); }

.gif-player-e .gif-ctrl:hover { background-position: center; background-repeat: no-repeat;
background-image: url('./play_button_128_hover.png'); }

.gif-player-l .gif-ctrl, .gif-player-l .gif-ctrl:hover
{ background-position: center; background-repeat: no-repeat;
background-image: url('./cancel.gif') !important; }

.gif-player-s .gif-ctrl { width: 100%; height: 100%;
background-position: center; background-repeat: no-repeat;
background-image: url('./play_button_128.png'); }

.gif-player-s .gif-ctrl:hover { width: 100%; height: 100%;
background-position: center; background-repeat: no-repeat;
background-image: url('./play_button_128_hover.png'); }

.gif-player-p .gif-ctrl, .gif-player-p .gif-ctrl:hover {}