body {
      font:10px Verdana, sans-serif;
                margin:0;
                padding: 0;
                background: #4b4b4b;
        }
div { display: block }       
.hauptidx {
    width: 155px;height: 162px; background: #f6edc9;
}
        a {
               color: #000000;
               font-size: 10px;
               display: block
        }
        a:hover {
               color: #3CBEF5;
        }
        a.top100 {
               color: #000000;
               font-size: 11px;
               display: block;
               margin: 5px 10px 0 10px;
               width: 133px;
               background: #FDC94B;
               border: 1px solid #444;
               padding: 4px 0 5px 0;
               font-weight: 900;
               text-align: center;
               -webkit-border-radius: 9px 9px 9px 9px;
    -khtml-border-radius: 9px 9px 9px 9px;
    -moz-border-radius: 9px 9px 9px 9px;
    border-radius: 9px 9px 9px 9px;
    -webkit-box-shadow: 0 3px 3px #000;
    -moz-box-shadow: 0 3px 3px #000;
    box-shadow: 2px 3px 2px #000
        }
        a.top100:hover {
               color: #3CBEF5;
               border: 1px solid #222;
               background: #125572;
        }

        #site  {
                max-width: 155px;
                background-color: #fff;
                color: #111;
                }
.haupt {
    width: 155px;height: 191px;
}
.charteintrag {  }
.charteintragidx { height: 162px; width: 170px; }

.no1 {
        height: 41px;
    width: 153px;
    background: #F0EEEF;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    border-left: 1px solid #000;
}
.no1idx {
    height: 15px;width: 144px; padding: 6px 5px 5px 4px; margin: 0 0 1px 0;font-weight: 600;font-size: 14px; background: #F0EEEF;
}
.ipret { float: left;
    text-align: center;
    width: 148px;
    font-size: 10px;
    line-height: 11px;
    height: 11px;
    padding: 5px 2px 4px 3px;
    color: #eee;
    background: #111;
    margin: 1px 1px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-top: 1px solid #777 }
.sgtitel { float: left;
    text-align: center;
    width: 148px;
    font-size: 11px;
    line-height: 12px;
    height: 12px;
    padding: 3px 1px 4px 4px;
    color: #FFD750;
    background: #111;
    margin: 0 1px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
.ipretidx { float: left;font-size: 11px;padding: 3px;color: #eee;border: 1px solid #000;background: #333; margin: 0 1px 4px 1px; }
.videopic { float: left;
    width: 153px !important;
    height: 87px;
    background: #edd24c url( 'https://www.oljo.de/270vidpic/playbut.png' );background-size: contain; background-repeat: no-repeat;
    overflow: hidden;
    border: 1px solid #000 }
.emptyvideopic { float: left;
    width: 153px !important;
    max-width: 153px;
    height: 87px;
    border: 1px solid #000 }
.videopic img { width: 153px !important;transform: scale(1.35); object-fit: cover }
.emptyvideopic img { width: 153px !important; }
.videopic img.opacity:hover {
	opacity: 0.60;
	filter: alpha(opacity=60);
  -webkit-transition: all 300ms ease-in-out 0.3s;
    -moz-transition: all 300ms ease-in-out 0.3s;
    -o-transition: all 300ms ease-in-out 0.3s;
    transition: all 300ms ease-in-out 0.3s;
    z-index:2;
	}
.top100link { float: left;height: 20px;margin: 2px; } 
a.mehrhits {
color: #0f25fd;    
}
a.mehrhits:hover {
color: #cd06d9;    
}
.cibox {
width: 710px;
height: 252px;
background-color: #4b4b4b;
font:10px Verdana, sans-serif;
}
.ciheadline { 
height: 22px;
max-width: 688px;
padding: 2px 7px 0 13px;
margin: 2px 0 2px 0;
background: #ffffff;
color: #111;font-size: 14px;
border: 1px solid #000; 
}
.ci-entries {
width: 688px;
min-height: 222px;
padding: 0 2px 0 3px;
margin: 0 8px;
display: flex;
justify-content: center
}
.ci-entry {
float: left;
max-width: 155px;
height: 222px;
}