/* 
    Document   : youtube.showmore
    Created on : Jan 22, 2013, 8:42:02 AM
    Author     : Dušan Stanković <dusan.stankovic@troxo.com>
    Description:
        YouTube show more/less button.
*/

.ytsm-description {
    position: relative; /* To position the button */
}

.ytsm-description .ytsm-description-text {
    height: 8em;  /* Can be any value depending on how much you want to show */
    overflow: hidden;
}

.ytsm-description.ytsm-expanded .ytsm-description-text {
    height: auto;
}

.ytsm-description .ytsm-showhide {
    background: rgb(248,248,248); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(239,239,239,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,248,248,1)), color-stop(100%,rgba(239,239,239,1))); /* Chrome, Safari4+ */
	background: -webkit-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(239,239,239,1) 100%); /* Chrome10+, Safari5.1+ */
	background: -o-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(239,239,239,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(248,248,248,1) 0%,rgba(239,239,239,1) 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#EFEFEF',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, rgba(248,248,248,1) 0%,rgba(239,239,239,1) 100%); /* W3C */
		
	border: solid #ccc;
	/*border-radius: 0 0 5px 5px;*/
	border-width: 0 0 1px 0;
    
	cursor: pointer; /* If not in your css reset already */
	font-size: 12px;
	height: 22px;
	padding: 0;
	position: absolute;
    bottom: 0;
	vertical-align: middle;
	width: 100%;
	color: #777;
}

.ytsm-description .ytsm-showhide:hover, .ytsm-description .ytsm-showhide:focus {
    outline: 0;  
}

.ytsm-description .ytsm-showhide:hover {	
	
}

.ytsm-description .ytsm-showhide .ytsm-showhide-text {
	background: url(../images/icons/showmore/down-arrow.gif) right no-repeat;
	padding-right: 12px;  
}

.ytsm-description .ytsm-showhide:hover .ytsm-showhide-text {
    /*background-image: url(../images/icons/showmore/down-arrow-hover.gif);*/
}
  
.ytsm-description.ytsm-expanded .ytsm-showhide .ytsm-showhide-text {
    background: url(../images/icons/showmore/up-arrow.gif) right no-repeat;
}

.ytsm-description.ytsm-expanded .ytsm-showhide:hover .ytsm-showhide-text {
	/*background-image: url(../images/icons/showmore/up-arrow-hover.gif);*/
}
  
.ytsm-description-fadeout {
	display: block;
    height: 12px;
	margin: 0;
	position: absolute;
    bottom: 22px;
    width: 100%;
    z-index: 999;
    
	background-image: -moz-linear-gradient(top, rgba(248,248,248,0) 0%, rgba(248,248,248,1) 100%); /* FF3.6+ */
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,248,248,0)), color-stop(100%,rgba(248,248,248,1))); /* Chrome, Safari4+ */
	background-image: -webkit-linear-gradient(top, rgba(248,248,248,0) 0%,rgba(248,248,248,1) 100%); /* Chrome10+, Safari5.1+ */
	background-image: -o-linear-gradient(top, rgba(248,248,248,0) 0%,rgba(248,248,248,1) 100%); /* Opera11.10+ */
	background-image: -ms-linear-gradient(top, rgba(248,248,248,0) 0%,rgba(248,248,248,1) 100%); /* IE10+ */
	background-image: linear-gradient(top, rgba(248,248,248,0) 0%,rgba(248,248,248,1) 100%); /* W3C */
}