/* Extracted SimX platform components, every selector scoped under .sim-embed. Platform CSS is verbatim; only selectors are prefixed, so nothing here reaches the page around it. Provenance comments from the extraction are preserved. */ /* ==================== twitcher ==================== */ /* ========================================================================== TWITCHER - real platform styles, compiled from LESS by hand ========================================================================== Primary source : O8.SOCOM.Server/Content/socom/twitter-simulation.less Also drawn from : Content/socom/simulation.less (.account-logo, .html-content-container) Content/socom/window.less (.window-content-container, .border-box-sizing) Content/socom/varibles.less (all @variables below) Content/bootstrap/*.less (grid, normalize, .btn, headings) Content/theme/less/general.less (body + heading font) Content/theme/less/block-panels.less (.cl-mcont .row margin-top) Content/theme/less/elements/buttons.less Content/angular-material.layout-attributes.css (layout/flex attrs) Content/fonts/font-awesome-4/* (icon glyphs) LESS variables resolved to their declared values (Content/socom/varibles.less unless noted): @twitter-background-color #f5f7fb (declared in twitter-simulation.less) @twitter-brand #30A9F4 (declared in twitter-simulation.less) @window-grey #a7adba @sidebar-color #292828 @gray-light #777777 (bootstrap: lighten(#000, 46.7%)) @primary-color #2eb6d1 Declared but not needed by this snippet, for reference: @brand-danger -> @alert-red #ea6153 (.twitter-warning, hacked state) @brand-success -> @alert-green #00AD5D (.retweeted badge) SCOPING NOTE. In the platform, the grid / button / FontAwesome / heading rules are global (bootstrap, the theme and font-awesome are loaded app wide). They are reproduced here prefixed with .twitter-feed-window so dropping this file into the landing page cannot restyle anything else. The cascade result inside the component is unchanged - each block records the selector it really has. ========================================================================== */ /* -------------------------------------------------------------------------- box-sizing real: Content/bootstrap/scaffolding.less * , *:before , *:after real: Content/socom/window.less .k-widget .border-box-sizing , .k-widget .border-box-sizing * (the .k-widget ancestor is the Kendo window wrapper, which this snippet does not reproduce, so the rule is written against .border-box-sizing directly) -------------------------------------------------------------------------- */ .sim-embed .border-box-sizing, .sim-embed .border-box-sizing *, .sim-embed .border-box-sizing *::before, .sim-embed .border-box-sizing *::after { box-sizing: border-box; }/* -------------------------------------------------------------------------- inherited page defaults - Content/theme/less/general.less body { } The snippet root stands in for . 'Open Sans' is pulled from Google Fonts by Views/Home/Index.cshtml; with no webfont it falls back to sans-serif. -------------------------------------------------------------------------- */ .sim-embed .bg-twitter { font-family: 'Open Sans', sans-serif; font-size: 12px; color: #555; }/* Content/socom/twitter-simulation.less .bg-twitter */ .sim-embed .bg-twitter { background-color: #f5f7fb !important; }/* -------------------------------------------------------------------------- Angular Material layout attributes real: Content/angular-material.layout-attributes.css (v1.1.1), unscoped -------------------------------------------------------------------------- */ .sim-embed [layout], .sim-embed [layout="column"], .sim-embed [layout="row"] { box-sizing: border-box; display: -webkit-flex; display: flex; }.sim-embed [layout="column"] { -webkit-flex-direction: column; flex-direction: column; }.sim-embed [layout="row"] { -webkit-flex-direction: row; flex-direction: row; }.sim-embed [flex] { -webkit-flex: 1; flex: 1; box-sizing: border-box; }.sim-embed [layout-fill] { margin: 0; width: 100%; min-height: 100%; height: 100%; }.sim-embed [layout-padding] { padding: 8px; }/* -------------------------------------------------------------------------- normalize / scaffolding subset - Content/bootstrap/normalize.less + scaffolding.less real selectors: img / button / textarea (global) -------------------------------------------------------------------------- */ .sim-embed .twitter-feed-window img { vertical-align: middle; }.sim-embed .twitter-feed-window button, .sim-embed .twitter-feed-window textarea { color: inherit; font: inherit; margin: 0; }.sim-embed .twitter-feed-window button { overflow: visible; text-transform: none; -webkit-appearance: button; cursor: pointer; }.sim-embed .twitter-feed-window textarea { overflow: auto; }/* -------------------------------------------------------------------------- float helpers - Content/bootstrap/utilities.less (.pull-left/.pull-right) and Content/fonts/font-awesome-4/bordered-pulled.less (.fa.pull-*) real selectors: .pull-left , .pull-right , .fa.pull-left , .fa.pull-right -------------------------------------------------------------------------- */ .sim-embed .twitter-feed-window .pull-right { float: right; }.sim-embed .twitter-feed-window .pull-left { float: left; }.sim-embed .twitter-feed-window .fa.pull-left { margin-right: .3em; }.sim-embed .twitter-feed-window .fa.pull-right { margin-left: .3em; }/* -------------------------------------------------------------------------- grid subset - Content/bootstrap/grid.less, @grid-gutter-width: 30px real selectors: .container , .row , .col-xs-3 , .col-xs-9 , .col-xs-12 -------------------------------------------------------------------------- */ .sim-embed .twitter-feed-window .container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; }.sim-embed .twitter-feed-window .row { margin-left: -15px; margin-right: -15px; }/* .clearfix() from Content/bootstrap/mixins/clearfix.less, applied by .container-fixed() and .make-row() */ .sim-embed .twitter-feed-window .container::before, .sim-embed .twitter-feed-window .container::after, .sim-embed .twitter-feed-window .row::before, .sim-embed .twitter-feed-window .row::after { content: " "; display: table; }.sim-embed .twitter-feed-window .container::after, .sim-embed .twitter-feed-window .row::after { clear: both; }.sim-embed .twitter-feed-window .col-xs-3, .sim-embed .twitter-feed-window .col-xs-9, .sim-embed .twitter-feed-window .col-xs-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; float: left; }.sim-embed .twitter-feed-window .col-xs-3 { width: 25%; }.sim-embed .twitter-feed-window .col-xs-9 { width: 75%; }.sim-embed .twitter-feed-window .col-xs-12 { width: 100%; }/* Content/theme/less/block-panels.less .cl-mcont .row - the whole app renders inside .cl-mcont (Views/Home/Index.cshtml), so every .row in the feed carries this 20px top margin. twitter-simulation.less only cancels it for the admin view (.twitter-admin-view .row) and the comment modal, never for the participant feed, which is why the tweet rows sit as far apart as they do. */ .sim-embed .twitter-feed-window .row { margin-top: 20px; }/* -------------------------------------------------------------------------- headings real: Content/bootstrap/type.less (sizes, margins, line-height) + Content/theme/less/general.less (font-family, font-weight:300) + Content/Site.less (h1..h6 { font-weight: 400 } wins, imported last) @font-size-base 14px -> h2 floor(14*2.15)=30px, h4 ceil(14*1.25)=18px, h5 14px, h6 ceil(14*0.85)=12px; @line-height-computed 20px -------------------------------------------------------------------------- */ .sim-embed .twitter-feed-window h2, .sim-embed .twitter-feed-window h4, .sim-embed .twitter-feed-window h5, .sim-embed .twitter-feed-window h6 { font-family: 'Open Sans', sans-serif; font-weight: 400; line-height: 1.1; color: inherit; }.sim-embed .twitter-feed-window h2 { font-size: 30px; margin-top: 20px; margin-bottom: 10px; }.sim-embed .twitter-feed-window h4, .sim-embed .twitter-feed-window h5, .sim-embed .twitter-feed-window h6 { margin-top: 10px; margin-bottom: 10px; }.sim-embed .twitter-feed-window h4 { font-size: 18px; }.sim-embed .twitter-feed-window h5 { font-size: 14px; }.sim-embed .twitter-feed-window h6 { font-size: 12px; }/* -------------------------------------------------------------------------- buttons real: Content/bootstrap/buttons.less .btn (@padding-base-vertical 6px, @padding-base-horizontal 12px, @font-size-base 14px, @line-height-base 1.428571429, @btn-border-radius-base 4px) then Content/theme/less/elements/buttons.less overrides .btn and .btn-primary (@primary-color #2eb6d1) -------------------------------------------------------------------------- */ .sim-embed .twitter-feed-window .btn { display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }.sim-embed .twitter-feed-window .btn { border-color: #CCCCCC; border-radius: 0; -webkit-border-radius: 0; outline: none; margin-bottom: 5px !important; margin-left: 5px; font-size: 13px; padding: 7px 11px; }.sim-embed .twitter-feed-window .btn-primary, .sim-embed .twitter-feed-window .btn-primary:focus { background-color: #2eb6d1; border-color: transparent; color: #fff; }/* -------------------------------------------------------------------------- FontAwesome 4 real: Content/fonts/font-awesome-4/core.less + larger.less + icons.less The webfont is not shipped with this snippet, so each .fa-*::before renders the SAME glyph outline as a CSS mask. The path data is copied verbatim from Content/fonts/font-awesome-4/fonts/fontawesome-webfont.svg (units-per-em 1792, ascent 1536, descent -256), so proportions and advance widths match the real font exactly. background-color:currentColor keeps the colour under the control of the real .tweet i / .icon:hover rules below. -------------------------------------------------------------------------- */ .sim-embed .twitter-feed-window .fa { display: inline-block; /* real declaration; the FontAwesome family is unavailable here but the line-height:1 from this shorthand is load bearing */ font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }.sim-embed .twitter-feed-window .fa-2x { font-size: 2em; }.sim-embed .twitter-feed-window .fa::before { content: ""; display: inline-block; box-sizing: content-box; height: 1em; vertical-align: -0.1429em; /* descent 256/1792em, matches the real baseline */ background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center; -webkit-mask-size: auto 100%; mask-size: auto 100%; }/* -------------------------------------------------------------------------- Content/socom/window.less real selectors are unscoped: .window-content-container and .window-content-container .window-content-inner-container -------------------------------------------------------------------------- */ .sim-embed .bg-twitter .window-content-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }.sim-embed .bg-twitter .window-content-container .window-content-inner-container { overflow: auto; height: 100%; }/* -------------------------------------------------------------------------- Content/socom/simulation.less (global selectors in the platform) -------------------------------------------------------------------------- */ .sim-embed .twitter-feed-window .html-content-container img { max-width: 100%; max-height: 100%; }.sim-embed .twitter-feed-window .account-logo { max-width: 60px; }.sim-embed .twitter-feed-window .account-logo-default { background-color: lightgrey; padding: 9px 10px; }/* ========================================================================== Content/socom/twitter-simulation.less - nesting resolved, variables inlined ========================================================================== */ .sim-embed .twitter-feed-window { font-family: Arial, sans-serif !important; background-color: #f5f7fb; overflow: hidden; }.sim-embed .twitter-feed-window .twitter-feed-container { height: 100%; padding: 0; padding-right: 15px; padding-bottom: 15px; width: 100%; overflow-y: auto; }.sim-embed .twitter-feed-window .container { width: 100%; }.sim-embed .twitter-feed-window .header { height: 30px; background-color: white; }.sim-embed .twitter-feed-window .header .twitcher-logo { overflow: hidden; width: 25px; top: 5px; position: absolute; }.sim-embed .twitter-feed-window .icon { color: #30A9F4; font-size: 28px; margin-left: 20px; }.sim-embed .twitter-feed-window .window-content { padding: 0; }.sim-embed .twitter-feed-window .banner-container { background: #30A9F4; color: white; }.sim-embed .twitter-feed-window .banner { width: 100%; min-height: 50px; max-height: 500px; }.sim-embed .twitter-feed-window .banner h2 { padding: 8px 20px 8px 8px; }.sim-embed .twitter-feed-window .stats-container { background-color: white; text-align: center; padding: 5px 0; }.sim-embed .twitter-feed-window .stats-container .stats { margin-right: 30px; }.sim-embed .twitter-feed-window .stats-container .stats .stats-heading { font-size: 10px; color: #777777; }.sim-embed .twitter-feed-window .stats-container .stats .stats-value { font-weight: 600; }.sim-embed .twitter-feed-window .account-info { border-radius: 5px; background: white; margin: 10px 5px; padding: 10px; border: 1px solid rgba(0,0,0,0.1); }.sim-embed .twitter-feed-window .account-info .trend-header { font-weight: 500; }.sim-embed .twitter-feed-window .account-info .trend .trend-name { color: #30A9F4; font-weight: bold; }.sim-embed .twitter-feed-window .feed { margin-top: 10px; margin-bottom: 20px; }.sim-embed .twitter-feed-window .feed .row { margin-bottom: 5px; }.sim-embed .twitter-feed-window .feed .tweet { font-size: 14px; line-height: 18px; background-color: white; padding: 9px 12px; border-bottom: 1px solid #a7adba; }.sim-embed .twitter-feed-window .feed .tweet .avatar { margin-right: 10px; }/* this beats .twitter-feed-window .icon and .fa-2x on specificity, so every icon inside a tweet - including the fallback avatar glyph - is 16px and #a7adba, not 28px twitcher blue */ .sim-embed .twitter-feed-window .feed .tweet i { font-size: 16px; color: #a7adba; }.sim-embed .twitter-feed-window .feed .tweet .account-name { font-weight: 600; }.sim-embed .twitter-feed-window .feed .tweet .account-handle { color: #777777; }.sim-embed .twitter-feed-window .feed .tweet .controls { margin-top: 10px; font-family: Arial, sans-serif; }.sim-embed .twitter-feed-window .feed .tweet .controls .icon { margin: 0 40px 0 0; }.sim-embed .twitter-feed-window .feed .tweet .controls .icon:hover { cursor: pointer; color: #292828; }.sim-embed .twitter-feed-window .feed .tweet .controls .icon::before { padding-right: 5px; }.sim-embed .twitter-feed-window .reply { margin-top: 20px; margin-bottom: 10px; }.sim-embed .twitter-feed-window .reply textarea { padding: 10px; font-size: 14px; line-height: 18px; min-height: 75px; width: 100%; margin-bottom: 5px; }.sim-embed .twitter-feed-window .reply .character-count { font-size: 14px; margin: 10px 5px; color: #777777; }.sim-embed .twitter-feed-window .reply .btn { border-radius: 5px; background: #30A9F4; }.sim-embed .twitter-feed-window .list-more-controls { margin: 20px 0; }.sim-embed .twitter-feed-window .list-more-controls .tw-more-btn { width: 100%; background: #30A9F4; color: white; padding: 5px 11px; border: none; }/* ========================================================================== SNIPPET ONLY - not in the platform LESS. Three stand-ins, nothing else. The live window is 800x550 (min 700x500), set by in twitterFeed.html and applied by Kendo as an inline style on the window wrapper, so it is not represented in any stylesheet. Give the snippet a comparable width or the 25% / 75% grid gets cramped. ========================================================================== */ /* In the platform .window-content-container is position:absolute inside a sized Kendo window; here it only needs to be the positioning context for .twitcher-logo (position:absolute; top:5px) and let content set the height. */ .sim-embed .bg-twitter .window-content-container { position: relative; height: auto; }.sim-embed .bg-twitter .window-content-container .window-content-inner-container { height: auto; overflow: visible; }/* real selector is .window-container[ng-click] (Content/socom/window.less); the ng-click attribute was stripped from the snippet */ .sim-embed .bg-twitter .window-container { cursor: default; }/* ========================================================================== FontAwesome glyph masks - generated from the real fontawesome-webfont.svg ========================================================================== */ /*fa-reply advance 1792/1792em = 1.0000em*/ .sim-embed .twitter-feed-window .fa-reply::before {width:1.0000em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201792%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M1792%20416q0%20-166%20-127%20-451q-3%20-7%20-10.5%20-24t-13.5%20-30t-13%20-22q-12%20-17%20-28%20-17q-15%200%20-23.5%2010t-8.5%2025q0%209%202.5%2026.5t2.5%2023.5q5%2068%205%20123q0%20101%20-17.5%20181t-48.5%20138.5t-80%20101t-105.5%2069.5t-133%2042.5t-154%2021.5t-175.5%206h-224v-256q0%20-26%20-19%20-45t-45%20-19t-45%2019%20l-512%20512q-19%2019%20-19%2045t19%2045l512%20512q19%2019%2045%2019t45%20-19t19%20-45v-256h224q713%200%20875%20-403q53%20-134%2053%20-333z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201792%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M1792%20416q0%20-166%20-127%20-451q-3%20-7%20-10.5%20-24t-13.5%20-30t-13%20-22q-12%20-17%20-28%20-17q-15%200%20-23.5%2010t-8.5%2025q0%209%202.5%2026.5t2.5%2023.5q5%2068%205%20123q0%20101%20-17.5%20181t-48.5%20138.5t-80%20101t-105.5%2069.5t-133%2042.5t-154%2021.5t-175.5%206h-224v-256q0%20-26%20-19%20-45t-45%20-19t-45%2019%20l-512%20512q-19%2019%20-19%2045t19%2045l512%20512q19%2019%2045%2019t45%20-19t19%20-45v-256h224q713%200%20875%20-403q53%20-134%2053%20-333z'/%3E%3C/svg%3E");}/*fa-retweet advance 1920/1792em = 1.0714em*/ .sim-embed .twitter-feed-window .fa-retweet::before {width:1.0714em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201920%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M1280%2032q0%20-13%20-9.5%20-22.5t-22.5%20-9.5h-960q-8%200%20-13.5%202t-9%207t-5.5%208t-3%2011.5t-1%2011.5v13v11v160v416h-192q-26%200%20-45%2019t-19%2045q0%2024%2015%2041l320%20384q19%2022%2049%2022t49%20-22l320%20-384q15%20-17%2015%20-41q0%20-26%20-19%20-45t-45%20-19h-192v-384h576q16%200%2025%20-11l160%20-192q7%20-11%207%20-21%20zM1920%20448q0%20-24%20-15%20-41l-320%20-384q-20%20-23%20-49%20-23t-49%2023l-320%20384q-15%2017%20-15%2041q0%2026%2019%2045t45%2019h192v384h-576q-16%200%20-25%2012l-160%20192q-7%209%20-7%2020q0%2013%209.5%2022.5t22.5%209.5h960q8%200%2013.5%20-2t9%20-7t5.5%20-8t3%20-11.5t1%20-11.5v-13v-11v-160v-416h192q26%200%2045%20-19t19%20-45z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201920%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M1280%2032q0%20-13%20-9.5%20-22.5t-22.5%20-9.5h-960q-8%200%20-13.5%202t-9%207t-5.5%208t-3%2011.5t-1%2011.5v13v11v160v416h-192q-26%200%20-45%2019t-19%2045q0%2024%2015%2041l320%20384q19%2022%2049%2022t49%20-22l320%20-384q15%20-17%2015%20-41q0%20-26%20-19%20-45t-45%20-19h-192v-384h576q16%200%2025%20-11l160%20-192q7%20-11%207%20-21%20zM1920%20448q0%20-24%20-15%20-41l-320%20-384q-20%20-23%20-49%20-23t-49%2023l-320%20384q-15%2017%20-15%2041q0%2026%2019%2045t45%2019h192v384h-576q-16%200%20-25%2012l-160%20192q-7%209%20-7%2020q0%2013%209.5%2022.5t22.5%209.5h960q8%200%2013.5%20-2t9%20-7t5.5%20-8t3%20-11.5t1%20-11.5v-13v-11v-160v-416h192q26%200%2045%20-19t19%20-45z'/%3E%3C/svg%3E");}/*fa-comment advance 1792/1792em = 1.0000em*/ .sim-embed .twitter-feed-window .fa-comment::before {width:1.0000em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201792%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M1792%20640q0%20-174%20-120%20-321.5t-326%20-233t-450%20-85.5q-70%200%20-145%208q-198%20-175%20-460%20-242q-49%20-14%20-114%20-22q-17%20-2%20-30.5%209t-17.5%2029v1q-3%204%20-0.5%2012t2%2010t4.5%209.5l6%209t7%208.5t8%209q7%208%2031%2034.5t34.5%2038t31%2039.5t32.5%2051t27%2059t26%2076q-157%2089%20-247.5%20220t-90.5%20281%20q0%20130%2071%20248.5t191%20204.5t286%20136.5t348%2050.5q244%200%20450%20-85.5t326%20-233t120%20-321.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201792%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M1792%20640q0%20-174%20-120%20-321.5t-326%20-233t-450%20-85.5q-70%200%20-145%208q-198%20-175%20-460%20-242q-49%20-14%20-114%20-22q-17%20-2%20-30.5%209t-17.5%2029v1q-3%204%20-0.5%2012t2%2010t4.5%209.5l6%209t7%208.5t8%209q7%208%2031%2034.5t34.5%2038t31%2039.5t32.5%2051t27%2059t26%2076q-157%2089%20-247.5%20220t-90.5%20281%20q0%20130%2071%20248.5t191%20204.5t286%20136.5t348%2050.5q244%200%20450%20-85.5t326%20-233t120%20-321.5z'/%3E%3C/svg%3E");}/*fa-heart advance 1792/1792em = 1.0000em*/ .sim-embed .twitter-feed-window .fa-heart::before {width:1.0000em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201792%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M896%20-128q-26%200%20-44%2018l-624%20602q-10%208%20-27.5%2026t-55.5%2065.5t-68%2097.5t-53.5%20121t-23.5%20138q0%20220%20127%20344t351%20124q62%200%20126.5%20-21.5t120%20-58t95.5%20-68.5t76%20-68q36%2036%2076%2068t95.5%2068.5t120%2058t126.5%2021.5q224%200%20351%20-124t127%20-344q0%20-221%20-229%20-450l-623%20-600%20q-18%20-18%20-44%20-18z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201792%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M896%20-128q-26%200%20-44%2018l-624%20602q-10%208%20-27.5%2026t-55.5%2065.5t-68%2097.5t-53.5%20121t-23.5%20138q0%20220%20127%20344t351%20124q62%200%20126.5%20-21.5t120%20-58t95.5%20-68.5t76%20-68q36%2036%2076%2068t95.5%2068.5t120%2058t126.5%2021.5q224%200%20351%20-124t127%20-344q0%20-221%20-229%20-450l-623%20-600%20q-18%20-18%20-44%20-18z'/%3E%3C/svg%3E");}/*fa-ellipsis-h advance 1408/1792em = 0.7857em*/ .sim-embed .twitter-feed-window .fa-ellipsis-h::before {width:0.7857em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201408%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M384%20800v-192q0%20-40%20-28%20-68t-68%20-28h-192q-40%200%20-68%2028t-28%2068v192q0%2040%2028%2068t68%2028h192q40%200%2068%20-28t28%20-68zM896%20800v-192q0%20-40%20-28%20-68t-68%20-28h-192q-40%200%20-68%2028t-28%2068v192q0%2040%2028%2068t68%2028h192q40%200%2068%20-28t28%20-68zM1408%20800v-192q0%20-40%20-28%20-68t-68%20-28h-192%20q-40%200%20-68%2028t-28%2068v192q0%2040%2028%2068t68%2028h192q40%200%2068%20-28t28%20-68z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201408%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M384%20800v-192q0%20-40%20-28%20-68t-68%20-28h-192q-40%200%20-68%2028t-28%2068v192q0%2040%2028%2068t68%2028h192q40%200%2068%20-28t28%20-68zM896%20800v-192q0%20-40%20-28%20-68t-68%20-28h-192q-40%200%20-68%2028t-28%2068v192q0%2040%2028%2068t68%2028h192q40%200%2068%20-28t28%20-68zM1408%20800v-192q0%20-40%20-28%20-68t-68%20-28h-192%20q-40%200%20-68%2028t-28%2068v192q0%2040%2028%2068t68%2028h192q40%200%2068%20-28t28%20-68z'/%3E%3C/svg%3E");}/*fa-user advance 1408/1792em = 0.7857em*/ .sim-embed .twitter-feed-window .fa-user::before {width:0.7857em;-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201408%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M1408%20131q0%20-120%20-73%20-189.5t-194%20-69.5h-874q-121%200%20-194%2069.5t-73%20189.5q0%2053%203.5%20103.5t14%20109t26.5%20108.5t43%2097.5t62%2081t85.5%2053.5t111.5%2020q9%200%2042%20-21.5t74.5%20-48t108%20-48t133.5%20-21.5t133.5%2021.5t108%2048t74.5%2048t42%2021.5q61%200%20111.5%20-20t85.5%20-53.5t62%20-81%20t43%20-97.5t26.5%20-108.5t14%20-109t3.5%20-103.5zM1088%201024q0%20-159%20-112.5%20-271.5t-271.5%20-112.5t-271.5%20112.5t-112.5%20271.5t112.5%20271.5t271.5%20112.5t271.5%20-112.5t112.5%20-271.5z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201408%201792'%3E%3Cpath%20transform='translate(0,1536)%20scale(1,-1)'%20d='M1408%20131q0%20-120%20-73%20-189.5t-194%20-69.5h-874q-121%200%20-194%2069.5t-73%20189.5q0%2053%203.5%20103.5t14%20109t26.5%20108.5t43%2097.5t62%2081t85.5%2053.5t111.5%2020q9%200%2042%20-21.5t74.5%20-48t108%20-48t133.5%20-21.5t133.5%2021.5t108%2048t74.5%2048t42%2021.5q61%200%20111.5%20-20t85.5%20-53.5t62%20-81%20t43%20-97.5t26.5%20-108.5t14%20-109t3.5%20-103.5zM1088%201024q0%20-159%20-112.5%20-271.5t-271.5%20-112.5t-271.5%20112.5t-112.5%20271.5t112.5%20271.5t271.5%20112.5t271.5%20-112.5t112.5%20-271.5z'/%3E%3C/svg%3E");} /* ==================== facespace ==================== */ /* ========================================================================== FaceSpace (participant Facebook clone) - real platform styles, hand-compiled from LESS for the static landing-page snippet. Pairs with facespace.html. SOURCES O8.SOCOM.Server/Content/socom/facebook-simulation.less (the module's styles) O8.SOCOM.Server/Content/socom/simulation.less (.account-logo, .account-logo-default, .html-content-container img) O8.SOCOM.Server/Content/socom/window.less (.window-content, .border-box-sizing) O8.SOCOM.Server/Content/socom/varibles.less (LESS variable values) O8.SOCOM.Server/Content/bootstrap/variables.less (LESS variable values) O8.SOCOM.Server/Content/bootstrap/* (grid / btn / normalize subset) O8.SOCOM.Server/Content/theme/less/block-panels.less (.cl-mcont .row margin-top) O8.SOCOM.Server/Content/theme/less/elements/buttons.less (.btn overrides) O8.SOCOM.Server/Content/theme/less/general.less (body base metrics) O8.SOCOM.Server/Content/fonts/font-awesome-4/* (icon base classes + glyphs) O8.SOCOM.Server/Content/angular-material.layout-attributes.css (layout/flex attributes) LESS VARIABLES RESOLVED (looked up, not guessed) @facebook-background-color #eaebef facebook-simulation.less:1 @facebook-brand #264484 facebook-simulation.less:2 @facebook-light-gray #f6f7fa facebook-simulation.less:3 @facebook-border rgb(221, 223, 226) facebook-simulation.less:4 @gray-light #777 bootstrap/variables.less:14 (lighten(#000, 46.7%)) @gray-lighter #eee bootstrap/variables.less:15 (lighten(#000, 93.5%)) @fa-inverse #fff font-awesome-4/variables.less:11 SUBSTITUTIONS (see facespace.html header too) 1. FontAwesome glyphs. The platform renders .fa-* through the FontAwesome webfont. A webfont is not self-contained, so each .fa-* class used here draws the SAME glyph outline, lifted straight out of Content/fonts/font-awesome-4/fonts/fontawesome-webfont.svg, as a CSS mask. Colour still comes from the real rules via currentColor, and the box matches the font metrics (units-per-em 1792, ascent 1536). 2. box-sizing: border-box comes from bootstrap's global reset plus ".k-widget .border-box-sizing *" (window.less). Both are re-scoped under .cl-mcont here so the snippet cannot leak into the host page, and so it does not need Kendo. 3. Base font metrics (12px / 1.428571429) are inherited from the app's (theme/less/general.less + bootstrap). They are pinned on .cl-mcont here for the same reason. .cl-mcont's own "margin-top: 64px" (navbar offset, Site.less) is dropped as irrelevant. 4. Kendo window chrome (title bar, .window-content-container) is NOT included - the landing page supplies its own frame. 5. Every rule below is prefixed with ":where(.cl-mcont) " - .cl-mcont being the app's own content root and this snippet's outermost element - so that the shared class names the platform inherits from bootstrap / the theme / FontAwesome (.container, .row, .col-xs-*, .btn, .pull-left, .fa) cannot leak out and restyle the landing page. :where() carries zero specificity, so every selector keeps exactly the weight it has in the running app and the real cascade is reproduced unchanged. Rules that already name .cl-mcont are the app root rules themselves and are left alone. ========================================================================== */ /* --- scoped resets ------------------------------------------------------- */ /* bootstrap: *, *:before, *:after { box-sizing: border-box } - scoped */ .sim-embed .cl-mcont, .sim-embed .cl-mcont *, .sim-embed .cl-mcont *:before, .sim-embed .cl-mcont *:after { box-sizing: border-box; }/* window.less: .k-widget .border-box-sizing, .k-widget .border-box-sizing * */ .sim-embed :where(.cl-mcont) .border-box-sizing, .sim-embed :where(.cl-mcont) .border-box-sizing * { box-sizing: border-box; }/* theme/less/general.less body { font-size: 12px; color: #555 } + bootstrap body { line-height: 1.428571429 }. Inherited by the module in the real app. */ .sim-embed .cl-mcont { position: relative; padding: 0; font-size: 12px; line-height: 1.428571429; color: #555; }/* bootstrap normalize subset */ .sim-embed :where(.cl-mcont) img { vertical-align: middle; border: 0; }.sim-embed :where(.cl-mcont) button, .sim-embed :where(.cl-mcont) textarea { color: inherit; font: inherit; margin: 0; }.sim-embed :where(.cl-mcont) textarea { overflow: auto; }/* bootstrap type.less + Site.less (h1..h6 { font-weight: 400 }) */ .sim-embed :where(.cl-mcont) h5 { font-family: inherit; font-weight: 400; line-height: 1.1; color: inherit; font-size: 14px; margin-top: 10px; margin-bottom: 10px; }/* --- bootstrap grid + helpers (only the classes this snippet uses) ------- */ .sim-embed :where(.cl-mcont) .container { padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; }.sim-embed :where(.cl-mcont) .row { margin-right: -15px; margin-left: -15px; }.sim-embed :where(.cl-mcont) .container:before, .sim-embed :where(.cl-mcont) .container:after, .sim-embed :where(.cl-mcont) .row:before, .sim-embed :where(.cl-mcont) .row:after { content: " "; display: table; }.sim-embed :where(.cl-mcont) .container:after, .sim-embed :where(.cl-mcont) .row:after { clear: both; }.sim-embed :where(.cl-mcont) .col-xs-1, .sim-embed :where(.cl-mcont) .col-xs-3, .sim-embed :where(.cl-mcont) .col-xs-9, .sim-embed :where(.cl-mcont) .col-xs-11, .sim-embed :where(.cl-mcont) .col-xs-12 { position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px; float: left; }.sim-embed :where(.cl-mcont) .col-xs-1 { width: 8.33333333%; }.sim-embed :where(.cl-mcont) .col-xs-3 { width: 25%; }.sim-embed :where(.cl-mcont) .col-xs-9 { width: 75%; }.sim-embed :where(.cl-mcont) .col-xs-11 { width: 91.66666667%; }.sim-embed :where(.cl-mcont) .col-xs-12 { width: 100%; }.sim-embed :where(.cl-mcont) .center-block { display: block; margin-right: auto; margin-left: auto; }/* theme/less/block-panels.less - every .row inside the app content root */ .sim-embed .cl-mcont .row { margin-top: 20px; }/* bootstrap buttons.less base */ .sim-embed :where(.cl-mcont) .btn { display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; border-radius: 4px; -webkit-user-select: none; user-select: none; }/* theme/less/elements/buttons.less overrides. NOTE the !important margin-bottom: it beats the module's own "margin: 10px", exactly as it does in the app. */ .sim-embed :where(.cl-mcont) .btn { border-color: #CCCCCC; border-radius: 0; -webkit-border-radius: 0; outline: none; margin-bottom: 5px !important; margin-left: 5px; font-size: 13px; padding: 7px 11px; }.sim-embed :where(.cl-mcont) .btn i { font-size: 14px; margin-right: 2px; display: inline-block; min-width: 10px; }/* the markup really does say class="btn bt-primary" (typo in the platform), so no .btn-primary rule ever applies - the blue comes from the module rules below. */ /* --- angular-material layout attributes (subset actually used) ----------- */ .sim-embed :where(.cl-mcont) [layout], .sim-embed :where(.cl-mcont) [layout="column"], .sim-embed :where(.cl-mcont) [layout="row"] { box-sizing: border-box; display: flex; }.sim-embed :where(.cl-mcont) [layout="column"] { flex-direction: column; }.sim-embed :where(.cl-mcont) [layout="row"] { flex-direction: row; }.sim-embed :where(.cl-mcont) [flex] { flex: 1; box-sizing: border-box; }.sim-embed :where(.cl-mcont) [layout-fill] { margin: 0; width: 100%; min-height: 100%; height: 100%; }.sim-embed :where(.cl-mcont) [layout-align="start center"] { justify-content: flex-start; align-items: center; align-content: center; max-width: 100%; }.sim-embed :where(.cl-mcont) [layout-align="start center"] > * { max-width: 100%; box-sizing: border-box; }/* --- FontAwesome 4 base classes ----------------------------------------- */ .sim-embed :where(.cl-mcont) .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }.sim-embed :where(.cl-mcont) .fa-lg { font-size: 1.33333333em; line-height: 0.75em; vertical-align: -15%; }.sim-embed :where(.cl-mcont) .fa-2x { font-size: 2em; }.sim-embed :where(.cl-mcont) .fa-stack { position: relative; display: inline-block; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; }.sim-embed :where(.cl-mcont) .fa-stack-1x, .sim-embed :where(.cl-mcont) .fa-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; }.sim-embed :where(.cl-mcont) .fa-stack-1x { line-height: inherit; }.sim-embed :where(.cl-mcont) .fa-stack-2x { font-size: 2em; }.sim-embed :where(.cl-mcont) .fa-inverse { color: #fff; }.sim-embed :where(.cl-mcont) .pull-right { float: right; }.sim-embed :where(.cl-mcont) .pull-left { float: left; }.sim-embed :where(.cl-mcont) .fa.pull-left { margin-right: .3em; }.sim-embed :where(.cl-mcont) .fa.pull-right { margin-left: .3em; }/* --- FontAwesome glyph outlines (substituted for the webfont) ------------ */ .sim-embed :where(.cl-mcont) .fa-search::before { content: ""; display: inline-block; width: 0.92857em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1152 704q0 185 -131.5 316.5t-316.5 131.5t-316.5 -131.5t-131.5 -316.5t131.5 -316.5t316.5 -131.5t316.5 131.5t131.5 316.5zM1664 -128q0 -52 -38 -90t-90 -38q-54 0 -90 38l-343 342q-179 -124 -399 -124q-143 0 -273.5 55.5t-225 150t-150 225t-55.5 273.5 t55.5 273.5t150 225t225 150t273.5 55.5t273.5 -55.5t225 -150t150 -225t55.5 -273.5q0 -220 -124 -399l343 -343q37 -37 37 -90z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1152 704q0 185 -131.5 316.5t-316.5 131.5t-316.5 -131.5t-131.5 -316.5t131.5 -316.5t316.5 -131.5t316.5 131.5t131.5 316.5zM1664 -128q0 -52 -38 -90t-90 -38q-54 0 -90 38l-343 342q-179 -124 -399 -124q-143 0 -273.5 55.5t-225 150t-150 225t-55.5 273.5 t55.5 273.5t150 225t225 150t273.5 55.5t273.5 -55.5t225 -150t150 -225t55.5 -273.5q0 -220 -124 -399l343 -343q37 -37 37 -90z'/%3E%3C/svg%3E") no-repeat center / contain; }.sim-embed :where(.cl-mcont) .fa-globe::before { content: ""; display: inline-block; width: 0.85714em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M768 1408q209 0 385.5 -103t279.5 -279.5t103 -385.5t-103 -385.5t-279.5 -279.5t-385.5 -103t-385.5 103t-279.5 279.5t-103 385.5t103 385.5t279.5 279.5t385.5 103zM1042 887q-2 -1 -9.5 -9.5t-13.5 -9.5q2 0 4.5 5t5 11t3.5 7q6 7 22 15q14 6 52 12q34 8 51 -11 q-2 2 9.5 13t14.5 12q3 2 15 4.5t15 7.5l2 22q-12 -1 -17.5 7t-6.5 21q0 -2 -6 -8q0 7 -4.5 8t-11.5 -1t-9 -1q-10 3 -15 7.5t-8 16.5t-4 15q-2 5 -9.5 10.5t-9.5 10.5q-1 2 -2.5 5.5t-3 6.5t-4 5.5t-5.5 2.5t-7 -5t-7.5 -10t-4.5 -5q-3 2 -6 1.5t-4.5 -1t-4.5 -3t-5 -3.5 q-3 -2 -8.5 -3t-8.5 -2q15 5 -1 11q-10 4 -16 3q9 4 7.5 12t-8.5 14h5q-1 4 -8.5 8.5t-17.5 8.5t-13 6q-8 5 -34 9.5t-33 0.5q-5 -6 -4.5 -10.5t4 -14t3.5 -12.5q1 -6 -5.5 -13t-6.5 -12q0 -7 14 -15.5t10 -21.5q-3 -8 -16 -16t-16 -12q-5 -8 -1.5 -18.5t10.5 -16.5 q2 -2 1.5 -4t-3.5 -4.5t-5.5 -4t-6.5 -3.5l-3 -2q-11 -5 -20.5 6t-13.5 26q-7 25 -16 30q-23 8 -29 -1q-5 13 -41 26q-25 9 -58 4q6 1 0 15q-7 15 -19 12q3 6 4 17.5t1 13.5q3 13 12 23q1 1 7 8.5t9.5 13.5t0.5 6q35 -4 50 11q5 5 11.5 17t10.5 17q9 6 14 5.5t14.5 -5.5 t14.5 -5q14 -1 15.5 11t-7.5 20q12 -1 3 17q-5 7 -8 9q-12 4 -27 -5q-8 -4 2 -8q-1 1 -9.5 -10.5t-16.5 -17.5t-16 5q-1 1 -5.5 13.5t-9.5 13.5q-8 0 -16 -15q3 8 -11 15t-24 8q19 12 -8 27q-7 4 -20.5 5t-19.5 -4q-5 -7 -5.5 -11.5t5 -8t10.5 -5.5t11.5 -4t8.5 -3 q14 -10 8 -14q-2 -1 -8.5 -3.5t-11.5 -4.5t-6 -4q-3 -4 0 -14t-2 -14q-5 5 -9 17.5t-7 16.5q7 -9 -25 -6l-10 1q-4 0 -16 -2t-20.5 -1t-13.5 8q-4 8 0 20q1 4 4 2q-4 3 -11 9.5t-10 8.5q-46 -15 -94 -41q6 -1 12 1q5 2 13 6.5t10 5.5q34 14 42 7l5 5q14 -16 20 -25 q-7 4 -30 1q-20 -6 -22 -12q7 -12 5 -18q-4 3 -11.5 10t-14.5 11t-15 5q-16 0 -22 -1q-146 -80 -235 -222q7 -7 12 -8q4 -1 5 -9t2.5 -11t11.5 3q9 -8 3 -19q1 1 44 -27q19 -17 21 -21q3 -11 -10 -18q-1 2 -9 9t-9 4q-3 -5 0.5 -18.5t10.5 -12.5q-7 0 -9.5 -16t-2.5 -35.5 t-1 -23.5l2 -1q-3 -12 5.5 -34.5t21.5 -19.5q-13 -3 20 -43q6 -8 8 -9q3 -2 12 -7.5t15 -10t10 -10.5q4 -5 10 -22.5t14 -23.5q-2 -6 9.5 -20t10.5 -23q-1 0 -2.5 -1t-2.5 -1q3 -7 15.5 -14t15.5 -13q1 -3 2 -10t3 -11t8 -2q2 20 -24 62q-15 25 -17 29q-3 5 -5.5 15.5 t-4.5 14.5q2 0 6 -1.5t8.5 -3.5t7.5 -4t2 -3q-3 -7 2 -17.5t12 -18.5t17 -19t12 -13q6 -6 14 -19.5t0 -13.5q9 0 20 -10t17 -20q5 -8 8 -26t5 -24q2 -7 8.5 -13.5t12.5 -9.5l16 -8t13 -7q5 -2 18.5 -10.5t21.5 -11.5q10 -4 16 -4t14.5 2.5t13.5 3.5q15 2 29 -15t21 -21 q36 -19 55 -11q-2 -1 0.5 -7.5t8 -15.5t9 -14.5t5.5 -8.5q5 -6 18 -15t18 -15q6 4 7 9q-3 -8 7 -20t18 -10q14 3 14 32q-31 -15 -49 18q0 1 -2.5 5.5t-4 8.5t-2.5 8.5t0 7.5t5 3q9 0 10 3.5t-2 12.5t-4 13q-1 8 -11 20t-12 15q-5 -9 -16 -8t-16 9q0 -1 -1.5 -5.5t-1.5 -6.5 q-13 0 -15 1q1 3 2.5 17.5t3.5 22.5q1 4 5.5 12t7.5 14.5t4 12.5t-4.5 9.5t-17.5 2.5q-19 -1 -26 -20q-1 -3 -3 -10.5t-5 -11.5t-9 -7q-7 -3 -24 -2t-24 5q-13 8 -22.5 29t-9.5 37q0 10 2.5 26.5t3 25t-5.5 24.5q3 2 9 9.5t10 10.5q2 1 4.5 1.5t4.5 0t4 1.5t3 6q-1 1 -4 3 q-3 3 -4 3q7 -3 28.5 1.5t27.5 -1.5q15 -11 22 2q0 1 -2.5 9.5t-0.5 13.5q5 -27 29 -9q3 -3 15.5 -5t17.5 -5q3 -2 7 -5.5t5.5 -4.5t5 0.5t8.5 6.5q10 -14 12 -24q11 -40 19 -44q7 -3 11 -2t4.5 9.5t0 14t-1.5 12.5l-1 8v18l-1 8q-15 3 -18.5 12t1.5 18.5t15 18.5q1 1 8 3.5 t15.5 6.5t12.5 8q21 19 15 35q7 0 11 9q-1 0 -5 3t-7.5 5t-4.5 2q9 5 2 16q5 3 7.5 11t7.5 10q9 -12 21 -2q7 8 1 16q5 7 20.5 10.5t18.5 9.5q7 -2 8 2t1 12t3 12q4 5 15 9t13 5l17 11q3 4 0 4q18 -2 31 11q10 11 -6 20q3 6 -3 9.5t-15 5.5q3 1 11.5 0.5t10.5 1.5 q15 10 -7 16q-17 5 -43 -12zM879 10q206 36 351 189q-3 3 -12.5 4.5t-12.5 3.5q-18 7 -24 8q1 7 -2.5 13t-8 9t-12.5 8t-11 7q-2 2 -7 6t-7 5.5t-7.5 4.5t-8.5 2t-10 -1l-3 -1q-3 -1 -5.5 -2.5t-5.5 -3t-4 -3t0 -2.5q-21 17 -36 22q-5 1 -11 5.5t-10.5 7t-10 1.5t-11.5 -7 q-5 -5 -6 -15t-2 -13q-7 5 0 17.5t2 18.5q-3 6 -10.5 4.5t-12 -4.5t-11.5 -8.5t-9 -6.5t-8.5 -5.5t-8.5 -7.5q-3 -4 -6 -12t-5 -11q-2 4 -11.5 6.5t-9.5 5.5q2 -10 4 -35t5 -38q7 -31 -12 -48q-27 -25 -29 -40q-4 -22 12 -26q0 -7 -8 -20.5t-7 -21.5q0 -6 2 -16z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M768 1408q209 0 385.5 -103t279.5 -279.5t103 -385.5t-103 -385.5t-279.5 -279.5t-385.5 -103t-385.5 103t-279.5 279.5t-103 385.5t103 385.5t279.5 279.5t385.5 103zM1042 887q-2 -1 -9.5 -9.5t-13.5 -9.5q2 0 4.5 5t5 11t3.5 7q6 7 22 15q14 6 52 12q34 8 51 -11 q-2 2 9.5 13t14.5 12q3 2 15 4.5t15 7.5l2 22q-12 -1 -17.5 7t-6.5 21q0 -2 -6 -8q0 7 -4.5 8t-11.5 -1t-9 -1q-10 3 -15 7.5t-8 16.5t-4 15q-2 5 -9.5 10.5t-9.5 10.5q-1 2 -2.5 5.5t-3 6.5t-4 5.5t-5.5 2.5t-7 -5t-7.5 -10t-4.5 -5q-3 2 -6 1.5t-4.5 -1t-4.5 -3t-5 -3.5 q-3 -2 -8.5 -3t-8.5 -2q15 5 -1 11q-10 4 -16 3q9 4 7.5 12t-8.5 14h5q-1 4 -8.5 8.5t-17.5 8.5t-13 6q-8 5 -34 9.5t-33 0.5q-5 -6 -4.5 -10.5t4 -14t3.5 -12.5q1 -6 -5.5 -13t-6.5 -12q0 -7 14 -15.5t10 -21.5q-3 -8 -16 -16t-16 -12q-5 -8 -1.5 -18.5t10.5 -16.5 q2 -2 1.5 -4t-3.5 -4.5t-5.5 -4t-6.5 -3.5l-3 -2q-11 -5 -20.5 6t-13.5 26q-7 25 -16 30q-23 8 -29 -1q-5 13 -41 26q-25 9 -58 4q6 1 0 15q-7 15 -19 12q3 6 4 17.5t1 13.5q3 13 12 23q1 1 7 8.5t9.5 13.5t0.5 6q35 -4 50 11q5 5 11.5 17t10.5 17q9 6 14 5.5t14.5 -5.5 t14.5 -5q14 -1 15.5 11t-7.5 20q12 -1 3 17q-5 7 -8 9q-12 4 -27 -5q-8 -4 2 -8q-1 1 -9.5 -10.5t-16.5 -17.5t-16 5q-1 1 -5.5 13.5t-9.5 13.5q-8 0 -16 -15q3 8 -11 15t-24 8q19 12 -8 27q-7 4 -20.5 5t-19.5 -4q-5 -7 -5.5 -11.5t5 -8t10.5 -5.5t11.5 -4t8.5 -3 q14 -10 8 -14q-2 -1 -8.5 -3.5t-11.5 -4.5t-6 -4q-3 -4 0 -14t-2 -14q-5 5 -9 17.5t-7 16.5q7 -9 -25 -6l-10 1q-4 0 -16 -2t-20.5 -1t-13.5 8q-4 8 0 20q1 4 4 2q-4 3 -11 9.5t-10 8.5q-46 -15 -94 -41q6 -1 12 1q5 2 13 6.5t10 5.5q34 14 42 7l5 5q14 -16 20 -25 q-7 4 -30 1q-20 -6 -22 -12q7 -12 5 -18q-4 3 -11.5 10t-14.5 11t-15 5q-16 0 -22 -1q-146 -80 -235 -222q7 -7 12 -8q4 -1 5 -9t2.5 -11t11.5 3q9 -8 3 -19q1 1 44 -27q19 -17 21 -21q3 -11 -10 -18q-1 2 -9 9t-9 4q-3 -5 0.5 -18.5t10.5 -12.5q-7 0 -9.5 -16t-2.5 -35.5 t-1 -23.5l2 -1q-3 -12 5.5 -34.5t21.5 -19.5q-13 -3 20 -43q6 -8 8 -9q3 -2 12 -7.5t15 -10t10 -10.5q4 -5 10 -22.5t14 -23.5q-2 -6 9.5 -20t10.5 -23q-1 0 -2.5 -1t-2.5 -1q3 -7 15.5 -14t15.5 -13q1 -3 2 -10t3 -11t8 -2q2 20 -24 62q-15 25 -17 29q-3 5 -5.5 15.5 t-4.5 14.5q2 0 6 -1.5t8.5 -3.5t7.5 -4t2 -3q-3 -7 2 -17.5t12 -18.5t17 -19t12 -13q6 -6 14 -19.5t0 -13.5q9 0 20 -10t17 -20q5 -8 8 -26t5 -24q2 -7 8.5 -13.5t12.5 -9.5l16 -8t13 -7q5 -2 18.5 -10.5t21.5 -11.5q10 -4 16 -4t14.5 2.5t13.5 3.5q15 2 29 -15t21 -21 q36 -19 55 -11q-2 -1 0.5 -7.5t8 -15.5t9 -14.5t5.5 -8.5q5 -6 18 -15t18 -15q6 4 7 9q-3 -8 7 -20t18 -10q14 3 14 32q-31 -15 -49 18q0 1 -2.5 5.5t-4 8.5t-2.5 8.5t0 7.5t5 3q9 0 10 3.5t-2 12.5t-4 13q-1 8 -11 20t-12 15q-5 -9 -16 -8t-16 9q0 -1 -1.5 -5.5t-1.5 -6.5 q-13 0 -15 1q1 3 2.5 17.5t3.5 22.5q1 4 5.5 12t7.5 14.5t4 12.5t-4.5 9.5t-17.5 2.5q-19 -1 -26 -20q-1 -3 -3 -10.5t-5 -11.5t-9 -7q-7 -3 -24 -2t-24 5q-13 8 -22.5 29t-9.5 37q0 10 2.5 26.5t3 25t-5.5 24.5q3 2 9 9.5t10 10.5q2 1 4.5 1.5t4.5 0t4 1.5t3 6q-1 1 -4 3 q-3 3 -4 3q7 -3 28.5 1.5t27.5 -1.5q15 -11 22 2q0 1 -2.5 9.5t-0.5 13.5q5 -27 29 -9q3 -3 15.5 -5t17.5 -5q3 -2 7 -5.5t5.5 -4.5t5 0.5t8.5 6.5q10 -14 12 -24q11 -40 19 -44q7 -3 11 -2t4.5 9.5t0 14t-1.5 12.5l-1 8v18l-1 8q-15 3 -18.5 12t1.5 18.5t15 18.5q1 1 8 3.5 t15.5 6.5t12.5 8q21 19 15 35q7 0 11 9q-1 0 -5 3t-7.5 5t-4.5 2q9 5 2 16q5 3 7.5 11t7.5 10q9 -12 21 -2q7 8 1 16q5 7 20.5 10.5t18.5 9.5q7 -2 8 2t1 12t3 12q4 5 15 9t13 5l17 11q3 4 0 4q18 -2 31 11q10 11 -6 20q3 6 -3 9.5t-15 5.5q3 1 11.5 0.5t10.5 1.5 q15 10 -7 16q-17 5 -43 -12zM879 10q206 36 351 189q-3 3 -12.5 4.5t-12.5 3.5q-18 7 -24 8q1 7 -2.5 13t-8 9t-12.5 8t-11 7q-2 2 -7 6t-7 5.5t-7.5 4.5t-8.5 2t-10 -1l-3 -1q-3 -1 -5.5 -2.5t-5.5 -3t-4 -3t0 -2.5q-21 17 -36 22q-5 1 -11 5.5t-10.5 7t-10 1.5t-11.5 -7 q-5 -5 -6 -15t-2 -13q-7 5 0 17.5t2 18.5q-3 6 -10.5 4.5t-12 -4.5t-11.5 -8.5t-9 -6.5t-8.5 -5.5t-8.5 -7.5q-3 -4 -6 -12t-5 -11q-2 4 -11.5 6.5t-9.5 5.5q2 -10 4 -35t5 -38q7 -31 -12 -48q-27 -25 -29 -40q-4 -22 12 -26q0 -7 -8 -20.5t-7 -21.5q0 -6 2 -16z'/%3E%3C/svg%3E") no-repeat center / contain; }.sim-embed :where(.cl-mcont) .fa-comment::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1792 640q0 -174 -120 -321.5t-326 -233t-450 -85.5q-70 0 -145 8q-198 -175 -460 -242q-49 -14 -114 -22q-17 -2 -30.5 9t-17.5 29v1q-3 4 -0.5 12t2 10t4.5 9.5l6 9t7 8.5t8 9q7 8 31 34.5t34.5 38t31 39.5t32.5 51t27 59t26 76q-157 89 -247.5 220t-90.5 281 q0 130 71 248.5t191 204.5t286 136.5t348 50.5q244 0 450 -85.5t326 -233t120 -321.5z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1792 640q0 -174 -120 -321.5t-326 -233t-450 -85.5q-70 0 -145 8q-198 -175 -460 -242q-49 -14 -114 -22q-17 -2 -30.5 9t-17.5 29v1q-3 4 -0.5 12t2 10t4.5 9.5l6 9t7 8.5t8 9q7 8 31 34.5t34.5 38t31 39.5t32.5 51t27 59t26 76q-157 89 -247.5 220t-90.5 281 q0 130 71 248.5t191 204.5t286 136.5t348 50.5q244 0 450 -85.5t326 -233t120 -321.5z'/%3E%3C/svg%3E") no-repeat center / contain; }.sim-embed :where(.cl-mcont) .fa-users::before { content: ""; display: inline-block; width: 1.07143em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M593 640q-162 -5 -265 -128h-134q-82 0 -138 40.5t-56 118.5q0 353 124 353q6 0 43.5 -21t97.5 -42.5t119 -21.5q67 0 133 23q-5 -37 -5 -66q0 -139 81 -256zM1664 3q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5 t43 97.5t62 81t85.5 53.5t111.5 20q10 0 43 -21.5t73 -48t107 -48t135 -21.5t135 21.5t107 48t73 48t43 21.5q61 0 111.5 -20t85.5 -53.5t62 -81t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM640 1280q0 -106 -75 -181t-181 -75t-181 75t-75 181t75 181t181 75t181 -75 t75 -181zM1344 896q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5zM1920 671q0 -78 -56 -118.5t-138 -40.5h-134q-103 123 -265 128q81 117 81 256q0 29 -5 66q66 -23 133 -23q59 0 119 21.5t97.5 42.5 t43.5 21q124 0 124 -353zM1792 1280q0 -106 -75 -181t-181 -75t-181 75t-75 181t75 181t181 75t181 -75t75 -181z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M593 640q-162 -5 -265 -128h-134q-82 0 -138 40.5t-56 118.5q0 353 124 353q6 0 43.5 -21t97.5 -42.5t119 -21.5q67 0 133 23q-5 -37 -5 -66q0 -139 81 -256zM1664 3q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5 t43 97.5t62 81t85.5 53.5t111.5 20q10 0 43 -21.5t73 -48t107 -48t135 -21.5t135 21.5t107 48t73 48t43 21.5q61 0 111.5 -20t85.5 -53.5t62 -81t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM640 1280q0 -106 -75 -181t-181 -75t-181 75t-75 181t75 181t181 75t181 -75 t75 -181zM1344 896q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5zM1920 671q0 -78 -56 -118.5t-138 -40.5h-134q-103 123 -265 128q81 117 81 256q0 29 -5 66q66 -23 133 -23q59 0 119 21.5t97.5 42.5 t43.5 21q124 0 124 -353zM1792 1280q0 -106 -75 -181t-181 -75t-181 75t-75 181t75 181t181 75t181 -75t75 -181z'/%3E%3C/svg%3E") no-repeat center / contain; }.sim-embed :where(.cl-mcont) .fa-user::before { content: ""; display: inline-block; width: 0.78571em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1408 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1408 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1408 131q0 -120 -73 -189.5t-194 -69.5h-874q-121 0 -194 69.5t-73 189.5q0 53 3.5 103.5t14 109t26.5 108.5t43 97.5t62 81t85.5 53.5t111.5 20q9 0 42 -21.5t74.5 -48t108 -48t133.5 -21.5t133.5 21.5t108 48t74.5 48t42 21.5q61 0 111.5 -20t85.5 -53.5t62 -81 t43 -97.5t26.5 -108.5t14 -109t3.5 -103.5zM1088 1024q0 -159 -112.5 -271.5t-271.5 -112.5t-271.5 112.5t-112.5 271.5t112.5 271.5t271.5 112.5t271.5 -112.5t112.5 -271.5z'/%3E%3C/svg%3E") no-repeat center / contain; }.sim-embed :where(.cl-mcont) .fa-newspaper-o::before { content: ""; display: inline-block; width: 1.14286em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1024 1024h-384v-384h384v384zM1152 384v-128h-640v128h640zM1152 1152v-640h-640v640h640zM1792 384v-128h-512v128h512zM1792 640v-128h-512v128h512zM1792 896v-128h-512v128h512zM1792 1152v-128h-512v128h512zM256 192v960h-128v-960q0 -26 19 -45t45 -19t45 19 t19 45zM1920 192v1088h-1536v-1088q0 -33 -11 -64h1483q26 0 45 19t19 45zM2048 1408v-1216q0 -80 -56 -136t-136 -56h-1664q-80 0 -136 56t-56 136v1088h256v128h1792z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2048 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1024 1024h-384v-384h384v384zM1152 384v-128h-640v128h640zM1152 1152v-640h-640v640h640zM1792 384v-128h-512v128h512zM1792 640v-128h-512v128h512zM1792 896v-128h-512v128h512zM1792 1152v-128h-512v128h512zM256 192v960h-128v-960q0 -26 19 -45t45 -19t45 19 t19 45zM1920 192v1088h-1536v-1088q0 -33 -11 -64h1483q26 0 45 19t19 45zM2048 1408v-1216q0 -80 -56 -136t-136 -56h-1664q-80 0 -136 56t-56 136v1088h256v128h1792z'/%3E%3C/svg%3E") no-repeat center / contain; }.sim-embed :where(.cl-mcont) .fa-ellipsis-h::before { content: ""; display: inline-block; width: 0.78571em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1408 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M384 800v-192q0 -40 -28 -68t-68 -28h-192q-40 0 -68 28t-28 68v192q0 40 28 68t68 28h192q40 0 68 -28t28 -68zM896 800v-192q0 -40 -28 -68t-68 -28h-192q-40 0 -68 28t-28 68v192q0 40 28 68t68 28h192q40 0 68 -28t28 -68zM1408 800v-192q0 -40 -28 -68t-68 -28h-192 q-40 0 -68 28t-28 68v192q0 40 28 68t68 28h192q40 0 68 -28t28 -68z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1408 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M384 800v-192q0 -40 -28 -68t-68 -28h-192q-40 0 -68 28t-28 68v192q0 40 28 68t68 28h192q40 0 68 -28t28 -68zM896 800v-192q0 -40 -28 -68t-68 -28h-192q-40 0 -68 28t-28 68v192q0 40 28 68t68 28h192q40 0 68 -28t28 -68zM1408 800v-192q0 -40 -28 -68t-68 -28h-192 q-40 0 -68 28t-28 68v192q0 40 28 68t68 28h192q40 0 68 -28t28 -68z'/%3E%3C/svg%3E") no-repeat center / contain; }.sim-embed :where(.cl-mcont) .fa-commenting::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M640 640q0 53 -37.5 90.5t-90.5 37.5t-90.5 -37.5t-37.5 -90.5t37.5 -90.5t90.5 -37.5t90.5 37.5t37.5 90.5zM1024 640q0 53 -37.5 90.5t-90.5 37.5t-90.5 -37.5t-37.5 -90.5t37.5 -90.5t90.5 -37.5t90.5 37.5t37.5 90.5zM1408 640q0 53 -37.5 90.5t-90.5 37.5 t-90.5 -37.5t-37.5 -90.5t37.5 -90.5t90.5 -37.5t90.5 37.5t37.5 90.5zM1792 640q0 -174 -120 -321.5t-326 -233t-450 -85.5q-110 0 -211 18q-173 -173 -435 -229q-52 -10 -86 -13q-12 -1 -22 6t-13 18q-4 15 20 37q5 5 23.5 21.5t25.5 23.5t23.5 25.5t24 31.5t20.5 37 t20 48t14.5 57.5t12.5 72.5q-146 90 -229.5 216.5t-83.5 269.5q0 174 120 321.5t326 233t450 85.5t450 -85.5t326 -233t120 -321.5z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M640 640q0 53 -37.5 90.5t-90.5 37.5t-90.5 -37.5t-37.5 -90.5t37.5 -90.5t90.5 -37.5t90.5 37.5t37.5 90.5zM1024 640q0 53 -37.5 90.5t-90.5 37.5t-90.5 -37.5t-37.5 -90.5t37.5 -90.5t90.5 -37.5t90.5 37.5t37.5 90.5zM1408 640q0 53 -37.5 90.5t-90.5 37.5 t-90.5 -37.5t-37.5 -90.5t37.5 -90.5t90.5 -37.5t90.5 37.5t37.5 90.5zM1792 640q0 -174 -120 -321.5t-326 -233t-450 -85.5q-110 0 -211 18q-173 -173 -435 -229q-52 -10 -86 -13q-12 -1 -22 6t-13 18q-4 15 20 37q5 5 23.5 21.5t25.5 23.5t23.5 25.5t24 31.5t20.5 37 t20 48t14.5 57.5t12.5 72.5q-146 90 -229.5 216.5t-83.5 269.5q0 174 120 321.5t326 233t450 85.5t450 -85.5t326 -233t120 -321.5z'/%3E%3C/svg%3E") no-repeat center / contain; }.sim-embed :where(.cl-mcont) .fa-bookmark::before { content: ""; display: inline-block; width: 0.71429em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1164 1408q23 0 44 -9q33 -13 52.5 -41t19.5 -62v-1289q0 -34 -19.5 -62t-52.5 -41q-19 -8 -44 -8q-48 0 -83 32l-441 424l-441 -424q-36 -33 -83 -33q-23 0 -44 9q-33 13 -52.5 41t-19.5 62v1289q0 34 19.5 62t52.5 41q21 9 44 9h1048z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1280 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1164 1408q23 0 44 -9q33 -13 52.5 -41t19.5 -62v-1289q0 -34 -19.5 -62t-52.5 -41q-19 -8 -44 -8q-48 0 -83 32l-441 424l-441 -424q-36 -33 -83 -33q-23 0 -44 9q-33 13 -52.5 41t-19.5 62v1289q0 34 19.5 62t52.5 41q21 9 44 9h1048z'/%3E%3C/svg%3E") no-repeat center / contain; }.sim-embed :where(.cl-mcont) .fa-calendar-o::before { content: ""; display: inline-block; width: 0.92857em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M128 -128h1408v1024h-1408v-1024zM512 1088v288q0 14 -9 23t-23 9h-64q-14 0 -23 -9t-9 -23v-288q0 -14 9 -23t23 -9h64q14 0 23 9t9 23zM1280 1088v288q0 14 -9 23t-23 9h-64q-14 0 -23 -9t-9 -23v-288q0 -14 9 -23t23 -9h64q14 0 23 9t9 23zM1664 1152v-1280 q0 -52 -38 -90t-90 -38h-1408q-52 0 -90 38t-38 90v1280q0 52 38 90t90 38h128v96q0 66 47 113t113 47h64q66 0 113 -47t47 -113v-96h384v96q0 66 47 113t113 47h64q66 0 113 -47t47 -113v-96h128q52 0 90 -38t38 -90z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M128 -128h1408v1024h-1408v-1024zM512 1088v288q0 14 -9 23t-23 9h-64q-14 0 -23 -9t-9 -23v-288q0 -14 9 -23t23 -9h64q14 0 23 9t9 23zM1280 1088v288q0 14 -9 23t-23 9h-64q-14 0 -23 -9t-9 -23v-288q0 -14 9 -23t23 -9h64q14 0 23 9t9 23zM1664 1152v-1280 q0 -52 -38 -90t-90 -38h-1408q-52 0 -90 38t-38 90v1280q0 52 38 90t90 38h128v96q0 66 47 113t113 47h64q66 0 113 -47t47 -113v-96h384v96q0 66 47 113t113 47h64q66 0 113 -47t47 -113v-96h128q52 0 90 -38t38 -90z'/%3E%3C/svg%3E") no-repeat center / contain; }.sim-embed :where(.cl-mcont) .fa-circle::before { content: ""; display: inline-block; width: 0.85714em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1536 640q0 -209 -103 -385.5t-279.5 -279.5t-385.5 -103t-385.5 103t-279.5 279.5t-103 385.5t103 385.5t279.5 279.5t385.5 103t385.5 -103t279.5 -279.5t103 -385.5z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1536 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1536 640q0 -209 -103 -385.5t-279.5 -279.5t-385.5 -103t-385.5 103t-279.5 279.5t-103 385.5t103 385.5t279.5 279.5t385.5 103t385.5 -103t279.5 -279.5t103 -385.5z'/%3E%3C/svg%3E") no-repeat center / contain; }.sim-embed :where(.cl-mcont) .fa-video-camera::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1792 1184v-1088q0 -42 -39 -59q-13 -5 -25 -5q-27 0 -45 19l-403 403v-166q0 -119 -84.5 -203.5t-203.5 -84.5h-704q-119 0 -203.5 84.5t-84.5 203.5v704q0 119 84.5 203.5t203.5 84.5h704q119 0 203.5 -84.5t84.5 -203.5v-165l403 402q18 19 45 19q12 0 25 -5 q39 -17 39 -59z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1792 1184v-1088q0 -42 -39 -59q-13 -5 -25 -5q-27 0 -45 19l-403 403v-166q0 -119 -84.5 -203.5t-203.5 -84.5h-704q-119 0 -203.5 84.5t-84.5 203.5v704q0 119 84.5 203.5t203.5 84.5h704q119 0 203.5 -84.5t84.5 -203.5v-165l403 402q18 19 45 19q12 0 25 -5 q39 -17 39 -59z'/%3E%3C/svg%3E") no-repeat center / contain; }.sim-embed :where(.cl-mcont) .fa-camera::before { content: ""; display: inline-block; width: 1.07143em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M960 864q119 0 203.5 -84.5t84.5 -203.5t-84.5 -203.5t-203.5 -84.5t-203.5 84.5t-84.5 203.5t84.5 203.5t203.5 84.5zM1664 1280q106 0 181 -75t75 -181v-896q0 -106 -75 -181t-181 -75h-1408q-106 0 -181 75t-75 181v896q0 106 75 181t181 75h224l51 136 q19 49 69.5 84.5t103.5 35.5h512q53 0 103.5 -35.5t69.5 -84.5l51 -136h224zM960 128q185 0 316.5 131.5t131.5 316.5t-131.5 316.5t-316.5 131.5t-316.5 -131.5t-131.5 -316.5t131.5 -316.5t316.5 -131.5z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1920 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M960 864q119 0 203.5 -84.5t84.5 -203.5t-84.5 -203.5t-203.5 -84.5t-203.5 84.5t-84.5 203.5t84.5 203.5t203.5 84.5zM1664 1280q106 0 181 -75t75 -181v-896q0 -106 -75 -181t-181 -75h-1408q-106 0 -181 75t-75 181v896q0 106 75 181t181 75h224l51 136 q19 49 69.5 84.5t103.5 35.5h512q53 0 103.5 -35.5t69.5 -84.5l51 -136h224zM960 128q185 0 316.5 131.5t131.5 316.5t-131.5 316.5t-316.5 131.5t-316.5 -131.5t-131.5 -316.5t131.5 -316.5t316.5 -131.5z'/%3E%3C/svg%3E") no-repeat center / contain; }.sim-embed :where(.cl-mcont) .fa-thumbs-up::before { content: ""; display: inline-block; width: 0.92857em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M256 192q0 26 -19 45t-45 19q-27 0 -45.5 -19t-18.5 -45q0 -27 18.5 -45.5t45.5 -18.5q26 0 45 18.5t19 45.5zM416 704v-640q0 -26 -19 -45t-45 -19h-288q-26 0 -45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45 -19t19 -45zM1600 704q0 -86 -55 -149q15 -44 15 -76 q3 -76 -43 -137q17 -56 0 -117q-15 -57 -54 -94q9 -112 -49 -181q-64 -76 -197 -78h-36h-76h-17q-66 0 -144 15.5t-121.5 29t-120.5 39.5q-123 43 -158 44q-26 1 -45 19.5t-19 44.5v641q0 25 18 43.5t43 20.5q24 2 76 59t101 121q68 87 101 120q18 18 31 48t17.5 48.5 t13.5 60.5q7 39 12.5 61t19.5 52t34 50q19 19 45 19q46 0 82.5 -10.5t60 -26t40 -40.5t24 -45t12 -50t5 -45t0.5 -39q0 -38 -9.5 -76t-19 -60t-27.5 -56q-3 -6 -10 -18t-11 -22t-8 -24h277q78 0 135 -57t57 -135z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1664 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M256 192q0 26 -19 45t-45 19q-27 0 -45.5 -19t-18.5 -45q0 -27 18.5 -45.5t45.5 -18.5q26 0 45 18.5t19 45.5zM416 704v-640q0 -26 -19 -45t-45 -19h-288q-26 0 -45 19t-19 45v640q0 26 19 45t45 19h288q26 0 45 -19t19 -45zM1600 704q0 -86 -55 -149q15 -44 15 -76 q3 -76 -43 -137q17 -56 0 -117q-15 -57 -54 -94q9 -112 -49 -181q-64 -76 -197 -78h-36h-76h-17q-66 0 -144 15.5t-121.5 29t-120.5 39.5q-123 43 -158 44q-26 1 -45 19.5t-19 44.5v641q0 25 18 43.5t43 20.5q24 2 76 59t101 121q68 87 101 120q18 18 31 48t17.5 48.5 t13.5 60.5q7 39 12.5 61t19.5 52t34 50q19 19 45 19q46 0 82.5 -10.5t60 -26t40 -40.5t24 -45t12 -50t5 -45t0.5 -39q0 -38 -9.5 -76t-19 -60t-27.5 -56q-3 -6 -10 -18t-11 -22t-8 -24h277q78 0 135 -57t57 -135z'/%3E%3C/svg%3E") no-repeat center / contain; }.sim-embed :where(.cl-mcont) .fa-reply::before { content: ""; display: inline-block; width: 1em; height: 1em; vertical-align: -0.14286em; background-color: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1792 416q0 -166 -127 -451q-3 -7 -10.5 -24t-13.5 -30t-13 -22q-12 -17 -28 -17q-15 0 -23.5 10t-8.5 25q0 9 2.5 26.5t2.5 23.5q5 68 5 123q0 101 -17.5 181t-48.5 138.5t-80 101t-105.5 69.5t-133 42.5t-154 21.5t-175.5 6h-224v-256q0 -26 -19 -45t-45 -19t-45 19 l-512 512q-19 19 -19 45t19 45l512 512q19 19 45 19t45 -19t19 -45v-256h224q713 0 875 -403q53 -134 53 -333z'/%3E%3C/svg%3E") no-repeat center / contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1792 1792'%3E%3Cpath transform='translate(0,1536) scale(1,-1)' d='M1792 416q0 -166 -127 -451q-3 -7 -10.5 -24t-13.5 -30t-13 -22q-12 -17 -28 -17q-15 0 -23.5 10t-8.5 25q0 9 2.5 26.5t2.5 23.5q5 68 5 123q0 101 -17.5 181t-48.5 138.5t-80 101t-105.5 69.5t-133 42.5t-154 21.5t-175.5 6h-224v-256q0 -26 -19 -45t-45 -19t-45 19 l-512 512q-19 19 -19 45t19 45l512 512q19 19 45 19t45 -19t19 -45v-256h224q713 0 875 -403q53 -134 53 -333z'/%3E%3C/svg%3E") no-repeat center / contain; }/* --- socom/simulation.less ---------------------------------------------- */ .sim-embed :where(.cl-mcont) .account-logo { max-width: 60px; }.sim-embed :where(.cl-mcont) .account-logo-default { background-color: lightgrey; padding: 9px 10px; }.sim-embed :where(.cl-mcont) .html-content-container img { max-width: 100%; max-height: 100%; }/* --- socom/window.less -------------------------------------------------- */ .sim-embed :where(.cl-mcont) .window-content { padding: 10px; }/* ======================================================================== socom/facebook-simulation.less, nesting resolved ======================================================================== */ .sim-embed :where(.cl-mcont) .bg-facebook { background-color: #eaebef !important; }.sim-embed :where(.cl-mcont) .facebook-feed-window { font-family: helvetica, arial, sans-serif !important; color: black; }.sim-embed :where(.cl-mcont) .facebook-feed-window .face-space-icon { color: white; font-weight: bold; font-family: 'Courier New'; font-size: 16pt; margin: 5px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .fb-feed-container { height: 100%; padding: 0; }.sim-embed :where(.cl-mcont) .facebook-feed-window .main-column { padding: 0; overflow: hidden; }.sim-embed :where(.cl-mcont) .facebook-feed-window .window-content { padding: 0; margin: 0; }.sim-embed :where(.cl-mcont) .facebook-feed-window .container { width: 100%; }/* header bar */ .sim-embed :where(.cl-mcont) .facebook-feed-window .header { height: 30px; background-color: #264484; }.sim-embed :where(.cl-mcont) .facebook-feed-window .header .search-box { background-color: white; height: 20px; width: 150px; margin-top: 5px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .header .search-button { height: 20px; margin-top: 5px; width: 20px; background-color: #eaebef; }.sim-embed :where(.cl-mcont) .facebook-feed-window .header .search-button .fa { color: #777; font-size: 18px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .header .header-links { color: white; font-size: 14px; margin-top: 5px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .header .header-links .link { margin-left: 10px; border-left: 1px solid #777; padding-left: 10px; }/* left rail */ .sim-embed :where(.cl-mcont) .facebook-feed-window .account-info { margin-top: 20px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .account-info .side-link { height: 25px; margin: 5px 0; }.sim-embed :where(.cl-mcont) .facebook-feed-window .account-info .side-link .link-icon { width: 30px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .account-info .side-link .fa-stack { margin-right: 5px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .account-info .side-button { border: 1px solid rgba(0,0,0,0); padding: 8px 5px; color: rgba(0,0,0,0.5); }.sim-embed :where(.cl-mcont) .facebook-feed-window .account-info .side-button.selected { background: rgba(255,255,255,0.75); border: 1px solid rgba(0,0,0,0.2); }.sim-embed :where(.cl-mcont) .facebook-feed-window .account-info .side-button .side-button-text { padding-left: 5px; font-weight: bold; color: black; }.sim-embed :where(.cl-mcont) .facebook-feed-window .account-info .side-button .side-button-icon { color: #264484; }/* compose box */ .sim-embed :where(.cl-mcont) .facebook-feed-window .author-post { width: 100%; background-color: white; margin: 20px 0; border: 1px solid rgb(221, 223, 226); }.sim-embed :where(.cl-mcont) .facebook-feed-window .author-post .author-post-header { background-color: #f6f7fa; height: 30px; font-size: 14px; font-weight: 600; line-height: 30px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .author-post .author-post-header .item { border-right: 1px solid rgb(221, 223, 226); padding: 0 20px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .author-post .author-post-header .item .fa { margin-top: 8px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .author-post .author-post-header .item:active { -webkit-box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.5); box-shadow: inset 0px 0px 20px 0px rgba(0,0,0,0.5); }.sim-embed :where(.cl-mcont) .facebook-feed-window .author-post .author-post-body { height: 117px; border-top: 1px solid #eee; border-bottom: 1px solid #eee; background-color: white; }.sim-embed :where(.cl-mcont) .facebook-feed-window .author-post .author-post-body textarea { min-height: 99px; width: 100%; padding: 10px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .author-post .author-post-footer { background-color: white; }.sim-embed :where(.cl-mcont) .facebook-feed-window .author-post .author-post-footer button { background-color: #264484; color: white; margin: 10px; font-size: 12px; padding: 5px 7px; }/* feed */ .sim-embed :where(.cl-mcont) .facebook-feed-window .facebook-feed { padding-right: 15px; overflow-y: auto; }.sim-embed :where(.cl-mcont) .facebook-feed-window .facebook-feed .post { margin-bottom: 20px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-main { background-color: white; padding: 10px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-main .avatar { margin-right: 10px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-main .author-name { color: #264484; font-size: 14px; font-weight: 600; margin-bottom: 5px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-main .post-date { color: #777; }.sim-embed :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-main .post-body { font-size: 14px; margin: 10px 0; padding: 0 0 10px 0; border-bottom: 1px solid rgb(221, 223, 226); }.sim-embed :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-main .post-controls { height: 30px; border-bottom: 1px solid rgb(221, 223, 226); }.sim-embed :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-main .post-controls .control { margin-right: 30px; margin-bottom: 10px; font-weight: 600; color: #777; line-height: 30px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-main .post-controls .control .fa { font-size: 16px; margin-top: 5px; }/* comments */ .sim-embed :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-comments { padding: 10px; background-color: #f6f7fa; }.sim-embed :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-comments .author-comment img { max-width: 52px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-comments .author-comment textarea { height: 40px; padding: 10px; width: 100%; }.sim-embed :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-comments .author-comment .btn { background-color: #264484; color: white; margin: 10px; font-size: 12px; padding: 5px 7px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-comments .comment { margin-bottom: 10px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-comments .comment .avatar { max-width: 40px; }.sim-embed :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-comments .comment .comment-author { color: #264484; font-weight: 600; }.sim-embed :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-comments .comment .comment-date { color: #777; }/* facebook-simulation.less:422 - flat in the source too */ .sim-embed :where(.cl-mcont) .facebook-feed-window .facebook-feed .post .post-comments .author-comment .btn, .sim-embed :where(.cl-mcont) .facebook-feed-window .author-post .author-post-footer button { border: none; }/* facebook-simulation.less:443 - the FaceSpace wordmark glyph */ .sim-embed :where(.cl-mcont) .face-space-icon::before { content: "F"; font-weight: bold; font-family: "Courier New"; } /* ==================== newsroom ==================== */ /* ========================================================================== SimX newsroom - article DETAIL view styles. Hand-compiled from the platform LESS. Sources: Content/socom/news-simulation.less (.news-article block, lines 257-344) Content/socom/mixins.less (.center mixin, lines 22-26) Content/socom/window.less (.window-content, line 144) Content/Site.less (global p rule) Content/theme/less/general.less (body colour/font the article inherits) Content/bootstrap/{scaffolding,type,mixins/grid,utilities}.less (.container .row .col-xs-12 .pull-* hr img) LESS variables resolved to literals: @gray-lighter -> #eee (bootstrap/variables.less:15, lighten(#000, 93.5%)) @hr-border -> #eee (bootstrap/variables.less:869 = @gray-lighter) @line-height-computed -> 20px (floor(14px * 1.428571429)) Global element rules (p, hr, *) are scoped under .news-article so this file cannot leak onto the rest of the landing page. That scoping is the only deviation from the compiled output; every value below is the real one. ========================================================================== */ /* --- bootstrap scaffolding.less: global `* { box-sizing: border-box }`, scoped here. The platform also gets it from .border-box-sizing. ------- */ .sim-embed .news-article, .sim-embed .news-article *, .sim-embed .news-article *:before, .sim-embed .news-article *:after { box-sizing: border-box; }/* --- window.less:144 ---------------------------------------------------- */ .sim-embed .window-content { padding: 10px; }/* --- news-simulation.less:257 ------------------------------------------- */ .sim-embed .news-article { font-size: 16px; font-family: "Source Sans Pro", Helvetica, Arial, sans-serif; /* inherited from theme/less/general.less body { color:#555 } */ color: #555; /* inherited from bootstrap scaffolding body { line-height: 1.428571429 } */ line-height: 1.428571429; }/* --- SUBSTITUTION (not in the LESS): in the platform the white page comes from the Kendo window body (.k-window-content), which is not part of this snippet. One declaration stands in for it. Delete if the landing page already puts the snippet on white. ------------------------------ */ .sim-embed .news-article { background-color: #fff; }/* --- Site.less global `p { font-weight:500; font-size:14px }` ------------ */ .sim-embed .news-article p { font-weight: 500; font-size: 14px; /* bootstrap type.less: p { margin: 0 0 10px } (half @line-height-computed) */ margin: 0 0 10px; }/* --- bootstrap grid: .container-fixed() + `.news-article .container` override from news-simulation.less:260 ------------------------------ */ .sim-embed .news-article .container { width: 100%; margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; }/* --- bootstrap grid: .make-row(@grid-gutter-width: 30px) ----------------- */ .sim-embed .news-article .row { margin-left: -15px; margin-right: -15px; }/* --- bootstrap clearfix, which .container and .row extend --------------- */ .sim-embed .news-article .container:before, .sim-embed .news-article .container:after, .sim-embed .news-article .row:before, .sim-embed .news-article .row:after { content: " "; display: table; }.sim-embed .news-article .container:after, .sim-embed .news-article .row:after { clear: both; }/* --- bootstrap grid: .make-xs-column(12) -------------------------------- */ .sim-embed .news-article .col-xs-12 { position: relative; float: left; width: 100%; min-height: 1px; padding-left: 15px; padding-right: 15px; }/* --- bootstrap utilities.less ------------------------------------------- */ .sim-embed .news-article .pull-left { float: left !important; }.sim-embed .news-article .pull-right { float: right !important; }/* --- bootstrap scaffolding.less ----------------------------------------- */ .sim-embed .news-article img { vertical-align: middle; border: 0; }/* --- bootstrap scaffolding.less:113 (@line-height-computed / @hr-border) - */ .sim-embed .news-article hr { box-sizing: content-box; height: 0; margin-top: 20px; margin-bottom: 20px; border: 0; border-top: 1px solid #eee; }/* --- news-simulation.less:274 ------------------------------------------- */ .sim-embed .news-article .banner { width: 100%; max-height: 500px; }.sim-embed .news-article .banner img { width: 100%; max-height: 250px; }/* --- news-simulation.less:295 ------------------------------------------- */ .sim-embed .news-article .date-details { margin: 0 0 20px 0; font-size: 12px; }/* --- news-simulation.less:299 ------------------------------------------- */ .sim-embed .news-article .article-heading { font-size: 18px; font-weight: 600; font-family: "merriweather", georgia, serif; }/* --- news-simulation.less:304 ------------------------------------------- */ .sim-embed .news-article .article-journo { font-size: 14px; font-weight: 600; margin-top: 10px; }/* --- news-simulation.less:309 ------------------------------------------- */ .sim-embed .news-article .author-image { max-height: 50px; max-width: 100%; border-radius: 50px; margin-left: 10px; }/* --- news-simulation.less:315, with the .center mixin inlined (mixins.less:22 -> text-align:center; margin:0 auto; vertical-align:middle) */ .sim-embed .news-article .article-image { text-align: center; margin: 0 auto; vertical-align: middle; }.sim-embed .news-article .article-image img { max-width: 100%; max-height: 300px; }/* --- news-simulation.less:322. NOTE: the markup spells the class `artilce-image-caption`, so this rule never actually matches in the platform. Kept for fidelity; the caption

renders unstyled. ------ */ .sim-embed .news-article .article-image-caption { font-size: 12px; font-weight: 200; }/* --- news-simulation.less:326 ------------------------------------------- */ .sim-embed .news-article .article-body { font-family: "merriweather", georgia, serif; }.sim-embed .news-article .article-body img { padding: 10px; }/* --- news-simulation.less:334 ------------------------------------------- */ .sim-embed .news-article .article-social .article-social-item { padding-right: 10px; font-size: 15px; }.sim-embed .news-article .article-social .article-social-item i { margin-right: 2px; }/* --- Font Awesome 4.x base + .fa-lg, real values from font-awesome.less. The icon font itself is an external dependency, so the three glyphs used here are drawn as inline-SVG backgrounds in the inherited text colour (#555) instead of glyphs. Sizing behaviour is unchanged. ----- */ .sim-embed .news-article .fa { display: inline-block; font-size: inherit; width: 1em; height: 1em; background-repeat: no-repeat; background-position: center center; background-size: contain; }.sim-embed .news-article .fa-lg { font-size: 1.33333333em; line-height: 0.75em; vertical-align: -15%; }.sim-embed .news-article .fa-google-plus-official { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='2.2' fill='%23555555'/%3E%3Ctext x='8' y='11.6' text-anchor='middle' font-family='Helvetica Neue, Helvetica, Arial, sans-serif' font-size='9' font-weight='700' fill='%23ffffff'%3Eg%2B%3C/text%3E%3C/svg%3E"); }.sim-embed .news-article .fa-facebook-official { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='2.2' fill='%23555555'/%3E%3Cpath d='M10.6 3.2H9.2c-1.5 0-2.4.9-2.4 2.4v1.2H5.5v2.1h1.3V15h2.2V8.9h1.5l.3-2.1H9V5.7c0-.4.2-.6.6-.6h1V3.2z' fill='%23ffffff'/%3E%3C/svg%3E"); }.sim-embed .news-article .fa-twitter-square { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='2.2' fill='%23555555'/%3E%3Cpath d='M13.4 5.05c-.44.2-.92.33-1.42.39.51-.31.9-.79 1.09-1.37-.48.29-1.01.5-1.58.61-.45-.49-1.1-.79-1.81-.79-1.37 0-2.48 1.12-2.48 2.49 0 .2.02.39.06.57-2.06-.1-3.89-1.1-5.11-2.6-.21.37-.33.79-.33 1.25 0 .86.43 1.62 1.1 2.06-.4-.01-.78-.12-1.11-.31v.03c0 1.21.85 2.22 1.99 2.45-.21.06-.42.09-.65.09-.16 0-.31-.02-.46-.04.31.99 1.23 1.71 2.32 1.73-.85.66-1.92 1.06-3.08 1.06-.2 0-.39-.01-.59-.03 1.11.71 2.43 1.12 3.85 1.12 4.62 0 7.15-3.83 7.15-7.16v-.33c.49-.35.91-.79 1.25-1.3z' fill='%23ffffff'/%3E%3C/svg%3E"); } /* ==================== email ==================== */ /* ========================================================================== SimX EMAIL CLIENT - real platform styles, compiled by hand from LESS -------------------------------------------------------------------------- Sources (nothing here was designed, it was all resolved out of these): O8.SOCOM.Server/Content/socom/email-simulation.less (the module) O8.SOCOM.Server/Content/socom/varibles.less (variable values) O8.SOCOM.Server/Content/socom/window.less (.window-content*) O8.SOCOM.Server/Content/socom/z-index.less (top bar z-index) O8.SOCOM.Server/Content/socom/simulation.less (.html-content-container) O8.SOCOM.Server/Content/socom/themeFix.less (.no-copy) O8.SOCOM.Server/Content/theme/less/general.less (inherited body font) O8.SOCOM.Server/Content/Site.less (global p rule) O8.SOCOM.Server/Content/bootstrap/* (.row/.col-xs-12/.btn subset) O8.SOCOM.Server/Content/angular-material.layout-attributes.css ([layout]/[flex]) O8.SOCOM.Server/Content/angular-material.css (.md-virtual-repeat-*) LESS variables substituted with their declared values (varibles.less): @emailTopBarHeight 44px @window-grey #a7adba @window-grey-gradient2 rgb(198,198,198) @window-grey-gradient3 rgb(170,170,170) @Color1 #2EB6D1 @Color6 #414FD5 ========================================================================== */ /* -------------------------------------------------------------------------- HOST SCAFFOLDING - not platform CSS. In the app the module is transcluded into a Kendo window, which supplies a positioned box of the size declared on in email.html. This reproduces that box only. -------------------------------------------------------------------------- */ .sim-embed .extracted-host { position: relative; width: 100%; max-width: 1024px; height: 550px; overflow: hidden; background: #fff; }/* -------------------------------------------------------------------------- INHERITED PAGE DEFAULTS - Content/theme/less/general.less `body` and Site.less `p`, scoped to the module so the snippet renders with the same metrics it has inside the app. ('Open Sans' is loaded app-wide; the fallbacks are Bootstrap's @font-family-sans-serif.) -------------------------------------------------------------------------- */ .sim-embed .extracted-host, .sim-embed .email-window { font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 12px; color: #555; }.sim-embed .email-window p { font-weight: 500; font-size: 14px; margin: 0 0 10px; /* bootstrap type.less: 0 0 (@line-height-computed / 2) */ }.sim-embed .email-window h1 { font-family: inherit; line-height: 1.1; }.sim-embed .email-window ul { margin-top: 0; margin-bottom: 10px; }.sim-embed .email-window button { /* bootstrap normalize.less */ color: inherit; font: inherit; margin: 0; text-transform: none; -webkit-appearance: button; cursor: pointer; overflow: visible; }/* -------------------------------------------------------------------------- BOOTSTRAP SUBSET - written out here so the snippet needs no Bootstrap. Values from Content/bootstrap/variables.less: @grid-gutter-width 30px, @padding-base-vertical 6px, @padding-base-horizontal 12px, @font-size-base 14px, @line-height-base 1.428571429, @border-radius-base 4px, @btn-font-weight normal -------------------------------------------------------------------------- */ .sim-embed .email-window .row { margin-left: -15px; margin-right: -15px; }.sim-embed .email-window .row:before, .sim-embed .email-window .row:after { content: " "; display: table; }.sim-embed .email-window .row:after { clear: both; }.sim-embed .email-window .col-xs-12 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; float: left; width: 100%; }.sim-embed .email-window .btn { display: inline-block; margin-bottom: 0; font-weight: normal; text-align: center; vertical-align: middle; touch-action: manipulation; cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap; padding: 6px 12px; font-size: 14px; line-height: 1.428571429; border-radius: 4px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }.sim-embed .email-window .pull-right { float: right !important; }/* -------------------------------------------------------------------------- ANGULAR MATERIAL LAYOUT ATTRIBUTES - the handful of rules the markup's layout="row" / layout="column" / layout-fill / flex attributes depend on, copied verbatim from angular-material.layout-attributes.css. -------------------------------------------------------------------------- */ .sim-embed .email-window [layout], .sim-embed .email-window [layout="column"], .sim-embed .email-window [layout="row"] { box-sizing: border-box; display: flex; }.sim-embed .email-window [layout="column"] { flex-direction: column; }.sim-embed .email-window [layout="row"] { flex-direction: row; }.sim-embed .email-window [flex] { flex: 1; box-sizing: border-box; }.sim-embed .email-window [layout-fill] { margin: 0; width: 100%; min-height: 100%; height: 100%; }/* angular-material.css - md-virtual-repeat scroll container used by #mail-list */ .sim-embed .md-virtual-repeat-container { box-sizing: border-box; display: block; margin: 0; overflow: hidden; padding: 0; position: relative; }.sim-embed .md-virtual-repeat-container .md-virtual-repeat-scroller { bottom: 0; box-sizing: border-box; left: 0; margin: 0; overflow-x: hidden; padding: 0; position: absolute; right: 0; top: 0; -webkit-overflow-scrolling: touch; }.sim-embed .md-virtual-repeat-container .md-virtual-repeat-sizer { box-sizing: border-box; height: 1px; display: block; margin: 0; padding: 0; width: 1px; }.sim-embed .md-virtual-repeat-container .md-virtual-repeat-offsetter { box-sizing: border-box; left: 0; margin: 0; padding: 0; position: absolute; right: 0; top: 0; }/* -------------------------------------------------------------------------- window.less -------------------------------------------------------------------------- */ .sim-embed .window-content-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }.sim-embed .window-content-container .window-content-inner-container { overflow: auto; height: 100%; }.sim-embed .window-content { padding: 10px; /* overridden below by the email module */ }/* themeFix.less */ .sim-embed .no-copy *, .sim-embed .no-copy { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }/* simulation.less */ .sim-embed .html-content-container img { max-width: 100%; max-height: 100%; }/* ========================================================================== email-simulation.less - flattened ========================================================================== */ .sim-embed .email-window { height: 100%; }.sim-embed .email-window .container { width: 100%; }.sim-embed .email-window .window-content { padding: 44px 0 0 0; /* @emailTopBarHeight */ height: 100%; box-sizing: border-box; }/* ---- top bar ------------------------------------------------------------ */ .sim-embed .email-window .email-top-bar { position: absolute; top: 0; left: 0; width: 100%; height: 44px; /* @emailTopBarHeight */ margin: 0; border-bottom: solid 1px rgb(170,170,170); /* @window-grey-gradient3 */ background: rgb(198,198,198); /* @window-grey-gradient2 */ background: linear-gradient(rgb(198,198,198), rgb(170,170,170)); z-index: 5; /* z-index.less */ }.sim-embed .email-window .top-bar-btn { display: inline-block; color: black; width: 60px; height: 30px; font-size: 20px; border-radius: 5px; box-shadow: #B3B3B3 1px 1px 1px; margin: 5px; border-style: solid; border: solid 1px rgb(120,120,120); background-color: rgb(222,222,222); }.sim-embed .email-window .top-bar-btn.btn { padding: 0; }.sim-embed .email-window .top-bar-btn.btn i { font-size: inherit; }.sim-embed .email-window .top-bar-btn.disabled { cursor: default; opacity: 0.4; filter: alpha(opacity=40); }.sim-embed .email-window .top-bar-btn:active { box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.8); outline: none; }.sim-embed .email-window .top-bar-btn:hover { outline: none; border: 1px solid #2EB6D1; /* @Color1 */ }/* ---- mailbox rail ------------------------------------------------------- */ .sim-embed .email-window #mailbox-bar { height: 100%; width: 100px; padding: 0; background: rgb(225,228,235); background: linear-gradient(rgb(225,228,235), rgb(213,220,228)); }.sim-embed .email-window #mailbox-bar h1 { color: rgb(115,124,140); font-size: 14px; font-weight: bold; margin: 10px 0; margin-left: 10px; }.sim-embed .email-window #mailbox-bar ul { padding: 0; }.sim-embed .email-window #mailbox-bar li { color: black; font-size: 14px; display: block; padding-left: 15px; line-height: 20px; }.sim-embed .email-window #mailbox-bar li:before { margin-right: 10px; }.sim-embed .email-window #mailbox-bar li:hover { cursor: pointer; background-color: rgb(187,196,219); /* the LESS also sets `background-color: -webkit-linear-gradient(...)` here, which is not a valid background-color value and is dropped by the browser. Left out rather than reproduced as dead CSS. */ }.sim-embed .email-window #mailbox-bar li.mailbox-active { background-color: #a7adba; /* @window-grey */ }.sim-embed .email-window #mailbox-bar .email-count { display: inline-block; border-radius: 50%; background: black; color: white; width: 13px; height: 13px; line-height: 12px; text-align: center; font-size: 10px; }/* ---- message list ------------------------------------------------------- */ .sim-embed .email-window #mail-list { border-right: 1px solid grey; border-left: 1px solid grey; height: 100%; width: 350px; }.sim-embed .email-window #mail-list .email-preview { cursor: pointer; border-bottom: solid 1px grey; max-height: 120px; overflow: hidden; position: relative; padding: 5px 10px; }.sim-embed .email-window #mail-list .email-preview.unread { border-left: 5px solid #414FD5; /* @Color6 */ }.sim-embed .email-window #mail-list .email-preview .email-preview-inner-container { overflow: hidden; min-height: 80px; }.sim-embed .email-window #mail-list .email-preview .email-preview-inner-container .email-preview-header { max-height: 40px; }.sim-embed .email-window #mail-list .email-preview .email-preview-inner-container .email-preview-sender { font-size: 12pt; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }.sim-embed .email-window #mail-list .email-preview .email-preview-inner-container .email-preview-sender.read { font-weight: 600; }.sim-embed .email-window #mail-list .email-preview .email-preview-inner-container .email-preview-sender.unread { font-weight: 800; }.sim-embed .email-window #mail-list .email-preview .email-preview-inner-container .email-preview-subject, .sim-embed .email-window #mail-list .email-preview .email-preview-inner-container .email-preview-time { font-weight: bold; color: #414FD5; /* @Color6 */ font-size: 10pt; }.sim-embed .email-window #mail-list .email-preview .email-preview-inner-container .email-preview-body { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: grey; padding-left: 15px; font-size: 10pt; }.sim-embed .email-window #mail-list .email-preview .email-preview-inner-container .email-preview-time { display: inline-block; float: right; margin-left: 5px; }.sim-embed .email-window #mail-list .email-preview .email-preview-inner-container .email-preview-time.unread { font-weight: bold; }.sim-embed .email-window #mail-list .email-preview:hover { background: rgba(55,116,221,0.6); }.sim-embed .email-window #mail-list .email-preview.active { background-color: rgb(55,116,221); }.sim-embed .email-window #mail-list .email-preview.active .email-preview-time, .sim-embed .email-window #mail-list .email-preview.active .email-preview-sender, .sim-embed .email-window #mail-list .email-preview.active .email-preview-subject, .sim-embed .email-window #mail-list .email-preview.active .email-preview-body { color: #fff; }/* ---- reading pane ------------------------------------------------------- */ .sim-embed .email-window .email-reader { height: 100%; overflow-x: none; /* verbatim from the LESS; not a valid value */ overflow-y: auto; padding: 10px; background-color: rgb(198,198,198); /* @window-grey-gradient2 */ }.sim-embed .email-window .email-reader .email-from { font-size: 11pt; font-weight: 800; }.sim-embed .email-window .email-reader .email-subject { font-size: 10pt; font-weight: 700; }.sim-embed .email-window .email-reader .email-date { color: #414FD5; /* @Color6 */ }.sim-embed .email-window .email-container { box-shadow: 10px 10px 9px 0px rgba(0,0,0,0.5); padding: 10px; margin-top: 10px; margin-bottom: 10px; background: white; }.sim-embed .email-window .email-container .email-attachments-label { font-size: 13px; }.sim-embed .email-window .email-container img { max-width: 100%; }.sim-embed .email-window .current-email-header { position: relative; margin-top: 10px; }.sim-embed .email-window .current-email-header b.sender-email { font-weight: 800; }.sim-embed .email-window .current-email-header .email-header-label { display: inline-block; margin-right: 10px; width: 50px; text-align: right; color: gray; font-weight: bold; }.sim-embed .email-window .current-email-header:after { content: ""; position: absolute; left: 0; bottom: -10px; height: 1px; width: 90%; margin-left: 5%; border-bottom: 1px solid grey; }.sim-embed .email-window .current-email-content { margin-top: 20px; padding: 10px 20px; }.sim-embed .email-window .email-header-attachments { padding: 10px 20px; }.sim-embed .email-window .email-header-attachments .current-email-attachments button { padding: 10px; background: white; border-radius: 5px; border: 1px solid grey; }.sim-embed .email-window .email-header-attachments .current-email-attachments button:hover { border: 1px solid black; }/* ========================================================================== ICON SHIM - SUBSTITUTION, read this before judging it. The platform serves Font Awesome 4 locally (Content/fonts/font-awesome-4) and paints glyphs as `.fa-envelope:before { content: "\f0e0" }`. A self-contained snippet cannot load that font file, so the real .fa / .fa-lg metrics are kept and each glyph is drawn by an inline-SVG background of the same shape and colour. The HTML is untouched: still , exactly as the platform emits it. Swap this block for the real font-face if the landing page ever ships FA. Original codepoints, for the record: envelope f0e0, reply/mail-reply f112, mail-reply-all f122, mail-forward f064, paperclip f0c6, pencil f040, trash f1f8, book f02d, inbox f01c, paper-plane f1d8. ========================================================================== */ .sim-embed .email-window .fa { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* shim geometry */ width: 1em; height: 1em; vertical-align: -0.125em; background-repeat: no-repeat; background-position: center center; background-size: contain; }.sim-embed .email-window .fa-lg { font-size: 1.33333333em; line-height: 0.75em; vertical-align: -15%; }.sim-embed .email-window .fa-2x { font-size: 2em; }/* toolbar + mailbox rail icons inherit `color: black` */ .sim-embed .email-window .fa-pencil { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='m4 20 1-4L16.4 4.6a2.1 2.1 0 0 1 3 3L8 19l-4 1Z'/%3E%3C/svg%3E"); }.sim-embed .email-window .fa-mail-reply { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M9 4 3 9l6 5M6 9h8a6 6 0 0 1 6 6v2'/%3E%3C/svg%3E"); }.sim-embed .email-window .fa-mail-reply-all { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M7 4 2 9l5 5M12 4 7 9l5 5M9 9h6a6 6 0 0 1 6 6v2'/%3E%3C/svg%3E"); }.sim-embed .email-window .fa-mail-forward { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M15 4l6 5-6 5M18 9h-8a6 6 0 0 0-6 6v2'/%3E%3C/svg%3E"); }.sim-embed .email-window .fa-trash { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 6h16M9 6V3.5h6V6M6 6l1 14.5h10L18 6M10 10v7M14 10v7'/%3E%3C/svg%3E"); }.sim-embed .email-window .fa-book { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round' d='M5 3.5h11a2 2 0 0 1 2 2v15H7a2 2 0 0 1-2-2v-15ZM5 17.5h13'/%3E%3C/svg%3E"); }.sim-embed .email-window .fa-inbox { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 13h5l1.5 3h5L16 13h5M3 13l3-8h12l3 8v6H3v-6Z'/%3E%3C/svg%3E"); }.sim-embed .email-window .fa-paper-plane { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22 2 1.5 10.5l6.8 2.7L11 21l3.2-6.6L22 2Z'/%3E%3C/svg%3E"); }/* list + reader indicators inherit the body colour #555 (note: the platform does not recolour .email-not-read on the blue active row either) */ .sim-embed .email-window .fa-envelope { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 18'%3E%3Cpath fill='%23555' d='M0 3.2 12 11 24 3.2V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v1.2Z'/%3E%3Cpath fill='%23555' d='M24 5.6 12 13.3 0 5.6V16a2 2 0 0 0 2 2h20a2 2 0 0 0 2-2V5.6Z'/%3E%3C/svg%3E"); }.sim-embed .email-window .fa-reply { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M9 4 3 9l6 5M6 9h8a6 6 0 0 1 6 6v2'/%3E%3C/svg%3E"); }.sim-embed .email-window .fa-paperclip { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M20 11.5 11.9 19.6a4.5 4.5 0 0 1-6.4-6.4l8.5-8.5a3 3 0 0 1 4.3 4.3l-8.5 8.5a1.5 1.5 0 0 1-2.2-2.2l7.6-7.6'/%3E%3C/svg%3E"); }