/** CSS for mediaalbums and mediaitems */
/** Sample selectors:
.mediaalbum.show-item { }
.mediaalbum.show-item .title { }
.mediaalbum.list-items { }
.mediaitem.show-item { }
.mediaitem.show-item .title { }
.mediaitem.list-items { }
*/
.mediaalbum.list-items li {
	float: left;
	margin-bottom:20px;
}
.mediaalbum.list-items .header {
	text-align:center;
	background-color: #666666;
	color: #FFF;
	padding: 6px 0px;
}
.mediaalbum.list-items .header h3 a {
	color: #FFF;
	font-weight: normal;
	text-decoration: none;
}
.mediaalbum.list-items .header .date {
	font-size: 10px;
}
.mediaitem.list-items li, .mediaalbum.list-items li  {
	float:left;
	margin: 6px 12px 6px 0px;
	width: 180px;
	height: 180px;
}
.mediaitem.list-items li .youtube-thumbnail, .mediaalbum.list-items li .youtube-thumbnail {
	width: 180px;
	padding-top: 21px;
	padding-bottom: 24px;
	background-color: black;
}
.mediaalbum.list-items li  {	
	height: auto;
}
.mediaitem.list-items li img {
	display:block;
}
.fade {
   opacity: 1;
   transition: outline .25s ease-out;
   -moz-transition: outline .25s ease-out;
   -webkit-transition: outline .25s ease-out;
}
.fade:hover {
  opacity: 0.9;
  outline: 3px solid #666666;
}
.mediaitem.list-items li .buttons-container {
	position:relative;
	top: 0px;
	left: 0px;
}
.mediaitem.list-items li .view, .mediaitem.list-items li .share {
	position:absolute;
	top: -40px;
	background-color: #666666;
	height: 18px; 
	width: 70px;
	padding: 5px 0px;
	text-align: center;
}
.mediaitem.list-items li .view a, .mediaitem.list-items li .share a {
	color: #FFF;
	text-decoration:none;
}
.mediaitem.list-items li .view a:hover, .mediaitem.list-items li .share a:hover {
	text-decoration:underline;
}
.mediaitem.list-items li .view {
	left: 6px;
}
.mediaitem.list-items li .share {
	right: 6px;
}