<body>
    <style>
        .container {
            padding: 20px 10px 10px 10px;
            margin-right: auto;
            margin-left: auto;
        }

        .col-xs-2, .col-xs-10 {
            position: relative;
            min-height: 1px;
            padding-left: 15px;
            padding-right: 15px;
        }

        .text-center {
            text-align: center;
        }

        .left {
            padding-top: 25px;
        }

        .avatar {
            width: 50px;
            height: 50px;
            margin: 0 auto;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            display: block;
        }

        .signature {
            font-style: italic;
            padding-left: 5px;
            vertical-align: middle;
            color: #808080;
            font-size: 13px;
            line-height: 1.4;
            font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
        }

        .info {
            text-align: center;
            margin-top: 15px;
            padding-bottom: 5px;
            color: #808080;
            font-size: 13px;
            line-height: 1.4;
            font-family: "Segoe UI","Segoe",Tahoma,Helvetica,Arial,sans-serif;
        }

        .clock {
            color: rgb(0, 114, 198);
            width: 17px;
            height: 16px;
            font-size: 13px;
        }

        .social {
            border-top: 1px solid rgb(211, 211, 211);
            padding: 5px;
        }

        .comment {
            color: rgb(0, 114, 198);
            font-size: 16px;
            height: 16px;
            margin-left: 3.2px;
            margin-right: 3.2px;
            cursor: pointer;
        }

        .channel {
            color: rgb(68, 68, 68);
            font-family: 'Segoe UI', Segoe, Tahoma, Helvetica, Arial, sans-serif;
            font-size: 15px;
            padding: 5px 0 15px 0;
        }

        .content {
            color: rgb(68, 68, 68);
            font-family: 'Segoe UI', Segoe, Tahoma, Helvetica, Arial, sans-serif;
            font-size: 15px;
            line-height: 25px;
        }

        .content img {
            width: 100% !important;
            height: auto !important;
        }

        .comments-panel {
            background-color: #f2f3f6;
        }

        .comment-overview {
        }

        .comments-header {
            border-top: 1px solid rgb(217, 218, 221);
            border-bottom: 1px solid rgb(217, 218, 221);
            color: rgb(68, 68, 68);
            font-family: 'Segoe UI', Segoe, Tahoma, Helvetica, Arial, sans-serif;
            font-size: 19.5px;
            font-weight: bold;
            line-height: 21.45px;
            padding-bottom: 30px;
            padding-top: 30px;
            margin-top: 10px;
            margin-bottom: 0;
        }

        .inline {
            display: inline-block;
        }

        .comments-left {
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .comment-avatar {
            display: inline-block;
            vertical-align: top;
        }

        .comment-signature {
            vertical-align: top;
            padding: 0;
        }

        .small {
            color: rgb(68, 68, 68);
            font-family: 'Segoe UI', Segoe, Tahoma, Helvetica, Arial, sans-serif;
            font-size: 11.05px;
            line-height: 20px;
        }

        .comment-body {
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .unread {
             background-color: #ffe4a2;
        }

        .img-thumbnail {
            width: 100%;
            padding: 4px;
            line-height: 1.42857;
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 4px;
            display: inline-block;
            height: auto;
        }

    </style>

    <div class="container">
        <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td width="20%" style="vertical-align: sub;">
                        <div class="col-xs-2 left">
                            <div class="text-center">
                                <img class="avatar" src="{{AuthorImage}}">
                                <div class="signature">{{AuthorName}}</div>
                                <!--<div class="signature">{{AuthorNameOnly}}</div>-->
                                <div class="info">
                                    <span>{{ItemPosted}}</span>
                                </div>
                                <!--<div class="social">
                                    <span class="inline">
                                        <span class="comment glyphicon glyphicon-bullhorn">
                                            <img src="{{AppUrl}}Base/Content/images/comment.png" />
                                        </span>
                                        <span>{{CommentsCount}}</span>
                                    </span>
                                    <span class="inline">
                                        <span class="comment glyphicon glyphicon-thumbs-up">
                                            <img src="{{AppUrl}}Base/Content/images/like.png" />
                                        </span>
                                        <span>{{ItemLikesCount}}</span>
                                    </span>
                                </div>-->
                            </div>
                        </div>
                    </td>
                    <td>
                        <div class="col-xs-10">
                            <h1>{{ItemHeading}}</h1>
                            <span class="channel">{{ChannelName}}</span>
                            <hr />
                            {?Thumbnail<img class='img-thumbnail' src='{{Thumbnail}}' />Thumbnail?}
                            {?VideoUrl<a href='{{VideoUrl}}' style='display:block;'>
                                {{VideoUrl}}
                                {?VideoThumbnail<img class='img-thumbnail' src='{{VideoThumbnail}}' />VideoThumbnail?}
                            </a>VideoUrl?}
                            {?RssUrl<a href='{{RssUrl}}' style='display:block;'>{{RssUrl}}</a>RssUrl?}
                            <span class="content">{{ItemBody}}</span>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <!--<table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tbody>
                <tr>
                    <td>
                        <div class="row comments-panel">
                            <h5 class="comments-header text-center">
                                <span class="comment glyphicon glyphicon-bullhorn">
                                    <img src="{{AppUrl}}Base/Content/images/comment.png" />
                                </span>
                                <span>COMMENTS</span>
                            </h5>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
        <table width="100%" border="0" cellpadding="0" cellspacing="0" class="comments-panel">
            <tbody>
                {{CommentOverview}}
            </tbody>
        </table>-->
    </div>
</body>
