.brand-post-native-ad { background-color: #f8f8f8; } .brand-post-article-header { background-color: #f8f8f8; } .brand-post-header { background-color: #f8f8f8; } .brand-post-twitter-feed { background-color: #f8f8f8; } ul#frontpage_latest_list li.brandpost_li { padding: 0; } .brandpost_native { background: #fafafa; padding: 10px 5px; } .brandpost_native * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .brandpost_native .brandpost_logo { display: block; text-indent: -9999px; } .brandpost_native h3 { margin: 10px 0 5px 0 !important;} .brandpost_native p { font-size: 1em; } .brandpost_native footer { clear: both; } .brandpost_native footer:after { content: ""; display: table; clear: both; } .brandpost_native footer .logo { width: 40px; height: 40px; float: left; display: block; position: relative; border: 1px solid #ccc; border-radius: 3px; overflow: hidden; background: #fff; } .brandpost_native footer img { display: block; position: absolute; width: auto; max-width: 90%; top: -100%; bottom: -100%; left: -100%; right: -100%; margin: auto; } .brandpost_native footer h4 { margin: 0 0 0 50px; padding: 3px 0 0 0; font-size: 13px; color: #777; } .brandpost_native footer h4 a { color: #444; } .brandpost_native footer p { margin: 2px 0 0 50px !important; color: #a9a9a9 !important; } #brand-post-in-article-promo { position: relative; margin: 10px 0 35px; } #brand-post-in-article-promo .more { position: absolute; bottom: -25px; right: 0; font-size: 0.8em; line-height: 1.5; color: #bbb; border-bottom: none; } #brand-post-in-article-promo .more:after { content: " ยป";} #brand-post-in-article-promo .more:hover { color: #000; } #brand-post-in-article-promo .brand_post_logo { display: block; text-indent: -9999px; margin-bottom: 4px; width: 82px; height: 13px; background: url(images/brandpost_logo.png) no-repeat 0 0; } #brand-post-in-article-promo .brand_page_logo { display: block; text-indent: -9999px; margin-bottom: 4px; width: 100px; height: 13px; background: url(images/brandpage_logo.png) no-repeat 0 0; } #brand-post-in-article-promo .brandname { color: #000; font-weight: bold; } #brand-post-in-article-promo img.brandpost_logo { margin: 0px; } .brandpost_article, .brandpost_article * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .brandpost_article { margin-bottom: 30px; padding: 20px 30px 20px 135px; background: #f6f7f7 url(images/hub_header.png) repeat 0 0; border-bottom: 1px solid #dcdcdc; position: relative; min-height: 100px; } .brandpost_article .logo { position: absolute; top: 20px; left: 15px; width: 100px; height: 100px; background: #fff; border: 1px solid #dcdcdc; border-radius: 5px; overflow: hidden; } .brandpost_article .logo img { display: block; position: absolute; width: auto; max-width: 90%; top: -100%; bottom: -100%; left: -100%; right: -100%; margin: auto; } .brandpost_article .brandpost_logo { display: block; text-indent: -9999px; margin-bottom: 4px; } .brandpost_article .brandname { display: block; font-size: 2em; font-weight: bold; margin: 0; } .brandpost_article .brandname a { color: #000; } .brandpost_article .brandname+p { margin: 5px 0 0 0; color: #888; font-size: 1.15em; } .brandpost_hub, .brandpost_hub * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .brandpost_hub { margin-bottom: 30px; } .brandpost_hub:after { content: ""; display: table; clear: both; } .brandpost_bar { background: #2b2b2b; padding: 10px 20px; } .brandpost_bar .brandpost_logo { display: inline-block; vertical-align: middle; width: 140px; height: 22px; background: url(images/brandpost_logo_hub.png) no-repeat 0 0; text-indent: -9999px; } .brandpost_bar p { display: inline-block; vertical-align: middle; margin: 0 0 0 10px; color: #858484; font-size: 1.15em; } .brandpost_header { padding: 25px 140px 25px 140px; margin: 0 0 20px 0; background: #f6f7f7 url(images/hub_header.png) repeat 0 0; border-bottom: 1px solid #dcdcdc; position: relative; min-height: 100px; } .brandpost_header .logo { position: absolute; top: 20px; left: 20px; width: 100px; height: 100px; background: #fff; border: 1px solid #dcdcdc; border-radius: 5px; overflow: hidden; } .brandpost_header .logo img { display: block; position: absolute; width: auto; max-width: 90%; top: -100%; bottom: -100%; left: -100%; right: -100%; margin: auto; } .brandpost_header .brandpost_logo { display: block; text-indent: -9999px; margin-bottom: 4px; width: 100px; height: 16px; background: url(images/brandpost_logo_medium.png) no-repeat 0 0; } .brandpost_header h1 { display: block; font-size: 2em; font-weight: bold; margin: 0; padding: 0; } .brandpost_header h1 a { color: #000; } .brandpost_header h1+p { margin: 5px 0 0 0; color: #888; font-size: 1.5em; } .brandpost_header .social { position: absolute; top: 50%; right: 30px; list-style-type: none; margin: -16px 0 0 0; padding: 0; white-space: nowrap; } .brandpost_header .social li { display: inline-block; margin: 0 0 0 6px; padding: 0; } .brandpost_header .social a { display: block; height: 33px; width: 33px; text-indent: -9999px; opacity: .5; } .brandpost_header .social a:hover { opacity: 1; } .brandpost_header .social .facebook { background: url(images/icon_facebook.png) no-repeat 0 0; } .brandpost_header .social .twitter { background: url(images/icon_twitter.png) no-repeat 0 0; } .brandpost_hub .posts { width: 65%; float: left; padding: 0 0 0 20px; } .brandpost_hub .posts article { padding: 20px 0; border-bottom: 1px solid #eee; } .brandpost_hub .posts article:after { content: ""; display: table; clear: both; } .brandpost_hub .posts article img { width: 150px; display: block; float: left; } .brandpost_hub .posts article h3, .brandpost_hub .posts article p { margin: 0 0 0 170px; } .brandpost_hub .posts article h3 { margin-bottom: 10px; font-size: 1.5em; line-height: 1.3; } .brandpost_hub .posts article p { font-size: 1.1em; color: #555; line-height: 1.5; } .brandpost_hub .side { width: 35%; float: left; padding: 0 20px; margin: -20px 0 0 0; } .brandpost_hub .side .boombox, .brandpost_hub .side aside { margin: 20px 0; } .brandpost_hub .side aside.whitepapers { padding: 10px; background: #fbfbfb; border: 1px solid #e5e5e5; border-radius: 5px; } .brandpost_hub .side aside.whitepapers h2 { padding: 5px 0 10px 0; margin: 0; font-size: 1.25em; border-bottom: 1px solid #000; } body.brandpost_body #site_columns_main { max-width: 1080px; display: block; padding: 0; margin: 5px auto 0 auto; float: none; } body.brandpost_body #site_columns:before { display: none; } .brandpost_native { margin: 0 0 25px 0; } .brandpost_wp_list { list-style-type: none; padding: 0; margin: 0; } .brandpost_wp_list li { min-height: 3.1em; padding: 10px 0; margin: 0; position: relative; border-top: 1px solid #eeeeee; -webkit-transition: opacity .1s ease-in; -moz-transition: opacity .1s ease-in; -o-transition: opacity .1s ease-in; transition: opacity .1s ease-in; } .brandpost_wp_list li:first-child { border: none; } .brandpost_wp_list li:after { content: ""; display: table; clear: both; } .brandpost_wp_list .image { overflow: hidden; border-radius: 1px; display: inline-block; width: 40px; margin: 0 -55px 0 0; vertical-align: middle; box-shadow: 0px 1px 1px rgba(0,0,0,.3); } .brandpost_wp_list .image.empty { background: url(images/placeholder.png) no-repeat 50% 50%; } .brandpost_wp_list img { width: 100%; display: block; } .brandpost_wp_list h3 { font-weight: normal; font-size: 1em; display: inline-block; vertical-align: middle; margin: 0; line-height: 1.3; } .brandpost_wp_list a { color: #555; } .brandpost_wp_list .image+h3 { margin:0 0 0 65px; } .brandpost_wp_list:hover li:hover a { color: #000; } .brandpost_wp_list .num { display: inline-block; font-family: "Oswald", sans-serif; width: 25px; margin: 0 -25px 0 0; line-height: 25px; width: 25px; vertical-align: middle; text-align: center; color: #168ec5; font-size: 1.4em; } .brandpost_wp_list .num+h3 { margin: 0 0 0 32px; } /*.brandpost_wp_list.whitepapers .image { overflow: hidden; border-radius: 1px; width: 40px; float: none; border: none; box-shadow: 0px 1px 1px rgba(0,0,0,.3); margin: 0 -55px 0 0; }*/ /*.brandpost_wp_list.whitepapers li { min-height: 3.1em; padding: 10px 0; }*/ /*.brandpost_wp_list.whitepapers:hover li:hover { opacity: 1; }*/ /*.brandpost_wp_list.whitepapers .image+h3 { margin: 0 0 0 65px; }*/ .twitter-widget .twitter-feed { list-style-type: none; padding: 0; margin: 0 0 0 0; line-height: 1.5; } .twitter-widget .twitter-feed li { padding: 15px 15px 14px 75px; margin: 0; border-top: 1px dotted #ccc; min-height: 35px; position: relative; } .twitter-widget .twitter-feed li:first-child { border: none; } .twitter-widget .twitter-feed img { position: absolute; top: 15px; left: 10px; border: none; width: 48px; border-radius: 3px; } .twitter-widget .twitter-feed h3 { margin: 0; padding: 0; } .twitter-widget .twitter-feed p { margin: 0; padding: 0; font-size: 12px; color: #555; font-style: normal; line-height: 1.5; } .twitter-widget .twitter-feed p b { color: #000; font-size: 13px; display: block; } .twitter-widget .twitter-feed .date { color: #bbb; font-size: 10px; margin: 5px 0 0 0; } .twitter-widget .twitter-feed .delete { color: #bf1b1e; } @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) { .brandpost_native .brandpost_logo, #brand-post-in-article-promo .brandpost_logo { background-size: 82px 13px; } .brandpost_article .brandpost_logo { background-size: 100px 16px; } .brandpost_bar .brandpost_logo { background-size: 140px 22px; } .brandpost_header .social .facebook { background-size: 32px 32px; background-image: url(images/icon_facebook@2x.png); } .brandpost_header .social .twitter { background-size: 32px 32px; background-image: url(images/icon_twitter@2x.png); } } .brand_post_listing .posts { width: 90%; float: left; padding: 0 0 0 20px; } .brand_post_listing .posts article { padding: 20px 0; border-bottom: 1px solid #eee; } .brand_post_listing .posts article:after { content: ""; display: table; clear: both; } .brand_post_listing .posts article img { width: 80px; display: block; float: left; margin: 10px} .brand_post_listing .posts article h3, .posts article p { margin: 0 0 0 120px; } .brand_post_listing .posts article h3 { margin-bottom: 10px; font-size: 1.5em; line-height: 1.3; } @media only screen and (max-width: 768px) { .brandpost_hub .posts { width: auto; float: none; padding: 20px; } .brandpost_hub .side { display: none; } } .brandpost_article_sponsored_content{ -webkit-display: flex; -moz-display: flex; -ms-display: flex; -o-display: flex; display: flex; -webkit-flex-wrap: wrap; -moz-flex-wrap: wrap; -ms-flex-wrap: wrap; -o-flex-wrap: wrap; flex-wrap: wrap; border-bottom: 1px solid #eee; padding-bottom: 10px; } .brandpost_article_sponsored_content h3{ -webkit-box-flex: 1 1 auto; -moz-box-flex: 1 1 auto; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; margin: 0; } .brandpost_article_sponsored_content .sponsored_tag{ -webkit-box-flex: 0 0 auto; -moz-box-flex: 0 0 auto; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin: 0; color: #f8971d; -webkit-align-self: center; -moz-align-self: center; -ms-align-self: center; align-self: center; padding: 6px; font-weight: bold; text-transform : uppercase; }