API tools faq
paste
dimaslanjaka

notable template blogger

dimaslanjaka
Apr 8th, 2017
636
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
XML 162.08 KB | None | 0 0
raw download clone embed print report
  1. <?xml version="1.0" encoding="UTF-8" ?>
  2. <!DOCTYPE html>
  3. <html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true' b:templateUrl='rockpool.xml' b:templateVersion='1.0.0' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
  4.   <head>
  5.   <!--noindex search label-->
  6.   <b:if cond='data:blog.searchLabel'> <meta content='noindex,nofollow' name='robots'/> </b:if>
  7.     <meta content='width=device-width, initial-scale=1' name='viewport'/>
  8.     <title><data:view.title.escaped/></title>
  9.     <b:include data='blog' name='all-head-content'/>
  10.  
  11.     <b:skin version='1.0.0'><![CDATA[/*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}/*
  12. <!-- Constants -->
  13.  
  14. <Variable name="loraNormal20" description="Item body font" type="font" default="400 20px Lora, serif" hideEditor="true"  value="400 20px Lora, serif"/>
  15. <Variable name="openSansNormal14" description="Small-size normal-weight font (eg: labels, subscribe popup email)" type="font" default="400 14px Open Sans, sans-serif" hideEditor="true"  value="400 14px Open Sans, sans-serif"/>
  16. <Variable name="openSansNormal16" description="Medium-size normal-weight font (eg: sidebar titles)" type="font" default="400 16px Open Sans, sans-serif" hideEditor="true"  value="400 16px Open Sans, sans-serif"/>
  17. <Variable name="openSansNormal20" description="Item body font, OpenSans" type="font" default="400 20px Open Sans, serif" hideEditor="true"  value="400 20px Open Sans, serif"/>
  18. <Variable name="openSansSemibold14" description="Button font" type="font" default="600 14px Open Sans, sans-serif" hideEditor="true"  value="600 14px Open Sans, sans-serif"/>
  19. <Variable name="openSansSemiboldItalic36" description="Open Sans semibold italic 36" type="font" default="italic 600 36px Open Sans, sans-serif" hideEditor="true"  value="italic 600 36px Open Sans, sans-serif"/>
  20. <Variable name="openSansSemiboldItalic44" description="Blockquote font, Open Sans" type="font" default="italic 600 44px Open Sans, sans-serif" hideEditor="true"  value="italic 600 44px Open Sans, sans-serif"/>
  21. <Variable name="openSansSemibold16" description="Subtitle font (eg: author attribution)" type="font" default="600 16px Open Sans, sans-serif" hideEditor="true"  value="600 16px Open Sans, sans-serif"/>
  22. <Variable name="openSansSemibold48" description="Open Sans semibold 48" type="font" default="600 48px Open Sans, sans-serif" hideEditor="true"  value="600 48px Open Sans, sans-serif"/>
  23. <Variable name="openSansBold16" description="Main blog title font" type="font" default="700 16px Open Sans, sans-serif" hideEditor="true"  value="700 16px Open Sans, sans-serif"/>
  24. <Variable name="openSansBold24" description="Medium-size bold font (eg: subscribe popup title)" type="font" default="700 24px Open Sans, sans-serif" hideEditor="true"  value="700 24px Open Sans, sans-serif"/>
  25. <Variable name="openSansBold36" description="Title font (eg: regular post title)" type="font" default="700 36px Open Sans, sans-serif" hideEditor="true"  value="700 36px Open Sans, sans-serif"/>
  26. <Variable name="openSansExtraboldItalic24" description="Open Sans Extrabold italic 24" type="font" default="italic 800 24px Open Sans, sans-serif" hideEditor="true"  value="italic 800 24px Open Sans, sans-serif"/>
  27. <Variable name="openSansExtraboldItalic40" description="Open Sans Extrabold italic 40" type="font" default="italic 800 40px Open Sans, sans-serif" hideEditor="true"  value="italic 800 40px Open Sans, sans-serif"/>
  28. <Variable name="openSansExtraboldItalic48" description="Open Sans Extrabold italic 48" type="font" default="italic 800 48px Open Sans, sans-serif" hideEditor="true"  value="italic 800 48px Open Sans, sans-serif"/>
  29. <Variable name="ebGaramondNormal14" description="Blog Description font, EB Garamond" type="font" default="400 14px EB Garamond, serif" hideEditor="true"  value="400 14px EB Garamond, serif"/>
  30. <Variable name="ebGaramondNormal24" description="EB Garamond Normal 24" type="font" default="400 24px EB Garamond, serif" hideEditor="true"  value="400 24px EB Garamond, serif"/>
  31. <Variable name="ebGaramondNormal44" description="Title font (eg: regular post title), EB Garamond" type="font" default="400 44px EB Garamond, serif" hideEditor="true"  value="400 44px EB Garamond, serif"/>
  32. <Variable name="ebGaramondNormal48" description="EB Garamond Normal 48" type="font" default="400 48px EB Garamond, sans-serif" hideEditor="true"  value="400 48px EB Garamond, sans-serif"/>
  33. <Variable name="ebGaramondSemiboldItalic44" description="Blockquote font, EB Garamond" type="font" default="italic 600 44px EB Garamond, serif" hideEditor="true"  value="italic 600 44px EB Garamond, serif"/>
  34. <Variable name="latoNormal14" description="Lato Normal 14" type="font" default="400 14px Lato, sans-serif" hideEditor="true"  value="400 14px Lato, sans-serif"/>
  35. <Variable name="latoNormal16" description="Lato Normal 16" type="font" default="400 16px Lato, sans-serif" hideEditor="true"  value="400 16px Lato, sans-serif"/>
  36. <Variable name="latoNormal20" description="Lato Normal 20" type="font" default="400 20px Lato, sans-serif" hideEditor="true"  value="400 20px Lato, sans-serif"/>
  37. <Variable name="latoBold14" description="Lato Bold 14" type="font" default="700 14px Lato, sans-serif" hideEditor="true"  value="700 14px Lato, sans-serif"/>
  38. <Variable name="latoBold16" description="Lato Bold 16" type="font" default="700 16px Lato, sans-serif" hideEditor="true"  value="700 16px Lato, sans-serif"/>
  39. <Variable name="latoBold24" description="Lato Bold 24" type="font" default="700 24px Lato, sans-serif" hideEditor="true"  value="700 24px Lato, sans-serif"/>
  40. <Variable name="latoBold36" description="Lato Bold 36" type="font" default="700 36px Lato, sans-serif" hideEditor="true"  value="700 36px Lato, sans-serif"/>
  41. <Variable name="latoBold48" description="Lato Bold 48" type="font" default="700 48px Lato, sans-serif" hideEditor="true"  value="700 48px Lato, sans-serif"/>
  42. <Variable name="latoBoldItalic36" description="Lato Bold italic 36" type="font" default="italic 700 36px Lato, sans-serif" hideEditor="true"  value="italic 700 36px Lato, sans-serif"/>
  43. <Variable name="latoExtrabold24" description="Lato Extrabold 24" type="font" default="900 24px Lato, sans-serif" hideEditor="true"  value="900 24px Lato, sans-serif"/>
  44. <Variable name="dancingScriptNormal36" description="Dancing Script 36" type="font" default="400 36px Dancing Script, cursive" hideEditor="true"  value="400 36px Dancing Script, cursive"/>
  45. <Variable name="dancingScriptNormal44" description="Dancing Script 44" type="font" default="400 44px Dancing Script, cursive" hideEditor="true"  value="400 44px Dancing Script, cursive"/>
  46. <Variable name="dancingScriptNormal48" description="Dancing Script 48" type="font" default="400 48px Dancing Script, cursive" hideEditor="true"  value="400 48px Dancing Script, cursive"/>
  47.  
  48. <Variable name="keycolor" description="Main Color" type="color" default="#e5f0ee" hideEditor="true"  value="#e5f0ee"/>
  49. <Variable name="startSide" description="Start side in blog language" type="automatic" default="left" hideEditor="true"  value="left"/>
  50. <Variable name="endSide" description="End side in blog language" type="automatic" default="right" hideEditor="true"  value="right"/>
  51.  
  52. <!-- Variable definitions -->
  53.  
  54. <Group description="Body">
  55.  <Variable name="body.background" description="Background" color="$(body.background.color)" type="background" default="$(color) none repeat scroll top left"  value="$(color) none repeat scroll top left"/>
  56.  <Variable name="body.background.color" description="Body background color" type="color" default="#fff"  value="#ffffff"/>
  57.  <Variable name="body.text.font" description="Font" type="font" default="$(loraNormal20)"  value="400 20px Lora, serif"/>
  58.  <Variable name="body.text.color" description="Color" type="color" default="rgba(0,0,0,0.84)"  value="rgba(0,0,0,0.84)"/>
  59.  <Variable name="body.link.color" description="Link color" type="color" default="#25a186"  value="#25a186"/>
  60.  <Variable name="body.link.visited.color" description="Visited link color" type="color" default="$(body.link.color)"  value="#25a186"/>
  61.  <Variable name="body.link.hover.color" description="Link Hover Color" type="color" default="$(body.link.color)"  value="#25a186"/>
  62.  <Variable name="blog.title.font" description="Blog Title Font" type="font" default="$(openSansBold24)"  value="700 24px Open Sans, sans-serif"/>
  63.  <Variable name="blog.title.color" description="Blog Title Color" type="color" default="#000"  value="#000000"/>
  64. </Group>
  65.  
  66. <Group description="Hero post" selector=".heroPost">
  67.  <Variable name="heropost.main.background.color" description="Post background color" type="color" default="#25a186"  value="#25a186"/>
  68.  <Variable name="heropost.main.title.color" description="Post title color" type="color" default="#fff"  value="#ffffff"/>
  69.  <Variable name="heropost.main.text.color" description="Post main text color" type="color" default="#fff"  value="#ffffff"/>
  70.  <Variable name="heropost.main.button.color" description="Post main buttons color" type="color" default="#fff"  value="#ffffff"/>
  71.  <Variable name="heropost.main.link.color" description="Hero post main link color" type="color" default="#173752"  value="#173752"/>
  72.  <Variable name="heropost.secondary.background.color" description="Post background color (secondary)" type="color" default="#e5f0ee"  value="#e5f0ee"/>
  73.  <Variable name="heropost.secondary.text.color" description="Post text color (secondary)" type="color" default="#000"  value="#000000"/>
  74.  <Variable name="heropost.secondary.button.color" description="Post buttons color (secondary)" type="color" default="#25a186"  value="#25a186"/>
  75.  <Variable name="heropost.secondary.dropcap.color" description="Post drop cap color (secondary)" type="color" default="$(heropost.secondary.button.color)"  value="#25a186"/>
  76. </Group>
  77.  
  78. <Group description="Header" selector=".centered-top-container">
  79.  <Variable name="header.background" description="Header Background" color="$(header.background.color)" type="background" default="$(color) none repeat scroll top left"  value="$(color) none repeat scroll top left"/>
  80.  <Variable name="header.background.color" description="Background color" type="color" default="#fff"  value="#ffffff"/>
  81.  <Variable name="header.description.font" description="Description font" type="font" default="$(openSansNormal14)"  value="400 14px Open Sans, sans-serif"/>
  82.  <Variable name="header.description.color" description="Description color" type="color" default="rgba(0,0,0,0.54)"  value="rgba(0,0,0,0.54)"/>
  83.  <Variable name="header.pages.color" description="Page list color" type="color" default="#25a186"  value="#25a186"/>
  84.  <Variable name="header.pages.selected.color" description="Page list color (selected page)" type="color" default="$(header.pages.color)"  value="#25a186"/>
  85.  <Variable name="header.items.color" description="Text color" type="color" default="#25a186"  value="#25a186"/>
  86.  <Variable name="header.items.font" description="Text font" type="font" default="$(openSansSemibold14)"  value="600 14px Open Sans, sans-serif"/>
  87. </Group>
  88.  
  89. <Group description="Search">
  90.  <Variable name="search.input.font" description="Input font" type="font" default="$(openSansSemibold16)"  value="600 16px Open Sans, sans-serif"/>
  91. </Group>
  92.  
  93. <Group description="Feed" selector=".widget.Blog">
  94.  <Variable name="feed.width" description="Post feed width" type="length" min="300px" max="1440px" default="1280px"  value="1280px"/>
  95.  <Variable name="feed.title.font" description="Post title font" type="font" default="$(openSansBold36)"  value="700 36px Open Sans, sans-serif"/>
  96.  <Variable name="feed.title.color" description="Post title color" type="color" default="#25a186"  value="#25a186"/>
  97.  <Variable name="feed.subtitle.font" description="Post subtitle font" type="font" default="$(openSansSemibold16)"  value="600 16px Open Sans, sans-serif"/>
  98.  <Variable name="feed.subtitle.color" description="Post subtitle color" type="color" default="rgba(0,0,0,0.54)"  value="rgba(0,0,0,0.54)"/>
  99.  <Variable name="feed.text.font" description="Post text font" type="font" default="$(loraNormal20)"  value="400 20px Lora, serif"/>
  100.  <Variable name="feed.text.color" description="Post text color" type="color" default="rgba(0,0,0,0.84)"  value="rgba(0,0,0,0.84)"/>
  101.  <Variable name="feed.button.font" description="Button font" type="font" default="$(openSansSemibold14)"  value="600 14px Open Sans, sans-serif"/>
  102.  <Variable name="feed.button.color" description="Button color" type="color" default="#25a186"  value="#25a186"/>
  103. </Group>
  104.  
  105. <Group description="Sharing" selector=".sharing">
  106.  <Variable name="sharing.background.color"
  107.      description="Sharing background color"
  108.      type="color"
  109.      default="$(body.background.color)"  value="#ffffff"/>
  110.  <Variable name="sharing.text.color" description="Sharing text color"
  111.      type="color"
  112.      default="$(feed.button.color)"  value="#25a186"/>
  113.  <Variable name="sharing.icons.color"
  114.      description="Sharing icons color"
  115.      type="color"
  116.      default="$(sharing.text.color)"  value="#25a186"/>
  117. </Group>
  118.  
  119. <Group description="Dialogs" selector=".subscribe-popup">
  120.  <Variable name="dialog.title.font" description="Dialog title font" type="font" default="$(openSansBold24)"  value="700 24px Open Sans, sans-serif"/>
  121.  <Variable name="dialog.title.color" description="Dialog title color" type="color" default="rgba(0,0,0,0.84)"  value="rgba(0,0,0,0.84)"/>
  122.  <Variable name="dialog.input.font" description="Dialog input font" type="font" default="$(openSansNormal14)"  value="400 14px Open Sans, sans-serif"/>
  123.  <Variable name="dialog.input.color" description="Dialog input color" type="color" default="rgba(0,0,0,0.84)"  value="rgba(0,0,0,0.84)"/>
  124.  <Variable name="dialog.action.font" description="Dialog action font" type="font" default="$(openSansSemibold14)"  value="600 14px Open Sans, sans-serif"/>
  125.  <Variable name="dialog.action.color" description="Dialog action color" type="color" default="$(feed.button.color)"  value="#25a186"/>
  126. </Group>
  127.  
  128. <Group description="Individual Post or Page" selector="body.item-page .widget.Blog">
  129.  <Variable name="item.title.font" description="Font" type="font" default="$(openSansSemibold48)"  value="600 48px Open Sans, sans-serif"/>
  130.  <Variable name="item.title.color" description="Post title color" type="color" default="#fff"  value="#ffffff"/>
  131.  <Variable name="item.title.background.color" description="Post title background color" type="color" default="#25a186"  value="#25a186"/>
  132.  <Variable name="item.subtitle.font" description="Post subtitle font" type="font" default="$(openSansSemibold16)"  value="600 16px Open Sans, sans-serif"/>
  133.  <Variable name="item.subtitle.color" description="Post subtitle color" type="color" default="rgba(0,0,0,0.54)"  value="rgba(0,0,0,0.54)"/>
  134.  <Variable name="item.byline.color" description="Post byline color" type="color" default="#25a186"  value="#25a186"/>
  135.  <Variable name="item.byline.font" description="Post byline font" type="font" default="$(openSansSemibold14)"  value="600 14px Open Sans, sans-serif"/>
  136.  <Variable name="item.action.color" description="Action color" type="color" default="#25a186"  value="#25a186"/>
  137.  <Variable name="item.action.font" description="Action font" type="font" default="$(openSansSemibold14)"  value="600 14px Open Sans, sans-serif"/>
  138.  <Variable name="item.label.font" description="Label font" type="font" default="$(openSansNormal14)"  value="400 14px Open Sans, sans-serif"/>
  139.  <Variable name="item.blockquote.font" description="Blockquote font" type="font" default="$(openSansSemiboldItalic44)"  value="italic 600 44px Open Sans, sans-serif"/>
  140. </Group>
  141.  
  142. <Group description="Sidebar" selector=".sidebar-container">
  143.  <Variable name="sidebar.width" description="Width" type="length" min="250px" max="420px" default="320px" hideEditor="true"  value="320px"/>
  144.  <Variable name="sidebar.backgroundColor" description="Background color" type="color" default="$(body.background.color)"  value="#ffffff"/>
  145.  <Variable name="sidebar.icon.color" description="Icon color" type="color" default="#000"  value="#000000"/>
  146.  <Variable name="sidebar.separator.color" description="Separator color" type="color" default="#000"  value="#000000"/>
  147.  <Variable name="sidebar.widget.title.font" description="Gadget title font" type="font" default="$(openSansNormal16)"  value="400 16px Open Sans, sans-serif"/>
  148.  <Variable name="sidebar.widget.title.color" description="Gadget title color" type="color" default="#000"  value="#000000"/>
  149.  <Variable name="sidebar.profile.title.color" description="Profile name color" type="color" default="#000"  value="#000000"/>
  150.  <Variable name="sidebar.profile.text.color" description="Profile description color" type="color" default="#000"  value="#000000"/>
  151.  <Variable name="sidebar.profile.link.font" description="Profile link font" type="font" default="$(openSansSemibold16)"  value="600 16px Open Sans, sans-serif"/>
  152.  <Variable name="sidebar.profile.link.color" description="Profile link color" type="color" default="$(body.link.color)"  value="#25a186"/>
  153. </Group>
  154.  
  155.  
  156. <Variable name="attribution.text.font" description="Attribution text font" type="font" default="$(openSansSemibold14)" hideEditor="true"  value="600 14px Open Sans, sans-serif"/>
  157. <Variable name="attribution.icon.color" description="Attribution icon color" type="color" default="rgba(0,0,0,0.54)" hideEditor="true"  value="rgba(0,0,0,0.54)"/>
  158. */
  159. .skip-navigation {
  160.  background-color: #fff;
  161.  box-sizing: border-box;
  162.  color: #000;
  163.  display: block;
  164.  height: 0;
  165.  left: 0;
  166.  line-height: 50px;
  167.  overflow: hidden;
  168.  padding-top: 0;
  169.  position: fixed;
  170.  text-align: center;
  171.  top: 0;
  172.  -webkit-transition: box-shadow .3s , height .3s , padding-top .3s;
  173.  transition: box-shadow .3s , height .3s , padding-top .3s;
  174.  width: 100%;
  175.  z-index: 900;
  176. }
  177. .skip-navigation:focus {
  178.  box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14) , 0 1px 10px 0 rgba(0,0,0,0.12) , 0 2px 4px -1px rgba(0,0,0,0.2);
  179.  height: 50px;
  180. }
  181. #main {
  182.  outline: none;
  183. }
  184. body {
  185.  overflow-wrap: break-word;
  186.  word-break: break-word;
  187.  word-wrap: break-word;
  188. }
  189. .hidden {
  190.  display: none;
  191. }
  192. .invisible {
  193.  visibility: hidden;
  194. }
  195. .container:after, .float-container:after {
  196.  clear: both;
  197.  content: "";
  198.  display: table;
  199. }
  200. .clearboth {
  201.  clear: both;
  202. }
  203. .dim-overlay {
  204.  background-color: rgba(0,0,0,0.54);
  205.  height: 100vh;
  206.  left: 0;
  207.  position: fixed;
  208.  top: 0;
  209.  width: 100%;
  210. }
  211. #sharing-dim-overlay {
  212.  background-color: transparent;
  213. }
  214. .main-heading {
  215.  position: absolute;
  216.  clip: rect(1px,1px,1px,1px);
  217.  padding: 0;
  218.  border: 0;
  219.  height: 1px;
  220.  width: 1px;
  221.  overflow: hidden;
  222. }
  223. .loading-spinner-large {
  224.  -webkit-animation: mspin-rotate 1568.63ms infinite linear;
  225.          animation: mspin-rotate 1568.63ms infinite linear;
  226.  height: 48px;
  227.  overflow: hidden;
  228.  position: absolute;
  229.  width: 48px;
  230.  z-index: 200;
  231. }
  232. .loading-spinner-large>div {
  233.  -webkit-animation: mspin-revrot 5332ms infinite steps(4);
  234.          animation: mspin-revrot 5332ms infinite steps(4);
  235. }
  236. .loading-spinner-large>div>div {
  237.  -webkit-animation: mspin-singlecolor-large-film 1333ms infinite steps(81);
  238.          animation: mspin-singlecolor-large-film 1333ms infinite steps(81);
  239.  background-size: 100%;
  240.  height: 48px;
  241.  width: 3888px;
  242. }
  243. .mspin-black-large>div>div, .mspin-grey_54-large>div>div {
  244.  background-image: url(https://www.blogblog.com/indie/mspin_black_large.svg);
  245. }
  246. .mspin-white-large>div>div {
  247.  background-image: url(https://www.blogblog.com/indie/mspin_white_large.svg);
  248. }
  249. .mspin-grey_54-large {
  250.  opacity: .54;
  251. }
  252. @-webkit-keyframes mspin-singlecolor-large-film {
  253.  0% {
  254.    -webkit-transform: translateX(0);
  255.            transform: translateX(0);
  256.  }
  257.  to {
  258.    -webkit-transform: translateX(-3888px);
  259.            transform: translateX(-3888px);
  260.  }
  261. }
  262. @keyframes mspin-singlecolor-large-film {
  263.  0% {
  264.    -webkit-transform: translateX(0);
  265.            transform: translateX(0);
  266.  }
  267.  to {
  268.    -webkit-transform: translateX(-3888px);
  269.            transform: translateX(-3888px);
  270.  }
  271. }
  272. @-webkit-keyframes mspin-rotate {
  273.  0% {
  274.    -webkit-transform: rotate(0deg);
  275.            transform: rotate(0deg);
  276.  }
  277.  to {
  278.    -webkit-transform: rotate(360deg);
  279.            transform: rotate(360deg);
  280.  }
  281. }
  282. @keyframes mspin-rotate {
  283.  0% {
  284.    -webkit-transform: rotate(0deg);
  285.            transform: rotate(0deg);
  286.  }
  287.  to {
  288.    -webkit-transform: rotate(360deg);
  289.            transform: rotate(360deg);
  290.  }
  291. }
  292. @-webkit-keyframes mspin-revrot {
  293.  0% {
  294.    -webkit-transform: rotate(0deg);
  295.            transform: rotate(0deg);
  296.  }
  297.  to {
  298.    -webkit-transform: rotate(-360deg);
  299.            transform: rotate(-360deg);
  300.  }
  301. }
  302. @keyframes mspin-revrot {
  303.  0% {
  304.    -webkit-transform: rotate(0deg);
  305.            transform: rotate(0deg);
  306.  }
  307.  to {
  308.    -webkit-transform: rotate(-360deg);
  309.            transform: rotate(-360deg);
  310.  }
  311. }
  312. input::-ms-clear {
  313.  display: none;
  314. }
  315. .blogger-logo, .svg-icon-24.blogger-logo {
  316.  fill: #ff9800;
  317.  opacity: 1;
  318. }
  319. .widget.Attribution {
  320.  margin-top: 1em;
  321.  text-align: center;
  322. }
  323. .widget.Attribution .blogger img, .widget.Attribution .blogger svg {
  324.  vertical-align: bottom;
  325. }
  326. .widget.Attribution .blogger img {
  327.  margin-$endSide: .5em;
  328. }
  329. .widget.Attribution div {
  330.  line-height: 24px;
  331.  margin-top: .5em;
  332. }
  333. .widget.Attribution .image-attribution, .widget.Attribution .copyright {
  334.  font-size: .7em;
  335.  margin-top: 1.5em;
  336. }
  337. .item-control {
  338.  display: none;
  339. }
  340. .BLOG_mobile_video_class {
  341.  display: none;
  342. }
  343. .bg-photo {
  344.  background-attachment: scroll !important;
  345. }
  346. body .CSS_LIGHTBOX {
  347.  z-index: 900;
  348. }
  349. .extendable .show-more, .extendable .show-less {
  350.  border-color: $(body.link.color);
  351.  color: $(body.link.color);
  352.  margin-top: 8px;
  353. }
  354. .extendable .show-more.hidden, .extendable .show-less.hidden {
  355.  display: none;
  356. }
  357. .inline-ad {
  358.  display: none;
  359.  max-width: 100%;
  360.  overflow: hidden;
  361. }
  362. .adsbygoogle {
  363.  display: block;
  364. }
  365. #cookieChoiceInfo {
  366.  bottom: 0;
  367.  top: auto;
  368. }
  369. iframe.b-hbp-video {
  370.  border: none;
  371. }
  372. .post-body img {
  373.  max-width: 100%;
  374. }
  375. .post-body iframe {
  376.  max-width: 100%;
  377. }
  378. .post-body a[imageanchor="1"] {
  379.  display: inline-block;
  380. }
  381. .byline {
  382.  margin-$endSide: 1em;
  383. }
  384. .byline:last-child {
  385.  margin-$endSide: 0;
  386. }
  387. .paging-control-container {
  388.  margin-bottom: 16px;
  389. }
  390. .paging-control-container .paging-control {
  391.  display: inline-block;
  392. }
  393. .paging-control-container .paging-control, .paging-control-container .comment-range-text:after {
  394.  color: $(body.link.color);
  395. }
  396. .paging-control-container .paging-control, .paging-control-container .comment-range-text {
  397.  margin-$endSide: 8px;
  398. }
  399. .paging-control-container .comment-range-text:after, .paging-control-container .paging-control:after {
  400.  content: "\b7";
  401.  cursor: default;
  402.  pointer-events: none;
  403. }
  404. .paging-control-container .comment-range-text:last-child:after, .paging-control-container .paging-control:last-child:after {
  405.  content: none;
  406. }
  407. .paging-control-container .comment-range-text:after, .paging-control-container .paging-control:after {
  408.  padding-$startSide: 8px;
  409. }
  410. .byline.reactions iframe {
  411.  height: 20px;
  412. }
  413. .b-notification {
  414.  color: #000;
  415.  background-color: white;
  416.  border-bottom: solid 1px #000;
  417.  box-sizing: border-box;
  418.  padding: 16px 32px;
  419.  text-align: center;
  420. }
  421. .b-notification.visible {
  422.  -webkit-transition: margin-top .3s cubic-bezier(0.4,0.0,0.2,1);
  423.  transition: margin-top .3s cubic-bezier(0.4,0.0,0.2,1);
  424. }
  425. .b-notification.invisible {
  426.  position: absolute;
  427. }
  428. .b-notification-close {
  429.  position: absolute;
  430.  right: 8px;
  431.  top: 8px;
  432. }
  433. .no-posts-message {
  434.  line-height: 40px;
  435.  text-align: center;
  436. }
  437. .z {
  438.  left: 0; } @media screen and (max-width: 968px) {.z { left: 0;
  439. }
  440. body.item-view .post-body a[imageanchor="1"][style*="float: left;"], body.item-view .post-body a[imageanchor="1"][style*="float: right;"] {
  441.  float: none !important;
  442.  clear: none !important;
  443. }
  444. body.item-view .post-body a[imageanchor="1"] img {
  445.  display: block;
  446.  height: auto;
  447.  margin: 0 auto;
  448. }
  449. body.item-view .post-body a[imageanchor="1"][style*="float: left;"] img, body.item-view .post-body .separator[style*="text-align: left"] a[imageanchor="1"] img {
  450.  margin: 0 auto 0 0;
  451. }
  452. body.item-view .post-body a[imageanchor="1"][style*="float: right;"] img, body.item-view .post-body .separator[style*="text-align: right"] a[imageanchor="1"] img {
  453.  margin: 0 0 0 auto;
  454. }
  455. .post-body a[imageanchor] {
  456.  display: block;
  457. }
  458. body.item-view .post-body a[imageanchor="1"] {
  459.  margin-left: 0 !important;
  460.  margin-right: 0 !important;
  461. }
  462. body.item-view .post-body a[imageanchor="1"]+a[imageanchor="1"] {
  463.  margin-top: 16px;
  464. }
  465. .z {
  466.  left: 0; } } .z { left: 0;
  467. }
  468. #comments {
  469.  border-top: 1px dashed rgba(0,0,0,0.54);
  470.  margin-top: 20px;
  471.  padding: 20px;
  472. }
  473. #comments .comment-thread ol {
  474.  margin: 0;
  475.  padding-left: 0;
  476. }
  477. #comments .comment-thread ol {
  478.  padding-$startSide: 0;
  479. }
  480. #comments .comment-thread .comment-replies, #comments .comment .comment-replybox-single {
  481.  margin-left: 60px;
  482. }
  483. #comments .comment-thread .thread-count {
  484.  display: none;
  485. }
  486. #comments .comment {
  487.  list-style-type: none;
  488.  padding: 0 0 30px;
  489.  position: relative;
  490. }
  491. #comments .comment .comment {
  492.  padding-bottom: 8px;
  493. }
  494. .comment .avatar-image-container {
  495.  position: absolute;
  496. }
  497. .comment .avatar-image-container img {
  498.  border-radius: 50%;
  499. }
  500. .avatar-image-container svg, .comment .avatar-image-container .avatar-icon {
  501.  border-radius: 50%;
  502.  border: solid 1px $(item.action.color);
  503.  box-sizing: border-box;
  504.  fill: $(item.action.color);
  505.  height: 35px;
  506.  margin: 0;
  507.  padding: 7px;
  508.  width: 35px;
  509. }
  510. .comment .comment-block {
  511.  margin-top: 10px;
  512.  padding-bottom: 0;
  513. }
  514. .comment .comment-block {
  515.  margin-$startSide: 60px;
  516. }
  517. #comments .comment-author-header-wrapper {
  518.  margin-left: 40px;
  519. }
  520. #comments .comment .thread-expanded .comment-block {
  521.  padding-bottom: 20px;
  522. }
  523. #comments .comment .comment-header .user, #comments .comment .comment-header .user a {
  524.  color: $(body.text.color);
  525.  font-style: normal;
  526.  font-weight: bold;
  527. }
  528. #comments .comment .comment-actions {
  529.  background: transparent;
  530.  border: none;
  531.  box-shadow: none;
  532.  color: $(body.link.color);
  533.  cursor: pointer;
  534.  font-size: 14px;
  535.  font-weight: bold;
  536.  outline: none;
  537.  text-decoration: none;
  538.  text-transform: uppercase;
  539.  width: auto;
  540.  bottom: 0;
  541.  margin-bottom: 15px;
  542.  position: absolute;
  543. }
  544. #comments .comment .comment-actions>* {
  545.  margin-right: 8px;
  546. }
  547. #comments .comment .comment-header .datetime {
  548.  bottom: 0;
  549.  color: rgba(0,0,0,0.54);
  550.  display: inline-block;
  551.  font-size: 13px;
  552.  font-style: italic;
  553. }
  554. #comments .comment .comment-header .datetime {
  555.  margin-$startSide: 8px;
  556. }
  557. #comments .comment .comment-header .datetime a, #comments .comment .comment-footer .comment-timestamp a {
  558.  color: rgba(0,0,0,0.54);
  559. }
  560. .comment .comment-body, #comments .comment .comment-content {
  561.  margin-top: 12px;
  562.  word-break: break-word;
  563. }
  564. .comment-body {
  565.  margin-bottom: 12px;
  566. }
  567. #comments.embed[data-num-comments="0"] {
  568.  border: none;
  569.  margin-top: 0;
  570.  padding-top: 0;
  571. }
  572. #comments.embed[data-num-comments="0"] #comment-post-message, #comments.embed[data-num-comments="0"] div.comment-form>p, #comments.embed[data-num-comments="0"] p.comment-footer {
  573.  display: none;
  574. }
  575. #comment-editor-src {
  576.  display: none;
  577. }
  578. .comments .comments-content .loadmore.loaded {
  579.  max-height: 0;
  580.  opacity: 0;
  581.  overflow: hidden;
  582. }
  583. .extendable .remaining-items {
  584.  height: 0;
  585.  overflow: hidden;
  586.  -webkit-transition: height .3s cubic-bezier(0.4,0.0,0.2,1);
  587.  transition: height .3s cubic-bezier(0.4,0.0,0.2,1);
  588. }
  589. .extendable .remaining-items.expanded {
  590.  height: auto;
  591. }
  592. .svg-icon-24, .svg-icon-24-button {
  593.  cursor: pointer;
  594.  height: 24px;
  595.  width: 24px;
  596.  min-width: 24px;
  597. }
  598. .touch-icon {
  599.  margin: -12px;
  600.  padding: 12px;
  601. }
  602. html[dir=rtl] .rtl-reversible-icon {
  603.  -webkit-transform: scaleX(-1);
  604.      -ms-transform: scaleX(-1);
  605.          transform: scaleX(-1);
  606. }
  607. svg:not(:root).touch-icon {
  608.  overflow: visible;
  609. }
  610. .touch-icon:focus, .touch-icon:active {
  611.  background-color: rgba(153,153,153,.4);
  612.  border-radius: 50%;
  613. }
  614. .touch-icon-button, .svg-icon-24-button {
  615.  background: transparent;
  616.  border: none;
  617.  margin: 0;
  618.  outline: none;
  619.  padding: 0;
  620. }
  621. .touch-icon-button .touch-icon:focus, .touch-icon-button .touch-icon:active {
  622.  background-color: transparent;
  623. }
  624. .touch-icon-button:focus .touch-icon, .touch-icon-button:active .touch-icon {
  625.  background-color: rgba(153,153,153,.4);
  626.  border-radius: 50%;
  627. }
  628. .widget.Profile .default-avatar-wrapper .avatar-icon {
  629.  border-radius: 50%;
  630.  border: solid 1px $(sidebar.icon.color);
  631.  box-sizing: border-box;
  632.  fill: $(sidebar.icon.color);
  633.  margin: 0;
  634. }
  635. .widget.Profile .individual .profile-img, .widget.Profile .individual .avatar-icon {
  636.  height: 120px;
  637.  width: 120px;
  638. }
  639. .widget.Profile .team .profile-img, .widget.Profile .team .avatar-icon, .widget.Profile .team .default-avatar-wrapper {
  640.  height: 40px;
  641.  width: 40px;
  642. }
  643. .widget.Profile .individual .default-avatar-wrapper .avatar-icon {
  644.  padding: 25px;
  645. }
  646. .widget.Profile .team .default-avatar-wrapper .avatar-icon {
  647.  padding: 8px;
  648. }
  649. .snippet-container {
  650.  margin: 0;
  651.  position: relative;
  652.  overflow: hidden;
  653. }
  654. .snippet-fade {
  655.  bottom: 0;
  656.  box-sizing: border-box;
  657.  position: absolute;
  658.  width: 96px;
  659. }
  660. .snippet-fade {
  661.  $endSide: 0;
  662. }
  663. .snippet-fade:after {
  664.  content: '\2026';
  665. }
  666. .snippet-fade:after {
  667.  float: $endSide;
  668. }
  669. .post-bottom {
  670.  -webkit-box-align: center;
  671.  -webkit-align-items: center;
  672.      -ms-flex-align: center;
  673.          align-items: center;
  674.  display: -webkit-box;
  675.  display: -webkit-flex;
  676.  display: -ms-flexbox;
  677.  display: flex;
  678.  -webkit-flex-wrap: wrap;
  679.      -ms-flex-wrap: wrap;
  680.          flex-wrap: wrap;
  681. }
  682. .post-footer {
  683.  -webkit-box-flex: 1;
  684.  -webkit-flex: 1 1 auto;
  685.      -ms-flex: 1 1 auto;
  686.          flex: 1 1 auto;
  687.  -webkit-flex-wrap: wrap;
  688.      -ms-flex-wrap: wrap;
  689.          flex-wrap: wrap;
  690.  -webkit-box-ordinal-group: 2;
  691.  -webkit-order: 1;
  692.      -ms-flex-order: 1;
  693.          order: 1;
  694. }
  695. .post-footer>* {
  696.  -webkit-box-flex: 0;
  697.  -webkit-flex: 0 1 auto;
  698.      -ms-flex: 0 1 auto;
  699.          flex: 0 1 auto;
  700. }
  701. .post-footer .byline:last-child {
  702.  margin-$endSide: 1em;
  703. }
  704. .jump-link {
  705.  -webkit-box-flex: 0;
  706.  -webkit-flex: 0 0 auto;
  707.      -ms-flex: 0 0 auto;
  708.          flex: 0 0 auto;
  709.  -webkit-box-ordinal-group: 3;
  710.  -webkit-order: 2;
  711.      -ms-flex-order: 2;
  712.          order: 2;
  713. }
  714. .centered-top-container.sticky {
  715.  left: 0;
  716.  position: fixed;
  717.  right: 0;
  718.  top: 0;
  719.  width: auto;
  720.  z-index: 8;
  721.  -webkit-transition-property: opacity , -webkit-transform;
  722.  transition-property: opacity , -webkit-transform;
  723.  transition-property: transform , opacity;
  724.  transition-property: transform , opacity , -webkit-transform;
  725.  -webkit-transition-duration: .2s;
  726.          transition-duration: .2s;
  727.  -webkit-transition-timing-function: cubic-bezier(0.4,0.0,0.2,1);
  728.          transition-timing-function: cubic-bezier(0.4,0.0,0.2,1);
  729. }
  730. .centered-top-placeholder {
  731.  display: none;
  732. }
  733. .collapsed-header .centered-top-placeholder {
  734.  display: block;
  735. }
  736. .centered-top-container .Header .replaced h1, .centered-top-placeholder .Header .replaced h1 {
  737.  display: none;
  738. }
  739. .centered-top-container.sticky .Header .replaced h1 {
  740.  display: block;
  741. }
  742. .centered-top-container.sticky .Header .header-widget {
  743.  background: none;
  744. }
  745. .centered-top-container.sticky .Header .header-image-wrapper {
  746.  display: none;
  747. }
  748. .centered-top-container img, .centered-top-placeholder img {
  749.  max-width: 100%;
  750. }
  751. .collapsible {
  752.  -webkit-transition: height .3s cubic-bezier(0.4,0.0,0.2,1);
  753.  transition: height .3s cubic-bezier(0.4,0.0,0.2,1);
  754. }
  755. .collapsible, .collapsible>summary {
  756.  display: block;
  757.  overflow: hidden;
  758. }
  759. .collapsible>:not(summary) {
  760.  display: none;
  761. }
  762. .collapsible[open]>:not(summary) {
  763.  display: block;
  764. }
  765. .collapsible:focus, .collapsible>summary:focus {
  766.  outline: none;
  767. }
  768. .collapsible>summary {
  769.  cursor: pointer;
  770.  display: block;
  771.  padding: 0;
  772. }
  773. .collapsible:focus>summary, .collapsible>summary:focus {
  774.  background-color: transparent;
  775. }
  776. .collapsible>summary::-webkit-details-marker {
  777.  display: none;
  778. }
  779. .collapsible-title {
  780.  -webkit-box-align: center;
  781.  -webkit-align-items: center;
  782.      -ms-flex-align: center;
  783.          align-items: center;
  784.  display: -webkit-box;
  785.  display: -webkit-flex;
  786.  display: -ms-flexbox;
  787.  display: flex;
  788. }
  789. .collapsible-title .title {
  790.  -webkit-box-flex: 1;
  791.  -webkit-flex: 1 1 auto;
  792.      -ms-flex: 1 1 auto;
  793.          flex: 1 1 auto;
  794.  -webkit-box-ordinal-group: 1;
  795.  -webkit-order: 0;
  796.      -ms-flex-order: 0;
  797.          order: 0;
  798.  overflow: hidden;
  799.  text-overflow: ellipsis;
  800.  white-space: nowrap;
  801. }
  802. .collapsible-title .chevron-down, .collapsible[open] .collapsible-title .chevron-up {
  803.  display: block;
  804. }
  805. .collapsible-title .chevron-up, .collapsible[open] .collapsible-title .chevron-down {
  806.  display: none;
  807. }
  808. .overflowable-container {
  809.  max-height: $(header.items.font.size * 12 / 7 + 24px);
  810.  overflow: hidden;
  811.  position: relative;
  812. }
  813. .overflow-button {
  814.  cursor: pointer;
  815. }
  816. #overflowable-dim-overlay {
  817.  background: transparent;
  818. }
  819. .overflow-popup {
  820.  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14) , 0 3px 1px -2px rgba(0,0,0,.2) , 0 1px 5px 0 rgba(0,0,0,.12);
  821.  background-color: $(body.background.color);
  822.  left: 0;
  823.  max-width: calc(100% - 32px);
  824.  position: absolute;
  825.  top: 0;
  826.  visibility: hidden;
  827.  z-index: 101;
  828. }
  829. .overflow-popup ul {
  830.  list-style: none;
  831. }
  832. .overflow-popup li, .overflow-popup .tabs li {
  833.  display: block;
  834.  height: auto;
  835. }
  836. .overflow-popup .tabs li {
  837.  padding-left: 0;
  838.  padding-right: 0;
  839. }
  840. .overflow-button.hidden, .overflow-popup li.hidden, .overflow-popup .tabs li.hidden {
  841.  display: none;
  842. }
  843. .ripple {
  844.  position: relative;
  845. }
  846. .ripple>* {
  847.  z-index: 1;
  848. }
  849. .splash-wrapper {
  850.  bottom: 0;
  851.  left: 0;
  852.  overflow: hidden;
  853.  pointer-events: none;
  854.  position: absolute;
  855.  right: 0;
  856.  top: 0;
  857.  z-index: 0;
  858. }
  859. .splash {
  860.  background: hsl(0,0%,80%);
  861.  border-radius: 100%;
  862.  display: block;
  863.  opacity: .6;
  864.  position: absolute;
  865.  -webkit-transform: scale(0);
  866.      -ms-transform: scale(0);
  867.          transform: scale(0);
  868. }
  869. .splash.animate {
  870.  -webkit-animation: ripple-effect .4s linear;
  871.          animation: ripple-effect .4s linear;
  872. }
  873. @-webkit-keyframes ripple-effect {
  874.  to {
  875.    opacity: 0;
  876.    -webkit-transform: scale(2.5);
  877.            transform: scale(2.5);
  878.  }
  879. }
  880. @keyframes ripple-effect {
  881.  to {
  882.    opacity: 0;
  883.    -webkit-transform: scale(2.5);
  884.            transform: scale(2.5);
  885.  }
  886. }
  887. .search {
  888.  display: -webkit-box;
  889.  display: -webkit-flex;
  890.  display: -ms-flexbox;
  891.  display: flex;
  892.  line-height: 24px;
  893.  width: 24px;
  894. }
  895. .search form {
  896.  z-index: 101;
  897. }
  898. .search h3 {
  899.  display: none;
  900. }
  901. .search.focused {
  902.  width: 100%;
  903. }
  904. .search.focused .section {
  905.  width: 100%;
  906. }
  907. .search-expand {
  908.  -webkit-box-flex: 0;
  909.  -webkit-flex: 0 0 auto;
  910.      -ms-flex: 0 0 auto;
  911.          flex: 0 0 auto;
  912. }
  913. .search-expand-text {
  914.  display: none;
  915. }
  916. .search-close {
  917.  display: inline;
  918.  vertical-align: middle;
  919. }
  920. .search form {
  921.  display: -webkit-box;
  922.  display: -webkit-flex;
  923.  display: -ms-flexbox;
  924.  display: flex;
  925.  -webkit-box-flex: 1;
  926.  -webkit-flex: 1 0 0;
  927.      -ms-flex: 1 0 0px;
  928.          flex: 1 0 0;
  929.  border-bottom: solid 1px transparent;
  930.  padding-bottom: 8px;
  931. }
  932. .search form>* {
  933.  display: none;
  934. }
  935. .search.focused form>* {
  936.  display: block;
  937. }
  938. .search .search-input label {
  939.  display: none;
  940. }
  941. .centered-top-placeholder.cloned .search form {
  942.  z-index: 30;
  943. }
  944. .search.focused form {
  945.  border-color: $(body.text.color);
  946.  position: relative;
  947.  width: auto;
  948. }
  949. .collapsed-header .centered-top-container .search.focused form {
  950.  border-bottom-color: transparent;
  951. }
  952. .search-input {
  953.  -webkit-box-flex: 1;
  954.  -webkit-flex: 1 0 1px;
  955.      -ms-flex: 1 0 1px;
  956.          flex: 1 0 1px;
  957. }
  958. .search-input input {
  959.  background: none;
  960.  border: none;
  961.  box-sizing: border-box;
  962.  color: $(body.text.color);
  963.  display: inline-block;
  964.  outline: none;
  965.  width: calc(100% - 48px);
  966. }
  967. .search-input input.no-cursor {
  968.  color: transparent;
  969.  text-shadow: 0 0 0 $(body.text.color);
  970. }
  971. .collapsed-header .centered-top-container .search-action, .collapsed-header .centered-top-container .search-input input {
  972.  color: $(body.text.color);
  973. }
  974. .collapsed-header .centered-top-container .search-input input.no-cursor {
  975.  color: transparent;
  976.  text-shadow: 0 0 0 $(body.text.color);
  977. }
  978. .search-input input.no-cursor:focus, .collapsed-header .centered-top-container .search-input input.no-cursor:focus {
  979.  outline: none;
  980. }
  981. .search-focused>* {
  982.  visibility: hidden;
  983. }
  984. .search-focused .search, .search-focused .search-icon {
  985.  visibility: visible;
  986. }
  987. .search.focused .search-action {
  988.  display: block;
  989. }
  990. .search.focused .search-action:disabled {
  991.  opacity: .3;
  992. }
  993. .sidebar-container {
  994.  background-color: #f7f7f7;
  995.  max-width: $(sidebar.width);
  996.  overflow-y: auto;
  997.  -webkit-transition-property: -webkit-transform;
  998.  transition-property: -webkit-transform;
  999.  transition-property: transform;
  1000.  transition-property: transform, -webkit-transform;
  1001.  -webkit-transition-duration: .3s;
  1002.          transition-duration: .3s;
  1003.  -webkit-transition-timing-function: cubic-bezier(0.0,0.0,0.2,1);
  1004.          transition-timing-function: cubic-bezier(0.0,0.0,0.2,1);
  1005.  width: $(sidebar.width);
  1006.  z-index: 101;
  1007.  -webkit-overflow-scrolling: touch;
  1008. }
  1009. .sidebar-container .navigation {
  1010.  line-height: 0;
  1011.  padding: 20px;
  1012. }
  1013. .sidebar-container .widget {
  1014.  background: none;
  1015.  margin: 0 16px;
  1016.  padding: 1em 0;
  1017. }
  1018. .sidebar-container .widget .title {
  1019.  color: $(sidebar.widget.title.color);
  1020.  margin: 0;
  1021. }
  1022. .sidebar-container .widget ul {
  1023.  list-style: none;
  1024.  margin: 0;
  1025.  padding: 0;
  1026. }
  1027. .sidebar-container .widget ul ul {
  1028.  margin-$startSide: 1em;
  1029. }
  1030. .sidebar-container .widget ul li {
  1031.  font-size: 16px;
  1032.  line-height: normal;
  1033. }
  1034. .BlogArchive li {
  1035.  margin: 16px 0;
  1036. }
  1037. .BlogArchive li:last-child {
  1038.  margin-bottom: 0;
  1039. }
  1040. .Label .label-count:before, .BlogArchive .post-count:before {
  1041.  content: '(';
  1042. }
  1043. .Label .label-count:after, .BlogArchive .post-count:after {
  1044.  content: ')';
  1045. }
  1046. .Label .label-count, .BlogArchive .post-count {
  1047.  float: $endSide;
  1048.  margin-$startSide: .25em;
  1049. }
  1050. .Label li a {
  1051.  display: inline-block;
  1052. }
  1053. .widget.Translate .skiptranslate>div {
  1054.  display: block !important;
  1055. }
  1056. .widget.Profile .profile-link {
  1057.  background-image: none !important;
  1058.  display: -webkit-box;
  1059.  display: -webkit-flex;
  1060.  display: -ms-flexbox;
  1061.  display: flex;
  1062. }
  1063. .widget.Profile .team-member .profile-img, .widget.Profile .team-member .default-avatar-wrapper {
  1064.  -webkit-box-flex: 0;
  1065.  -webkit-flex: 0 0 auto;
  1066.      -ms-flex: 0 0 auto;
  1067.          flex: 0 0 auto;
  1068. }
  1069. .widget.Profile .team-member .profile-img, .widget.Profile .team-member .default-avatar-wrapper {
  1070.  margin-$endSide: 1em;
  1071. }
  1072. .widget.Profile .individual .profile-link {
  1073.  -webkit-box-orient: vertical;
  1074.  -webkit-box-direction: normal;
  1075.  -webkit-flex-direction: column;
  1076.      -ms-flex-direction: column;
  1077.          flex-direction: column;
  1078. }
  1079. .widget.Profile .team .profile-link .profile-name {
  1080.  -webkit-align-self: center;
  1081.      -ms-flex-item-align: center;
  1082.              -ms-grid-row-align: center;
  1083.          align-self: center;
  1084.  display: block;
  1085.  -webkit-box-flex: 1;
  1086.  -webkit-flex: 1 1 auto;
  1087.      -ms-flex: 1 1 auto;
  1088.          flex: 1 1 auto;
  1089. }
  1090. .sidebar-container .sidebar-back {
  1091.  cursor: pointer;
  1092. }
  1093. .sidebar-container .widget+.widget {
  1094.  border-top: 1px dashed $(sidebar.separator.color);
  1095. }
  1096. .dim-overlay {
  1097.  background-color: rgba(0,0,0,0.54);
  1098.  z-index: 100;
  1099. }
  1100. body.sidebar-visible {
  1101.  overflow-y: hidden;
  1102. }
  1103. .z {
  1104.  left: 0; } @media screen and (max-width: $(feed.width + sidebar.width + 20px - 1px)) { .z { left: 0;
  1105. }
  1106. .sidebar-container {
  1107.  bottom: 0;
  1108.  position: fixed;
  1109.  top: 0;
  1110. }
  1111. .sidebar-container {
  1112.  left: auto;
  1113.  right: 0;
  1114. }
  1115. .sidebar-container.sidebar-invisible {
  1116.  -webkit-transition-timing-function: cubic-bezier(0.4,0.0,0.6,1);
  1117.          transition-timing-function: cubic-bezier(0.4,0.0,0.6,1);
  1118. }
  1119. .sidebar-container.sidebar-invisible {
  1120.  -webkit-transform: translateX($(sidebar.width));
  1121.      -ms-transform: translateX($(sidebar.width));
  1122.          transform: translateX($(sidebar.width));
  1123. }
  1124. .z {
  1125.  left: 0; } } .z { left: 0;
  1126. }
  1127. .dialog {
  1128.  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14) , 0 3px 1px -2px rgba(0,0,0,.2) , 0 1px 5px 0 rgba(0,0,0,.12);
  1129.  background: $(body.background.color);
  1130.  box-sizing: border-box;
  1131.  padding: 30px;
  1132.  position: fixed;
  1133.  text-align: center;
  1134.  width: calc(100% - 24px);
  1135.  z-index: 101;
  1136. }
  1137. .dialog input[type=text], .dialog input[type=email] {
  1138.  background-color: transparent;
  1139.  border-bottom: solid 1px rgba($(body.text.color.red),$(body.text.color.green),$(body.text.color.blue),0.12);
  1140.  border-left: none;
  1141.  border-right: none;
  1142.  border-top: none;
  1143.  color: $(body.text.color);
  1144.  display: block;
  1145.  font-family: $(body.text.font.family);
  1146.  font-size: 16px;
  1147.  line-height: 24px;
  1148.  margin: auto;
  1149.  padding-bottom: 7px;
  1150.  outline: none;
  1151.  text-align: center;
  1152.  width: 100%;
  1153. }
  1154. .dialog input[type=text]::-webkit-input-placeholder, .dialog input[type=email]::-webkit-input-placeholder {
  1155.  color: $(body.text.color);
  1156. }
  1157. .dialog input[type=text]::-moz-placeholder, .dialog input[type=email]::-moz-placeholder {
  1158.  color: $(body.text.color);
  1159. }
  1160. .dialog input[type=text]:-ms-input-placeholder, .dialog input[type=email]:-ms-input-placeholder {
  1161.  color: $(body.text.color);
  1162. }
  1163. .dialog input[type=text]::placeholder, .dialog input[type=email]::placeholder {
  1164.  color: $(body.text.color);
  1165. }
  1166. .dialog input[type=text]:focus, .dialog input[type=email]:focus {
  1167.  border-bottom: solid 2px $(body.link.color);
  1168.  padding-bottom: 6px;
  1169. }
  1170. .dialog input[type=submit] {
  1171.  font-family: $(body.text.font.family);
  1172. }
  1173. .dialog input.no-cursor {
  1174.  color: transparent;
  1175.  text-shadow: 0 0 0 $(body.text.color);
  1176. }
  1177. .dialog input.no-cursor:focus {
  1178.  outline: none;
  1179. }
  1180. .subscribe-popup {
  1181.  max-width: 364px;
  1182. }
  1183. .subscribe-popup h3 {
  1184.  color: $(item.title.color);
  1185.  font-size: 1.8em;
  1186.  margin-top: 0;
  1187. }
  1188. .subscribe-popup div.widget.FollowByEmail h3 {
  1189.  display: none;
  1190. }
  1191. .subscribe-popup div.widget.FollowByEmail .follow-by-email-submit {
  1192.  background: transparent;
  1193.  border: none;
  1194.  box-shadow: none;
  1195.  color: $(body.link.color);
  1196.  cursor: pointer;
  1197.  font-size: 14px;
  1198.  font-weight: bold;
  1199.  outline: none;
  1200.  text-decoration: none;
  1201.  text-transform: uppercase;
  1202.  width: auto;
  1203.  color: $(body.link.color);
  1204.  display: inline-block;
  1205.  margin: 0 auto;
  1206.  margin-top: 24px;
  1207.  width: auto;
  1208.  white-space: normal;
  1209. }
  1210. .subscribe-popup div.widget.FollowByEmail .follow-by-email-submit:disabled {
  1211.  cursor: default;
  1212.  opacity: .3;
  1213. }
  1214. @media (max-width:800px) {
  1215.  .blog-name div.widget.Subscribe {
  1216.    margin-bottom: 16px;
  1217.  }
  1218.  body.item-view .blog-name div.widget.Subscribe {
  1219.    margin: 8px auto 16px;
  1220.    width: 100%;
  1221.  }
  1222. }
  1223. body#layout .bg-photo-overlay, body#layout .bg-photo {
  1224.  display: none;
  1225. }
  1226. body#layout .page_body {
  1227.  padding: 0;
  1228.  position: relative;
  1229.  top: 0;
  1230. }
  1231. body#layout .page {
  1232.  display: inline-block;
  1233.  left: inherit;
  1234.  position: relative;
  1235.  vertical-align: top;
  1236.  width: 540px;
  1237. }
  1238. body#layout .centered {
  1239.  max-width: 954px;
  1240. }
  1241. body#layout .navigation {
  1242.  display: none;
  1243. }
  1244. body#layout .sidebar-container {
  1245.  display: inline-block;
  1246.  width: 40%;
  1247. }
  1248. body#layout .hamburger-menu, body#layout .search {
  1249.  display: none;
  1250. }
  1251. .widget.Sharing .sharing-button {
  1252.  display: none;
  1253. }
  1254. .widget.Sharing .sharing-buttons li {
  1255.  padding: 0;
  1256. }
  1257. .widget.Sharing .sharing-buttons li span {
  1258.  display: none;
  1259. }
  1260. .post-share-buttons {
  1261.  position: relative;
  1262. }
  1263. .share-buttons .svg-icon-24, .centered-bottom .share-buttons .svg-icon-24 {
  1264.  fill: $(sharing.icons.color);
  1265. }
  1266. .sharing-open.touch-icon-button:focus .touch-icon, .sharing-open.touch-icon-button:active .touch-icon {
  1267.  background-color: transparent;
  1268. }
  1269. .share-buttons {
  1270.  background-color: $(sharing.background.color);
  1271.  border-radius: 2px;
  1272.  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14) , 0 3px 1px -2px rgba(0,0,0,.2) , 0 1px 5px 0 rgba(0,0,0,.12);
  1273.  color: $(sharing.text.color);
  1274.  list-style: none;
  1275.  margin: 0;
  1276.  padding: 8px 0;
  1277.  position: absolute;
  1278.  top: -11px;
  1279.  min-width: 200px;
  1280.  z-index: 101;
  1281. }
  1282. .share-buttons.hidden {
  1283.  display: none;
  1284. }
  1285. .sharing-button {
  1286.  background: transparent;
  1287.  border: none;
  1288.  margin: 0;
  1289.  outline: none;
  1290.  padding: 0;
  1291.  cursor: pointer;
  1292. }
  1293. .share-buttons li {
  1294.  margin: 0;
  1295.  height: 48px;
  1296. }
  1297. .share-buttons li:last-child {
  1298.  margin-bottom: 0;
  1299. }
  1300. .share-buttons li .sharing-platform-button {
  1301.  box-sizing: border-box;
  1302.  cursor: pointer;
  1303.  display: block;
  1304.  height: 100%;
  1305.  margin-bottom: 0;
  1306.  padding: 0 16px;
  1307.  position: relative;
  1308.  width: 100%;
  1309. }
  1310. .share-buttons li .sharing-platform-button:focus, .share-buttons li .sharing-platform-button:hover {
  1311.  background-color: rgba(128,128,128,0.1);
  1312.  outline: none;
  1313. }
  1314. .share-buttons li svg[class^="sharing-"], .share-buttons li svg[class*=" sharing-"] {
  1315.  position: absolute;
  1316.  top: 10px;
  1317. }
  1318. .share-buttons li span.sharing-platform-button, .share-buttons li span.sharing-platform-button {
  1319.  position: relative;
  1320.  top: 0;
  1321. }
  1322. .share-buttons li .platform-sharing-text {
  1323.  display: block;
  1324.  font-size: 16px;
  1325.  line-height: 48px;
  1326.  white-space: nowrap;
  1327. }
  1328. .share-buttons li .platform-sharing-text {
  1329.  margin-$startSide: 56px;
  1330. }
  1331. .flat-button {
  1332.  cursor: pointer;
  1333.  display: inline-block;
  1334.  font-weight: bold;
  1335.  text-transform: uppercase;
  1336.  border-radius: 2px;
  1337.  padding: 8px;
  1338.  margin: -8px;
  1339. }
  1340. .flat-icon-button {
  1341.  background: transparent;
  1342.  border: none;
  1343.  margin: 0;
  1344.  outline: none;
  1345.  padding: 0;
  1346.  margin: -12px;
  1347.  padding: 12px;
  1348.  cursor: pointer;
  1349.  box-sizing: content-box;
  1350.  display: inline-block;
  1351.  line-height: 0;
  1352. }
  1353. .flat-icon-button, .flat-icon-button .splash-wrapper {
  1354.  border-radius: 50%;
  1355. }
  1356. .flat-icon-button .splash.animate {
  1357.  -webkit-animation-duration: .3s;
  1358.          animation-duration: .3s;
  1359. }
  1360. h1, h2, h3, h4, h5, h6 {
  1361.  margin: 0;
  1362. }
  1363. .post-body h1, .post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
  1364.  margin: 1em 0;
  1365. }
  1366. a, .action-link {
  1367.  color: $(body.link.color);
  1368.  cursor: pointer;
  1369.  text-decoration: none;
  1370. }
  1371. a:visited, .action-link:visited {
  1372.  color: $(body.link.visited.color);
  1373. }
  1374. a:hover, .action-link:hover {
  1375.  color: $(body.link.hover.color);
  1376. }
  1377. body {
  1378.  background-color: $(body.background.color);
  1379.  color: $(body.text.color);
  1380.  font: $(body.text.font);
  1381. }
  1382. .unused {
  1383.  background: $(body.background);
  1384. }
  1385. .dim-overlay {
  1386.  z-index: 100;
  1387. }
  1388. body {
  1389.  margin: 0 auto;
  1390. }
  1391. .all-container {
  1392.  min-height: 100vh;
  1393.  display: -webkit-box;
  1394.  display: -webkit-flex;
  1395.  display: -ms-flexbox;
  1396.  display: flex;
  1397.  -webkit-box-orient: vertical;
  1398.  -webkit-box-direction: normal;
  1399.  -webkit-flex-direction: column;
  1400.      -ms-flex-direction: column;
  1401.          flex-direction: column;
  1402. }
  1403. body.sidebar-visible .all-container {
  1404.  overflow-y: scroll;
  1405. }
  1406. .page {
  1407.  max-width: $(feed.width);
  1408.  width: 100%;
  1409. }
  1410. .Blog {
  1411.  padding: 0;
  1412.  padding-$startSide: 136px;
  1413. }
  1414. .main_content_container {
  1415.  -webkit-box-flex: 0;
  1416.  -webkit-flex: 0 0 auto;
  1417.      -ms-flex: 0 0 auto;
  1418.          flex: 0 0 auto;
  1419.  margin: 0 auto;
  1420.  max-width: $(feed.width + sidebar.width);
  1421.  width: 100%;
  1422. }
  1423. .centered-top-container {
  1424.  -webkit-box-flex: 0;
  1425.  -webkit-flex: 0 0 auto;
  1426.      -ms-flex: 0 0 auto;
  1427.          flex: 0 0 auto;
  1428. }
  1429. .centered-top, .centered-top-placeholder {
  1430.  box-sizing: border-box;
  1431.  width: 100%;
  1432. }
  1433. .centered-top {
  1434.  box-sizing: border-box;
  1435.  margin: 0 auto;
  1436.  max-width: $(feed.width);
  1437.  padding: 44px 136px 32px;
  1438.  width: 100%;
  1439. }
  1440. .centered {
  1441.  width: 100%;
  1442. }
  1443. .centered-top-firstline {
  1444.  display: -webkit-box;
  1445.  display: -webkit-flex;
  1446.  display: -ms-flexbox;
  1447.  display: flex;
  1448.  position: relative;
  1449.  width: 100%;
  1450. }
  1451. .main_header_elements {
  1452.  display: -webkit-box;
  1453.  display: -webkit-flex;
  1454.  display: -ms-flexbox;
  1455.  display: flex;
  1456.  -webkit-box-flex: 0;
  1457.  -webkit-flex: 0 1 auto;
  1458.      -ms-flex: 0 1 auto;
  1459.          flex: 0 1 auto;
  1460.  -webkit-box-ordinal-group: 2;
  1461.  -webkit-order: 1;
  1462.      -ms-flex-order: 1;
  1463.          order: 1;
  1464.  overflow-x: hidden;
  1465.  width: 100%;
  1466. }
  1467. html[dir=rtl] .main_header_elements {
  1468.  -webkit-box-ordinal-group: 3;
  1469.  -webkit-order: 2;
  1470.      -ms-flex-order: 2;
  1471.          order: 2;
  1472. }
  1473. body.search-view .centered-top.search-focused .blog-name {
  1474.  display: none;
  1475. }
  1476. .widget.Header img {
  1477.  max-width: 100%;
  1478. }
  1479. .blog-name {
  1480.  -webkit-box-flex: 1;
  1481.  -webkit-flex: 1 1 auto;
  1482.      -ms-flex: 1 1 auto;
  1483.          flex: 1 1 auto;
  1484.  min-width: 0;
  1485.  -webkit-box-ordinal-group: 2;
  1486.  -webkit-order: 1;
  1487.      -ms-flex-order: 1;
  1488.          order: 1;
  1489. }
  1490. .subscribe-section-container {
  1491.  -webkit-box-flex: 0;
  1492.  -webkit-flex: 0 0 auto;
  1493.      -ms-flex: 0 0 auto;
  1494.          flex: 0 0 auto;
  1495.  -webkit-box-ordinal-group: 3;
  1496.  -webkit-order: 2;
  1497.      -ms-flex-order: 2;
  1498.          order: 2;
  1499. }
  1500. .search {
  1501.  -webkit-box-flex: 0;
  1502.  -webkit-flex: 0 0 auto;
  1503.      -ms-flex: 0 0 auto;
  1504.          flex: 0 0 auto;
  1505.  -webkit-box-ordinal-group: 4;
  1506.  -webkit-order: 3;
  1507.      -ms-flex-order: 3;
  1508.          order: 3;
  1509.  line-height: $(blog.title.font.size);
  1510. }
  1511. .search svg {
  1512.  margin-bottom: $(blog.title.font.size / 2 - 12px);
  1513.  margin-top: $(blog.title.font.size / 2 - 12px);
  1514.  padding-bottom: 0;
  1515.  padding-top: 0;
  1516. }
  1517. .search, .search.focused {
  1518.  display: block;
  1519.  width: auto;
  1520. }
  1521. .search .section {
  1522.  position: absolute;
  1523.  right: 0;
  1524.  top: 0;
  1525. }
  1526. .search-expand {
  1527.  background: transparent;
  1528.  border: none;
  1529.  margin: 0;
  1530.  outline: none;
  1531.  padding: 0;
  1532.  display: block;
  1533. }
  1534. .search.focused .search-expand {
  1535.  visibility: hidden;
  1536. }
  1537. .hamburger-menu {
  1538.  float: right;
  1539.  height: $(blog.title.font.size);
  1540. }
  1541. .subscribe-section-container, .search-expand {
  1542.  margin-$startSide: 44px;
  1543. }
  1544. .hamburger-section {
  1545.  -webkit-box-flex: 1;
  1546.  -webkit-flex: 1 0 auto;
  1547.      -ms-flex: 1 0 auto;
  1548.          flex: 1 0 auto;
  1549.  margin-left: 44px;
  1550.  -webkit-box-ordinal-group: 3;
  1551.  -webkit-order: 2;
  1552.      -ms-flex-order: 2;
  1553.          order: 2;
  1554. }
  1555. html[dir=rtl] .hamburger-section {
  1556.  -webkit-box-ordinal-group: 2;
  1557.  -webkit-order: 1;
  1558.      -ms-flex-order: 1;
  1559.          order: 1;
  1560. }
  1561. .search-expand-icon {
  1562.  display: none;
  1563. }
  1564. .search-expand-text {
  1565.  display: block;
  1566. }
  1567. .search-input {
  1568.  width: 100%;
  1569. }
  1570. .search-focused .hamburger-section {
  1571.  visibility: visible;
  1572. }
  1573. .centered-top-secondline .PageList ul {
  1574.  margin: 0;
  1575.  max-height: $(header.items.font.size * 12 / 7 * 6 + 144px);
  1576.  overflow-y: hidden;
  1577. }
  1578. .centered-top-secondline .PageList .overflow-popup ul {
  1579.  overflow-y: auto;
  1580. }
  1581. .overflowable-contents li {
  1582.  display: inline-block;
  1583.  height: $(header.items.font.size * 12 / 7 + 24px);
  1584. }
  1585. .centered-top-secondline .widget.PageList .overflow-popup li {
  1586.  display: block;
  1587. }
  1588. .centered-top-secondline .widget.PageList .overflow-popup li.hidden {
  1589.  display: none;
  1590. }
  1591. .centered-top-secondline .PageList li {
  1592.  margin-$endSide: 30px;
  1593. }
  1594. .centered-top-secondline .PageList li a, .centered-top-secondline .PageList .overflow-button a {
  1595.  padding: 12px;
  1596. }
  1597. .centered-top-secondline .PageList li:first-child a {
  1598.  padding-$startSide: 0;
  1599. }
  1600. .sticky .blog-name {
  1601.  overflow: hidden;
  1602. }
  1603. .sticky .blog-name .widget.Header h1 {
  1604.  overflow: hidden;
  1605.  text-overflow: ellipsis;
  1606.  white-space: nowrap;
  1607. }
  1608. .sticky .blog-name .widget.Header p, .sticky .centered-top-secondline {
  1609.  display: none;
  1610. }
  1611. .centered-top-container, .centered-top-placeholder {
  1612.  background: $(header.background);
  1613. }
  1614. .centered-top .svg-icon-24 {
  1615.  fill: $(header.items.color);
  1616. }
  1617. .blog-name {
  1618.  -webkit-transition: opacity .2s cubic-bezier(0.4,0.0,0.2,1);
  1619.  transition: opacity .2s cubic-bezier(0.4,0.0,0.2,1);
  1620. }
  1621. .blog-name h1, .blog-name h1 a {
  1622.  color: $(blog.title.color);
  1623.  font: $(blog.title.font);
  1624.  line-height: $(blog.title.font.size);
  1625.  text-transform: uppercase;
  1626. }
  1627. .widget.Header .header-widget p {
  1628.  font: $(header.description.font);
  1629.  font-style: italic;
  1630.  color: $(header.description.color);
  1631.  line-height: 1.6;
  1632.  max-width: $(feed.width - 604px);
  1633. }
  1634. .centered-top .flat-button {
  1635.  color: $(header.items.color);
  1636.  cursor: pointer;
  1637.  font: $(header.items.font);
  1638.  line-height: $(blog.title.font.size);
  1639.  text-transform: uppercase;
  1640.  -webkit-transition: opacity .2s cubic-bezier(0.4,0.0,0.2,1);
  1641.  transition: opacity .2s cubic-bezier(0.4,0.0,0.2,1);
  1642. }
  1643. .subscribe-button {
  1644.  background: transparent;
  1645.  border: none;
  1646.  margin: 0;
  1647.  outline: none;
  1648.  padding: 0;
  1649.  display: block;
  1650. }
  1651. .search .section {
  1652.  opacity: 0;
  1653.  -webkit-transition: opacity .2s cubic-bezier(0.4,0.0,0.2,1);
  1654.  transition: opacity .2s cubic-bezier(0.4,0.0,0.2,1);
  1655. }
  1656. html[dir=ltr] .search form {
  1657.  margin-right: 12px;
  1658. }
  1659. .search.focused .section {
  1660.  opacity: 1;
  1661.  margin-right: 36px;
  1662.  width: calc(100% - 36px);
  1663. }
  1664. .search input {
  1665.  border: 0;
  1666.  color: $(header.description.color);
  1667.  font: $(search.input.font);
  1668.  line-height: $(blog.title.font.size);
  1669.  outline: 0;
  1670.  width: 100%;
  1671. }
  1672. .search form {
  1673.  padding-bottom: 0;
  1674. }
  1675. .search input[type='submit'] {
  1676.  display: none;
  1677. }
  1678. .search input::-webkit-input-placeholder {
  1679.  text-transform: uppercase;
  1680. }
  1681. .search input::-moz-placeholder {
  1682.  text-transform: uppercase;
  1683. }
  1684. .search input:-ms-input-placeholder {
  1685.  text-transform: uppercase;
  1686. }
  1687. .search input::placeholder {
  1688.  text-transform: uppercase;
  1689. }
  1690. .search .dim-overlay, .centered-top-secondline .dim-overlay {
  1691.  background: transparent;
  1692. }
  1693. .centered-top-secondline .PageList li a, .centered-top-secondline .PageList .overflow-button a {
  1694.  color: $(header.pages.color);
  1695.  font: $(header.items.font);
  1696.  line-height: $(header.items.font.size * 12 / 7 + 24px);
  1697. }
  1698. .centered-top-secondline .PageList li.selected a {
  1699.  color: $(header.pages.selected.color);
  1700. }
  1701. .centered-top-secondline .overflow-popup .PageList li a {
  1702.  color: $(body.text.color);
  1703. }
  1704. .PageList ul {
  1705.  padding: 0;
  1706. }
  1707. .sticky .search form {
  1708.  border: none;
  1709. }
  1710. .sticky {
  1711.  box-shadow: 0 0 20px 0 rgba(0,0,0,0.7);
  1712. }
  1713. .sticky .centered-top {
  1714.  padding-bottom: 0;
  1715.  padding-top: 0;
  1716. }
  1717. .sticky .centered-top {
  1718.  padding-bottom: 0;
  1719.  padding-top: 0;
  1720. }
  1721. .sticky .search, .sticky .search-expand, .sticky .subscribe-button, .sticky .blog-name h1 {
  1722.  line-height: $(blog.title.font.size + 16px);
  1723. }
  1724. .sticky .search-expand, .sticky .search.focused .search-submit, .sticky .hamburger-section {
  1725.  -webkit-box-align: center;
  1726.  -webkit-align-items: center;
  1727.      -ms-flex-align: center;
  1728.          align-items: center;
  1729.  display: -webkit-box;
  1730.  display: -webkit-flex;
  1731.  display: -ms-flexbox;
  1732.  display: flex;
  1733.  height: $(blog.title.font.size + 16px);
  1734. }
  1735. .subscribe-popup h3 {
  1736.  color: $(dialog.title.color);
  1737.  font: $(dialog.title.font);
  1738.  margin-bottom: 24px;
  1739. }
  1740. .subscribe-popup div.widget.FollowByEmail .follow-by-email-address {
  1741.  color: $(dialog.input.color);
  1742.  font: $(dialog.input.font);
  1743. }
  1744. .subscribe-popup div.widget.FollowByEmail .follow-by-email-submit {
  1745.  color: $(dialog.action.color);
  1746.  font: $(dialog.action.font);
  1747.  margin-top: 24px;
  1748. }
  1749. .post-content {
  1750.  -webkit-box-flex: 0;
  1751.  -webkit-flex: 0 1 auto;
  1752.      -ms-flex: 0 1 auto;
  1753.          flex: 0 1 auto;
  1754.  -webkit-box-ordinal-group: 2;
  1755.  -webkit-order: 1;
  1756.      -ms-flex-order: 1;
  1757.          order: 1;
  1758.  max-width: $(feed.width - 604px);
  1759.  width: 100%;
  1760. }
  1761. .post-content {
  1762.  margin-$endSide: 76px;
  1763. }
  1764. .post-filter-message {
  1765.  display: -webkit-box;
  1766.  display: -webkit-flex;
  1767.  display: -ms-flexbox;
  1768.  display: flex;
  1769.  margin: 40px 136px 48px;
  1770.  padding: 10px;
  1771.  position: relative;
  1772. }
  1773. .post-filter-message>* {
  1774.  -webkit-box-flex: 0;
  1775.  -webkit-flex: 0 0 auto;
  1776.      -ms-flex: 0 0 auto;
  1777.          flex: 0 0 auto;
  1778. }
  1779. .post-filter-message .search-query {
  1780.  font-style: italic;
  1781.  quotes: "\201c" "\201d" "\2018" "\2019";
  1782. }
  1783. .post-filter-message .search-query:before {
  1784.  content: open-quote;
  1785. }
  1786. .post-filter-message .search-query:after {
  1787.  content: close-quote;
  1788. }
  1789. .post-filter-message div {
  1790.  display: inline-block;
  1791. }
  1792. .post-filter-message a {
  1793.  display: inline-block;
  1794.  text-transform: uppercase;
  1795. }
  1796. .post-filter-description {
  1797.  -webkit-box-flex: 1;
  1798.  -webkit-flex: 1 1 auto;
  1799.      -ms-flex: 1 1 auto;
  1800.          flex: 1 1 auto;
  1801. }
  1802. .post-filter-description {
  1803.  margin-$endSide: 16px;
  1804. }
  1805. .post-title {
  1806.  margin-top: 0;
  1807. }
  1808. body.feed-view .post-outer-container {
  1809.  margin-top: 85px;
  1810. }
  1811. body.feed-view .post-outer-container:first-child, body.feed-view .feed-message+.post-outer-container {
  1812.  margin-top: 0;
  1813. }
  1814. .post-outer {
  1815.  display: -webkit-box;
  1816.  display: -webkit-flex;
  1817.  display: -ms-flexbox;
  1818.  display: flex;
  1819.  position: relative;
  1820. }
  1821. .post-outer .snippet-thumbnail {
  1822.  -webkit-box-align: center;
  1823.  -webkit-align-items: center;
  1824.      -ms-flex-align: center;
  1825.          align-items: center;
  1826.  background: black;
  1827.  display: -webkit-box;
  1828.  display: -webkit-flex;
  1829.  display: -ms-flexbox;
  1830.  display: flex;
  1831.  -webkit-box-flex: 0;
  1832.  -webkit-flex: 0 0 auto;
  1833.      -ms-flex: 0 0 auto;
  1834.          flex: 0 0 auto;
  1835.  height: 256px;
  1836.  -webkit-box-pack: center;
  1837.  -webkit-justify-content: center;
  1838.      -ms-flex-pack: center;
  1839.          justify-content: center;
  1840.  margin-$endSide: 136px;
  1841.  overflow: hidden;
  1842.  -webkit-box-ordinal-group: 3;
  1843.  -webkit-order: 2;
  1844.      -ms-flex-order: 2;
  1845.          order: 2;
  1846.  position: relative;
  1847.  width: 256px;
  1848. }
  1849. .post-outer .thumbnail-empty {
  1850.  background: transparent;
  1851. }
  1852. .post-outer .snippet-thumbnail-img {
  1853.  background-position: center;
  1854.  background-repeat: no-repeat;
  1855.  background-size: cover;
  1856.  width: 100%;
  1857.  height: 100%;
  1858. }
  1859. .post-outer .snippet-thumbnail img {
  1860.  max-height: 100%;
  1861. }
  1862. .post-title-container {
  1863.  margin-bottom: 16px;
  1864. }
  1865. .post-body {
  1866.  margin-bottom: 24px;
  1867. }
  1868. .post-bottom {
  1869.  display: -webkit-box;
  1870.  display: -webkit-flex;
  1871.  display: -ms-flexbox;
  1872.  display: flex;
  1873.  -webkit-box-pack: justify;
  1874.  -webkit-justify-content: space-between;
  1875.      -ms-flex-pack: justify;
  1876.          justify-content: space-between;
  1877. }
  1878. .post-share-buttons-bottom {
  1879.  float: left;
  1880. }
  1881. .footer {
  1882.  -webkit-box-flex: 0;
  1883.  -webkit-flex: 0 0 auto;
  1884.      -ms-flex: 0 0 auto;
  1885.          flex: 0 0 auto;
  1886.  margin: auto auto 0;
  1887.  padding-bottom: 32px;
  1888.  width: auto;
  1889. }
  1890. .post-header-container {
  1891.  margin-bottom: 12px;
  1892. }
  1893. .post-header-container .post-share-buttons-top {
  1894.  float: right;
  1895. }
  1896. .post-header-container .post-header {
  1897.  float: $startSide;
  1898. }
  1899. .byline {
  1900.  display: inline-block;
  1901.  margin-bottom: 8px;
  1902. }
  1903. .byline, .byline a, .flat-button {
  1904.  color: $(feed.button.color);
  1905.  font: $(feed.button.font);
  1906. }
  1907. .flat-button.ripple .splash {
  1908.  background-color: rgba($(feed.button.color.red),$(feed.button.color.green),$(feed.button.color.blue),0.4);
  1909. }
  1910. .flat-button.ripple:hover {
  1911.  background-color: rgba($(feed.button.color.red),$(feed.button.color.green),$(feed.button.color.blue),0.12);
  1912. }
  1913. .post-footer .byline {
  1914.  text-transform: uppercase;
  1915. }
  1916. .cmt_count_iframe_holder {
  1917.  float: $startSide;
  1918.  margin-$endSide: 24px !important;
  1919. }
  1920. .post-comment-link {
  1921.  line-height: 1;
  1922. }
  1923. .feed-message {
  1924.  margin-bottom: 52px;
  1925. }
  1926. .blog-pager {
  1927.  margin-top: 48px;
  1928. }
  1929. .blog-pager {
  1930.  float: $endSide;
  1931.  margin-$endSide: 468px;
  1932. }
  1933. .FeaturedPost {
  1934.  margin-bottom: 56px;
  1935. }
  1936. .FeaturedPost h3 {
  1937.  margin: 16px 136px 8px;
  1938. }
  1939. .shown-ad {
  1940.  margin-bottom: 85px;
  1941.  margin-top: 85px;
  1942. }
  1943. .shown-ad .inline-ad {
  1944.  display: block;
  1945.  max-width: $(feed.width - 604px);
  1946. }
  1947. body.feed-view .shown-ad:last-child {
  1948.  display: none;
  1949. }
  1950. .post-filter-message {
  1951.  background-color: $(body.link.color);
  1952.  color: $(body.background.color);
  1953.  font: $(feed.subtitle.font);
  1954. }
  1955. .post-filter-message a {
  1956.  color: $(body.background.color);
  1957. }
  1958. .post-title, .post-title a {
  1959.  color: $(feed.title.color);
  1960.  font: $(feed.title.font);
  1961.  line-height: 1.33333333;
  1962. }
  1963. .feed-message {
  1964.  color: $(feed.subtitle.color);
  1965.  font: $(feed.subtitle.font);
  1966. }
  1967. .post-header-container .byline, .post-header-container .byline a {
  1968.  color: $(feed.subtitle.color);
  1969.  font: $(feed.subtitle.font);
  1970. }
  1971. .post-header-container .byline.post-author:not(:last-child):after {
  1972.  content: "\b7";
  1973. }
  1974. .post-header-container .byline.post-author:not(:last-child) {
  1975.  margin-$endSide: 0;
  1976. }
  1977. .post-snippet-container {
  1978.  font: $(feed.text.font);
  1979. }
  1980. .sharing-button {
  1981.  text-transform: uppercase;
  1982.  word-break: normal;
  1983. }
  1984. .post-outer-container .svg-icon-24 {
  1985.  fill: $(feed.button.color);
  1986. }
  1987. .post-body {
  1988.  color: $(feed.text.color);
  1989.  font: $(feed.text.font);
  1990.  line-height: 2;
  1991. }
  1992. .blog-pager .blog-pager-older-link {
  1993.  color: $(feed.button.color);
  1994.  float: right;
  1995.  font: $(feed.button.font);
  1996.  text-transform: uppercase;
  1997. }
  1998. .no-posts-message {
  1999.  margin: 32px;
  2000. }
  2001. body.item-view .Blog .post-title-container {
  2002.  background-color: $(item.title.background.color);
  2003.  box-sizing: border-box;
  2004.  margin-bottom: -1px;
  2005.  padding-bottom: 86px;
  2006.  padding-$endSide: 290px;
  2007.  padding-$startSide: 140px;
  2008.  padding-top: 124px;
  2009.  width: 100%;
  2010. }
  2011. body.item-view .Blog .post-title, body.item-view .Blog .post-title a {
  2012.  color: $(item.title.color);
  2013.  font: $(item.title.font);
  2014.  line-height: 1.41666667;
  2015.  margin-bottom: 0;
  2016. }
  2017. body.item-view .Blog {
  2018.  margin: 0;
  2019.  margin-bottom: 85px;
  2020.  padding: 0;
  2021. }
  2022. body.item-view .Blog .post-content {
  2023.  margin-$endSide: 0;
  2024.  max-width: none;
  2025. }
  2026. body.item-view .comments, body.item-view .widget.Blog .post-bottom, body.item-view .shown-ad {
  2027.  margin-bottom: 0;
  2028.  margin-$endSide: 400px;
  2029.  margin-$startSide: 140px;
  2030.  margin-top: 0;
  2031. }
  2032. body.item-view .widget.Header header p {
  2033.  max-width: $(feed.width - 540px);
  2034. }
  2035. body.item-view .shown-ad {
  2036.  margin-bottom: 24px;
  2037.  margin-top: 24px;
  2038. }
  2039. body.item-view .Blog .post-header-container {
  2040.  padding-$startSide: 140px;
  2041. }
  2042. body.item-view .Blog .post-header-container .post-author-profile-pic-container {
  2043.  background-color: $(item.title.background.color);
  2044.  height: 84px;
  2045. }
  2046. body.item-view .Blog .post-header-container .post-author-profile-pic-container {
  2047.  float: $startSide;
  2048.  margin-$endSide: 24px;
  2049.  margin-$startSide: -140px;
  2050.  padding-$startSide: 140px;
  2051. }
  2052. body.item-view .Blog .post-author-profile-pic {
  2053.  max-height: 100%;
  2054. }
  2055. body.item-view .Blog .post-header {
  2056.  float: $startSide;
  2057.  height: 84px;
  2058. }
  2059. body.item-view .Blog .post-header>* {
  2060.  position: relative;
  2061.  top: 50%;
  2062.  -webkit-transform: translateY(-50%);
  2063.      -ms-transform: translateY(-50%);
  2064.          transform: translateY(-50%);
  2065. }
  2066. body.item-view .post-body {
  2067.  color: $(body.text.color);
  2068.  font: $(body.text.font);
  2069.  line-height: 2;
  2070. }
  2071. body.item-view .Blog .post-body-container {
  2072.  position: relative;
  2073.  margin-top: 20px;
  2074.  margin-bottom: 32px;
  2075. }
  2076. body.item-view .Blog .post-body-container {
  2077.  margin-$startSide: 140px;
  2078.  padding-$endSide: 290px;
  2079. }
  2080. body.item-view .Blog .post-body {
  2081.  margin-bottom: 0;
  2082.  margin-$endSide: 110px;
  2083. }
  2084. body.item-view .Blog .post-body:first-letter {
  2085.  font-size: $(body.text.font.size * 2 * 2);
  2086.  font-weight: 600;
  2087.  line-height: 1;
  2088. }
  2089. body.item-view .Blog .post-body:first-letter {
  2090.  float: $startSide;
  2091.  margin-$endSide: 16px;
  2092. }
  2093. body.item-view .Blog .post-body div[style*="text-align: center"]:first-letter {
  2094.  float: none;
  2095.  font-size: inherit;
  2096.  font-weight: inherit;
  2097.  line-height: inherit;
  2098.  margin-right: 0;
  2099. }
  2100. body.item-view .Blog .post-body:first-line {
  2101.  color: $(item.action.color);
  2102. }
  2103. body.item-view .Blog .post-body-container .post-sidebar {
  2104.  position: absolute;
  2105.  top: 0;
  2106.  width: 290px;
  2107. }
  2108. body.item-view .Blog .post-body-container .post-sidebar {
  2109.  $endSide: 0;
  2110. }
  2111. body.item-view .Blog .post-body-container .post-sidebar .sharing-button {
  2112.  display: inline-block;
  2113. }
  2114. .widget.Attribution {
  2115.  clear: both;
  2116.  font: $(attribution.text.font);
  2117.  padding-top: 2em;
  2118. }
  2119. .widget.Attribution .blogger {
  2120.  margin: 12px;
  2121. }
  2122. .widget.Attribution svg {
  2123.  fill: $(attribution.icon.color);
  2124. }
  2125. body.item-view .PopularPosts {
  2126.  margin-$startSide: 140px;
  2127. }
  2128. body.item-view .PopularPosts .widget-content>ul {
  2129.  padding-left: 0;
  2130. }
  2131. body.item-view .PopularPosts .widget-content>ul>li {
  2132.  display: block;
  2133. }
  2134. body.item-view .PopularPosts .post-content {
  2135.  max-width: 664px;
  2136. }
  2137. body.item-view .PopularPosts .post-content {
  2138.  margin-$endSide: 76px;
  2139. }
  2140. body.item-view .PopularPosts .post:not(:last-child) {
  2141.  margin-bottom: 85px;
  2142. }
  2143. body.item-view .post-body-container img {
  2144.  height: auto;
  2145.  max-width: 100%;
  2146. }
  2147. body.item-view .PopularPosts>.title {
  2148.  color: $(item.subtitle.color);
  2149.  font: $(item.subtitle.font);
  2150.  margin-bottom: 36px;
  2151. }
  2152. body.item-view .post-sidebar .post-labels-sidebar {
  2153.  margin-top: 48px;
  2154.  min-width: 150px;
  2155. }
  2156. body.item-view .post-sidebar .post-labels-sidebar h3 {
  2157.  color: $(body.text.color);
  2158.  font: $(item.action.font);
  2159.  margin-bottom: 16px;
  2160. }
  2161. body.item-view .post-sidebar .post-labels-sidebar a {
  2162.  color: $(item.action.color);
  2163.  display: block;
  2164.  font: $(item.label.font);
  2165.  font-style: italic;
  2166.  margin-bottom: 16px;
  2167. }
  2168. body.item-view blockquote {
  2169.  font: $(item.blockquote.font);
  2170.  font-style: italic;
  2171.  quotes: "\201c" "\201d" "\2018" "\2019";
  2172. }
  2173. body.item-view blockquote:before {
  2174.  content: open-quote;
  2175. }
  2176. body.item-view blockquote:after {
  2177.  content: close-quote;
  2178. }
  2179. body.item-view .post-bottom {
  2180.  display: -webkit-box;
  2181.  display: -webkit-flex;
  2182.  display: -ms-flexbox;
  2183.  display: flex;
  2184.  float: none;
  2185. }
  2186. body.item-view .widget.Blog .post-share-buttons-bottom {
  2187.  -webkit-box-flex: 0;
  2188.  -webkit-flex: 0 1 auto;
  2189.      -ms-flex: 0 1 auto;
  2190.          flex: 0 1 auto;
  2191.  -webkit-box-ordinal-group: 3;
  2192.  -webkit-order: 2;
  2193.      -ms-flex-order: 2;
  2194.          order: 2;
  2195. }
  2196. body.item-view .widget.Blog .post-share-buttons-bottom {
  2197.  margin-$startSide: 40px;
  2198. }
  2199. body.item-view .widget.Blog .post-footer {
  2200.  line-height: 1;
  2201. }
  2202. .widget.Blog body.item-view .post-bottom {
  2203.  margin-$endSide: 0;
  2204.  margin-bottom: 80px;
  2205. }
  2206. body.item-view .post-footer .post-labels .byline-label {
  2207.  color: $(body.text.color);
  2208.  font: $(item.action.font);
  2209. }
  2210. body.item-view .post-footer .post-labels a {
  2211.  color: $(item.action.color);
  2212.  font: $(item.label.font);
  2213. }
  2214. body.item-view .post-footer .post-labels a:not(:last-child):after {
  2215.  content: ', ';
  2216. }
  2217. body.item-view #comments {
  2218.  border-top: none;
  2219.  padding: 0;
  2220. }
  2221. body.item-view #comments h3.title {
  2222.  color: $(item.subtitle.color);
  2223.  font: $(item.subtitle.font);
  2224.  margin-bottom: 48px;
  2225. }
  2226. body.item-view #comments .comment-form h4 {
  2227.  position: absolute;
  2228.  clip: rect(1px,1px,1px,1px);
  2229.  padding: 0;
  2230.  border: 0;
  2231.  height: 1px;
  2232.  width: 1px;
  2233.  overflow: hidden;
  2234. }
  2235. .heroPost {
  2236.  display: -webkit-box;
  2237.  display: -webkit-flex;
  2238.  display: -ms-flexbox;
  2239.  display: flex;
  2240.  position: relative;
  2241. }
  2242. .widget.Blog .heroPost {
  2243.  margin-$startSide: -136px;
  2244. }
  2245. .heroPost .big-post-title .post-snippet {
  2246.  color: $(heropost.main.text.color);
  2247. }
  2248. .heroPost.noimage .post-snippet {
  2249.  color: $(heropost.secondary.text.color);
  2250. }
  2251. .heroPost .big-post-image-top {
  2252.  display: none;
  2253.  background-size: cover;
  2254.  background-position: center;
  2255. }
  2256. .heroPost .big-post-title {
  2257.  background-color: $(heropost.main.background.color);
  2258.  box-sizing: border-box;
  2259.  -webkit-box-flex: 1;
  2260.  -webkit-flex: 1 1 auto;
  2261.      -ms-flex: 1 1 auto;
  2262.          flex: 1 1 auto;
  2263.  max-width: $(feed.width - 392px);
  2264.  min-width: 0;
  2265.  padding-bottom: 84px;
  2266.  padding-$endSide: 76px;
  2267.  padding-$startSide: 136px;
  2268.  padding-top: 76px;
  2269. }
  2270. .heroPost.noimage .big-post-title {
  2271.  -webkit-box-flex: 1;
  2272.  -webkit-flex: 1 0 auto;
  2273.      -ms-flex: 1 0 auto;
  2274.          flex: 1 0 auto;
  2275.  max-width: 480px;
  2276.  width: 480px;
  2277. }
  2278. .heroPost .big-post-title h3 {
  2279.  margin: 0 0 24px;
  2280. }
  2281. .heroPost .big-post-title h3 a {
  2282.  color: $(heropost.main.title.color);
  2283. }
  2284. .heroPost .big-post-title .post-body {
  2285.  color: $(heropost.main.text.color);
  2286. }
  2287. .heroPost .big-post-title .item-byline {
  2288.  color: $(heropost.main.text.color);
  2289.  margin-bottom: 24px;
  2290. }
  2291. .heroPost .big-post-title .item-byline .post-timestamp {
  2292.  display: block;
  2293. }
  2294. .heroPost .big-post-title .item-byline a {
  2295.  color: $(heropost.main.text.color);
  2296. }
  2297. .heroPost .byline, .heroPost .byline a, .heroPost .flat-button {
  2298.  color: $(heropost.main.button.color);
  2299. }
  2300. .heroPost .flat-button.ripple .splash {
  2301.  background-color: rgba($(heropost.main.button.color.red),$(heropost.main.button.color.green),$(heropost.main.button.color.blue),0.4);
  2302. }
  2303. .heroPost .flat-button.ripple:hover {
  2304.  background-color: rgba($(heropost.main.button.color.red),$(heropost.main.button.color.green),$(heropost.main.button.color.blue),0.12);
  2305. }
  2306. .heroPost .big-post-image {
  2307.  background-position: center;
  2308.  background-repeat: no-repeat;
  2309.  background-size: cover;
  2310.  -webkit-box-flex: 0;
  2311.  -webkit-flex: 0 0 auto;
  2312.      -ms-flex: 0 0 auto;
  2313.          flex: 0 0 auto;
  2314.  width: 392px;
  2315. }
  2316. .heroPost .big-post-text {
  2317.  background-color: $(heropost.secondary.background.color);
  2318.  box-sizing: border-box;
  2319.  color: $(heropost.secondary.text.color);
  2320.  -webkit-box-flex: 1;
  2321.  -webkit-flex: 1 1 auto;
  2322.      -ms-flex: 1 1 auto;
  2323.          flex: 1 1 auto;
  2324.  min-width: 0;
  2325.  padding: 48px;
  2326. }
  2327. .heroPost .big-post-text .post-snippet-fade {
  2328.  color: $(heropost.secondary.text.color);
  2329.  background: -webkit-linear-gradient(right,$(heropost.secondary.background.color),$(heropost.secondary.background.color.transparent));
  2330.  background: linear-gradient(to left,$(heropost.secondary.background.color),$(heropost.secondary.background.color.transparent));
  2331. }
  2332. .heroPost .big-post-text .byline, .heroPost .big-post-text .byline a, .heroPost .big-post-text .jump-link, .heroPost .big-post-text .sharing-button {
  2333.  color: $(heropost.secondary.button.color);
  2334. }
  2335. .heroPost .big-post-text .snippet-item:first-letter {
  2336.  color: $(heropost.secondary.dropcap.color);
  2337.  float: left;
  2338.  font-weight: bold;
  2339.  margin-right: 12px;
  2340. }
  2341. .sidebar-container {
  2342.  background-color: $(sidebar.backgroundColor);
  2343. }
  2344. body.sidebar-visible .sidebar-container {
  2345.  box-shadow: 0 0 20px 0 rgba(0,0,0,0.7);
  2346. }
  2347. .sidebar-container .svg-icon-24 {
  2348.  fill: $(sidebar.icon.color);
  2349. }
  2350. .sidebar-container .navigation .sidebar-back {
  2351.  float: right;
  2352. }
  2353. .sidebar-container .widget {
  2354.  padding-right: 16px;
  2355.  margin-right: 0;
  2356.  margin-left: 38px;
  2357. }
  2358. .sidebar-container .widget+.widget {
  2359.  border-top: solid 1px #bdbdbd;
  2360. }
  2361. .sidebar-container .widget .title {
  2362.  font: $(sidebar.widget.title.font);
  2363. }
  2364. .collapsible {
  2365.  width: 100%;
  2366. }
  2367. .widget.Profile {
  2368.  border-top: none;
  2369.  margin: 0;
  2370.  margin-left: 38px;
  2371.  margin-top: 24px;
  2372.  padding-right: 0;
  2373. }
  2374. body.sidebar-visible .widget.Profile {
  2375.  margin-left: 0;
  2376. }
  2377. .widget.Profile h2 {
  2378.  display: none;
  2379. }
  2380. .widget.Profile h3.title {
  2381.  color: $(sidebar.profile.title.color);
  2382.  margin: 16px 32px;
  2383. }
  2384. .widget.Profile .individual {
  2385.  text-align: center;
  2386. }
  2387. .widget.Profile .individual .default-avatar-wrapper .avatar-icon {
  2388.  margin: auto;
  2389. }
  2390. .widget.Profile .team {
  2391.  margin-bottom: 32px;
  2392.  margin-left: 32px;
  2393.  margin-right: 32px;
  2394. }
  2395. .widget.Profile ul {
  2396.  list-style: none;
  2397.  padding: 0;
  2398. }
  2399. .widget.Profile li {
  2400.  margin: 10px 0;
  2401.  text-align: left;
  2402. }
  2403. .widget.Profile .profile-img {
  2404.  border-radius: 50%;
  2405.  float: none;
  2406. }
  2407. .widget.Profile .profile-info {
  2408.  margin-bottom: 12px;
  2409. }
  2410. .profile-snippet-fade {
  2411.  background: -webkit-linear-gradient(right,$(sidebar.backgroundColor) 0%,$(sidebar.backgroundColor) 20%,$(sidebar.backgroundColor.transparent) 100%);
  2412.  background: linear-gradient(to left,$(sidebar.backgroundColor) 0%,$(sidebar.backgroundColor) 20%,$(sidebar.backgroundColor.transparent) 100%);
  2413.  height: 1.7em;
  2414.  position: absolute;
  2415.  right: 16px;
  2416.  top: 11.7em;
  2417.  width: 96px;
  2418. }
  2419. .profile-snippet-fade:after {
  2420.  content: '\2026';
  2421.  float: right;
  2422. }
  2423. .widget.Profile .profile-location {
  2424.  color: $(sidebar.profile.text.color);
  2425.  font-size: 16px;
  2426.  margin: 0;
  2427.  opacity: .74;
  2428. }
  2429. .widget.Profile .team-member .profile-link:after {
  2430.  clear: both;
  2431.  content: "";
  2432.  display: table;
  2433. }
  2434. .widget.Profile .team-member .profile-name {
  2435.  word-break: break-word;
  2436. }
  2437. .widget.Profile .profile-datablock .profile-link {
  2438.  color: $(sidebar.profile.title.color);
  2439.  font: $(sidebar.profile.link.font);
  2440.  font-size: 24px;
  2441.  text-transform: none;
  2442.  word-break: break-word;
  2443. }
  2444. .widget.Profile .profile-datablock .profile-link+div {
  2445.  margin-top: 16px !important;
  2446. }
  2447. .widget.Profile .profile-link {
  2448.  background: transparent;
  2449.  border: none;
  2450.  box-shadow: none;
  2451.  color: $(body.link.color);
  2452.  cursor: pointer;
  2453.  font-size: 14px;
  2454.  font-weight: bold;
  2455.  outline: none;
  2456.  text-decoration: none;
  2457.  text-transform: uppercase;
  2458.  width: auto;
  2459.  font: $(sidebar.profile.link.font);
  2460.  font-size: 14px;
  2461. }
  2462. .widget.Profile .profile-textblock {
  2463.  color: $(sidebar.profile.text.color);
  2464.  font-size: 14px;
  2465.  line-height: 24px;
  2466.  margin: 0 18px;
  2467.  opacity: .74;
  2468.  overflow: hidden;
  2469.  position: relative;
  2470.  word-break: break-word;
  2471. }
  2472. .widget.Label .list-label-widget-content li a {
  2473.  width: 100%;
  2474.  word-wrap: break-word;
  2475. }
  2476. .extendable .show-more, .extendable .show-less {
  2477.  font: $(sidebar.profile.link.font);
  2478.  font-size: 14px;
  2479.  margin: 0 -8px;
  2480. }
  2481. .widget.BlogArchive .post-count {
  2482.  color: $(body.text.color);
  2483. }
  2484. .Label li {
  2485.  margin: 16px 0;
  2486. }
  2487. .Label li:last-child {
  2488.  margin-bottom: 0;
  2489. }
  2490. .post-snippet.snippet-container {
  2491.  max-height: $(body.text.font.size * 4 * 2);
  2492. }
  2493. .post-snippet .snippet-item {
  2494.  line-height: $(body.text.font.size * 2);
  2495. }
  2496. .post-snippet .snippet-fade {
  2497.  background: -webkit-linear-gradient($startSide,$(body.background.color) 0%,$(body.background.color) 20%,$(body.background.color.transparent) 100%);
  2498.  background: linear-gradient(to $startSide,$(body.background.color) 0%,$(body.background.color) 20%,$(body.background.color.transparent) 100%);
  2499.  color: $(body.text.color);
  2500.  height: $(body.text.font.size * 2);
  2501. }
  2502. .hero-post-snippet.snippet-container {
  2503.  max-height: $(body.text.font.size * 4 * 2);
  2504. }
  2505. .hero-post-snippet .snippet-item {
  2506.  line-height: $(body.text.font.size * 2);
  2507. }
  2508. .hero-post-snippet .snippet-fade {
  2509.  background: -webkit-linear-gradient($startSide,$(heropost.main.background.color) 0%,$(heropost.main.background.color) 20%,$(heropost.main.background.color.transparent) 100%);
  2510.  background: linear-gradient(to $startSide,$(heropost.main.background.color) 0%,$(heropost.main.background.color) 20%,$(heropost.main.background.color.transparent) 100%);
  2511.  color: $(heropost.main.text.color);
  2512.  height: $(body.text.font.size * 2);
  2513. }
  2514. .hero-post-snippet a {
  2515.  color: $(heropost.main.link.color);
  2516. }
  2517. .hero-post-noimage-snippet.snippet-container {
  2518.  max-height: $(body.text.font.size * 8 * 2);
  2519. }
  2520. .hero-post-noimage-snippet .snippet-item {
  2521.  line-height: $(body.text.font.size * 2);
  2522. }
  2523. .hero-post-noimage-snippet .snippet-fade {
  2524.  background: -webkit-linear-gradient($startSide,$(heropost.secondary.background.color) 0%,$(heropost.secondary.background.color) 20%,$(heropost.secondary.background.color.transparent) 100%);
  2525.  background: linear-gradient(to $startSide,$(heropost.secondary.background.color) 0%,$(heropost.secondary.background.color) 20%,$(heropost.secondary.background.color.transparent) 100%);
  2526.  color: $(heropost.secondary.text.color);
  2527.  height: $(body.text.font.size * 2);
  2528. }
  2529. .popular-posts-snippet.snippet-container {
  2530.  max-height: $(body.text.font.size * 4 * 2);
  2531. }
  2532. .popular-posts-snippet .snippet-item {
  2533.  line-height: $(body.text.font.size * 2);
  2534. }
  2535. .popular-posts-snippet .snippet-fade {
  2536.  background: -webkit-linear-gradient($startSide,$(body.background.color) 0%,$(body.background.color) 20%,$(body.background.color.transparent) 100%);
  2537.  background: linear-gradient(to $startSide,$(body.background.color) 0%,$(body.background.color) 20%,$(body.background.color.transparent) 100%);
  2538.  color: $(body.text.color);
  2539.  height: $(body.text.font.size * 2);
  2540. }
  2541. .profile-snippet.snippet-container {
  2542.  max-height: 192px;
  2543. }
  2544. .profile-snippet .snippet-item {
  2545.  line-height: 24px;
  2546. }
  2547. .profile-snippet .snippet-fade {
  2548.  background: -webkit-linear-gradient($startSide,$(sidebar.backgroundColor) 0%,$(sidebar.backgroundColor) 20%,$(sidebar.backgroundColor.transparent) 100%);
  2549.  background: linear-gradient(to $startSide,$(sidebar.backgroundColor) 0%,$(sidebar.backgroundColor) 20%,$(sidebar.backgroundColor.transparent) 100%);
  2550.  color: $(sidebar.profile.text.color);
  2551.  height: 24px;
  2552. }
  2553. .hero-post-noimage-snippet .snippet-item:first-letter {
  2554.  font-size: $(body.text.font.size * 4);
  2555.  line-height: $(body.text.font.size * 4);
  2556. }
  2557. #comments div, #comments cite, #comments a {
  2558.  font-size: 16px;
  2559.  line-height: 1.4;
  2560. }
  2561. #comments .comment .comment-header .user, #comments .comment .comment-header .user a {
  2562.  color: $(body.text.color);
  2563.  font: $(item.action.font);
  2564. }
  2565. #comments .comment .comment-header .datetime a {
  2566.  color: $(item.subtitle.color);
  2567.  font: $(item.action.font);
  2568. }
  2569. #comments .comment .comment-header .datetime a:before {
  2570.  content: "\b7   ";
  2571. }
  2572. #comments .comment .comment-content {
  2573.  margin-top: 6px;
  2574. }
  2575. #comments .comment .comment-actions {
  2576.  color: $(item.action.color);
  2577.  font: $(item.action.font);
  2578. }
  2579. #comments .continue {
  2580.  display: none;
  2581. }
  2582. #comments .comment-footer {
  2583.  margin-top: 8px;
  2584. }
  2585. .cmt_iframe_holder {
  2586.  margin-$startSide: 140px !important;
  2587. }
  2588. body.variant-rockpool_deep_orange .centered-top-secondline .PageList .overflow-popup li a {
  2589.  color: #000;
  2590. }
  2591. body.variant-rockpool_pink .blog-name h1, body.variant-rockpool_pink .blog-name h1 a {
  2592.  text-transform: none;
  2593. }
  2594. body.variant-rockpool_deep_orange .post-filter-message {
  2595.  background-color: $(header.background.color);
  2596. }
  2597. .z {
  2598.  left: 0; } @media screen and (max-width: $(feed.width + sidebar.width + 20px - 1px)) { .z { left: 0;
  2599. }
  2600. .page {
  2601.  float: none;
  2602.  margin: 0 auto;
  2603.  max-width: none !important;
  2604. }
  2605. .page_body {
  2606.  max-width: $(feed.width);
  2607.  margin: 0 auto;
  2608. }
  2609. .z {
  2610.  left: 0; } } .z { left: 0;
  2611. }
  2612. .z {
  2613.  left: 0; } @media (max-width: 1280px) { .z { left: 0;
  2614. }
  2615. .heroPost .big-post-image {
  2616.  display: table-cell;
  2617.  left: auto;
  2618.  position: static;
  2619.  top: auto;
  2620. }
  2621. .heroPost .big-post-title {
  2622.  display: table-cell;
  2623. }
  2624. .z {
  2625.  left: 0; } } .z { left: 0;
  2626. }
  2627. .z {
  2628.  left: 0; } @media (max-width: 1168px) { .z { left: 0;
  2629. }
  2630. .centered-top-container, .centered-top-placeholder {
  2631.  padding: 24px 24px 32px;
  2632. }
  2633. .sticky {
  2634.  padding: 0 24px;
  2635. }
  2636. .subscribe-section-container {
  2637.  margin-$startSide: 48px;
  2638. }
  2639. .hamburger-section {
  2640.  margin-left: 48px;
  2641. }
  2642. .big-post-title-inner, .big-post-text-inner {
  2643.  margin: 0 auto;
  2644.  max-width: 920px;
  2645. }
  2646. .centered-top {
  2647.  padding: 0;
  2648.  max-width: 920px;
  2649. }
  2650. .Blog {
  2651.  padding: 0;
  2652. }
  2653. body.item-view .Blog {
  2654.  padding: 0 24px;
  2655.  margin: 0 auto;
  2656.  max-width: 920px;
  2657. }
  2658. .post-filter-description {
  2659.  margin-$endSide: 36px;
  2660. }
  2661. .post-outer {
  2662.  display: block;
  2663. }
  2664. .post-content {
  2665.  max-width: none;
  2666.  margin: 0;
  2667. }
  2668. .post-outer .snippet-thumbnail {
  2669.  width: 920px;
  2670.  height: 613.33333333px;
  2671.  margin-bottom: 32px;
  2672. }
  2673. .post-outer .snippet-thumbnail.thumbnail-empty {
  2674.  display: none;
  2675. }
  2676. .shown-ad .inline-ad {
  2677.  max-width: 100%;
  2678. }
  2679. body.item-view .Blog {
  2680.  padding: 0;
  2681.  max-width: none;
  2682. }
  2683. .post-filter-message {
  2684.  margin: 24px calc((100% - 920px) / 2);
  2685.  max-width: none;
  2686. }
  2687. body.feed-view .blog-posts, body.feed-view .feed-message, .FeaturedPost h3 {
  2688.  margin-left: calc((100% - 920px) / 2);
  2689.  margin-right: calc((100% - 920px) / 2);
  2690. }
  2691. body.item-view .Blog .post-title-container {
  2692.  padding: 62px calc((100% - 920px) / 2) 24px;
  2693. }
  2694. body.item-view .Blog .post-header-container {
  2695.  padding-$startSide: calc((100% - 920px) / 2);
  2696. }
  2697. body.item-view .Blog .post-body-container, body.item-view .comments, body.item-view .post-outer-container>.shown-ad, body.item-view .widget.Blog .post-bottom {
  2698.  margin: 32px calc((100% - 920px) / 2);
  2699.  padding: 0;
  2700. }
  2701. body.item-view .cmt_iframe_holder {
  2702.  margin: 32px 24px !important;
  2703. }
  2704. .blog-pager {
  2705.  margin-left: calc((100% - 920px) / 2);
  2706.  margin-right: calc((100% - 920px) / 2);
  2707. }
  2708. body.item-view .post-bottom {
  2709.  margin: 0 auto;
  2710.  max-width: 968px;
  2711. }
  2712. body.item-view .PopularPosts .post-content {
  2713.  max-width: 100%;
  2714.  margin-right: 0;
  2715. }
  2716. body.item-view .Blog .post-body {
  2717.  margin-$endSide: 0;
  2718. }
  2719. body.item-view .Blog .post-sidebar {
  2720.  display: none;
  2721. }
  2722. body.item-view .widget.Blog .post-share-buttons-bottom {
  2723.  margin-left: 24px;
  2724.  margin-right: 24px;
  2725. }
  2726. body.item-view .PopularPosts {
  2727.  margin: 0 auto;
  2728.  max-width: 920px;
  2729. }
  2730. body.item-view .comment-thread-title {
  2731.  margin-$startSide: calc((100% - 920px) / 2);
  2732. }
  2733. .heroPost {
  2734.  display: block;
  2735. }
  2736. .heroPost .big-post-title {
  2737.  display: block;
  2738.  max-width: none;
  2739.  padding: 24px;
  2740. }
  2741. .heroPost .big-post-image {
  2742.  display: none;
  2743. }
  2744. .heroPost .big-post-image-top {
  2745.  display: block;
  2746.  height: 613.33333333px;
  2747.  margin: 0 auto;
  2748.  max-width: 920px;
  2749. }
  2750. .heroPost .big-post-image-top-container {
  2751.  background-color: $(heropost.main.background.color);
  2752. }
  2753. .heroPost.noimage .big-post-title {
  2754.  max-width: none;
  2755.  width: 100%;
  2756. }
  2757. .heroPost.noimage .big-post-text {
  2758.  position: static;
  2759.  width: 100%;
  2760. }
  2761. .heroPost .big-post-text {
  2762.  padding: 24px;
  2763. }
  2764. .z {
  2765.  left: 0; } } .z { left: 0;
  2766. }
  2767. .z {
  2768.  left: 0; } @media (max-width: 968px) { .z { left: 0;
  2769. }
  2770. body {
  2771.  font-size: $(body.text.font.size * 14 / 20);
  2772. }
  2773. .post-header-container .byline, .post-header-container .byline a {
  2774.  font-size: 14px;
  2775. }
  2776. .post-title, .post-title a {
  2777.  font-size: 24px;
  2778. }
  2779. .post-outer .snippet-thumbnail {
  2780.  width: 100%;
  2781.  height: calc((100vw - 48px) * 2 / 3);
  2782. }
  2783. body.item-view .Blog .post-title-container {
  2784.  padding: 62px 24px 24px;
  2785. }
  2786. body.item-view .Blog .post-header-container {
  2787.  padding-$startSide: 24px;
  2788. }
  2789. body.item-view .Blog .post-body-container, body.item-view .PopularPosts, body.item-view .comments, body.item-view .widget.Blog .post-bottom, body.item-view .post-outer-container>.shown-ad {
  2790.  margin: 32px 24px;
  2791.  padding: 0;
  2792. }
  2793. body.feed-view .blog-posts, body.feed-view .feed-message, .FeaturedPost h3 {
  2794.  margin-left: 24px;
  2795.  margin-right: 24px;
  2796. }
  2797. .post-filter-message {
  2798.  margin: 24px;
  2799. }
  2800. body.item-view blockquote {
  2801.  font-size: 18px;
  2802. }
  2803. body.item-view .Blog .post-title {
  2804.  font-size: $(item.title.font.size * 24 / 48);
  2805. }
  2806. body.item-view .Blog .post-body {
  2807.  font-size: $(body.text.font.size * 14 / 20);
  2808. }
  2809. body.item-view .Blog .post-body:first-letter {
  2810.  font-size: $(body.text.font.size * 14 / 20 * 4);
  2811.  line-height: $(body.text.font.size * 14 / 20 * 4);
  2812. }
  2813. .main_header_elements {
  2814.  position: relative;
  2815.  display: block;
  2816. }
  2817. .search.focused .section {
  2818.  margin-right: 0;
  2819.  width: 100%;
  2820. }
  2821. html[dir=ltr] .search form {
  2822.  margin-right: 0;
  2823. }
  2824. .hamburger-section {
  2825.  margin-left: 24px;
  2826. }
  2827. .search-expand-icon {
  2828.  display: block;
  2829.  float: left;
  2830.  height: 24px;
  2831.  margin-top: -12px;
  2832. }
  2833. .search-expand-text {
  2834.  display: none;
  2835. }
  2836. .subscribe-section-container {
  2837.  margin-top: 12px;
  2838. }
  2839. .subscribe-section-container {
  2840.  float: $startSide;
  2841.  margin-$startSide: 0;
  2842. }
  2843. .search-expand {
  2844.  position: absolute;
  2845.  $endSide: 0;
  2846.  top: 0;
  2847. }
  2848. html[dir=ltr] .search-expand {
  2849.  margin-left: 24px;
  2850. }
  2851. .centered-top.search-focused .subscribe-section-container {
  2852.  opacity: 0;
  2853. }
  2854. .blog-name {
  2855.  float: none;
  2856. }
  2857. .blog-name {
  2858.  margin-$endSide: 36px;
  2859. }
  2860. .centered-top-secondline .PageList li {
  2861.  margin-$endSide: 24px;
  2862. }
  2863. .centered-top.search-focused .subscribe-section-container, .centered-top.search-focused .subscribe-button {
  2864.  opacity: 1;
  2865. }
  2866. body.item-view .comment-thread-title {
  2867.  margin-$startSide: 24px;
  2868. }
  2869. .blog-pager {
  2870.  margin-left: 24px;
  2871.  margin-right: 24px;
  2872. }
  2873. .heroPost .big-post-image-top {
  2874.  width: 100%;
  2875.  height: calc(100vw * 2 / 3);
  2876. }
  2877. .post-snippet.snippet-container, .popular-posts-snippet.snippet-container {
  2878.  font-size: 14px;
  2879.  max-height: 112px;
  2880. }
  2881. .post-snippet .snippet-item, .popular-posts-snippet .snippet-item {
  2882.  line-height: 2;
  2883. }
  2884. .post-snippet .snippet-fade, .popular-posts-snippet .snippet-fade {
  2885.  height: 28px;
  2886. }
  2887. .hero-post-snippet.snippet-container {
  2888.  font-size: 14px;
  2889.  max-height: 112px;
  2890. }
  2891. .hero-post-snippet .snippet-item {
  2892.  line-height: 2;
  2893. }
  2894. .hero-post-snippet .snippet-fade {
  2895.  height: 28px;
  2896. }
  2897. .hero-post-noimage-snippet.snippet-container {
  2898.  font-size: 14px;
  2899.  line-height: 2;
  2900.  max-height: 224px;
  2901. }
  2902. .hero-post-noimage-snippet .snippet-item {
  2903.  line-height: 2;
  2904. }
  2905. .hero-post-noimage-snippet .snippet-fade {
  2906.  height: 28px;
  2907. }
  2908. .hero-post-noimage-snippet .snippet-item:first-letter {
  2909.  font-size: 56px;
  2910.  line-height: normal;
  2911. }
  2912. body.item-view .post-body-container .separator[style*="text-align: center"] a[imageanchor="1"][style*="float: left;"] img, body.item-view .post-body-container .separator[style*="text-align: center"] a[imageanchor="1"][style*="float: right;"] img {
  2913.  max-width: 100%;
  2914. }
  2915. body.item-view .post-body-container .separator[style*="text-align: center"] a[imageanchor="1"] {
  2916.  margin-left: -24px !important;
  2917.  margin-right: -24px !important;
  2918. }
  2919. body.item-view .post-body-container .separator[style*="text-align: center"] a[imageanchor="1"][style*="float: left;"], body.item-view .post-body-container .separator[style*="text-align: center"] a[imageanchor="1"][style*="float: right;"] {
  2920.  margin-left: 0 !important;
  2921.  margin-right: 0 !important;
  2922. }
  2923. .z {
  2924.  left: 0; } } .z { left: 0;
  2925. }
  2926. .z {
  2927.  left: 0; } @media screen and (min-width: $(feed.width + sidebar.width + 20px)) { .z { left: 0;
  2928. }
  2929. .page {
  2930.  float: left;
  2931. }
  2932. .centered-top {
  2933.  max-width: $(feed.width + sidebar.width);
  2934.  padding: 44px $(sidebar.width + 136px) 32px 136px;
  2935. }
  2936. .sidebar-container {
  2937.  box-shadow: none;
  2938.  float: right;
  2939.  max-width: $(sidebar.width);
  2940.  z-index: 32;
  2941. }
  2942. .sidebar-container .navigation {
  2943.  display: none;
  2944. }
  2945. .hamburger-section, .sticky .hamburger-section {
  2946.  display: none;
  2947. }
  2948. .search.focused .section {
  2949.  margin-right: 0;
  2950.  width: 100%;
  2951. }
  2952. #footer {
  2953.  padding-right: $(sidebar.width);
  2954. }
  2955. .z {
  2956.  left: 0; } } .z { left: 0;
  2957. }
  2958.  
  2959. ]]></b:skin>
  2960.  
  2961.     <b:template-skin>
  2962.       <![CDATA[
  2963.      body#layout .hidden,
  2964.      body#layout .invisible {
  2965.        display: inherit;
  2966.      }
  2967.      body#layout .navigation {
  2968.        display: none;
  2969.      }
  2970.      body#layout .page {
  2971.        display: inline-block;
  2972.        vertical-align: top;
  2973.        width: 55%;
  2974.      }
  2975.      body#layout .sidebar-container {
  2976.        display: inline-block;
  2977.        float: right;
  2978.        width: 40%;
  2979.      }
  2980.      body#layout .hamburger-menu,
  2981.      body#layout .search {
  2982.        display: none;
  2983.      }
  2984.      ]]>
  2985.     </b:template-skin>
  2986.  
  2987.     <b:defaultmarkups>
  2988.       <b:defaultmarkup type='Common'>
  2989.         <b:includable id='heroPost'>
  2990.           <b:with expr:value='(data:postDisplay.showFeaturedImage ?: true) and data:post.featuredImage' var='hasImage'>
  2991.             <div class='heroPost'>
  2992.               <b:class cond='!data:hasImage' name='noimage'/>
  2993.               <b:if cond='data:hasImage'>
  2994.                 <div class='big-post-image-top-container'>
  2995.                   <b:include cond='(data:postDisplay.showFeaturedImage ?: true) and data:post.featuredImage' data='{                                      image: data:post.featuredImage,                                      selector: &quot;.big-post-image-top&quot;,                                      imageSizes: [480, 640, 800, 1200],                                      imageRatio: &quot;3:2&quot;                                    }' name='responsiveImageStyle'/>
  2996.                   <a class='big-post-image-top' expr:href='data:post.url'/>
  2997.                 </div>
  2998.               </b:if>
  2999.               <div class='big-post-title'>
  3000.                 <div class='big-post-title-inner'>
  3001.                   <b:if cond='(data:postDisplay.showTitle ?: true) and data:post.title != &quot;&quot;'>
  3002.                     <h3 class='post-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
  3003.                   </b:if>
  3004.                   <b:include name='headerByline'/>
  3005.                   <b:if cond='data:hasImage'>
  3006.                     <b:with value='&quot;hero-post&quot;' var='snippetPrefix'>
  3007.                       <b:include name='heroPostSnippet'/>
  3008.                     </b:with>
  3009.                     <b:include data='post' name='postFooter'/>
  3010.                   </b:if>
  3011.                 </div>
  3012.               </div>
  3013.               <b:if cond='!data:hasImage'>
  3014.                 <div class='big-post-text'>
  3015.                   <div class='big-post-text-inner'>
  3016.                     <b:with value='&quot;hero-post-noimage&quot;' var='snippetPrefix'>
  3017.                       <b:include name='heroPostSnippet'/>
  3018.                     </b:with>
  3019.                     <b:include data='post' name='postFooter'/>
  3020.                   </div>
  3021.                 </div>
  3022.               </b:if>
  3023.               <b:if cond='(data:postDisplay.showFeaturedImage ?: true) and data:post.featuredImage'>
  3024.                 <a class='big-post-image' expr:href='data:post.url' expr:style='((data:postDisplay.showFeaturedImage ?: true) and data:post.featuredImage)                                ? (&quot;background-image: url(\&quot;&quot; + resizeImage(data:post.featuredImage, 612, &quot;612:1000&quot;) + &quot;\&quot;);&quot;)                                : &quot;&quot;'/>
  3025.               </b:if>
  3026.             </div>
  3027.           </b:with>
  3028.         </b:includable>
  3029.         <b:includable id='heroPostSnippet'>
  3030.           <div class='container post-body entry-content' expr:id='&quot;post-snippet-&quot; + data:post.id'>
  3031.             <b:include cond='(data:postDisplay.showSnippet ?: true)' data='post' name='postSnippet'/>
  3032.           </div>
  3033.         </b:includable>
  3034.         <b:includable id='normalPost'>
  3035.           <b:if cond='(not data:view.isSingleItem or data:widget.type == &quot;PopularPosts&quot;)'>
  3036.             <b:if cond='data:post.featuredImage and (data:widget.type != &quot;PopularPosts&quot; or data:this.postDisplay.showFeaturedImage)'>
  3037.               <a class='snippet-thumbnail' expr:href='data:post.url'>
  3038.                 <b:if b:whitespace='remove' cond='data:post.featuredImage.isResizable'>
  3039.                   <span class='snippet-thumbnail-img' expr:id='&quot;snippet_thumbnail_id_&quot; + data:post.id'/>
  3040.                   <style>
  3041.                     @media (min-width: 1168px) {
  3042.                       <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
  3043.                         background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 256, &quot;1:1&quot;).cssEscaped'/>);
  3044.                       }
  3045.                     }
  3046.                     @media (min-width: 969px) and (max-width: 1167px) {
  3047.                       <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
  3048.                         background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 1167, &quot;3:2&quot;).cssEscaped'/>);
  3049.                       }
  3050.                     }
  3051.                     @media (min-width: 601px) and (max-width: 968px) {
  3052.                       <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
  3053.                         background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 968, &quot;3:2&quot;).cssEscaped'/>);
  3054.                       }
  3055.                     }
  3056.                     @media (max-width: 600px) {
  3057.                       <b:eval expr='&quot;#snippet_thumbnail_id_&quot; + data:post.id'/> {
  3058.                         background-image: url(<b:eval expr='resizeImage(data:post.featuredImage, 600, &quot;3:2&quot;).cssEscaped'/>);
  3059.                       }
  3060.                     }
  3061.                   </style>
  3062.                 <b:else/>
  3063.                   <img expr:src='data:post.featuredImage'/>
  3064.                 </b:if>
  3065.  
  3066.               </a>
  3067.             <b:else/>
  3068.               <div class='snippet-thumbnail thumbnail-empty'/>
  3069.             </b:if>
  3070.           </b:if>
  3071.           <div class='post-content container'>
  3072.             <div class='post-title-container'>
  3073.               <b:include data='post' name='postTitle'/>
  3074.             </div>
  3075.             <div class='post-header-container container'>
  3076.               <b:if cond='data:view.isSingleItem                           and data:widgets.Blog.first.allBylineItems.author                           and data:post.author.authorPhoto.image                           and data:widget.type != &quot;PopularPosts&quot;'>
  3077.                 <div class='post-author-profile-pic-container'>
  3078.                   <b:include data='{                                                           image: data:post.author.authorPhoto.image,                                                           imageRatio: &quot;1:1&quot;,                                                           imageSizes: [84, 168],                                                           sourceSizes: &quot;84px&quot;,                                                           imageClass: &quot;post-author-profile-pic&quot;                                                           }' name='responsiveImage'/>
  3079.                 </div>
  3080.               </b:if>
  3081.               <b:include data='post' name='headerByline'/>
  3082.             </div>
  3083.             <b:if cond='data:view.isSingleItem and data:widget.type != &quot;PopularPosts&quot;'>
  3084.               <div class='post-body-container'>
  3085.                 <b:include data='post' name='postBody'/>
  3086.                 <div class='post-sidebar invisible'>
  3087.                   <b:with value='data:widget.instanceId + &quot;-normalpostsidebar-&quot; + data:post.id' var='sharingId'>
  3088.                     <b:include cond='data:post.shareUrl' data='{ shareButtonClass: &quot;post-share-buttons-top&quot;, overridden: true }' name='maybeAddShareButtons'/>
  3089.                   </b:with>
  3090.                   <b:if cond='data:post.labels and !data:post.labels.empty and data:this.allBylineItems.labels'>
  3091.                     <div class='post-labels-sidebar'>
  3092.                       <h3><data:messages.labels/></h3>
  3093.                       <b:include data='post' name='postLabels'/>
  3094.                     </div>
  3095.                   </b:if>
  3096.                 </div>
  3097.               </div>
  3098.             <b:else/>
  3099.               <b:include cond='data:this.postDisplay.showSnippet ?: true' data='post' name='postBodySnippet'/>
  3100.             </b:if>
  3101.             <b:include data='post' name='postFooter'/>
  3102.           </div>
  3103.         </b:includable>
  3104.         <b:includable id='postTitle' var='post'>
  3105.           <a expr:name='data:post.id'/>
  3106.           <b:if cond='data:post.title != &quot;&quot;'>
  3107.             <h3 class='post-title entry-title'>
  3108.               <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
  3109.                 <a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
  3110.               <b:else/>
  3111.                 <data:post.title/>
  3112.               </b:if>
  3113.             </h3>
  3114.           </b:if>
  3115.         </b:includable>
  3116.         <b:includable id='postBody' var='post'>
  3117.           <!-- If metaDescription is empty, use the post body as the schema.org description too, for G+/FB snippeting. -->
  3118.           <div class='post-body entry-content container' expr:id='&quot;post-body-&quot; + data:post.id'>
  3119.             <data:post.body/>
  3120.           </div>
  3121.         </b:includable>
  3122.         <b:includable id='postBodySnippet' var='post'>
  3123.           <b:with value='&quot;post&quot;' var='snippetPrefix'>
  3124.             <b:include data='post' name='normalPostBodySnippet'/>
  3125.           </b:with>
  3126.         </b:includable>
  3127.         <b:includable id='normalPostBodySnippet' var='post'>
  3128.           <div class='container post-body entry-content' expr:id='&quot;post-snippet-&quot; + data:post.id'>
  3129.             <b:include cond='data:post.snippets' data='post' name='postSnippet'/>
  3130.           </div>
  3131.         </b:includable>
  3132.         <b:includable id='widgetNotAvailableInPreview'>
  3133.           <b:if cond='data:widget.type == &quot;AdSense&quot;'>
  3134.             <div class='vertical-ad-placeholder'>
  3135.               <span><b:message name='messages.adsGoHere'/></span>
  3136.             </div>
  3137.           <b:else/>
  3138.             <b:include name='super.widgetNotAvailableInPreview'/>
  3139.           </b:if>
  3140.         </b:includable>
  3141.       </b:defaultmarkup>
  3142.       <b:defaultmarkup type='BlogSearch'>
  3143.         <b:includable id='searchSubmit'>
  3144.           <b:if cond='data:widget.sectionId == &quot;search_top&quot;'>
  3145.             <label class='search-submit'>
  3146.               <input type='submit'/>
  3147.               <div class='flat-icon-button ripple'>
  3148.                 <b:include data='{ iconClass: &quot;search-icon&quot; }' name='searchIcon'/>
  3149.               </div>
  3150.             </label>
  3151.           <b:else/>
  3152.             <b:include name='super.searchSubmit'/>
  3153.           </b:if>
  3154.         </b:includable>
  3155.       </b:defaultmarkup>
  3156.       <b:defaultmarkup type='AdSense,Blog'>
  3157.         <b:includable id='defaultAdUnit'>
  3158.           <!-- Clear out style (need non-empty string) -->
  3159.           <b:with value='&quot;/* Done in css. */&quot;' var='style'>
  3160.             <b:include name='super.defaultAdUnit'/>
  3161.           </b:with>
  3162.         </b:includable>
  3163.       </b:defaultmarkup>
  3164.       <b:defaultmarkup type='PageList'>
  3165.         <b:includable id='content'>
  3166.           <div class='widget-content'>
  3167.             <b:include cond='data:widget.sectionId == &quot;page_list_top&quot;' name='overflowablePageList'/>
  3168.             <b:include cond='data:widget.sectionId != &quot;page_list_top&quot;' name='pageList'/>
  3169.           </div>
  3170.         </b:includable>
  3171.         <b:includable id='overflowButton'>
  3172.           <a><data:messages.moreEllipsis/></a>
  3173.         </b:includable>
  3174.       </b:defaultmarkup>
  3175.       <b:defaultmarkup type='Blog'>
  3176.         <b:includable id='main' var='this'>
  3177.           <b:include cond='not data:posts.any' name='noContentPlaceholder'/>
  3178.  
  3179.           <b:comment>On the homepage, add a &#39;recent posts&#39; title before the first standard post.</b:comment>
  3180.           <b:if cond='data:view.isMultipleItems'>
  3181.             <b:with value='(data:widgets.FeaturedPost filter w =&gt; w.sectionId == &quot;page_body&quot;).first.postId' var='featuredPostId'>
  3182.               <b:if cond='data:featuredPostId and data:view.isHomepage'>
  3183.                 <div class='feed-message'><data:messages.recentPosts/></div>
  3184.               </b:if>
  3185.  
  3186.               <b:comment>Cap the total number of ads (widgets and inline ads).</b:comment>
  3187.               <b:with value='3' var='maxNumAds'>
  3188.               <b:comment>Filter out the featured post, but only on the homepage.</b:comment>
  3189.               <b:with value='data:posts filter (post =&gt; post.id != data:featuredPostId)' var='posts'>
  3190.                 <b:include data='this' name='super.main'/>
  3191.               </b:with>
  3192.               </b:with>
  3193.             </b:with>
  3194.           <b:else/>
  3195.             <b:include data='this' name='super.main'/>
  3196.           </b:if>
  3197.         </b:includable>
  3198.         <b:includable id='commentFormIframeSrc' var='post'>
  3199.           <b:with value='data:template.isAlternateRendering ? (&quot;&amp;skinvariant=&quot; + data:template.variant) : &quot;&quot;' var='variantParam'>
  3200.             <a expr:href='data:post.commentFormIframeSrc + &quot;&amp;skin=notable&quot; + data:variantParam' id='comment-editor-src'/>
  3201.           </b:with>
  3202.         </b:includable>
  3203.         <b:includable id='commentForm' var='post'>
  3204.           <b:with value='&quot;90px&quot;' var='cmtIframeInitialHeight'>
  3205.             <b:include data='post' name='super.commentForm'/>
  3206.           </b:with>
  3207.         </b:includable>
  3208.         <b:includable id='threadedCommentForm' var='post'>
  3209.           <b:with value='&quot;90px&quot;' var='cmtIframeInitialHeight'>
  3210.             <b:include data='post' name='super.threadedCommentForm'/>
  3211.           </b:with>
  3212.         </b:includable>
  3213.         <b:includable id='feedLinks'>
  3214.           <!-- Don't show feed links. -->
  3215.         </b:includable>
  3216.         <b:includable id='post' var='post'>
  3217.           <b:include name='normalPost'/>
  3218.         </b:includable>
  3219.         <b:includable id='postBodySnippet' var='post'>
  3220.           <b:with value='&quot;post&quot;' var='snippetPrefix'>
  3221.             <b:include data='post' name='normalPostBodySnippet'/>
  3222.           </b:with>
  3223.         </b:includable>
  3224.         <b:includable id='previousPageLink'><!-- Don't show --></b:includable>
  3225.         <b:includable id='homePageLink'><!-- Don't show --></b:includable>
  3226.         <b:includable id='nextPageLink'>
  3227.           <a class='blog-pager-older-link flat-button ripple' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'>
  3228.             <data:messages.morePosts/>
  3229.           </a>
  3230.         </b:includable>
  3231.         <b:includable id='inlineAd' var='post'>
  3232.           <div>
  3233.             <b:class cond='not data:maxNumAds or data:post.adNumber lt data:maxNumAds' name='shown-ad'/>
  3234.             <b:include data='post' name='super.inlineAd'/>
  3235.           </div>
  3236.         </b:includable>
  3237.       </b:defaultmarkup>
  3238.       <b:defaultmarkup type='Blog,FeaturedPost,PopularPosts'>
  3239.         <b:includable id='postFooter' var='post'>
  3240.           <div class='post-bottom'>
  3241.             <div class='post-footer'>
  3242.               <!-- Footer bylines -->
  3243.               <b:include name='footerBylines'/>
  3244.             </div>
  3245.             <b:include cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;' data='{ shareButtonClass: &quot;post-share-buttons-bottom&quot;, overridden: true }' name='maybeAddShareButtons'/>
  3246.             <b:include cond='data:view.isMultipleItems or data:widget.type == &quot;PopularPosts&quot;' data='post' name='postJumpLink'/>
  3247.           </div>
  3248.         </b:includable>
  3249.         <b:includable id='headerByline'>
  3250.           <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
  3251.             <b:include name='super.headerByline'/>
  3252.           <b:else/>
  3253.             <b:include data='{ items: [&quot;author&quot;, &quot;timestamp&quot;] }' name='headerBylineOverride'/>
  3254.           </b:if>
  3255.         </b:includable>
  3256.         <b:includable id='footerBylines'>
  3257.           <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
  3258.             <b:include name='super.footerBylines'/>
  3259.           <b:else/>
  3260.             <b:include data='{ items: [[&quot;share&quot;, &quot;comments&quot;]] }' name='footerBylinesOverride'/>
  3261.           </b:if>
  3262.         </b:includable>
  3263.         <b:includable id='postShareButtons'>
  3264.           <b:include cond='data:view.isMultipleItems or data:widget.type != &quot;Blog&quot;' name='super.postShareButtons'/>
  3265.         </b:includable>
  3266.         <b:includable id='postJumpLink' var='post'>
  3267.           <b:comment>Show a &#39;read more&#39; link if no jump link is present.</b:comment>
  3268.           <div class='byline jump-link'>
  3269.             <a class='flat-button ripple' expr:href='data:post.hasJumpLink ? data:post.url fragment &quot;more&quot; : data:post.url' expr:title='data:post.title'>
  3270.               <b:eval expr='data:post.hasJumpLink ? data:blog.jumpLinkMessage : data:messages.readMore'/>
  3271.             </a>
  3272.           </div>
  3273.         </b:includable>
  3274.         <b:includable id='sharingButtonContent'>
  3275.           <b:comment>Mark parent byline element as a flat-button.</b:comment>
  3276.           <b:class name='flat-button ripple'/>
  3277.           <b:message name='messages.share'/>
  3278.         </b:includable>
  3279.         <b:includable id='commentsLink'>
  3280.           <a class='comment-link flat-button ripple' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
  3281.             <b:if cond='data:post.numberOfComments &gt; 0'>
  3282.               <b:message name='messages.numberOfComments'>
  3283.                 <b:param expr:value='data:post.numberOfComments' name='numComments'/>
  3284.               </b:message>
  3285.             <b:else/>
  3286.               <data:messages.postAComment/>
  3287.             </b:if>
  3288.           </a>
  3289.         </b:includable>
  3290.       </b:defaultmarkup>
  3291.       <b:defaultmarkup type='BlogArchive'>
  3292.         <b:includable id='main' var='this'>
  3293.           <details class='collapsible extendable'>
  3294.             <b:attr cond='data:view.isArchive' name='open' value='open'/>
  3295.             <b:with value='true' var='renderAsDetails'>
  3296.             <b:with value='data:messages.archive' var='defaultTitle'>
  3297.               <b:include name='super.main'/>
  3298.             </b:with>
  3299.             </b:with>
  3300.           </details>
  3301.         </b:includable>
  3302.         <b:includable id='flat'>
  3303.           <b:include data='{                               buttonClass: &quot;flat-button&quot;,                               items: data:this.data,                               itemSet: &quot;data&quot;,                               itemsMarkup: &quot;super.flat&quot;                             }' name='extendableItems'/>
  3304.         </b:includable>
  3305.         <b:includable id='hierarchy'>
  3306.           <b:include data='{                               buttonClass: &quot;flat-button&quot;,                               limit: 1,                               items: data:this.data,                               itemSet: &quot;data&quot;,                               itemsMarkup: &quot;super.hierarchy&quot;                             }' name='extendableItems'/>
  3307.         </b:includable>
  3308.       </b:defaultmarkup>
  3309.       <b:defaultmarkup type='Label'>
  3310.         <b:includable id='main' var='this'>
  3311.           <details class='collapsible extendable'>
  3312.             <b:attr cond='data:view.isLabelSearch' name='open' value='open'/>
  3313.             <b:with value='true' var='renderAsDetails'>
  3314.             <b:with value='data:messages.labels' var='defaultTitle'>
  3315.               <b:include name='super.main'/>
  3316.             </b:with>
  3317.             </b:with>
  3318.           </details>
  3319.         </b:includable>
  3320.         <b:includable id='list'>
  3321.           <b:include data='{                               buttonClass: &quot;flat-button&quot;,                               items: data:this.labels,                               itemSet: &quot;labels&quot;,                               itemsMarkup: &quot;super.list&quot;                             }' name='extendableItems'/>
  3322.         </b:includable>
  3323.         <b:includable id='cloud'>
  3324.           <!-- Always display list format. -->
  3325.           <b:include name='list'/>
  3326.         </b:includable>
  3327.       </b:defaultmarkup>
  3328.       <b:defaultmarkup type='FeaturedPost'>
  3329.         <b:includable id='snippetedPosts'>
  3330.             <b:include cond='data:posts.any' data='{                                postDisplay: data:postDisplay,                                post: data:posts.first                              }' name='heroPost'/>
  3331.         </b:includable>
  3332.       </b:defaultmarkup>
  3333.       <b:defaultmarkup type='Header'>
  3334.         <b:includable id='image'>
  3335.           <b:include name='super.image'/>
  3336.           <!-- If we are replacing the title, force it to render anyway, and it'll be hidden in CSS. -->
  3337.           <b:include cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='title'/>
  3338.         </b:includable>
  3339.         <b:includable id='title'>
  3340.           <div>
  3341.             <b:class cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='replaced'/>
  3342.             <b:include name='super.title'/>
  3343.           </div>
  3344.         </b:includable>
  3345.       </b:defaultmarkup>
  3346.       <b:defaultmarkup type='PopularPosts'>
  3347.         <b:includable id='main' var='this'>
  3348.           <!-- Default the title to 'Popular posts from this blog'. -->
  3349.           <b:with value='data:messages.popularPostsFromThisBlog' var='defaultTitle'>
  3350.             <b:include name='widget-title'/>
  3351.           </b:with>
  3352.           <b:include name='snippetedPosts'/>
  3353.         </b:includable>
  3354.         <b:includable id='snippetedPostContent'>
  3355.           <div class='post-outer-container'>
  3356.             <!-- post title and body -->
  3357.             <div class='post-outer'>
  3358.               <b:with value='&quot;popular-posts&quot;' var='snippetPrefix'>
  3359.                 <b:include name='normalPost'/>
  3360.               </b:with>
  3361.             </div>
  3362.           </div>
  3363.         </b:includable>
  3364.       </b:defaultmarkup>
  3365.       <b:defaultmarkup type='Profile'>
  3366.         <b:includable id='main' var='widget'>
  3367.           <div class='wrapper'>
  3368.             <b:class cond='!data:widget.team' name='solo'/>
  3369.             <b:comment>No title for single profiles. Default to &#39;Blog authors&#39; for team.</b:comment>
  3370.             <b:with value='data:messages.blogAuthors' var='defaultTitle'>
  3371.               <b:include name='super.main'/>
  3372.             </b:with>
  3373.           </div>
  3374.         </b:includable>
  3375.         <b:includable id='defaultProfileImage'>
  3376.           <div class='default-avatar-wrapper'>
  3377.             <b:include data='{ iconClass: &quot;avatar-icon&quot; }' name='defaultAvatarIcon'/>
  3378.           </div>
  3379.         </b:includable>
  3380.         <b:includable id='viewProfileLink'>
  3381.           <a class='profile-link' expr:href='data:userUrl' rel='author'>
  3382.             <data:messages.visitProfile/>
  3383.           </a>
  3384.         </b:includable>
  3385.         <b:includable id='userProfileText'>
  3386.           <dd class='profile-textblock profile-snippet snippet-container r-snippet-container'>
  3387.             <div class='snippet-item r-snippetized'>
  3388.               <data:aboutme/>
  3389.             </div>
  3390.             <div class='snippet-fade r-snippet-fade hidden'/>
  3391.           </dd>
  3392.         </b:includable>
  3393.         <b:includable id='userLocation'>
  3394.           <dd class='profile-data profile-location'><data:location/></dd>
  3395.         </b:includable>
  3396.       </b:defaultmarkup>
  3397.     </b:defaultmarkups>
  3398.  
  3399.     <b:if cond='data:widgets.AdSense.any or data:blog.adsenseClientId'>
  3400.       <script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>
  3401.     </b:if>
  3402.  
  3403.     <script async='async' src='//www.gstatic.com/external_hosted/clipboardjs/clipboard.min.js'/>
  3404.   </head>
  3405.  
  3406.   <body class='container'>
  3407.     <b:class cond='data:view.isPreview' name='preview'/>
  3408.     <b:class cond='data:view.isMultipleItems' name='feed-view'/>
  3409.     <b:class cond='data:view.isSingleItem' name='item-view'/>
  3410.     <b:class cond='data:view.isArchive' name='archive-view'/>
  3411.     <b:class cond='data:view.isLabelSearch' name='label-view'/>
  3412.     <b:class cond='data:view.isSearch and !data:view.isLabelSearch' name='search-view'/>
  3413.     <b:class name='version-1-0-0'/>
  3414.  
  3415.     <b:include name='skipNavigation'/>
  3416.  
  3417.     <div class='all-container'>
  3418.       <div class='centered-top-placeholder'/>
  3419.       <header class='centered-top-container' role='banner'>
  3420.         <div class='centered-top'>
  3421.           <b:class cond='data:view.isSearch and data:view.search.query' name='search-focused'/>
  3422.           <div class='centered-top-firstline container'>
  3423.             <div class='main_header_elements container'>
  3424.               <!-- Blog name and header -->
  3425.               <div class='blog-name'>
  3426.                 <b:section id='header' name='Header' showaddelement='false'>
  3427.                   <b:widget id='Header1' locked='true' title='Personalisasi Website (Header)' type='Header' visible='true'>
  3428.                     <b:widget-settings>
  3429.                       <b:widget-setting name='displayUrl'/>
  3430.                       <b:widget-setting name='displayHeight'>0</b:widget-setting>
  3431.                       <b:widget-setting name='sectionWidth'>-1</b:widget-setting>
  3432.                       <b:widget-setting name='useImage'>false</b:widget-setting>
  3433.                       <b:widget-setting name='shrinkToFit'>false</b:widget-setting>
  3434.                       <b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>
  3435.                       <b:widget-setting name='displayWidth'>0</b:widget-setting>
  3436.                     </b:widget-settings>
  3437.                     <b:includable id='main' var='this'>
  3438.     <div class='header-widget'>
  3439.       <b:include cond='data:imagePlacement in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='image'/>
  3440.       <b:include cond='data:imagePlacement not in {&quot;REPLACE&quot;, &quot;BEFORE_DESCRIPTION&quot;}' name='title'/>
  3441.       <b:include cond='data:imagePlacement != &quot;REPLACE&quot;' name='description'/>
  3442.     </div>
  3443.     <b:include cond='data:imagePlacement == &quot;BEHIND&quot;' name='behindImageStyle'/>
  3444.   </b:includable>
  3445.                     <b:includable id='behindImageStyle'>
  3446.     <b:if cond='data:sourceUrl'>
  3447.       <b:include cond='data:this.image' data='{                    image: data:this.image,                    selector: &quot;.header-widget&quot;                  }' name='responsiveImageStyle'/>
  3448.       <style type='text/css'>
  3449.         .header-widget {
  3450.           background-position: <data:backgroundPositionStyleStr/>;
  3451.           background-repeat: no-repeat;
  3452.         }
  3453.       </style>
  3454.     </b:if>
  3455.   </b:includable>
  3456.                     <b:includable id='description'>
  3457.     <p>
  3458.       <data:this.description/>
  3459.     </p>
  3460.   </b:includable>
  3461.                     <b:includable id='image'>
  3462.           <b:include name='super.image'/>
  3463.           <!-- If we are replacing the title, force it to render anyway, and it'll be hidden in CSS. -->
  3464.           <b:include cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='title'/>
  3465.         </b:includable>
  3466.                     <b:includable id='title'>
  3467.           <div>
  3468.             <b:class cond='data:this.imagePlacement == &quot;REPLACE&quot;' name='replaced'/>
  3469.             <b:include name='super.title'/>
  3470.           </div>
  3471.         </b:includable>
  3472.                   </b:widget>
  3473.                 </b:section>
  3474.               </div> <!-- End blog name and header -->
  3475.  
  3476.               <!-- Subscribe -->
  3477.               <b:if cond='data:view.isLayoutMode or data:widgets any (w =&gt; w.sectionId == &quot;subscription&quot;)'>
  3478.                 <section class='subscribe-section-container'>
  3479.                   <button class='flat-button subscribe-button'><b:eval expr='data:messages.subscribe'/></button>
  3480.                   <div class='subscribe-popup-container'>
  3481.                     <div aria-labelledby='subscribe-title' class='subscribe-popup dialog hidden' role='dialog' tabindex='-1'>
  3482.                       <div role='document'>
  3483.                         <h3 class='subscribe-title' id='subscribe-title'><b:eval expr='data:messages.subscribeToThisBlog'/></h3>
  3484.                         <b:section id='subscription' name='Subscription' showaddelement='false'>
  3485.                           <b:widget id='FollowByEmail1' locked='true' title='Follow by Email' type='FollowByEmail' visible='false'>
  3486.                             <b:includable id='main'>
  3487.   <b:include name='widget-title'/>
  3488.   <b:include name='content'/>
  3489. </b:includable>
  3490.                             <b:includable id='content'>
  3491.   <div class='widget-content'>
  3492.     <div class='follow-by-email-inner'>
  3493.       <form action='https://feedburner.google.com/fb/a/mailverify' expr:onsubmit='&quot;window.open(\&quot;https://feedburner.google.com/fb/a/mailverify?uri=&quot; + data:feedPath + &quot;\&quot;, \&quot;popupwindow\&quot;, \&quot;scrollbars=yes,width=550,height=520\&quot;); return true&quot;' method='post' target='popupwindow'>
  3494.         <input autocomplete='off' class='follow-by-email-address' expr:placeholder='data:messages.emailAddress' name='email' type='email'/>
  3495.         <input class='follow-by-email-submit' disabled='true' expr:value='data:messages.getEmailNotifications' type='submit'/>
  3496.         <input expr:value='data:feedPath' name='uri' type='hidden'/>
  3497.         <input name='loc' type='hidden' value='en_US'/>
  3498.       </form>
  3499.     </div>
  3500.   </div>
  3501. </b:includable>
  3502.                           </b:widget>
  3503.                         </b:section>
  3504.                       </div>
  3505.                     </div>
  3506.                   </div>
  3507.                 </section>
  3508.               </b:if> <!-- End subscribe -->
  3509.               <!-- Search -->
  3510.               <b:if cond='data:view.isLayoutMode or data:widgets any (w =&gt; w.sectionId == &quot;search_top&quot;)'>
  3511.                 <div class='search'>
  3512.                   <b:class cond='data:view.isSearch and data:view.search.query' name='focused'/>
  3513.                   <button class='flat-button search-expand touch-icon-button' expr:aria-label='data:messages.search.escaped'>
  3514.                     <div class='search-expand-text'><data:messages.search/></div>
  3515.                     <div class='search-expand-icon flat-icon-button'>
  3516.                       <b:include name='searchIcon'/>
  3517.                     </div>
  3518.                   </button>
  3519.                   <b:section id='search_top' name='Search (Top)' showaddelement='false'>
  3520.                     <b:widget id='BlogSearch1' locked='true' title='Search This Blog' type='BlogSearch' visible='true'>
  3521.                       <b:includable id='main'>
  3522.   <b:include name='widget-title'/>
  3523.   <b:include name='content'/>
  3524. </b:includable>
  3525.                       <b:includable id='content'>
  3526.   <div class='widget-content' role='search'>
  3527.     <b:include name='searchForm'/>
  3528.   </div>
  3529. </b:includable>
  3530.                       <b:includable id='searchForm'>
  3531.   <form expr:action='data:blog.searchUrl' target='_self'>
  3532.     <b:include name='urlParamsAsFormInput'/>
  3533.     <div class='search-input'>
  3534.       <input autocomplete='off' expr:aria-label='data:messages.searchThisBlog' expr:placeholder='data:messages.searchThisBlog' expr:value='data:view.isSearch ? data:view.search.query.escaped : &quot;&quot;' name='q'/>
  3535.     </div>
  3536.     <b:include name='searchSubmit'/>
  3537.   </form>
  3538. </b:includable>
  3539.                       <b:includable id='searchSubmit'>
  3540.           <b:if cond='data:widget.sectionId == &quot;search_top&quot;'>
  3541.             <label class='search-submit'>
  3542.               <input type='submit'/>
  3543.               <div class='flat-icon-button ripple'>
  3544.                 <b:include data='{ iconClass: &quot;search-icon&quot; }' name='searchIcon'/>
  3545.               </div>
  3546.             </label>
  3547.           <b:else/>
  3548.             <b:include name='super.searchSubmit'/>
  3549.           </b:if>
  3550.         </b:includable>
  3551.                     </b:widget>
  3552.                   </b:section>
  3553.                 </div>
  3554.               </b:if>
  3555.             </div>
  3556.             <!-- Hamburger menu -->
  3557.             <div class='hamburger-section container'>
  3558.               <b:include data='{ button: true, iconClass: &quot;hamburger-menu flat-icon-button ripple&quot; }' name='menuIcon'/>
  3559.             </div>
  3560.             <!-- End hamburger menu -->
  3561.           </div>
  3562.           <nav role='navigation'>
  3563.             <b:section class='centered-top-secondline' id='page_list_top' name='Page List (Top)' showaddelement='false'>
  3564.               <b:widget id='PageList1' locked='true' title='' type='PageList' visible='false'>
  3565.                 <b:widget-settings>
  3566.                   <b:widget-setting name='pageListJson'><![CDATA[{'home': {'href': 'https://web-manajemen.blogspot.com/', 'title': 'Home', 'position': 0}}]]></b:widget-setting>
  3567.                   <b:widget-setting name='homeTitle'>Home</b:widget-setting>
  3568.                 </b:widget-settings>
  3569.                 <b:includable id='main'>
  3570.   <b:include name='widget-title'/>
  3571.   <b:include name='content'/>
  3572. </b:includable>
  3573.                 <b:includable id='content'>
  3574.           <div class='widget-content'>
  3575.             <b:include cond='data:widget.sectionId == &quot;page_list_top&quot;' name='overflowablePageList'/>
  3576.             <b:include cond='data:widget.sectionId != &quot;page_list_top&quot;' name='pageList'/>
  3577.           </div>
  3578.         </b:includable>
  3579.                 <b:includable id='overflowButton'>
  3580.           <a><data:messages.moreEllipsis/></a>
  3581.         </b:includable>
  3582.                 <b:includable id='overflowablePageList'>
  3583.   <div class='overflowable-container'>
  3584.     <div class='overflowable-contents'>
  3585.       <div class='container'>
  3586.         <b:with value='true' var='overflow'>
  3587.         <b:with value='&quot;tabs&quot;' var='pageListClass'>
  3588.           <b:include name='pageList'/>
  3589.         </b:with>
  3590.         </b:with>
  3591.       </div>
  3592.     </div>
  3593.     <div class='overflow-button hidden'>
  3594.       <b:include name='overflowButton'/>
  3595.     </div>
  3596.   </div>
  3597. </b:includable>
  3598.                 <b:includable id='pageLink'>
  3599.   <li>
  3600.     <b:class cond='data:overflow' name='overflowable-item'/>
  3601.     <b:class cond='data:link.isCurrentPage' name='selected'/>
  3602.  
  3603.     <a expr:href='data:link.href'><data:link.title/></a>
  3604.   </li>
  3605. </b:includable>
  3606.                 <b:includable id='pageList'>
  3607.   <ul>
  3608.     <b:class cond='data:pageListClass' expr:name='data:pageListClass'/>
  3609.     <b:loop values='data:links' var='link'>
  3610.       <b:include name='pageLink'/>
  3611.     </b:loop>
  3612.   </ul>
  3613. </b:includable>
  3614.               </b:widget>
  3615.             </b:section>
  3616.           </nav>
  3617.         </div>
  3618.       </header>
  3619.       <div class='main_content_container clearfix'>
  3620.         <div class='page'>
  3621.             <div class='page_body'>
  3622.               <b:class cond='data:hasVerticalAds' name='vertical-ads'/>
  3623.               <div class='centered'>
  3624.                 <main class='centered-bottom' id='main' role='main' tabindex='-1'>
  3625.                   <b:if cond='data:view.isMultipleItems'>
  3626.                     <h2 class='main-heading'><data:messages.posts/></h2>
  3627.                   </b:if>
  3628.                   <b:if cond='data:view.isArchive or (data:view.isSearch and data:view.search.resultsMessageHtml)'>
  3629.                     <div class='post-filter-message'>
  3630.                       <div class='post-filter-description'>
  3631.                         <b:if cond='data:view.isArchive'>
  3632.                           <data:view.archive.rangeMessage/>
  3633.                         <b:elseif cond='data:view.isSearch and data:view.search.resultsMessageHtml'/>
  3634.                           <data:view.search.resultsMessageHtml/>
  3635.                         </b:if>
  3636.                       </div>
  3637.                       <div>
  3638.                         <a expr:href='data:blog.homepageUrl'><data:messages.showAll/></a>
  3639.                       </div>
  3640.                     </div>
  3641.                   </b:if>
  3642.                   <b:section class='main' id='page_body' name='Page Body' showaddelement='false'>
  3643.                     <b:widget cond='data:view.isHomepage' id='FeaturedPost1' locked='true' title='' type='FeaturedPost' visible='true'>
  3644.                       <b:widget-settings>
  3645.                         <b:widget-setting name='showSnippet'>true</b:widget-setting>
  3646.                         <b:widget-setting name='showPostTitle'>true</b:widget-setting>
  3647.                         <b:widget-setting name='showFirstImage'>true</b:widget-setting>
  3648.                         <b:widget-setting name='useMostRecentPost'>true</b:widget-setting>
  3649.                       </b:widget-settings>
  3650.                       <b:includable id='main' var='this'>
  3651.   <b:include name='widget-title'/>
  3652.   <div class='widget-content'>
  3653.     <b:include name='snippetedPosts'/>
  3654.   </div>
  3655. </b:includable>
  3656.                       <b:includable id='commentsLink'>
  3657.           <a class='comment-link flat-button ripple' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
  3658.             <b:if cond='data:post.numberOfComments &gt; 0'>
  3659.               <b:message name='messages.numberOfComments'>
  3660.                 <b:param expr:value='data:post.numberOfComments' name='numComments'/>
  3661.               </b:message>
  3662.             <b:else/>
  3663.               <data:messages.postAComment/>
  3664.             </b:if>
  3665.           </a>
  3666.         </b:includable>
  3667.                       <b:includable id='footerBylines'>
  3668.           <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
  3669.             <b:include name='super.footerBylines'/>
  3670.           <b:else/>
  3671.             <b:include data='{ items: [[&quot;share&quot;, &quot;comments&quot;]] }' name='footerBylinesOverride'/>
  3672.           </b:if>
  3673.         </b:includable>
  3674.                       <b:includable id='headerByline'>
  3675.           <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
  3676.             <b:include name='super.headerByline'/>
  3677.           <b:else/>
  3678.             <b:include data='{ items: [&quot;author&quot;, &quot;timestamp&quot;] }' name='headerBylineOverride'/>
  3679.           </b:if>
  3680.         </b:includable>
  3681.                       <b:includable id='postFooter' var='post'>
  3682.           <div class='post-bottom'>
  3683.             <div class='post-footer'>
  3684.               <!-- Footer bylines -->
  3685.               <b:include name='footerBylines'/>
  3686.             </div>
  3687.             <b:include cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;' data='{ shareButtonClass: &quot;post-share-buttons-bottom&quot;, overridden: true }' name='maybeAddShareButtons'/>
  3688.             <b:include cond='data:view.isMultipleItems or data:widget.type == &quot;PopularPosts&quot;' data='post' name='postJumpLink'/>
  3689.           </div>
  3690.         </b:includable>
  3691.                       <b:includable id='postJumpLink' var='post'>
  3692.           <b:comment>Show a &#39;read more&#39; link if no jump link is present.</b:comment>
  3693.           <div class='byline jump-link'>
  3694.             <a class='flat-button ripple' expr:href='data:post.hasJumpLink ? data:post.url fragment &quot;more&quot; : data:post.url' expr:title='data:post.title'>
  3695.               <b:eval expr='data:post.hasJumpLink ? data:blog.jumpLinkMessage : data:messages.readMore'/>
  3696.             </a>
  3697.           </div>
  3698.         </b:includable>
  3699.                       <b:includable id='postShareButtons'>
  3700.           <b:include cond='data:view.isMultipleItems or data:widget.type != &quot;Blog&quot;' name='super.postShareButtons'/>
  3701.         </b:includable>
  3702.                       <b:includable id='sharingButtonContent'>
  3703.           <b:comment>Mark parent byline element as a flat-button.</b:comment>
  3704.           <b:class name='flat-button ripple'/>
  3705.           <b:message name='messages.share'/>
  3706.         </b:includable>
  3707.                       <b:includable id='snippetedPosts'>
  3708.             <b:include cond='data:posts.any' data='{                                postDisplay: data:postDisplay,                                post: data:posts.first                              }' name='heroPost'/>
  3709.         </b:includable>
  3710.                     </b:widget>
  3711.                     <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' visible='true'>
  3712.                       <b:widget-settings>
  3713.                         <b:widget-setting name='showDateHeader'>false</b:widget-setting>
  3714.                         <b:widget-setting name='style.textcolor'>#25a186</b:widget-setting>
  3715.                         <b:widget-setting name='showShareButtons'>true</b:widget-setting>
  3716.                         <b:widget-setting name='showCommentLink'>true</b:widget-setting>
  3717.                         <b:widget-setting name='style.urlcolor'>#e5f0ee</b:widget-setting>
  3718.                         <b:widget-setting name='showAuthor'>false</b:widget-setting>
  3719.                         <b:widget-setting name='style.linkcolor'>#ffffff</b:widget-setting>
  3720.                         <b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>
  3721.                         <b:widget-setting name='style.bgcolor'>#000000</b:widget-setting>
  3722.                         <b:widget-setting name='timestampLabel'/>
  3723.                         <b:widget-setting name='showAuthorProfile'>false</b:widget-setting>
  3724.                         <b:widget-setting name='style.layout'>1x1</b:widget-setting>
  3725.                         <b:widget-setting name='showLabels'>true</b:widget-setting>
  3726.                         <b:widget-setting name='showLocation'>true</b:widget-setting>
  3727.                         <b:widget-setting name='showTimestamp'>true</b:widget-setting>
  3728.                         <b:widget-setting name='postsPerAd'>2</b:widget-setting>
  3729.                         <b:widget-setting name='showBacklinks'>false</b:widget-setting>
  3730.                         <b:widget-setting name='style.bordercolor'>#000000</b:widget-setting>
  3731.                         <b:widget-setting name='showInlineAds'>true</b:widget-setting>
  3732.                         <b:widget-setting name='showReactions'>false</b:widget-setting>
  3733.                       </b:widget-settings>
  3734.                       <b:includable id='main' var='this'>
  3735.           <b:include cond='not data:posts.any' name='noContentPlaceholder'/>
  3736.  
  3737.           <b:comment>On the homepage, add a &#39;recent posts&#39; title before the first standard post.</b:comment>
  3738.           <b:if cond='data:view.isMultipleItems'>
  3739.             <b:with value='(data:widgets.FeaturedPost filter w =&gt; w.sectionId == &quot;page_body&quot;).first.postId' var='featuredPostId'>
  3740.               <b:if cond='data:featuredPostId and data:view.isHomepage'>
  3741.                 <div class='feed-message'><data:messages.recentPosts/></div>
  3742.               </b:if>
  3743.  
  3744.               <b:comment>Cap the total number of ads (widgets and inline ads).</b:comment>
  3745.               <b:with value='3' var='maxNumAds'>
  3746.               <b:comment>Filter out the featured post, but only on the homepage.</b:comment>
  3747.               <b:with value='data:posts filter (post =&gt; post.id != data:featuredPostId)' var='posts'>
  3748.                 <b:include data='this' name='super.main'/>
  3749.               </b:with>
  3750.               </b:with>
  3751.             </b:with>
  3752.           <b:else/>
  3753.             <b:include data='this' name='super.main'/>
  3754.           </b:if>
  3755.         </b:includable>
  3756.                       <b:includable id='aboutPostAuthor'>
  3757.   <div class='author-name'>
  3758.     <a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>
  3759.       <span>
  3760.         <data:post.author.name/>
  3761.       </span>
  3762.     </a>
  3763.   </div>
  3764.   <div>
  3765.     <span class='author-desc'>
  3766.       <data:post.author.aboutMe/>
  3767.     </span>
  3768.   </div>
  3769. </b:includable>
  3770.                       <b:includable id='addComments'>
  3771.   <a expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
  3772.     <b:message name='messages.postAComment'/>
  3773.   </a>
  3774. </b:includable>
  3775.                       <b:includable id='commentAuthorAvatar'>
  3776.   <div class='avatar-image-container'>
  3777.     <img class='author-avatar' expr:src='data:comment.authorAvatarSrc' height='35' width='35'/>
  3778.   </div>
  3779. </b:includable>
  3780.                       <b:includable id='commentDeleteIcon' var='comment'>
  3781.   <span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
  3782.     <b:if cond='data:showCmtPopup'>
  3783.       <div class='goog-toggle-button'>
  3784.         <div class='goog-inline-block comment-action-icon'/>
  3785.       </div>
  3786.     <b:else/>
  3787.       <a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:messages.deleteComment'>
  3788.         <img src='https://resources.blogblog.com/img/icon_delete13.gif'/>
  3789.       </a>
  3790.     </b:if>
  3791.   </span>
  3792. </b:includable>
  3793.                       <b:includable id='commentForm' var='post'>
  3794.           <b:with value='&quot;90px&quot;' var='cmtIframeInitialHeight'>
  3795.             <b:include data='post' name='super.commentForm'/>
  3796.           </b:with>
  3797.         </b:includable>
  3798.                       <b:includable id='commentFormIframeSrc' var='post'>
  3799.           <b:with value='data:template.isAlternateRendering ? (&quot;&amp;skinvariant=&quot; + data:template.variant) : &quot;&quot;' var='variantParam'>
  3800.             <a expr:href='data:post.commentFormIframeSrc + &quot;&amp;skin=notable&quot; + data:variantParam' id='comment-editor-src'/>
  3801.           </b:with>
  3802.         </b:includable>
  3803.                       <b:includable id='commentItem' var='comment'>
  3804.   <div class='comment' expr:id='&quot;c&quot; + data:comment.id'>
  3805.     <b:include cond='data:blog.enabledCommentProfileImages' name='commentAuthorAvatar'/>
  3806.  
  3807.     <div class='comment-block'>
  3808.       <div class='comment-author'>
  3809.         <b:if cond='data:comment.authorUrl'>
  3810.           <b:message name='messages.authorSaidWithLink'>
  3811.             <b:param expr:value='data:comment.author' name='authorName'/>
  3812.             <b:param expr:value='data:comment.authorUrl' name='authorUrl'/>
  3813.           </b:message>
  3814.         <b:else/>
  3815.           <b:message name='messages.authorSaid'>
  3816.             <b:param expr:value='data:comment.author' name='authorName'/>
  3817.           </b:message>
  3818.         </b:if>
  3819.       </div>
  3820.       <div expr:class='&quot;comment-body&quot; + (data:comment.isDeleted ? &quot; deleted&quot; : &quot;&quot;)'>
  3821.         <data:comment.body/>
  3822.       </div>
  3823.       <div class='comment-footer'>
  3824.         <span class='comment-timestamp'>
  3825.           <a expr:href='data:comment.url' title='comment permalink'>
  3826.             <data:comment.timestamp/>
  3827.           </a>
  3828.           <b:include data='comment' name='commentDeleteIcon'/>
  3829.         </span>
  3830.       </div>
  3831.     </div>
  3832.   </div>
  3833. </b:includable>
  3834.                       <b:includable id='commentList' var='comments'>
  3835.   <div id='comments-block'>
  3836.     <b:loop values='data:comments' var='comment'>
  3837.       <b:include data='comment' name='commentItem'/>
  3838.     </b:loop>
  3839.   </div>
  3840. </b:includable>
  3841.                       <b:includable id='commentPicker' var='post'>
  3842.   <b:if cond='data:post.commentSource == 1'>
  3843.     <b:include data='post' name='iframeComments'/>
  3844.   <b:elseif cond='data:post.showThreadedComments'/>
  3845.     <b:include data='post' name='threadedComments'/>
  3846.   <b:else/>
  3847.     <b:include data='post' name='comments'/>
  3848.   </b:if>
  3849. </b:includable>
  3850.                       <b:includable id='comments' var='post'>
  3851.   <section expr:class='&quot;comments&quot; + (data:post.embedCommentForm ? &quot; embed&quot; : &quot;&quot;)' expr:data-num-comments='data:post.numberOfComments' id='comments'>
  3852.     <a name='comments'/>
  3853.     <b:if cond='data:post.allowComments'>
  3854.  
  3855.       <b:include name='commentsTitle'/>
  3856.  
  3857.       <div expr:id='data:widget.instanceId + &quot;_comments-block-wrapper&quot;'>
  3858.         <b:include cond='data:post.comments' data='post.comments' name='commentList'/>
  3859.       </div>
  3860.  
  3861.       <b:if cond='data:post.commentPagingRequired'>
  3862.         <div class='paging-control-container'>
  3863.           <b:if cond='data:post.hasOlderLinks'>
  3864.             <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
  3865.               <data:messages.oldest/>
  3866.             </a>
  3867.             <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
  3868.               <data:messages.older/>
  3869.             </a>
  3870.           </b:if>
  3871.  
  3872.           <span class='comment-range-text'>
  3873.             <data:post.commentRangeText/>
  3874.           </span>
  3875.  
  3876.           <b:if cond='data:post.hasNewerLinks'>
  3877.             <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
  3878.               <data:messages.newer/>
  3879.             </a>
  3880.             <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
  3881.               <data:messages.newest/>
  3882.             </a>
  3883.           </b:if>
  3884.         </div>
  3885.       </b:if>
  3886.  
  3887.       <div class='footer'>
  3888.         <b:if cond='data:post.embedCommentForm'>
  3889.           <b:if cond='data:post.allowNewComments'>
  3890.             <b:include data='post' name='commentForm'/>
  3891.           <b:else/>
  3892.             <data:post.noNewCommentsText/>
  3893.           </b:if>
  3894.         <b:else/>
  3895.           <b:if cond='data:post.allowComments'>
  3896.             <b:include data='post' name='addComments'/>
  3897.           </b:if>
  3898.         </b:if>
  3899.       </div>
  3900.     </b:if>
  3901.     <b:if cond='data:showCmtPopup'>
  3902.       <div id='comment-popup'>
  3903.         <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
  3904.         </iframe>
  3905.       </div>
  3906.     </b:if>
  3907.   </section>
  3908. </b:includable>
  3909.                       <b:includable id='commentsLink'>
  3910.           <a class='comment-link flat-button ripple' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
  3911.             <b:if cond='data:post.numberOfComments &gt; 0'>
  3912.               <b:message name='messages.numberOfComments'>
  3913.                 <b:param expr:value='data:post.numberOfComments' name='numComments'/>
  3914.               </b:message>
  3915.             <b:else/>
  3916.               <data:messages.postAComment/>
  3917.             </b:if>
  3918.           </a>
  3919.         </b:includable>
  3920.                       <b:includable id='commentsTitle'>
  3921.   <h3 class='title'><data:messages.comments/></h3>
  3922. </b:includable>
  3923.                       <b:includable id='defaultAdUnit'>
  3924.           <!-- Clear out style (need non-empty string) -->
  3925.           <b:with value='&quot;/* Done in css. */&quot;' var='style'>
  3926.             <b:include name='super.defaultAdUnit'/>
  3927.           </b:with>
  3928.         </b:includable>
  3929.                       <b:includable id='feedLinks'>
  3930.           <!-- Don't show feed links. -->
  3931.         </b:includable>
  3932.                       <b:includable id='feedLinksBody' var='links'>
  3933.   <div class='feed-links'>
  3934.   <data:messages.subscribeTo/>
  3935.   <b:loop values='data:links' var='f'>
  3936.      <a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
  3937.   </b:loop>
  3938.   </div>
  3939. </b:includable>
  3940.                       <b:includable id='footerBylines'>
  3941.           <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
  3942.             <b:include name='super.footerBylines'/>
  3943.           <b:else/>
  3944.             <b:include data='{ items: [[&quot;share&quot;, &quot;comments&quot;]] }' name='footerBylinesOverride'/>
  3945.           </b:if>
  3946.         </b:includable>
  3947.                       <b:includable id='headerByline'>
  3948.           <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
  3949.             <b:include name='super.headerByline'/>
  3950.           <b:else/>
  3951.             <b:include data='{ items: [&quot;author&quot;, &quot;timestamp&quot;] }' name='headerBylineOverride'/>
  3952.           </b:if>
  3953.         </b:includable>
  3954.                       <b:includable id='homePageLink'><!-- Don't show --></b:includable>
  3955.                       <b:includable id='iframeComments' var='post'>
  3956.   <b:if cond='data:post.allowIframeComments'>
  3957.     <script expr:src='data:post.iframeCommentSrc' type='text/javascript'/>
  3958.     <div class='cmt_iframe_holder' expr:data-href='data:post.url.canonical' expr:data-viewtype='data:post.viewType'/>
  3959.  
  3960.     <b:if cond='!data:post.embedCommentForm'>
  3961.       <b:include data='post' name='commentsLink'/>
  3962.     </b:if>
  3963.   </b:if>
  3964. </b:includable>
  3965.                       <b:includable id='inlineAd' var='post'>
  3966.           <div>
  3967.             <b:class cond='not data:maxNumAds or data:post.adNumber lt data:maxNumAds' name='shown-ad'/>
  3968.             <b:include data='post' name='super.inlineAd'/>
  3969.           </div>
  3970.         </b:includable>
  3971.                       <b:includable id='nextPageLink'>
  3972.           <a class='blog-pager-older-link flat-button ripple' expr:href='data:olderPageUrl' expr:title='data:messages.morePosts'>
  3973.             <data:messages.morePosts/>
  3974.           </a>
  3975.         </b:includable>
  3976.                       <b:includable id='post' var='post'>
  3977.           <b:include name='normalPost'/>
  3978.         </b:includable>
  3979.                       <b:includable id='postBody' var='post'>
  3980.   <!-- If metaDescription is empty, use the post body as the schema.org description too, for G+/FB snippeting. -->
  3981.   <div class='post-body entry-content float-container' expr:id='&quot;post-body-&quot; + data:post.id'>
  3982.     <data:post.body/>
  3983.   </div>
  3984. </b:includable>
  3985.                       <b:includable id='postBodySnippet' var='post'>
  3986.           <b:with value='&quot;post&quot;' var='snippetPrefix'>
  3987.             <b:include data='post' name='normalPostBodySnippet'/>
  3988.           </b:with>
  3989.         </b:includable>
  3990.                       <b:includable id='postCommentsAndAd' var='post'>
  3991.   <article class='post-outer-container'>
  3992.     <!-- Post title and body -->
  3993.     <div class='post-outer'>
  3994.       <b:include data='post' name='post'/>
  3995.     </div>
  3996.  
  3997.     <!-- Comments -->
  3998.     <b:include cond='data:view.isSingleItem' data='post' name='commentPicker'/>
  3999.  
  4000.     <!-- Show ad inside post container, after comments, if single item. -->
  4001.     <b:include cond='data:view.isSingleItem and data:post.includeAd' data='post' name='inlineAd'/>
  4002.   </article>
  4003.  
  4004.   <!-- Show ad outside post container (between posts) for feed pages. -->
  4005.   <b:include cond='data:view.isMultipleItems and data:post.includeAd' data='post' name='inlineAd'/>
  4006. </b:includable>
  4007.                       <b:includable id='postCommentsLink'>
  4008.   <b:if cond='data:view.isMultipleItems'>
  4009.     <span class='byline post-comment-link container'>
  4010.       <b:include cond='data:post.commentSource != 1' name='commentsLink'/>
  4011.       <b:include cond='data:post.commentSource == 1' name='commentsLinkIframe'/>
  4012.     </span>
  4013.   </b:if>
  4014. </b:includable>
  4015.                       <b:includable id='postFooter' var='post'>
  4016.           <div class='post-bottom'>
  4017.             <div class='post-footer'>
  4018.               <!-- Footer bylines -->
  4019.               <b:include name='footerBylines'/>
  4020.             </div>
  4021.             <b:include cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;' data='{ shareButtonClass: &quot;post-share-buttons-bottom&quot;, overridden: true }' name='maybeAddShareButtons'/>
  4022.             <b:include cond='data:view.isMultipleItems or data:widget.type == &quot;PopularPosts&quot;' data='post' name='postJumpLink'/>
  4023.           </div>
  4024.         </b:includable>
  4025.                       <b:includable id='postFooterAuthorProfile' var='post'>
  4026.   <b:if cond='data:post.author.aboutMe and data:view.isPost'>
  4027.     <div class='author-profile'>
  4028.       <b:if cond='data:post.author.authorPhoto.url'>
  4029.         <img class='author-image' expr:src='data:post.author.authorPhoto.url' width='50px'/>
  4030.         <div class='author-about'>
  4031.           <b:include data='post' name='aboutPostAuthor'/>
  4032.         </div>
  4033.       <b:else/>
  4034.         <b:include data='post' name='aboutPostAuthor'/>
  4035.       </b:if>
  4036.     </div>
  4037.   </b:if>
  4038. </b:includable>
  4039.                       <b:includable id='postHeader' var='post'>
  4040.   <b:include name='headerByline'/>
  4041. </b:includable>
  4042.                       <b:includable id='postJumpLink' var='post'>
  4043.           <b:comment>Show a &#39;read more&#39; link if no jump link is present.</b:comment>
  4044.           <div class='byline jump-link'>
  4045.             <a class='flat-button ripple' expr:href='data:post.hasJumpLink ? data:post.url fragment &quot;more&quot; : data:post.url' expr:title='data:post.title'>
  4046.               <b:eval expr='data:post.hasJumpLink ? data:blog.jumpLinkMessage : data:messages.readMore'/>
  4047.             </a>
  4048.           </div>
  4049.         </b:includable>
  4050.                       <b:includable id='postMeta' var='post'>
  4051.   <b:include data='post' name='postMetadataJSON'/>
  4052. </b:includable>
  4053.                       <b:includable id='postPagination'>
  4054.   <div class='blog-pager container' id='blog-pager'>
  4055.     <b:include cond='data:newerPageUrl' name='previousPageLink'/>
  4056.     <b:include cond='data:olderPageUrl' name='nextPageLink'/>
  4057.     <b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/>
  4058.   </div>
  4059. </b:includable>
  4060.                       <b:includable id='postShareButtons'>
  4061.           <b:include cond='data:view.isMultipleItems or data:widget.type != &quot;Blog&quot;' name='super.postShareButtons'/>
  4062.         </b:includable>
  4063.                       <b:includable id='postTitle' var='post'>
  4064.   <a expr:name='data:post.id'/>
  4065.   <b:if cond='data:post.title != &quot;&quot;'>
  4066.     <h3 class='post-title entry-title'>
  4067.       <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>
  4068.         <a expr:href='data:post.link ?: data:post.url'><data:post.title/></a>
  4069.       <b:else/>
  4070.         <data:post.title/>
  4071.       </b:if>
  4072.     </h3>
  4073.   </b:if>
  4074. </b:includable>
  4075.                       <b:includable id='previousPageLink'><!-- Don't show --></b:includable>
  4076.                       <b:includable id='sharingButtonContent'>
  4077.           <b:comment>Mark parent byline element as a flat-button.</b:comment>
  4078.           <b:class name='flat-button ripple'/>
  4079.           <b:message name='messages.share'/>
  4080.         </b:includable>
  4081.                       <b:includable id='status-message'>
  4082.   <b:if cond='data:navMessage'>
  4083.   <div class='status-msg-wrap'>
  4084.     <div class='status-msg-body'>
  4085.       <data:navMessage/>
  4086.     </div>
  4087.     <div class='status-msg-border'>
  4088.       <div class='status-msg-bg'>
  4089.         <div class='status-msg-hidden'><data:navMessage/></div>
  4090.       </div>
  4091.     </div>
  4092.   </div>
  4093.   <div style='clear: both;'/>
  4094.   </b:if>
  4095. </b:includable>
  4096.                       <b:includable id='threadedCommentForm' var='post'>
  4097.           <b:with value='&quot;90px&quot;' var='cmtIframeInitialHeight'>
  4098.             <b:include data='post' name='super.threadedCommentForm'/>
  4099.           </b:with>
  4100.         </b:includable>
  4101.                       <b:includable id='threadedCommentJs' var='post'>
  4102.   <script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>
  4103.   <b:template-script inline='true' name='threaded_comments'/>
  4104.   <script type='text/javascript'>
  4105.     blogger.widgets.blog.initThreadedComments(
  4106.         <data:post.commentJso/>,
  4107.         <data:post.commentMsgs/>,
  4108.         <data:post.commentConfig/>);
  4109.   </script>
  4110. </b:includable>
  4111.                       <b:includable id='threadedComments' var='post'>
  4112.   <section class='comments threaded' expr:data-embed='data:post.embedCommentForm' expr:data-num-comments='data:post.numberOfComments' id='comments'>
  4113.     <a name='comments'/>
  4114.  
  4115.     <b:include name='commentsTitle'/>
  4116.  
  4117.     <div class='comments-content'>
  4118.       <b:if cond='data:post.embedCommentForm'>
  4119.         <b:include data='post' name='threadedCommentJs'/>
  4120.       </b:if>
  4121.       <div id='comment-holder'>
  4122.          <data:post.commentHtml/>
  4123.       </div>
  4124.     </div>
  4125.  
  4126.     <p class='comment-footer'>
  4127.       <b:if cond='data:post.allowNewComments'>
  4128.         <b:include data='post' name='threadedCommentForm'/>
  4129.       <b:else/>
  4130.         <data:post.noNewCommentsText/>
  4131.       </b:if>
  4132.     </p>
  4133.  
  4134.     <b:if cond='data:showCmtPopup'>
  4135.       <div id='comment-popup'>
  4136.         <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
  4137.         </iframe>
  4138.       </div>
  4139.     </b:if>
  4140.   </section>
  4141. </b:includable>
  4142.                     </b:widget>
  4143.                     <b:widget cond='data:view.isSingleItem and data:posts any (p =&gt; p.id != data:view.postId)' id='PopularPosts1' locked='true' title='' type='PopularPosts' visible='true'>
  4144.                       <b:widget-settings>
  4145.                         <b:widget-setting name='numItemsToShow'>3</b:widget-setting>
  4146.                         <b:widget-setting name='showThumbnails'>true</b:widget-setting>
  4147.                         <b:widget-setting name='showSnippets'>true</b:widget-setting>
  4148.                         <b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>
  4149.                       </b:widget-settings>
  4150.                       <b:includable id='main' var='this'>
  4151.           <!-- Default the title to 'Popular posts from this blog'. -->
  4152.           <b:with value='data:messages.popularPostsFromThisBlog' var='defaultTitle'>
  4153.             <b:include name='widget-title'/>
  4154.           </b:with>
  4155.           <b:include name='snippetedPosts'/>
  4156.         </b:includable>
  4157.                       <b:includable id='commentsLink'>
  4158.           <a class='comment-link flat-button ripple' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>
  4159.             <b:if cond='data:post.numberOfComments &gt; 0'>
  4160.               <b:message name='messages.numberOfComments'>
  4161.                 <b:param expr:value='data:post.numberOfComments' name='numComments'/>
  4162.               </b:message>
  4163.             <b:else/>
  4164.               <data:messages.postAComment/>
  4165.             </b:if>
  4166.           </a>
  4167.         </b:includable>
  4168.                       <b:includable id='footerBylines'>
  4169.           <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
  4170.             <b:include name='super.footerBylines'/>
  4171.           <b:else/>
  4172.             <b:include data='{ items: [[&quot;share&quot;, &quot;comments&quot;]] }' name='footerBylinesOverride'/>
  4173.           </b:if>
  4174.         </b:includable>
  4175.                       <b:includable id='headerByline'>
  4176.           <b:if cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;'>
  4177.             <b:include name='super.headerByline'/>
  4178.           <b:else/>
  4179.             <b:include data='{ items: [&quot;author&quot;, &quot;timestamp&quot;] }' name='headerBylineOverride'/>
  4180.           </b:if>
  4181.         </b:includable>
  4182.                       <b:includable id='postFooter' var='post'>
  4183.           <div class='post-bottom'>
  4184.             <div class='post-footer'>
  4185.               <!-- Footer bylines -->
  4186.               <b:include name='footerBylines'/>
  4187.             </div>
  4188.             <b:include cond='data:view.isSingleItem and data:widget.type == &quot;Blog&quot;' data='{ shareButtonClass: &quot;post-share-buttons-bottom&quot;, overridden: true }' name='maybeAddShareButtons'/>
  4189.             <b:include cond='data:view.isMultipleItems or data:widget.type == &quot;PopularPosts&quot;' data='post' name='postJumpLink'/>
  4190.           </div>
  4191.         </b:includable>
  4192.                       <b:includable id='postJumpLink' var='post'>
  4193.           <b:comment>Show a &#39;read more&#39; link if no jump link is present.</b:comment>
  4194.           <div class='byline jump-link'>
  4195.             <a class='flat-button ripple' expr:href='data:post.hasJumpLink ? data:post.url fragment &quot;more&quot; : data:post.url' expr:title='data:post.title'>
  4196.               <b:eval expr='data:post.hasJumpLink ? data:blog.jumpLinkMessage : data:messages.readMore'/>
  4197.             </a>
  4198.           </div>
  4199.         </b:includable>
  4200.                       <b:includable id='postShareButtons'>
  4201.           <b:include cond='data:view.isMultipleItems or data:widget.type != &quot;Blog&quot;' name='super.postShareButtons'/>
  4202.         </b:includable>
  4203.                       <b:includable id='sharingButtonContent'>
  4204.           <b:comment>Mark parent byline element as a flat-button.</b:comment>
  4205.           <b:class name='flat-button ripple'/>
  4206.           <b:message name='messages.share'/>
  4207.         </b:includable>
  4208.                       <b:includable id='snippetedPostContent'>
  4209.           <div class='post-outer-container'>
  4210.             <!-- post title and body -->
  4211.             <div class='post-outer'>
  4212.               <b:with value='&quot;popular-posts&quot;' var='snippetPrefix'>
  4213.                 <b:include name='normalPost'/>
  4214.               </b:with>
  4215.             </div>
  4216.           </div>
  4217.         </b:includable>
  4218.                     </b:widget>
  4219.                   </b:section>
  4220.                 </main>
  4221.               </div>
  4222.             </div>
  4223.         </div>
  4224.         <aside class='sidebar-container sidebar-invisible' role='complementary'>
  4225.           <div class='navigation container'>
  4226.             <b:include data='{ button: true, iconClass: &quot;sidebar-back flat-icon-button ripple&quot; }' name='forwardArrowIcon'/>
  4227.           </div>
  4228.           <b:section class='sidebar' id='sidebar' name='Sidebar' preferred='yes'>
  4229.             <b:widget id='Profile1' locked='false' title='About Me' type='Profile' visible='true'>
  4230.               <b:widget-settings>
  4231.                 <b:widget-setting name='showaboutme'>true</b:widget-setting>
  4232.                 <b:widget-setting name='showlocation'>false</b:widget-setting>
  4233.               </b:widget-settings>
  4234.               <b:includable id='main' var='widget'>
  4235.           <div class='wrapper'>
  4236.             <b:class cond='!data:widget.team' name='solo'/>
  4237.             <b:comment>No title for single profiles. Default to &#39;Blog authors&#39; for team.</b:comment>
  4238.             <b:with value='data:messages.blogAuthors' var='defaultTitle'>
  4239.               <b:include name='super.main'/>
  4240.             </b:with>
  4241.           </div>
  4242.         </b:includable>
  4243.               <b:includable id='authorProfileImage'>
  4244.   <img class='profile-img' expr:alt='data:messages.myPhoto' expr:height='data:authorPhoto.height' expr:src='data:authorPhoto.image' expr:width='data:authorPhoto.width'/>
  4245. </b:includable>
  4246.               <b:includable id='content'>
  4247.   <b:if cond='data:team'>
  4248.     <div class='widget-content team'>
  4249.       <b:include name='teamProfile'/>
  4250.     </div>
  4251.   <b:else/>
  4252.     <div class='widget-content individual'>
  4253.       <b:include name='userProfile'/>
  4254.     </div>
  4255.   </b:if>
  4256. </b:includable>
  4257.               <b:includable id='defaultProfileImage'>
  4258.           <div class='default-avatar-wrapper'>
  4259.             <b:include data='{ iconClass: &quot;avatar-icon&quot; }' name='defaultAvatarIcon'/>
  4260.           </div>
  4261.         </b:includable>
  4262.               <b:includable id='profileImage'>
  4263.   <b:if cond='data:authorPhoto.image'>
  4264.     <b:include name='authorProfileImage'/>
  4265.   <b:else/>
  4266.     <b:include name='defaultProfileImage'/>
  4267.   </b:if>
  4268. </b:includable>
  4269.               <b:includable id='teamProfile'>
  4270.   <ul>
  4271.     <b:loop values='data:authors' var='author'>
  4272.       <li>
  4273.         <div class='team-member'>
  4274.           <b:include data='author' name='teamProfileLink'/>
  4275.         </div>
  4276.       </li>
  4277.     </b:loop>
  4278.   </ul>
  4279. </b:includable>
  4280.               <b:includable id='teamProfileLink'>
  4281.   <a class='profile-link g-profile' expr:href='data:userUrl' expr:style='&quot;background-image: url(&quot; + data:profileLogo + &quot;);&quot;'>
  4282.     <b:include name='profileImage'/>
  4283.     <span class='profile-name'><data:display-name/></span>
  4284.   </a>
  4285. </b:includable>
  4286.               <b:includable id='userGoogleProfile'>
  4287.   <div class='g-follow' data-annotation='bubble' data-height='20' expr:data-href='data:userUrl'/>
  4288. </b:includable>
  4289.               <b:includable id='userLocation'>
  4290.           <dd class='profile-data profile-location'><data:location/></dd>
  4291.         </b:includable>
  4292.               <b:includable id='userProfile'>
  4293.   <b:include name='userProfileImage'/>
  4294.   <b:include name='userProfileInfo'/>
  4295. </b:includable>
  4296.               <b:includable id='userProfileData'>
  4297.   <dt class='profile-data'>
  4298.     <b:include name='userProfileLink'/>
  4299.     <b:include cond='data:hasgoogleprofile' name='userGoogleProfile'/>
  4300.   </dt>
  4301. </b:includable>
  4302.               <b:includable id='userProfileImage'>
  4303.   <a expr:href='data:userUrl'>
  4304.     <b:include name='profileImage'/>
  4305.   </a>
  4306. </b:includable>
  4307.               <b:includable id='userProfileInfo'>
  4308.   <div class='profile-info'>
  4309.     <dl class='profile-datablock'>
  4310.       <b:class cond='data:showlocation and data:location != &quot;&quot;' name='has-location'/>
  4311.  
  4312.       <b:include name='userProfileData'/>
  4313.       <b:include cond='data:showlocation and data:location != &quot;&quot;' name='userLocation'/>
  4314.       <b:include cond='data:aboutme != &quot;&quot;' name='userProfileText'/>
  4315.     </dl>
  4316.     <b:include name='viewProfileLink'/>
  4317.   </div>
  4318. </b:includable>
  4319.               <b:includable id='userProfileLink'>
  4320.   <a class='profile-link g-profile' expr:href='data:userUrl' expr:style='&quot;background-image: url(&quot; + data:profileLogo + &quot;);&quot;' rel='author'>
  4321.     <data:displayname/>
  4322.   </a>
  4323. </b:includable>
  4324.               <b:includable id='userProfileText'>
  4325.           <dd class='profile-textblock profile-snippet snippet-container r-snippet-container'>
  4326.             <div class='snippet-item r-snippetized'>
  4327.               <data:aboutme/>
  4328.             </div>
  4329.             <div class='snippet-fade r-snippet-fade hidden'/>
  4330.           </dd>
  4331.         </b:includable>
  4332.               <b:includable id='viewProfileLink'>
  4333.           <a class='profile-link' expr:href='data:userUrl' rel='author'>
  4334.             <data:messages.visitProfile/>
  4335.           </a>
  4336.         </b:includable>
  4337.             </b:widget>
  4338.             <b:widget id='BlogArchive1' locked='false' title='' type='BlogArchive' visible='true'>
  4339.               <b:widget-settings>
  4340.                 <b:widget-setting name='showStyle'>FLAT</b:widget-setting>
  4341.                 <b:widget-setting name='yearPattern'>yyyy</b:widget-setting>
  4342.                 <b:widget-setting name='showWeekEnd'>true</b:widget-setting>
  4343.                 <b:widget-setting name='monthPattern'>MMMM yyyy</b:widget-setting>
  4344.                 <b:widget-setting name='dayPattern'>MMM dd</b:widget-setting>
  4345.                 <b:widget-setting name='weekPattern'>MM/dd</b:widget-setting>
  4346.                 <b:widget-setting name='chronological'>false</b:widget-setting>
  4347.                 <b:widget-setting name='showPosts'>true</b:widget-setting>
  4348.                 <b:widget-setting name='frequency'>MONTHLY</b:widget-setting>
  4349.               </b:widget-settings>
  4350.               <b:includable id='main' var='this'>
  4351.           <details class='collapsible extendable'>
  4352.             <b:attr cond='data:view.isArchive' name='open' value='open'/>
  4353.             <b:with value='true' var='renderAsDetails'>
  4354.             <b:with value='data:messages.archive' var='defaultTitle'>
  4355.               <b:include name='super.main'/>
  4356.             </b:with>
  4357.             </b:with>
  4358.           </details>
  4359.         </b:includable>
  4360.               <b:includable id='content'>
  4361.   <div class='widget-content'>
  4362.     <div id='ArchiveList'>
  4363.       <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
  4364.         <b:include cond='data:this.style == &quot;HIERARCHY&quot;' name='hierarchy'/>
  4365.         <b:include cond='data:this.style in {&quot;FLAT&quot;, &quot;MENU&quot;}' name='flat'/>
  4366.       </div>
  4367.     </div>
  4368.   </div>
  4369. </b:includable>
  4370.               <b:includable id='flat'>
  4371.           <b:include data='{                               buttonClass: &quot;flat-button&quot;,                               items: data:this.data,                               itemSet: &quot;data&quot;,                               itemsMarkup: &quot;super.flat&quot;                             }' name='extendableItems'/>
  4372.         </b:includable>
  4373.               <b:includable id='hierarchy'>
  4374.           <b:include data='{                               buttonClass: &quot;flat-button&quot;,                               limit: 1,                               items: data:this.data,                               itemSet: &quot;data&quot;,                               itemsMarkup: &quot;super.hierarchy&quot;                             }' name='extendableItems'/>
  4375.         </b:includable>
  4376.               <b:includable id='interval' var='intervals'>
  4377.   <ul class='hierarchy'>
  4378.     <b:loop values='data:intervals' var='interval'>
  4379.       <li class='archivedate'>
  4380.         <div class='hierarchy-title'>
  4381.           <a class='post-count-link' expr:href='data:interval.url'>
  4382.             <data:interval.name/>
  4383.             <span class='post-count'><data:interval.post-count/></span>
  4384.           </a>
  4385.         </div>
  4386.         <div class='hierarchy-content'>
  4387.           <b:include cond='data:interval.data' data='interval.data' name='interval'/>
  4388.           <b:include cond='data:interval.posts' data='interval.posts' name='posts'/>
  4389.         </div>
  4390.       </li>
  4391.     </b:loop>
  4392.   </ul>
  4393. </b:includable>
  4394.               <b:includable id='posts' var='posts'>
  4395.   <ul class='posts hierarchy'>
  4396.     <b:loop values='data:posts' var='post'>
  4397.       <li>
  4398.         <a expr:href='data:post.url'><data:post.title/></a>
  4399.       </li>
  4400.     </b:loop>
  4401.   </ul>
  4402. </b:includable>
  4403.             </b:widget>
  4404.             <b:widget id='Label1' locked='false' title='Labels' type='Label' visible='true'>
  4405.               <b:widget-settings>
  4406.                 <b:widget-setting name='sorting'>ALPHA</b:widget-setting>
  4407.                 <b:widget-setting name='display'>LIST</b:widget-setting>
  4408.                 <b:widget-setting name='selectedLabelsList'/>
  4409.                 <b:widget-setting name='showType'>ALL</b:widget-setting>
  4410.                 <b:widget-setting name='showFreqNumbers'>false</b:widget-setting>
  4411.               </b:widget-settings>
  4412.               <b:includable id='main' var='this'>
  4413.           <details class='collapsible extendable'>
  4414.             <b:attr cond='data:view.isLabelSearch' name='open' value='open'/>
  4415.             <b:with value='true' var='renderAsDetails'>
  4416.             <b:with value='data:messages.labels' var='defaultTitle'>
  4417.               <b:include name='super.main'/>
  4418.             </b:with>
  4419.             </b:with>
  4420.           </details>
  4421.         </b:includable>
  4422.               <b:includable id='cloud'>
  4423.           <!-- Always display list format. -->
  4424.           <b:include name='list'/>
  4425.         </b:includable>
  4426.               <b:includable id='content'>
  4427.   <div class='widget-content'>
  4428.     <b:class expr:name='data:this.display + &quot;-label-widget-content&quot;'/>
  4429.     <b:include cond='data:this.display == &quot;list&quot;' name='list'/>
  4430.     <b:include cond='data:this.display == &quot;cloud&quot;' name='cloud'/>
  4431.   </div>
  4432. </b:includable>
  4433.               <b:includable id='list'>
  4434.           <b:include data='{                               buttonClass: &quot;flat-button&quot;,                               items: data:this.labels,                               itemSet: &quot;labels&quot;,                               itemsMarkup: &quot;super.list&quot;                             }' name='extendableItems'/>
  4435.         </b:includable>
  4436.             </b:widget>
  4437.             <b:widget id='ReportAbuse1' locked='true' title='' type='ReportAbuse' visible='true'>
  4438.               <b:includable id='main'>
  4439.   <b:include name='reportAbuse'/>
  4440. </b:includable>
  4441.             </b:widget>
  4442.           </b:section>
  4443.         </aside>
  4444.       </div>
  4445.       <b:section class='footer' id='footer' name='Footer' showaddelement='false' tag='footer'>
  4446.         <b:widget cond='not data:features.hideAttribution' id='Attribution1' locked='true' title='' type='Attribution' visible='true'>
  4447.           <b:widget-settings>
  4448.             <b:widget-setting name='copyright'>Personalisasi Website &#169; 2017</b:widget-setting>
  4449.           </b:widget-settings>
  4450.           <b:includable id='main' var='this'>
  4451.   <div class='widget-content'>
  4452.     <div class='blogger'>
  4453.       <a expr:href='data:bloggerUrl'>
  4454.         <b:include name='flatBloggerIcon'/>
  4455.         <b:message name='messages.poweredByBlogger'/>
  4456.       </a>
  4457.     </div>
  4458.  
  4459.     <b:if cond='data:imageAuthor'>
  4460.       <div class='image-attribution'>
  4461.         <b:if cond='data:imageAuthor.url'>
  4462.           <b:message name='messages.templateImagesByLink'>
  4463.             <b:param expr:value='data:imageAuthor.url'/>
  4464.             <b:param expr:value='data:imageAuthor.name'/>
  4465.           </b:message>
  4466.         <b:else/>
  4467.           <b:message name='messages.templateImagesBy'>
  4468.             <b:param expr:value='data:imageAuthor.name'/>
  4469.           </b:message>
  4470.         </b:if>
  4471.       </div>
  4472.     </b:if>
  4473.  
  4474.     <b:if cond='data:copyright != &quot;&quot;'>
  4475.       <div class='copyright'><data:copyright/></div>
  4476.     </b:if>
  4477.   </div>
  4478. </b:includable>
  4479.         </b:widget>
  4480.       </b:section>
  4481.     </div>
  4482.  
  4483.     <b:template-script async='true' name='rockpool' version='1.0.0'/>
  4484.     <b:include data='blog' name='google-analytics'/>
  4485.   </body>
  4486. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!