﻿ 
/*BlogMaster Begin*/
.BlogMaster { margin: 0; padding: 0; width: 100%; background-color: #f9f9f9; }

.BlogMasterTop { width: 100%; }
 
.BlogFrontMaster .SidebarTop { margin-top: 0; }

.BlogFrontMaster .SearchBox .BtnStyle1 { margin-right: 0; }

/*BlogMaster End*/
/*CommonSidebar Begin*/

.BlogSidebarTop { min-height: 40px; border-bottom: solid 2px #e7e7e7; }

.BlogSidebarTopTitle { color: #454545; font-family: PSLxDisplayBold; font-size: 28px; line-height: 30px; padding: 5px 0; }

.BlogSidebarRight { padding: 10px 0; 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 { background: url(Images/Icon/icon-page.gif) no-repeat left center!important; padding-left: 30px!important; }
    .ArchiveListTopicItemColumnTopicStyle a { text-decoration: none; line-height: 35px; font-size: 14px; }
.ArchiveListEmptyRowStyle { border: solid 1px #f0f0f0; }

.ArchiveListDateItemsColumnDateStyle { color: #004297; }
/*ArchiveList End*/

/*BlogNavList Begin*/
.BlogNavList { width: 100%; margin-bottom: 15px; clear: left; }
/*BlogNavList End*/
/*BlogNavNormalList Begin*/
.BlogNavNormalList { width: 100%; }

.BlogNavNormalListLink a { padding: 5px 0px 5px 20px; width: 100%; vertical-align: middle; display: block; color: #454545; text-decoration: none; white-space: normal; text-align: left; font-size: 14px; }

.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: 12px; }

/*BlogNavNormalList End*/
/*BlogDetails Begin*/
.BlogDetails { width: 100%; margin: 0 auto 10px; }

.BlogDetailsTop { width: 100%; min-height: 40px; vertical-align: middle; text-align: left; }

.BlogDetailsTopTitle { color: #454545;  line-height: 30px; font-family: PSLxDisplayBold; font-size: 30px; }

.BlogDetailsTopImgLeft, .BlogDetailsTop .BlogDetailsImgLeft { display: none; }

.BlogDetailsTopImgRight, .BlogDetailsTop .BlogDetailsImgRight { display: none; }

.BlogDetailsLeft { }

.BlogDetailsRight { padding: 15px 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: #777; }
.BlogDetailsDefaultBlogContentDiv { clear: both; float: left; font-size: 14px; line-height: 24px; margin: 20px 0; width: 94%; }
    .BlogDetailsDefaultBlogContentDiv p { font-size: 14px; line-height: 24px; }
.BlogDetailsDefaultDiv { clear: left; float: left; width: 100%; margin-bottom: 10px; }

.CategoryLabel { background: url(images/icon/icon-category.gif) no-repeat; background-position: left center; padding-left: 25px; font-style: italic; color: #004297; width: 15%; display: block; float: left; }
.TagsLabel { background: url(images/icon/icon-Tags.gif) no-repeat; background-position: left center; padding-left: 25px; font-style: italic; color: #004297; width: 15%; display: block; float: left; }
.BlogDetailsDefaultTagsPanel { margin-top: 10px; font-size: 12px; background: url(images/icon/icon-tag.gif) no-repeat; background-position: left top; text-align: left; width: 100%; clear: left; float: left; line-height: 25px; }
.BlogDetailsDefaultCatPanel { padding-top: 0px; font-size: 12px; background: url(images/icon/icon-category.gif) no-repeat; background-position: left top; width: 100%; clear: left; float: left; }
.BlogDetailsDefaultTagsDiv,
.BlogDetailsDefaultCatDiv { width: 85%; float: left; }
.BlogDetailsDefaultTagsLink { color: #777; }

.BlogDetailsDefaultPublisherDiv { clear: left; float: left; width: 50%; line-height: 25px; margin-top: 25px; }
.BlogDetailsSocialButton { float: right; padding-bottom: 5px; margin-top: 20px; display: flex; }

.BlogDetailsFacebookDiv { display: inline-flex; height: 20px; vertical-align: top; margin-bottom: 5px; }
    .BlogDetailsFacebookDiv .fb-like { margin-right: 5px; }
.BlogDetailsGooglePlusDiv, .BlogDetailsTwitterDiv, .BlogDetailsLineDiv { display: inline-block; height: 20px; vertical-align: top; margin-right: 3px; margin-bottom: 5px; }
/*BlogDetailsDefault End*/

/*BlogList Begin*/
.BlogListTop { width: 100%; min-height: 40px; line-height: 35px; vertical-align: middle; text-align: left; border-bottom: solid 2px #e7e7e7; padding-bottom: 5px; }

.BlogListTopTitle { color: #454545; font-size: 20px; 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 #e9e9e9; 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: 25px; }

.BlogListItemTable { width: 100%; }

.BlogListItemDetailsColumn { padding: 10px 0px; vertical-align: top; }

.BlogListItemDetailsDiv { }

.BlogListItemBlogTitleDiv { margin: 20px 0; }

.BlogListItemNameLink { font-family: PSLxDisplayBold; }

.BlogListItemPublisher { clear: left; color: #7E7E7E; float: left; font-size: 12px; line-height: 35px; margin-bottom: 10px; }

.BlogListItemShortContentDiv { clear: both; line-height: 24px!important; margin: 20px 0; width: 100%; font-size: 13px; }

.BlogListItemMessageDiv { background: url("Images/Background/dot-line.jpg") repeat-x left bottom; height: 2px; width: 100%; }

.BlogListItemReadmore { color: black; position: relative; font-size: 12px; top: 9px; background: url(images/bullet/more.gif) no-repeat; background-position: 90% center; background-color: #fff; padding-right: 25px; text-decoration: underline; }

.BlogPublisher { color: #66767b; }

.BlogListItemSocialButton { float: right; line-height: 22px; padding-top: 5px; display: flex;}

.BlogListItemFacebookDiv { display: inline-block; height: 20px; vertical-align: top; }

.BlogListItemGooglePlusDiv, .BlogListItemTwitterDiv, .BlogListItemLineDiv { display: inline-block; height: 20px; vertical-align: top; margin-right: 3px; }
/*BlogListItem End*/

/*BlogListRowStyle Begin*/
.BlogListDefault { }

.BlogListDefaultPageControlPanel { clear: both; line-height: 30px; margin: 10px 0; padding: 3px; width: 100%; border-top: solid 1px #d8d8d8; border-bottom: solid 1px #d8d8d8; background-color: #f8f8f8; }

.BlogListDefaultItemPerPage { float: left; font-size: 12px; }

    .BlogListDefaultItemPerPage select { float: left; margin-right: 10px; margin-top: 4px; width: 40px; background-color: #fff; }

    .BlogListDefaultItemPerPage .OptionControlTitle { float: left; margin-right: 10px; }

.BlogListDefaultPagingControl { text-align: right; float: right; }

    .BlogListDefaultPagingControl .PagingPrev { padding-right: 5px; }

    .BlogListDefaultPagingControl .PagingNext { padding-left: 5px; }

.BlogListDefaultDataList { width: 100%; clear: left; float: left; }

.BlogListDefaultDataListHeader { display: none; }

.BlogListDefaultDataListItemStyle { vertical-align: top; }
/*BlogListRowStyle End*/

/*SearchBox Begin*/
.SearchBox { width: 100%; margin-bottom: 1px; clear: left; }

    .SearchBox .SidebarRight { font-size: 18px; padding: 15px 0; width: 100%; }

.SidebarTopImgLeft, .SidebarTopImgRight, .SidebarBottom { display: none; }
input[type="text"].SearchBoxTextBox { z-index: 1; width: 74% !important; border: solid 1px #ddd; border-right: none; color: #000; font-size: 13px; height: 30px; float: left; margin-bottom: 5px } 
.SearchBox .BtnStyle1 { width: 24%; margin: 0; padding: 6px; font-size: 18px; }

/*SearchBox End*/
/*Blog Comment*/
.BlogComment .CommonPageTop { display: none; }

.BlogCommentDiv { width: 100%; }

    .BlogCommentDiv table { width: 100%; }

.BlogCommentTitle { float: left; font-weight: bold; }

    .BlogCommentTitle .CommonPageTopTitle { font-family: Tahoma; font-size: 13px; }

.BlogCommentDotted { clear: left; border-bottom: dotted 1px #ddd; padding-top: 10px; }

.BlogCommentTextArea { width: 100%; height: 114px; font-size: 13px; }

.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: 22px; padding: 8px; text-align: right; border-top: solid 1px #d8d8d8; border-bottom: solid 1px #d8d8d8; background-color: #f8f8f8; }

.BlogCommentPostLabel { padding-bottom: 10px; font-weight: bold; }

.BlogCommentListStyle {  padding: 8px; width: 100%; border-bottom: solid 1px #e7e7e7; font-size: 12px; }
.BlogCommentListAlterStyle { padding: 8px; background-color: #fcfcfc; border-bottom: solid 1px #e7e7e7; 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%; }

.BlogCommentPagingBox { }


/*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 { background: url(Images/Background/dot-line.jpg) repeat-x left bottom; }
    .ArchiveBox .BlogNavNormalListLink a { background: url(images/bullet/bullet3.gif) no-repeat 0 15px; padding: 10px 0 10px 20px; }

/* RecentPost Box Begin */
.RecentPost .BlogSidebarRight { padding: 0; }

.RecentPost .ImageRecentPost { width: 100%; clear: left; float: left; margin: 10px 0; }

    .RecentPost .ImageRecentPost img { max-height: 85px; }

.TitleRecentPost { width: 100%; clear: left; float: left; }

.DateRecentPost { width: 100%; clear: left; float: left; font-size: 12px; color: #666; line-height: 20px; }

    .DateRecentPost .BlogListItemPublisher { margin-bottom: 0; }

.RecentPost .BlogNavNormalListLink { background: url(Images/Background/dot-line.jpg) repeat-x left bottom; padding-bottom: 4px; padding: 15px 0; }

    .RecentPost .BlogNavNormalListLink a { padding: 0; font-size: 13px; line-height: 20px; font-weight: bold; }


/* RecentPost Box End */

/* Blog Category Box Begin */
.BlogCategoryBox .BlogSidebarTop { background: url(images/icon/up.gif) no-repeat right center; }
.BlogCategoryBox .SidebarTopHide { background: url(images/icon/down.gif) no-repeat right center; }
.BlogCategoryBox .BlogNavNormalListLink { background: url("Images/Background/dot-line.jpg") repeat-x left bottom; }
    .BlogCategoryBox .BlogNavNormalListLink a { background: url(images/bullet/bullet3.gif) no-repeat 0 15px; padding: 10px 0 10px 20px; }

/* Blog Category Box End */

.sticky-share { position: fixed; bottom: 0; z-index: 100; width: 100%; display: none; }

    .sticky-share a { display: block; float: left; font-size: 0; height: 50px; border-top: solid 1px #cccccc; }

        .sticky-share a, .sticky-share a:hover { color: #ffffff; }

    .sticky-share .Facebook { background-color: #3c5b9a; }

    .sticky-share .Twitter { background-color: #1da0f1; }

    .sticky-share .Line { background-color: #36b419; }

    .sticky-share .GPlus { background-color: #e55e48; }

    .sticky-share .fb { background-image: url(Images/button/sticky-share-facebook.svg); background-repeat: no-repeat; background-position-x: left; background-position-y: center; padding-left: 23px; display: table; margin: auto; }

    .sticky-share .tw { background-image: url(Images/button/sticky-share-twitter.svg); background-repeat: no-repeat; background-position-x: left; background-position-y: center; padding-left: 32px; display: table; margin: auto; }

    .sticky-share .ln { background-image: url(Images/button/sticky-share-line.svg); background-repeat: no-repeat; background-position-x: left; background-position-y: center; padding-left: 38px; display: table; margin: auto; }

    .sticky-share .gp { background-image: url(Images/button/sticky-share-gplus.svg); background-repeat: no-repeat; background-position-x: left; background-position-y: center; padding-left: 41px; display: table; margin: auto; }

    .sticky-share .text1 { font-size: 16px; line-height: 50px; margin: auto; height: 50px; }

    .sticky-share.fouritem a { width: 25%; }

    .sticky-share.threeitem a { width: 33.33%; }

    .sticky-share.twoitem a { width: 50%; }

    .sticky-share.oneitem a { width: 100%; }

    .sticky-share.fouritem .text1 { font-size: 0; line-height: 0; padding: 0; width: 100%; background-position: center center; }

.balloon-share { position: fixed; z-index: 100; display: none; background: url(Images/button/share-icon.svg) no-repeat center center; width: 30px; height: 30px; bottom: 63px; left: 18px; }

    .balloon-share .Facebook { width: 40px; height: 40px; background: url(Images/button/balloon-share-fb.svg) no-repeat center center; position: inherit; bottom: 18px; }

    .balloon-share .Twitter { width: 40px; height: 40px; background: url(Images/button/balloon-share-tw.svg) no-repeat center center; position: inherit; bottom: 18px; }

    .balloon-share .Line { width: 40px; height: 40px; background: url(Images/button/balloon-share-line.svg) no-repeat center center; position: inherit; bottom: 18px; }

    .balloon-share .GPlus { width: 40px; height: 40px; background: url(Images/button/balloon-share-gplus.svg) no-repeat center center; position: inherit; bottom: 18px; }

    .balloon-share .forth-pos { left: 153px; }

    .balloon-share .third-pos { left: 108px; }

    .balloon-share .second-pos { left: 63px; }

    .balloon-share .first-pos { left: 18px; }

/*------------------ Custom Responsive Layout ------------------*/
@media only screen and (min-width: 980px) /*Screen width larger than 980 px ----------  For step 4 --------- */
{
    .BlogListItemNameLink { line-height: 1.2;  font-size: 28px; }
}

@media only screen and (max-width: 979px) /*Screen width 768-980 px ---------- For step 3---------*/
{
    .CategoryLabel { width: 22%; }

    .TagsLabel { width: 22%; }

    .BlogCommentPostDiv { width: 100%; }

    .BlogImage img { width: 100%; }

    .BlogDetailsDefaultBlogContentDiv { width: 100%; }

    .BlogDetailsDefaultTagsDiv, .BlogDetailsDefaultCatDiv { width: 75%; }
    .BlogDetailsSocialButton { clear: left; float: left; width: 100%; margin: 10px 0; }
    .BlogListItemPublisher { clear: left; float: left; width: 100%; margin-bottom: 10px; }
    .BlogListItemSocialButton { clear: left; float: left; width: 100%; margin-bottom: 10px; }
    .BlogListItemNameLink{ line-height: 1.2;  font-size: 26px; }
}

@media only screen and (max-width: 767px) /*Screen width 480-767 px -------------- For step 2 ------------ */
{

    .BlogFrontMaster .row .common-rightside-col { display: block; padding: 0 10px; }

    .SearchBox, .BlogNavList { display: inline-block; width: 47%; margin: 10px 2% 10px 0; vertical-align: top; }
    .BlogDetailsSocialButton { display: none; } 
}

@media only screen and (max-width: 479px) /*Screen width lower than 480 px -------------- For step 1 ------------ */
{
    .CategoryLabel { width: 35%; }

    .TagsLabel { width: 35%; }

    /* Blog list */
    .BlogListTop { line-height: 25px; }

    .BlogListDefaultItemPerPage { clear: left; float: none; display: none; margin: 0 auto; }

    .BlogListDefaultPagingControl { clear: left; float: none; display: table; margin: 0 auto; }

    .BlogListItemPublisher { width: 100%; margin-bottom: 10px; }

    .BlogListItemBlogTitleDiv, .BlogListItemPublisherDiv, .BlogListItemShortContentDiv, .BlogDetailsDefaultDiv { padding: 0; }

    .BlogListItemReadmore { }

    /* Blog Detail */

    .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; }


    .BlogDetailsDefaultBlogContentDiv { padding: 0; font-size: 13px; line-height: 22px; }
        .BlogDetailsDefaultBlogContentDiv p { font-size: 13px; line-height: 22px; }

    .BlogDetailsDefaultTagsDiv, .BlogDetailsDefaultCatDiv { width: 65%; }

    .SearchBox, .BlogNavList { display: inline-block; width: 100%; margin: 10px 0; vertical-align: top; }
}

@media only screen and (orientation: portrait) {
}
