section.component-article .section-container { float: left; background: url('../../../graphics/pc/computing2/general/background_separator.png') top right repeat-y transparent; margin-right: 320px; margin-bottom: 40px; padding-right: 20px; } section.component-article .section-container .main-content { } section.component-suggestion { float: left; background-color: #f9f9f9; border-bottom: 1px solid #ececec; border-top: 1px solid #608ea8; padding: 0px 40px 30px; margin-bottom: 40px; } section.component-suggestion .header { width: 100%; text-align: center; margin-bottom: 40px; text-transform: uppercase; } section.component-suggestion .header a { color: #ffffff; background-color: #608ea8; font-size: 1.250rem; line-height: 1.250rem; display: inline-block; padding: 4px 13px; } section.component-suggestion .section-column { float: left; margin-right: 3%; width: 48.5%; } section.component-suggestion .section-column:last-child { margin-right: 0; } section.component-issue { float: left; background: url('../../../graphics/pc/computing2/general/background_separator.png') top right repeat-y transparent; margin-right: 320px; margin-bottom: 40px; padding-right: 2%; } section.component-issue .main-content .latest-issue { float: left; width: 24%; text-align: center; } section.component-issue .main-content .latest-issue .image img { width: 100%; } section.component-issue .main-content .latest-issue .category { text-transform: uppercase; display: block; margin-top: 12px; margin-bottom: 9px; color: #ea7500; font-size: 0.875rem; } section.component-issue .main-content .latest-issue .date { color: #666666; font-size: 0.688rem; display: block; } section.component-issue .main-content .list-mostread { float: left; background: url('../../../graphics/pc/computing2/general/background_separator.png') top left repeat-y; padding-left: 3%; margin-left: 3%; width: 70%; } section.component-issue .main-content .list-mostread .header { width: 100%; text-align: center; margin-bottom: 28px; text-transform: uppercase; } section.component-issue .main-content .list-mostread .header span { color: #ffffff; background-color: #ea7500; font-size: 1.250rem; line-height: 1.250rem; display: inline-block; padding: 8px 30px; } section.component-issue .main-content .list-mostread li { list-style-type: none; counter-increment: customlistcounter; padding-left: 1.875rem; margin-bottom: 25px; position: relative; } section.component-issue .main-content .list-mostread li a { font-family: 'Source Sans Pro Semibold', Arial, Helvetica, sans-serif; color: #222222; font-size: 1rem; line-height: 1.25; letter-spacing: 0.025rem; } section.component-issue .main-content .list-mostread li:before { font-family: 'Source Sans Pro Black', Arial, Helvetica, sans-serif; color: #608ea8; content: counter(customlistcounter, decimal) " "; font-size: 1.875rem; position: absolute; top: 0; left: 0; } section.component-issue .main-content .list-mostread li:last-child { display: none; } article { position: relative; } article.detailed-article .article-header .sponsored { text-align: right; display: block; width: 50%; margin-left: 50%; } article.detailed-article .article-header .sponsored .text { font-family: 'Source Sans Pro Light', Arial, Helvetica, sans-serif; font-size: 0.875rem; letter-spacing: 0.025rem; margin-right: 5px; color: #9d9d9d; } article.detailed-article .article-header .sponsored .logo { width: 55px; display: inline-block; vertical-align: bottom; } article.detailed-article .article-header .sponsored .logo img { width: 100%; } article.detailed-article .article-header .category { text-transform: uppercase; font-family: 'Source Sans Pro Bold', Arial, Helvetica, sans-serif; color: #ea7500; font-size: 1rem; letter-spacing: 0.025rem; margin-bottom: 15px; display: inline-block; } article.detailed-article .article-header .category:after { content: " "; width: 8px; height: 10px; background: url('../../../graphics/pc/computing2/general/arrow.png') center center no-repeat transparent; display: inline-block; margin-left: 6px; } article.detailed-article .article-header .subcategory { text-transform: uppercase; font-family: 'Source Sans Pro Light', Arial, Helvetica, sans-serif; color: #ea7500; font-size: 1rem; letter-spacing: 0.025rem; margin-bottom: 15px; display: inline-block; margin-left: 5px; } article.detailed-article .article-header .title { font-family: 'Source Sans Pro Bold', Arial, Helvetica, sans-serif; color: #222222; font-size: 2.500rem; line-height: 2.875rem; letter-spacing: 0.025rem; margin-bottom: 30px; } article.detailed-article .article-header .excerpt { color: #666666; font-size: 1.375rem; line-height: 1.750rem; letter-spacing: 0.025rem; margin-bottom: 55px; } article.detailed-article .article-metadata { border-bottom: 1px solid #e9e9e9; padding-bottom: 25px; margin-bottom: 25px; float: left; width: 100%; } article.detailed-article .article-metadata .author { text-transform: uppercase; display: inline-block; border-right: 1px solid #666666; margin-right: 16px; padding-right: 20px; font-family: 'Source Sans Pro Light', Arial, Helvetica, sans-serif; color: #666666; font-size: 1.125rem; line-height: 1.500rem; letter-spacing: 0.025rem; } article.detailed-article .article-metadata .author .name { font-family: 'Source Sans Pro Regular', Arial, Helvetica, sans-serif; color: #ea7500; } article.detailed-article .article-metadata .datetime { display: inline-block; width: auto; margin: 0; font-family: 'Source Sans Pro Light', Arial, Helvetica, sans-serif; color: #666666; font-size: 1.125rem; line-height: 1.500rem; letter-spacing: 0.025rem; } article.detailed-article .article-metadata .tools { float: left; width: 100%; margin-top: 20px; } article.detailed-article .article-metadata .tools .share { float: left; position: relative; z-index: 0; } article.detailed-article .article-metadata .tools .print { background: url('../../../graphics/pc/computing2/general/print.png'); background-size: 100% auto; width: 27px; height: 25px; float: right; cursor: pointer; } article.detailed-article .article-body { float: left; padding-bottom: 50px; margin-bottom: 20px; border-bottom: 1px solid #e9e9e9; width: 100%; } article.detailed-article .article-body .content-body { float: left; } article.detailed-article .article-body .content-body h3 { font-family: 'Source Sans Pro Semibold', Arial, Helvetica, sans-serif; color: #4c4c4b; font-size: 1.500rem; line-height: 2.500rem; letter-spacing: 0.025rem; margin-bottom: 25px; } article.detailed-article .article-body .content-body h4 { font-family: 'Source Sans Pro Semibold', Arial, Helvetica, sans-serif; color: #4c4c4b; font-size: 1.300rem; line-height: 2.300rem; letter-spacing: 0.025rem; margin-bottom: 25px; } article.detailed-article .article-body .content-body p { font-family: 'Source Sans Pro Light', Arial, Helvetica, sans-serif; color: #4c4c4b; font-size: 1.125rem; line-height: 1.813rem; letter-spacing: 0.025rem; margin-bottom: 30px; } article.detailed-article .article-body .content-body p a { color: #608ea8; text-decoration: underline; } article.detailed-article .article-body .content-body p strong { font-family: 'Source Sans Pro Regular', Arial, Helvetica, sans-serif; } article.detailed-article .article-body .content-body p.question { color: #ea7500; margin-bottom: 5px; } article.detailed-article .article-body .content-body ul, article.detailed-article .article-body .content-body ol { margin-bottom: 30px; margin-left: 45px; list-style-position: outside; } article.detailed-article .article-body .content-body ul li, article.detailed-article .article-body .content-body ol li { font-family: 'Source Sans Pro Light', Arial, Helvetica, sans-serif; color: #4c4c4b; font-size: 1.125rem; line-height: 1.813rem; letter-spacing: 0.025rem; } article.detailed-article .article-body .content-body ul { list-style-image: url('../../../graphics/pc/computing2/general/arrow-blue.png'); } article.detailed-article .article-body .content-body ol li { counter-increment: chapter; } article.detailed-article .article-body .content-body ol li:before { content: counter(chapter, lower-latin) ". "; color: #608ea8; display: block; position: relative; max-width: 0px; max-height: 0px; left: -1.3rem; } article.detailed-article .article-body .content-body blockquote.left { position: relative; width: 46%; padding: 30px; border: 2px solid #608ea8; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #4c4c4b; font-size: 1.500rem; letter-spacing: 0.025rem; line-height: 2.313rem; margin-left: 25px; margin-right: 25px; margin-top: 20px; margin-bottom: 50px; } article.detailed-article .article-body .content-body blockquote:before { background: url("../../../graphics/pc/computing2/general/quotation-marks-up.svg") top left no-repeat #FFFFFF; background-size: 55px 38px; position: absolute; top: -20px; left: -27px; width: 67px; height: 48px; font-size: 9rem; text-align: center; line-height: 8rem; } article.detailed-article .article-body .content-body blockquote:after { background: url("../../../graphics/pc/computing2/general/quotation-marks-down.svg") bottom right no-repeat #FFFFFF; background-size: 55px 38px; position: absolute; bottom: -20px; right: -27px; width: 67px; height: 48px; font-size: 9rem; text-align: center; line-height: 8rem; } article.detailed-article .article-body .content-body blockquote.left { float: left; margin-right: 50px; } article.detailed-article .article-body .content-body blockquote.right { float: right; margin-left: 50px; } article.detailed-article .article-body .content-body figure { } article.detailed-article .article-body .content-body figure.center { width: 100%; margin-bottom: 30px; } article.detailed-article .article-body .content-body figure.left { float: left; width: 40%; margin-right: 20px; margin-bottom: 20px; margin-top: 10px; } article.detailed-article .article-body .content-body figure.right { float: right; width: 40%; margin-left: 20px; margin-bottom: 20px; margin-top: 10px; } article.detailed-article .article-body .content-body figure img { width: 100%; } article.detailed-article .article-body .content-body figure figcaption { margin-top: 5px; text-align: right; font-family: 'Source Sans Pro Light', Arial, Helvetica, sans-serif; font-size: 0.813rem; line-height: 1.125rem; letter-spacing: 0.025rem; color: #4c4c4b; } article.detailed-article .article-body .content-body figure figcaption .author-photo { font-family: 'Source Sans Pro Bold', Arial, Helvetica, sans-serif; } article.detailed-article .article-body .content-body figure figcaption .author-photo:before { content: "/"; display: inline-block; margin-right: 3px; } article.detailed-article .article-body .content-summary { float: left; background-color: #ea7500; padding: 13px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } article.detailed-article .article-body .content-summary figure.center { width: 100%; margin-bottom: 30px; } article.detailed-article .article-body .content-summary figure.left { float: left; width: 40%; border-right: solid 15px #ea7500; border-top: solid 10px #ea7500; border-bottom: solid 10px #ea7500; } article.detailed-article .article-body .content-summary figure.right { float: right; width: 40%; border-left: solid 15px #ea7500; border-top: solid 10px #ea7500; border-bottom: solid 10px #ea7500; } article.detailed-article .article-body .content-summary figure img { width: 100%; } article.detailed-article .article-body .content-summary figure figcaption { margin-top: 5px; text-align: right; font-family: 'Source Sans Pro Light', Arial, Helvetica, sans-serif; font-size: 0.813rem; line-height: 1.125rem; letter-spacing: 0.025rem; color: #ffffff; } article.detailed-article .article-body .content-summary figure figcaption .author-photo { font-family: 'Source Sans Pro Bold', Arial, Helvetica, sans-serif; } article.detailed-article .article-body .content-summary figure figcaption .author-photo:before { content: "/"; display: inline-block; margin-right: 3px; } article.detailed-article .article-body .content-summary h3 { font-family: 'Source Sans Pro Semibold', Arial, Helvetica, sans-serif; color: #ffffff; font-size: 1.625rem; letter-spacing: 0.025rem; line-height: 1.813rem; margin-bottom: 20px; } article.detailed-article .article-body .content-summary h4 { border-top: 1px dotted #ffffff; border-bottom: 1px dotted #ffffff; font-family: 'Source Sans Pro Light', Arial, Helvetica, sans-serif; color: #ffffff; font-size: 1rem; line-height: 1.3rem; letter-spacing: 0.025rem; padding-top: 10px; padding-bottom: 10px; margin-bottom: 18px; } article.detailed-article .article-body .content-summary h4 strong { font-family: 'Source Sans Pro Semibold', Arial, Helvetica, sans-serif; } article.detailed-article .article-body .content-summary p { font-family: 'Source Sans Pro Light', Arial, Helvetica, sans-serif; color: #ffffff; font-size: 1rem; line-height: 1.3rem; letter-spacing: 0.025rem; margin-bottom: 25px; } article.detailed-article .article-body .content-summary p.question { margin-bottom: 5px; font-family: 'Source Sans Pro Semibold', Arial, Helvetica, sans-serif; } article.detailed-article .article-body .content-summary p:last-child { margin-bottom: 0; } article.detailed-article .article-body .content-summary p strong { font-family: 'Source Sans Pro Semibold', Arial, Helvetica, sans-serif; } article.detailed-article .article-body .content-summary p a { font-family: 'Source Sans Pro Regular', Arial, Helvetica, sans-serif; text-decoration: underline; color: #ffffff; } article.detailed-article .article-body .content-summary ul, article.detailed-article .article-body .content-summary ol { margin-bottom: 30px; margin-left: 45px; list-style-position: outside; } article.detailed-article .article-body .content-summary ul li, article.detailed-article .article-body .content-summary ol li { font-family: 'Source Sans Pro Light', Arial, Helvetica, sans-serif; color: #ffffff; font-size: 1rem; line-height: 1.3rem; letter-spacing: 0.025rem; margin-bottom: 5px; } article.detailed-article .article-body .content-summary ul li:last-child, article.detailed-article .article-body .content-summary ol li:last-child { margin-bottom: 0px; } article.detailed-article .article-body .content-summary ul { list-style-image: url('../../../graphics/pc/computing2/general/arrow-white.png'); } article.detailed-article .article-body .content-summary ol li { counter-increment: chapter; } article.detailed-article .article-body .content-summary ol li:before { content: counter(chapter, lower-latin) ". "; color: #ffffff; display: block; position: relative; max-width: 0px; max-height: 0px; left: -1.3rem; } article.detailed-article .article-footer { float: left; } article.detailed-article .article-footer .tags { margin-bottom: 70px; } article.detailed-article .article-footer .tags h4 { font-family: 'Source Sans Pro Bold', Arial, Helvetica, sans-serif; font-size: 1.125rem; color: #222222; letter-spacing: 0.025rem; margin-bottom: 25px; } article.detailed-article .article-footer .tags ul li { display: inline-block; margin-bottom: 10px; } article.detailed-article .article-footer .tags ul li a { text-transform: uppercase; color: #c9c7c7; font-size: 0.938rem; letter-spacing: 0.025rem; } article.detailed-article .article-footer .tags ul li a:hover { color: #608ea8; text-decoration: underline; } article.detailed-article .article-footer .tags ul li:after { content: "-"; margin: 0 2px 0 5px; } article.detailed-article .article-footer .tags ul li:last-child:after { content: ""; } article.detailed-article .article-footer .related-news h4 { font-family: 'Source Sans Pro Semibold', Arial, Helvetica, sans-serif; font-size: 1.125rem; color: #ea7500; letter-spacing: 0.025rem; margin-bottom: 25px; } article.medium { margin-bottom: 31px; float: left; } article.medium .sponsored { width: 100%; display: block; position: absolute; height: 16px; top: 10px; background-color: #FFFFFF; } article.medium .sponsored .text { font-size: 0.625rem; line-height: 16px; margin-right: 5px; color: #4c4c4b; position: absolute; right: 60px; } article.medium .sponsored .logo { background-color: #FFFFFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; margin-top: -7px; margin-right: 9px; width: 40px; padding: 5px 6px; position: absolute; right: 0; } article.medium .sponsored .logo img { width: 100%; } article.medium .image img { width: 100%; } article.medium .videoimage { float: left; position: relative; width: 100%; } article.medium .videoimage:before { content: ""; position: absolute; width: 100%; height: 100%; background: transparent url('../../../graphics/pc/computing2/general/play2.svg') left bottom no-repeat; background-size: auto 30%; } article.medium .videoimage img { width: 100%; } article.medium .category { text-transform: uppercase; display: block; margin-top: 12px; margin-bottom: 12px; margin-left: 7px; color: #ea7500; font-size: 0.750rem; letter-spacing: 0.025rem; } article.medium .title { display: inline-block; margin-left: 7px; margin-top: 14px; } article.medium .title h3 { font-family: 'Source Sans Pro Semibold', Arial, Helvetica, sans-serif; color: #222222; font-size: 1.250rem; letter-spacing: 0.025rem; line-height: 1.1; } article.medium .title h3:hover { color: #608ea8; } article.small { margin-bottom: 27px; float: left; } article.small .sponsored { width: 100%; display: block; position: absolute; height: 16px; top: 10px; background-color: #FFFFFF; } article.small .sponsored .text { font-size: 0.625rem; line-height: 16px; margin-right: 5px; color: #4c4c4b; position: absolute; right: 60px; } article.small .sponsored .logo { background-color: #FFFFFF; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; margin-top: -7px; margin-right: 9px; width: 40px; padding: 5px 6px; position: absolute; right: 0; } article.small .sponsored .logo img { width: 100%; } article.small .image img { width: 100%; } article.small .videoimage { float: left; position: relative; width: 100%; } article.small .videoimage:before { content: ""; position: absolute; width: 100%; height: 100%; background: transparent url('../../../graphics/pc/computing2/general/play2.svg') left bottom no-repeat; background-size: auto 30%; } article.small .videoimage img { width: 100%; } article.small .category { text-transform: uppercase; display: inline-block; margin-top: 12px; margin-bottom: 12px; margin-left: 7px; color: #ea7500; font-size: 0.750rem; letter-spacing: 0.025rem; } article.small .title { display: block; margin-left: 7px; } article.small .title h3 { font-family: 'Source Sans Pro Semibold', Arial, Helvetica, sans-serif; color: #222222; font-size: 1.125rem; letter-spacing: 0.025rem; line-height: 1.222; } article.small .title h3:hover { color: #608ea8; } aside { } aside.banner-right2 { margin-bottom: 0; } @media (max-width: 768px) { section.component-article .section-container { padding: 0; margin-right: 0; background: none; } section.component-article .sidebar { float: left; clear: both; width: 100%; } section.component-issue { background: none; margin-right: 0; margin-bottom: 40px; padding-right: 0; padding-bottom: 0; } section.component-issue .main-content { background: url('../../../graphics/pc/computing2/general/background_separator_horizontal.png') bottom left repeat-x transparent; margin-bottom: 25px; padding-bottom: 20px; } section.component-issue .main-content .latest-issue { width: 30%; } section.component-issue .main-content .latest-issue .category { font-size: 1.125em; } section.component-issue .main-content .latest-issue .date { font-size: 0.875rem; } section.component-issue .main-content .list-mostread { background: none; width: 66%; padding-left: 2%; margin-left: 2%; } section.component-issue .main-content .list-mostread li:last-child { display: block; } section.component-issue .sidebar { float: left; clear: both; width: 100%; } article { } } @media (max-width: 700px) { section.component-suggestion .section-column { width: 100%; margin-right: 0; } } @media (max-width: 480px) { section.component-suggestion .section-column:last-child { display: none; } section.component-issue .main-content .latest-issue { width: 80%; margin-left: 10%; margin-bottom: 30px; } section.component-issue .main-content .list-mostread { width: 100%; padding-left: 0; margin-left: 0; } article.detailed-article .article-header .sponsored { width: 100%; margin-left: 0; margin-bottom: 20px; } article.detailed-article .article-header .sponsored span { font-size: 0.625rem; } article.detailed-article .article-header .sponsored img { width: 42px; } article.detailed-article .article-header .category { font-size: 0.750rem; } article.detailed-article .article-header .subcategory { font-size: 0.750rem; } article.detailed-article .article-header .title { font-size: 1.875rem; line-height: 2.125rem; } article.detailed-article .article-header .excerpt { font-size: 1.250rem; line-height: 1.500rem; } article.detailed-article .article-metadata .author { border-right: 0; font-size: 1rem; } article.detailed-article .article-metadata .datetime { font-size: 0.875rem; display: block; text-align: left; } article.detailed-article .article-body .content-body blockquote.left { width: 80%; font-size: 1.375rem; line-height: 2.313rem; } article.detailed-article .article-body .content-body blockquote.right, article.detailed-article .article-body .content-body blockquote.left { margin: 50px auto; float: none; } article.detailed-article .article-body .content-body figure.left, article.detailed-article .article-body .content-body figure.right { width: 100%; margin: 0 0 30px 0; } article.detailed-article .article-body .content-body figure.quote { width: 100%; display: block; float: left; margin-top: 0; margin-bottom: 50px; } article.detailed-article .article-body .content-body figure.quote img { width: 100%; float: none; margin-bottom: 50px; } article.detailed-article .article-body .content-body figure.quote blockquote { float: none; margin: 0 auto; } article.detailed-article .article-body .content-summary .image { width: 100%; margin-right: 0; margin-bottom: 20px; } article.detailed-article .article-body .content-summary h3 { width: 100%; } article.detailed-article .article-body .content-summary h4 { width: 100%; } article.detailed-article .article-body .content-summary .content { font-family: 'Source Sans Pro Light', Arial, Helvetica, sans-serif; color: #ffffff; font-size: 1rem; line-height: 1.250rem; letter-spacing: 0.025rem; } article.detailed-article .article-body .content-summary .content p { margin-bottom: 25px; } article.detailed-article .article-body .content-summary .content p.question { margin-bottom: 5px; font-family: 'Source Sans Pro Semibold', Arial, Helvetica, sans-serif; } article.detailed-article .article-body .content-summary .content p:last-child { margin-bottom: 0; } article.detailed-article .article-footer .related-news .section:last-child { display: none; } article.medium { margin-bottom: 40px; } article.medium .title { margin-left: 0; } article.medium .title h3 { font-size: 1.125em; line-height: 1.222; } article.small { margin-bottom: 40px; } article.small .category { margin-top: 10px; margin-left: 0; } article.small .title { margin-left: 0; } article.small:last-child { margin-bottom: 0; } article.detailed-article .article-metadata .tools .print { display: none; } }