/*BlogMaster Begin*/
/*BlogMaster Begin*/
.BlogMaster { margin: 0; padding: 0; width: 100%; background-color: #f9f9f9; }
.BlogMasterTop { width: 100%; }
.BlogMasterMiddle { margin: 20px auto; padding: 20px; width: 940px; background-color: #fff; display: table; }
.BlogMasterBottom { clear: both; width: 100%; background-color: #707070; border-top: solid 1px #666; padding: 30px 0 10px; color: #fff; }
.BlogMainDivRight { width: 220px; margin-left: 20px; float: left; }
.BlogMainDivCenter { width: 700px; float: left; font-family: Calibri; }

.BlogFrontMaster .SidebarTop { margin-top: 0; }
/*BlogMaster End*/
/*CommonSidebar Begin*/

.BlogSidebarTop { min-height: 45px; background: url('Images/Blog/blog-right-separator1.png') no-repeat left bottom; width: 100%; border-bottom: 1px solid #848587; padding: 30px 0 30px 0; }
.BlogSidebarTopTitle { color: #181818; font-size: 24px; font-family: supermarket; font-weight: bold; line-height: 30px; padding: 5px 0; }
.BlogSidebarRight { padding: 15px; border-top: 0; }
.BlogSidebarTopImgLeft, .BlogSidebarTopImgRight, .BlogSidebarBottom { display: none; }

/*CommonSidebar End*/
/*CommonSideBanner Begin*/
.SideBannerTop { display: none; }
.SideBannerBottom { display: none; }
/*CommonSideBanner End*/
/*ArchiveList Begin*/
.ArchiveListGridView { width: 100%; clear: both; margin: 20px auto; text-align: left; }
.CommonGridView.ArchiveListGridView,
.CommonGridView.ArchiveListGridView tr,
.CommonGridView.ArchiveListGridView td { border: 0; background: none; }
.ArchiveListDateHeaderColumnDateStyle { display: none; }
.ArchiveListTopicItemColumnTopicStyle { }

    .ArchiveListTopicItemColumnTopicStyle a { text-decoration: none; background: url(Images/Bullet/bullet3.gif) no-repeat left center; padding-left: 30px; line-height: 35px; }
.ArchiveListEmptyRowStyle { border: solid 1px #f0f0f0; }
.ArchiveListDateItemsColumnDateStyle { color: #ff5e5e; }
/*ArchiveList End*/

/*BlogNavList Begin*/
.BlogNavList { width: 100%; margin-bottom: 1px; clear: left; }
/*BlogNavList End*/
/*BlogNavNormalList Begin*/
.BlogNavNormalList { width: 100%; }
.BlogNavNormalListLink a { padding: 5px 0px 5px 8%; width: 100%; vertical-align: middle; display: block; color: #454545; text-decoration: none; white-space: normal; text-align: left; font-size: 18px; font-family: supermarket; }

    .BlogNavNormalListLink a:hover { color: #fd8e01; }
.BlogNavNormalListMoreLink { text-align: right; padding: 4px 5px 0; }

    .BlogNavNormalListMoreLink a { color: #454545; text-decoration: underline; padding-right: 19px; background: url(images/bullet/more.gif) no-repeat right center; font-size: 14px; }

        .BlogNavNormalListMoreLink a:hover { color: #fd8e01; }
/*BlogNavNormalList End*/
/*BlogDetails Begin*/
.BlogDetails { width: 100%; margin: 0 auto 10px; }
.BlogDetailsTop { width: 100%; min-height: 55px; line-height: 30px; vertical-align: middle; text-align: left; border-bottom: solid 2px #6b6b6b; }
.BlogDetailsTopTitle { color: #181818; font-size: 30px; font-family: supermarket; line-height: 30px; font-weight: bold; }
.BlogDetailsTopImgLeft, .BlogDetailsTop .BlogDetailsImgLeft { display: none; }

.BlogDetailsTopImgRight, .BlogDetailsTop .BlogDetailsImgRight { display: none; }
.BlogDetailsLeft { }
.BlogDetailsRight { padding: 0px 0 0; }
.BlogDetailsBottom { display: none; }
.BlogDetailsRight .NoteText { color: #ee9e22; font-weight: bold; }

.BlogFormView { width: 770px; }

.FacebookCommentBox { margin-top: 10px; }
/*BlogDetails End*/

/*BlogDetailsDefault Begin*/
.BlogDetailsDefaultPublisherDiv { color: #212120; }

.BlogDetailsDefaultBlogContentLabel { }

.BlogDetailsDefaultBlogContentDiv { clear: both; float: left; font-size: 18px; font-family: supermarket; line-height: 30px; margin: 20px 0; width: 94%; }
.BlogDetailsDefaultDiv { clear: left; float: left; width: 100%; margin-bottom: 10px; padding-left: 10px; }
.CategoryLabel { background: url(images/icon/icon-category.gif) no-repeat; background-position: left center; padding-left: 25px; color: #f36904; width: 15%; display: block; float: left; font-size: 18px; font-family: supermarket; }
.TagsLabel { background: url(images/icon/icon-Tags.gif) no-repeat; background-position: left center; padding-left: 25px; color: #f36904; width: 15%; display: block; float: left; font-size: 18px; font-family: supermarket; }
.BlogDetailsDefaultTagsImage { padding-left: 10px; }

.BlogListItemDetailsColumn .BlogDetailsDefaultTagsPanel { width: 100%; margin-top: 10px; }
.BlogListItemDetailsColumn .BlogDetailsDefaultCatPanel { width: 100%; margin-top: 10px; }

.BlogDetailsDefaultTagsPanel { margin-top: 0px; font-size: 12px; background: url(images/icon/icon-tag.gif) no-repeat; background-position: left 50%; text-align: left; width: auto; float: left; }
.BlogDetailsDefaultCatPanel { padding-top: 0px; font-size: 12px; background: url(images/icon/icon-category.gif) no-repeat; background-position: left 75%; width: auto; clear: left; float: left; }
.BlogDetailsDefaultTagsDiv,
.BlogDetailsDefaultCatDiv { width: 100%; float: left; }
.BlogDetailsDefaultTagsLink { color: #f36904; font-size: 18px; }
.BlogDetailsDefaultTagsLinkStart { color: #f36904; font-size: 18px; padding-left: 30px; }

.BlogDetailsDefaultPublisherDiv { clear: left; float: left; width: 65%; line-height: 25px; margin: 20px 0; font-size: 18px; font-family: supermarket; }
.BlogDetailsSocialButton { float: right; width: 35%; margin: 20px 0; height: 25px; padding-top: 5px; }
.BlogDetailsFacebookDiv { width: 50%; float: left; }
.BlogDetailsGooglePlusDiv { width: 50%; float: left; }
/*BlogDetailsDefault End*/

/*BlogList Begin*/
.BlogListItemImageLink { right: 49%; position: relative; }
.BlogImage { overflow: hidden; width: 100%; position: relative; float: left; }
.BlogListTop { width: 100%; min-height: 40px; line-height: 30px; vertical-align: middle; text-align: left; }
.BlogListTopTitle { color: #454545; font-size: 18px; line-height: 30px; font-weight: bold; }
.BlogListTopImgLeft, .BlogListTop .BlogListImgLeft { display: none; }

.BlogListTopImgRight, .BlogListTop .BlogListImgRight { display: none; }
.BlogListRight { padding: 5px 0; }
.BlogListBottom { display: none; }
.BlogNoData { margin-top: 20px; border: solid 1px #f0f0f0; background-color: #fbfcfe; text-align: center; clear: left; width: 100%; line-height: 30px; height: 30px; padding: 5px 0; display: table; }
/*BlogList End*/

/*BlogListItem Begin*/
.BlogListItem { padding-bottom: 0px; }

.BlogListItemTable { width: 100%; }

.BlogListItemDetailsColumn { padding: 30px 0px; width: 50%; vertical-align: top; max-width: 400px; }

    .BlogListItemDetailsColumn.Info { width: 100%; max-width: none; float: none; }
    .BlogListItemDetailsColumn .BlogDetailsDefaultDiv { padding-left: 30px; }
.BlogListItemDetailsDiv { padding-left: 30px; }

.BlogListItemBlogTitleDiv { margin: 20px 0 10px; }

.BlogListItemNameLink { font-size: 24px; font-family: supermarket; line-height: 30px; }

.BlogListItemPublisher { color: #212120; font-size: 18px; line-height: 35px; margin-bottom: 10px; position: relative; }
.BlogListItemShortContentDiv { clear: both; line-height: 30px !important; margin: 15px 0 25px; width: 100%; font-size: 18px; font-family: supermarket; }

.BlogListItemMessageDiv { height: 2px; width: 100%; border-bottom: 1px solid #cccccc; }
.BlogListItemReadmore { color: black; position: relative; font-size: 15px; font-family: supermarket; top: 9px; background: url(images/bullet/more.gif) no-repeat; background-position: 90% center; background-color: #f2f6f7; padding-right: 25px; text-decoration: underline; display: none; }
.BlogPublisher { color: #212120; }
.BlogListItemSocialButton { width: 35%; line-height: 35px; margin-bottom: 10px; min-height: 35px; padding-top: 10px; }
.BlogListItemFacebookDiv { width: 50%; float: left; }
.BlogListItemGooglePlusDiv { width: 50%; float: right; padding-left: 65px; }
/*BlogListItem End*/

/*BlogListRowStyle Begin*/
.BlogListDefault { }
.BlogListDefaultPageControlPanel { clear: both; line-height: 30px; margin: 10px 0; padding: 10px 0; width: 100%; border-top: 2px solid #6b6b6b; }
.BlogListDefaultItemPerPage { float: left; width: 55%; font-size: 18px; font-family: supermarket; }
    .BlogListDefaultItemPerPage select { float: left; margin-right: 10px; margin-top: 6px; width: 60px; background-color: #f4f4f4; }
    .BlogListDefaultItemPerPage .OptionControlTitle { float: left; margin-right: 10px; }
.BlogListDefaultPagingControl { text-align: right; float: right; }
    .BlogListDefaultPagingControl .PagingPrev { padding-right: 5px; color: #000; }
    .BlogListDefaultPagingControl .PagingNext { padding-left: 5px; color: #000; }
.BlogListDefaultDataList { width: 98%; clear: left; float: left; }

.BlogListDefaultDataListHeader { display: none; }

.BlogListDefaultDataListItemStyle { vertical-align: top; }
/*BlogListRowStyle End*/

/*SearchBox Begin*/

.BlogFrontMaster .SearchSection { /*margin: 40px 15px 0 0;
    float: left;
    width: 100%;
    position: absolute;
    right: 20%;*/ }

.BlogFrontMaster .HeaderShoppingCart { clear: right; float: right; line-height: 30px; position: relative; z-index: 1; }

.SearchBox { width: 100%; margin-bottom: 1px; clear: left; }
    .SearchBox .SidebarRight { font-size: 18px; padding: 0 0 0 10px; width: 100%; background-color: #fff; border: 2px solid #c0c0c0; }

    .SearchBox .SidebarTop { display: none; }

.BlogSidebarTop .SidebarTopTitle { font-weight: bold; }

.SidebarTopImgLeft, .SidebarTopImgRight, .SidebarBottom { display: none; }
input[type="text"].SearchBoxTextBox { z-index: 1; width: 80% !important; border: 0; border-right: none; color: #000; font-size: 18px; height: 43px; float: left; }
.SearchBox .BtnStyle1 { width: 20%; padding: 0px; margin: 0px; background: #c10302; color: #fff; }

.SearchBox .BtnImage { color: transparent; background: url('Images/Icon/icon-search.png') no-repeat right center; height: 43px; line-height: 43px; padding-left: 5px; }
/*SearchBox End*/
/*Blog Comment*/
.BlogComment .CommonPageTop { display: none; }
.BlogCommentDiv { width: 100%; }
    .BlogCommentDiv table { width: 100%; }
.BlogCommentTitle { float: left; font-size: 18px; }
    .BlogCommentTitle .CommonPageTopTitle { font-size: 13px; }
.BlogCommentDotted { clear: left; border-bottom: dotted 1px #ddd; padding-top: 10px; }
.BlogCommentTextArea { width: 100%; height: 114px; font-size: 13px; border: 1px solid #9c9c9c; }

.BlogCommentUserName { float: left; font-weight: normal; }
.BlogCommentCreateDate { font-style: italic; float: right; }
.BlogCommentPost { margin-top: 15px; clear: both; float: left; width: 100%; }
.BlogCommentPostDiv { width: 100%; margin: 15px 0; }
.BlogCommentPagingDiv { line-height: 30px; padding: 10px 0; text-align: right; }
.BlogCommentPostLabel { padding-bottom: 10px; font-weight: bold; }
.BlogCommentListStyle { background-color: #fbfcfe; padding: 8px 2%; border-top: solid 1px #f0f0f0; width: 100%; border-bottom: solid 1px #f0f0f0; font-size: 12px; }
.BlogCommentListAlterStyle { padding: 8px 2%; border-top: solid 1px #f0f0f0; width: 100%; }
.BlogCommentPostButton { float: right; margin-top: 10px; }
.BlogCommentTextValidator { font-size: 9px; margin-top: 10px; }
.BlogCommentValidateDiv { width: 136px; border-bottom: dotted; border-width: 1px; margin-bottom: 2px; }
.fb_iframe_widget iframe { width: 100% !important; }

.BlogComment .CommonPageRight { padding: 0; }

.BlogCommentPagingBox { border-top: 2px solid #6b6b6b; }
    .BlogCommentPagingBox .PagingPrev { padding-right: 12px; color: #000; }
    .BlogCommentPagingBox .PagingNext { padding-left: 12px; color: #000; }
/*ArchiveBox*/
.ArchiveBox .SidebarTopTitle { background: url(images/icon/down.gif) no-repeat right center; }
.ArchiveBox .SidebarTopTitleHide { background: url(images/icon/up.gif) no-repeat right center; }
.ArchiveBox .BlogNavNormalListLink a { background: url(images/bullet/Bullet6.gif) no-repeat 0 9px; color: #181818; font-size: 18px; }
    .ArchiveBox .BlogNavNormalListLink a:hover { color: #0f91e9; }
/* RecentPost Box Begin */
/* RecentPost Box Begin */
.RecentPost .BlogSidebarRight { padding: 0; }
.RecentPost .ImageRecentPost { overflow: hidden; float: left; margin: 0px 0; }
    .RecentPost .ImageRecentPost img { position: relative; max-width: 100%; width: 100%; }
.TitleRecentPost { width: 100%; clear: left; float: left; }

.DateRecentPost { width: 100%; clear: left; float: left; font-size: 18px; color: #212120; line-height: 20px; padding: 10px 0 20px; }
    .DateRecentPost .BlogListItemPublisher { margin-bottom: 0; }
.RecentPost .BlogNavNormalListLink { padding: 0; border-bottom: 1px solid #868686; }
    .RecentPost .BlogNavNormalListLink a { padding: 0; color: #212120; font-size: 24px; font-family: supermarket; line-height: 24px; padding-top: 30px; }
        .RecentPost .BlogNavNormalListLink a:hover { color: #0f8ee8; }
/* RecentPost Box End */

/* Blog Category Box Begin */
.BlogCategoryBox .BlogSidebarTop { background: url(images/Blog/blog-right-separator2.png) no-repeat left bottom; border-bottom: 1px solid #848587; }
.BlogCategoryBox .SidebarTopTitle { background: url(images/icon/up.gif) no-repeat right center; }
.BlogCategoryBox .SidebarTopHide { background: url(images/icon/down.gif) no-repeat right center; margin-top: 20px; }
.BlogCategoryBox .BlogNavNormalListLink a { background: url(images/bullet/bullet3.gif) no-repeat 0 11px; padding-top: 8px; padding-bottom: 8px; }

/* Blog Category Box End */
/*------------------ Custom Responsive Layout ------------------*/
@media only screen and (min-width: 1200px) /*Screen width larger than 980 px ----------  For step 4 --------- */
{
    .BlogList .BlogImage img { max-width: 200%; }
    .BlogDetails .BlogImage img { width: 837px; }
}

@media only screen and (max-width: 1199px) {
    .BlogList .BlogImage img { max-width: 200%; }
    .BlogListItemDetailsColumn { max-width: 320px; }
}

@media only screen and (max-width: 979px) /*Screen width 768-980 px ---------- For step 3---------*/
{
    .CategoryLabel { width: 22%; }
    .TagsLabel { width: 22%; }
    .BlogCommentPostDiv { width: 100%; }
    .BlogDetails .BlogImage img { max-width: 100%; }
    .BlogDetailsDefaultBlogContentDiv { width: 100%; }
    .BlogDetailsDefaultTagsDiv, .BlogDetailsDefaultCatDiv { width: 100%; margin-top: 10px; }

    .BlogList .BlogImage img { max-width: 100%; }
    .BlogListItemDetailsColumn { display: block; width: 100%; clear: both; max-width: 450px; }
    .BlogListItemDetailsDiv { padding-left: 0; }
    .BlogListItemImageLink { right: 0; }
    .BlogListItemPublisher { width: 100%; margin-bottom: 10px; font-size: 16px; }
    .BlogListItemSocialButton { clear: left; float: left; width: 100%; }
    .BlogListItemFacebookDiv { float: left; width: auto; margin-right: 10px; }
    .BlogListItemGooglePlusDiv { float: left; width: auto; }
    .BlogListItemBlogTitleDiv, .BlogListItemPublisherDiv, .BlogListItemShortContentDiv, .BlogDetailsDefaultDiv { padding: 0; }
    .BlogListItemReadmore { }

    .BlogListItemDetailsColumn.Info { padding-top: 10px; }
}

@media only screen and (max-width: 767px) /*Screen width 480-767 px -------------- For step 2 ------------ */
{
    /* Blog list */

    .BlogListDefaultPagingControl { clear: left; float: none; display: table; margin: 0 auto 5px; }
    .BlogListDefaultItemPerPage { clear: left; float: none; display: none; margin: 0 auto 5px; }

    .BlogImage { width: 100%; right: 0%; }

    .BlogDetailsTopTitle { font-size: 24px; }
}

@media only screen and (max-width: 479px) /*Screen width lower than 480 px -------------- For step 1 ------------ */
{
    .CategoryLabel { width: 35%; }
    .TagsLabel { width: 35%; }
    .BlogImage { width: 100%; right: 0%; }
        .BlogImage img { max-width: 100%; }
    .BlogList .BlogImage img { float: none; }

    .BlogListItemBlogTitleDiv, .BlogListItemPublisherDiv, .BlogListItemShortContentDiv, .BlogDetailsDefaultDiv { width: 100%; font-size: 20px; margin-top: 0; }

    .BlogListItemDetailsColumn { display: block; width: 100%; clear: both; max-width: 300px; }
    /* Blog Detail */
    .BlogDetailsTop { line-height: 25px; }
    .BlogCommentTitle .CommonPageTopTitle { width: 100%; display: table; margin: 8px 0; }
    .BlogCommentPagingBox { text-align: center; float: none; }
    .BlogCommentTitle { float: none; font-weight: bold; text-align: center; }
    .BlogCommentPagingDiv { text-align: center; }
    .BlogDetailsDefaultPublisherDiv { width: 100%; padding: 0 0 15px; }
    .BlogDetailsSocialButton { width: 100%; clear: both; float: none; padding: 0; }
    .BlogDetailsFacebookDiv, .BlogDetailsGooglePlusDiv { width: auto; margin-right: 10px; }
    .BlogDetailsDefaultBlogContentDiv { padding: 0; }
    .BlogDetailsDefaultTagsDiv, .BlogDetailsDefaultCatDiv { width: 100%; margin-top: 10px; }
    .BlogDetailsDefaultDiv { width: 100%; }
}

@media only screen and (orientation: portrait) {
}