Sie sind auf Seite 1von 191

<?xml version="1.0" encoding="UTF-8" ?

>

<!DOCTYPE html>

<html b:css='false' b:defaultwidgetversion='2' b:layoutsVersion='3' b:responsive='true'


b:templateUrl='vegeclub.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'>

<head>

<meta content='width=device-width, initial-scale=1' name='viewport'/>

<title><data:view.title.escaped/></title>

<b:include data='blog' name='all-head-content'/>

<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{overfl
ow: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}/*

<!-- Variable definitions -->

<variable name="keycolor" description="Main color" type="color" default="#8abc0d"


value="#f4ff81"/>

<variable name="startSide" description="Start side in blog language" type="automatic"


default="left" hideEditor="true" value="left"/>

<variable name="endSide" description="End side in blog language" type="automatic"


default="right" hideEditor="true" value="right"/>

<variable name="generalFont" description="General fallback font" type="font" default="400


16px Ubuntu, sans-serif" hideEditor="true" value="400 16px Ubuntu, sans-serif"/>

<variable name="generalFontLato" description="General fallback font, Lato" type="font"


default="400 16px Lato, sans-serif" hideEditor="true" value="400 16px Lato, sans-serif"/>

<variable name="blogTitleFont" description="Main blog title font" type="font" default="500


62px Ubuntu, sans-serif" hideEditor="true" value="500 62px Ubuntu, sans-serif"/>

<variable name="blogTitleFontLato" description="Main blog title font, Lato" type="font"


default="700 62px Lato, sans-serif" hideEditor="true" value="700 62px Lato, sans-serif"/>

<variable name="blogTitleFontMerriweather" description="Main blog title font, Merriweather"


type="font" default="700 62px Merriweather, Georgia, serif" hideEditor="true" value="700 62px
Merriweather, Georgia, serif"/>

<variable name="blogCollapsedTitleFont" description="Collapsed blog title font" type="font"


default="500 36px Ubuntu, sans-serif" hideEditor="true" value="500 36px Ubuntu, sans-serif"/>

<variable name="blogCollapsedTitleFontLato" description="Collapsed blog title font, Lato"


type="font" default="700 36px Lato, sans-serif" hideEditor="true" value="700 36px Lato, sans-
serif"/>

<variable name="blogCollapsedTitleFontMerriweather" description="Collapsed blog title font,


Merriweather" type="font" default="700 36px Merriweather, Georgia, serif" hideEditor="true"
value="700 36px Merriweather, Georgia, serif"/>
<variable name="blogDescriptionFont" description="Main blog description font" type="font"
default="italic 300 14px Merriweather, Georgia, serif" hideEditor="true" value="italic 300 14px
Merriweather, Georgia, serif"/>

<variable name="headerItemFont" description="Header item font" type="font" default="700


12px Ubuntu, sans-serif" hideEditor="true" value="700 12px Ubuntu, sans-serif"/>

<variable name="headerItemFontLato" description="Header item font, Lato" type="font"


default="700 12px Lato, sans-serif" hideEditor="true" value="700 12px Lato, sans-serif"/>

<variable name="textButtonFont" description="Text button font" type="font" default="500 12px


Ubuntu, sans-serif" hideEditor="true" value="500 12px Ubuntu, sans-serif"/>

<variable name="textButtonFontLato" description="Text button font, Lato" type="font"


default="500 12px Lato, sans-serif" hideEditor="true" value="500 12px Lato, sans-serif"/>

<variable name="searchFont" description="Search font" type="font" default="400 16px


Merriweather, Georgia, serif" hideEditor="true" value="400 16px Merriweather, Georgia, serif"/>

<variable name="searchPlaceholderFont" description="Search placeholder" type="font"


default="italic 400 15px Merriweather, Georgia, serif" hideEditor="true" value="italic 400 15px
Merriweather, Georgia, serif"/>

<variable name="sidebarTitleFont" description="Sidebar title font" type="font" default="500


16px Ubuntu, sans-serif" hideEditor="true" value="500 16px Ubuntu, sans-serif"/>

<variable name="sidebarTitleFontLato" description="Sidebar title font, Lato" type="font"


default="500 16px Lato, sans-serif" hideEditor="true" value="500 16px Lato, sans-serif"/>

<variable name="sidebarTitleFontMerriweather" description="Sidebar title font, Merriweather"


type="font" default="700 16px Merriweather, Georgia, sans-serif" hideEditor="true" value="700
16px Merriweather, Georgia, sans-serif"/>

<variable name="sidebarLinkFont" description="Sidebar link font" type="font" default="400


14px Merriweather, Georgia, serif" hideEditor="true" value="400 14px Merriweather, Georgia,
serif"/>

<variable name="sidebarPostTitleFont" description="Sidebar post title font" type="font"


default="500 14px Ubuntu, sans-serif" hideEditor="true" value="500 14px Ubuntu, sans-serif"/>

<variable name="sidebarPostTitleFontLato" description="Sidebar post title font, Lato"


type="font" default="500 14px Lato, sans-serif" hideEditor="true" value="500 14px Lato, sans-
serif"/>

<variable name="sidebarPostFont" description="Sidebar post font" type="font" default="italic


400 14px Merriweather, Georgia, serif" hideEditor="true" value="italic 400 14px Merriweather,
Georgia, serif"/>

<variable name="titleFont" description="Title font" type="font" default="500 24px Ubuntu,


sans-serif" hideEditor="true" value="500 24px Ubuntu, sans-serif"/>

<variable name="titleFontLato" description="Title font, Lato" type="font" default="900 24px


Lato, sans-serif" hideEditor="true" value="900 24px Lato, sans-serif"/>

<variable name="titleFontMerriweather" description="Title font, Merriweather" type="font"


default="900 24px Merriweather, Georgia, serif" hideEditor="true" value="900 24px
Merriweather, Georgia, serif"/>

<variable name="bylineFont" description="Byline font" type="font" default="italic 400 12px


Merriweather, Georgia, serif" hideEditor="true" value="italic 400 12px Merriweather, Georgia,
serif"/>

<variable name="postFilterFont" description="Filter font" type="font" default="italic 400 18px


Merriweather, Georgia, serif" hideEditor="true" value="italic 400 18px Merriweather, Georgia,
serif"/>

<variable name="labelsFont" description="Labels font" type="font" default="500 10.5px Ubuntu,


sans-serif" hideEditor="true" value="500 10.5px Ubuntu, sans-serif"/>

<variable name="labelsFontLato" description="Labels font, Lato" type="font" default="500 10px


Lato, sans-serif" hideEditor="true" value="500 10px Lato, sans-serif"/>

<variable name="sharingFont" description="Sharing font" type="font" default="400 14px


Ubuntu, sans-serif" hideEditor="true" value="400 14px Ubuntu, sans-serif"/>

<variable name="sharingFontLato" description="Sharing font, Lato" type="font" default="400


14px Lato, sans-serif" hideEditor="true" value="400 14px Lato, sans-serif"/>

<variable name="bodyFont" description="Post body font" type="font" default="400 16px


Merriweather, Georgia, serif" hideEditor="true" value="400 16px Merriweather, Georgia, serif"/>

<variable name="bodyLineHeight" description="Line height of body text" type="length"


default="32px" hideEditor="true" value="32px"/>

<variable name="bodyFontSmall" description="Post body font (small)" type="font" default="400


14px Merriweather, Georgia, serif" hideEditor="true" value="400 14px Merriweather, Georgia,
serif"/>

<variable name="bodyLineHeightSmall" description="Line height of body text (small)"


type="length" default="24px" hideEditor="true" value="24px"/>
<variable name="white" description="White" type="color" default="#fff" hideEditor="true"
value="#ffffff"/>

<variable name="black50" description="Black 50" type="color" default="#fafafa"


hideEditor="true" value="#fafafa"/>

<variable name="lightGray" description="Light gray" type="color" default="#f7f7f7"


hideEditor="true" value="#f7f7f7"/>

<variable name="lightishGray" description="Lightish gray" type="color" default="#efefef"


hideEditor="true" value="#efefef"/>

<variable name="black600" description="Black 600" type="color" default="#757575"


hideEditor="true" value="#757575"/>

<variable name="darkishGray" description="Darkish gray" type="color" default="#535353"


hideEditor="true" value="#535353"/>

<variable name="black800" description="Black 800 " type="color" default="#424242"


hideEditor="true" value="#424242"/>

<variable name="black900" description="Black 900" type="color" default="#212121"


hideEditor="true" value="#212121"/>

<variable name="offBlack" description="Off black" type="color" default="#1f1f1f"


hideEditor="true" value="#1f1f1f"/>

<variable name="black" description="Black" type="color" default="#000" hideEditor="true"


value="#000000"/>

<variable name="vegeGreen" description="Vege green keycolor" type="color"


default="#729c0b" hideEditor="true" value="#729c0b"/>

<variable name="lime" description="Lime keycolor" type="color" default="#f4ff81"


hideEditor="true" value="#f4ff81"/>

<variable name="blueGray" description="Blue-gray color" type="color" default="#607d8b"


hideEditor="true" value="#607d8b"/>

<variable name="blueGrayDark" description="Blue-gray color (darkened)" type="color"


default="#263238" hideEditor="true" value="#263238"/>

<variable name="beige" description="Beige-blue background color" type="color"


default="#eed7c2" hideEditor="true" value="#eed7c2"/>
<variable name="beigeDark" description="Beige-blue accent color" type="color"
default="#da7d5e" hideEditor="true" value="#da7d5e"/>

<variable name="beigeBlue" description="Beige-blue keycolor" type="color" default="#374561"


hideEditor="true" value="#374561"/>

<variable name="aqua" description="Aqua keycolor" type="color" default="#18ffff"


hideEditor="true" value="#18ffff"/>

<variable name="peach" description="Peach background" type="color" default="#f59b82"


hideEditor="true" value="#f59b82"/>

<variable name="peachBright" description="Peach keycolor" type="color" default="#ee582e"


hideEditor="true" value="#ee582e"/>

<variable name="peachDark" description="Peach background (darkened)" type="color"


default="#e8937b" hideEditor="true" value="#e8937b"/>

<variable name="transpDark03" description="Transparent background (3%)" type="color"


default="rgba(0, 0, 0, 0.03)" hideEditor="true" value="rgba(0, 0, 0, 0.03)"/>

<variable name="transpDark10" description="Transparent background (10%)" type="color"


default="rgba(0, 0, 0, 0.1)" hideEditor="true" value="rgba(0, 0, 0, 0.1)"/>

<variable name="transpDark30" description="Transparent background (30%)" type="color"


default="rgba(0, 0, 0, 0.3)" hideEditor="true" value="rgba(0, 0, 0, 0.3)"/>

<variable name="transpLight" description="Transparent background (light)" type="color"


default="rgba(255, 255, 255, 0.3)" hideEditor="true" value="rgba(255, 255, 255, 0.3)"/>

<variable name="transpBlack" description="Transparent background (black)" type="color"


default="rgba(0, 0, 0, 0.87)" hideEditor="true" value="rgba(0, 0, 0, 0.87)"/>

<group description="Body">

<variable name="body.background.color" description="Body background color" type="color"


default="#f7f7f7" value="#607d8b"/>

<variable name="body.background" description="Background" type="background"


color="#f7f7f7" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll
top left"/>

<variable name="body.text.font" description="Font" type="font" default="$(generalFont)"


value="400 16px Ubuntu, sans-serif"/>

<variable name="body.text.color" description="Color" type="color" default="#000000"


value="#ffffff"/>

<variable name="body.link.color" description="Link color" type="color" default="$(keycolor)"


value="#f4ff81"/>

<variable name="body.link.visited.color" description="Visited Link color" type="color"


default="$(body.link.color)" value="#f4ff81"/>

<variable name="body.link.hover.color" description="Link hover color" type="color" default="$


(body.link.color)" value="#f4ff81"/>

<variable name="body.button.font" description="Button font" type="font" default="$


(textButtonFont)" value="500 12px Ubuntu, sans-serif"/>

<variable name="body.button.color" description="Button color" type="color" default="$


(keycolor)" value="#f4ff81"/>

</Group>

<group description="Blog title" selector="div.widget.Header">

<variable name="blog.title.font" description="Title font" type="font" default="$(blogTitleFont)"


value="700 62px Merriweather, Georgia, serif"/>

<variable name="blog.collapsed.title.font" description="Collapsed title font" type="font"


default="$(blogCollapsedTitleFont)" value="700 36px Merriweather, Georgia, serif"/>

<variable name="blog.collapsed.title.color" description="Collapsed title color" type="color"


default="$(blog.title.color)" value="#ffffff"/>

<variable name="blog.title.color" description="Title color" type="color" default="#1f1f1f"


value="#ffffff"/>

<variable name="header.background.color" description="Header bar color" type="color"


default="#efefef" value="#263238"/>

<variable name="header.icons.color" description="Header icons color" type="color" default="$


(keycolor)" value="#f4ff81"/>

<variable name="header.separator.color" description="Header separator color" type="color"


default="rgba(0, 0, 0, 0.3)" value="rgba(255, 255, 255, 0.3)"/>

<variable name="blog.description.font" description="Description font" type="font" default="$


(blogDescriptionFont)" value="italic 300 14px Merriweather, Georgia, serif"/>

<variable name="blog.description.color" description="Description color" type="color"


default="#1f1f1f" value="#ffffff"/>

</Group>

<group description="Tabs" selector="div.widget.PageList">

<variable name="tabs.text.font" description="Font" type="font" default="$(headerItemFont)"


value="700 12px Ubuntu, sans-serif"/>

<variable name="tabs.text.color" description="Text color" type="color" default="$(keycolor)"


value="#f4ff81"/>

<variable name="tabs.selected.color" description="Selected color" type="color" default="$


(tabs.text.color)" value="#f4ff81"/>

<variable name="tabs.background.color" description="Tabs background color" type="color"


default="#fff" value="#263238"/>

</Group>

<group description="Posts" selector="div.widget.Blog">

<variable name="posts.background.color" description="Post background color" type="color"


default="#fff" value="#263238"/>

<variable name="posts.title.color" description="Post title color" type="color"


default="#212121" value="#ffffff"/>

<variable name="posts.title.font" description="Post title font" type="font" default="$


(titleFont)" value="900 24px Merriweather, Georgia, serif"/>

<variable name="posts.byline.color" description="Post byline color" type="color"


default="#757575" value="#ffffff"/>

<variable name="posts.byline.font" description="Post byline font" type="font" default="$


(bylineFont)" value="italic 400 12px Merriweather, Georgia, serif"/>

<variable name="posts.text.font" description="Post text font" type="font" default="$


(bodyFont)" value="400 16px Merriweather, Georgia, serif"/>

<variable name="posts.text.color" description="Post text color" type="color" default="$


(body.text.color)" value="#ffffff"/>

<variable name="posts.text.lineHeight" description="Post text line height" min="10px"


max="60px" type="length" default="$(bodyLineHeight)" value="32px"/>

<variable name="posts.snippet.text.font" description="Post snippet text font" type="font"


default="$(bodyFontSmall)" value="400 14px Merriweather, Georgia, serif"/>

<variable name="posts.snippet.text.lineHeight" description="Post snippet text line height"


min="10px" max="60px" type="length" default="$(bodyLineHeightSmall)" value="24px"/>

<variable name="posts.link.color" description="Post link color" type="color" default="$


(body.link.color)" value="#f4ff81"/>

<variable name="posts.icons.color" description="Post icons color" type="color" default="$


(posts.link.color)" value="#f4ff81"/>

<variable name="posts.border.radius" description="Post border radius" type="length"


default="0px" min="0px" max="32px" value="0px"/>

<variable name="postFilter.background.color" description="Filter background color"


type="color" default="$(keycolor)" value="#f4ff81"/>

<variable name="postFilter.message.font" description="Filter text font" type="font" default="$


(postFilterFont)" value="italic 400 18px Merriweather, Georgia, serif"/>

<variable name="postFilter.message.color" description="Filter text color" type="color"


default="$(posts.background.color)" value="#263238"/>

<variable name="postFilter.message.link.color" description="Filter keyword color" type="color"


default="$(postFilter.message.color)" value="#263238"/>

<variable name="labels.font" description="Label font size" type="font" default="$(labelsFont)"


value="500 10.5px Ubuntu, sans-serif"/>

</Group>

<group description="Sharing" selector=".sharing">

<variable name="sharing.background.color" description="Sharing background color"


type="color" default="$(posts.background.color)" value="#263238"/>

<variable name="sharing.text.font" description="Sharing text font" type="font" default="$


(sharingFont)" value="400 14px Ubuntu, sans-serif"/>

<variable name="sharing.text.color" description="Sharing text color" type="color" default="$


(posts.text.color)" value="#ffffff"/>

<variable name="sharing.icons.color" description="Sharing icons color" type="color" default="$


(posts.icons.color)" value="#f4ff81"/>

</Group>

<group description="Blockquotes">

<variable name="blockquote.color" description="Blockquote color" type="color"


default="#424242" value="#424242"/>

<variable name="blockquote.font" description="Blockquote font" type="font" default="$


(body.text.font)" value="400 16px Ubuntu, sans-serif"/>

</Group>

<group description="Pictures">

<variable name="picture.caption.text.color" description="Caption text color" type="color"


default="#424242" value="#eeeeee"/>

<variable name="picture.caption.font" description="Caption font" type="font" default="$


(body.text.font)" value="400 16px Ubuntu, sans-serif"/>

</Group>

<group description="Sidebar" selector="div.sidebar_feed">

<variable name="sidebar.background.color" description="Background color" type="color"


default="$(body.background.color)" value="#607d8b"/>

<variable name="sidebar.separator.color" description="Separator color" type="color"


default="rgba(0, 0, 0, 0.12)" value="rgba(0, 0, 0, 0.12)"/>

<variable name="widget.title.font" description="Gadget title font" type="font" default="$


(sidebarTitleFont)" value="700 16px Merriweather, Georgia, sans-serif"/>

<variable name="widget.title.color" description="Gadget title color" type="color" default="$


(body.text.color)" value="#ffffff"/>

<variable name="sidebar.icons.color" description="Sidebar icons color" type="color" default="$


(keycolor)" value="#f4ff81"/>

<variable name="sidebar.link.font" description="Link font" type="font" default="$


(sidebarLinkFont)" value="400 14px Merriweather, Georgia, serif"/>

<variable name="sidebar.link.color" description="Link color" type="color" default="$(keycolor)"


value="#f4ff81"/>

<variable name="sidebar.posts.title.font" description="Post title font" type="font" default="$


(sidebarPostTitleFont)" value="500 14px Ubuntu, sans-serif"/>

<variable name="sidebar.posts.text.font" description="Post text font" type="font" default="$


(sidebarPostFont)" value="italic 400 14px Merriweather, Georgia, serif"/>

<variable name="sidebar.posts.text.color" description="Post text color" type="color"


default="#535353" value="#eeeeee"/>

</Group>

<group description="Search bar" selector="div.search">

<variable name="search.text.color" description="Text color" type="color" default="$(offBlack)"


value="#ffffff"/>

<variable name="search.icon.color" description="Icon color" type="color" default="rgba(0, 0, 0,


0.38)" value="#ffffff"/>

<variable name="search.font" description="Text font" type="font" default="$(searchFont)"


value="400 16px Merriweather, Georgia, serif"/>

<variable name="search.placeholder.font" description="Placeholder text font" type="font"


default="$(searchPlaceholderFont)" value="italic 400 15px Merriweather, Georgia, serif"/>

<variable name="search.placeholder.color" description="Placeholder text color" type="font"


default="rgba(0, 0, 0, 0.38)" value="rgba(255, 255, 255, 0.66)"/>

<variable name="search.background.color" description="Background color" type="color"


default="rgba(0, 0, 0, 0.03)" value="rgba(255, 255, 255, 0.3)"/>

</Group>

<group description="Attribution" selector=".widget.Attribution">

<variable name="attribution.text.color" description="Attribution text color" type="color"


default="$(body.text.color)" value="#ffffff"/>

<variable name="attribution.link.color" description="Attribution link color" type="color"


default="$(body.link.color)" value="#f4ff81"/>

<variable name="attribution.icon.color" description="Attribution icon color" type="color"


default="#757575" hideEditor="true" value="#ffffff"/>

</Group>

*/

.skip-navigation {

background-color: #fff;

box-sizing: border-box;

color: #000;

display: block;

height: 0;

left: 0;

line-height: 50px;

overflow: hidden;

padding-top: 0;

position: fixed;

text-align: center;

top: 0;

-webkit-transition: box-shadow .3s , height .3s , padding-top .3s;

transition: box-shadow .3s , height .3s , padding-top .3s;

width: 100%;

z-index: 900;

.skip-navigation:focus {
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);

height: 50px;

#main {

outline: none;

body {

overflow-wrap: break-word;

word-break: break-word;

word-wrap: break-word;

.hidden {

display: none;

.invisible {

visibility: hidden;

.container:after, .float-container:after {

clear: both;

content: "";

display: table;

.clearboth {

clear: both;

}
.dim-overlay {

background-color: rgba(0,0,0,0.54);

height: 100vh;

left: 0;

position: fixed;

top: 0;

width: 100%;

#sharing-dim-overlay {

background-color: transparent;

.main-heading {

position: absolute;

clip: rect(1px,1px,1px,1px);

padding: 0;

border: 0;

height: 1px;

width: 1px;

overflow: hidden;

.loading-spinner-large {

-webkit-animation: mspin-rotate 1568.63ms infinite linear;

animation: mspin-rotate 1568.63ms infinite linear;

height: 48px;

overflow: hidden;
position: absolute;

width: 48px;

z-index: 200;

.loading-spinner-large>div {

-webkit-animation: mspin-revrot 5332ms infinite steps(4);

animation: mspin-revrot 5332ms infinite steps(4);

.loading-spinner-large>div>div {

-webkit-animation: mspin-singlecolor-large-film 1333ms infinite steps(81);

animation: mspin-singlecolor-large-film 1333ms infinite steps(81);

background-size: 100%;

height: 48px;

width: 3888px;

.mspin-black-large>div>div, .mspin-grey_54-large>div>div {

background-image: url(https://www.blogblog.com/indie/mspin_black_large.svg);

.mspin-white-large>div>div {

background-image: url(https://www.blogblog.com/indie/mspin_white_large.svg);

.mspin-grey_54-large {

opacity: .54;

@-webkit-keyframes mspin-singlecolor-large-film {
0% {

-webkit-transform: translateX(0);

transform: translateX(0);

to {

-webkit-transform: translateX(-3888px);

transform: translateX(-3888px);

@keyframes mspin-singlecolor-large-film {

0% {

-webkit-transform: translateX(0);

transform: translateX(0);

to {

-webkit-transform: translateX(-3888px);

transform: translateX(-3888px);

@-webkit-keyframes mspin-rotate {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

to {
-webkit-transform: rotate(360deg);

transform: rotate(360deg);

@keyframes mspin-rotate {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

to {

-webkit-transform: rotate(360deg);

transform: rotate(360deg);

@-webkit-keyframes mspin-revrot {

0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

to {

-webkit-transform: rotate(-360deg);

transform: rotate(-360deg);

@keyframes mspin-revrot {
0% {

-webkit-transform: rotate(0deg);

transform: rotate(0deg);

to {

-webkit-transform: rotate(-360deg);

transform: rotate(-360deg);

input::-ms-clear {

display: none;

.blogger-logo, .svg-icon-24.blogger-logo {

fill: #ff9800;

opacity: 1;

.widget.Attribution {

margin-top: 1em;

text-align: center;

.widget.Attribution .blogger img, .widget.Attribution .blogger svg {

vertical-align: bottom;

.widget.Attribution .blogger img {

margin-$endSide: .5em;
}

.widget.Attribution div {

line-height: 24px;

margin-top: .5em;

.widget.Attribution .image-attribution, .widget.Attribution .copyright {

font-size: .7em;

margin-top: 1.5em;

.item-control {

display: none;

.BLOG_mobile_video_class {

display: none;

.bg-photo {

background-attachment: scroll !important;

body .CSS_LIGHTBOX {

z-index: 900;

.extendable .show-more, .extendable .show-less {

border-color: $(body.link.color);

color: $(body.link.color);

margin-top: 8px;
}

.extendable .show-more.hidden, .extendable .show-less.hidden {

display: none;

.inline-ad {

display: none;

max-width: 100%;

overflow: hidden;

.adsbygoogle {

display: block;

#cookieChoiceInfo {

bottom: 0;

top: auto;

iframe.b-hbp-video {

border: none;

.post-body img {

max-width: 100%;

.post-body iframe {

max-width: 100%;

}
.post-body a[imageanchor="1"] {

display: inline-block;

.byline {

margin-$endSide: 1em;

.byline:last-child {

margin-$endSide: 0;

.paging-control-container {

margin-bottom: 16px;

.paging-control-container .paging-control {

display: inline-block;

.paging-control-container .paging-control, .paging-control-container .comment-range-text:after {

color: $(body.link.color);

.paging-control-container .paging-control, .paging-control-container .comment-range-text {

margin-$endSide: 8px;

.paging-control-container .comment-range-text:after, .paging-control-container .paging-


control:after {

content: "\b7";

cursor: default;

pointer-events: none;
}

.paging-control-container .comment-range-text:last-child:after, .paging-control-container


.paging-control:last-child:after {

content: none;

.paging-control-container .comment-range-text:after, .paging-control-container .paging-


control:after {

padding-$startSide: 8px;

.byline.reactions iframe {

height: 20px;

.b-notification {

color: #000;

background-color: white;

border-bottom: solid 1px #000;

box-sizing: border-box;

padding: 16px 32px;

text-align: center;

.b-notification.visible {

-webkit-transition: margin-top .3s cubic-bezier(0.4,0.0,0.2,1);

transition: margin-top .3s cubic-bezier(0.4,0.0,0.2,1);

.b-notification.invisible {

position: absolute;
}

.b-notification-close {

position: absolute;

right: 8px;

top: 8px;

.no-posts-message {

line-height: 40px;

text-align: center;

.z {

left: 0; } @media screen and (max-width: 745px) {.z { left: 0;

body.item-view .post-body a[imageanchor="1"][style*="float: left;"], body.item-view .post-body


a[imageanchor="1"][style*="float: right;"] {

float: none !important;

clear: none !important;

body.item-view .post-body a[imageanchor="1"] img {

display: block;

height: auto;

margin: 0 auto;

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 {

margin: 0 auto 0 0;
}

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 {

margin: 0 0 0 auto;

.post-body a[imageanchor] {

display: block;

body.item-view .post-body a[imageanchor="1"] {

margin-left: 0 !important;

margin-right: 0 !important;

body.item-view .post-body a[imageanchor="1"]+a[imageanchor="1"] {

margin-top: 16px;

.z {

left: 0; } } .z { left: 0;

#comments {

border-top: 1px dashed rgba(0,0,0,0.54);

margin-top: 20px;

padding: 20px;

#comments .comment-thread ol {

margin: 0;

padding-left: 0;
}

#comments .comment-thread ol {

padding-$startSide: 0;

#comments .comment-thread .comment-replies, #comments .comment .comment-replybox-


single {

margin-left: 60px;

#comments .comment-thread .thread-count {

display: none;

#comments .comment {

list-style-type: none;

padding: 0 0 30px;

position: relative;

#comments .comment .comment {

padding-bottom: 8px;

.comment .avatar-image-container {

position: absolute;

.comment .avatar-image-container img {

border-radius: 50%;

.avatar-image-container svg, .comment .avatar-image-container .avatar-icon {


border-radius: 50%;

border: solid 1px $(posts.icons.color);

box-sizing: border-box;

fill: $(posts.icons.color);

height: 35px;

margin: 0;

padding: 7px;

width: 35px;

.comment .comment-block {

margin-top: 10px;

padding-bottom: 0;

.comment .comment-block {

margin-$startSide: 60px;

#comments .comment-author-header-wrapper {

margin-left: 40px;

#comments .comment .thread-expanded .comment-block {

padding-bottom: 20px;

#comments .comment .comment-header .user, #comments .comment .comment-header .user a


{

color: $(posts.title.color);

font-style: normal;
font-weight: bold;

#comments .comment .comment-actions {

background: transparent;

border: none;

box-shadow: none;

color: $(body.link.color);

cursor: pointer;

font-size: 14px;

font-weight: bold;

outline: none;

text-decoration: none;

text-transform: uppercase;

width: auto;

bottom: 0;

margin-bottom: 15px;

position: absolute;

#comments .comment .comment-actions>* {

margin-right: 8px;

#comments .comment .comment-header .datetime {

bottom: 0;

color: rgba(0,0,0,0.54);

display: inline-block;
font-size: 13px;

font-style: italic;

#comments .comment .comment-header .datetime {

margin-$startSide: 8px;

#comments .comment .comment-header .datetime a, #comments .comment .comment-footer


.comment-timestamp a {

color: rgba(0,0,0,0.54);

.comment .comment-body, #comments .comment .comment-content {

margin-top: 12px;

word-break: break-word;

.comment-body {

margin-bottom: 12px;

#comments.embed[data-num-comments="0"] {

border: none;

margin-top: 0;

padding-top: 0;

#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 {

display: none;

}
#comment-editor-src {

display: none;

.comments .comments-content .loadmore.loaded {

max-height: 0;

opacity: 0;

overflow: hidden;

.extendable .remaining-items {

height: 0;

overflow: hidden;

-webkit-transition: height .3s cubic-bezier(0.4,0.0,0.2,1);

transition: height .3s cubic-bezier(0.4,0.0,0.2,1);

.extendable .remaining-items.expanded {

height: auto;

.svg-icon-24, .svg-icon-24-button {

cursor: pointer;

height: 24px;

width: 24px;

min-width: 24px;

.touch-icon {

margin: -12px;
padding: 12px;

html[dir=rtl] .rtl-reversible-icon {

-webkit-transform: scaleX(-1);

-ms-transform: scaleX(-1);

transform: scaleX(-1);

svg:not(:root).touch-icon {

overflow: visible;

.touch-icon:focus, .touch-icon:active {

background-color: rgba(153,153,153,.4);

border-radius: 50%;

.touch-icon-button, .svg-icon-24-button {

background: transparent;

border: none;

margin: 0;

outline: none;

padding: 0;

.touch-icon-button .touch-icon:focus, .touch-icon-button .touch-icon:active {

background-color: transparent;

.touch-icon-button:focus .touch-icon, .touch-icon-button:active .touch-icon {


background-color: rgba(153,153,153,.4);

border-radius: 50%;

.widget.Profile .default-avatar-wrapper .avatar-icon {

border-radius: 50%;

border: solid 1px $(sidebar.icons.color);

box-sizing: border-box;

fill: $(sidebar.icons.color);

margin: 0;

.widget.Profile .individual .profile-img, .widget.Profile .individual .avatar-icon {

height: 90px;

width: 90px;

.widget.Profile .team .profile-img, .widget.Profile .team .avatar-icon, .widget.Profile .team


.default-avatar-wrapper {

height: 40px;

width: 40px;

.widget.Profile .individual .default-avatar-wrapper .avatar-icon {

padding: 25px;

.widget.Profile .team .default-avatar-wrapper .avatar-icon {

padding: 8px;

.snippet-container {
margin: 0;

position: relative;

overflow: hidden;

.snippet-fade {

bottom: 0;

box-sizing: border-box;

position: absolute;

width: 96px;

.snippet-fade {

$endSide: 0;

.snippet-fade:after {

content: '\2026';

.snippet-fade:after {

float: $endSide;

.centered-top-container.sticky {

left: 0;

position: fixed;

right: 0;

top: 0;

width: auto;
z-index: 8;

-webkit-transition-property: opacity , -webkit-transform;

transition-property: opacity , -webkit-transform;

transition-property: transform , opacity;

transition-property: transform , opacity , -webkit-transform;

-webkit-transition-duration: .2s;

transition-duration: .2s;

-webkit-transition-timing-function: cubic-bezier(0.4,0.0,0.2,1);

transition-timing-function: cubic-bezier(0.4,0.0,0.2,1);

.centered-top-placeholder {

display: none;

.collapsed-header .centered-top-placeholder {

display: block;

.centered-top-container .Header .replaced h1, .centered-top-placeholder .Header .replaced h1 {

display: none;

.centered-top-container.sticky .Header .replaced h1 {

display: block;

.centered-top-container.sticky .Header .header-widget {

background: none;

}
.centered-top-container.sticky .Header .header-image-wrapper {

display: none;

.centered-top-container img, .centered-top-placeholder img {

max-width: 100%;

.collapsible {

-webkit-transition: height .3s cubic-bezier(0.4,0.0,0.2,1);

transition: height .3s cubic-bezier(0.4,0.0,0.2,1);

.collapsible, .collapsible>summary {

display: block;

overflow: hidden;

.collapsible>:not(summary) {

display: none;

.collapsible[open]>:not(summary) {

display: block;

.collapsible:focus, .collapsible>summary:focus {

outline: none;

.collapsible>summary {

cursor: pointer;
display: block;

padding: 0;

.collapsible:focus>summary, .collapsible>summary:focus {

background-color: transparent;

.collapsible>summary::-webkit-details-marker {

display: none;

.collapsible-title {

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

.collapsible-title .title {

-webkit-box-flex: 1;

-webkit-flex: 1 1 auto;

-ms-flex: 1 1 auto;

flex: 1 1 auto;

-webkit-box-ordinal-group: 1;
-webkit-order: 0;

-ms-flex-order: 0;

order: 0;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

.collapsible-title .chevron-down, .collapsible[open] .collapsible-title .chevron-up {

display: block;

.collapsible-title .chevron-up, .collapsible[open] .collapsible-title .chevron-down {

display: none;

.flat-button {

cursor: pointer;

display: inline-block;

font-weight: bold;

text-transform: uppercase;

border-radius: 2px;

padding: 8px;

margin: -8px;

.flat-icon-button {

background: transparent;

border: none;
margin: 0;

outline: none;

padding: 0;

margin: -12px;

padding: 12px;

cursor: pointer;

box-sizing: content-box;

display: inline-block;

line-height: 0;

.flat-icon-button, .flat-icon-button .splash-wrapper {

border-radius: 50%;

.flat-icon-button .splash.animate {

-webkit-animation-duration: .3s;

animation-duration: .3s;

body#layout .bg-photo-overlay, body#layout .bg-photo {

display: none;

body#layout .page_body {

padding: 0;

position: relative;

top: 0;

}
body#layout .page {

display: inline-block;

left: inherit;

position: relative;

vertical-align: top;

width: 540px;

body#layout .centered {

max-width: 954px;

body#layout .navigation {

display: none;

body#layout .sidebar-container {

display: inline-block;

width: 40%;

body#layout .hamburger-menu, body#layout .search {

display: none;

.overflowable-container {

max-height: $(tabs.text.font.size + 2 * 16px);

overflow: hidden;

position: relative;

}
.overflow-button {

cursor: pointer;

#overflowable-dim-overlay {

background: transparent;

.overflow-popup {

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);

background-color: $(tabs.background.color);

left: 0;

max-width: calc(100% - 32px);

position: absolute;

top: 0;

visibility: hidden;

z-index: 101;

.overflow-popup ul {

list-style: none;

.overflow-popup li, .overflow-popup .tabs li {

display: block;

height: auto;

.overflow-popup .tabs li {

padding-left: 0;
padding-right: 0;

.overflow-button.hidden, .overflow-popup li.hidden, .overflow-popup .tabs li.hidden {

display: none;

.widget.Sharing .sharing-button {

display: none;

.widget.Sharing .sharing-buttons li {

padding: 0;

.widget.Sharing .sharing-buttons li span {

display: none;

.post-share-buttons {

position: relative;

.share-buttons .svg-icon-24, .centered-bottom .share-buttons .svg-icon-24 {

fill: $(sharing.icons.color);

.sharing-open.touch-icon-button:focus .touch-icon, .sharing-open.touch-icon-button:active


.touch-icon {

background-color: transparent;

.share-buttons {

background-color: $(sharing.background.color);
border-radius: 2px;

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);

color: $(sharing.text.color);

list-style: none;

margin: 0;

padding: 8px 0;

position: absolute;

top: -11px;

min-width: 200px;

z-index: 101;

.share-buttons.hidden {

display: none;

.sharing-button {

background: transparent;

border: none;

margin: 0;

outline: none;

padding: 0;

cursor: pointer;

.share-buttons li {

margin: 0;

height: 48px;
}

.share-buttons li:last-child {

margin-bottom: 0;

.share-buttons li .sharing-platform-button {

box-sizing: border-box;

cursor: pointer;

display: block;

height: 100%;

margin-bottom: 0;

padding: 0 16px;

position: relative;

width: 100%;

.share-buttons li .sharing-platform-button:focus, .share-buttons li .sharing-platform-button:hover


{

background-color: rgba(128,128,128,0.1);

outline: none;

.share-buttons li svg[class^="sharing-"], .share-buttons li svg[class*=" sharing-"] {

position: absolute;

top: 10px;

.share-buttons li span.sharing-platform-button, .share-buttons li span.sharing-platform-button {

position: relative;

top: 0;
}

.share-buttons li .platform-sharing-text {

display: block;

font-size: 16px;

line-height: 48px;

white-space: nowrap;

.share-buttons li .platform-sharing-text {

margin-$startSide: 56px;

.sidebar-container {

background-color: #f7f7f7;

max-width: 280px;

overflow-y: auto;

-webkit-transition-property: -webkit-transform;

transition-property: -webkit-transform;

transition-property: transform;

transition-property: transform, -webkit-transform;

-webkit-transition-duration: .3s;

transition-duration: .3s;

-webkit-transition-timing-function: cubic-bezier(0.0,0.0,0.2,1);

transition-timing-function: cubic-bezier(0.0,0.0,0.2,1);

width: 280px;

z-index: 101;

-webkit-overflow-scrolling: touch;
}

.sidebar-container .navigation {

line-height: 0;

padding: 20px;

.sidebar-container .widget {

background: none;

margin: 0 16px;

padding: 1em 0;

.sidebar-container .widget .title {

color: $(widget.title.color);

margin: 0;

.sidebar-container .widget ul {

list-style: none;

margin: 0;

padding: 0;

.sidebar-container .widget ul ul {

margin-$startSide: 1em;

.sidebar-container .widget ul li {

font-size: 16px;

line-height: normal;
}

.BlogArchive li {

margin: 16px 0;

.BlogArchive li:last-child {

margin-bottom: 0;

.Label .label-count:before, .BlogArchive .post-count:before {

content: '(';

.Label .label-count:after, .BlogArchive .post-count:after {

content: ')';

.Label .label-count, .BlogArchive .post-count {

float: $endSide;

margin-$startSide: .25em;

.Label li a {

display: inline-block;

.widget.Translate .skiptranslate>div {

display: block !important;

.widget.Profile .profile-link {

background-image: none !important;


display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

.widget.Profile .team-member .profile-img, .widget.Profile .team-member .default-avatar-


wrapper {

-webkit-box-flex: 0;

-webkit-flex: 0 0 auto;

-ms-flex: 0 0 auto;

flex: 0 0 auto;

.widget.Profile .team-member .profile-img, .widget.Profile .team-member .default-avatar-


wrapper {

margin-$endSide: 1em;

.widget.Profile .individual .profile-link {

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

.widget.Profile .team .profile-link .profile-name {

-webkit-align-self: center;

-ms-flex-item-align: center;
-ms-grid-row-align: center;

align-self: center;

display: block;

-webkit-box-flex: 1;

-webkit-flex: 1 1 auto;

-ms-flex: 1 1 auto;

flex: 1 1 auto;

.sidebar-container .sidebar-back {

cursor: pointer;

.sidebar-container .widget+.widget {

border-top: 1px solid $(sidebar.separator.color);

.dim-overlay {

background-color: rgba(0,0,0,0.54);

z-index: 100;

body.sidebar-visible {

overflow-y: hidden;

.z {

left: 0; } @media screen and (max-width: 745px) { .z { left: 0;

.sidebar-container {
bottom: 0;

position: fixed;

top: 0;

.sidebar-container {

left: auto;

right: 0;

.sidebar-container.sidebar-invisible {

-webkit-transition-timing-function: cubic-bezier(0.4,0.0,0.6,1);

transition-timing-function: cubic-bezier(0.4,0.0,0.6,1);

.sidebar-container.sidebar-invisible {

-webkit-transform: translateX(100%);

-ms-transform: translateX(100%);

transform: translateX(100%);

.z {

left: 0; } } .z { left: 0;

.dialog {

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);

background: $(posts.background.color);

box-sizing: border-box;

padding: 30px;
position: fixed;

text-align: center;

width: calc(100% - 24px);

z-index: 101;

.dialog input[type=text], .dialog input[type=email] {

background-color: transparent;

border-bottom: solid 1px rgba($(body.text.color.red),$(body.text.color.green),$


(body.text.color.blue),0.12);

border-left: none;

border-right: none;

border-top: none;

color: $(posts.text.color);

display: block;

font-family: $(body.text.font.family);

font-size: 16px;

line-height: 24px;

margin: auto;

padding-bottom: 7px;

outline: none;

text-align: center;

width: 100%;

.dialog input[type=text]::-webkit-input-placeholder, .dialog input[type=email]::-webkit-input-


placeholder {

color: rgba($(posts.text.color.red),$(posts.text.color.green),$(posts.text.color.blue),0.5);
}

.dialog input[type=text]::-moz-placeholder, .dialog input[type=email]::-moz-placeholder {

color: rgba($(posts.text.color.red),$(posts.text.color.green),$(posts.text.color.blue),0.5);

.dialog input[type=text]:-ms-input-placeholder, .dialog input[type=email]:-ms-input-placeholder


{

color: rgba($(posts.text.color.red),$(posts.text.color.green),$(posts.text.color.blue),0.5);

.dialog input[type=text]::placeholder, .dialog input[type=email]::placeholder {

color: rgba($(posts.text.color.red),$(posts.text.color.green),$(posts.text.color.blue),0.5);

.dialog input[type=text]:focus, .dialog input[type=email]:focus {

border-bottom: solid 2px $(posts.link.color);

padding-bottom: 6px;

.dialog input[type=submit] {

font-family: $(body.text.font.family);

.dialog input.no-cursor {

color: transparent;

text-shadow: 0 0 0 $(body.text.color);

.dialog input.no-cursor:focus {

outline: none;

.subscribe-popup {
max-width: 364px;

.subscribe-popup h3 {

color: $(posts.title.color);

font-size: 1.8em;

margin-top: 0;

.subscribe-popup div.widget.FollowByEmail h3 {

display: none;

.subscribe-popup div.widget.FollowByEmail .follow-by-email-submit {

background: transparent;

border: none;

box-shadow: none;

color: $(body.link.color);

cursor: pointer;

font-size: 14px;

font-weight: bold;

outline: none;

text-decoration: none;

text-transform: uppercase;

width: auto;

color: $(posts.link.color);

display: inline-block;

margin: 0 auto;
margin-top: 24px;

width: auto;

white-space: normal;

.subscribe-popup div.widget.FollowByEmail .follow-by-email-submit:disabled {

cursor: default;

opacity: .3;

@media (max-width:800px) {

.blog-name div.widget.Subscribe {

margin-bottom: 16px;

body.item-view .blog-name div.widget.Subscribe {

margin: 8px auto 16px;

width: 100%;

.sidebar-container .svg-icon-24 {

fill: $(sidebar.icons.color);

.centered-top .svg-icon-24 {

fill: $(header.icons.color);

.centered-bottom a .svg-icon-24, .centered-bottom button .svg-icon-24, .centered-bottom


.touch-icon.svg-icon-24 {

fill: $(body.link.color);
}

.post-wrapper a .svg-icon-24, .post-wrapper button .svg-icon-24, .post-wrapper .touch-icon.svg-


icon-24 {

fill: $(posts.icons.color);

.share-buttons .svg-icon-24, .centered-bottom .share-buttons .svg-icon-24 {

fill: $(sharing.icons.color);

.hamburger-menu.svg-icon-24 {

fill: $(body.link.color);

body#layout .page_body {

padding: 0;

position: relative;

top: 0;

body#layout .page {

display: inline-block;

left: inherit;

position: relative;

vertical-align: top;

width: 540px;

body {

background-color: $(body.background.color);

color: $(body.text.color);
font: $(body.text.font);

margin: 0;

min-height: 100vh;

h3 {

color: $(body.text.color);

h3.title {

color: $(body.text.color);

.post-wrapper .post-title, .post-wrapper .post-title a, .post-wrapper .post-title a:visited, .post-


wrapper .post-title a:hover {

color: $(posts.title.color);

a{

color: $(body.link.color);

font-style: normal;

text-decoration: none;

a:visited {

color: $(body.link.visited.color);

a:hover {

color: $(body.link.hover.color);

blockquote {
color: $(blockquote.color);

font: $(blockquote.font);

font-size: x-large;

font-style: italic;

font-weight: 300;

text-align: center;

.dim-overlay {

z-index: 100;

.bg-photo-container, .bg-photo {

height: 464px;

width: 100%;

.bg-photo-container {

overflow: hidden;

.bg-photo {

background: $(body.background);

background-position: center;

background-size: cover;

z-index: -1;

.centered {

margin: 0 auto;
position: relative;

.centered .main {

padding-bottom: 1em;

width: 100%;

.page {

box-sizing: border-box;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

min-height: 100vh;

padding-bottom: 1em;

.page>* {

-webkit-box-flex: 0;

-webkit-flex: 0 0 auto;

-ms-flex: 0 0 auto;

flex: 0 0 auto;
}

.page>#footer {

margin-top: auto;

.centered-bottom:after {

clear: both;

content: "";

display: table;

html[dir=ltr] .centered .main-container, html[dir=ltr] .centered .main {

float: left;

html[dir=rtl] .centered .main-container, html[dir=rtl] .centered .main {

float: right;

body.item-view .centered .main-container {

max-width: 890px;

margin-$endSide: 15px;

width: 100%;

body.item-view .centered {

width: 100%;

body.item-view .centered-bottom {

max-width: 1185px;
width: 100%;

body.item-view .page_body.vertical-ads .centered-bottom {

max-width: 1328px;

width: 100%;

.widget .title {

font-size: $(body.text.font.size * 1.125);

line-height: $(body.text.font.size * 1.75);

margin: $(body.text.font.size * 1.125) 0;

.extendable .show-more, .extendable .show-less {

color: $(body.button.color);

font: $(body.button.font);

cursor: pointer;

text-transform: uppercase;

margin: 0 -16px;

padding: 16px;

.sidebar-container .widget.Profile {

padding: 16px;

.widget.Profile {

font: $(body.text.font);

}
.widget.Profile h2 {

display: none;

.widget.Profile .title {

margin: 16px 32px;

.widget.Profile .profile-img {

border-radius: 50%;

.widget.Profile .individual {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

.widget.Profile .individual .profile-info {

-webkit-align-self: center;

-ms-flex-item-align: center;

-ms-grid-row-align: center;

align-self: center;

margin-$startSide: 16px;

.widget.Profile .profile-datablock {

margin-top: 0;

margin-bottom: .75em;
}

.widget.Profile .profile-link {

background-image: none !important;

font-family: inherit;

overflow: hidden;

max-width: 100%;

.widget.Profile .individual .profile-link {

margin: 0 -10px;

padding: 0 10px;

display: block;

.widget.Profile .individual .profile-data a.profile-link.g-profile, .widget.Profile .team a.profile-


link.g-profile .profile-name {

font: $(widget.title.font);

color: $(widget.title.color);

margin-bottom: .75em;

.widget.Profile .individual .profile-data a.profile-link.g-profile {

line-height: 1.25;

.widget.Profile .individual>a:first-child {

-webkit-flex-shrink: 0;

-ms-flex-negative: 0;

flex-shrink: 0;

}
.widget.Profile .profile-textblock {

display: none;

.widget.Profile dd {

margin: 0;

.widget.Profile ul {

list-style: none;

padding: 0;

.widget.Profile ul li {

margin: 10px 0 30px;

.widget.Profile .team .extendable, .widget.Profile .team .extendable .first-items, .widget.Profile


.team .extendable .remaining-items {

margin: 0;

padding: 0;

max-width: 100%;

.widget.Profile .team-member .profile-name-container {

-webkit-box-flex: 0;

-webkit-flex: 0 1 auto;

-ms-flex: 0 1 auto;

flex: 0 1 auto;

.widget.Profile .team .extendable .show-more, .widget.Profile .team .extendable .show-less {


position: relative;

html[dir=ltr] .widget.Profile .team .extendable .show-more, html[dir=ltr] .widget.Profile .team


.extendable .show-less {

left: 56px;

html[dir=rtl] .widget.Profile .team .extendable .show-more, html[dir=rtl] .widget.Profile .team


.extendable .show-less {

right: 56px;

.post-wrapper a, #comments a {

color: $(posts.link.color);

div.widget.Blog .blog-posts .post-outer {

border: none;

div.widget.Blog .post-outer {

padding-bottom: 0;

.post .thumb {

float: left;

height: 20%;

width: 20%;

.no-posts-message {

margin: 10px 0;
}

.blog-pager {

text-align: center;

.post-title {

margin: 0;

.post-title, .post-title a {

font: $(posts.title.font);

.post-body {

color: $(posts.text.color);

display: block;

font: $(posts.text.font);

line-height: $(posts.text.lineHeight);

margin: 0;

.post-snippet {

color: $(posts.text.color);

font: $(posts.snippet.text.font);

line-height: $(posts.snippet.text.lineHeight);

margin: 8px 0;

max-height: $(posts.snippet.text.lineHeight * 3);

.post-snippet .snippet-fade {
background: -webkit-linear-gradient($startSide,$(posts.background.color) 0%,$
(posts.background.color) 20%,$(posts.background.color.transparent) 100%);

background: linear-gradient(to $startSide,$(posts.background.color) 0%,$


(posts.background.color) 20%,$(posts.background.color.transparent) 100%);

color: $(posts.text.color);

bottom: 0;

position: absolute;

.post-body img {

height: inherit;

max-width: 100%;

.byline, .byline.post-timestamp a, .byline.post-author a {

color: $(posts.byline.color);

font: $(posts.byline.font);

.byline.post-author {

text-transform: lowercase;

.byline.post-author a {

text-transform: none;

.post-header .byline, .item-byline .byline {

margin-$endSide: 0;

.post-share-buttons .share-buttons {
background: $(sharing.background.color);

color: $(sharing.text.color);

font: $(sharing.text.font);

.tr-caption {

color: $(picture.caption.text.color);

font: $(picture.caption.font);

font-size: 1.1em;

font-style: italic;

.post-filter-message {

background-color: $(postFilter.background.color);

box-sizing: border-box;

color: $(postFilter.message.color);

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

font: $(postFilter.message.font);

margin-bottom: 16px;

margin-top: 32px;

padding: 12px 16px;

.post-filter-message a {

color: $(body.button.color);
font: $(body.button.font);

cursor: pointer;

text-transform: uppercase;

color: $(postFilter.message.link.color);

padding-$startSide: 30px;

white-space: nowrap;

.post-filter-message>div:first-child {

-webkit-box-flex: 1;

-webkit-flex: 1 0 auto;

-ms-flex: 1 0 auto;

flex: 1 0 auto;

.post-filter-message .search-label, .post-filter-message .search-query {

font-style: italic;

quotes: "\201c" "\201d" "\2018" "\2019";

.post-filter-message .search-label:before, .post-filter-message .search-query:before {

content: open-quote;

.post-filter-message .search-label:after, .post-filter-message .search-query:after {

content: close-quote;

#blog-pager {

margin-top: 2em;
margin-bottom: 1em;

#blog-pager a {

color: $(body.button.color);

font: $(body.button.font);

cursor: pointer;

text-transform: uppercase;

.Label {

overflow-x: hidden;

.Label ul {

list-style: none;

padding: 0;

.Label .first-ten {

margin-top: 16px;

.Label li, .Label li a, .Label span.label-size, .byline.post-labels a {

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

.Label li, .Label span.label-size, .byline.post-labels a {

color: $(body.button.color);
font: $(body.button.font);

cursor: pointer;

text-transform: uppercase;

border-radius: 2px;

display: inline-block;

margin: 4px 4px 4px 0;

padding: 4px 8px;

position: relative;

.Label li a:before, .Label span.label-size a:before, body.item-view .byline.post-labels a:before {

bottom: 0;

content: ' ';

left: 0;

right: 0;

opacity: .1;

position: absolute;

top: 0;

.Label li a:before, .Label span.label-size a:before {

background-color: $(sidebar.link.color);

body.item-view .byline.post-labels a:before {

background-color: $(posts.link.color);

.Label li a, .Label span.label-size a, .byline.post-labels a, .post-footer .byline.post-labels a {


font: $(labels.font);

line-height: 1.5;

vertical-align: middle;

.Label span.label-size a, .Label li a {

color: $(sidebar.link.color);

.byline.post-labels a {

color: $(posts.link.color);

.Label .show-all {

border-color: $(body.link.color);

color: $(body.link.color);

cursor: pointer;

display: inline-block;

font-style: normal;

margin-top: 8px;

text-transform: uppercase;

.Label .show-all.hidden {

display: inline-block;

.FeaturedPost .item-thumbnail img {

max-width: 100%;

}
.sidebar-container .FeaturedPost .post-title a {

color: $(sidebar.link.color);

font: $(sidebar.posts.title.font);

body.item-view .PopularPosts {

display: inline-block;

overflow-y: auto;

vertical-align: top;

width: 280px;

.PopularPosts h3.title {

font: $(widget.title.font);

.PopularPosts .post-title {

margin: 0 0 16px;

.PopularPosts .post-title a {

color: $(sidebar.link.color);

font: $(sidebar.posts.title.font);

line-height: $(sidebar.posts.text.font.size * 12 / 7);

.PopularPosts .item-thumbnail {

clear: both;

height: 152px;

overflow-y: hidden;
width: 100%;

.PopularPosts .item-thumbnail img {

padding: 0;

width: 100%;

.PopularPosts .popular-posts-snippet {

color: $(sidebar.posts.text.color);

font: $(sidebar.posts.text.font);

line-height: $(sidebar.posts.text.font.size * 12 / 7);

max-height: calc($(sidebar.posts.text.font.size * 12 / 7) * 4);

overflow: hidden;

.PopularPosts .popular-posts-snippet .snippet-fade {

color: $(sidebar.posts.text.color);

.PopularPosts .post {

margin: 30px 0;

position: relative;

.PopularPosts .post+.post {

padding-top: 1em;

.popular-posts-snippet .snippet-fade {

background: -webkit-linear-gradient($startSide,$(body.background.color) 0%,$


(body.background.color) 20%,$(body.background.color.transparent) 100%);
background: linear-gradient(to $startSide,$(body.background.color) 0%,$
(body.background.color) 20%,$(body.background.color.transparent) 100%);

height: $(sidebar.posts.text.font.size * 12 / 7);

line-height: $(sidebar.posts.text.font.size * 12 / 7);

position: absolute;

top: calc($(sidebar.posts.text.font.size * 12 / 7) * 3);

width: 96px;

html[dir=ltr] .popular-posts-snippet .snippet-fade {

right: 0;

html[dir=rtl] .popular-posts-snippet .snippet-fade {

left: 0;

.Attribution {

color: $(attribution.text.color);

.Attribution a, .Attribution a:hover, .Attribution a:visited {

color: $(attribution.link.color);

.Attribution svg {

fill: $(attribution.icon.color);

.inline-ad {

margin-bottom: 16px;

}
body.item-view .inline-ad {

display: block;

.vertical-ad-container {

float: $startSide;

margin-$endSide: 15px;

min-height: 1px;

width: 128px;

body.item-view .vertical-ad-container {

margin-top: 30px;

.vertical-ad-placeholder, .inline-ad-placeholder {

background: $(posts.background.color);

border: 1px solid #000;

opacity: .9;

vertical-align: middle;

text-align: center;

.vertical-ad-placeholder {

height: 600px;

.inline-ad-placeholder {

height: 90px;

}
.vertical-ad-placeholder span, .inline-ad-placeholder span {

margin-top: 290px;

display: block;

text-transform: uppercase;

font-weight: bold;

color: $(posts.title.color);

.vertical-ad-placeholder span {

margin-top: 290px;

padding: 0 40px;

.inline-ad-placeholder span {

margin-top: 35px;

.z {

left: 0; } @media (max-width: 745px) {.z { left: 0;

.bg-photo-container, .bg-photo {

width: auto;

height: 296px;

.z {

left: 0; } } .z { left: 0;

.centered-top {
-webkit-box-align: start;

-webkit-align-items: flex-start;

-ms-flex-align: start;

align-items: flex-start;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

margin: 0 auto;

max-width: 1483px;

.page_body.vertical-ads .centered-top {

max-width: 1626px;

.centered-top .blog-name, .centered-top .search, .centered-top .hamburger-section {

margin-$startSide: 16px;

.centered-top .return_link {

-webkit-box-flex: 0;

-webkit-flex: 0 0 auto;

-ms-flex: 0 0 auto;

flex: 0 0 auto;
-webkit-box-ordinal-group: 1;

-webkit-order: 0;

-ms-flex-order: 0;

order: 0;

.centered-top .blog-name {

-webkit-box-flex: 1;

-webkit-flex: 1 1 0;

-ms-flex: 1 1 0px;

flex: 1 1 0;

-webkit-box-ordinal-group: 2;

-webkit-order: 1;

-ms-flex-order: 1;

order: 1;

.centered-top .search {

-webkit-box-flex: 0;

-webkit-flex: 0 0 auto;

-ms-flex: 0 0 auto;

flex: 0 0 auto;

-webkit-box-ordinal-group: 3;

-webkit-order: 2;

-ms-flex-order: 2;

order: 2;

}
.centered-top .hamburger-section {

-webkit-box-flex: 0;

-webkit-flex: 0 0 auto;

-ms-flex: 0 0 auto;

flex: 0 0 auto;

-webkit-box-ordinal-group: 4;

-webkit-order: 3;

-ms-flex-order: 3;

order: 3;

.centered-top .subscribe-section-container {

-webkit-box-flex: 1;

-webkit-flex: 1 0 100%;

-ms-flex: 1 0 100%;

flex: 1 0 100%;

-webkit-box-ordinal-group: 5;

-webkit-order: 4;

-ms-flex-order: 4;

order: 4;

.centered-top .top-nav {

-webkit-box-flex: 1;

-webkit-flex: 1 0 100%;

-ms-flex: 1 0 100%;

flex: 1 0 100%;
margin-top: 32px;

-webkit-box-ordinal-group: 6;

-webkit-order: 5;

-ms-flex-order: 5;

order: 5;

.centered-top-container.sticky .centered-top {

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

box-sizing: border-box;

-webkit-flex-wrap: nowrap;

-ms-flex-wrap: nowrap;

flex-wrap: nowrap;

.centered-top-container.sticky .blog-name {

-webkit-box-flex: 0;

-webkit-flex: 0 1 auto;

-ms-flex: 0 1 auto;

flex: 0 1 auto;

max-width: none;

min-width: 0;

.centered-top-container.sticky .subscribe-section-container {
-webkit-box-flex: 1;

-webkit-flex: 1 0 auto;

-ms-flex: 1 0 auto;

flex: 1 0 auto;

-webkit-box-ordinal-group: 3;

-webkit-order: 2;

-ms-flex-order: 2;

order: 2;

.centered-top-container.sticky .search {

-webkit-box-flex: 1;

-webkit-flex: 1 0 auto;

-ms-flex: 1 0 auto;

flex: 1 0 auto;

-webkit-box-ordinal-group: 4;

-webkit-order: 3;

-ms-flex-order: 3;

order: 3;

.centered-top-container.sticky .hamburger-section {

-webkit-box-ordinal-group: 5;

-webkit-order: 4;

-ms-flex-order: 4;

order: 4;

}
.centered-top-container.sticky .top-nav {

display: none;

.centered-top-container.sticky, .centered-top-container.sticky .centered-top {

background-color: $(header.background.color);

.centered-top-container.sticky .centered-top {

padding: 0 16px;

.centered-top-container.sticky .subscribe-section-container {

border-$startSide: 1px solid $(header.separator.color);

margin: 0 16px;

.centered-top {

padding-top: 40px;

.hamburger-section {

display: none;

.search {

position: relative;

width: 250px;

.search h3 {

display: none;
}

.search, .search .search-expand, .search .section {

height: 48px;

.search .section {

box-sizing: border-box;

$endSide: 0;

overflow-x: hidden;

position: absolute;

top: 0;

width: 250px;

z-index: 8;

.search form {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

.search form .search-submit-container {

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

display: -webkit-box;
display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-flex: 0;

-webkit-flex: 0 0 auto;

-ms-flex: 0 0 auto;

flex: 0 0 auto;

height: 48px;

-webkit-box-ordinal-group: 1;

-webkit-order: 0;

-ms-flex-order: 0;

order: 0;

.search form .search-input {

-webkit-box-flex: 1;

-webkit-flex: 1 1 auto;

-ms-flex: 1 1 auto;

flex: 1 1 auto;

-webkit-box-ordinal-group: 2;

-webkit-order: 1;

-ms-flex-order: 1;

order: 1;

.search form .search-input input {

box-sizing: border-box;
height: 48px;

width: 100%;

.search .search-expand {

background: transparent;

border: none;

margin: 0;

outline: none;

padding: 0;

display: none;

margin-$startSide: auto;

.search .search-expand .svg-icon-24, .search .search-submit-container .svg-icon-24 {

fill: $(search.icon.color);

-webkit-transition: .3s fill cubic-bezier(0.4,0.0,0.2,1);

transition: .3s fill cubic-bezier(0.4,0.0,0.2,1);

.search .search-expand-text {

display: none;

.search .section {

background-color: $(search.background.color);

line-height: 24px;

-webkit-transition-duration: .3s;

transition-duration: .3s;
-webkit-transition-property: background-color , width;

transition-property: background-color , width;

-webkit-transition-timing-function: cubic-bezier(0.4,0.0,0.2,1);

transition-timing-function: cubic-bezier(0.4,0.0,0.2,1);

.search.focused .section {

background-color: $(search.background.color);

.search .search-submit-container input[type="submit"] {

display: none;

.search .search-submit-container .search-icon {

margin: 0;

padding: 12px 8px;

.search .search-input input {

background: none;

border: none;

color: $(search.text.color);

font: $(search.font);

outline: none;

padding: 0 8px;

.search .search-input input::-webkit-input-placeholder {

color: $(search.placeholder.color);
font: $(search.placeholder.font);

.search .search-input input::-moz-placeholder {

color: $(search.placeholder.color);

font: $(search.placeholder.font);

.search .search-input input:-ms-input-placeholder {

color: $(search.placeholder.color);

font: $(search.placeholder.font);

.search .search-input input::placeholder {

color: $(search.placeholder.color);

font: $(search.placeholder.font);

.search .dim-overlay {

background-color: transparent;

.centered-top .Header h1 {

box-sizing: border-box;

color: $(blog.title.color);

font: $(blog.title.font);

margin: 0;

padding: 0;

.centered-top .Header h1 a, .centered-top .Header h1 a:visited, .centered-top .Header h1


a:hover {
color: inherit;

font-size: inherit;

.sticky .widget.Header h1 {

color: $(blog.collapsed.title.color);

font-size: 32px;

margin: 16px 0;

padding: 0;

overflow: hidden;

text-overflow: ellipsis;

white-space: nowrap;

.widget.Header p {

color: $(blog.description.color);

font: $(blog.description.font);

line-height: 1.7;

margin: 16px 0;

padding: 0;

.sticky .widget.Header p {

display: none;

.centered-top .subscribe-section-container {

border-left: none;

margin: 0;
}

.centered-top .subscribe-button {

background: transparent;

border: none;

margin: 0;

outline: none;

padding: 0;

color: $(body.button.color);

cursor: pointer;

display: inline-block;

font: $(tabs.text.font);

margin: 0 auto;

padding: 16px;

text-transform: uppercase;

white-space: nowrap;

.top-nav .PageList h3 {

margin-$startSide: 16px;

.top-nav .PageList ul {

list-style: none;

margin: 0;

padding: 0;

.top-nav .overflowable-contents li {
float: $startSide;

max-width: 100%;

.top-nav .PageList ul li a {

display: block;

height: $(tabs.text.font.size + 2 * 16px);

line-height: $(tabs.text.font.size + 2 * 16px);

overflow: hidden;

padding: 0 22px;

text-overflow: ellipsis;

vertical-align: middle;

.top-nav .PageList ul li:first-child a {

padding-left: 16px;

.top-nav .PageList ul li:last-child a {

padding-right: 16px;

.top-nav .PageList .dim-overlay {

opacity: 0;

.top-nav .overflow-button {

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;
align-items: center;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

height: $(tabs.text.font.size + 2 * 16px);

-webkit-box-flex: 0;

-webkit-flex: 0 0 auto;

-ms-flex: 0 0 auto;

flex: 0 0 auto;

padding: 0 16px;

position: relative;

-webkit-transition: opacity .3s cubic-bezier(0.4,0.0,0.2,1);

transition: opacity .3s cubic-bezier(0.4,0.0,0.2,1);

width: 24px;

.top-nav .overflow-button.hidden {

display: none;

.top-nav .overflow-button svg {

margin-top: 0;

.top-nav .PageList ul li {

color: $(body.button.color);

font: $(body.button.font);
cursor: pointer;

text-transform: uppercase;

font: $(tabs.text.font);

.top-nav .PageList ul li a {

background-color: $(tabs.background.color);

color: $(tabs.text.color);

.top-nav .PageList ul li.selected a {

color: $(tabs.selected.color);

.z {

left: 0; } @media (max-width: 1225px) {.z { left: 0;

.search {

width: 24px;

.search .search-expand {

display: block;

position: relative;

z-index: 8;

.search .section {

width: 32px;

z-index: 7;
}

.search.focused .section {

width: 250px;

z-index: 8;

.search .search-expand .search-expand-icon {

fill: transparent;

.search .search-submit-container .svg-icon-24 {

fill: $(header.icons.color);

.search.focused .search-submit-container .svg-icon-24 {

fill: $(search.icon.color);

.search .section {

background-color: $(search.background.color.transparent);

.blog-name, .subscribe-section-container, .return_link {

opacity: 1;

-webkit-transition: opacity .3s cubic-bezier(0.4,0.0,0.2,1);

transition: opacity .3s cubic-bezier(0.4,0.0,0.2,1);

.centered-top.search-focused .blog-name, .centered-top.search-focused .subscribe-section-


container, .centered-top.search-focused .return_link {

opacity: 0;

}
body.search-view .centered-top.search-focused .blog-name .section, body.search-view
.centered-top.search-focused .subscribe-section-container {

display: none;

.z {

left: 0; } } .z { left: 0;

.z {

left: 0; } @media (max-width: 745px) {.z { left: 0;

.top-nav .section.no-items#page_list_top {

display: none;

.centered-top {

padding-top: 16px;

.centered-top .hamburger-section {

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

height: 48px;
margin-$endSide: 24px;

.centered-top .header_container {

margin: 0 auto;

max-width: 600px;

.centered-top-container.sticky .centered-top {

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

.centered-top-container.sticky .blog-name {

-webkit-box-flex: 1;

-webkit-flex: 1 1 0;

-ms-flex: 1 1 0px;

flex: 1 1 0;

.centered-top-container.sticky .search {

-webkit-box-flex: 0;

-webkit-flex: 0 0 auto;

-ms-flex: 0 0 auto;

flex: 0 0 auto;

.centered-top-container.sticky .hamburger-section, .centered-top-container.sticky .search {

margin-bottom: 8px;
margin-top: 8px;

.centered-top-container.sticky .subscribe-section-container {

-webkit-box-flex: 1;

-webkit-flex: 1 0 100%;

-ms-flex: 1 0 100%;

flex: 1 0 100%;

margin: 0;

-webkit-box-ordinal-group: 6;

-webkit-order: 5;

-ms-flex-order: 5;

order: 5;

body.item-view .centered-top-container.sticky .subscribe-section-container {

margin-$startSide: 24px;

.centered-top-container.sticky .subscribe-section-container {

margin-top: -16px;

border: none;

.centered-top-container.sticky .subscribe-button {

padding: 8px 16px 16px;

margin-bottom: 0;

.widget.Header h1 {
font: $(blog.collapsed.title.font);

padding: 0;

.sticky .widget.Header h1 {

font-size: 16px;

margin: 0;

.top-nav .PageList {

max-width: 100%;

overflow-x: auto;

.z {

left: 0; } } .z { left: 0;

body.sidebar-visible .page {

overflow-y: scroll;

.sidebar-container {

background-color: $(sidebar.background.color);

box-sizing: border-box;

min-height: 100%;

padding: 0;

-webkit-transition-property: all;

transition-property: all;

}
.sidebar-container a {

font: $(sidebar.link.font);

color: $(sidebar.link.color);

.sidebar-container .navigation {

display: none;

.sidebar-container .widget {

margin: auto 0;

padding: 24px;

.sidebar-container .widget .title {

font: $(widget.title.font);

.sidebar-container .ReportAbuse {

border-top: 1px solid $(sidebar.separator.color);

body.item-view .sidebar-container {

box-sizing: border-box;

float: $startSide;

margin-top: 15px;

padding: 0;

body.item-view .sidebar-container .widget {

background: none;
padding: 15px 0;

body.item-view .sidebar-container .widget+.widget {

border-top: 1px dashed $(sidebar.separator.color);

.z {

left: 0; } @media (max-width: 745px) {.z { left: 0;

.sidebar-container {

max-width: none;

width: 100%;

.sidebar-container .navigation {

display: block;

padding: 24px;

.sidebar-container .sidebar-back {

float: $endSide;

.sidebar-container .navigation+.sidebar.section {

clear: both;

.sidebar-container .widget {

padding-$startSide: 32px;

}
.sidebar-container .widget.Profile {

padding-$startSide: 24px;

.z {

left: 0; } } .z { left: 0;

body.feed-view .centered {

max-width: 1483px;

body.feed-view .centered .main-container {

width: 1203px;

body.feed-view .page_body.vertical-ads .centered {

max-width: 1626px;

width: 1626px;

body.feed-view .top-nav .section, body.feed-view .post-filter-message {

max-width: 1188px;

body.feed-view .hero.post-wrapper {

background-position: center;

background-size: cover;

position: relative;

width: 1188px;

}
body.feed-view .post-wrapper .post, body.feed-view .post-wrapper .post .snippet-thumbnail {

background-color: $(posts.background.color);

padding: 24px 16px;

.post-wrapper {

background-color: $(posts.background.color);

position: relative;

body.feed-view .post-wrapper {

border-radius: $(posts.border.radius);

overflow: hidden;

-webkit-transition: .3s box-shadow cubic-bezier(0.4,0.0,0.2,1);

transition: .3s box-shadow cubic-bezier(0.4,0.0,0.2,1);

width: 385px;

body.feed-view .post-wrapper:hover {

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);

body.feed-view .post-wrapper .snippet-thumbnail {

-webkit-transition: .3s opacity cubic-bezier(0.4,0.0,0.2,1);

transition: .3s opacity cubic-bezier(0.4,0.0,0.2,1);

body.feed-view .post-wrapper.has-labels.image .snippet-thumbnail-container {

background-color: $(posts.background.color.inverse);

}
body.feed-view .post-wrapper.has-labels:hover .snippet-thumbnail {

opacity: .7;

html[dir=ltr] body.feed-view .post-wrapper {

float: left;

html[dir=ltr] body.feed-view .post-wrapper, html[dir=ltr] body.feed-view .inline-ad {

margin: 0 15px 15px 0;

html[dir=rtl] body.feed-view .post-wrapper {

float: right;

html[dir=rtl] body.feed-view .post-wrapper, html[dir=rtl] body.feed-view .inline-ad {

margin: 0 0 15px 15px;

.post-wrapper.hero .post-title a {

font-size: $(posts.title.font.size * 5 / 6);

line-height: $(posts.title.font.size);

.post-wrapper.not-hero .post-title a {

font-size: $(posts.title.font.size * 2 / 3);

line-height: $(posts.title.font.size);

body.feed-view .post-wrapper .post-title a {

display: block;
margin: -296px -16px;

padding: 296px 16px;

position: relative;

text-overflow: ellipsis;

z-index: 2;

body.feed-view .post-wrapper .byline, body.feed-view .post-wrapper .comment-link {

position: relative;

z-index: 3;

body.feed-view .not-hero.post-wrapper.no-image .post-title-container {

position: relative;

top: -90px;

.byline {

line-height: $(posts.byline.font.size);

.hero .byline {

line-height: $(posts.byline.font.size * 1.3);

.hero .byline, .hero .byline.post-timestamp a, .hero .byline.post-author a {

font-size: $(posts.byline.font.size + 2px);

body.feed-view .post-wrapper .post-header {

padding: 5px 0;
}

html[dir=ltr] body.feed-view .post-share-buttons, html[dir=rtl] body.feed-view .post-comment-


link {

float: right;

html[dir=rtl] body.feed-view .post-share-buttons, html[dir=ltr] body.feed-view .post-comment-


link {

float: left;

.header-buttons-byline {

margin-top: 16px;

height: 24px;

.header-buttons-byline .byline {

height: 24px;

.post-header-right-buttons .post-comment-link, .post-header-right-buttons .post-jump-link {

display: block;

float: left;

margin-left: 16px;

.post .num_comments {

display: inline-block;

font: $(posts.title.font);

font-size: $(posts.title.font.size / 2);

margin: -14px 6px 0;


vertical-align: middle;

body.feed-view .post-wrapper .post-jump-link {

float: right;

body.feed-view .post-wrapper .post-footer {

margin-top: 15px;

body.feed-view .post-wrapper .snippet-thumbnail-container, body.feed-view .post-wrapper


.snippet-thumbnail {

height: 184px;

overflow-y: hidden;

body.feed-view .post-wrapper .snippet-thumbnail {

display: block;

background-position: center;

background-size: cover;

width: 100%;

body.feed-view .post-wrapper.hero .snippet-thumbnail-container, body.feed-view .post-


wrapper.hero .snippet-thumbnail {

height: 272px;

overflow-y: hidden;

.z {

left: 0; } @media (min-width: 746px) {.z { left: 0;


}

body.feed-view .post-title a .snippet-container {

height: $(posts.title.font.size * 2);

max-height: $(posts.title.font.size * 2);

body.feed-view .post-title a .snippet-fade {

background: -webkit-linear-gradient($startSide,$(posts.background.color) 0%,$


(posts.background.color) 20%,$(posts.background.color.transparent) 100%);

background: linear-gradient(to $startSide,$(posts.background.color) 0%,$


(posts.background.color) 20%,$(posts.background.color.transparent) 100%);

color: transparent;

height: $(posts.title.font.size);

width: 96px;

body.feed-view .hero .post-title-container .post-title a .snippet-container {

height: $(posts.title.font.size);

max-height: $(posts.title.font.size);

body.feed-view .hero .post-title a .snippet-fade {

height: $(posts.title.font.size);

body.feed-view .post-header-left-buttons {

position: relative;

body.feed-view .post-header-left-buttons:hover .touch-icon {

opacity: 1;
}

body.feed-view .hero.post-wrapper.no-image .post-title-container, body.feed-view .hero.post-


wrapper.no-image .post-authordate {

position: relative;

top: -150px;

body.feed-view .hero.post-wrapper.no-image .post-title-container {

text-align: center;

body.feed-view .hero.post-wrapper.no-image .post-authordate {

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

body.feed-view .labels-outer-container {

margin: 0 -4px;

opacity: 0;

position: absolute;

top: 20px;

-webkit-transition: .2s opacity;

transition: .2s opacity;

width: calc(100% - 2 * 16px);

body.feed-view .post-wrapper.has-labels:hover .labels-outer-container {

opacity: 1;
}

body.feed-view .labels-container {

max-height: calc($(labels.font.size * 1.5 + 8px) + 2 * 4px);

overflow: hidden;

body.feed-view .labels-container .overflow-button-container, body.feed-view .labels-container


.labels-more {

display: inline-block;

float: $endSide;

body.feed-view .labels-items {

padding: 0 4px;

body.feed-view .labels-container a {

display: inline-block;

max-width: calc(100% - 16px);

overflow-x: hidden;

text-overflow: ellipsis;

white-space: nowrap;

vertical-align: top;

body.feed-view .labels-more {

min-width: $(labels.font.size * 1.5 + 8px);

padding: 0;

width: $(labels.font.size * 1.5 + 8px);

}
html[dir=ltr] body.feed-view .labels-more {

margin-left: 8px;

html[dir=rtl] body.feed-view .labels-more {

margin-right: 8px;

body.feed-view .byline.post-labels {

margin: 0;

body.feed-view .byline.post-labels a, body.feed-view .labels-more a {

background-color: $(posts.background.color);

color: $(posts.link.color);

box-shadow: 0 0 2px 0 rgba(0,0,0,0.18);

opacity: .9;

body.feed-view .labels-more a {

border-radius: 50%;

display: inline-block;

font: $(labels.font);

line-height: $(labels.font.size * 1.5 + 8px);

height: $(labels.font.size * 1.5 + 8px);

padding: 0;

text-align: center;

width: $(labels.font.size * 1.5 + 8px);

max-width: $(labels.font.size * 1.5 + 8px);


}

.z {

left: 0; } } .z { left: 0;

.z {

left: 0; } @media (max-width: 1483px) {.z { left: 0;

body.feed-view .hero.post-wrapper {

width: 787px;

body.feed-view .centered {

width: 1082px;

body.feed-view .centered .main-container {

width: 802px;

body.feed-view .top-nav .section, body.feed-view .post-filter-message {

max-width: 787px;

.blog-pager {

width: 802px;

.z {

left: 0; } } .z { left: 0;

}
.z {

left: 0; } @media (max-width: 1626px) {.z { left: 0;

body.feed-view .page_body.vertical-ads .hero.post-wrapper {

width: 787px;

body.feed-view .page_body.vertical-ads .centered {

width: 1225px;

body.feed-view .page_body.vertical-ads .centered .main {

width: auto;

body.feed-view .page_body.vertical-ads .blog-pager {

width: 802px;

.z {

left: 0; } } .z { left: 0;

.z {

left: 0; } @media (max-width: 1225px) {.z { left: 0;

html[dir=ltr] body.feed-view .centered .main-container, html[dir=rtl] body.feed-view


.centered .main-container {

float: none;

body.feed-view .hero.post-wrapper, body.feed-view .page_body.vertical-ads .hero.post-wrapper {


width: 681px;

html[dir=ltr] body.feed-view .post-wrapper, html[dir=rtl] body.feed-view .post-wrapper,


html[dir=ltr] body.feed-view .page_body.vertical-ads .post-wrapper, html[dir=rtl] body.feed-
view .page_body.vertical-ads .post-wrapper {

float: none;

body.feed-view .page_body .centered, body.feed-view .page_body.vertical-ads .centered {

padding-right: 0;

width: 681px;

body.feed-view .centered .main-container, body.feed-view .centered .main {

width: auto;

body.feed-view div.widget.Blog, body.feed-view .page_body .centered div.widget.FeaturedPost {

width: 401px;

body.feed-view .post-filter-message {

max-width: 100%;

.top-nav, .post-filter-message {

margin-top: 32px;

.widget.Header h1 {

font: $(blog.collapsed.title.font);

}
.blog-pager, .page_body.vertical-ads .blog-pager {

width: 385px;

.post-filter-message {

display: block;

.post-filter-message a {

display: block;

margin-top: 8px;

padding-left: 0;

body.feed-view .not-hero .post-title-container .post-title a .snippet-container {

height: auto;

body.feed-view .vertical-ad-container {

display: none;

body.feed-view .blog-posts .inline-ad {

display: block;

.z {

left: 0; } } .z { left: 0;

.z {

left: 0; } @media (max-width: 745px) {.z { left: 0;


}

body.feed-view .page_body .centered .centered-bottom, body.feed-view .page_body.vertical-ads


.centered .centered-bottom {

max-width: 600px;

width: auto;

body.feed-view .centered-bottom .post-wrapper, body.feed-view .centered-bottom .hero.post-


wrapper, body.feed-view .page_body.vertical-ads .centered-bottom .post-wrapper {

max-width: 600px;

width: auto;

body.feed-view .page_body .centered, body.feed-view .page_body.vertical-ads .centered {

max-width: 600px;

width: 100%;

body.feed-view .page_body .centered .main {

float: none;

body.feed-view .page_body #header, body.feed-view .page_body.vertical-ads #header {

width: auto;

body.feed-view .centered .main, body.feed-view .page_body.vertical-ads .centered .main {

width: 100%;

body.feed-view div.widget.Blog, body.feed-view .page_body .centered div.widget.FeaturedPost {

top: 50px;
width: 100%;

z-index: 6;

body.feed-view .main>.widget .title {

margin-left: 8px;

margin-right: 8px;

body.feed-view .blog-pager, body.feed-view .page_body.vertical-ads .blog-pager {

width: 100%;

body.feed-view .hero.post-wrapper {

background-color: $(posts.link.color);

border-radius: 0;

height: 416px;

body.feed-view .hero.post-wrapper .post {

bottom: 0;

box-sizing: border-box;

margin: 16px;

position: absolute;

width: calc(100% - 32px);

body.feed-view .hero.no-image.post-wrapper .post {

box-shadow: 0 0 16px rgba(0,0,0,.2);

padding-top: 120px;
top: 0;

body.feed-view .hero.no-image.post-wrapper .post-footer {

position: absolute;

bottom: 16px;

width: calc(100% - 32px);

.hero.post-wrapper h3 {

white-space: normal;

body.feed-view .post-wrapper h3, body.feed-view .post-wrapper:hover h3 {

width: auto;

html[dir=ltr] body.feed-view .hero.post-wrapper, html[dir=rtl] body.feed-view .hero.post-


wrapper {

margin: 0 0 15px;

html[dir=ltr] body.feed-view .post-wrapper, html[dir=rtl] body.feed-view .post-wrapper,


html[dir=ltr] body.feed-view .inline-ad, html[dir=rtl] body.feed-view .inline-ad {

margin: 0 8px 16px;

body.feed-view .post-labels {

display: none;

body.feed-view .post-wrapper .snippet-thumbnail {

background-size: cover;
display: block;

height: 184px;

margin: 0;

max-height: 184px;

width: 100%;

body.feed-view .post-wrapper.hero .snippet-thumbnail-container, body.feed-view .post-


wrapper.hero .snippet-thumbnail {

height: 416px;

max-height: 416px;

body.feed-view .header-author-byline {

display: none;

body.feed-view .hero .header-author-byline {

display: block;

.z {

left: 0; } } .z { left: 0;

body.item-view .page_body {

padding-top: 70px;

body.item-view .bg-photo {

-webkit-filter: blur(12px);

filter: blur(12px);
-webkit-transform: scale(1.05);

-ms-transform: scale(1.05);

transform: scale(1.05);

body.item-view .bg-photo-container+.centered .centered-bottom {

margin-top: 0;

body.item-view .bg-photo-container+.centered .centered-bottom .post-wrapper {

margin-top: -368px;

body.item-view .bg-photo-container+.centered-bottom {

margin-top: 0;

body.item-view .centered .centered-bottom {

margin-left: auto;

margin-right: auto;

padding-right: 0;

padding-top: 0;

body.item-view .inline-ad {

margin-bottom: 0;

margin-top: 30px;

padding-bottom: 16px;

body.item-view .post-wrapper {
border-radius: $(posts.border.radius) $(posts.border.radius) 0 0;

float: none;

height: auto;

margin: 0;

padding: 32px;

width: auto;

body.item-view .post-outer {

padding: 8px;

body.item-view .comments {

border-radius: 0 0 $(posts.border.radius) $(posts.border.radius);

color: $(posts.text.color);

margin: 0 8px 8px;

body.item-view .post-title {

font: $(posts.title.font);

body.item-view .post-header {

display: block;

width: auto;

body.item-view .post-share-buttons {

display: block;

margin-bottom: 40px;
margin-top: 20px;

body.item-view .post-footer a {

color: $(body.button.color);

font: $(body.button.font);

cursor: pointer;

text-transform: uppercase;

color: $(posts.link.color);

body.item-view .post-footer {

display: block;

body.item-view .post-footer-line {

border: none;

#comments {

background: $(posts.background.color);

border-top: 1px solid $(sidebar.separator.color);

margin-top: 0;

padding: 32px;

#comments h3.title, #comments .comment-form .title {

position: absolute;

clip: rect(1px,1px,1px,1px);

padding: 0;
border: 0;

height: 1px;

width: 1px;

overflow: hidden;

#comments .comment-form {

border-bottom: 1px solid $(sidebar.separator.color);

border-top: 1px solid $(sidebar.separator.color);

body.item-view #comments .comment-form h4 {

position: absolute;

clip: rect(1px,1px,1px,1px);

padding: 0;

border: 0;

height: 1px;

width: 1px;

overflow: hidden;

#comment-holder .continue {

display: none;

.z {

left: 0; } @media (max-width: 1328px) {.z { left: 0;

body.item-view .centered {
width: 100%;

html[dir=ltr] body.item-view .centered .main-container, html[dir=rtl] body.item-view


.centered .main-container {

float: none;

body.item-view .centered .main-container {

margin: 0 auto;

body.item-view div.section.main div.widget.PopularPosts {

margin: 0 2.5%;

position: relative;

top: 0;

width: 95%;

body.item-view .bg-photo-container+.centered .main {

margin-top: 0;

body.item-view div.widget.Blog {

margin: auto;

width: 100%;

body.item-view .page_body .centered .centered-bottom {

margin-left: auto;

margin-right: auto;

padding-right: 0;
padding-top: 0;

width: 100%;

body.item-view .post-share-buttons {

margin-bottom: 32px;

body.item-view .sidebar-container {

float: none;

margin: 0;

max-height: none;

max-width: none;

padding: 0 15px;

position: static;

width: 100%;

body.item-view .sidebar-container .section {

margin: 15px auto;

max-width: 480px;

body.item-view .sidebar-container .section .widget {

position: static;

width: 100%;

body.item-view .vertical-ad-container {

display: none;
}

body.item-view .blog-posts .inline-ad {

display: block;

.z {

left: 0; } } .z { left: 0;

.z {

left: 0; } @media (max-width: 745px) {.z { left: 0;

body.item-view.has-subscribe .bg-photo-container, body.item-view.has-subscribe .centered-


bottom {

padding-top: 88px;

body.item-view .bg-photo-container+.centered .centered-bottom .post-wrapper {

margin-top: -240px;

body.item-view .bg-photo-container+.centered .centered-bottom, body.item-view


.page_body.has-subscribe .bg-photo-container+.centered .centered-bottom {

margin-top: 0;

body.item-view .post-outer {

background: $(posts.background.color);

body.item-view .post-outer .post-wrapper {

padding: 16px;
}

body.item-view .comments {

margin: 0;

.z {

left: 0; } } .z { left: 0;

]]></b:skin>

<b:template-skin>

<![CDATA[

body#layout .hidden,

body#layout .invisible {

display: inherit;

body#layout .centered-bottom {

position: relative;

body#layout .section.featured-post,

body#layout .section.main,

body#layout .section.vertical-ad-container {

float: left;

width: 55%;

}
body#layout .sidebar-container {

display: inline-block;

width: 39%;

body#layout .centered-bottom:after {

clear: both;

content: "";

display: table;

body#layout .hamburger-menu,

body#layout .search {

display: none;

]]>

</b:template-skin>

<b:defaultmarkups>

<b:defaultmarkup type='Common'>

<b:includable id='standardPostImageStyle'>

<b:with value='"post-thumb-" + data:post.id' var='thumbClassName'>

<style>

.<data:thumbClassName/> {background-image:url(<b:eval
expr='resizeImage(data:post.featuredImage, 385, "385:184").cssEscaped'/>);}

</style>

</b:with>

</b:includable>
<b:includable id='feedPostImage'>

<div class='snippet-thumbnail-container'>

<div expr:class='"snippet-thumbnail " + data:thumbClassName'/>

</div>

</b:includable>

<b:includable id='widgetNotAvailableInPreview'>

<b:if cond='data:widget.type == "AdSense"'>

<div class='vertical-ad-placeholder'>

<span><b:message name='messages.adsGoHere'/></span>

</div>

<b:else/>

<b:include name='super.widgetNotAvailableInPreview'/>

</b:if>

</b:includable>

</b:defaultmarkup>

<b:defaultmarkup type='BlogSearch'>

<b:includable id='searchSubmit'>

<b:if cond='data:widget.sectionId == "search_top"'>

<label class='search-submit-container'>

<input type='submit'/>

<b:include data='{ iconClass: "touch-icon search-icon" }' name='searchIcon'/>

</label>

<b:else/>

<b:include name='super.searchSubmit'/>

</b:if>
</b:includable>

</b:defaultmarkup>

<b:defaultmarkup type='AdSense,Blog'>

<b:includable id='defaultAdUnit'>

<!-- Clear out style (need non-empty string) -->

<b:with value='"/* Done in css. */"' var='style'>

<b:include name='super.defaultAdUnit'/>

</b:with>

</b:includable>

</b:defaultmarkup>

<b:defaultmarkup type='Blog,FeaturedPost,PopularPosts'>

<b:includable id='commentsLink'>

<a class='comment-link' expr:href='data:post.commentsUrl ?: data:post.url'


expr:onclick='data:post.commentsUrlOnclick'>

<b:include name='commentIcon'/>

<span class='num_comments'>

<data:post.numberOfComments/>

</span>

</a>

</b:includable>

<b:includable id='snippetedPostThumbnail'>

<div class='item-thumbnail'>

<a expr:href='data:post.url'>

<b:include data='{ image: data:post.featuredImage,


imageSizes: [280,560,840,1120,1400] }' name='responsiveImage'/>

</a>
</div>

</b:includable>

</b:defaultmarkup>

<b:defaultmarkup type='Blog,FeaturedPost'>

<b:includable id='postShareButtons' var='post'>

<!-- We call super.postShareButtons from the migrated positions. -->

</b:includable>

<b:includable id='headerByline'>

<b:if cond='data:view.isSingleItem and data:widget.type == "Blog"'>

<b:include name='super.headerByline'/>

<b:else/>

<b:include data='{ items: ["author", "timestamp", "labels"] }'


name='headerBylineOverride'/>

</b:if>

<b:include cond='data:view.isSingleItem and data:widget.type == "Blog"'


data='{ shareButtonClass: "post-share-buttons-top", overridden: true }'
name='maybeAddShareButtons'/>

</b:includable>

<b:includable id='footerBylines'>

<!-- Set the calling parent element to be a container. -->

<b:class name='container'/>

<b:if cond='data:view.isSingleItem and data:widget.type == "Blog"'>

<b:include name='super.footerBylines'/>

<b:else/>

<b:include data='{ items: [["comments"]] }' name='footerBylinesOverride'/>

</b:if>
<b:include data='{ shareButtonClass: "post-share-buttons-bottom", overridden: true }'
name='maybeAddShareButtons'/>

</b:includable>

<b:includable id='postTitle' var='post'>

<!-- Snippetize the post title -->

<div class='post-title-container'>

<a expr:name='data:post.id'/>

<h3 class='post-title entry-title'>

<b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>

<a expr:href='data:post.link ?: data:post.url'>

<div class='snippet-container r-snippet-container'>

<div class='r-snippetized'>

<data:post.title/>

</div>

<b:if cond='data:post.title != ""'>

<div class='snippet-fade r-snippet-fade hidden'/>

</b:if>

</div>

</a>

<b:else/>

<data:post.title/>

</b:if>

</h3>

</div>

</b:includable>

<b:includable id='postLabels'>
<b:if cond='data:view.isMultipleItems'>

<div class='labels-outer-container'>

<div class='labels-container overflowable-container'>

<div class='labels-items overflowable-contents byline post-labels'>

<b:loop index='i' values='data:post.labels' var='label'>

<span class='overflowable-item'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</span>

</b:loop>

</div>

<span class='labels-more overflow-button hidden'>

<a expr:href='data:originalUrl'>+<span class='overflow-count'/></a>

</span>

</div>

</div>

<b:else/>

<b:include name='super.postLabels'/>

</b:if>

</b:includable>

<b:includable id='postWrapperClasses'>

<b:class cond='data:post.featuredImage' name='image'/>

<b:class cond='not data:post.featuredImage' name='no-image'/>


<b:class cond='data:post.labels and not data:post.labels.empty' name='has-labels'/>

</b:includable>

</b:defaultmarkup>

<b:defaultmarkup type='Blog'>

<b:includable id='commentFormIframeSrc' var='post'>

<b:with value='data:template.isAlternateRendering ? ("&skinvariant=" +


data:template.variant) : ""' var='variantParam'>

<a expr:href='data:post.commentFormIframeSrc + "&skin=emporio" + data:variantParam'


id='comment-editor-src'/>

</b:with>

</b:includable>

<b:includable id='commentForm' var='post'>

<b:with value='"90px"' var='cmtIframeInitialHeight'>

<b:include data='post' name='super.commentForm'/>

</b:with>

</b:includable>

<b:includable id='threadedCommentForm' var='post'>

<b:with value='"90px"' var='cmtIframeInitialHeight'>

<b:include data='post' name='super.threadedCommentForm'/>

</b:with>

</b:includable>

<b:includable id='feedLinks'>

<!-- Don't show feed links. -->

</b:includable>

<b:includable id='main'>

<b:include name='noContentPlaceholder'/>
<b:include name='super.main'/>

</b:includable>

<b:includable id='inlineAd' var='post'>

<!-- Cap the total number of ads (widgets and inline ads). -->

<b:include cond='data:post.adNumber lt 3' data='post' name='super.inlineAd'/>

</b:includable>

<b:includable id='postCommentsAndAd'>

<b:include cond='data:view.isSingleItem or data:widgets.FeaturedPost none


(w => w.sectionId == "featured_post" and w.postId == data:post.id)'
name='super.postCommentsAndAd'/>

</b:includable>

<b:includable id='post' var='post'>

<b:with value='"post-thumb-" + data:post.id' var='thumbClassName'>

<div expr:class='"post-wrapper not-hero post-" + data:post.id'>

<b:include name='postWrapperClasses'/>

<!-- Standard feed thumbs always added, as they're needed for mobile view. -->

<b:include cond='data:post.featuredImage and data:view.isMultipleItems'


name='standardPostImageStyle'/>

<b:include name='feedPostImage'/>

<div class='slide'>

<b:include data='post' name='super.post'/>

</div>

</div>

</b:with>

</b:includable>
<b:includable id='postBodySnippet' var='post'>

<div class='post-body entry-content' expr:id='"post-snippet-" + data:post.id'>

<b:if cond='data:post.featuredImage and not data:view.isMultipleItems'>

<b:with value='"post-" + data:post.id' var='className'>

<style>

.<data:className/> {background-image:url(<b:eval
expr='resizeImage(data:post.featuredImage, 385, "385:185").cssEscaped'/>);}

@media (max-width: 285px) { .<data:className/> {background-image:url(<b:eval


expr='resizeImage(data:post.featuredImage, 285, "285:185").cssEscaped'/>);} }

@media (max-width: 385px) and (min-width: 286px) { .<data:className/>


{background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 385,
"385:185").cssEscaped'/>);} }

@media (max-width: 485px) and (min-width: 386px) { .<data:className/>


{background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 485,
"485:185").cssEscaped'/>);} }

@media (max-width: 745px) and (min-width: 486px) { .<data:className/>


{background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 585,
"585:185").cssEscaped'/>);} }

</style>

<div class='snippet-thumbnail-container'>

<div expr:class='"snippet-thumbnail " + data:className'/>

</div>

</b:with>

</b:if>

<div style='clear: both;'/>

</div>

</b:includable>

<b:includable id='postJumpLink' var='post'>

<b:comment>We don't show 'read more' links in Emporio.</b:comment>


</b:includable>

<b:includable id='previousPageLink'>

<b:comment>We don't show previeus page links in Emporio.</b:comment>

</b:includable>

<b:includable id='homePageLink'>

<b:comment>We don't show home page links in Emporio.</b:comment>

</b:includable>

<b:includable id='nextPageLink'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl'


expr:title='data:messages.morePosts'>

<data:messages.morePosts/>

</a>

</b:includable>

</b:defaultmarkup>

<b:defaultmarkup type='BlogArchive'>

<b:includable id='main' var='this'>

<details class='collapsible extendable'>

<b:attr cond='data:view.isArchive' name='open' value='open'/>

<b:with value='true' var='renderAsDetails'>

<b:with value='data:messages.archive' var='defaultTitle'>

<b:include name='super.main'/>

</b:with>

</b:with>

</details>

</b:includable>

<b:includable id='flat'>
<b:include data='{ buttonClass: "flat-button", items:
data:this.data, itemSet: "data", itemsMarkup: "super.flat"
}' name='extendableItems'/>

</b:includable>

<b:includable id='hierarchy'>

<b:include data='{ buttonClass: "flat-button", limit: 1,


items: data:this.data, itemSet: "data", itemsMarkup:
"super.hierarchy" }' name='extendableItems'/>

</b:includable>

</b:defaultmarkup>

<b:defaultmarkup type='Label'>

<b:includable id='main' var='this'>

<details class='collapsible extendable'>

<b:attr cond='data:view.isLabelSearch' name='open' value='open'/>

<b:with value='true' var='renderAsDetails'>

<b:with value='data:messages.labels' var='defaultTitle'>

<b:include name='super.main'/>

</b:with>

</b:with>

</details>

</b:includable>

<b:includable id='list'>

<b:include data='{ buttonClass: "flat-button", items:


data:this.labels, itemSet: "labels", itemsMarkup: "super.list"
}' name='extendableItems'/>

</b:includable>

<b:includable id='cloud'>

<b:include data='{ buttonClass: "flat-button", items:


data:this.labels, itemSet: "labels", itemsMarkup: "super.cloud"
}' name='extendableItems'/>

</b:includable>

</b:defaultmarkup>

<b:defaultmarkup type='FeaturedPost'>

<b:includable id='snippetedPostContent'>

<b:if cond='data:widget.sectionId != "featured_post"'>

<b:include name='super.snippetedPostContent'/>

<b:else/>

<b:with value='"post-thumb-" + data:post.id' var='thumbClassName'>

<b:if cond='data:post.featuredImage'>

<style>

@media (min-width: 746px) { .hero .<data:thumbClassName/> {background-


image:url(<b:eval expr='resizeImage(data:post.featuredImage, 800, "800:272").cssEscaped'/>);} }

@media (min-width: 1545px) { .hero .<data:thumbClassName/> {background-


image:url(<b:eval expr='resizeImage(data:post.featuredImage, 1185,
"1185:272").cssEscaped'/>);} }

@media (max-width: 400px) { .hero .<data:thumbClassName/> {background-


image:url(<b:eval expr='resizeImage(data:post.featuredImage, 400, "1:1").cssEscaped'/>); } }

@media (min-width: 401px) and (max-width: 745px) { .hero


.<data:thumbClassName/> {background-image:url(<b:eval
expr='resizeImage(data:post.featuredImage, 745, "745:400").cssEscaped'/>); } }

</style>

</b:if>

<div expr:class='"post-wrapper hero post-" + data:post.id'>

<b:include name='postWrapperClasses'/>

<b:include name='feedPostImage'/>
<div class='slide'>

<div class='post hentry'>

<b:include cond='data:postDisplay.showTitle' data='post' name='postTitle'/>

<b:include name='headerByline'/>

<b:include cond='data:postDisplay.showSnippet' data='post' name='postSnippet'/>

<div class='post-footer'>

<b:include name='footerBylines'/>

</div>

</div>

</div>

</div>

</b:with>

</b:if>

</b:includable>

</b:defaultmarkup>

<b:defaultmarkup type='Header'>

<b:includable id='description'>

<!-- Don't show description on the item page -->

<b:include cond='not data:view.isSingleItem' name='super.description'/>

</b:includable>

<b:includable id='image'>

<b:include name='super.image'/>

<!-- If we are replacing the title, force it to render anyway, and it'll be hidden in CSS. -->

<b:include cond='data:this.imagePlacement == "REPLACE"' name='title'/>


</b:includable>

<b:includable id='title'>

<div>

<b:class cond='data:this.imagePlacement == "REPLACE"' name='replaced'/>

<b:include name='super.title'/>

</div>

</b:includable>

</b:defaultmarkup>

<b:defaultmarkup type='PageList'>

<b:includable id='content'>

<div class='widget-content'>

<b:include cond='data:widget.sectionId == "page_list_top"'


name='overflowablePageList'/>

<b:include cond='data:widget.sectionId != "page_list_top"' name='pageList'/>

</div>

</b:includable>

</b:defaultmarkup>

<b:defaultmarkup type='PopularPosts'>

<b:includable id='snippetedPostContent'>

<b:comment>Move the thumbnail outside of the body and above the title</b:comment>

<b:include cond='data:postDisplay.showFeaturedImage and


data:post.featuredImage.isResizable' data='post' name='snippetedPostThumbnail'/>

<b:include data='post' name='snippetedPostTitle'/>

<b:include data='post' name='itemBody'/>

</b:includable>

<b:includable id='itemBody' var='post'>


<div class='item-content'>

<b:with value='"popular-posts"' var='snippetPrefix'>

<b:include cond='data:postDisplay.showSnippet' data='post' name='postSnippet'/>

</b:with>

</div>

</b:includable>

<b:includable id='main'>

<b:comment>Default the title to 'Popular posts from this blog'.</b:comment>

<b:with value='data:messages.popularPosts' var='defaultTitle'>

<b:include name='super.main'/>

</b:with>

</b:includable>

</b:defaultmarkup>

<b:defaultmarkup type='Profile'>

<b:includable id='main'>

<b:include name='content'/>

</b:includable>

<b:includable id='defaultProfileImage'>

<div class='default-avatar-wrapper'>

<b:include data='{ iconClass: "avatar-icon" }' name='defaultAvatarIcon'/>

</div>

</b:includable>

<b:includable id='viewProfileLink'>

<!-- Change single profile link message to 'Visit profile' -->

<a class='profile-link' expr:href='data:userUrl'


rel='author'><data:messages.visitProfile/></a>
</b:includable>

<b:includable id='teamProfile'>

<div class='extendable'>

<b:include data='{ items: data:authors, itemSet:


"authors", itemsMarkup: "super.teamProfile", limit: 4
}' name='extendableItems'/>

</div>

</b:includable>

<b:includable id='teamProfileLink'>

<!-- Add an extra 'Visit profile' link -->

<a class='profile-link g-profile' expr:href='data:author.userUrl'>

<b:include name='profileImage'/>

<div class='profile-name-container'>

<span class='profile-name'><data:author.display-name/></span>

<data:messages.visitProfile/>

</div>

</a>

</b:includable>

</b:defaultmarkup>

</b:defaultmarkups>

<b:if cond='data:blog.adsenseClientId and !data:widgets.AdSense.empty'>

<script async='async' src='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'/>

</b:if>

<script async='async' src='//www.gstatic.com/external_hosted/clipboardjs/clipboard.min.js'/>


</head>

<body>

<b:class cond='data:view.isPreview' name='preview'/>

<b:class cond='data:view.isMultipleItems' name='feed-view'/>

<b:class cond='data:view.isSingleItem' name='item-view'/>

<b:class cond='data:view.isArchive' name='archive-view'/>

<b:class cond='data:view.isLabelSearch' name='label-view'/>

<b:class cond='data:view.isSearch and !data:view.isLabelSearch' name='search-view'/>

<b:class name='version-1-0-0'/>

<b:include name='skipNavigation'/>

<div class='page'>

<b:with value='data:widgets.AdSense any (w => w.sectionId == "ads")' var='hasVerticalAds'>

<div class='page_body'>

<b:class cond='data:hasVerticalAds' name='vertical-ads'/>

<b:if cond='data:view.isSingleItem'>

<b:if cond='data:widgets.Blog.first.posts.first.featuredImage'>

<b:include data='{ image:


data:widgets.Blog.first.posts.first.featuredImage, selector: ".bg-photo"
}' name='responsiveImageStyle'/>

<div class='bg-photo-container'>

<div class='bg-photo'/>

</div>

</b:if>
</b:if>

<div class='centered'>

<b:if cond='not data:view.isSingleItem'>

<div class='centered-top-placeholder'/>

</b:if>

<header class='centered-top-container' role='banner'>

<b:class cond='data:view.isSingleItem' name='sticky'/>

<div class='centered-top'>

<b:class cond='data:view.isSearch and data:view.search.query' name='search-


focused'/>

<b:if cond='data:view.isSingleItem'>

<a class='return_link' expr:href='data:blog.homepageUrl'>

<b:include data='{ iconClass: "touch-icon back-button rtl-reversible-icon" }'


name='backArrowIcon'/>

</a>

<b:else/>

<div class='hamburger-section'>

<b:include data='{ iconClass: "touch-icon hamburger-menu" }' name='menuIcon'/>

</div>

</b:if>

<div class='blog-name'>

<b:section id='header' name='Header' showaddelement='false'>

<b:widget id='Header1' locked='true' title='one heart (Header)' type='Header'


visible='true'>

<b:widget-settings>
<b:widget-setting name='displayUrl'/>

<b:widget-setting name='displayHeight'>0</b:widget-setting>

<b:widget-setting name='sectionWidth'>-1</b:widget-setting>

<b:widget-setting name='useImage'>false</b:widget-setting>

<b:widget-setting name='shrinkToFit'>false</b:widget-setting>

<b:widget-setting name='imagePlacement'>BEHIND</b:widget-setting>

<b:widget-setting name='displayWidth'>0</b:widget-setting>

</b:widget-settings>

<b:includable id='main' var='this'>

<div class='header-widget'>

<b:include cond='data:imagePlacement in {"REPLACE", "BEFORE_DESCRIPTION"}'


name='image'/>

<b:include cond='data:imagePlacement not in {"REPLACE", "BEFORE_DESCRIPTION"}'


name='title'/>

<b:include cond='data:imagePlacement != "REPLACE"' name='description'/>

</div>

<b:include cond='data:imagePlacement == "BEHIND"' name='behindImageStyle'/>

</b:includable>

<b:includable id='behindImageStyle'>

<b:if cond='data:sourceUrl'>

<b:include cond='data:this.image' data='{ image: data:this.image,


selector: ".header-widget" }' name='responsiveImageStyle'/>

<style type='text/css'>

.header-widget {

background-position: <data:backgroundPositionStyleStr/>;

background-repeat: no-repeat;

}
</style>

</b:if>

</b:includable>

<b:includable id='description'>

<!-- Don't show description on the item page -->

<b:include cond='not data:view.isSingleItem' name='super.description'/>

</b:includable>

<b:includable id='image'>

<b:include name='super.image'/>

<!-- If we are replacing the title, force it to render anyway, and it'll be hidden in CSS. -->

<b:include cond='data:this.imagePlacement == "REPLACE"' name='title'/>

</b:includable>

<b:includable id='title'>

<div>

<b:class cond='data:this.imagePlacement == "REPLACE"' name='replaced'/>

<b:include name='super.title'/>

</div>

</b:includable>

</b:widget>

</b:section>

</div>

<b:if cond='data:view.isLayoutMode or data:widgets any (w => w.sectionId == "search_top")'>

<div class='search'>

<b:class cond='data:view.isSearch and data:view.search.query' name='focused'/>

<button class='search-expand touch-icon-button' expr:aria-


label='data:messages.search.escaped'>
<div class='search-expand-text'>

<data:messages.search/></div>

<b:include data='{ iconClass: "touch-icon search-expand-icon" }' name='searchIcon'/>

</button>

<b:section id='search_top' name='Search (Top)' showaddelement='false'>

<b:widget id='BlogSearch1' locked='true' title='Search This Blog' type='BlogSearch'


visible='true'>

<b:includable id='main'>

<b:include name='widget-title'/>

<b:include name='content'/>

</b:includable>

<b:includable id='content'>

<div class='widget-content' role='search'>

<b:include name='searchForm'/>

</div>

</b:includable>

<b:includable id='searchForm'>

<form expr:action='data:blog.searchUrl' target='_self'>

<b:include name='urlParamsAsFormInput'/>

<div class='search-input'>

<input autocomplete='off' expr:aria-label='data:messages.searchThisBlog'


expr:placeholder='data:messages.searchThisBlog' expr:value='data:view.isSearch ?
data:view.search.query.escaped : ""' name='q'/>

</div>

<b:include name='searchSubmit'/>

</form>

</b:includable>
<b:includable id='searchSubmit'>

<b:if cond='data:widget.sectionId == "search_top"'>

<label class='search-submit-container'>

<input type='submit'/>

<b:include data='{ iconClass: "touch-icon search-icon" }' name='searchIcon'/>

</label>

<b:else/>

<b:include name='super.searchSubmit'/>

</b:if>

</b:includable>

</b:widget>

</b:section>

</div>

</b:if>

<b:if cond='data:view.isLayoutMode or data:widgets any (w =>


w.sectionId == "subscription")'>

<section class='subscribe-section-container'>

<button class='subscribe-button'><b:eval expr='data:messages.subscribe'/></button>

<div class='subscribe-popup-container'>

<div aria-labelledby='subscribe-title' class='subscribe-popup dialog hidden'


role='dialog' tabindex='-1'>

<div role='document'>

<h3 class='subscribe-title' id='subscribe-title'>

<b:eval expr='data:messages.subscribeToThisBlog'/></h3>

<b:section id='subscription' name='Subscription' showaddelement='false'>


<b:widget id='FollowByEmail1' locked='true' title='Follow by Email'
type='FollowByEmail' visible='false'>

<b:includable id='main'>

<b:include name='widget-title'/>

<b:include name='content'/>

</b:includable>

<b:includable id='content'>

<div class='widget-content'>

<div class='follow-by-email-inner'>

<form action='https://feedburner.google.com/fb/a/mailverify'
expr:onsubmit='"window.open(\"https://feedburner.google.com/fb/a/mailverify?uri=" +
data:feedPath + "\", \"popupwindow\", \"scrollbars=yes,width=550,height=520\"); return true"'
method='post' target='popupwindow'>

<input autocomplete='off' class='follow-by-email-address'


expr:placeholder='data:messages.emailAddress' name='email' type='email'/>

<input class='follow-by-email-submit' disabled='true'


expr:value='data:messages.getEmailNotifications' type='submit'/>

<input expr:value='data:feedPath' name='uri' type='hidden'/>

<input name='loc' type='hidden' value='en_US'/>

</form>

</div>

</div>

</b:includable>

</b:widget>

</b:section>

</div>

</div>

</div>
</section>

</b:if>

<b:if cond='data:view.isLayoutMode or data:view.isMultipleItems'>

<nav class='top-nav' role='navigation'>

<b:section id='page_list_top' name='Page List (Top)' showaddelement='false'>

<b:widget id='PageList1' locked='true' title='' type='PageList' visible='false'>

<b:widget-settings>

<b:widget-setting name='pageListJson'><![CDATA[{'home': {'href':


'https://onepost11.blogspot.com/', 'title': 'Home', 'position': 0}}]]></b:widget-setting>

<b:widget-setting name='homeTitle'>Home</b:widget-setting>

</b:widget-settings>

<b:includable id='main'>

<b:include name='widget-title'/>

<b:include name='content'/>

</b:includable>

<b:includable id='content'>

<div class='widget-content'>

<b:include cond='data:widget.sectionId == "page_list_top"'


name='overflowablePageList'/>

<b:include cond='data:widget.sectionId != "page_list_top"' name='pageList'/>

</div>

</b:includable>

<b:includable id='overflowButton'>

<b:include name='verticalMoreIcon'/>

</b:includable>
<b:includable id='overflowablePageList'>

<div class='overflowable-container'>

<div class='overflowable-contents'>

<div class='container'>

<b:with value='true' var='overflow'>

<b:with value='"tabs"' var='pageListClass'>

<b:include name='pageList'/>

</b:with>

</b:with>

</div>

</div>

<div class='overflow-button hidden'>

<b:include name='overflowButton'/>

</div>

</div>

</b:includable>

<b:includable id='pageLink'>

<li>

<b:class cond='data:overflow' name='overflowable-item'/>

<b:class cond='data:link.isCurrentPage' name='selected'/>

<a expr:href='data:link.href'><data:link.title/></a>

</li>

</b:includable>

<b:includable id='pageList'>
<ul>

<b:class cond='data:pageListClass' expr:name='data:pageListClass'/>

<b:loop values='data:links' var='link'>

<b:include name='pageLink'/>

</b:loop>

</ul>

</b:includable>

</b:widget>

</b:section>

</nav>

</b:if>

</div>

</header>

<div class='centered-bottom'>

<b:if cond='data:view.isArchive or (data:view.isSearch and


data:view.search.resultsMessage)'>

<div class='post-filter-message'>

<div>

<b:if cond='data:view.isArchive'>

<data:view.archive.rangeMessage/>

<b:elseif cond='data:view.isSearch and data:view.search.resultsMessage'/>

<data:view.search.resultsMessageHtml/>

</b:if>

</div>

<div>

<a expr:href='data:blog.homepageUrl'><data:messages.viewAll/></a>
</div>

</div>

</b:if>

<main class='main-container' id='main' role='main' tabindex='-1'>

<b:if cond='data:view.isMultipleItems'>

<h2 class='main-heading'>

<data:messages.posts/></h2>

</b:if>

<b:section class='featured-post' id='featured_post' name='Featured Post'


showaddelement='false'>

<b:widget cond='data:view.isHomepage' id='FeaturedPost1' locked='true' title=''


type='FeaturedPost' visible='true'>

<b:widget-settings>

<b:widget-setting name='showSnippet'>false</b:widget-setting>

<b:widget-setting name='showPostTitle'>true</b:widget-setting>

<b:widget-setting name='showFirstImage'>true</b:widget-setting>

<b:widget-setting name='useMostRecentPost'>true</b:widget-setting>

</b:widget-settings>

<b:includable id='main' var='this'>

<b:include name='widget-title'/>

<div class='widget-content'>

<b:include name='snippetedPosts'/>

</div>

</b:includable>
<b:includable id='commentsLink'>

<a class='comment-link' expr:href='data:post.commentsUrl ?: data:post.url'


expr:onclick='data:post.commentsUrlOnclick'>

<b:include name='commentIcon'/>

<span class='num_comments'>

<data:post.numberOfComments/>

</span>

</a>

</b:includable>

<b:includable id='footerBylines'>

<!-- Set the calling parent element to be a container. -->

<b:class name='container'/>

<b:if cond='data:view.isSingleItem and data:widget.type == "Blog"'>

<b:include name='super.footerBylines'/>

<b:else/>

<b:include data='{ items: [["comments"]] }' name='footerBylinesOverride'/>

</b:if>

<b:include data='{ shareButtonClass: "post-share-buttons-bottom", overridden: true }'


name='maybeAddShareButtons'/>

</b:includable>

<b:includable id='headerByline'>

<b:if cond='data:view.isSingleItem and data:widget.type == "Blog"'>

<b:include name='super.headerByline'/>

<b:else/>

<b:include data='{ items: ["author", "timestamp", "labels"] }'


name='headerBylineOverride'/>
</b:if>

<b:include cond='data:view.isSingleItem and data:widget.type == "Blog"'


data='{ shareButtonClass: "post-share-buttons-top", overridden: true }'
name='maybeAddShareButtons'/>

</b:includable>

<b:includable id='postLabels'>

<b:if cond='data:view.isMultipleItems'>

<div class='labels-outer-container'>

<div class='labels-container overflowable-container'>

<div class='labels-items overflowable-contents byline post-labels'>

<b:loop index='i' values='data:post.labels' var='label'>

<span class='overflowable-item'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>

</span>

</b:loop>

</div>

<span class='labels-more overflow-button hidden'>

<a expr:href='data:originalUrl'>+<span class='overflow-count'/></a>

</span>

</div>

</div>

<b:else/>

<b:include name='super.postLabels'/>
</b:if>

</b:includable>

<b:includable id='postShareButtons' var='post'>

<!-- We call super.postShareButtons from the migrated positions. -->

</b:includable>

<b:includable id='postTitle' var='post'>

<!-- Snippetize the post title -->

<div class='post-title-container'>

<a expr:name='data:post.id'/>

<h3 class='post-title entry-title'>

<b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>

<a expr:href='data:post.link ?: data:post.url'>

<div class='snippet-container r-snippet-container'>

<div class='r-snippetized'>

<data:post.title/>

</div>

<b:if cond='data:post.title != ""'>

<div class='snippet-fade r-snippet-fade hidden'/>

</b:if>

</div>

</a>

<b:else/>

<data:post.title/>

</b:if>

</h3>
</div>

</b:includable>

<b:includable id='postWrapperClasses'>

<b:class cond='data:post.featuredImage' name='image'/>

<b:class cond='not data:post.featuredImage' name='no-image'/>

<b:class cond='data:post.labels and not data:post.labels.empty' name='has-labels'/>

</b:includable>

<b:includable id='snippetedPostContent'>

<b:if cond='data:widget.sectionId != "featured_post"'>

<b:include name='super.snippetedPostContent'/>

<b:else/>

<b:with value='"post-thumb-" + data:post.id' var='thumbClassName'>

<b:if cond='data:post.featuredImage'>

<style>

@media (min-width: 746px) { .hero .<data:thumbClassName/> {background-


image:url(<b:eval expr='resizeImage(data:post.featuredImage, 800, "800:272").cssEscaped'/>);} }

@media (min-width: 1545px) { .hero .<data:thumbClassName/> {background-


image:url(<b:eval expr='resizeImage(data:post.featuredImage, 1185,
"1185:272").cssEscaped'/>);} }

@media (max-width: 400px) { .hero .<data:thumbClassName/> {background-


image:url(<b:eval expr='resizeImage(data:post.featuredImage, 400, "1:1").cssEscaped'/>); } }

@media (min-width: 401px) and (max-width: 745px) { .hero


.<data:thumbClassName/> {background-image:url(<b:eval
expr='resizeImage(data:post.featuredImage, 745, "745:400").cssEscaped'/>); } }

</style>

</b:if>

<div expr:class='"post-wrapper hero post-" + data:post.id'>


<b:include name='postWrapperClasses'/>

<b:include name='feedPostImage'/>

<div class='slide'>

<div class='post hentry'>

<b:include cond='data:postDisplay.showTitle' data='post' name='postTitle'/>

<b:include name='headerByline'/>

<b:include cond='data:postDisplay.showSnippet' data='post' name='postSnippet'/>

<div class='post-footer'>

<b:include name='footerBylines'/>

</div>

</div>

</div>

</div>

</b:with>

</b:if>

</b:includable>

<b:includable id='snippetedPostThumbnail'>

<div class='item-thumbnail'>

<a expr:href='data:post.url'>

<b:include data='{ image: data:post.featuredImage,


imageSizes: [280,560,840,1120,1400] }' name='responsiveImage'/>

</a>

</div>

</b:includable>

</b:widget>
</b:section>

<b:section class='main' id='page_body' name='Page Body' showaddelement='false'>

<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' visible='true'>

<b:widget-settings>

<b:widget-setting name='showDateHeader'>false</b:widget-setting>

<b:widget-setting name='style.textcolor'>#263238</b:widget-setting>

<b:widget-setting name='showShareButtons'>true</b:widget-setting>

<b:widget-setting name='showCommentLink'>true</b:widget-setting>

<b:widget-setting name='style.urlcolor'>#424242</b:widget-setting>

<b:widget-setting name='showAuthor'>false</b:widget-setting>

<b:widget-setting name='style.linkcolor'>#607d8b</b:widget-setting>

<b:widget-setting name='style.unittype'>TextAndImage</b:widget-setting>

<b:widget-setting name='style.bgcolor'>#ffffff</b:widget-setting>

<b:widget-setting name='timestampLabel'/>

<b:widget-setting name='showAuthorProfile'>false</b:widget-setting>

<b:widget-setting name='style.layout'>1x1</b:widget-setting>

<b:widget-setting name='showLabels'>true</b:widget-setting>

<b:widget-setting name='showLocation'>true</b:widget-setting>

<b:widget-setting name='postLabelsLabel'/>

<b:widget-setting name='showTimestamp'>true</b:widget-setting>

<b:widget-setting name='postsPerAd'>1</b:widget-setting>

<b:widget-setting name='showBacklinks'>false</b:widget-setting>

<b:widget-setting name='style.bordercolor'>#ffffff</b:widget-setting>

<b:widget-setting name='showInlineAds'>false</b:widget-setting>
<b:widget-setting name='showReactions'>false</b:widget-setting>

</b:widget-settings>

<b:includable id='main'>

<b:include name='noContentPlaceholder'/>

<b:include name='super.main'/>

</b:includable>

<b:includable id='aboutPostAuthor'>

<div class='author-name'>

<a class='g-profile' expr:href='data:post.author.profileUrl' rel='author' title='author profile'>

<span>

<data:post.author.name/>

</span>

</a>

</div>

<div>

<span class='author-desc'>

<data:post.author.aboutMe/>

</span>

</div>

</b:includable>

<b:includable id='addComments'>

<a expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick'>

<b:message name='messages.postAComment'/>

</a>

</b:includable>
<b:includable id='commentAuthorAvatar'>

<div class='avatar-image-container'>

<img class='author-avatar' expr:src='data:comment.authorAvatarSrc' height='35' width='35'/>

</div>

</b:includable>

<b:includable id='commentDeleteIcon' var='comment'>

<span expr:class='"item-control " + data:comment.adminClass'>

<b:if cond='data:showCmtPopup'>

<div class='goog-toggle-button'>

<div class='goog-inline-block comment-action-icon'/>

</div>

<b:else/>

<a class='comment-delete' expr:href='data:comment.deleteUrl'


expr:title='data:messages.deleteComment'>

<img src='https://resources.blogblog.com/img/icon_delete13.gif'/>

</a>

</b:if>

</span>

</b:includable>

<b:includable id='commentForm' var='post'>

<b:with value='"90px"' var='cmtIframeInitialHeight'>

<b:include data='post' name='super.commentForm'/>

</b:with>

</b:includable>

<b:includable id='commentFormIframeSrc' var='post'>

<b:with value='data:template.isAlternateRendering ? ("&skinvariant=" +


data:template.variant) : ""' var='variantParam'>

<a expr:href='data:post.commentFormIframeSrc + "&skin=emporio" + data:variantParam'


id='comment-editor-src'/>

</b:with>

</b:includable>

<b:includable id='commentItem' var='comment'>

<div class='comment' expr:id='"c" + data:comment.id'>

<b:include cond='data:blog.enabledCommentProfileImages' name='commentAuthorAvatar'/>

<div class='comment-block'>

<div class='comment-author'>

<b:if cond='data:comment.authorUrl'>

<b:message name='messages.authorSaidWithLink'>

<b:param expr:value='data:comment.author' name='authorName'/>

<b:param expr:value='data:comment.authorUrl' name='authorUrl'/>

</b:message>

<b:else/>

<b:message name='messages.authorSaid'>

<b:param expr:value='data:comment.author' name='authorName'/>

</b:message>

</b:if>

</div>

<div expr:class='"comment-body" + (data:comment.isDeleted ? " deleted" : "")'>

<data:comment.body/>

</div>

<div class='comment-footer'>
<span class='comment-timestamp'>

<a expr:href='data:comment.url' title='comment permalink'>

<data:comment.timestamp/>

</a>

<b:include data='comment' name='commentDeleteIcon'/>

</span>

</div>

</div>

</div>

</b:includable>

<b:includable id='commentList' var='comments'>

<div id='comments-block'>

<b:loop values='data:comments' var='comment'>

<b:include data='comment' name='commentItem'/>

</b:loop>

</div>

</b:includable>

<b:includable id='commentPicker' var='post'>

<b:if cond='data:post.commentSource == 1'>

<b:include data='post' name='iframeComments'/>

<b:elseif cond='data:post.showThreadedComments'/>

<b:include data='post' name='threadedComments'/>

<b:else/>

<b:include data='post' name='comments'/>

</b:if>
</b:includable>

<b:includable id='comments' var='post'>

<section expr:class='"comments" + (data:post.embedCommentForm ? " embed" : "")'


expr:data-num-comments='data:post.numberOfComments' id='comments'>

<a name='comments'/>

<b:if cond='data:post.allowComments'>

<b:include name='commentsTitle'/>

<div expr:id='data:widget.instanceId + "_comments-block-wrapper"'>

<b:include cond='data:post.comments' data='post.comments' name='commentList'/>

</div>

<b:if cond='data:post.commentPagingRequired'>

<div class='paging-control-container'>

<b:if cond='data:post.hasOlderLinks'>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>

<data:messages.oldest/>

</a>

<a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>

<data:messages.older/>

</a>

</b:if>

<span class='comment-range-text'>

<data:post.commentRangeText/>

</span>
<b:if cond='data:post.hasNewerLinks'>

<a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>

<data:messages.newer/>

</a>

<a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>

<data:messages.newest/>

</a>

</b:if>

</div>

</b:if>

<div class='footer'>

<b:if cond='data:post.embedCommentForm'>

<b:if cond='data:post.allowNewComments'>

<b:include data='post' name='commentForm'/>

<b:else/>

<data:post.noNewCommentsText/>

</b:if>

<b:else/>

<b:if cond='data:post.allowComments'>

<b:include data='post' name='addComments'/>

</b:if>

</b:if>

</div>
</b:if>

<b:if cond='data:showCmtPopup'>

<div id='comment-popup'>

<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-


actions' scrolling='no'>

</iframe>

</div>

</b:if>

</section>

</b:includable>

<b:includable id='commentsLink'>

<a class='comment-link' expr:href='data:post.commentsUrl ?: data:post.url'


expr:onclick='data:post.commentsUrlOnclick'>

<b:include name='commentIcon'/>

<span class='num_comments'>

<data:post.numberOfComments/>

</span>

</a>

</b:includable>

<b:includable id='commentsTitle'>

<h3 class='title'>

<data:messages.comments/></h3>

</b:includable>

<b:includable id='defaultAdUnit'>

<!-- Clear out style (need non-empty string) -->

<b:with value='"/* Done in css. */"' var='style'>


<b:include name='super.defaultAdUnit'/>

</b:with>

</b:includable>

<b:includable id='feedLinks'>

<!-- Don't show feed links. -->

</b:includable>

<b:includable id='feedLinksBody' var='links'>

<div class='feed-links'>

<data:messages.subscribeTo/>

<b:loop values='data:links' var='f'>

<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType'


target='_blank'><data:f.name/> (<data:f.feedType/>)</a>

</b:loop>

</div>

</b:includable>

<b:includable id='footerBylines'>

<!-- Set the calling parent element to be a container. -->

<b:class name='container'/>

<b:if cond='data:view.isSingleItem and data:widget.type == "Blog"'>

<b:include name='super.footerBylines'/>

<b:else/>

<b:include data='{ items: [["comments"]] }' name='footerBylinesOverride'/>

</b:if>

<b:include data='{ shareButtonClass: "post-share-buttons-bottom", overridden: true }'


name='maybeAddShareButtons'/>
</b:includable>

<b:includable id='headerByline'>

<b:if cond='data:view.isSingleItem and data:widget.type == "Blog"'>

<b:include name='super.headerByline'/>

<b:else/>

<b:include data='{ items: ["author", "timestamp", "labels"] }'


name='headerBylineOverride'/>

</b:if>

<b:include cond='data:view.isSingleItem and data:widget.type == "Blog"'


data='{ shareButtonClass: "post-share-buttons-top", overridden: true }'
name='maybeAddShareButtons'/>

</b:includable>

<b:includable id='homePageLink'>

<b:comment>We don't show home page links in Emporio.</b:comment>

</b:includable>

<b:includable id='iframeComments' var='post'>

<b:if cond='data:post.allowIframeComments'>

<script expr:src='data:post.iframeCommentSrc' type='text/javascript'/>

<div class='cmt_iframe_holder' expr:data-href='data:post.url.canonical' expr:data-


viewtype='data:post.viewType'/>

<b:if cond='!data:post.embedCommentForm'>

<b:include data='post' name='commentsLink'/>

</b:if>

</b:if>

</b:includable>

<b:includable id='inlineAd' var='post'>


<!-- Cap the total number of ads (widgets and inline ads). -->

<b:include cond='data:post.adNumber lt 3' data='post' name='super.inlineAd'/>

</b:includable>

<b:includable id='nextPageLink'>

<a class='blog-pager-older-link' expr:href='data:olderPageUrl'


expr:title='data:messages.morePosts'>

<data:messages.morePosts/>

</a>

</b:includable>

<b:includable id='post' var='post'>

<b:with value='"post-thumb-" + data:post.id' var='thumbClassName'>

<div expr:class='"post-wrapper not-hero post-" + data:post.id'>

<b:include name='postWrapperClasses'/>

<!-- Standard feed thumbs always added, as they're needed for mobile view. -->

<b:include cond='data:post.featuredImage and data:view.isMultipleItems'


name='standardPostImageStyle'/>

<b:include name='feedPostImage'/>

<div class='slide'>

<b:include data='post' name='super.post'/>

</div>

</div>

</b:with>

</b:includable>

<b:includable id='postBody' var='post'>


<!-- If metaDescription is empty, use the post body as the schema.org description too, for
G+/FB snippeting. -->

<div class='post-body entry-content float-container' expr:id='"post-body-" + data:post.id'>

<data:post.body/>

</div>

</b:includable>

<b:includable id='postBodySnippet' var='post'>

<div class='post-body entry-content' expr:id='"post-snippet-" + data:post.id'>

<b:if cond='data:post.featuredImage and not data:view.isMultipleItems'>

<b:with value='"post-" + data:post.id' var='className'>

<style>

.<data:className/> {background-image:url(<b:eval
expr='resizeImage(data:post.featuredImage, 385, "385:185").cssEscaped'/>);}

@media (max-width: 285px) { .<data:className/> {background-image:url(<b:eval


expr='resizeImage(data:post.featuredImage, 285, "285:185").cssEscaped'/>);} }

@media (max-width: 385px) and (min-width: 286px) { .<data:className/>


{background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 385,
"385:185").cssEscaped'/>);} }

@media (max-width: 485px) and (min-width: 386px) { .<data:className/>


{background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 485,
"485:185").cssEscaped'/>);} }

@media (max-width: 745px) and (min-width: 486px) { .<data:className/>


{background-image:url(<b:eval expr='resizeImage(data:post.featuredImage, 585,
"585:185").cssEscaped'/>);} }

</style>

<div class='snippet-thumbnail-container'>

<div expr:class='"snippet-thumbnail " + data:className'/>

</div>

</b:with>
</b:if>

<div style='clear: both;'/>

</div>

</b:includable>

<b:includable id='postCommentsAndAd'>

<b:include cond='data:view.isSingleItem or data:widgets.FeaturedPost none


(w => w.sectionId == "featured_post" and w.postId == data:post.id)'
name='super.postCommentsAndAd'/>

</b:includable>

<b:includable id='postCommentsLink'>

<b:if cond='data:view.isMultipleItems'>

<span class='byline post-comment-link container'>

<b:include cond='data:post.commentSource != 1' name='commentsLink'/>

<b:include cond='data:post.commentSource == 1' name='commentsLinkIframe'/>

</span>

</b:if>

</b:includable>

<b:includable id='postFooter' var='post'>

<div class='post-footer'>

<b:include name='footerBylines'/>

<b:include data='post' name='postFooterAuthorProfile'/>

</div>

</b:includable>

<b:includable id='postFooterAuthorProfile' var='post'>

<b:if cond='data:post.author.aboutMe and data:view.isPost'>

<div class='author-profile'>
<b:if cond='data:post.author.authorPhoto.url'>

<img class='author-image' expr:src='data:post.author.authorPhoto.url' width='50px'/>

<div class='author-about'>

<b:include data='post' name='aboutPostAuthor'/>

</div>

<b:else/>

<b:include data='post' name='aboutPostAuthor'/>

</b:if>

</div>

</b:if>

</b:includable>

<b:includable id='postHeader' var='post'>

<b:include name='headerByline'/>

</b:includable>

<b:includable id='postJumpLink' var='post'>

<b:comment>We don't show 'read more' links in Emporio.</b:comment>

</b:includable>

<b:includable id='postLabels'>

<b:if cond='data:view.isMultipleItems'>

<div class='labels-outer-container'>

<div class='labels-container overflowable-container'>

<div class='labels-items overflowable-contents byline post-labels'>

<b:loop index='i' values='data:post.labels' var='label'>

<span class='overflowable-item'>

<a expr:href='data:label.url' rel='tag'><data:label.name/></a>


</span>

</b:loop>

</div>

<span class='labels-more overflow-button hidden'>

<a expr:href='data:originalUrl'>+<span class='overflow-count'/></a>

</span>

</div>

</div>

<b:else/>

<b:include name='super.postLabels'/>

</b:if>

</b:includable>

<b:includable id='postMeta' var='post'>

<b:include data='post' name='postMetadataJSON'/>

</b:includable>

<b:includable id='postPagination'>

<div class='blog-pager container' id='blog-pager'>

<b:include cond='data:newerPageUrl' name='previousPageLink'/>

<b:include cond='data:olderPageUrl' name='nextPageLink'/>

<b:include cond='data:view.url != data:blog.homepageUrl' name='homePageLink'/>

</div>

</b:includable>
<b:includable id='postShareButtons' var='post'>

<!-- We call super.postShareButtons from the migrated positions. -->

</b:includable>

<b:includable id='postTitle' var='post'>

<!-- Snippetize the post title -->

<div class='post-title-container'>

<a expr:name='data:post.id'/>

<h3 class='post-title entry-title'>

<b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'>

<a expr:href='data:post.link ?: data:post.url'>

<div class='snippet-container r-snippet-container'>

<div class='r-snippetized'>

<data:post.title/>

</div>

<b:if cond='data:post.title != ""'>

<div class='snippet-fade r-snippet-fade hidden'/>

</b:if>

</div>

</a>

<b:else/>

<data:post.title/>

</b:if>

</h3>

</div>

</b:includable>
<b:includable id='postWrapperClasses'>

<b:class cond='data:post.featuredImage' name='image'/>

<b:class cond='not data:post.featuredImage' name='no-image'/>

<b:class cond='data:post.labels and not data:post.labels.empty' name='has-labels'/>

</b:includable>

<b:includable id='previousPageLink'>

<b:comment>We don't show previeus page links in Emporio.</b:comment>

</b:includable>

<b:includable id='snippetedPostThumbnail'>

<div class='item-thumbnail'>

<a expr:href='data:post.url'>

<b:include data='{ image: data:post.featuredImage,


imageSizes: [280,560,840,1120,1400] }' name='responsiveImage'/>

</a>

</div>

</b:includable>

<b:includable id='status-message'>

<b:if cond='data:navMessage'>

<div class='status-msg-wrap'>

<div class='status-msg-body'>

<data:navMessage/>

</div>

<div class='status-msg-border'>

<div class='status-msg-bg'>

<div class='status-msg-hidden'>

<data:navMessage/></div>
</div>

</div>

</div>

<div style='clear: both;'/>

</b:if>

</b:includable>

<b:includable id='threadedCommentForm' var='post'>

<b:with value='"90px"' var='cmtIframeInitialHeight'>

<b:include data='post' name='super.threadedCommentForm'/>

</b:with>

</b:includable>

<b:includable id='threadedCommentJs' var='post'>

<script async='async' expr:src='data:post.commentSrc' type='text/javascript'/>

<b:template-script inline='true' name='threaded_comments'/>

<script type='text/javascript'>

blogger.widgets.blog.initThreadedComments(

<data:post.commentJso/>,

<data:post.commentMsgs/>,

<data:post.commentConfig/>);

</script>

</b:includable>

<b:includable id='threadedComments' var='post'>

<section class='comments threaded' expr:data-embed='data:post.embedCommentForm'


expr:data-num-comments='data:post.numberOfComments' id='comments'>

<a name='comments'/>
<b:include name='commentsTitle'/>

<div class='comments-content'>

<b:if cond='data:post.embedCommentForm'>

<b:include data='post' name='threadedCommentJs'/>

</b:if>

<div id='comment-holder'>

<data:post.commentHtml/>

</div>

</div>

<p class='comment-footer'>

<b:if cond='data:post.allowNewComments'>

<b:include data='post' name='threadedCommentForm'/>

<b:else/>

<data:post.noNewCommentsText/>

</b:if>

</p>

<b:if cond='data:showCmtPopup'>

<div id='comment-popup'>

<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-


actions' scrolling='no'>

</iframe>

</div>

</b:if>

</section>

</b:includable>
</b:widget>

</b:section>

</main>

<b:section ads='true' class='vertical-ad-container' id='ads' name='Ads'


showaddelement='false'>

<b:widget id='AdSense1' locked='true' title='' type='AdSense' visible='false'>

<b:includable id='main'>

<div class='widget-content'>

<b:if cond='data:adCode'>

<data:adCode/>

<b:else/>

<b:include name='defaultAdUnit'/>

</b:if>

</div>

</b:includable>

<b:includable id='defaultAdUnit'>

<!-- Clear out style (need non-empty string) -->

<b:with value='"/* Done in css. */"' var='style'>

<b:include name='super.defaultAdUnit'/>

</b:with>

</b:includable>

</b:widget>

<b:widget id='AdSense2' locked='true' title='' type='AdSense' visible='false'>

<b:includable id='main'>

<div class='widget-content'>
<b:if cond='data:adCode'>

<data:adCode/>

<b:else/>

<b:include name='defaultAdUnit'/>

</b:if>

</div>

</b:includable>

<b:includable id='defaultAdUnit'>

<!-- Clear out style (need non-empty string) -->

<b:with value='"/* Done in css. */"' var='style'>

<b:include name='super.defaultAdUnit'/>

</b:with>

</b:includable>

</b:widget>

</b:section>

<aside class='sidebar-container container' role='complementary'>

<b:class cond='data:view.isMultipleItems' name='sidebar-invisible'/>

<b:if cond='data:view.isMultipleItems or data:view.isLayoutMode'>

<!-- Display different sidebars for feed page / item page. -->

<div class='navigation'>

<b:include data='{ iconClass: "touch-icon sidebar-back" }' name='closeIcon'/>

</div>

<b:section class='sidebar' id='sidebar_feed' name='Sidebar' preferred='yes'>

<b:widget id='Profile1' locked='false' title='About Me' type='Profile' visible='false'>


<b:widget-settings>

<b:widget-setting name='showaboutme'>true</b:widget-setting>

<b:widget-setting name='showlocation'>false</b:widget-setting>

</b:widget-settings>

<b:includable id='main'>

<b:include name='content'/>

</b:includable>

<b:includable id='authorProfileImage'>

<img class='profile-img' expr:alt='data:messages.myPhoto'


expr:height='data:authorPhoto.height' expr:src='data:authorPhoto.image'
expr:width='data:authorPhoto.width'/>

</b:includable>

<b:includable id='content'>

<b:if cond='data:team'>

<div class='widget-content team'>

<b:include name='teamProfile'/>

</div>

<b:else/>

<div class='widget-content individual'>

<b:include name='userProfile'/>

</div>

</b:if>

</b:includable>

<b:includable id='defaultProfileImage'>

<div class='default-avatar-wrapper'>

<b:include data='{ iconClass: "avatar-icon" }' name='defaultAvatarIcon'/>


</div>

</b:includable>

<b:includable id='profileImage'>

<b:if cond='data:authorPhoto.image'>

<b:include name='authorProfileImage'/>

<b:else/>

<b:include name='defaultProfileImage'/>

</b:if>

</b:includable>

<b:includable id='teamProfile'>

<div class='extendable'>

<b:include data='{ items: data:authors, itemSet:


"authors", itemsMarkup: "super.teamProfile", limit: 4
}' name='extendableItems'/>

</div>

</b:includable>

<b:includable id='teamProfileLink'>

<!-- Add an extra 'Visit profile' link -->

<a class='profile-link g-profile' expr:href='data:author.userUrl'>

<b:include name='profileImage'/>

<div class='profile-name-container'>

<span class='profile-name'><data:author.display-name/></span>

<data:messages.visitProfile/>

</div>

</a>

</b:includable>
<b:includable id='userGoogleProfile'>

<div class='g-follow' data-annotation='bubble' data-height='20' expr:data-href='data:userUrl'/>

</b:includable>

<b:includable id='userLocation'>

<dd class='profile-data location'><data:location/></dd>

</b:includable>

<b:includable id='userProfile'>

<b:include name='userProfileImage'/>

<b:include name='userProfileInfo'/>

</b:includable>

<b:includable id='userProfileData'>

<dt class='profile-data'>

<b:include name='userProfileLink'/>

<b:include cond='data:hasgoogleprofile' name='userGoogleProfile'/>

</dt>

</b:includable>

<b:includable id='userProfileImage'>

<a expr:href='data:userUrl'>

<b:include name='profileImage'/>

</a>

</b:includable>

<b:includable id='userProfileInfo'>

<div class='profile-info'>

<dl class='profile-datablock'>

<b:class cond='data:showlocation and data:location != ""' name='has-location'/>


<b:include name='userProfileData'/>

<b:include cond='data:showlocation and data:location != ""' name='userLocation'/>

<b:include cond='data:aboutme != ""' name='userProfileText'/>

</dl>

<b:include name='viewProfileLink'/>

</div>

</b:includable>

<b:includable id='userProfileLink'>

<a class='profile-link g-profile' expr:href='data:userUrl' expr:style='"background-image: url(" +


data:profileLogo + ");"' rel='author'>

<data:displayname/>

</a>

</b:includable>

<b:includable id='userProfileText'>

<dd class='profile-textblock'>

<data:aboutme/>

</dd>

</b:includable>

<b:includable id='viewProfileLink'>

<!-- Change single profile link message to 'Visit profile' -->

<a class='profile-link' expr:href='data:userUrl'


rel='author'><data:messages.visitProfile/></a>

</b:includable>

</b:widget>

<b:widget id='BlogArchive1' locked='false' title='' type='BlogArchive' visible='true'>


<b:widget-settings>

<b:widget-setting name='showStyle'>FLAT</b:widget-setting>

<b:widget-setting name='yearPattern'>yyyy</b:widget-setting>

<b:widget-setting name='showWeekEnd'>true</b:widget-setting>

<b:widget-setting name='monthPattern'>MMMM yyyy</b:widget-setting>

<b:widget-setting name='dayPattern'>MMM dd</b:widget-setting>

<b:widget-setting name='weekPattern'>MM/dd</b:widget-setting>

<b:widget-setting name='chronological'>false</b:widget-setting>

<b:widget-setting name='showPosts'>true</b:widget-setting>

<b:widget-setting name='frequency'>MONTHLY</b:widget-setting>

</b:widget-settings>

<b:includable id='main' var='this'>

<details class='collapsible extendable'>

<b:attr cond='data:view.isArchive' name='open' value='open'/>

<b:with value='true' var='renderAsDetails'>

<b:with value='data:messages.archive' var='defaultTitle'>

<b:include name='super.main'/>

</b:with>

</b:with>

</details>

</b:includable>

<b:includable id='content'>

<div class='widget-content'>

<div id='ArchiveList'>

<div expr:id='data:widget.instanceId + "_ArchiveList"'>


<b:include cond='data:this.style == "HIERARCHY"' name='hierarchy'/>

<b:include cond='data:this.style in {"FLAT", "MENU"}' name='flat'/>

</div>

</div>

</div>

</b:includable>

<b:includable id='flat'>

<b:include data='{ buttonClass: "flat-button", items:


data:this.data, itemSet: "data", itemsMarkup: "super.flat"
}' name='extendableItems'/>

</b:includable>

<b:includable id='hierarchy'>

<b:include data='{ buttonClass: "flat-button", limit: 1,


items: data:this.data, itemSet: "data", itemsMarkup:
"super.hierarchy" }' name='extendableItems'/>

</b:includable>

<b:includable id='interval' var='intervals'>

<ul class='hierarchy'>

<b:loop values='data:intervals' var='interval'>

<li class='archivedate'>

<div class='hierarchy-title'>

<a class='post-count-link' expr:href='data:interval.url'>

<data:interval.name/>

<span class='post-count'><data:interval.post-count/></span>

</a>

</div>

<div class='hierarchy-content'>
<b:include cond='data:interval.data' data='interval.data' name='interval'/>

<b:include cond='data:interval.posts' data='interval.posts' name='posts'/>

</div>

</li>

</b:loop>

</ul>

</b:includable>

<b:includable id='posts' var='posts'>

<ul class='posts hierarchy'>

<b:loop values='data:posts' var='post'>

<li>

<a expr:href='data:post.url'><data:post.title/></a>

</li>

</b:loop>

</ul>

</b:includable>

</b:widget>

<b:widget id='Label1' locked='false' title='Labels' type='Label' visible='true'>

<b:widget-settings>

<b:widget-setting name='sorting'>ALPHA</b:widget-setting>

<b:widget-setting name='display'>LIST</b:widget-setting>

<b:widget-setting name='selectedLabelsList'/>

<b:widget-setting name='showType'>ALL</b:widget-setting>

<b:widget-setting name='showFreqNumbers'>false</b:widget-setting>

</b:widget-settings>
<b:includable id='main' var='this'>

<details class='collapsible extendable'>

<b:attr cond='data:view.isLabelSearch' name='open' value='open'/>

<b:with value='true' var='renderAsDetails'>

<b:with value='data:messages.labels' var='defaultTitle'>

<b:include name='super.main'/>

</b:with>

</b:with>

</details>

</b:includable>

<b:includable id='cloud'>

<b:include data='{ buttonClass: "flat-button", items:


data:this.labels, itemSet: "labels", itemsMarkup: "super.cloud"
}' name='extendableItems'/>

</b:includable>

<b:includable id='content'>

<div class='widget-content'>

<b:class expr:name='data:this.display + "-label-widget-content"'/>

<b:include cond='data:this.display == "list"' name='list'/>

<b:include cond='data:this.display == "cloud"' name='cloud'/>

</div>

</b:includable>

<b:includable id='list'>

<b:include data='{ buttonClass: "flat-button", items:


data:this.labels, itemSet: "labels", itemsMarkup: "super.list"
}' name='extendableItems'/>

</b:includable>
</b:widget>

<b:widget id='ReportAbuse1' locked='true' title='' type='ReportAbuse' visible='true'>

<b:includable id='main'>

<b:include name='reportAbuse'/>

</b:includable>

</b:widget>

<b:widget id='HTML1' locked='false' title='Blog Kata Mutiara Cinta and website


design' type='HTML' visible='false'>

<b:widget-settings>

<b:widget-setting name='content'><![CDATA[<a
href="https://web.facebook.com/groups/jual.beli.mobil.tasikmalaya/" rel="nofollow"
target="_blank"><img border="0" src="https://2.bp.blogspot.com/-
5LCrD4mzNfY/WMPEkOuxUaI/AAAAAAAAAfE/Ib-
aFl8P5m8NbSk5al9pCS3I53_mZOMwQCLcB/s1600/Capture.PNG" /></a>]]></b:widget-setting>

</b:widget-settings>

<b:includable id='main'>

<b:include name='widget-title'/>

<div class='widget-content'>

<data:content/>

</div>

</b:includable>

</b:widget>

<b:widget id='HTML2' locked='false' title='' type='HTML' visible='false'>

<b:includable id='main'>

<b:include name='widget-title'/>

<div class='widget-content'>

<data:content/>
</div>

</b:includable>

</b:widget>

<b:widget id='HTML3' locked='false' mobile='no' title='Widget 1' type='HTML'


visible='false'>

<b:widget-settings>

<b:widget-setting name='content'/>

</b:widget-settings>

<b:includable id='main'>

<b:include name='widget-title'/>

<div class='widget-content'>

<data:content/>

</div>

</b:includable>

</b:widget>

<b:widget id='HTML4' locked='false' mobile='yes' title='Widget 2' type='HTML'


visible='false'>

<b:widget-settings>

<b:widget-setting name='content'/>

</b:widget-settings>

<b:includable id='main'>

<b:include name='widget-title'/>

<div class='widget-content'>

<data:content/>

</div>

</b:includable>
</b:widget>

</b:section>

</b:if>

<b:if cond='data:view.isSingleItem or data:view.isLayoutMode'>

<b:section id='sidebar_item' name='Sidebar (Item Page)'>

<b:widget cond='data:posts any (p => p.id != data:view.postId)' id='PopularPosts1'


locked='true' title='' type='PopularPosts' visible='true'>

<b:widget-settings>

<b:widget-setting name='numItemsToShow'>3</b:widget-setting>

<b:widget-setting name='showThumbnails'>true</b:widget-setting>

<b:widget-setting name='showSnippets'>true</b:widget-setting>

<b:widget-setting name='timeRange'>LAST_YEAR</b:widget-setting>

</b:widget-settings>

<b:includable id='main'>

<b:comment>Default the title to 'Popular posts from this blog'.</b:comment>

<b:with value='data:messages.popularPosts' var='defaultTitle'>

<b:include name='super.main'/>

</b:with>

</b:includable>

<b:includable id='commentsLink'>

<a class='comment-link' expr:href='data:post.commentsUrl ?: data:post.url'


expr:onclick='data:post.commentsUrlOnclick'>

<b:include name='commentIcon'/>

<span class='num_comments'>

<data:post.numberOfComments/>

</span>
</a>

</b:includable>

<b:includable id='itemBody' var='post'>

<div class='item-content'>

<b:with value='"popular-posts"' var='snippetPrefix'>

<b:include cond='data:postDisplay.showSnippet' data='post' name='postSnippet'/>

</b:with>

</div>

</b:includable>

<b:includable id='snippetedPostContent'>

<b:comment>Move the thumbnail outside of the body and above the title</b:comment>

<b:include cond='data:postDisplay.showFeaturedImage and


data:post.featuredImage.isResizable' data='post' name='snippetedPostThumbnail'/>

<b:include data='post' name='snippetedPostTitle'/>

<b:include data='post' name='itemBody'/>

</b:includable>

<b:includable id='snippetedPostThumbnail'>

<div class='item-thumbnail'>

<a expr:href='data:post.url'>

<b:include data='{ image: data:post.featuredImage,


imageSizes: [280,560,840,1120,1400] }' name='responsiveImage'/>

</a>

</div>

</b:includable>

</b:widget>

</b:section>
</b:if>

</aside> <!-- close sidebar-container -->

</div>

<!-- close centered-bottom -->

</div>

<!-- close centered -->

</div>

<!-- close page_body -->

</b:with>

<b:section class='footer' id='footer' name='Footer' showaddelement='false' tag='footer'>

<b:widget cond='not data:features.hideAttribution' id='Attribution1' locked='true' title=''


type='Attribution' visible='true'>

<b:widget-settings>

<b:widget-setting name='copyright'/>

</b:widget-settings>

<b:includable id='main' var='this'>

<div class='widget-content'>

<div class='blogger'>

<a expr:href='data:bloggerUrl'>

<b:include name='flatBloggerIcon'/>

<b:message name='messages.poweredByBlogger'/>

</a>

</div>

<b:if cond='data:imageAuthor'>

<div class='image-attribution'>
<b:if cond='data:imageAuthor.url'>

<b:message name='messages.templateImagesByLink'>

<b:param expr:value='data:imageAuthor.url'/>

<b:param expr:value='data:imageAuthor.name'/>

</b:message>

<b:else/>

<b:message name='messages.templateImagesBy'>

<b:param expr:value='data:imageAuthor.name'/>

</b:message>

</b:if>

</div>

</b:if>

<b:if cond='data:copyright != ""'>

<div class='copyright'>

<data:copyright/></div>

</b:if>

</div>

</b:includable>

</b:widget>

</b:section>

</div>

<b:template-script async='true' name='vegeclub' version='1.0.0'/>

<b:include data='blog' name='google-analytics'/>

</body>
</html>