/* 
    Document   : most_viewed.css
    Created on : 09-ene-2013, 11:57:56
    Author     : daizgar
    Description:
        Estilos css para el módulo de vídeos más vistos
*/


#mostViewedContainer {
    /*width:394px;*/
    margin: 0 0 20px 0;
    
}

.mostViewedVideo {
    /*width:187px;*/
    height: 180px;
    
    float:left;
    /*margin-right:10px;*/
    margin-bottom:10px;
    overflow: hidden;
    display:none;
}

.mostViewedVideoImageHolder {
    width:250px;
    height:141px;
    /*background-color: #000000;*/
   /* margin-bottom: 5px;*/
    
    /*padding-top:2px;*/
    
}


.standar-miniature{
    width:250px;
    height: 141px;
}

.mostViewedVideoImage {
    width:250px;
    height:141px;
    margin-top:5px;
    margin-bottom: 5px;
   background: url(../img/default-image-holder.png);
    background-repeat: no-repeat;
    background-size: contain;
    
}

.channelImage{
      width:250px;
    height:444px;
    margin-top:5px;
    margin-bottom: 5px;
   
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
}
.channelImage img{
      width:250px;
    height:444px;
    position: absolute;
    top:0px;
    left: 0px;
    
}

.channelbox{
      width: 250px !important;
  height: 444px !important;
  margin-bottom: 50px;
  
}
.channelbox:hover{
     transform: scale(1.2) !important;
}

.channelbox:hover ~ .channelbox {
 transform: translate3d(0px, 0, 0);
 
}

.channelgrid-channelinfo{
position: absolute;
top: 0px;
opacity: 0;
height: 444px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
left: 0px;
width: 100%;
}
.channelgrid-channelinfo:hover{
    opacity: 1;
          -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
      background: rgba(48,48,48,0.9);
}

.channelgrid-channelimg {
   /*position: absolute;
    top: 195px;*/
    width: 250px;
}

.channelgrid-channelinfo .channel-title{
position: absolute;
top: 107px;
width: auto;
padding-left: 10px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
font-size: 11pt;
color: #484848;
background: rgba(255,255,255,0.8);
height: 42px;
font-weight: 300;
letter-spacing: 1px;


}


.channelgrid-channelinfo .channel-desc{
height: 41px;
position: absolute;
top: 217px;
width: 100%;
font-size: 7pt;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 10px;
}

.channelgrid-channelinfo .channel-keywords{
height: 35px;
position: absolute;
top: 155px;
width: 100%;
font-size: 7pt;
color: #ffffff;
}

.channelgrid-channelinfo .channel-keywords .keywords-title {
font-size: 7pt;
color: #ffffff;
padding-left: 10px;
height: 17px;
padding-top: 5px;
font-weight: bold;
letter-spacing: 1pt;
}
.channelgrid-channelinfo .channel-keywords .keywords-entries {
width: auto;
font-size: 7pt;
color: #ffffff;
padding-left: 10px;
height: 30px;
font-style: italic;
}
.channel-read-more{
 width: 100%;
font-size: 0.8em;
height: 3em;
text-align: center;
position: absolute;
bottom: 0px;
color: #ffffff;
background: #FF6C03;
padding-top: 1em;
}
.channelbox .mostViewedVideoImageHolder,.channelbox .mostViewedVideoImage {
    height: 444px;
}


.channel-play{
  width: 100%;
font-size: 20pt;
color: #ffffff;
padding-left: 10px;
height: 30px;
position: absolute;
top: 50px;
background-image: url(../img/socialshare/quickview.png);
background-size: 30px 30px;
background-repeat: no-repeat;
background-position: center center;

}


.scrollchannell, .scrollchannelr {
    /*uncomment for channel vertical layout*/
    top: 220px !important;
}
.h3containter{
max-height: 40px;
min-height: 40px;
overflow: hidden;
background-color: rgba(48,48,48,0.5);
position: absolute;
bottom: 0px;
-webkit-transition: all 0.6s ease-in-out;
-moz-transition: all 0.6s ease-in-out;
-o-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
width: 100%;
}

.h3containter:hover{
max-height: 141px;
    -webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
position: absolute;

width: 100%;
background-color: rgba(48,48,48,0.85);
}
.mostViewedVideoH3 {
 
   font-size: 9pt;
text-align: left;
color: #ffffff;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
text-shadow: none;
line-height: 1.2;
height: 40px;
cursor: pointer;
    
}
.h3description{
padding: 10px;
font-size: 8pt;
background: rgba(2, 2, 2, 0.6);
margin-top: 10px;
border-top: 1px solid #fdd327;
height: auto;
cursor: pointer;
}

.mostViewedVideoH3:hover{
   
}

.mostViewedVideoTitle {
    width:175px;
    height:43px;
   /* margin:5px;*/
    
    
}

.mostViewedVideoDuration {
    display:inline-block;
    position: relative;
     top:-86px;
    left:10px;
    
  
    font-weight: 700;
    height:28px;
    
    -webkit-border-radius: 8px 8px 8px 8px;
        border-radius: 8px 8px 8px 8px;
        
        padding-top:5px;
    
   color:#FFFFFF;     


	/*border: 1px solid #000000;*/
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,0.3);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,0.3);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,0.3);
	/*text-shadow:
		0px -1px 0px rgba(000,000,000,0.4),
		0px 1px 0px rgba(255,255,255,0.3);
                */
  
  width: 35%;
text-align: center;
opacity: 0.4;

transition:width 0.2s ease-in-out;
 -webkit-transition:width 0.2s ease-in-out;
 overflow: hidden;
 background-color: #484848;
}

.mostViewedVideoDuration:hover {
      width: 50%;
opacity: 0.8;
}



.infovideochannelvideo {
    display:inline-block;
    position: absolute;
     top:30px;
    right: 0px;
    margin-right: 12px;
    background-color: #484848;
    font-weight: 700;
    height:28px;
    
    -webkit-border-radius: 8px 8px 8px 8px;
        border-radius: 8px 8px 8px 8px;
        
        padding-top:5px;
    
   color:#FFFFFF;     
   background: -moz-linear-gradient(
		top,
		#000000 0%,
		#000000);
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#000000),
		to(#000000));


	/*border: 1px solid #000000;*/
	-moz-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,0.3);
	-webkit-box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,0.3);
	box-shadow:
		0px 1px 3px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,0.3);
	/*text-shadow:
		0px -1px 0px rgba(000,000,000,0.4),
		0px 1px 0px rgba(255,255,255,0.3);
                */
  
  width: 35%;
text-align: center;
opacity: 0.4;

transition:width 0.2s ease-in-out;
 -webkit-transition:width 0.2s ease-in-out;
 overflow: hidden;
}

.infovideochannelvideo:hover {
      width: 50%;
opacity: 0.8;
}