﻿.DirectoryYouTubeChannel
{
    background:white;
    width:100%;
    margin:0 auto;
    overflow:hidden;
}


.DirectoryYouTubeChannel .YouTubeChannel
{
    width:99%;
    position:relative;
    text-align:left;
    padding:0 0 20px 30px;
}

.DirectoryYouTubeChannel .YouTubeChannel .BannerOuter
{
    width:100%;
    background-color:white;
    min-height:100px;
}

.DirectoryYouTubeChannel .YouTubeChannel .Banner
{
    width:100%;
}

.DirectoryYouTubeChannel .YouTubeChannel .HeaderText
{
    width:100%;
    margin:0;
    padding:10px;
    position:relative;
}
.DirectoryYouTubeChannel .YouTubeChannel  .HeaderText .TitleDiv
{
    position:relative;
    width:100%;
}

.DirectoryYouTubeChannel .YouTubeChannel .HeaderText .TitleDiv .Logo
{
    width:140px;
    position:absolute;
    bottom:0;
    left:0;
    border:1px solid rgba(100, 100, 100, 0.1);
}
.DirectoryYouTubeChannel .YouTubeChannel .HeaderText .Title
{
    font-family: ivypresto-text, serif; font-weight: bold; font-style: normal; /*font-family: FranklinGothicBold, Arial;*/
    display:inline-block;
    width:calc(100% - 260px - 150px);
    font-size:22px;
    line-height:28px;
    margin:0 0 0 150px;
}
.DirectoryYouTubeChannel .YouTubeChannel .HeaderText .Description
{
    display:inline-block;
    width:90%;
    font-size:13px;
    line-height:19px;
    margin:20px 10px 10px 10px;
    font-weight:normal;
    color:rgba(100, 100, 100, 0.9);
    max-height:100%;
    overflow:hidden;
}
.DirectoryYouTubeChannel .YouTubeChannel .HeaderText .Stats
{
    position:absolute;
    top:10px;
    right:11px;
    width:250px;
    text-align:right;
    font-size:14px;
    line-height:160%;
    font-weight:normal;
    color:rgba(100, 100, 100, 0.8);
}
.DirectoryYouTubeChannel .YouTubeChannel .HeaderText .Stats .Count
{
    /*display:inline-block;
    width:80%;
    text-align:left;*/
    display:inline-block;
    vertical-align:top;
    padding:10px 10px 10px 30px;
    text-transform:lowercase;
    background-position:9px 13px;
    background-repeat:no-repeat;
    background-size:16px;
}
    .DirectoryYouTubeChannel .YouTubeChannel .HeaderText .Stats .Count.Vids {
        background-image: url('../../images/ytplaylist-32.png');
    }
.DirectoryYouTubeChannel .YouTubeChannel .HeaderText .Stats .Count.Subs
{
    background-image:url('../../images/ytsubs-32.png');
}
.DirectoryYouTubeChannel .YouTubeChannel .HeaderText .Stats .Count.Views
{
    background-image:url('../../images/yteye-32.png');
}

.DirectoryYouTubeChannel .YouTubeChannel .FirstVideoWrapper
{
    width: 100%;
	padding-bottom: 56.25%; /* 16:9 */
	position: relative;
    margin:0 auto;
}
.DirectoryYouTubeChannel .YouTubeChannel .FirstVideoWrapper .FirstVideoInner
{
	position: absolute;
	top: 0; bottom: 0; left: 0; right: 0;
	text-align: center;
}

.DirectoryYouTubeChannel .YouTubeChannel .VideoList
{
    width:100%;
    position:relative;
    margin:10px 0 0 0;
}
.DirectoryYouTubeChannel .YouTubeChannel .VideoList .VideoThumbnailData
{
    display:none;
}

.DirectoryYouTubeChannel .YouTubeChannel .VideoList .VideoThumbnail
{
    width:calc(33% - 10px);
    margin:0 0 10px 10px;
    height:100%;

    display:inline-block;
    vertical-align:top;

    background-color:#FAFAFA;
    cursor:pointer;

    position:relative;

    align-items:stretch;
}
.DirectoryYouTubeChannel .YouTubeChannel .VideoList .VideoThumbnail:nth-of-type(3n)
{
    margin:0 0 10px 3px;
    /*border:10px solid red;*/
}
.DirectoryYouTubeChannel .YouTubeChannel .VideoList .VideoThumbnail img
{
    width:100%
}
.DirectoryYouTubeChannel .YouTubeChannel .VideoList .VideoThumbnail .Duration
{
    position:absolute;
    right:10px;
    margin-top:-22px;
    background-color:rgba(200, 200, 200, 0.5);
    padding:3px 6px 2px 6px;
    font-size:10px;
}
.DirectoryYouTubeChannel .YouTubeChannel .VideoList .VideoThumbnail .Title
{
    margin:10px 10px 0 10px;
    font-family: ivypresto-text, serif; font-weight: bold; font-style: normal; /*font-family: FranklinGothicBold;*/
    font-size:15px;
    width:calc(100% - 20px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color:#418CB4;
}
.DirectoryYouTubeChannel .YouTubeChannel .VideoList .VideoThumbnail .PublishDate
{
    margin:4px 10px 0.50px 10px;
    font-size:11px;
    width:calc(100% - 20px);
    color:#AAAAAA;
}
.DirectoryYouTubeChannel .YouTubeChannel .VideoList .VideoThumbnail .Description
{
    margin:4px 10px 5px 10px;
    font-size:12px;
    line-height:124%;
    width:calc(100% - 20px);
    color:#666666;
    /*height:62px;*/
    overflow:hidden;
}
.DirectoryYouTubeChannel .YouTubeChannel .VideoList .VideoThumbnail .Stats
{
    margin:4px 10px 5px 10px;
    font-size:11px;
    width:calc(100% - 20px);
    color:#AAAAAA;
    overflow:hidden;
    position:relative;
}

.DirectoryYouTubeChannel .YouTubeChannel .VideoList .VideoThumbnail .Stats .Count
{
    display:inline-block;
    vertical-align:top;
    padding:10px 0px 10px 24px;
    text-transform:lowercase;
    background-position:4px 10px;
    background-repeat:no-repeat;
    background-size:14px;
}
.DirectoryYouTubeChannel .YouTubeChannel .VideoList .VideoThumbnail .Stats .Count.Views
{
    width:35px;
    background-image:url('../../images/yteye-32.png');
}
.DirectoryYouTubeChannel .YouTubeChannel .VideoList .VideoThumbnail .Stats .Count.Likes
{
    width:35px;
    background-image:url('../../images/ytlikes-32.png');
}
.DirectoryYouTubeChannel .YouTubeChannel .VideoList .VideoThumbnail .Stats .Count.Cmts
{
    width:35px;
    background-image:url('../../images/ytcmts-32.png');

}
.DirectoryYouTubeChannel .YouTubeChannel .VideoList .PageVideosLeft, .DirectoryYouTubeChannel .YouTubeChannel .VideoList .PageVideosRight
{
    width:60px;
    height:60px;
    background-size:60px;
    position:absolute;
    top:calc((100% - 60px)/2);
    z-index:200;
    cursor:pointer;

    display:none;
}

.DirectoryYouTubeChannel .YouTubeChannel .VideoList .PageVideosLeft
{
    background-image:url('../../images/ytnavleft-64.png');
    left:-20px;
}
.DirectoryYouTubeChannel .YouTubeChannel .VideoList .PageVideosRight
{
    background-image:url('../../images/ytnavright-64.png');
    right:-20px;
}
/*.DirectoryYouTubeChannel .YouTubeChannel .VideoList .PageVideosLeft:hover
{
    background-image:url('../../images/ytnavleft-on-64.png');
}
.DirectoryYouTubeChannel .YouTubeChannel .VideoList .PageVideosRight:hover
{
    background-image:url('../../images/ytnavright-on-64.png');
}*/



@media only screen and (min-width: 0px) and (max-width: 560px) {
    .DirectoryYouTubeChannel .YouTubeChannel .HeaderText .TitleDiv .Logo {
        width: 100px;
    }

    .DirectoryYouTubeChannel .YouTubeChannel .HeaderText .Title {
        width: calc(100% - 110px);
        margin: 0 0 0 110px;
    }

    .DirectoryYouTubeChannel .YouTubeChannel .HeaderText .Stats {
        position: relative;
        width: 100%;
        text-align: left;
        margin: -10px 0 0 6px;
    }

    .DirectoryYouTubeChannel .YouTubeChannel .VideoList .VideoThumbnail {
        width: calc(33% - 1.10px);
    }

    .DirectoryYouTubeChannel .YouTubeChannel .VideoList .VideoThumbnail .Title
    {
        font-size:16px;
    }
    .DirectoryYouTubeChannel .YouTubeChannel .VideoList .VideoThumbnail .PublishDate
    {
        font-size:11px;
    }
    .DirectoryYouTubeChannel .YouTubeChannel .VideoList .VideoThumbnail .Description
    {
        font-size:14px;
    }
    .DirectoryYouTubeChannel .YouTubeChannel .VideoList .VideoThumbnail .Stats
    {
        font-size:10px;
    }

    .DirectoryYouTubeChannel .YouTubeChannel .VideoList .VideoThumbnail .Stats .Count
    {
        padding:10px 3px 10px 14px;
        background-position:0 8px;
        background-repeat:no-repeat;
        background-size:13px;
    }


}
@media only screen and (min-width: 560px) and (max-width: 890px)
{

}
@media only screen and (min-width: 890px) {

}

@media print
{

}
