.art-wrap { padding: 40px 40px 40px 40px; margin: 0 0 0; } .art-wrap:after { content: ""; display: table; clear: both; } .sidebar.fixed { position: fixed; bottom: 0; float: none; margin: 0; } .sidebar.fixed.stay { position: absolute; } .art-wrap *, .art-wrap *:before, .art-wrap *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .art-article { /*-webkit-font-smoothing: antialiased;*/ line-height: 1.618; margin: 0 0 0 0; } .art-header { margin: 0 -40px 0 -40px; padding: 0 40px; } .art-title { font-size: 3.4em; letter-spacing: -0.01em; color: #111; line-height: 1.1; margin: 0; padding: 0; } .art-sms { font-weight: normal; font-size: 1.8em; color: #484848; line-height: 1.4; margin: 10px 0; } .art-byline { color: #a8a8a8; text-transform: none; margin: 0 0 20px 0; padding: 0 0 0 0; font-size: 1.2em; } .art-body { font-size: 1.3em; color: #383838; padding: 0 0 20px 0; } .art-body p { margin: 1.618em 0 0 0; } .art-article .article_social { margin: 0 -40px 0 -40px; padding: 10px 40px; background: none; } .art-article .article_social:before { display: none; } .art-article .float .article_social { border-bottom: 1px solid #eee; } .art-body .gotocomments { text-align: center; margin: 0 -40px; } .art-body .gotocomments a { display: inline-block; background: #0581c9; color: #fff; margin: 0 auto; padding: 8px 0px; margin: 40px auto 0 auto; width: 31%; border-radius: 5px; } .art-article img { max-width: 100%; display: block; margin: 0 auto; height: auto; } .art-article figure { margin: 40px 0; } figcaption { color: #999; font-size: 0.8em; line-height: 1.5; padding: 10px 10px; text-align: center; border-bottom: 1px solid #eee; } figcaption p { margin: 0; } .mfp-content figcaption { padding: 0; font-size: 1em; border-bottom: none; color: #fff; } .story_images { margin: 0 -40px; position: relative; min-height: 200px; background: #151515; } .art-article .story_images figure { padding: 0; margin: 0; display: block; } .story_images figure > a { display: block; } .story_images figure img { max-width: 100%; display: block; margin: 0 auto; } .story_images figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 20px 10px 20px; color: #fff; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUFBQWsrP/7AAAAAXRSTlOmf1PeuwAAAApJREFUCB1jYAAAAAIAAc/INeUAAAAASUVORK5CYII=) repeat 0 0; border-radius: 0; } .story_images figcaption a { color: #bbb; text-decoration: underline; } .art-article .story_images figcaption p { margin: 0; } .story_images.multi figcaption { padding-bottom: 100px; } .story_images .thumbnails * { -webkit-transition: opacity .2s ease-in, border-color .2s ease-in; -moz-transition: opacity .2s ease-in, border-color .2s ease-in; -o-transition: opacity .2s ease-in, border-color .2s ease-in; transition: opacity .2s ease-in, border-color .2s ease-in; } .story_images .thumbnails { position: absolute; bottom: 0; left: 0; right: 0; height: 100px; } .story_images .thumbnails ul { list-style-type: none; margin: 15px 0; padding: 0 20px; text-align: center; white-space: nowrap; } .story_images .thumbnails li { margin: 0 0 0 10px; padding: 0; display: inline-block; vertical-align: top; } .story_images .thumbnails li:first-child { margin-left: 0; } .story_images .thumbnails a { display: block; border: 1px solid #000; font-size: 0.85em; } .story_images .thumbnails img { height: 70px; display: block; opacity: 0.8; } .story_images .thumbnails a:hover img { opacity: 1; } .story_images .thumbnails .viewall { display: block; height: 72px; width: 92px; color: #fff; padding: 15px 20px; text-align: center; white-space: normal; border: 1px solid #bbb; opacity: 0.6; } .story_images .thumbnails .viewall:hover { opacity: 1; } .story_images.nocaption .thumbnails { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUFBQWsrP/7AAAAAXRSTlOmf1PeuwAAAApJREFUCB1jYAAAAAIAAc/INeUAAAAASUVORK5CYII=) repeat 0 0; } #article_actions_i_tips { line-height: 16px; font-size: 10px; margin: 4px 0 0 0; padding: 0 0 0 30px; background: url(images/articlepage_action_socialtips.png) no-repeat 0 50%; text-transform: uppercase; display: none; float: right; } .article_distributors_vendors { background: url(images/articlepage_extra.png) no-repeat 100% 0; padding: 5px 0 0 0; margin: 0 0 5px 0; } .article_distributors_vendors_inner { background: #dddddd url(images/articlepage_extra.png) no-repeat 100% 100%; padding: 0 0px 5px 0px; } .article_distributors_vendors_border { border: 1px solid #dddddd; border-width: 0 1px 0 1px; } .article_distributors_vendors_content { color: #969696; padding: 2px 10px; background: #f8f8f8; border: 1px solid #fff; border-width: 0 1px 0 1px; } .article_distributors_vendors_header { background: url(images/articlepage_reference_header.png) repeat-x 0 100%; padding: 7px 0; font-weight: 700; text-transform: uppercase; font-size: 11px; } .article_distributors_vendors_content ul { margin: 0; padding: 10px 0 10px 22px; } .article_distributors_vendors_content ul li { margin: 4px 0; padding: 0; color: #cecece; } .article_distributors_vendors_content a { color: #0086CC; } .article_distributors_vendors_showall { float: right; font-size: 11px; } #comments_content { margin: 20px 0 0 0; } .art-comment_show { display: none; } #article_suggestion { position: fixed; bottom: 0; left: 0; z-index: 9999; max-width: 405px; text-align: right; display: none; } #article_suggestion .article_suggestion-inner{ padding: 10px; -moz-box-shadow: 2px 1px 2px #888;-webkit-box-shadow: 2px 1px 2px #888;box-shadow: 2px 1px 2px #888; background: #fff url(images/article_view_popup_bg.gif) repeat-y 100% 100%;} #article_suggestion .article_suggestion-inner h2 a{color: #333; font-size: 17px;} #article_suggestion .article_suggestion-inner h2{border-bottom: 1px solid #e5e5e5; margin: 0 0 10px; padding: 0 0 8px;} .article_suggestion-noshow{font-size: 8px; color: #333; cursor: pointer; margin: 6px 0; text-shadow: 0 1px 0 rgba(255,255,255,.7), 0 -1px 0 rgba(255,255,255,.7), 1px 0 0 rgba(255,255,255,.7), -1px 0 0 rgba(255,255,255,.7); } .article_suggestion-noshow span{font-size: 9px; color: #0581C9;} .article_suggestion-closebox{float: right; width: 40px; padding:5px 0 0 10px;} .article_suggestion-closebox a{text-indent: -9999px; display: block; background: url(images/article_view_popup_close.png) 0 0; width: 19px; height: 14px; float: right;} .article_suggestion-closebox a:hover{background-position: 100% 100%;} .article_suggestion-text{width: 225px; float: left;} .article_suggestion-sublink{text-transform: uppercase; font-size: 10px; background: url(images/article_view_popup_arrow.png) no-repeat 100% 50%; padding-right: 15px;} .article_suggestion-img{float: left; padding: 0 10px 0 0;} #article_body p img { max-width: 100%; display: block; } .art-figure { } .art-magnific { display: block; position: relative; background: #f8f8f8; min-height: 40px; } .art-magnific:after { content: ""; position: absolute; bottom: 10px; right: 10px; width: 24px; height: 24px; background: rgba(0,0,0,.4) url(images/sprites.png?2) no-repeat -28px -108px; color: #fff; border-radius: 3px; font-size: 0.8em; } .art-magnific:hover:after { background-color: rgba(0,0,0,0.6);} .art-figure img { max-width: 100%; } .art-article .art-figure_left, .review_body_text .art-figure_left { float: left; clear: left; width: 46%; max-width: 300px; margin: 0 4% 15px 0; } .art-article .art-figure_right, .review_body_text .art-figure_right { float: right; clear: right; width: 46%; max-width: 300px; margin: 0 0 15px 4%; } .article-image { margin: auto; } .mfp-bg { z-index: 2002; } .mfp-wrap { z-index: 2003; } .art_quote { display: inline; position: relative; width: 220px; color: #000; font-weight: bold; font-size: 1.3em; line-height: 1.4; float: left; margin: 0 30px 15px 0; padding: 0; quotes: "\201C""\201D""\2018""\2019"; } .art-article .art_quote p { margin: 0; padding: 0; } .art-article .art_quote .quote_author { font-size: 0.6em; color: #bbb; text-align: right; line-height: 14px; margin-top: 5px; margin-bottom: -5px; } .art_quote .quote_author:before { content: '- '; } .art_quote .quote:before { color: #ccc; content: open-quote; font-size: 2em; line-height: 0.1em; margin-right: 0.2em; vertical-align: -0.4em; } .art_quote .quote:after { color: #ccc; content: close-quote; font-size: 2em; line-height: 0.1em; margin-left: 0.2em; vertical-align: -0.4em; } .page_links { color: #bbb; margin: 20px 0 40px 0; padding: 0; font-weight: bold; text-align: left; line-height: 1.8; } .page_links:after { content: ""; display: table; clear: both; } .page_links .label { margin: 0; display: inline-block; vertical-align: middle; } .page_links ul { list-style-type: none; padding: 0; margin: 0; display: inline-block; vertical-align: middle; } .page_links li { padding: 0 10px; display: inline-block; border-left: 1px solid #eee; vertical-align: middle; } .page_links li:first-child { border: none; } .art-article .page_links a { text-align: center; color: #1481c9; display: block; background: #fff; border-radius: 15px; height: 1.8em; width: 1.8em; overflow: hidden; -webkit-transition: all .1s ease-in; -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; transition: all .1s ease-in; } .art-article .page_links a:hover { color: #fff; background: #1481c9; text-decoration: none; } .art-article .page_links a.sel { color: #bbb; pointer-events: none; color: #fff; background: #1481c9; } /*.art-article .page_links a.sel { color: #bbb; pointer-events: none; }*/ .art-article .page_links a.turn { text-indent: 0px; position: relative; width: auto; padding: 0 15px; color: #1481c9; } .art-article .page_links a.turn:hover { background: #1481c9; color: #fff; } .art-article .page_links a.prev { display: none; } .art-article .page_links a.prev:before { content: ''; display: inline-block; top: 50%; margin: -5px 10px 0 0; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right:5px solid #1481c9; } .art-article .page_links a.prev:hover:before { border-right-color: #fff; } .art-article .page_links a.next:after { content: ''; display: inline-block; top: 50%; margin: -5px 0 0 10px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left:5px solid #1481c9; } .art-article .page_links a.next:hover:after { border-left-color: #fff; } .bottom_boombox { text-align: center; margin: 30px 0; } .bottom_boombox > div { display: inline-block; } .art-extra h2 { clear: both; border-bottom: 1px solid #e6e7e8; padding: 0 0 5px 0; margin: 30px 0 0 0; font-size: 2.1em; } .readnext ul { list-style-type: none; padding: 0; margin: 0 0 20px; overflow: hidden; } .readnext ul:after { content: ""; display: table; clear: both; } .readnext li { padding: 0; margin: 20px 0 0 3%; float: left; width: 31%; text-align: left; } .readnext li:nth-child(3n+1) { margin-left: 0; clear: both; } .readnext li .image { display: block; position: relative; width: 100%; height: 0; padding: 49% 0 0; overflow: hidden; border-radius: 10px; border: 1px solid #ddd; background: #333; } .readnext li img { width: auto; width: 102%; max-width: 9999px; display: block; position: absolute; top: -100%; bottom: -100%; left: -100%; right: -100%; margin: auto; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; } .readnext li .image:hover img { width: 120%; top: -100%; bottom: -100%; } .readnext li a { color: #383838; } .readnext li h3 { font-size: 1.1em; margin: 10px 0 0 0; line-height: 1.4; } .readnext li p { color: #aaa; margin: 3px 0; } .readnext li.video .image:after { content: ''; position: absolute; width: 32px; height: 32px; background: url(images/icon_video.png) no-repeat 0 0; right: 10px; bottom: 10px; opacity: 1; } .readnext li.gallery .image:after { content: ''; position: absolute; width: 32px; height: 32px; background: url(images/icon_gallery.png) no-repeat 0 0; right: 10px; bottom: 10px; opacity: 1; } .art-wrap .ad { text-align: center; margin: 40px 0; } .art-body .tags { margin: 10px 0; font-size: 0.75em; color: #bbb; } .art-body .tags a { display: inline-block; background: #f3f3f3; color: #777; padding: 0 15px; margin: 0 5px 5px 0; border-radius: 15px; -webkit-transition: all .1s ease-in; -moz-transition: all .1s ease-in; -o-transition: all .1s ease-in; transition: all .1s ease-in; } .art-body .tags a:first-child { margin-left: 5px; } .art-body .tags a:hover { background: #33a0d1; color: #fff; text-decoration: none; } .art-body .image-license { text-align: right; display: block; font-style: italic; font-size: 14px; color: #bbbbbb; padding-right: 0.6rem; width: 100%; bottom: -22px; } .art-body .story_images .image-license{ text-align: right; display: block; font-style: italic; font-size: 14px; color: #bbbbbb; padding-right: 0.6rem; position: absolute; width: 100%; bottom: -22px; } .art-body .image-license span{ display: inline-block; } .art-body .image-license span a{ color: #bbbbbb; } .art-body .image-license span a:hover{ text-decoration: underline } .art-body .image-license span:last-child{ margin-left: 0.5rem; } .art-article aside.readmore { clear: both; padding: 10px 0; color: #aaa; line-height: 1.3; border-top: 1px solid #eee; border-bottom: 1px solid #eee; background: #fff;margin:10px 0} .art-article aside.readmore .image { display:inline-block; position: relative; z-index: 2; vertical-align:middle; width: 80px; border-radius: 3px; margin: 0 -90px 0 0; } .art-article aside.readmore img {display: block; } .art-article aside.readmore .text { display:inline-block; position: relative; z-index: 1; vertical-align:middle; padding: 0 0 0 100px; } .art-article aside.readmore .text a { font-weight: normal; } .art-article aside.readmore strong { text-transform: uppercase; font-size: 0.7em; display: block; font-weight: bold; line-height: 1.5; } .art-article aside.readmore:after { content: ""; display: table; clear: both; } blockquote { color:#393838; padding: 1em 30px 1em 35px; background: #f8f8f8; color: #666; border-left: 5px solid #bbb; margin: 1.618em -20px 1.618em -40px; border-radius: 0 10px 10px 0; } .antiscroll-wrap { display: inline-block; position: relative; overflow: hidden; } .antiscroll-scrollbar { background: #666; background: rgba(255, 255, 255, 0.5); -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; position: absolute; opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); -webkit-transition: linear 300ms opacity; -moz-transition: linear 300ms opacity; -o-transition: linear 300ms opacity; } .antiscroll-scrollbar-shown { opacity: 1; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); } .antiscroll-scrollbar-horizontal { height: 7px; margin-left: 2px; bottom: 2px; left: 0; } .antiscroll-scrollbar-vertical { width: 7px; margin-top: 2px; right: 2px; top: 0; } .antiscroll-inner { overflow: scroll; } .antiscroll-inner::-webkit-scrollbar { width: 0; height: 0; } .antiscroll-inner::scrollbar { width: 0; height: 0; } .qs-article_widget { position: relative; color: #333; border: 0px solid #ddd; padding: 20px; border-radius: 0; background: #f8f8f8; -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0); -moz-box-shadow: 0 1px 3px rgba(0,0,0,0); box-shadow: 0 1px 3px rgba(0,0,0,0); margin: 1.5em 0; } .qs-article_widget form { padding: 0; margin: 0; } .qs-article_widget h3 { margin: 0 0 0.5em 0; font-size: 1.5em; line-height: 1.3; color: #333; } .qs-article_widget p { margin: 0.5em 0; } .qs-registered p { margin: 0.5em 0 1em;} .qs-message { display: none; color: #00a400; } .qs-currentemail { font-weight: bold; } .qs-btn { border: 1px solid #bbb; background: #bbb; color: #fff; padding: 0.6em 1.5em; font-size: 1em; font-weight: bold; margin: 0 0.5em 0 0; cursor: pointer; -webkit-transition: all .2s ease-in; -moz-transition: all .2s ease-in; -o-transition: all .2s ease-in; transition: all .2s ease-in; } .qs-btn:hover { border-color: #777; background: #999; } .qs-btn.primary { border: 1px solid #2a8aa3; background: #38A2BF; } .qs-btn.primary:hover { border-color: #2c8198; background: #2c8198; } .qs-textfield { border: 1px solid #ddd; background: #fff; color: #333; padding: 0.6em 0.8em; margin: 0 0 5px 0; font-size: 1em; width: 250px; } .qs-error { color: #f00; } #qs-terms { font-size: 0.78em; } .art-youtube { position: relative; padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height: 0; } .art-youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .art-wrap table { border: none; border-collapse: collapse; width: 100%; position: relative; } .art-wrap table td, .art-wrap table th { padding: 20px 20px; border: 1px solid #d5d8df; font-weight: normal; text-align: left; } .nocontent .related-content-links{ margin-top: 15px; } @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-magnific:after { background-size: 512px 512px; background-image: url(images/sprites@2x.png?2); } } @media only screen and (max-width: 768px) { .lo-responsive .art-article .art-figure, .lo-responsive .review_body_text .art-figure { float: none; margin: 40px 0; width: 100%; max-width: 9999px; } } @media only screen and (max-width: 600px) { .lo-responsive .art-wrap { padding: 10px; } .lo-responsive .art-title { font-size: 2.4em; } .lo-responsive .art-header { margin: 0 -10px; padding: 0 10px; } .lo-responsive .art-sms { font-size: 1.5em; } .lo-responsive .story_images { margin: 0 -10px; } .lo-responsive .art-article .article_social { margin: 0 -10px; padding: 10px 10px; height: auto; } .lo-responsive .art-article .article_social:after { content: ""; display: table; clear: both; } .lo-responsive .readnext li { margin: 20px 0 0 4%; width: 48%; } .lo-responsive .readnext li:nth-child(3n+1) { margin-left: 4%; clear: none; } .lo-responsive .readnext li:nth-child(2n+1) { margin-left: 0; clear: both; } .lo-responsive .story_images { min-height: 50px; } }