/* 
Video panel layouts
Mohammed Seedat 30/07/2009
*/

.video-mosaic  {
  overflow:hidden; 
  position:relative;
  background:#efefef;
  width:640px;
  }

.carousel {
  position:relative;
  overflow:hidden;
  float:left;
}

.video-mosaic img, .carousel img {
  border:none;
  }
  
.video-mosaic h2, 
.carousel h4,
#content .video-mosaic h2,
#content .carousel h4
{ 
  background:transparent url(../img/trans-grey.png) repeat left top;
  bottom:0;
  color:white;
  font-size:90%;
  min-height:20px;
  padding:7px 3px 2px;
  position:absolute;
  width:100%;
  margin-bottom:0;  
  }
.video-mosaic h2 a, .carousel h4 a{
  color:white; 
  background:transparent url(../img/white-arrow.png) no-repeat right bottom; 
  display:block;
  padding-right:20px;
  }  
.video-mosaic h2 a:hover, .carousel h4 a:hover{ 
  border-bottom:none;
  }  
.video-mosaic h2 strong, .carousel h4 strong{
  display:block;
  font-weight:bold;
  margin-bottom:4px;
  }
  
.video-mosaic h2 em {display:none;}  /*hide standfirst by default*/

.video-mosaic h2 em, .carousel h4 em,
#content .video-mosaic h2 em,
#content .carousel h4 em{
  display:block;
  font-style:normal;
  font-weight:normal;  
  }
  

  
/** Requires "refactoring!" **/

.video-mosaic  .box-2x2 {
  width:320px; 
  float:left;
  }
.video-mosaic  .box-1x2 {
  width:160px; 
  float:left;
  }

.video-mosaic .small {
  float:left; 
  width:158px; 
  height:108px;  
  position:relative;
  margin-right:2px;
  margin-bottom:2px;
  overflow:hidden;
  background:#f4f4f4 url('/img/videos/default-thumb-small.gif') no-repeat top left;
  }
.video-mosaic .large {
  float:left; 
  width:318px; 
  height:218px; 
  position:relative; 
  margin-right:2px; 
  margin-bottom:2px;
  overflow:hidden;
  background:#f4f4f4 url('/img/videos/default-thumb-large.gif') no-repeat top left;
  }
  

#featured-videos {
  border-bottom:1px solid #CCCCCC;
  float:left;
  margin-bottom:15px;
  padding-bottom:15px; 
}