.article_social { position: relative; height: 53px; margin: 30px 0; padding: 10px 0 10px 0; border-bottom: 1px solid #eee; background: #fafafa; border-top: 1px solid #eee; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.article_social_wrap.float .article_social { position: fixed; z-index: 10; top: -1px; margin-top: 0; background: rgba(255,255,255,.98); background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEX///+nxBvIAAAAAXRSTlPyE1VLVgAAAApJREFUCB1jYAAAAAIAAc/INeUAAAAASUVORK5CYII=) repeat 0 0; }
.article_social:before { content: 'SHARE'; float: left; font-size: 1.1em; font-weight: bold; color: #aaa; line-height: 33px; margin-right: 15px; }
.article_social * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.art-share { list-style-type: none; margin: 0;  padding: 0; white-space: nowrap; }
/*.art-share li { float: left; margin: 0 10px 0 0; }*/
.art-share li { display: inline-block; margin: 0 0 0 7px; vertical-align: middle; }
.art-share li:first-child { margin: 0; }
.art-share a { display: block; position: relative; height: 30px; line-height:30px; color: #fff; text-align: center; font-weight: bold; font-size: 1.2em; padding: 0 10px 0 40px; font-style: italic; border-radius: 3px; background: #bbb;  -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; }
.art-share a:hover { text-decoration: none; color: #fff; }
.art-share a .s { position: absolute; z-index: 5; display: block; vertical-align: middle; height: 0; overflow: hidden; bottom: 0; left: 0; right: 0; font-size: 0.8em; line-height: 30px; text-transform: uppercase; color: #fff; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; -webkit-transition: all .15s ease-in-out; -moz-transition: all .15s ease-in-out; -o-transition: all .15s ease-in-out; transition: all .15s ease-in-out; border-radius: 3px; }
.art-share a:after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: url(images/article_social.png?2) no-repeat -24px -24px; }
.art-share a:before { content: ''; position: absolute; top: 5px; bottom: 5px; left: 32px; width: 1px; background: #fff; opacity: 0.2; }

.art-share .twitter { background-color: #1db0ed; width: 60px; }
.art-share .facebook { background-color: #3a5998; }
.art-share .linkedin { background-color: #1274b2; }
.art-share .gplus { background-color: #db4a37; padding: 0; width: 56px; }
.art-share .twitter .s { background-color: #1091c7; }
.art-share .facebook .s { background-color: #2c4373; }
.art-share .linkedin .s { background-color: #0d5684; }
.art-share .gplus .s { background-color: #bd3422; }

.art-share .gplus:before { display:  none; }
.art-share .twitter:before { display:  none; }
.art-share .twitter:after { background-position: -24px -24px; left: 50%; margin-left: -12px;}
.art-share .facebook:after { background-position: -48px -24px; }
.art-share .linkedin:after { background-position: -96px -24px; }
.art-share .gplus:after { background-position: -72px -24px; left: 50%; margin-left: -12px; }
.art-share .print:after { background-position: -144px -24px; opacity: 0.5; }
.art-share .email:after { background-position: -168px -24px; opacity: 0.5; }

.art-share .line { border: 1px solid #ddd; background: #f3f3f3; color: #777; }
.art-share .line:hover { background: #fff; }
.art-share .line:hover:after { opacity: 0.7; }
.art-share .print, .art-share .email { text-indent: -9999px; width: 32px; padding: 0; }

.art-share .right { float: right; margin-right: 0; }
.art-share .comments_li { border-right: 1px solid #ddd; padding: 0 20px 0 0; margin: 0 20px 0 0; }
.art-share .comments { background: none; color: #777; padding: 0 0 0 29px; font-size: 1.3em; }
.art-share .comments:hover { color: #000; }
.art-share .comments:after { background-position: -120px -24px; opacity: 0.15; left: 0; }
.art-share .comments:before { display: none; }

.art-share a:hover .s { height: 30px; }

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5),
only screen and (min-resolution: 144dpi)
{
	.art-share a:after {
		background-size: 492px 492px;
		background-image: url(images/article_social@2x.png?2);
	}
}

@media only screen and (max-width: 600px) {
	/*.lo-responsive .article_social_wrap.float .article_social { position: relative; top: 0; background: none; }*/
	.lo-responsive .art-share .facebook_li { margin-left: 0; }
	.lo-responsive .art-share .comments_li { display: none; }
	.lo-responsive .art-share .print_li { display: none; }
	.lo-responsive .art-share .email_li { display: none; }
	.lo-responsive .article_social:before { display:  none; }
}