.clipball-row{display:flex;gap:20px 10px;margin:15px 0;}
.clipball-row a{color:#fff;}
.clipball-row a:hover{opacity:0.5;filter:alpha(opacity=50);transition:all .3s ease-in-out;}
.clipball-cols{width:25%;font-size:0.8rem;background:#222;color:#aaa;}
.clipball-cols .clip-topic{padding:3px 8px;}
.clipball-cols .clip-date{display:flex;padding:0 8px;font-size:0.75rem;}
.clipball-cols .clip-date .date{width:50%;text-align:left;}
.clipball-cols .clip-date .views{width:50%;text-align:right;}

.clipdetail-nav{display:flex;background:#222;padding:5px 10px;}
.clipdetail-nav .nav-date{width:50%;text-align:left;}
.clipdetail-nav .nav-views{width:50%;text-align:right;}
.clipdetail-video{text-align:center;margin:12px auto 0 auto;max-width:850px;}
.clipdetail-video video{width:100%;height:auto;}
.clipdetail-content{
    text-align:left;margin-top:12px;background:#222;padding:12px;
    border-radius:8px;-khtml-border-radius:8px;-moz-border-radius:8px;
}

@media screen and (min-width:590px) and (max-width:919px){
    .clipball-row{flex-wrap:wrap;gap:10px 10px;}
    .clipball-cols{width:49%;}
}

@media screen and (min-width:280px) and (max-width:589px){
    .clipball-row{flex-wrap:wrap;gap:10px 10px;}
    .clipball-cols{width:100%;}
}