/* superhover */
div.superhover {
    position: relative;
    overflow: hidden;
}

div.superhover[data-role] {
    cursor: pointer;
}

div.superhover .superhover-hidden {
    display: none;
}



    /* superhover-image */
    div.superhover div.superhover-image,
    div.superhover div.superhover-video {
        position: absolute;
        top:0;
        left:0;
        width: 100%;
        height: 70%;
        overflow: hidden;
    }
    
    
    /* superhover-image > ratio */
    div.superhover[data-ratio="55:45"] div.superhover-image,
    div.superhover[data-ratio="55:45"] div.superhover-video {
        height: 55%;
    }
    
    div.superhover[data-ratio="60:40"] div.superhover-image,
    div.superhover[data-ratio="60:40"] div.superhover-video {
        height: 60%;
    }
    
    div.superhover[data-ratio="65:35"] div.superhover-image,
    div.superhover[data-ratio="65:35"] div.superhover-video {
        height: 65%;
    }
    
    div.superhover[data-ratio="70:30"] div.superhover-image,
    div.superhover[data-ratio="70:30"] div.superhover-video {
        height: 70%;
    }
    
    div.superhover[data-ratio="80:20"] div.superhover-image,
    div.superhover[data-ratio="80:20"] div.superhover-video {
        height: 80%;
    }
    
    div.superhover[data-ratio="90:10"] div.superhover-image,
    div.superhover[data-ratio="90:10"] div.superhover-video {
        height: 90%;
    }
    
        div.superhover div.superhover-video iframe {
            width: 100%;
            height: 100%;
        }
        
        
        /* superhover-thumbs */
        div.superhover div.superhover-image ul.superhover-thumbs {
            position: absolute;
            bottom: 0;
            left:0;
        }
        
            div.superhover div.superhover-image ul.superhover-thumbs li {
                padding: 0 2px 0 0;
                float: left;
            }
            
                div.superhover div.superhover-image ul.superhover-thumbs li img {
                    width: 38px;
                    height: 38px;
                    display: block;
                }
    
    
    /* superhover-text */
    div.superhover div.superhover-text {
        position: absolute;
        top:70%;
        left:0;
        width: 100%;
        height: 50%;
        overflow: hidden;
        background: #fff;
    }
    
    
    /* superhover-text > ratio */
    div.superhover[data-ratio="55:45"] div.superhover-text {
        top: 55%;
    }
    
    div.superhover[data-ratio="60:40"] div.superhover-text {
        top: 60%;
    }
    
    div.superhover[data-ratio="65:35"] div.superhover-text {
        top: 65%;
    }
    
    div.superhover[data-ratio="70:30"] div.superhover-text {
        top: 70%;
    }
    
    div.superhover[data-ratio="80:20"] div.superhover-text {
        top: 80%;
    }
    
    div.superhover[data-ratio="90:10"] div.superhover-text {
        top: 90%;
    }
    
    /* article female */
     superhover-text > colors 
    div.superhover[data-color="rose"][data-new="true"] div.superhover-text,
    div.superhover[data-color="rose"]:hover div.superhover-text {
        background: #ff99cc;
    }
    
    /* article male */
    div.superhover[data-color="blue"][data-new="true"] div.superhover-text,
    div.superhover[data-color="blue"]:hover div.superhover-text {
        background: #4ca5ff;
    }
    
    /*  Video, Videoalbum,  */ 
    div.superhover[data-color="green"][data-new="true"] div.superhover-text,
    div.superhover[data-color="green"]:hover div.superhover-text {
        background: #66cc99;
    }
    
    div.superhover[data-color="sand"][data-new="true"] div.superhover-text,
    div.superhover[data-color="sand"]:hover div.superhover-text {
        background: #ffcc99;
    }
    /* Trendsetter */
    div.superhover[data-color="brown"][data-new="true"] div.superhover-text,
    div.superhover[data-color="brown"]:hover div.superhover-text {
        background: #ff9966;
    }
    
    div.superhover[data-color="aqua"][data-new="true"] div.superhover-text,
    div.superhover[data-color="aqua"]:hover div.superhover-text {
        background: #99cccc;
    }
    /*Product, Productalbum, Regards */
    div.superhover[data-color="red"][data-new="true"] div.superhover-text,
    div.superhover[data-color="red"]:hover div.superhover-text {
        background: #ff6666;
    }
    /*Foto, Fotoalbum */
    div.superhover[data-color="purple"][data-new="true"] div.superhover-text,
    div.superhover[data-color="purple"]:hover div.superhover-text {
        background: #9966ff;
    }
    
    div.superhover[data-color="friendgroup_top"][data-new="true"] div.superhover-text,
    div.superhover[data-color="friendgroup_top"]:hover div.superhover-text {
        background: #ff9966;
    }
    
    div.superhover[data-color="friendgroup_bottom"][data-new="true"] div.superhover-text,
    div.superhover[data-color="friendgroup_bottom"]:hover div.superhover-text {
        background: #4ca5ff;
    }
    
    div.superhover[data-color="articlegroup_top"][data-new="true"] div.superhover-text,
    div.superhover[data-color="articlegroup_top"]:hover div.superhover-text {
        background: #66cc99;
    }
    
    div.superhover[data-color="articlegroup_bottom"][data-new="true"] div.superhover-text,
    div.superhover[data-color="articlegroup_bottom"]:hover div.superhover-text {
        background: #4ca5ff;
    }
    div.superhover[data-color="requestgroup_top"][data-new="true"] div.superhover-text,
    div.superhover[data-color="requestgroup_top"]:hover div.superhover-text {
        background: #66cc99;
    }
    
    div.superhover[data-color="requestgroup_bottom"][data-new="true"] div.superhover-text,
    div.superhover[data-color="requestgroup_bottom"]:hover div.superhover-text {
        background: #4ca5ff;
    } 
    div.superhover[data-color="messagegroup_top"][data-new="true"] div.superhover-text,
    div.superhover[data-color="messagegroup_top"]:hover div.superhover-text {
        background: #66cc99;
    }
    
    div.superhover[data-color="messagegroup_bottom"][data-new="true"] div.superhover-text,
    div.superhover[data-color="messagegroup_bottom"]:hover div.superhover-text {
        background: #4ca5ff;
    } 
   div.superhover[data-color="friend"][data-new="true"] div.superhover-text,
    div.superhover[data-color="friend"]:hover div.superhover-text {
        background: #ff9966;
    }
    
    div.superhover[data-color="friendrequest"][data-new="true"] div.superhover-text,
    div.superhover[data-color="friendrequest"]:hover div.superhover-text {
        background: #66cc99;
    } 
    div.superhover[data-color="message"][data-new="true"] div.superhover-text,
    div.superhover[data-color="message"]:hover div.superhover-text {
        background: #66cc99;
    } 
    div.superhover[data-color="product"][data-new="true"] div.superhover-text,
    div.superhover[data-color="product"]:hover div.superhover-text {
        background: #ff8b00;
    } 
    div.superhover[data-color="productalbum"][data-new="true"] div.superhover-text,
    div.superhover[data-color="productalbum"]:hover div.superhover-text {
        background: #ff6666;
    } 
    div.superhover[data-color="article_male"][data-new="true"] div.superhover-text,
    div.superhover[data-color="article_male"]:hover div.superhover-text {
        background: #ff6666;
    } 
    div.superhover[data-color="article_female"][data-new="true"] div.superhover-text,
    div.superhover[data-color="article_female"]:hover div.superhover-text {
        background: #ff99cc;
    }  
    div.superhover[data-color="foto"][data-new="true"] div.superhover-text,
    div.superhover[data-color="foto"]:hover div.superhover-text {
        background: #1fd0e2;
    } 
    div.superhover[data-color="fotoalbum"][data-new="true"] div.superhover-text,
    div.superhover[data-color="fotoalbum"]:hover div.superhover-text {
        background: #1fa4e2;
    } 
    div.superhover[data-color="trendsetter"][data-new="true"] div.superhover-text,
    div.superhover[data-color="trendsetter"]:hover div.superhover-text {
        background: #edc900;
    }
    div.superhover[data-color="video"][data-new="true"] div.superhover-text,
    div.superhover[data-color="video"]:hover div.superhover-text {
        background: #66cc66;
    }
    div.superhover[data-color="videoalbum"][data-new="true"] div.superhover-text,
    div.superhover[data-color="videoalbum"]:hover div.superhover-text {
        background: #008e02;
    }
     
        /* superhover-text > layout-block */
        div.superhover[data-layout="block"] div.superhover-text h3 {
            margin: 15px 15px 0 15px;
            max-height: 36px;
            overflow: hidden;
            /*white-space: nowrap;*/
            font-size: 0.875em; /* 14px / 16px */
            line-height: 18px;
            font-weight: 600;
            color: #333;
        }
        
        div.superhover[data-color][data-layout="block"][data-new="true"] div.superhover-text h3,
        div.superhover[data-color][data-layout="block"]:hover div.superhover-text h3 {
            color: #fff;
        }
        
            div.superhover[data-layout="block"] div.superhover-text h3 span {
                font-weight: 400;
            }
        
        div.superhover[data-layout="block"] div.superhover-text p {
            margin: 25px 15px 0 15px;
            max-height: 54px;
            overflow: hidden;
            font-size: 0.75em; /* 12px / 16px */
            line-height: 18px;
            font-weight: 400;
            color: #333;
        }
        
            div.superhover[data-layout="block"] div.superhover-text p a {
                float: left;
                font-size: 1.16666667em; /* 14px / 12px */ 
                line-height: 18px;
                font-weight: 600;
                color: #333;
                text-decoration: none;
            }
            
            div.superhover[data-color][data-layout="block"] div.superhover-text p a {
                color: #fff;
            }
            
            div.superhover[data-layout="block"] div.superhover-text p a:hover {
                text-decoration: underline;
            }
        
        
        /* superhover-text > layout-inline */
        div.superhover[data-layout="inline"] div.superhover-text h3 {
            position: absolute;
            top: 15px;
            left: 15px;
            width: 120px;
            max-height: 36px;
            overflow: hidden;
            /*white-space: nowrap;*/
            font-size: 0.875em; /* 14px / 16px */
            line-height: 18px;
            font-weight: 600;
            color: #333;
            
        }
        
        div.superhover[data-color][data-layout="inline"][data-new="true"] div.superhover-text h3,
        div.superhover[data-color][data-layout="inline"]:hover div.superhover-text h3 {
            color: #fff;
        }
        
        div.superhover[data-layout="inline"] div.superhover-text p {
            padding-top: 20px;
            margin: 0 20px 0 160px;
            max-height: 90px;
            overflow: hidden;
            font-size: 0.75em; /* 12px / 16px */
            line-height: 18px;
            font-weight: 400;
            color: #333;
        }
            
            div.superhover[data-layout="inline"] div.superhover-text p a {
                float: left;
                font-size: 1.16666667em; /* 14px / 12px */ 
                line-height: 18px;
                font-weight: 600;
                color: #333;
                text-decoration: none;
            }
            
            div.superhover[data-color][data-layout="inline"] div.superhover-text p a {
                color: #fff;
            }
            
            div.superhover[data-layout="inline"] div.superhover-text p a:hover {
                text-decoration: underline;
            }
            
            
    /* superhover-type */
    div.superhover span.superhover-type {
        position: absolute;
        bottom: 15px;
        left: 15px;
        font-size: 0.875em; /* 14px / 16px */
        line-height: 16px;
        font-weight: 300;
        color: #000;
    }
    
    div.superhover[data-color][data-new="true"] span.superhover-type,
    div.superhover[data-color]:hover span.superhover-type {
        color: #fff;   
    }
    
    
    /* superhover-stats */
    div.superhover span.superhover-stats {
        position: absolute;
        bottom: 15px;
        right: 15px;
        font-size: 0.875em;
        line-height: 16px;
        font-weight: 600;
        color: #000;
        z-index: 1;
    }
    
    div.superhover[data-color="rose"] span.superhover-stats {
        color: #ff99cc;
    }
    
    div.superhover[data-color="blue"] span.superhover-stats {
        color: #4ca5ff;
    }
    
    div.superhover[data-color="green"] span.superhover-stats {
        color: #66cc99;
    }
    
    div.superhover[data-color="sand"] span.superhover-stats {
        color: #ffcc99;
    }
    
    div.superhover[data-color="brown"] span.superhover-stats {
        color: #ff9966;
    }
    
    div.superhover[data-color="aqua"] span.superhover-stats {
        color: #99cccc;
    }
    
    div.superhover[data-color="red"] span.superhover-stats {
        color: #ff6666;
    }
    
    div.superhover[data-color="purple"] span.superhover-stats {
        color: #9966ff;
    }
    
    div.superhover[data-color="orange"] span.superhover-stats {
        color: #ff9966;
    }
    
    
    div.superhover[data-color="friendgroup_top"] span.superhover-stats {
        color: #ff9966;
    }
    div.superhover[data-color="friendgroup_bottom"] span.superhover-stats {
        color: #4ca5ff;
    }
    div.superhover[data-color="articlegroup_top"] span.superhover-stats {
        color: #66cc99;
    }
    div.superhover[data-color="articlegroup_bottom"] span.superhover-stats {
        color: #4ca5ff;
    }
    div.superhover[data-color="requestgroup_top"] span.superhover-stats {
        color: #66cc99;
    }
    div.superhover[data-color="requestgroup_bottom"] span.superhover-stats {
        color: #4ca5ff;
    }
    div.superhover[data-color="messagegroup_top"] span.superhover-stats {
        color: #66cc99;
    }
    div.superhover[data-color="messagegroup_bottom"] span.superhover-stats {
        color: #4ca5ff;
    }
    div.superhover[data-color="friend"] span.superhover-stats {
        color: #ff9966;
    }
    div.superhover[data-color="friendrequest"] span.superhover-stats {
        color: #66cc99;
    }
    div.superhover[data-color="message"] span.superhover-stats {
        color: #66cc99;
    }
    div.superhover[data-color="product"] span.superhover-stats {
        color: #ff8b00;
    }
    div.superhover[data-color="productalbum"] span.superhover-stats {
        color: #ff6666;
    }
    div.superhover[data-color="article_male"] span.superhover-stats {
        color: #ff6666;
    }
    div.superhover[data-color="article_female"] span.superhover-stats {
        color: #ff99cc;
    }
    div.superhover[data-color="foto"] span.superhover-stats {
        color: #1fd0e2;
    }
    div.superhover[data-color="fotoalbum"] span.superhover-stats {
        color: #1fa4e2;
    }    
    div.superhover[data-color="trendsetter"] span.superhover-stats {
        color: #edc900;
    }     
    div.superhover[data-color="video"] span.superhover-stats {
        color: #66cc66;
    }     
    div.superhover[data-color="videoalbum"] span.superhover-stats {
        color: #008e02;
    }