.component_thumbnails {
}
.component_thumbnails ul > li {
	width:120px;
	margin-left:36px;
	float:left;	
	opacity:1;
}
.component_thumbnails ul > li.off {
	opacity:0;
}
.component_thumbnails ul > li.on {
	-webkit-transition:opacity .4s ease-out;
	-moz-transition:opacity .4s ease-out;
	-o-transition:opacity .4s ease-out;
	transition:opacity .4s ease-out;
	opacity:1;
}
.component_thumbnails ul > li:first-child {
	margin-left:0px;
	float:left;
}
.component_thumbnails ul > li > ul {
	margin:0px;
	padding:0px;
	width:120px;
}
.component_thumbnails ul > li > ul > li {
	margin:0px;
	padding:0px;
	width:120px;
	height:100px;
	float:left;
	position:relative;
	cursor:pointer;
}
.component_thumbnails ul > li > ul > li > a {
	text-decoration:none;
}
.component_thumbnails ul > li > ul > li > a > .image > img {
	width:119px;
	height:73px;
	border:1px solid #e8e8e8;
	background: #f7f7f7;
	float:left;
}
.component_thumbnails ul > li > ul > li > .empty {
	width:119px;
	height:73px;
	border:1px solid #e8e8e8;
	background: #f7f7f7;
	float:left;
	cursor:default;
}
.component_thumbnails ul > li > ul > li > a > .date {
	position:absolute;
	top:5px;
	left:5px;
	padding:5px 4px 3px 4px;
	background: #000000;
	font-size:12px;
	font-family:goodbook, arial, sans-serif;
	color:#FFFFFF;
	border-radius: 5px;
	
	-webkit-transition:opacity 0.3s linear;
	-moz-transition:opacity 0.3s linear;
	-o-transition:opacity 0.3s linear;
	transition:opacity 0.3s linear;
	opacity:.6;
}
.component_thumbnails ul > li > ul > li:hover > a > .date {
	-webkit-transition:opacity 0s linear;
	-moz-transition:opacity 0s linear;
	-o-transition:opacity 0s linear;
	transition:opacity 0s linear;
	opacity:.9;
}

/*Hide date when viewing category or search */
.component_thumbnails.search ul > li > ul > li > a > .date,
.component_thumbnails.category ul > li > ul > li > a > .date {
	display:none;
}
.component_thumbnails ul > li > ul > li > a > .grid {
	width:120px;
	height:75px;
	position:absolute;
	top:1px;
	left:1px;
	background: url('../../img/desktop/thumbnail_pattern.png');
	
	-webkit-transition:opacity 0.3s linear;
	-moz-transition:opacity 0.3s linear;
	-o-transition:opacity 0.3s linear;
	transition:opacity 0.3s linear;
	opacity:.99;
}
.component_thumbnails ul > li > ul > li:hover > a > .grid {
	-webkit-transition:opacity 0.1s ease-out;
	-moz-transition:opacity 0.1s ease-out;
	-o-transition:opacity 0.1s ease-out;
	transition:opacity 0.1s ease-out;
	opacity:0;
}
/*RIBBONS*/
.component_thumbnails ul > li > ul > li > a > .ribbon.soty,
.component_thumbnails ul > li > ul > li > a > .ribbon.sotm, 
.component_thumbnails ul > li > ul > li > a > .ribbon.pca,
.component_thumbnails ul > li > ul > li > a > .ribbon.fwa_mobile {
	width:120px;
	height:75px;
	position:absolute;
}
.component_thumbnails ul > li > ul > li > a > .ribbon.soty {
	top:-3px;
	left:78px;
	background: url('../../img/ribbon_soty.png') no-repeat;
}
.component_thumbnails ul > li > ul > li > a > .ribbon.sotm {
	top:-3px;
	left:78px;
	background: url('../../img/ribbon_sotm.png') no-repeat;
}
.component_thumbnails ul > li > ul > li > a > .ribbon.pca {
	top:31px;
	left:-2px;
	background: url('../../img/ribbon_pca.png') no-repeat;
}
.component_thumbnails ul > li > ul > li > a > .title {
   font-size:11px;
	color:#7d7d7d;
	padding-top:5px;
	float:left;
   white-space:nowrap;
   width:119px;
   height:14px;
   overflow:hidden;
   text-overflow:ellipsis;
	-webkit-transition:color 0.3s linear;
	-moz-transition:color 0.3s linear;
	-o-transition:color 0.3s linear;
	transition:color 0.3s linear;
}
.component_thumbnails ul > li > ul > li:hover > a > .title {
	-webkit-transition:opacity 0.1s ease-out;
	-moz-transition:opacity 0.1s ease-out;
	-o-transition:opacity 0.1s ease-out;
	transition:opacity 0.1s ease-out;
   color:#000000;
}

/*ACTIVE STATES */
.component_thumbnails.off ul > li > ul > li.active > a > .date {
   opacity: 1;
}
.component_thumbnails.off ul > li > ul > li.active > a > .grid {
	background: none;
}
.component_thumbnails.off ul > li > ul > li.active > a > .title {
	color:#000000;
}
.component_thumbnails.off ul > li > ul > li.active > a > .arrow{
   background: url('../../img/desktop/thumbnail_active_arrow.png') no-repeat;
   width:3px;
   height:6px;
   position:absolute;
   top:82px;
   left:-8px;
}


/* hide dates for sotm/soty/pca */
.component_thumbnails ul > li > ul > li.sotm > a > .date,
.component_thumbnails ul > li > ul > li.soty > a > .date,
.component_thumbnails ul > li > ul > li.pca > a > .date{
	display:none;
}