Les fichiers XML des thèmes - <b:skin>

Description du fichier

Le nœud <b:skin> est réservé aux feuilles de styles du document HTML généré. Le nœud est scindé en 2 parties : La première contient des variables Blogger qui sont raccordées directement à l'interface de l'utilisateur; et la deuxième, les déclarations de styles. En savoir plus.

Directives d'usage et niveau de priorité de mise à jour

Thème Version 1

Garantie d'usage : Aucune

Aucune priorité

Thème Version 2

Garantie d'usage : Oui

Priorité moyenne

Thème Dynamique

Garantie d'usage : Oui

Priorité moyenne

Thème Version 3

Garantie d'usage : Oui

Priorité haute

Vue d'ensemble du nœud

• Simple
• Picture Windows
• Awesome Inc.
• Watermark
• Ethereal
• Travel
• Dynamics
• Contempo
• Emporio
• Essential
• Notable
• Soho

Simple

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Simple
Designer: Blogger
URL:      www.blogger.com
----------------------------------------------- */

/* Variable definitions
   ====================
   <Variable name="keycolor" description="Main Color" type="color" default="#66bbdd" value="#cc6611"/>

   <Group description="Page Text" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#222222" value="#222222"/>
   </Group>

   <Group description="Backgrounds" selector=".body-fauxcolumns-outer">
     <Variable name="body.background.color" description="Outer Background" type="color" default="#66bbdd" value="#eeaa00"/>
     <Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#ffffff"/>
     <Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="#cc6611"/>
   </Group>

   <Group description="Links" selector=".main-outer">
     <Variable name="link.color" description="Link Color" type="color" default="#2288bb" value="#cc6611"/>
     <Variable name="link.visited.color" description="Visited Color" type="color" default="#888888" value="#888888"/>
     <Variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#ff9900"/>
   </Group>

   <Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Font" type="font"
         default="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 60px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="header.text.color" description="Title Color" type="color" default="#3399bb"  value="#ffffff"/>
   </Group>

   <Group description="Blog Description" selector=".header .description">
     <Variable name="description.text.color" description="Description Color" type="color"
         default="#777777"  value="#ffffff"/>
   </Group>

   <Group description="Tabs Text" selector=".tabs-inner .widget li a">
     <Variable name="tabs.font" description="Font" type="font"
         default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="tabs.text.color" description="Text Color" type="color" default="#999999" value="#999999"/>
     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#000000" value="#000000"/>
   </Group>

   <Group description="Tabs Background" selector=".tabs-outer .PageList">
     <Variable name="tabs.background.color" description="Background Color" type="color" default="#f5f5f5" value="#f5f5f5"/>
     <Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#eeeeee" value="#eeeeee"/>
   </Group>

   <Group description="Post Title" selector="h3.post-title, .comments h4">
     <Variable name="post.title.font" description="Font" type="font"
         default="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
   </Group>

   <Group description="Date Header" selector=".date-header">
     <Variable name="date.header.color" description="Text Color" type="color"
         default="$(body.text.color)" value="#222222"/>
     <Variable name="date.header.background.color" description="Background Color" type="color"
         default="transparent" value="transparent"/>
     <Variable name="date.header.font" description="Text Font" type="font"
         default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="date.header.padding" description="Date Header Padding" type="string" default="inherit" value="inherit"/>
     <Variable name="date.header.letterspacing" description="Date Header Letter Spacing" type="string" default="inherit" value="inherit"/>
     <Variable name="date.header.margin" description="Date Header Margin" type="string" default="inherit" value="inherit"/>
   </Group>

   <Group description="Post Footer" selector=".post-footer">
     <Variable name="post.footer.text.color" description="Text Color" type="color" default="#666666" value="#666666"/>
     <Variable name="post.footer.background.color" description="Background Color" type="color"
         default="#f9f9f9" value="#f9f9f9"/>
     <Variable name="post.footer.border.color" description="Shadow Color" type="color" default="#eeeeee" value="#eeeeee"/>
   </Group>

   <Group description="Gadgets" selector="h2">
     <Variable name="widget.title.font" description="Title Font" type="font"
         default="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#000000"/>
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#999999" value="#999999"/>
   </Group>

   <Group description="Images" selector=".main-inner">
     <Variable name="image.background.color" description="Background Color" type="color" default="#ffffff" value="#ffffff"/>
     <Variable name="image.border.color" description="Border Color" type="color" default="#eeeeee" value="#eeeeee"/>
     <Variable name="image.text.color" description="Caption Text Color" type="color" default="$(body.text.color)" value="#222222"/>
   </Group>

   <Group description="Accents" selector=".content-inner">
     <Variable name="body.rule.color" description="Separator Line Color" type="color" default="#eeeeee" value="#eeeeee"/>
     <Variable name="tabs.border.color" description="Tabs Border Color" type="color" default="$(body.rule.color)" value="#eeeeee"/>
   </Group>

   <Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>
   <Variable name="body.background.override" description="Body Background Override" type="string" default="" value=""/>

   <Variable name="body.background.gradient.cap" description="Body Gradient Cap" type="url"
       default="url(https://resources.blogblog.com/blogblog/data/1kt/simple/gradients_light.png)" value="url(https://resources.blogblog.com/blogblog/data/1kt/simple/gradients_light.png)"/>
   <Variable name="body.background.gradient.tile" description="Body Gradient Tile" type="url"
       default="url(https://resources.blogblog.com/blogblog/data/1kt/simple/body_gradient_tile_light.png)" value="url(https://resources.blogblog.com/blogblog/data/1kt/simple/body_gradient_tile_light.png)"/>

   <Variable name="content.background.color.selector" description="Content Background Color Selector" type="string" default=".content-inner" value=".content-inner"/>
   <Variable name="content.padding" description="Content Padding" type="length" default="10px" min="0" max="100px" value="10px"/>
   <Variable name="content.padding.horizontal" description="Content Horizontal Padding" type="length" default="$(content.padding)" min="0" max="100px" value="10px"/>
   <Variable name="content.shadow.spread" description="Content Shadow Spread" type="length" default="40px" min="0" max="100px" value="40px"/>
   <Variable name="content.shadow.spread.webkit" description="Content Shadow Spread (WebKit)" type="length" default="5px" min="0" max="100px" value="5px"/>
   <Variable name="content.shadow.spread.ie" description="Content Shadow Spread (IE)" type="length" default="10px" min="0" max="100px" value="10px"/>

   <Variable name="main.border.width" description="Main Border Width" type="length" default="0" min="0" max="10px" value="0"/>

   <Variable name="header.background.gradient" description="Header Gradient" type="url" default="none" value="url(https://resources.blogblog.com/blogblog/data/1kt/simple/gradients_light.png)"/>
   <Variable name="header.shadow.offset.left" description="Header Shadow Offset Left" type="length" default="-1px" min="-50px" max="50px" value="1px"/>
   <Variable name="header.shadow.offset.top" description="Header Shadow Offset Top" type="length" default="-1px" min="-50px" max="50px" value="2px"/>
   <Variable name="header.shadow.spread" description="Header Shadow Spread" type="length" default="1px" min="0" max="100px" value="3px"/>
   <Variable name="header.padding" description="Header Padding" type="length" default="30px" min="0" max="100px" value="30px"/>

   <Variable name="header.border.size" description="Header Border Size" type="length" default="1px" min="0" max="10px" value="0"/>
   <Variable name="header.bottom.border.size" description="Header Bottom Border Size" type="length" default="$(header.border.size)" min="0" max="10px" value="0"/>
   <Variable name="header.border.horizontalsize" description="Header Horizontal Border Size" type="length" default="0" min="0" max="10px" value="0"/>

   <Variable name="description.text.size" description="Description Text Size" type="string" default="140%" value="140%"/>

   <Variable name="tabs.margin.top" description="Tabs Margin Top" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="tabs.margin.side" description="Tabs Side Margin" type="length" default="30px" min="0" max="100px" value="30px"/>
   <Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
       default="url(https://resources.blogblog.com/blogblog/data/1kt/simple/gradients_light.png)" value="url(https://resources.blogblog.com/blogblog/data/1kt/simple/gradients_light.png)"/>
   <Variable name="tabs.border.width" description="Tabs Border Width" type="length" default="1px" min="0" max="10px" value="1px"/>
   <Variable name="tabs.bevel.border.width" description="Tabs Bevel Border Width" type="length" default="1px" min="0" max="10px" value="1px"/>

   <Variable name="post.margin.bottom" description="Post Bottom Margin" type="length" default="25px" min="0" max="100px" value="25px"/>

   <Variable name="image.border.small.size" description="Image Border Small Size" type="length" default="2px" min="0" max="10px" value="2px"/>
   <Variable name="image.border.large.size" description="Image Border Large Size" type="length" default="5px" min="0" max="10px" value="5px"/>

   <Variable name="page.width.selector" description="Page Width Selector" type="string" default=".region-inner" value=".region-inner"/>
   <Variable name="page.width" description="Page Width" type="string" default="auto" value="auto"/>

   <Variable name="main.section.margin" description="Main Section Margin" type="length" default="15px" min="0" max="100px" value="15px"/>
   <Variable name="main.padding" description="Main Padding" type="length" default="15px" min="0" max="100px" value="15px"/>
   <Variable name="main.padding.top" description="Main Padding Top" type="length" default="30px" min="0" max="100px" value="30px"/>
   <Variable name="main.padding.bottom" description="Main Padding Bottom" type="length" default="30px" min="0" max="100px" value="30px"/>

   <Variable name="paging.background"
       color="$(content.background.color)"
       description="Background of blog paging area" type="background"
       default="transparent none no-repeat scroll top center" value="transparent none no-repeat scroll top center"/>

   <Variable name="footer.bevel" description="Bevel border length of footer" type="length" default="0" min="0" max="10px" value="0"/>

   <Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"
       default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>
   <Variable name="mobile.background.size" description="Mobile Background Size" type="string" default="auto" value="auto"/>
   <Variable name="mobile.button.color" description="Mobile Button Color" type="color" default="#ffffff"  value="#ffffff"/>

   <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left"/>
   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right"/>
*/

/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
  padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread);
  $(body.background.override)
}

html body $(page.width.selector) {
  min-width: 0;
  max-width: 100%;
  width: $(page.width);
}

h2 {
  font-size: 22px;
}

a:link {
  text-decoration:none;
  color: $(link.color);
}

a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}

.body-fauxcolumn-outer .fauxcolumn-inner {
  background: transparent $(body.background.gradient.tile) repeat scroll top left;
  _background-image: none;
}

.body-fauxcolumn-outer .cap-top {
  position: absolute;
  z-index: 1;
  height: 400px;
  width: 100%;
}

.body-fauxcolumn-outer .cap-top .cap-left {
  width: 100%;
  background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
  _background-image: none;
}

.content-outer {
  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread.webkit) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread.ie) #333333;
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

  margin-bottom: 1px;
}

.content-inner {
  padding: $(content.padding) $(content.padding.horizontal);
}

$(content.background.color.selector) {
  background-color: $(content.background.color);
}

/* Header
----------------------------------------------- */
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
  _background-image: none;
}

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: $(header.shadow.offset.left) $(header.shadow.offset.top) $(header.shadow.spread) rgba(0, 0, 0, .2);
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font-size: $(description.text.size);
  color: $(description.text.color);
}

.header-inner .Header .titlewrapper {
  padding: 22px $(header.padding);
}

.header-inner .Header .descriptionwrapper {
  padding: 0 $(header.padding);
}

/* Tabs
----------------------------------------------- */
.tabs-inner .section:first-child {
  border-top: $(header.bottom.border.size) solid $(tabs.border.color);
}

.tabs-inner .section:first-child ul {
  margin-top: -$(header.border.size);
  border-top: $(header.border.size) solid $(tabs.border.color);
  border-left: $(header.border.horizontalsize) solid $(tabs.border.color);
  border-right: $(header.border.horizontalsize) solid $(tabs.border.color);
}

.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

  margin-top: $(tabs.margin.top);
  margin-left: -$(tabs.margin.side);
  margin-right: -$(tabs.margin.side);
}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .6em 1em;

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

  border-$startSide: $(tabs.border.width) solid $(content.background.color);
  border-$endSide: $(tabs.bevel.border.width) solid $(tabs.border.color);
}

.tabs-inner .widget li:first-child a {
  border-$startSide: none;
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
  background-color: $(tabs.selected.background.color);
  text-decoration: none;
}

/* Columns
----------------------------------------------- */
.main-outer {
  border-top: $(main.border.width) solid $(body.rule.color);
}

.fauxcolumn-left-outer .fauxcolumn-inner {
  border-right: 1px solid $(body.rule.color);
}

.fauxcolumn-right-outer .fauxcolumn-inner {
  border-left: 1px solid $(body.rule.color);
}

/* Headings
----------------------------------------------- */
div.widget > h2,
div.widget h2.title {
  margin: 0 0 1em 0;

  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

/* Widgets
----------------------------------------------- */
.widget .zippy {
  color: $(widget.alternate.text.color);
  text-shadow: 2px 2px 1px rgba(0, 0, 0, .1);
}

.widget .popular-posts ul {
  list-style: none;
}

/* Posts
----------------------------------------------- */
h2.date-header {
  font: $(date.header.font);
}

.date-header span {
  background-color: $(date.header.background.color);
  color: $(date.header.color);
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}

.main-inner {
  padding-top: $(main.padding.top);
  padding-bottom: $(main.padding.bottom);
}

.main-inner .column-center-inner {
  padding: 0 $(main.padding);
}

.main-inner .column-center-inner .section {
  margin: 0 $(main.section.margin);
}

.post {
  margin: 0 0 $(post.margin.bottom) 0;
}

h3.post-title, .comments h4 {
  font: $(post.title.font);
  margin: .75em 0 0;
}

.post-body {
  font-size: 110%;
  line-height: 1.4;
  position: relative;
}

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: $(image.border.small.size);

  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .1);
}

.post-body img, .post-body .tr-caption-container {
  padding: $(image.border.large.size);
}

.post-body .tr-caption-container {
  color: $(image.text.color);
}

.post-body .tr-caption-container img {
  padding: 0;

  background: transparent;
  border: none;

  -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
  box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}

.post-header {
  margin: 0 0 1.5em;

  line-height: 1.6;
  font-size: 90%;
}

.post-footer {
  margin: 20px -2px 0;
  padding: 5px 10px;

  color: $(post.footer.text.color);
  background-color: $(post.footer.background.color);
  border-bottom: 1px solid $(post.footer.border.color);

  line-height: 1.6;
  font-size: 90%;
}

#comments .comment-author {
  padding-top: 1.5em;

  border-top: 1px solid $(body.rule.color);
  background-position: 0 1.5em;
}

#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}

.avatar-image-container {
  margin: .2em 0 0;
}

#comments .avatar-image-container img {
  border: 1px solid $(image.border.color);
}

/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
  border-top: 1px solid $(widget.alternate.text.color);
  border-bottom: 1px solid $(widget.alternate.text.color);
}

.comments .comment-thread.inline-thread {
  background-color: $(post.footer.background.color);
}

.comments .continue {
  border-top: 2px solid $(widget.alternate.text.color);
}

/* Accents
---------------------------------------------- */
.section-columns td.columns-cell {
  border-$startSide: 1px solid $(body.rule.color);
}

.blog-pager {
  background: $(paging.background);
}

.blog-pager-older-link, .home-link,
.blog-pager-newer-link {
  background-color: $(content.background.color);
  padding: 5px;
}

.footer-outer {
  border-top: $(footer.bevel) dashed #bbbbbb;
}

/* Mobile
----------------------------------------------- */
body.mobile  {
  background-size: $(mobile.background.size);
}

.mobile .body-fauxcolumn-outer {
  background: $(mobile.background.overlay);
}

.mobile .body-fauxcolumn-outer .cap-top {
  background-size: 100% auto;
}

.mobile .content-outer {
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .15);
  box-shadow: 0 0 3px rgba(0, 0, 0, .15);
}

.mobile .tabs-inner .widget ul {
  margin-left: 0;
  margin-right: 0;
}

.mobile .post {
  margin: 0;
}

.mobile .main-inner .column-center-inner .section {
  margin: 0;
}

.mobile .date-header span {
  padding: 0.1em 10px;
  margin: 0 -10px;
}

.mobile h3.post-title {
  margin: 0;
}

.mobile .blog-pager {
  background: transparent none no-repeat scroll top center;
}

.mobile .footer-outer {
  border-top: none;
}

.mobile .main-inner, .mobile .footer-inner {
  background-color: $(content.background.color);
}

.mobile-index-contents {
  color: $(body.text.color);
}

.mobile-link-button {
  background-color: $(link.color);
}

.mobile-link-button a:link, .mobile-link-button a:visited {
  color: $(mobile.button.color);
}

.mobile .tabs-inner .section:first-child {
  border-top: none;
}

.mobile .tabs-inner .PageList .widget-content {
  background-color: $(tabs.selected.background.color);
  color: $(tabs.selected.text.color);
  border-top: $(tabs.border.width) solid $(tabs.border.color);
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);
}

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
  border-$startSide: 1px solid $(tabs.border.color);
}
]]></b:skin>

Picture Windows

<b:skin><![CDATA[/*-----------------------------------------------

Blogger Template Style
Name:     Picture Window
Designer: Blogger
URL:      www.blogger.com
----------------------------------------------- */

/* Variable definitions
   ====================
   <Variable name="keycolor" description="Main Color" type="color" default="#1a222a" value="#992211"/>
   <Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="#111111 url(//themes.googleusercontent.com/image?id=1OACCYOE0-eoTRTfsBuX1NMN9nz599ufI1Jh0CggPFA_sK80AGkIr8pLtYRpNUKPmwtEa) repeat-x fixed top center" value="#dddddd url(//themes.googleusercontent.com/image?id=1fupio4xM9eVxyr-k5QC5RiCJlYR35r9dXsp63RKsKt64v33poi2MvnjkX_1MULBY8BsT) repeat-x fixed bottom center"/>

   <Group description="Page Text" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#333333" value="#333333"/>
   </Group>

   <Group description="Backgrounds" selector=".body-fauxcolumns-outer">
     <Variable name="body.background.color" description="Outer Background" type="color" default="#296695" value="#dddddd"/>
     <Variable name="header.background.color" description="Header Background" type="color" default="transparent" value="#992211"/>
     <Variable name="post.background.color" description="Post Background" type="color" default="#ffffff" value="#ffffff"/>
   </Group>

   <Group description="Links" selector=".main-outer">
     <Variable name="link.color" description="Link Color" type="color" default="#336699" value="#992211"/>
     <Variable name="link.visited.color" description="Visited Color" type="color" default="#6699cc" value="#771100"/>
     <Variable name="link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#cc4411"/>
   </Group>

   <Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Title Font" type="font"
         default="normal normal 36px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 36px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="header.text.color" description="Text Color" type="color" default="#ffffff"  value="#ffffff"/>
   </Group>

   <Group description="Tabs Text" selector=".tabs-inner .widget li a">
     <Variable name="tabs.font" description="Font" type="font"
         default="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 15px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="tabs.text.color" description="Text Color" type="color" default="#ffffff" value="#992211"/>
     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="$(link.color)" value="#000000"/>
   </Group>

   <Group description="Tabs Background" selector=".tabs-outer .PageList">
     <Variable name="tabs.background.color" description="Background Color" type="color" default="transparent" value="#f5f5f5"/>
     <Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="transparent" value="#ffffff"/>
     <Variable name="tabs.separator.color" description="Separator Color" type="color" default="transparent" value="#cccccc"/>
   </Group>

   <Group description="Post Title" selector="h3.post-title, .comments h4">
     <Variable name="post.title.font" description="Title Font" type="font"
         default="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
   </Group>

   <Group description="Date Header" selector=".date-header">
     <Variable name="date.header.color" description="Text Color" type="color" default="$(body.text.color)" value="#333333"/>
   </Group>

   <Group description="Post" selector=".post">
     <Variable name="post.footer.text.color" description="Footer Text Color" type="color" default="#999999" value="#999999"/>
     <Variable name="post.border.color" description="Border Color" type="color" default="#dddddd" value="#dddddd"/>
   </Group>

   <Group description="Gadgets" selector="h2">
     <Variable name="widget.title.font" description="Title Font" type="font"
        default="bold normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="bold normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.title.text.color" description="Title Color" type="color" default="#888888" value="#666666"/>
   </Group>

   <Group description="Footer" selector=".footer-outer">
     <Variable name="footer.text.color" description="Text Color" type="color" default="#cccccc" value="#eeeeee"/>
     <Variable name="footer.widget.title.text.color" description="Gadget Title Color" type="color" default="#aaaaaa" value="#bbbbbb"/>
   </Group>

   <Group description="Footer Links" selector=".footer-outer">
     <Variable name="footer.link.color" description="Link Color" type="color" default="#99ccee" value="#ffffdd"/>
     <Variable name="footer.link.visited.color" description="Visited Color" type="color" default="#77aaee" value="#cccc99"/>
     <Variable name="footer.link.hover.color" description="Hover Color" type="color" default="#33aaff" value="#ffffff"/>
   </Group>

   <Variable name="content.margin" description="Content Margin Top" type="length" default="20px" min="0" max="100px" value="30px"/>
   <Variable name="content.padding" description="Content Padding" type="length" default="0" min="0" max="100px" value="15px"/>
   <Variable name="content.background" description="Content Background" type="background"
       default="transparent none repeat scroll top left" value="transparent url(https://resources.blogblog.com/blogblog/data/1kt/transparent/white80.png) repeat scroll top left"/>
   <Variable name="content.border.radius" description="Content Border Radius" type="length" default="0" min="0" max="100px" value="15px"/>
   <Variable name="content.shadow.spread" description="Content Shadow Spread" type="length" default="0" min="0" max="100px" value="3px"/>

   <Variable name="header.padding" description="Header Padding" type="length" default="0" min="0" max="100px" value="30px"/>
   <Variable name="header.background.gradient" description="Header Gradient" type="url"
       default="none" value="url(https://resources.blogblog.com/blogblog/data/1kt/transparent/header_gradient_shade.png)"/>
   <Variable name="header.border.radius" description="Header Border Radius" type="length" default="0" min="0" max="100px" value="10px"/>

   <Variable name="main.border.radius.top" description="Main Border Radius" type="length" default="20px" min="0" max="100px" value="0"/>
   <Variable name="footer.border.radius.top" description="Footer Border Radius Top" type="length" default="0" min="0" max="100px" value="10px"/>
   <Variable name="footer.border.radius.bottom" description="Footer Border Radius Bottom" type="length" default="20px" min="0" max="100px" value="10px"/>
   <Variable name="region.shadow.spread" description="Main and Footer Shadow Spread" type="length" default="3px" min="0" max="100px" value="0"/>
   <Variable name="region.shadow.offset" description="Main and Footer Shadow Offset" type="length" default="1px" min="-50px" max="50px" value="0"/>

   <Variable name="tabs.background.gradient" description="Tab Background Gradient" type="url" default="none" value="url(https://resources.blogblog.com/blogblog/data/1kt/transparent/tabs_gradient_shade.png)"/>
   <Variable name="tab.selected.background.gradient" description="Selected Tab Background" type="url"
       default="url(https://resources.blogblog.com/blogblog/data/1kt/transparent/white80.png)" value="url(https://resources.blogblog.com/blogblog/data/1kt/transparent/tabs_gradient_shade.png)"/>
   <Variable name="tab.background" description="Tab Background" type="background"
       default="transparent url(https://resources.blogblog.com/blogblog/data/1kt/transparent/black50.png) repeat scroll top left" value="transparent none no-repeat scroll top left"/>

   <Variable name="tab.border.radius" description="Tab Border Radius" type="length" default="10px" min="0" max="100px" value="0"/>
   <Variable name="tab.first.border.radius" description="First Tab Border Radius" type="length" default="10px" min="0" max="100px" value="10px"/>
   <Variable name="tabs.border.radius" description="Tabs Border Radius" type="length" default="0" min="0" max="100px" value="10px"/>

   <Variable name="tabs.spacing" description="Tab Spacing" type="length" default=".25em" min="0" max="10em" value="0"/>
   <Variable name="tabs.margin.bottom" description="Tab Margin Bottom" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="tabs.margin.sides" description="Tab Margin Sides" type="length" default="20px" min="0" max="100px" value="0"/>

   <Variable name="main.background" description="Main Background" type="background"
       default="transparent url(https://resources.blogblog.com/blogblog/data/1kt/transparent/white80.png) repeat scroll top left" value="transparent none repeat scroll top center"/>
   <Variable name="main.padding.sides" description="Main Padding Sides" type="length" default="20px" min="0" max="100px" value="5px"/>

   <Variable name="footer.background" description="Footer Background" type="background"
       default="transparent url(https://resources.blogblog.com/blogblog/data/1kt/transparent/black50.png) repeat scroll top left" value="transparent url(https://resources.blogblog.com/blogblog/data/1kt/transparent/black50.png) repeat scroll top left"/>

   <Variable name="post.margin.sides" description="Post Margin Sides" type="length" default="-20px" min="-50px" max="50px" value="-20px"/>
   <Variable name="post.border.radius" description="Post Border Radius" type="length" default="5px" min="0" max="100px" value="10px"/>
   <Variable name="widget.title.text.transform" description="Widget Title Text Transform" type="string" default="uppercase" value="uppercase"/>

   <Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"
       default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>

   <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left"/>
   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right"/>
*/

/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

html body .region-inner {
  min-width: 0;
  max-width: 100%;
  width: auto;
}

.content-outer {
  font-size: 90%;
}

a:link {
  text-decoration:none;
  color: $(link.color);
}

a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}

.content-outer {
  background: $(content.background);

  -moz-border-radius: $(content.border.radius);
  -webkit-border-radius: $(content.border.radius);
  -goog-ms-border-radius: $(content.border.radius);
  border-radius: $(content.border.radius);

  -moz-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);
  box-shadow: 0 0 $(content.shadow.spread) rgba(0, 0, 0, .15);

  margin: $(content.margin) auto;
}

.content-inner {
  padding: $(content.padding);
}

/* Header
----------------------------------------------- */
.header-outer {
  background: $(header.background.color) $(header.background.gradient) repeat-x scroll top left;
  _background-image: none;

  color: $(header.text.color);

  -moz-border-radius: $(header.border.radius);
  -webkit-border-radius: $(header.border.radius);
  -goog-ms-border-radius: $(header.border.radius);
  border-radius: $(header.border.radius);
}

.Header img, .Header #header-inner {
  -moz-border-radius: $(header.border.radius);
  -webkit-border-radius: $(header.border.radius);
  -goog-ms-border-radius: $(header.border.radius);
  border-radius: $(header.border.radius);
}

.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: $(header.padding);
  padding-right: $(header.padding);
}

.Header h1 {
  font: $(header.font);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font-size: 130%;
}

/* Tabs
----------------------------------------------- */
.tabs-inner {
  margin: .5em $(tabs.margin.sides) $(tabs.margin.bottom);
  padding: 0;
}

.tabs-inner .section {
  margin: 0;
}

.tabs-inner .widget ul {
  padding: 0;

  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll bottom;

  -moz-border-radius: $(tabs.border.radius);
  -webkit-border-radius: $(tabs.border.radius);
  -goog-ms-border-radius: $(tabs.border.radius);
  border-radius: $(tabs.border.radius);
}

.tabs-inner .widget li {
  border: none;
}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .5em 1em;
  margin-$endSide: $(tabs.spacing);

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

  -moz-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
  -webkit-border-top-left-radius: $(tab.border.radius);
  -webkit-border-top-right-radius: $(tab.border.radius);
  -goog-ms-border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;
  border-radius: $(tab.border.radius) $(tab.border.radius) 0 0;

  background: $(tab.background);

  border-$endSide: 1px solid $(tabs.separator.color);
}

.tabs-inner .widget li:first-child a {
  padding-$startSide: 1.25em;

  -moz-border-radius-top$startSide: $(tab.first.border.radius);
  -moz-border-radius-bottom$startSide: $(tabs.border.radius);
  -webkit-border-top-$startSide-radius: $(tab.first.border.radius);
  -webkit-border-bottom-$startSide-radius: $(tabs.border.radius);
  -goog-ms-border-top-$startSide-radius: $(tab.first.border.radius);
  -goog-ms-border-bottom-$startSide-radius: $(tabs.border.radius);
  border-top-$startSide-radius: $(tab.first.border.radius);
  border-bottom-$startSide-radius: $(tabs.border.radius);
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  position: relative;
  z-index: 1;

  background: $(tabs.selected.background.color) $(tab.selected.background.gradient) repeat scroll bottom;
  color: $(tabs.selected.text.color);

  -moz-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
  box-shadow: 0 0 $(region.shadow.spread) rgba(0, 0, 0, .15);
}

/* Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  text-transform: $(widget.title.text.transform);
  color: $(widget.title.text.color);
  margin: .5em 0;
}

/* Main
----------------------------------------------- */
.main-outer {
  background: $(main.background);

  -moz-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
  -webkit-border-top-left-radius: $(main.border.radius.top);
  -webkit-border-top-right-radius: $(main.border.radius.top);
  -webkit-border-bottom-left-radius: 0;
  -webkit-border-bottom-right-radius: 0;
  -goog-ms-border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;
  border-radius: $(main.border.radius.top) $(main.border.radius.top) 0 0;

  -moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
  box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
}

.main-inner {
  padding: 15px $(main.padding.sides) 20px;
}

.main-inner .column-center-inner {
  padding: 0 0;
}

.main-inner .column-left-inner {
  padding-left: 0;
}

.main-inner .column-right-inner {
  padding-right: 0;
}

/* Posts
----------------------------------------------- */
h3.post-title {
  margin: 0;
  font: $(post.title.font);
}

.comments h4 {
  margin: 1em 0 0;
  font: $(post.title.font);
}

.date-header span {
  color: $(date.header.color);
}

.post-outer {
  background-color: $(post.background.color);
  border: solid 1px $(post.border.color);

  -moz-border-radius: $(post.border.radius);
  -webkit-border-radius: $(post.border.radius);
  border-radius: $(post.border.radius);
  -goog-ms-border-radius: $(post.border.radius);

  padding: 15px 20px;
  margin: 0 $(post.margin.sides) 20px;
}

.post-body {
  line-height: 1.4;
  font-size: 110%;
  position: relative;
}

.post-header {
  margin: 0 0 1.5em;

  color: $(post.footer.text.color);
  line-height: 1.6;
}

.post-footer {
  margin: .5em 0 0;

  color: $(post.footer.text.color);
  line-height: 1.6;
}

#blog-pager {
  font-size: 140%
}

#comments .comment-author {
  padding-top: 1.5em;

  border-top: dashed 1px #ccc;
  border-top: dashed 1px rgba(128, 128, 128, .5);

  background-position: 0 1.5em;
}

#comments .comment-author:first-child {
  padding-top: 0;

  border-top: none;
}

.avatar-image-container {
  margin: .2em 0 0;
}

/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
  border-top: 1px solid $(link.hover.color);
  border-bottom: 1px solid $(link.hover.color);
}

.comments .continue {
  border-top: 2px solid $(link.hover.color);
}

/* Widgets
----------------------------------------------- */
.widget ul, .widget #ArchiveList ul.flat {
  padding: 0;
  list-style: none;
}

.widget ul li, .widget #ArchiveList ul.flat li {
  border-top: dashed 1px #ccc;
  border-top: dashed 1px rgba(128, 128, 128, .5);
}

.widget ul li:first-child, .widget #ArchiveList ul.flat li:first-child {
  border-top: none;
}

.widget .post-body ul {
  list-style: disc;
}

.widget .post-body ul li {
  border: none;
}

/* Footer
----------------------------------------------- */
.footer-outer {
  color:$(footer.text.color);
  background: $(footer.background);

  -moz-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);
  -webkit-border-top-left-radius: $(footer.border.radius.top);
  -webkit-border-top-right-radius: $(footer.border.radius.top);
  -webkit-border-bottom-left-radius: $(footer.border.radius.bottom);
  -webkit-border-bottom-right-radius: $(footer.border.radius.bottom);
  -goog-ms-border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);
  border-radius: $(footer.border.radius.top) $(footer.border.radius.top) $(footer.border.radius.bottom) $(footer.border.radius.bottom);

  -moz-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
  -webkit-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
  -goog-ms-box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
  box-shadow: 0 $(region.shadow.offset) $(region.shadow.spread) rgba(0, 0, 0, .15);
}

.footer-inner {
  padding: 10px $(main.padding.sides) 20px;
}

.footer-outer a {
  color: $(footer.link.color);
}

.footer-outer a:visited {
  color: $(footer.link.visited.color);
}

.footer-outer a:hover {
  color: $(footer.link.hover.color);
}

.footer-outer .widget h2 {
  color: $(footer.widget.title.text.color);
}

/* Mobile
----------------------------------------------- */
html body.mobile {
  height: auto;
}

html body.mobile {
  min-height: 480px;
  background-size: 100% auto;
}

.mobile .body-fauxcolumn-outer {
  background: $(mobile.background.overlay);
}

html .mobile .mobile-date-outer, html .mobile .blog-pager {
  border-bottom: none;
  background: $(main.background);
  margin-bottom: 10px;
}

.mobile .date-outer {
  background: $(main.background);
}

.mobile .header-outer, .mobile .main-outer,
.mobile .post-outer, .mobile .footer-outer {
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  -goog-ms-border-radius: 0;
  border-radius: 0;
}

.mobile .content-outer,
.mobile .main-outer,
.mobile .post-outer {
  background: inherit;
  border: none;
}

.mobile .content-outer {
  font-size: 100%;
}

.mobile-link-button {
  background-color: $(link.color);
}

.mobile-link-button a:link, .mobile-link-button a:visited {
  color: $(post.background.color);
}

.mobile-index-contents {
  color: $(body.text.color);
}

.mobile .tabs-inner .PageList .widget-content {
  background: $(tabs.selected.background.color) $(tab.selected.background.gradient) repeat scroll bottom;
  color: $(tabs.selected.text.color);
}

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
  border-$startSide: 1px solid $(tabs.separator.color);
}
]]></b:skin>

Awesome Inc.

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Awesome Inc.
Designer: Tina Chen
URL:      tinachen.org
----------------------------------------------- */

/* Variable definitions
   ====================
   <Variable name="keycolor" description="Main Color" type="color" default="#ffffff" value="#eeeeee"/>

   <Group description="Page" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="body.background.color" description="Background Color" type="color" default="#000000" value="#eeeeee"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#ffffff" value="#444444"/>
   </Group>

   <Group description="Links" selector=".main-inner">
     <Variable name="link.color" description="Link Color" type="color" default="#888888" value="#3778cd"/>
     <Variable name="link.visited.color" description="Visited Color" type="color" default="#444444" value="#4d469c"/>
     <Variable name="link.hover.color" description="Hover Color" type="color" default="#cccccc" value="#3778cd"/>
   </Group>

   <Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Title Font" type="font"
         default="normal bold 40px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 40px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="header.text.color" description="Title Color" type="color" default="$(body.text.color)"  value="#444444"/>
     <Variable name="header.background.color" description="Header Background" type="color" default="transparent"  value="transparent"/>
   </Group>

   <Group description="Blog Description" selector=".header .description">
     <Variable name="description.font" description="Font" type="font"
         default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="description.text.color" description="Text Color" type="color"
         default="$(body.text.color)"  value="#444444"/>
   </Group>

   <Group description="Tabs Text" selector=".tabs-inner .widget li a">
     <Variable name="tabs.font" description="Font" type="font"
         default="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="tabs.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#444444"/>
     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="$(tabs.text.color)" value="#ffffff"/>
   </Group>

   <Group description="Tabs Background" selector=".tabs-outer .PageList">
     <Variable name="tabs.background.color" description="Background Color" type="color" default="#141414" value="#eeeeee"/>
     <Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#444444" value="#666666"/>
     <Variable name="tabs.border.color" description="Border Color" type="color" default="$(widget.border.color)" value="#999999"/>
   </Group>

   <Group description="Date Header" selector=".main-inner .widget h2.date-header, .main-inner .widget h2.date-header span">
     <Variable name="date.font" description="Font" type="font"
         default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="date.text.color" description="Text Color" type="color" default="#666666" value="#444444"/>
     <Variable name="date.border.color" description="Border Color" type="color" default="$(widget.border.color)" value="#eeeeee"/>
   </Group>

   <Group description="Post Title" selector="h3.post-title, h4, h3.post-title a">
     <Variable name="post.title.font" description="Font" type="font"
         default="normal bold 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 22px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="post.title.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#444444"/>
   </Group>

   <Group description="Post Background" selector=".post">
     <Variable name="post.background.color" description="Background Color" type="color" default="$(widget.background.color)"  value="#ffffff"/>
     <Variable name="post.border.color" description="Border Color" type="color" default="$(widget.border.color)"  value="#eeeeee"/>
     <Variable name="post.border.bevel.color" description="Bevel Color" type="color" default="$(widget.border.color)" value="#eeeeee"/>
   </Group>

   <Group description="Gadget Title" selector="h2">
     <Variable name="widget.title.font" description="Font" type="font"
        default="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.title.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#444444"/>
   </Group>

   <Group description="Gadget Text" selector=".sidebar .widget">
     <Variable name="widget.font" description="Font" type="font"
        default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#444444"/>
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#666666" value="#666666"/>
   </Group>

   <Group description="Gadget Links" selector=".sidebar .widget">
     <Variable name="widget.link.color" description="Link Color" type="color" default="$(link.color)" value="#3778cd"/>
     <Variable name="widget.link.visited.color" description="Visited Color" type="color" default="$(link.visited.color)" value="#4d469c"/>
     <Variable name="widget.link.hover.color" description="Hover Color" type="color" default="$(link.hover.color)" value="#3778cd"/>
   </Group>

   <Group description="Gadget Background" selector=".sidebar .widget">
     <Variable name="widget.background.color" description="Background Color" type="color" default="#141414" value="#ffffff"/>
     <Variable name="widget.border.color" description="Border Color" type="color" default="#222222" value="#eeeeee"/>
     <Variable name="widget.border.bevel.color" description="Bevel Color" type="color" default="#000000" value="transparent"/>
   </Group>

   <Group description="Sidebar Background" selector=".column-left-inner .column-right-inner">
     <Variable name="widget.outer.background.color" description="Background Color" type="color" default="transparent"  value="transparent"/>
   </Group>

   <Group description="Images" selector=".main-inner">
     <Variable name="image.background.color" description="Background Color" type="color" default="transparent" value="transparent"/>
     <Variable name="image.border.color" description="Border Color" type="color" default="transparent" value="transparent"/>
   </Group>

   <Group description="Feed" selector=".blog-feeds">
      <Variable name="feed.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#444444"/>
   </Group>

   <Group description="Feed Links" selector=".blog-feeds">
     <Variable name="feed.link.color" description="Link Color" type="color" default="$(link.color)" value="#3778cd"/>
     <Variable name="feed.link.visited.color" description="Visited Color" type="color" default="$(link.visited.color)" value="#4d469c"/>
     <Variable name="feed.link.hover.color" description="Hover Color" type="color" default="$(link.hover.color)" value="#3778cd"/>
   </Group>

   <Group description="Pager" selector=".blog-pager">
     <Variable name="pager.background.color" description="Background Color" type="color" default="$(post.background.color)"  value="#ffffff"/>
   </Group>

   <Group description="Footer" selector=".footer-outer">
     <Variable name="footer.background.color" description="Background Color" type="color" default="$(widget.background.color)"  value="#ffffff"/>
     <Variable name="footer.text.color" description="Text Color" type="color" default="$(body.text.color)"  value="#444444"/>
   </Group>

   <Variable name="title.shadow.spread" description="Title Shadow" type="length" default="-1px" min="-1px" max="100px" value="-1px"/>

   <Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)"
       default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>
   <Variable name="body.background.gradient.cap" description="Body Gradient Cap" type="url"
       default="none" value="none"/>
   <Variable name="body.background.size" description="Body Background Size" type="string" default="auto" value="auto"/>

   <Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
       default="none" value="url(https://resources.blogblog.com/blogblog/data/1kt/awesomeinc/tabs_gradient_light.png)"/>

   <Variable name="header.background.gradient" description="Header Background Gradient" type="url" default="none"  value="none"/>
   <Variable name="header.padding.top" description="Header Top Padding" type="length" default="22px" min="0" max="100px" value="22px"/>
   <Variable name="header.margin.top" description="Header Top Margin" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="header.margin.bottom" description="Header Bottom Margin" type="length" default="0" min="0" max="100px" value="0"/>

   <Variable name="widget.padding.top" description="Widget Padding Top" type="length" default="8px" min="0" max="20px" value="8px"/>
   <Variable name="widget.padding.side" description="Widget Padding Side" type="length" default="15px" min="0" max="100px" value="15px"/>
   <Variable name="widget.outer.margin.top" description="Widget Top Margin" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="widget.outer.background.gradient" description="Gradient" type="url" default="none"  value="none"/>
   <Variable name="widget.border.radius" description="Gadget Border Radius" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="outer.shadow.spread" description="Outer Shadow Size" type="length" default="0" min="0" max="100px" value="0"/>

   <Variable name="date.header.border.radius.top" description="Date Header Border Radius Top" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="date.header.position" description="Date Header Position" type="length" default="15px" min="0" max="100px" value="15px"/>

   <Variable name="date.space" description="Date Space" type="length" default="30px" min="0" max="100px" value="30px"/>
   <Variable name="date.position" description="Date Float" type="string" default="static"  value="static"/>
   <Variable name="date.padding.bottom" description="Date Padding Bottom" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="date.border.size" description="Date Border Size" type="length" default="0" min="0" max="10px" value="0"/>
   <Variable name="date.background" description="Date Background" type="background" color="transparent"
       default="$(color) none no-repeat scroll top left"  value="$(color) none no-repeat scroll top left"/>
   <Variable name="date.first.border.radius.top" description="Date First top radius" type="length" default="$(widget.border.radius)" min="0" max="100px" value="0"/>
   <Variable name="date.last.space.bottom" description="Date Last Space Bottom" type="length"
       default="20px" min="0" max="100px" value="20px"/>
   <Variable name="date.last.border.radius.bottom" description="Date Last bottom radius" type="length" default="$(widget.border.radius)" min="0" max="100px" value="0"/>

   <Variable name="post.first.padding.top" description="First Post Padding Top" type="length" default="0" min="0" max="100px" value="0"/>

   <Variable name="image.shadow.spread" description="Image Shadow Size" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="image.border.radius" description="Image Border Radius" type="length" default="0" min="0" max="100px" value="0"/>

   <Variable name="separator.outdent" description="Separator Outdent" type="length" default="15px" min="0" max="100px" value="15px"/>
   <Variable name="title.separator.border.size" description="Widget Title Border Size" type="length" default="1px" min="0" max="10px" value="1px"/>
   <Variable name="list.separator.border.size" description="List Separator Border Size" type="length" default="1px" min="0" max="10px" value="1px"/>
   <Variable name="shadow.spread" description="Shadow Size" type="length" default="0" min="0" max="100px" value="20px"/>

   <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left"/>
   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right"/>

   <Variable name="date.side" description="Side where date header is placed" type="string" default="$(endSide)" value="right"/>

   <Variable name="pager.border.radius.top" description="Pager Border Top Radius" type="length" default="$(widget.border.radius)" min="0" max="100px" value="0"/>
   <Variable name="pager.space.top" description="Pager Top Space" type="length" default="1em" min="0" max="20em" value="1em"/>

   <Variable name="footer.background.gradient" description="Background Gradient" type="url" default="none"  value="none"/>

   <Variable name="mobile.background.size" description="Mobile Background Size" type="string"
       default="$(body.background.size)" value="auto"/>
   <Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"
       default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>
   <Variable name="mobile.button.color" description="Mobile Button Color" type="color" default="#ffffff"  value="#ffffff"/>
*/

/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

html body .content-outer {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

a:link {
  text-decoration: none;
  color: $(link.color);
}

a:visited {
  text-decoration: none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration: underline;
  color: $(link.hover.color);
}

.body-fauxcolumn-outer .cap-top {
  position: absolute;
  z-index: 1;

  height: 276px;
  width: 100%;

  background: transparent $(body.background.gradient.cap) repeat-x scroll top left;
  _background-image: none;
}

/* Columns
----------------------------------------------- */
.content-inner {
  padding: 0;
}

.header-inner .section {
  margin: 0 16px;
}

.tabs-inner .section {
  margin: 0 16px;
}

.main-inner {
  padding-top: $(date.space);
}

.main-inner .column-center-inner,
.main-inner .column-left-inner,
.main-inner .column-right-inner {
  padding: 0 5px;
}

*+html body .main-inner .column-center-inner {
  margin-top: -$(date.space);
}

#layout .main-inner .column-center-inner {
  margin-top: 0;
}

/* Header
----------------------------------------------- */
.header-outer {
  margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
  background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: 0 0 $(title.shadow.spread) #000000;
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font: $(description.font);
  color: $(description.text.color);
}

.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
}

.header-inner .Header .titlewrapper {
  padding-top: $(header.padding.top);
}

/* Tabs
----------------------------------------------- */
.tabs-outer {
  overflow: hidden;
  position: relative;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
}

#layout .tabs-outer {
  overflow: visible;
}

.tabs-cap-top, .tabs-cap-bottom {
  position: absolute;
  width: 100%;

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

}

.tabs-cap-bottom {
  bottom: 0;
}

.tabs-inner .widget li a {
  display: inline-block;

  margin: 0;
  padding: .6em 1.5em;

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

  border-top: 1px solid $(tabs.border.color);
  border-bottom: 1px solid $(tabs.border.color);
  border-$startSide: 1px solid $(tabs.border.color);

  height: 16px;
  line-height: 16px;
}

.tabs-inner .widget li:last-child a {
  border-$endSide: 1px solid $(tabs.border.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  background: $(tabs.selected.background.color) $(tabs.background.gradient) repeat-x scroll 0 -100px;
  color: $(tabs.selected.text.color);
}

/* Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

/* Widgets
----------------------------------------------- */
.main-inner .section {
  margin: 0 27px;
  padding: 0;
}

.main-inner .column-left-outer,
.main-inner .column-right-outer {
  margin-top: $(widget.outer.margin.top);
}

#layout .main-inner .column-left-outer,
#layout .main-inner .column-right-outer {
  margin-top: 0;
}

.main-inner .column-left-inner,
.main-inner .column-right-inner {
  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat 0 0;

  -moz-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
  -goog-ms-box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: 0 0 $(outer.shadow.spread) rgba(0, 0, 0, .2);

  -moz-border-radius: $(widget.border.radius);
  -webkit-border-radius: $(widget.border.radius);
  -goog-ms-border-radius: $(widget.border.radius);
  border-radius: $(widget.border.radius);
}

#layout .main-inner .column-left-inner,
#layout .main-inner .column-right-inner {
  margin-top: 0;
}

.sidebar .widget {
  font: $(widget.font);
  color: $(widget.text.color);
}

.sidebar .widget a:link {
  color: $(widget.link.color);
}

.sidebar .widget a:visited {
  color: $(widget.link.visited.color);
}

.sidebar .widget a:hover {
  color: $(widget.link.hover.color);
}

.sidebar .widget h2 {
  text-shadow: 0 0 $(title.shadow.spread) #000000;
}

.main-inner .widget {
  background-color: $(widget.background.color);
  border: 1px solid $(widget.border.color);
  padding: 0 $(widget.padding.side) 15px;
  margin: 20px -16px;

  -moz-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
  -goog-ms-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

  -moz-border-radius: $(widget.border.radius);
  -webkit-border-radius: $(widget.border.radius);
  -goog-ms-border-radius: $(widget.border.radius);
  border-radius: $(widget.border.radius);
}

.main-inner .widget h2 {
  margin: 0 -$(separator.outdent);
  padding: .6em $(separator.outdent) .5em;
  border-bottom: 1px solid $(widget.border.bevel.color);
}

.footer-inner .widget h2 {
  padding: 0 0 .4em;

  border-bottom: 1px solid $(widget.border.bevel.color);
}

.main-inner .widget h2 + div, .footer-inner .widget h2 + div {
  border-top: $(title.separator.border.size) solid $(widget.border.color);
  padding-top: $(widget.padding.top);
}

.main-inner .widget .widget-content {
  margin: 0 -$(separator.outdent);
  padding: 7px $(separator.outdent) 0;
}

.main-inner .widget ul, .main-inner .widget #ArchiveList ul.flat {
  margin: -$(widget.padding.top) -15px 0;
  padding: 0;

  list-style: none;
}

.main-inner .widget #ArchiveList {
  margin: -$(widget.padding.top) 0 0;
}

.main-inner .widget ul li, .main-inner .widget #ArchiveList ul.flat li {
  padding: .5em 15px;
  text-indent: 0;

  color: $(widget.alternate.text.color);

  border-top: $(list.separator.border.size) solid $(widget.border.color);
  border-bottom: 1px solid $(widget.border.bevel.color);
}

.main-inner .widget #ArchiveList ul li {
  padding-top: .25em;
  padding-bottom: .25em;
}

.main-inner .widget ul li:first-child, .main-inner .widget #ArchiveList ul.flat li:first-child {
  border-top: none;
}

.main-inner .widget ul li:last-child, .main-inner .widget #ArchiveList ul.flat li:last-child {
  border-bottom: none;
}

.post-body {
  position: relative;
}

.main-inner .widget .post-body ul {
  padding: 0 2.5em;
  margin: .5em 0;

  list-style: disc;
}

.main-inner .widget .post-body ul li {
  padding: 0.25em 0;
  margin-bottom: .25em;

  color: $(body.text.color);

  border: none;
}

.footer-inner .widget ul {
  padding: 0;

  list-style: none;
}

.widget .zippy {
  color: $(widget.alternate.text.color);
}

/* Posts
----------------------------------------------- */
body .main-inner .Blog {
  padding: 0;
  margin-bottom: 1em;

  background-color: transparent;
  border: none;

  -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

.main-inner .section:last-child .Blog:last-child {
  padding: 0;
  margin-bottom: 1em;
}

.main-inner .widget h2.date-header {
  margin: 0 -15px 1px;
  padding: 0 0 $(date.padding.bottom) 0;

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

  background: $(date.background);

  border-top: $(date.border.size) solid $(date.border.color);
  border-bottom: 1px solid $(widget.border.bevel.color);

  -moz-border-radius-topleft: $(date.header.border.radius.top);
  -moz-border-radius-topright: $(date.header.border.radius.top);
  -webkit-border-top-left-radius: $(date.header.border.radius.top);
  -webkit-border-top-right-radius: $(date.header.border.radius.top);
  border-top-left-radius: $(date.header.border.radius.top);
  border-top-right-radius: $(date.header.border.radius.top);

  position: $(date.position);
  bottom: 100%;
  $(date.side): $(date.header.position);
  text-shadow: 0 0 $(title.shadow.spread) #000000;
}

.main-inner .widget h2.date-header span {
  font: $(date.font);
  display: block;
  padding: .5em 15px;
  border-left: $(date.border.size) solid $(date.border.color);
  border-right: $(date.border.size) solid $(date.border.color);
}

.date-outer {
  position: relative;
  margin: $(date.space) 0 20px;
  padding: 0 15px;

  background-color: $(post.background.color);
  border: 1px solid $(post.border.color);

  -moz-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
  -goog-ms-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

  -moz-border-radius: $(widget.border.radius);
  -webkit-border-radius: $(widget.border.radius);
  -goog-ms-border-radius: $(widget.border.radius);
  border-radius: $(widget.border.radius);
}

.date-outer:first-child {
  margin-top: 0;
}

.date-outer:last-child {
  margin-bottom: $(date.last.space.bottom);

  -moz-border-radius-bottomleft: $(date.last.border.radius.bottom);
  -moz-border-radius-bottomright: $(date.last.border.radius.bottom);
  -webkit-border-bottom-left-radius: $(date.last.border.radius.bottom);
  -webkit-border-bottom-right-radius: $(date.last.border.radius.bottom);
  -goog-ms-border-bottom-left-radius: $(date.last.border.radius.bottom);
  -goog-ms-border-bottom-right-radius: $(date.last.border.radius.bottom);
  border-bottom-left-radius: $(date.last.border.radius.bottom);
  border-bottom-right-radius: $(date.last.border.radius.bottom);
}

.date-posts {
  margin: 0 -$(separator.outdent);
  padding: 0 $(separator.outdent);

  clear: both;
}

.post-outer, .inline-ad {
  border-top: 1px solid $(post.border.bevel.color);

  margin: 0 -$(separator.outdent);
  padding: 15px $(separator.outdent);
}

.post-outer {
  padding-bottom: 10px;
}

.post-outer:first-child {
  padding-top: $(post.first.padding.top);
  border-top: none;
}

.post-outer:last-child, .inline-ad:last-child {
  border-bottom: none;
}

.post-body {
  position: relative;
}

.post-body img {
  padding: 8px;
  background: $(image.background.color);
  border: 1px solid $(image.border.color);

  -moz-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: 0 0 $(image.shadow.spread) rgba(0, 0, 0, .2);

  -moz-border-radius: $(image.border.radius);
  -webkit-border-radius: $(image.border.radius);
  border-radius: $(image.border.radius);
}

h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

h3.post-title a:hover {
  color: $(link.hover.color);
  text-decoration: underline;
}

.post-header {
  margin: 0 0 1em;
}

.post-body {
  line-height: 1.4;
}

.post-outer h2 {
  color: $(body.text.color);
}

.post-footer {
  margin: 1.5em 0 0;
}

#blog-pager {
  padding: 15px;
  font-size: 120%;

  background-color: $(pager.background.color);
  border: 1px solid $(widget.border.color);

  -moz-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
  -goog-ms-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

  -moz-border-radius: $(widget.border.radius);
  -webkit-border-radius: $(widget.border.radius);
  -goog-ms-border-radius: $(widget.border.radius);
  border-radius: $(widget.border.radius);

  -moz-border-radius-topleft: $(pager.border.radius.top);
  -moz-border-radius-topright: $(pager.border.radius.top);
  -webkit-border-top-left-radius: $(pager.border.radius.top);
  -webkit-border-top-right-radius: $(pager.border.radius.top);
  -goog-ms-border-top-left-radius: $(pager.border.radius.top);
  -goog-ms-border-top-right-radius: $(pager.border.radius.top);
  border-top-left-radius: $(pager.border.radius.top);
  border-top-right-radius-topright: $(pager.border.radius.top);

  margin-top: $(pager.space.top);
}

.blog-feeds, .post-feeds {
  margin: 1em 0;
  text-align: center;
  color: $(feed.text.color);
}

.blog-feeds a, .post-feeds a {
  color: $(feed.link.color);
}

.blog-feeds a:visited, .post-feeds a:visited {
  color: $(feed.link.visited.color);
}

.blog-feeds a:hover, .post-feeds a:hover {
  color: $(feed.link.hover.color);
}

.post-outer .comments {
  margin-top: 2em;
}

/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
  border-top: 1px solid $(tabs.border.color);
  border-bottom: 1px solid $(tabs.border.color);
}

.comments .continue {
  border-top: 2px solid $(tabs.border.color);
}

/* Footer
----------------------------------------------- */
.footer-outer {
  margin: -$(shadow.spread) 0 -1px;
  padding: $(shadow.spread) 0 0;
  color: $(footer.text.color);
  overflow: hidden;
}

.footer-fauxborder-left {
  border-top: 1px solid $(widget.border.color);
  background: $(footer.background.color) $(footer.background.gradient) repeat scroll 0 0;

  -moz-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
  -webkit-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
  -goog-ms-box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);
  box-shadow: 0 0 $(shadow.spread) rgba(0, 0, 0, .2);

  margin: 0 -$(shadow.spread);
}

/* Mobile
----------------------------------------------- */
body.mobile {
  background-size: $(mobile.background.size);
}

.mobile .body-fauxcolumn-outer {
  background: $(mobile.background.overlay);
}

*+html body.mobile .main-inner .column-center-inner {
  margin-top: 0;
}

.mobile .main-inner .widget {
  padding: 0 0 15px;
}

.mobile .main-inner .widget h2 + div,
.mobile .footer-inner .widget h2 + div {
  border-top: none;
  padding-top: 0;
}

.mobile .footer-inner .widget h2 {
  padding: 0.5em 0;
  border-bottom: none;
}

.mobile .main-inner .widget .widget-content {
  margin: 0;
  padding: 7px 0 0;
}

.mobile .main-inner .widget ul,
.mobile .main-inner .widget #ArchiveList ul.flat {
  margin: 0 -15px 0;
}

.mobile .main-inner .widget h2.date-header {
  $(date.side): 0;
}

.mobile .date-header span {
  padding: 0.4em 0;
}

.mobile .date-outer:first-child {
  margin-bottom: 0;
  border: 1px solid $(post.border.color);

  -moz-border-radius-topleft: $(date.first.border.radius.top);
  -moz-border-radius-topright: $(date.first.border.radius.top);
  -webkit-border-top-left-radius: $(date.first.border.radius.top);
  -webkit-border-top-right-radius: $(date.first.border.radius.top);
  -goog-ms-border-top-left-radius: $(date.first.border.radius.top);
  -goog-ms-border-top-right-radius: $(date.first.border.radius.top);
  border-top-left-radius: $(date.first.border.radius.top);
  border-top-right-radius: $(date.first.border.radius.top);
}

.mobile .date-outer {
  border-color: $(post.border.color);
  border-width: 0 1px 1px;
}

.mobile .date-outer:last-child {
  margin-bottom: 0;
}

.mobile .main-inner {
  padding: 0;
}

.mobile .header-inner .section {
  margin: 0;
}

.mobile .post-outer, .mobile .inline-ad {
  padding: 5px 0;
}

.mobile .tabs-inner .section {
  margin: 0 10px;
}

.mobile .main-inner .widget h2 {
  margin: 0;
  padding: 0;
}

.mobile .main-inner .widget h2.date-header span {
  padding: 0;
}

.mobile .main-inner .widget .widget-content {
  margin: 0;
  padding: 7px 0 0;
}

.mobile #blog-pager {
  border: 1px solid transparent;
  background: $(footer.background.color) $(footer.background.gradient) repeat scroll 0 0;
}

.mobile .main-inner .column-left-inner,
.mobile .main-inner .column-right-inner {
  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat 0 0;

  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  -goog-ms-box-shadow: none;
  box-shadow: none;
}

.mobile .date-posts {
  margin: 0;
  padding: 0;
}

.mobile .footer-fauxborder-left {
  margin: 0;
  border-top: inherit;
}

.mobile .main-inner .section:last-child .Blog:last-child {
  margin-bottom: 0;
}

.mobile-index-contents {
  color: $(body.text.color);
}

.mobile .mobile-link-button {
  background: $(link.color) $(tabs.background.gradient) repeat scroll 0 0;
}

.mobile-link-button a:link, .mobile-link-button a:visited {
  color: $(mobile.button.color);
}

.mobile .tabs-inner .PageList .widget-content {
  background: transparent;
  border-top: 1px solid;
  border-color: $(tabs.border.color);
  color: $(tabs.text.color);
}

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
  border-$startSide: 1px solid $(tabs.border.color);
}
]]></b:skin>

Watermark

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Watermark
Designer: Blogger
URL:      www.blogger.com
----------------------------------------------- */

/* Variable definitions
   ====================

   <Variable name="keycolor" description="Main Color" type="color" default="#c0a154" value="#441500"/>

   <Group description="Page Text" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 14px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#333333" value="#ffeedd"/>
   </Group>

   <Group description="Backgrounds" selector=".main-inner">
     <Variable name="body.background.color" description="Outer Background" type="color" default="#c0a154" value="#441500"/>
     <Variable name="footer.background.color" description="Footer Background" type="color" default="transparent" value="#110000"/>
   </Group>

   <Group description="Links" selector=".main-inner">
     <Variable name="link.color" description="Link Color" type="color" default="#cc3300" value="#ffcc77"/>
     <Variable name="link.visited.color" description="Visited Color" type="color" default="#993322" value="#ff8866"/>
     <Variable name="link.hover.color" description="Hover Color" type="color" default="#ff3300" value="#ffeecc"/>
   </Group>

   <Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Title Font" type="font"
         default="normal normal 60px Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 60px Georgia, Utopia, &#39;Palatino Linotype&#39;, Palatino, serif"/>
     <Variable name="header.text.color" description="Title Color" type="color" default="#ffffff"  value="#ffffff"/>
   </Group>

   <Group description="Blog Description" selector=".header .description">
     <Variable name="description.text.color" description="Description Color" type="color"
         default="#997755"  value="#aa9988"/>
   </Group>

   <Group description="Tabs Text" selector=".tabs-inner .widget li a">
     <Variable name="tabs.font" description="Font" type="font"
         default="normal normal 20px Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 20px Georgia, Utopia, &#39;Palatino Linotype&#39;, Palatino, serif"/>
     <Variable name="tabs.text.color" description="Text Color" type="color" default="$(link.color)" value="#ffcc77"/>
     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#000000" value="#ffffff"/>
   </Group>

   <Group description="Tabs Background" selector=".tabs-outer .PageList">
     <Variable name="tabs.background.color" description="Background Color" type="color" default="transparent" value="transparent"/>
     <Variable name="tabs.separator.color" description="Separator Color" type="color" default="$(body.background.color)" value="#776655"/>
   </Group>

   <Group description="Date Header" selector="h2.date-header">
     <Variable name="date.font" description="Font" type="font"
         default="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="date.text.color" description="Text Color" type="color" default="#997755" value="#aa9988"/>
   </Group>

   <Group description="Post" selector="h3.post-title, .comments h4">
     <Variable name="post.title.font" description="Title Font" type="font"
         default="normal normal 30px Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 30px Georgia, Utopia, &#39;Palatino Linotype&#39;, Palatino, serif"/>
     <Variable name="post.background.color" description="Background Color" type="color" default="transparent" value="transparent"/>
     <Variable name="post.border.color" description="Border Color" type="color" default="#ccbb99"  value="#332211"/>
   </Group>

   <Group description="Post Footer" selector=".post-footer">
     <Variable name="post.footer.text.color" description="Text Color" type="color" default="#997755" value="#aa9988"/>
   </Group>

   <Group description="Gadgets" selector="h2">
     <Variable name="widget.title.font" description="Title Font" type="font"
        default="normal normal 20px Georgia, Utopia, 'Palatino Linotype', Palatino, serif" value="normal normal 20px Georgia, Utopia, &#39;Palatino Linotype&#39;, Palatino, serif"/>
     <Variable name="widget.title.text.color" description="Title Color" type="color" default="#000000" value="#ffffff"/>
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#777777" value="#998877"/>
   </Group>

   <Group description="Footer" selector=".footer-inner">
     <Variable name="footer.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#ffeedd"/>
     <Variable name="footer.widget.title.text.color" description="Gadget Title Color" type="color" default="$(widget.title.text.color)" value="#ffffff"/>
   </Group>

   <Group description="Footer Links" selector=".footer-inner">
     <Variable name="footer.link.color" description="Link Color" type="color" default="$(link.color)" value="#ffcc77"/>
     <Variable name="footer.link.visited.color" description="Visited Color" type="color" default="$(link.visited.color)" value="#ff8866"/>
     <Variable name="footer.link.hover.color" description="Hover Color" type="color" default="$(link.hover.color)" value="#ffeecc"/>
   </Group>

   <Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) url(https://resources.blogblog.com/blogblog/data/1kt/watermark/body_background_birds.png) repeat scroll top left" value="$(color) url(https://resources.blogblog.com/blogblog/data/1kt/watermark/body_background_navigator.png) repeat scroll top left"/>
   <Variable name="body.background.overlay" description="Overlay Background" type="background" color="$(body.background.color)"
       default="transparent url(https://resources.blogblog.com/blogblog/data/1kt/watermark/body_overlay_birds.png) no-repeat scroll top right" value="transparent url(https://resources.blogblog.com/blogblog/data/1kt/watermark/body_overlay_navigator.png) no-repeat scroll top center"/>
   <Variable name="body.background.overlay.height" description="Overlay Background Height" type="length" default="121px" min="0" max="1000px" value="256px"/>

   <Variable name="tabs.background.inner" description="Tabs Background Inner" type="url" default="none" value="none"/>
   <Variable name="tabs.background.outer" description="Tabs Background Outer" type="url" default="none" value="none"/>
   <Variable name="tabs.border.size" description="Tabs Border Size" type="length" default="0" min="0" max="10px" value="0"/>
   <Variable name="tabs.shadow.spread" description="Tabs Shadow Spread" type="length" default="0" min="0" max="100px" value="0"/>

   <Variable name="main.padding.top" description="Main Padding Top" type="length" default="30px" min="0" max="100px" value="30px"/>
   <Variable name="main.cap.height" description="Main Cap Height" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="main.cap.image" description="Main Cap Image" type="url" default="none" value="none"/>
   <Variable name="main.cap.overlay" description="Main Cap Overlay" type="url" default="none" value="none"/>
   <Variable name="main.background" description="Main Background" type="background"
       default="transparent none no-repeat scroll top left" value="transparent none no-repeat scroll top left"/>

   <Variable name="post.background.url" description="Post Background URL" type="url"
       default="url(https://resources.blogblog.com/blogblog/data/1kt/watermark/post_background_birds.png)" value="url(https://resources.blogblog.com/blogblog/data/1kt/watermark/post_background_navigator.png)"/>
   <Variable name="post.border.size" description="Post Border Size" type="length" default="1px" min="0" max="10px" value="1px"/>
   <Variable name="post.border.style" description="Post Border Style" type="string" default="dotted" value="dotted"/>
   <Variable name="post.shadow.spread" description="Post Shadow Spread" type="length" default="0" min="0" max="100px" value="0"/>

   <Variable name="footer.background" description="Footer Background" type="background"
       color="$(footer.background.color)" default="$(color) url(https://resources.blogblog.com/blogblog/data/1kt/watermark/body_background_navigator.png) repeat scroll top left" value="$(color) url(https://resources.blogblog.com/blogblog/data/1kt/watermark/body_background_navigator.png) repeat scroll top left"/>

   <Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"
       default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>

   <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left"/>
   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right"/>
*/

/* Use this with templates/1ktemplate-*.html */

/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

html body .content-outer {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

.content-outer {
  font-size: 92%;
}

a:link {
  text-decoration:none;
  color: $(link.color);
}

a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}

.body-fauxcolumns .cap-top {
  margin-top: 30px;
  background: $(body.background.overlay);
  height: $(body.background.overlay.height);
}

.content-inner {
  padding: 0;
}

/* Header
----------------------------------------------- */
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 20px;
  padding-right: 20px;
}

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
  text-shadow: 2px 2px rgba(0, 0, 0, .1);
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font-size: 140%;
  color: $(description.text.color);
}

/* Tabs
----------------------------------------------- */
.tabs-inner .section {
  margin: 0 20px;
}

.tabs-inner .PageList, .tabs-inner .LinkList, .tabs-inner .Labels {
  margin-left: -11px;
  margin-right: -11px;

  background-color: $(tabs.background.color);
  border-top: $(tabs.border.size) solid #ffffff;
  border-bottom: $(tabs.border.size) solid #ffffff;

  -moz-box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3);
  -webkit-box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3);
  -goog-ms-box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3);
  box-shadow: 0 0 $(tabs.shadow.spread) rgba(0, 0, 0, .3);
}

.tabs-inner .PageList .widget-content,
.tabs-inner .LinkList .widget-content,
.tabs-inner .Labels .widget-content {
  margin: -3px -11px;

  background: transparent $(tabs.background.outer)  no-repeat scroll right;
}

.tabs-inner .widget ul {
  padding: 2px 25px;
  max-height: 34px;

  background: transparent $(tabs.background.inner) no-repeat scroll left;
}

.tabs-inner .widget li {
  border: none;
}

.tabs-inner .widget li a {
  display: inline-block;

  padding: .25em 1em;

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

  border-$endSide: 1px solid $(tabs.separator.color);
}

.tabs-inner .widget li:first-child a {
  border-$startSide: 1px solid $(tabs.separator.color);
}

.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  color: $(tabs.selected.text.color);
}

/* Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);

  margin: 0 0 .5em;
}

h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}

/* Main
----------------------------------------------- */
.main-inner .column-center-inner,
.main-inner .column-left-inner,
.main-inner .column-right-inner {
  padding: 0 5px;
}

.main-outer {
  margin-top: $(main.cap.height);
  background: $(main.background);
}

.main-inner {
  padding-top: $(main.padding.top);
}

.main-cap-top {
  position: relative;
}

.main-cap-top .cap-right {
  position: absolute;

  height: $(main.cap.height);
  width: 100%;

  bottom: 0;

  background: transparent $(main.cap.image) repeat-x scroll bottom center;
}

.main-cap-top .cap-left {
  position: absolute;

  height: 245px;
  width: 280px;
  right: 0;
  bottom: 0;

  background: transparent $(main.cap.overlay) no-repeat scroll bottom left;
}

/* Posts
----------------------------------------------- */
.post-outer {
  padding: 15px 20px;
  margin: 0 0 25px;

  background: $(post.background.color) $(post.background.url) repeat scroll top left;
  _background-image: none;

  border: $(post.border.style) $(post.border.size) $(post.border.color);

  -moz-box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
  -goog-ms-box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
  box-shadow: 0 0 $(post.shadow.spread) rgba(0, 0, 0, .1);
}

h3.post-title {
  font: $(post.title.font);
  margin: 0;
}

.comments h4 {
  font: $(post.title.font);
  margin: 1em 0 0;
}

.post-body {
  font-size: 105%;
  line-height: 1.5;
  position: relative;
}

.post-header {
  margin: 0 0 1em;

  color: $(post.footer.text.color);
}

.post-footer {
  margin: 10px 0 0;
  padding: 10px 0 0;

  color: $(post.footer.text.color);
  border-top: dashed 1px $(widget.alternate.text.color);
}

#blog-pager {
  font-size: 140%
}

#comments .comment-author {
  padding-top: 1.5em;

  border-top: dashed 1px $(widget.alternate.text.color);

  background-position: 0 1.5em;
}

#comments .comment-author:first-child {
  padding-top: 0;

  border-top: none;
}

.avatar-image-container {
  margin: .2em 0 0;
}

/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
  border-top: 1px solid $(widget.alternate.text.color);
  border-bottom: 1px solid $(widget.alternate.text.color);
}

.comments .continue {
  border-top: 2px solid $(widget.alternate.text.color);
}

/* Widgets
----------------------------------------------- */
.widget ul, .widget #ArchiveList ul.flat {
  padding: 0;
  list-style: none;
}

.widget ul li, .widget #ArchiveList ul.flat li {
  padding: .35em 0;
  text-indent: 0;
  border-top: dashed 1px $(widget.alternate.text.color);
}

.widget ul li:first-child, .widget #ArchiveList ul.flat li:first-child {
  border-top: none;
}

.widget .post-body ul {
  list-style: disc;
}

.widget .post-body ul li {
  border: none;
}

.widget .zippy {
  color: $(widget.alternate.text.color);
}

.post-body img, .post-body .tr-caption-container, .Profile img, .Image img,
.BlogList .item-thumbnail img {
  padding: 5px;

  background: #fff;

  -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  -goog-ms-box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
  box-shadow: 1px 1px 5px rgba(0, 0, 0, .5);
}

.post-body img, .post-body .tr-caption-container {
  padding: 8px;
}

.post-body .tr-caption-container {
  color: #333333;
}

.post-body .tr-caption-container img {
  padding: 0;

  background: transparent;
  border: none;

  -moz-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
  -goog-ms-box-shadow: 0 0 0 rgba(0, 0, 0, .1);
  box-shadow: 0 0 0 rgba(0, 0, 0, .1);
}

/* Footer
----------------------------------------------- */
.footer-outer {
  color:$(footer.text.color);
  background: $(footer.background);
}

.footer-outer a {
  color: $(footer.link.color);
}

.footer-outer a:visited {
  color: $(footer.link.visited.color);
}

.footer-outer a:hover {
  color: $(footer.link.hover.color);
}

.footer-outer .widget h2 {
  color: $(footer.widget.title.text.color);
}

/* Mobile
----------------------------------------------- */
body.mobile  {
  background-size: 100% auto;
}

.mobile .body-fauxcolumn-outer {
  background: $(mobile.background.overlay);
}

html .mobile .mobile-date-outer {
  border-bottom: none;
  background: $(post.background.color) $(post.background.url) repeat scroll top left;
  _background-image: none;
  margin-bottom: 10px;
}

.mobile .main-inner .date-outer {
  padding: 0;
}

.mobile .main-inner .date-header {
  margin: 10px;
}

.mobile .main-cap-top {
  z-index: -1;
}

.mobile .content-outer {
  font-size: 100%;
}

.mobile .post-outer {
  padding: 10px;
}

.mobile .main-cap-top .cap-left {
  background: transparent none no-repeat scroll bottom left;
}

.mobile .body-fauxcolumns .cap-top {
  margin: 0;
}

.mobile-link-button {
  background: $(post.background.color) $(post.background.url) repeat scroll top left;
}

.mobile-link-button a:link, .mobile-link-button a:visited {
  color: $(link.color);
}

.mobile-index-date .date-header {
  color: $(date.text.color);
}

.mobile-index-contents {
  color: $(body.text.color);
}

.mobile .tabs-inner .section {
  margin: 0;
}

.mobile .tabs-inner .PageList {
  margin-left: 0;
  margin-right: 0;
}

.mobile .tabs-inner .PageList .widget-content {
  margin: 0;
  color: $(tabs.selected.text.color);
  background: $(post.background.color) $(post.background.url) repeat scroll top left;
}

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
  border-$startSide: 1px solid $(tabs.separator.color);
}
]]></b:skin>

Ethereal

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Ethereal
Designer: Jason Morrow
URL:      jasonmorrow.etsy.com
----------------------------------------------- */

/* Variable definitions
   ====================
   <Variable name="keycolor" description="Main Color" type="color" default="#000000" value="#000000"/>

   <Group description="Body Text" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 13px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#666666" value="#666666"/>
   </Group>

   <Group description="Background" selector=".body-fauxcolumns-outer">
     <Variable name="body.background.color" description="Outer Background" type="color" default="#fb5e53" value="#fb5e53"/>
     <Variable name="content.background.color" description="Main Background" type="color" default="#ffffff" value="#ffffff"/>
     <Variable name="body.border.color" description="Border Color" type="color" default="#fb5e53" value="#fb5e53"/>
   </Group>

   <Group description="Links" selector=".main-inner">
     <Variable name="link.color" description="Link Color" type="color" default="#2198a6" value="#2198a6"/>
     <Variable name="link.visited.color" description="Visited Color" type="color" default="#4d469c" value="#4d469c"/>
     <Variable name="link.hover.color" description="Hover Color" type="color" default="$(link.color)" value="#2198a6"/>
   </Group>

   <Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Font" type="font"
         default="normal normal 60px Times, 'Times New Roman', FreeSerif, serif" value="normal normal 60px Times, &#39;Times New Roman&#39;, FreeSerif, serif"/>
     <Variable name="header.text.color" description="Text Color" type="color" default="#ff8b8b" value="#ff8b8b"/>
   </Group>

   <Group description="Blog Description" selector=".header .description">
     <Variable name="description.text.color" description="Description Color" type="color"
         default="#666666" value="#666666"/>
   </Group>

   <Group description="Tabs Text" selector=".tabs-inner .widget li a">
     <Variable name="tabs.font" description="Font" type="font"
         default="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#ffffff" value="#ffffff"/>
     <Variable name="tabs.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#666666"/>
   </Group>

   <Group description="Tabs Background" selector=".tabs-outer .PageList">
     <Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="#ffa183" value="#ffa183"/>
     <Variable name="tabs.background.color" description="Background Color" type="color" default="#ffdfc7" value="#ffdfc7"/>
     <Variable name="tabs.border.bevel.color" description="Bevel Color" type="color" default="#fb5e53" value="#fb5e53"/>
   </Group>

   <Group description="Post Title" selector="h3.post-title, h4, h3.post-title a">
     <Variable name="post.title.font" description="Font" type="font"
         default="normal normal 24px Times, Times New Roman, serif" value="normal normal 24px Times, Times New Roman, serif"/>
     <Variable name="post.title.text.color" description="Text Color" type="color" default="#2198a6" value="#2198a6"/>
   </Group>

   <Group description="Gadget Title" selector="h2">
     <Variable name="widget.title.font" description="Title Font" type="font"
        default="normal bold 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal bold 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>
     <Variable name="widget.title.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#666666"/>
     <Variable name="widget.title.border.bevel.color" description="Bevel Color" type="color" default="#dbdbdb" value="#dbdbdb"/>
   </Group>

   <Group description="Accents" selector=".main-inner .widget">
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#cccccc" value="#cccccc"/>
     <Variable name="widget.border.bevel.color" description="Bevel Color" type="color" default="#dbdbdb" value="#dbdbdb"/>
   </Group>

   <Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) none repeat-x scroll top left" value="#fb5e53 url(https://resources.blogblog.com/blogblog/data/1kt/ethereal/birds-2toned-bg.png) repeat-x scroll top center"/>
   <Variable name="body.background.gradient" description="Body Gradient Cap" type="url"
       default="none" value="none"/>
   <Variable name="body.background.imageBorder" description="Body Image Border" type="url"
       default="none" value="url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMNjViMzQ0ZDEtMWU1NS00ZTBkLWFjY2EtZjM5YmU4OTA2MjBm)"/>
   <Variable name="body.background.imageBorder.position.left" description="Body Image Border Left" type="length"
       default="0" min="0" max="400px" value="300px"/>
   <Variable name="body.background.imageBorder.position.right" description="Body Image Border Right" type="length"
       default="0" min="0" max="400px" value="299px"/>
   <Variable name="header.background.gradient" description="Header Background Gradient" type="url" default="none" value="none"/>
   <Variable name="content.background.gradient" description="Content Gradient" type="url" default="none" value="url(https://resources.blogblog.com/blogblog/data/1kt/ethereal/bird-2toned-blue-fade.png)"/>

   <Variable name="link.decoration" description="Link Decoration" type="string" default="none" value="none"/>
   <Variable name="link.visited.decoration" description="Link Visited Decoration" type="string" default="$(link.decoration)" value="none"/>
   <Variable name="link.hover.decoration" description="Link Hover Decoration" type="string" default="underline" value="underline"/>

   <Variable name="widget.padding.top" description="Widget Padding Top" type="length" default="15px" min="0" max="100px" value="15px"/>

   <Variable name="date.space" description="Date Space" type="length" default="15px" min="0" max="100px" value="15px"/>

   <Variable name="post.first.padding.top" description="First Post Padding Top" type="length" default="0" min="0" max="100px" value="0"/>

   <Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string" default="" value=""/>
   <Variable name="mobile.background.size" description="Mobile Background Size" type="string" default="auto" value="auto"/>

   <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left"/>
   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right"/>
*/

/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

html body .content-outer {
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

a:link {
  text-decoration: $(link.decoration);
  color: $(link.color);
}

a:visited {
  text-decoration: $(link.visited.decoration);
  color: $(link.visited.color);
}

a:hover {
  text-decoration: $(link.hover.decoration);
  color: $(link.hover.color);
}

.main-inner {
  padding-top: $(date.space);
}

.body-fauxcolumn-outer {
  background: transparent $(body.background.gradient) repeat-x scroll top center;
}

.content-fauxcolumns .fauxcolumn-inner {
  background: $(content.background.color) $(content.background.gradient) repeat-x scroll top left;
  border-left: 1px solid $(body.border.color);
  border-right: 1px solid $(body.border.color);
}

/* Flexible Background
----------------------------------------------- */
.content-fauxcolumn-outer .fauxborder-left {
  width: 100%;
  padding-left: $(body.background.imageBorder.position.left);
  margin-left: -$(body.background.imageBorder.position.left);
  background-color: transparent;
  background-image: $(body.background.imageBorder);
  background-repeat: no-repeat;
  background-position: left top;
}


.content-fauxcolumn-outer .fauxborder-right {
  margin-right: -$(body.background.imageBorder.position.right);
  width: $(body.background.imageBorder.position.right);
  background-color: transparent;
  background-image: $(body.background.imageBorder);
  background-repeat: no-repeat;
  background-position: right top;
}


/* Columns
----------------------------------------------- */

.content-inner {
  padding: 0;
}

/* Header
----------------------------------------------- */
.header-inner {
  padding: 27px 0 3px;
}

.header-inner .section {
  margin: 0 35px;
}

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font-size: 115%;
  color: $(description.text.color);
}

.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 0;
  padding-right: 0;
  margin-bottom: 0;
}

/* Tabs
----------------------------------------------- */
.tabs-outer {
  position: relative;
  background: transparent;
}

.tabs-cap-top, .tabs-cap-bottom {
  position: absolute;
  width: 100%;
}

.tabs-cap-bottom {
  bottom: 0;
}

.tabs-inner {
  padding: 0;
}

.tabs-inner .section {
  margin: 0 35px;
}

*+html body .tabs-inner .widget li {
  padding: 1px;
}

.PageList {
  border-bottom: 1px solid $(tabs.border.bevel.color);
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  position: relative;
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -goog-ms-border-top-left-radius: 5px;
  -goog-ms-border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;

  background: $(tabs.selected.background.color) none ;
  color: $(tabs.selected.text.color);
}

.tabs-inner .widget li a {
  display: inline-block;
  margin: 0;
  margin-right: 1px;
  padding: .65em 1.5em;
  font: $(tabs.font);
  color: $(tabs.text.color);
  background-color: $(tabs.background.color);

  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
  -goog-ms-border-top-left-radius: 5px;
  -goog-ms-border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

/* Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

/* Widgets
----------------------------------------------- */
.main-inner .column-left-inner {
  padding: 0 0 0 20px;
}

.main-inner .column-left-inner .section {
  margin-right: 0;
}

.main-inner .column-right-inner {
  padding: 0 20px 0 0;
}

.main-inner .column-right-inner .section {
  margin-left: 0;
}

.main-inner .section {
  padding: 0;
}

.main-inner .widget {
  padding: 0 0 15px;
  margin: 20px 0;
  border-bottom: 1px solid $(widget.border.bevel.color);
}

.main-inner .widget h2 {
  margin: 0;
  padding: .6em 0 .5em;
}

.footer-inner .widget h2 {
  padding: 0 0 .4em;
}

.main-inner .widget h2 + div, .footer-inner .widget h2 + div {
  padding-top: $(widget.padding.top);
}

.main-inner .widget .widget-content {
  margin: 0;
  padding: 15px 0 0;
}

.main-inner .widget ul, .main-inner .widget #ArchiveList ul.flat {
  margin: -$(widget.padding.top) -15px -15px;
  padding: 0;

  list-style: none;
}

.main-inner .sidebar .widget h2 {
  border-bottom: 1px solid $(widget.title.border.bevel.color);
}

.main-inner .widget #ArchiveList {
  margin: -$(widget.padding.top) 0 0;
}

.main-inner .widget ul li, .main-inner .widget #ArchiveList ul.flat li {
  padding: .5em 15px;
  text-indent: 0;
}

.main-inner .widget #ArchiveList ul li {
  padding-top: .25em;
  padding-bottom: .25em;
}

.main-inner .widget ul li:first-child, .main-inner .widget #ArchiveList ul.flat li:first-child {
  border-top: none;
}

.main-inner .widget ul li:last-child, .main-inner .widget #ArchiveList ul.flat li:last-child {
  border-bottom: none;
}

.main-inner .widget .post-body ul {
  padding: 0 2.5em;
  margin: .5em 0;

  list-style: disc;
}

.main-inner .widget .post-body ul li {
  padding: 0.25em 0;
  margin-bottom: .25em;
  color: $(body.text.color);
  border: none;
}

.footer-inner .widget ul {
  padding: 0;

  list-style: none;
}

.widget .zippy {
  color: $(widget.alternate.text.color);
}

/* Posts
----------------------------------------------- */
.main.section {
  margin: 0 20px;
}

body .main-inner .Blog {
  padding: 0;
  background-color: transparent;
  border: none;
}

.main-inner .widget h2.date-header {
  border-bottom: 1px solid $(widget.title.border.bevel.color);
}

.date-outer {
  position: relative;
  margin: $(date.space) 0 20px;
}

.date-outer:first-child {
  margin-top: 0;
}

.date-posts {
  clear: both;
}

.post-outer, .inline-ad {
  border-bottom: 1px solid $(widget.border.bevel.color);
  padding: 30px 0;
}

.post-outer {
  padding-bottom: 10px;
}

.post-outer:first-child {
  padding-top: $(post.first.padding.top);
  border-top: none;
}

.post-outer:last-child, .inline-ad:last-child {
  border-bottom: none;
}

.post-body img {
  padding: 8px;
}

h3.post-title, h4 {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
  text-decoration: none;
}

h3.post-title a:hover {
  color: $(link.hover.color);
  text-decoration: underline;
}

.post-header {
  margin: 0 0 1.5em;
}

.post-body {
  line-height: 1.4;
}

.post-footer {
  margin: 1.5em 0 0;
}

#blog-pager {
  padding: 15px;
}

.blog-feeds, .post-feeds {
  margin: 1em 0;
  text-align: center;
}

.post-outer .comments {
  margin-top: 2em;
}

/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
  background: $(content.background.color) $(content.background.gradient) repeat-x scroll top left;
}

.comments .comments-content .loadmore a {
  border-top: 1px solid $(widget.title.border.bevel.color);
  border-bottom: 1px solid $(widget.title.border.bevel.color);
}

.comments .comment-thread.inline-thread {
  background: $(content.background.color) $(content.background.gradient) repeat-x scroll top left;
}

.comments .continue {
  border-top: 2px solid $(widget.title.border.bevel.color);
}

/* Footer
----------------------------------------------- */
.footer-inner {
  padding: 30px 0;
  overflow: hidden;
}

/* Mobile
----------------------------------------------- */
body.mobile  {
  background-size: $(mobile.background.size)
}

.mobile .body-fauxcolumn-outer {
  background: $(mobile.background.overlay);
}

.mobile .content-fauxcolumns .fauxcolumn-inner {
  opacity: 0.75;
}

.mobile .content-fauxcolumn-outer .fauxborder-right {
  margin-right: 0;
}

.mobile-link-button {
  background-color: $(tabs.selected.background.color);
}

.mobile-link-button a:link, .mobile-link-button a:visited {
  color: $(tabs.selected.text.color);
}

.mobile-index-contents {
  color: #444444;
}

.mobile .body-fauxcolumn-outer {
  background-size: 100% auto;
}

.mobile .mobile-date-outer {
  border-bottom: transparent;
}

.mobile .PageList {
  border-bottom: none;
}

.mobile .tabs-inner .section {
  margin: 0;
}

.mobile .tabs-inner .PageList .widget-content {
  background: $(tabs.selected.background.color) none;
  color: $(tabs.selected.text.color);
}

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
  border-$startSide: 1px solid $(tabs.selected.text.color);
}

.mobile .footer-inner {
  overflow: visible;
}

body.mobile .AdSense {
  margin: 0 -10px;
}
]]></b:skin>

Travel

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name:     Travel
Designer: Sookhee Lee
URL:      www.plyfly.net
----------------------------------------------- */

/* Variable definitions
   ====================
   <Variable name="keycolor" description="Main Color" type="color" default="#539bcd" value="#539bcd"/>

   <Group description="Page Text" selector="body">
     <Variable name="body.font" description="Font" type="font"
         default="normal normal 13px 'Trebuchet MS',Trebuchet,sans-serif" value="normal normal 13px &#39;Trebuchet MS&#39;,Trebuchet,sans-serif"/>
     <Variable name="body.text.color" description="Text Color" type="color" default="#bbbbbb" value="#bbbbbb"/>
   </Group>

   <Group description="Backgrounds" selector=".body-fauxcolumns-outer">
     <Variable name="body.background.color" description="Outer Background" type="color" default="#539bcd" value="#539bcd"/>
     <Variable name="content.background.color" description="Main Background" type="color" default="transparent" value="transparent"/>
   </Group>

   <Group description="Links" selector=".main-outer">
     <Variable name="link.color" description="Link Color" type="color" default="#ff9900" value="#ff9900"/>
     <Variable name="link.visited.color" description="Visited Color" type="color" default="#b87209" value="#b87209"/>
     <Variable name="link.hover.color" description="Hover Color" type="color" default="#ff9900" value="#ff9900"/>
   </Group>

   <Group description="Blog Title" selector=".header h1">
     <Variable name="header.font" description="Font" type="font"
         default="normal normal 60px 'Trebuchet MS',Trebuchet,sans-serif" value="normal normal 60px &#39;Trebuchet MS&#39;,Trebuchet,sans-serif"/>
     <Variable name="header.text.color" description="Text Color" type="color" default="#ffffff"  value="#ffffff"/>
   </Group>

   <Group description="Blog Description" selector=".header .description">
     <Variable name="description.text.color" description="Description Color" type="color"
         default="$(body.text.color)"  value="#bbbbbb"/>
   </Group>

   <Group description="Tabs Text" selector=".tabs-inner .widget li a">
     <Variable name="tabs.font" description="Font" type="font"
         default="normal bold 16px 'Trebuchet MS',Trebuchet,sans-serif" value="normal bold 16px &#39;Trebuchet MS&#39;,Trebuchet,sans-serif"/>
     <Variable name="tabs.text.color" description="Text Color" type="color" default="#ffffff" value="#ffffff"/>
     <Variable name="tabs.selected.text.color" description="Selected Color" type="color" default="#ffffff" value="#ffffff"/>
   </Group>

   <Group description="Tabs Background" selector=".tabs-outer .PageList">
     <Variable name="tabs.background.color" description="Background Color" type="color" default="transparent" value="transparent"/>
     <Variable name="tabs.selected.background.color" description="Selected Color" type="color" default="transparent" value="transparent"/>
   </Group>

   <Group description="Date Header" selector=".main-inner h2.date-header">
     <Variable name="date.font" description="Font" type="font"
         default="normal normal 14px 'Trebuchet MS',Trebuchet,sans-serif" value="normal normal 14px &#39;Trebuchet MS&#39;,Trebuchet,sans-serif"/>
     <Variable name="date.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#bbbbbb"/>
   </Group>

   <Group description="Post Title" selector="h3.post-title a">
     <Variable name="post.title.font" description="Font" type="font"
         default="normal bold 20px 'Trebuchet MS',Trebuchet,sans-serif" value="normal bold 20px &#39;Trebuchet MS&#39;,Trebuchet,sans-serif"/>
     <Variable name="post.title.text.color" description="Text Color" type="color"
         default="#ffffff" value="#ffffff"/>
   </Group>

   <Group description="Post Background" selector=".column-center-inner">
     <Variable name="post.background.color" description="Background Color" type="color"
         default="transparent" value="transparent"/>
     <Variable name="post.background.url" description="Post Background URL" type="url" default="none" value="none"/>
   </Group>

   <Group description="Gadget Title Color" selector="h2">
     <Variable name="widget.title.font" description="Font" type="font"
        default="normal bold 14px 'Trebuchet MS',Trebuchet,sans-serif" value="normal bold 14px &#39;Trebuchet MS&#39;,Trebuchet,sans-serif"/>
     <Variable name="widget.title.text.color" description="Title Color" type="color" default="#ffffff" value="#ffffff"/>
   </Group>

   <Group description="Gadget Text" selector=".footer-inner .widget, .sidebar .widget">
     <Variable name="widget.font" description="Font" type="font"
        default="$(body.font)" value="normal normal 13px &#39;Trebuchet MS&#39;,Trebuchet,sans-serif"/>
     <Variable name="widget.text.color" description="Text Color" type="color" default="$(body.text.color)" value="#bbbbbb"/>
   </Group>

   <Group description="Gadget Links" selector=".sidebar .widget">
     <Variable name="widget.link.color" description="Link Color" type="color" default="$(body.text.color)" value="#bbbbbb"/>
     <Variable name="widget.link.visited.color" description="Visited Color" type="color" default="$(link.visited.color)" value="#b87209"/>
     <Variable name="widget.alternate.text.color" description="Alternate Color" type="color" default="#ffffff" value="#ffffff"/>
   </Group>

   <Group description="Sidebar Background" selector=".column-left-inner .column-right-inner">
     <Variable name="widget.outer.background.color" description="Background Color" type="color" default="transparent"  value="transparent"/>
     <Variable name="widget.border.bevel.color" description="Bevel Color" type="color" default="transparent"  value="transparent"/>
   </Group>

   <Variable name="body.background" description="Body Background" type="background"
       color="$(body.background.color)" default="$(color) none repeat-x scroll top center" value="#539bcd url(//themes.googleusercontent.com/image?id=0BwVBOzw_-hbMYTM3ZTRlZTktYzE4ZC00NWU0LWEyMzctOWFlZjVkZTkzNGY4) repeat fixed top center"/>
   <Variable name="content.background" description="Content Background" type="background"
       color="$(content.background.color)" default="$(color) none repeat scroll top center" value="transparent url(https://resources.blogblog.com/blogblog/data/1kt/travel/bg_black_70.png) repeat scroll top left"/>
   <Variable name="comments.background" description="Comments Background" type="background"
       default="#cccccc none repeat scroll top center" value="transparent url(https://resources.blogblog.com/blogblog/data/1kt/travel/bg_black_50.png) repeat scroll top center"/>

   <Variable name="content.imageBorder.top.space" description="Content Image Border Top Space" type="length" default="0" min="0" max="100px" value="0"/>
   <Variable name="content.imageBorder.top" description="Content Image Border Top" type="url" default="none" value="none"/>

   <Variable name="content.margin" description="Content Margin Top" type="length" default="20px" min="0" max="100px" value="20px"/>
   <Variable name="content.padding" description="Content Padding" type="length" default="20px" min="0" max="100px" value="20px"/>
   <Variable name="content.posts.padding" description="Posts Content Padding" type="length" default="10px" min="0" max="100px" value="10px"/>

   <Variable name="tabs.background.gradient" description="Tabs Background Gradient" type="url"
       default="url(https://resources.blogblog.com/blogblog/data/1kt/travel/bg_black_50.png)" value="url(https://resources.blogblog.com/blogblog/data/1kt/travel/bg_black_50.png)"/>
   <Variable name="tabs.selected.background.gradient" description="Tabs Selected Background Gradient" type="url"
       default="url(https://resources.blogblog.com/blogblog/data/1kt/travel/bg_black_50.png)" value="url(https://resources.blogblog.com/blogblog/data/1kt/travel/bg_black_50.png)"/>
   <Variable name="widget.outer.background.gradient" description="Sidebar Gradient" type="url"
       default="url(https://resources.blogblog.com/blogblog/data/1kt/travel/bg_black_50.png)" value="url(https://resources.blogblog.com/blogblog/data/1kt/travel/bg_black_50.png)"/>
   <Variable name="footer.background.gradient" description="Footer Background Gradient" type="url" default="none" value="none"/>
   <Variable name="mobile.background.overlay" description="Mobile Background Overlay" type="string"
       default="transparent none repeat scroll top left" value="transparent none repeat scroll top left"/>
   <Variable name="mobile.button.color" description="Mobile Button Color" type="color" default="#ffffff"  value="#ffffff"/>
   <Variable name="startSide" description="Side where text starts in blog language" type="automatic" default="left"/>
   <Variable name="endSide" description="Side where text ends in blog language" type="automatic" default="right"/>
*/

/* Content
----------------------------------------------- */
body {
  font: $(body.font);
  color: $(body.text.color);
  background: $(body.background);
}

html body .region-inner {
  min-width: 0;
  max-width: 100%;
  width: auto;
}

a:link {
  text-decoration:none;
  color: $(link.color);
}

a:visited {
  text-decoration:none;
  color: $(link.visited.color);
}

a:hover {
  text-decoration:underline;
  color: $(link.hover.color);
}

.content-outer .content-cap-top {
  height: $(content.imageBorder.top.space);
  background: transparent $(content.imageBorder.top) repeat-x scroll top center;
}

.content-outer {
  margin: 0 auto;
  padding-top: $(content.margin);
}

.content-inner {
  background: $(content.background);
  background-position: left -$(content.imageBorder.top.space);
  background-color: $(content.background.color);
  padding: $(content.padding);
}

.main-inner .date-outer {
  margin-bottom: 2em;
}

/* Header
----------------------------------------------- */
.header-inner .Header .titlewrapper,
.header-inner .Header .descriptionwrapper {
  padding-left: 10px;
  padding-right: 10px;
}

.Header h1 {
  font: $(header.font);
  color: $(header.text.color);
}

.Header h1 a {
  color: $(header.text.color);
}

.Header .description {
  font-size: 130%;
}

/* Tabs
----------------------------------------------- */
.tabs-inner {
  margin: 1em 0 0;
  padding: 0;
}

.tabs-inner .section {
  margin: 0;
}

.tabs-inner .widget ul {
  padding: 0;
  background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll top center;
}

.tabs-inner .widget li {
  border: none;
}

.tabs-inner .widget li a {
  display: inline-block;
  padding: 1em 1.5em;
  color: $(tabs.text.color);
  font: $(tabs.font);
}

.tabs-inner .widget li.selected a,
.tabs-inner .widget li a:hover {
  position: relative;
  z-index: 1;
  background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;
  color: $(tabs.selected.text.color);

}
/* Headings
----------------------------------------------- */
h2 {
  font: $(widget.title.font);
  color: $(widget.title.text.color);
}

.main-inner h2.date-header {
  font: $(date.font);
  color: $(date.text.color);
}

.footer-inner .widget h2,
.sidebar .widget h2 {
  padding-bottom: .5em;
}

/* Main
----------------------------------------------- */

.main-inner {
  padding: $(content.padding) 0;
}

.main-inner .column-center-inner {
  padding: $(content.posts.padding) 0;
}

.main-inner .column-center-inner .section {
  margin: 0 $(content.posts.padding);
}

.main-inner .column-right-inner {
  margin-left: $(content.padding);
}

.main-inner .fauxcolumn-right-outer .fauxcolumn-inner {
  margin-left: $(content.padding);
  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}

.main-inner .column-left-inner {
  margin-right: $(content.padding);
}

.main-inner .fauxcolumn-left-outer .fauxcolumn-inner {
  margin-right: $(content.padding);
  background: $(widget.outer.background.color) $(widget.outer.background.gradient) repeat scroll top left;
}

.main-inner .column-left-inner,
.main-inner .column-right-inner {
  padding: 15px 0;
}

/* Posts
----------------------------------------------- */
h3.post-title {
  margin-top: 20px;
}

h3.post-title a {
  font: $(post.title.font);
  color: $(post.title.text.color);
}

h3.post-title a:hover {
  text-decoration: underline;
}

.main-inner .column-center-outer {
  background: $(post.background.color) $(post.background.url) repeat scroll top left;
  _background-image: none;
}

.post-body {
  line-height: 1.4;
  position: relative;
}

.post-header {
  margin: 0 0 1em;

  line-height: 1.6;
}

.post-footer {
  margin: .5em 0;
  line-height: 1.6;
}

#blog-pager {
  font-size: 140%;
}

#comments {
  background: $(comments.background);
  padding: 15px;
}

#comments .comment-author {
  padding-top: 1.5em;
}

#comments h4,
#comments .comment-author a,
#comments .comment-timestamp a {
  color: $(post.title.text.color);
}

#comments .comment-author:first-child {
  padding-top: 0;
  border-top: none;
}

.avatar-image-container {
  margin: .2em 0 0;
}

/* Comments
----------------------------------------------- */
#comments a {
  color: $(post.title.text.color);
}

.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

.comments .comments-content .loadmore a {
  border-top: 1px solid $(post.title.text.color);
  border-bottom: 1px solid $(post.title.text.color);
}

.comments .comment-thread.inline-thread {
  background: $(post.background.color);
}

.comments .continue {
  border-top: 2px solid $(post.title.text.color);
}


/* Widgets
----------------------------------------------- */
.sidebar .widget {
  border-bottom: 2px solid $(widget.border.bevel.color);
  padding-bottom: 10px;
  margin: 10px 0;
}

.sidebar .widget:first-child {
  margin-top: 0;
}

.sidebar .widget:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.footer-inner .widget,
.sidebar .widget {
  font: $(widget.font);
  color: $(widget.text.color);
}


.sidebar .widget a:link {
  color: $(widget.link.color);
  text-decoration: none;
}

.sidebar .widget a:visited {
  color: $(widget.link.visited.color);
}

.sidebar .widget a:hover {
  color: $(widget.link.color);
  text-decoration: underline;
}

.footer-inner .widget a:link {
  color: $(link.color);
  text-decoration: none;
}

.footer-inner .widget a:visited {
  color: $(link.visited.color);
}

.footer-inner .widget a:hover {
  color: $(link.color);
  text-decoration: underline;
}

.widget .zippy {
  color: $(widget.alternate.text.color);
}

.footer-inner {
  background: transparent $(footer.background.gradient) repeat scroll top center;
}

/* Mobile
----------------------------------------------- */
body.mobile  {
  background-size: 100% auto;
}

body.mobile .AdSense {
  margin: 0 -10px;
}

.mobile .body-fauxcolumn-outer {
  background: $(mobile.background.overlay);
}

.mobile .footer-inner .widget a:link {
  color: $(widget.link.color);
  text-decoration: none;
}

.mobile .footer-inner .widget a:visited {
  color: $(widget.link.visited.color);
}

.mobile-post-outer a {
  color: $(post.title.text.color);
}

.mobile-link-button {
  background-color: $(link.color);
}

.mobile-link-button a:link, .mobile-link-button a:visited {
  color: $(mobile.button.color);
}

.mobile-index-contents {
  color: $(body.text.color);
}

.mobile .tabs-inner .PageList .widget-content {
  background: $(tabs.selected.background.color) $(tabs.selected.background.gradient) repeat scroll top center;
  color: $(tabs.selected.text.color);
}

.mobile .tabs-inner .PageList .widget-content .pagelist-arrow {
  border-$startSide: 1px solid $(tabs.selected.text.color);
}
]]></b:skin>

Dynamics

<b:skin><![CDATA[/*
-----------------------------------------------
Blogger Template Style
Name: Dynamic Views
----------------------------------------------- */

/* Variable definitions
   ====================
   <Variable name="keycolor" description="Main Color" type="color" default="#ffffff"
         variants="#2b256f,#00b2b4,#4ba976,#696f00,#b38f00,#f07300,#d0422c,#f37a86,#7b5341" value="#ffffff"/>

   <Group description="Page">
     <Variable name="page.text.font" description="Font" type="font"
         default="'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif" value="&#39;Helvetica Neue Light&#39;, HelveticaNeue-Light, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif"/>
     <Variable name="page.text.color" description="Text Color" type="color"
         default="#333333" variants="#333333" value="#333333"/>
     <Variable name="body.background.color" description="Background Color" type="color"
         default="#EEEEEE"
         variants="#dfdfea,#d9f4f4,#e4f2eb,#e9ead9,#f4eed9,#fdead9,#f8e3e0,#fdebed,#ebe5e3" value="#EEEEEE"/>
   </Group>

   <Variable name="body.background" description="Body Background" type="background"
       color="#EEEEEE" default="$(color) none repeat scroll top left" value="$(color) none repeat scroll top left"/>

   <Group description="Header">
     <Variable name="header.background.color" description="Background Color" type="color"
         default="#F3F3F3" variants="#F3F3F3" value="#F3F3F3"/>
   </Group>

   <Group description="Header Bar">
     <Variable name="primary.color" description="Background Color" type="color"
         default="#333333" variants="#2b256f,#00b2b4,#4ba976,#696f00,#b38f00,#f07300,#d0422c,#f37a86,#7b5341" value="#333333"/>
     <Variable name="menu.font" description="Font" type="font"
         default="'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif" value="&#39;Helvetica Neue Light&#39;, HelveticaNeue-Light, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif"/>
     <Variable name="menu.text.color" description="Text Color" type="color"
         default="#FFFFFF" variants="#FFFFFF" value="#FFFFFF"/>
   </Group>

   <Group description="Links">
     <Variable name="link.font" description="Link Text" type="font"
         default="'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif" value="&#39;Helvetica Neue Light&#39;, HelveticaNeue-Light, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif"/>
     <Variable name="link.color" description="Link Color" type="color"
         default="#009EB8"
         variants="#2b256f,#00b2b4,#4ba976,#696f00,#b38f00,#f07300,#d0422c,#f37a86,#7b5341" value="#009EB8"/>
     <Variable name="link.hover.color" description="Link Hover Color" type="color"
         default="#009EB8"
         variants="#2b256f,#00b2b4,#4ba976,#696f00,#b38f00,#f07300,#d0422c,#f37a86,#7b5341" value="#009EB8"/>
     <Variable name="link.visited.color" description="Link Visited Color" type="color"
         default="#009EB8"
         variants="#2b256f,#00b2b4,#4ba976,#696f00,#b38f00,#f07300,#d0422c,#f37a86,#7b5341" value="#009EB8"/>
   </Group>

   <Group description="Blog Title">
     <Variable name="blog.title.font" description="Font" type="font"
         default="'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif" value="&#39;Helvetica Neue Light&#39;, HelveticaNeue-Light, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif"/>
     <Variable name="blog.title.color" description="Color" type="color"
         default="#555555" variants="#555555" value="#555555"/>
   </Group>

   <Group description="Blog Description">
     <Variable name="blog.description.font" description="Font" type="font"
         default="'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif" value="&#39;Helvetica Neue Light&#39;, HelveticaNeue-Light, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif"/>
     <Variable name="blog.description.color" description="Color" type="color"
         default="#555555" variants="#555555" value="#555555"/>
   </Group>

   <Group description="Post Title">
     <Variable name="post.title.font" description="Font" type="font"
         default="'Helvetica Neue Light', HelveticaNeue-Light, 'Helvetica Neue', Helvetica, Arial, sans-serif" value="&#39;Helvetica Neue Light&#39;, HelveticaNeue-Light, &#39;Helvetica Neue&#39;, Helvetica, Arial, sans-serif"/>
     <Variable name="post.title.color" description="Color" type="color"
         default="#333333" variants="#333333" value="#333333"/>
   </Group>

   <Group description="Date Ribbon">
     <Variable name="ribbon.color" description="Color" type="color"
         default="#666666" variants="#2b256f,#00b2b4,#4ba976,#696f00,#b38f00,#f07300,#d0422c,#f37a86,#7b5341" value="#666666"/>
     <Variable name="ribbon.hover.color" description="Hover Color" type="color"
         default="#AD3A2B" variants="#AD3A2B" value="#AD3A2B"/>
   </Group>

   <Variable name="blitzview" description="Initial view type" type="string" default="sidebar" value="classic"/>
*/

/* BEGIN CUT */
{
 "font:Text": "$(page.text.font)",
 "color:Text": "$(page.text.color)",
 "image:Background": "$(body.background)",
 "color:Background": "$(body.background.color)",
 "color:Header Background": "$(header.background.color)",
 "color:Primary": "$(primary.color)",
 "color:Menu Text": "$(menu.text.color)",
 "font:Menu": "$(menu.font)",
 "font:Link": "$(link.font)",
 "color:Link": "$(link.color)",
 "color:Link Visited": "$(link.visited.color)",
 "color:Link Hover": "$(link.hover.color)",
 "font:Blog Title": "$(blog.title.font)",
 "color:Blog Title": "$(blog.title.color)",
 "font:Blog Description": "$(blog.description.font)",
 "color:Blog Description": "$(blog.description.color)",
 "font:Post Title": "$(post.title.font)",
 "color:Post Title": "$(post.title.color)",
 "color:Ribbon": "$(ribbon.color)",
 "color:Ribbon Hover": "$(ribbon.hover.color)",
 "view": "$blitzview"
}
/* END CUT */
]]></b:skin>

Contempo

<b:skin version='1.3.3'><![CDATA[/*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
/*
<!-- Constants -->

<Variable name="damionRegular36" description="Damion Regular 36" type="font" default="400 36px Damion, cursive" hideEditor="true"  value="400 36px Damion, cursive"/>
<Variable name="damionRegular62" description="Damion Regular 62" type="font" default="400 62px Damion, cursive" hideEditor="true"  value="400 62px Damion, cursive"/>
<Variable name="playfairDisplayBlack28" description="Playfair Display Black 28" type="font" default="900 28px Playfair Display, serif" hideEditor="true"  value="900 28px Playfair Display, serif"/>
<Variable name="playfairDisplayBlack36" description="Playfair Display Black 36" type="font" default="900 36px Playfair Display, serif" hideEditor="true"  value="900 36px Playfair Display, serif"/>
<Variable name="playfairDisplayBlack44" description="Playfair Display Black 44" type="font" default="900 44px Playfair Display, serif" hideEditor="true"  value="900 44px Playfair Display, serif"/>
<Variable name="robotoNormal15" description="Roboto Normal 15" type="font" default="15px Roboto, sans-serif" hideEditor="true"  value="15px Roboto, sans-serif"/>
<Variable name="robotoNormal16" description="Roboto Normal 16" type="font" default="16px Roboto, sans-serif" hideEditor="true"  value="16px Roboto, sans-serif"/>
<Variable name="robotoLightItalic15" description="Roboto Light Italic 15" type="font" default="italic 300 15px Roboto, sans-serif" hideEditor="true"  value="italic 300 15px Roboto, sans-serif"/>
<Variable name="robotoBold22" description="Roboto Bold 22" type="font" default="bold 22px Roboto, sans-serif" hideEditor="true"  value="bold 22px Roboto, sans-serif"/>
<Variable name="robotoBold30" description="Roboto Bold 30" type="font" default="bold 30px Roboto, sans-serif" hideEditor="true"  value="bold 30px Roboto, sans-serif"/>
<Variable name="robotoBold45" description="Roboto Bold 45" type="font" default="bold 45px Roboto, sans-serif" hideEditor="true"  value="bold 45px Roboto, sans-serif"/>

<!-- Variable definitions -->

<Variable name="keycolor" description="Main Color" type="color" default="#2196f3"  value="#2196f3"/>
<Variable name="startSide" description="Start side in blog language" type="automatic" default="left" hideEditor="true" />
<Variable name="endSide" description="End side in blog language" type="automatic" default="right" hideEditor="true" />

<Group description="Page Text">
  <Variable name="body.text.font" description="Font"
      type="font"
      default="$(robotoNormal15)"  value="15px Roboto, sans-serif"/>
  <Variable name="body.text.color" description="Color"
      type="color"
      default="#757575"  value="#757575"/>
</Group>

<Group description="Backgrounds">
  <Variable name="body.background.height" description="Background height"
      type="length"
      min="420px"
      max="640px"
      default="480px"  value="480px"/>
  <Variable name="body.background" description="Background"
      color="$(body.background.color)"
      type="background"
      default="$(color) none repeat scroll top left"  value="$(color) url(https://themes.googleusercontent.com/image?id=L1lcAxxz0CLgsDzixEprHJ2F38TyEjCyE3RSAjynQDks0lT1BDc1OxXKaTEdLc89HPvdB11X9FDw) no-repeat scroll top center /* Credit: Michael Elkan (http://www.offset.com/photos/394244) */;"/>
  <Variable name="body.background.color" description="Body background color"
      type="color"
      default="#eee"  value="#eeeeee"/>
  <Variable name="posts.background.color" description="Post background color"
      type="color"
      default="#fff"  value="#ffffff"/>
  <Variable name="body.background.blur" description="Background blur"
      type="length"
      min="0px"
      max="50px"
      default="0px"  value="0px"/>
</Group>

<Group description="Links">
  <Variable name="body.link.color" description="Link color"
      type="color"
      default="#2196f3"  value="#2196f3"/>
  <Variable name="body.link.visited.color" description="Visited link color"
      type="color"
      default="$(body.link.color)"  value="#2196f3"/>
  <Variable name="body.link.hover.color" description="Link Hover Color"
      type="color"
      default="$(body.link.color)"  value="#2196f3"/>
</Group>

<Group description="Blog title" selector="div.widget.Header">
  <Variable name="blog.title.font" description="Font"
      type="font"
      default="$(robotoBold45)"  value="bold 45px Roboto, sans-serif"/>
  <Variable name="blog.title.color" description="Color"
      type="color"
      default="#fff"  value="#ffffff"/>
  <Variable name="header.icons.color"
      description="Background icons color"
      type="color"
      default="#fff"  value="#ffffff"/>
</Group>

<Group description="Tabs text" selector="div.widget.PageList">
  <Variable name="tabs.font" description="Font"
      type="font"
      family="$(robotoNormal15.family)"
      size="$(robotoNormal15.size)"
      default="700 normal $(size) $(family)"  value="700 normal $(size) $(family)"/>
  <Variable name="tabs.color" description="Text color"
      type="color"
      default="#ccc"  value="#cccccc"/>
  <Variable name="tabs.selected.color" description="Selected color"
      type="color"
      default="#fff"  value="#ffffff"/>
  <Variable name="tabs.overflow.background.color" description="Popup background color"
      type="color"
      default="$(posts.background.color)"  value="#ffffff"/>
  <Variable name="tabs.overflow.color" description="Popup text color"
      type="color"
      default="$(posts.text.color)"  value="#757575"/>
  <Variable name="tabs.overflow.selected.color" description="Popup selected color"
      type="color"
      default="$(posts.title.color)"  value="#212121"/>
</Group>

<Group description="Posts" selector="div.widget.Blog">
  <Variable name="posts.title.color" description="Post title color"
      type="color"
      default="#212121"  value="#212121"/>
  <Variable name="posts.title.font" description="Post title font"
      type="font"
      default="$(robotoBold22)"  value="bold 22px Roboto, sans-serif"/>
  <Variable name="posts.stream.title.font" description="Post title stream font"
      type="font"
      default="$(robotoBold30)"  value="bold 30px Roboto, sans-serif"/>
  <Variable name="posts.text.font" description="Post text font"
      type="font"
      default="$(body.text.font)"  value="15px Roboto, sans-serif"/>
  <Variable name="posts.text.color" description="Post text color"
      type="color"
      default="$(body.text.color)"  value="#757575"/>
  <Variable name="posts.byline.color" description="Post byline color"
      type="color"
      default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
  <Variable name="blockquote.font" description="Blockquote font"
      type="font"
      default="$(robotoLightItalic15)"  value="italic 300 15px Roboto, sans-serif"/>
  <Variable name="blockquote.color" description="Blockquote color"
      type="color"
      default="#444"  value="#444444"/>
  <Variable name="posts.icons.color"
      description="Post icons color"
      type="color"
      default="#707070"  value="#707070"/>
</Group>

<Group description="Search">
  <Variable name="search.input.color" description="Input color"
      type="color"
      default="$(blog.title.color)"  value="#ffffff"/>
  <Variable name="search.input.font" description="Input font"
      type="font"
      default="$(robotoNormal16)"  value="16px Roboto, sans-serif"/>
  <Variable name="search.placeholder.color" description="Placeholder text color"
      type="color"
      default="$(blog.title.color)"  value="#ffffff"/>
</Group>

<Group description="Sharing">
  <Variable name="sharing.background.color"
      description="Sharing background color"
      type="color"
      default="$(posts.background.color)"  value="#ffffff"/>
  <Variable name="sharing.text.color" description="Sharing text color"
      type="color"
      default="$(posts.title.color)"  value="#212121"/>
  <Variable name="sharing.icons.color"
      description="Sharing icons color"
      type="color"
      default="$(sharing.text.color)"  value="#212121"/>
</Group>

<Group description="Popular posts" selector="div.widget.PopularPosts">
  <Variable name="popularposts.background.color"
      description="Popular post background color"
      type="color"
      default="$(body.background.color)"  value="#eeeeee"/>
  <Variable name="popularposts.byline.color"
      description="Popular post byline color"
      type="color"
      default="$(posts.byline.color)"  value="rgba(0, 0, 0, 0.54)"/>
  <Variable name="popularposts.title.color"
      description="Popular post title color"
      type="color"
      default="$(posts.title.color)"  value="#212121"/>
  <Variable name="popularposts.text.color"
      description="Popular post text color"
      type="color"
      default="$(posts.text.color)"  value="#757575"/>
  <Variable name="popularposts.link.color"
      description="Popular post link color"
      type="color"
      default="$(body.link.color)"  value="#2196f3"/>
</Group>

<Group description="Post navigation" selector='div.blog-pager'>
  <Variable name="posts.navigation.link.color"
      description="Post navigation links color"
      type="color"
      default="$(body.link.color)"  value="#2196f3"/>
  <Variable name="posts.navigation.link.visited.color"
      description="Post navigation links visited color"
      type="color"
      default="$(body.link.visited.color)"  value="#2196f3"/>
  <Variable name="posts.navigation.link.hover.color"
      description="Post navigations links hover color"
      type="color"
      default="$(body.link.hover.color)"  value="#2196f3"/>
</Group>

<Group description="Sidebar" selector="div.sidebar-container">
  <Variable name="sidebar.backgroundColorTop"
      description="Background color (Top)"
      type="color"
      default="#f7f7f7"  value="#ffffff"/>
  <Variable name="sidebar.backgroundColorTopHD"
      description="Background color (Top) - HD"
      type="color"
      default="rgba(255, 255, 255, 1)"  value="#f7f7f7"/>
  <Variable name="sidebar.backgroundColorBottom"
      description="Background color (Bottom)"
      type="color"
      default="#fff"  value="#ffffff"/>
  <Variable name="sidebar.separator.color"
      description="Separator color"
      type="color"
      default="#ccc"  value="#cccccc"/>
  <Variable name="widget.title.color"
      description="Gadget title color"
      type="color"
      default="#212121"  value="#212121"/>
  <Variable name="sidebar.icons.color"
      description="Sidebar icons color"
      type="color"
      default="#707070"  value="#707070"/>
</Group>

<Group description="Author profile" selector='.widget.Profile'>
  <Variable name="profile.title.color" description="Profile title color"
      type="color"
      default="rgba(0,0,0,0.52)"  value="rgba(0,0,0,0.52)"/>
  <Variable name="profile.text.color" description="Profile text color"
      type="color"
      default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
  <Variable name="profile.link.color" description="Profile link color"
      type="color"
      default="$(posts.title.color)"  value="#212121"/>
</Group>

<Group description="Labels" selector=".widget.Label">
  <Variable name="labels.text.color"
      description="Label text color"
      type="color"
      default="$(body.link.color)"  value="rgba(0,0,0,0.54)"/>
  <Variable name="labels.background.color"
      description="Label background color"
      type="color"
      red="$(labels.text.color.red)"
      green="$(labels.text.color.green)"
      blue="$(labels.text.color.blue)"
      default="rgba($red, $green, $blue, 0.05)"  value="#f7f7f7"/>
</Group>

<Group description="Attribution" selector=".widget.Attribution">
  <Variable name="attribution.text.color" description="Attribution text color"
      type="color"
      default="$(body.text.color)"  value="#757575"/>
  <Variable name="attribution.link.color" description="Attribution link color"
      type="color"
      default="$(body.link.color)"  value="#2196f3"/>
  <Variable name="attribution.icon.color" description="Attribution icon color"
      type="color"
      default="#707070"
      hideEditor="true"  value="#707070"/>
</Group>

<Group description="Widths">
  <Variable name="sidebar.width" description="Sidebar width" type="length"
            min="100px" max="1000px" default="284px"  value="284px"/>
  <Variable name="content.width" description="Content width" type="length"
            min="600px" max="2400px" default="922px"  value="922px"/>
  <Variable name="content.margin" description="Content margin" type="length"
            min="0px" max="1000px" default="117px"  value="117px"/>
</Group>
 */

/*!************************************************
 * Blogger Template Style
 * Name: Contempo
 **************************************************/
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
}
#comments .comment .comment-actions,.subscribe-popup .FollowByEmail .follow-by-email-submit,.widget.Profile .profile-link,.widget.Profile .profile-link.visit-profile{
background:0 0;
border:0;
box-shadow:none;
color:$(body.link.color);
cursor:pointer;
font-size:14px;
font-weight:700;
outline:0;
text-decoration:none;
text-transform:uppercase;
width:auto
}
.dim-overlay{
background-color:rgba(0,0,0,.54);
height:100vh;
left:0;
position:fixed;
top:0;
width:100%
}
#sharing-dim-overlay{
background-color:transparent
}
input::-ms-clear{
display:none
}
.blogger-logo,.svg-icon-24.blogger-logo{
fill:#ff9800;
opacity:1
}
.loading-spinner-large{
-webkit-animation:mspin-rotate 1.568s infinite linear;
animation:mspin-rotate 1.568s 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{
from{
-webkit-transform:translateX(0);
transform:translateX(0)
}
to{
-webkit-transform:translateX(-3888px);
transform:translateX(-3888px)
}
}
@keyframes mspin-singlecolor-large-film{
from{
-webkit-transform:translateX(0);
transform:translateX(0)
}
to{
-webkit-transform:translateX(-3888px);
transform:translateX(-3888px)
}
}
@-webkit-keyframes mspin-rotate{
from{
-webkit-transform:rotate(0);
transform:rotate(0)
}
to{
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes mspin-rotate{
from{
-webkit-transform:rotate(0);
transform:rotate(0)
}
to{
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-webkit-keyframes mspin-revrot{
from{
-webkit-transform:rotate(0);
transform:rotate(0)
}
to{
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg)
}
}
@keyframes mspin-revrot{
from{
-webkit-transform:rotate(0);
transform:rotate(0)
}
to{
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg)
}
}
.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,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
height:50px
}
#main{
outline:0
}
.main-heading{
position:absolute;
clip:rect(1px,1px,1px,1px);
padding:0;
border:0;
height:1px;
width:1px;
overflow:hidden
}
.Attribution{
margin-top:1em;
text-align:center
}
.Attribution .blogger img,.Attribution .blogger svg{
vertical-align:bottom
}
.Attribution .blogger img{
margin-$endSide:.5em
}
.Attribution div{
line-height:24px;
margin-top:.5em
}
.Attribution .copyright,.Attribution .image-attribution{
font-size:.7em;
margin-top:1.5em
}
.BLOG_mobile_video_class{
display:none
}
.bg-photo{
background-attachment:scroll!important
}
body .CSS_LIGHTBOX{
z-index:900
}
.extendable .show-less,.extendable .show-more{
border-color:$(body.link.color);
color:$(body.link.color);
margin-top:8px
}
.extendable .show-less.hidden,.extendable .show-more.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:0
}
.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
}
.link-copied-dialog{
max-width:520px;
outline:0
}
.link-copied-dialog .modal-dialog-buttons{
margin-top:8px
}
.link-copied-dialog .goog-buttonset-default{
background:0 0;
border:0
}
.link-copied-dialog .goog-buttonset-default:focus{
outline:0
}
.paging-control-container{
margin-bottom:16px
}
.paging-control-container .paging-control{
display:inline-block
}
.paging-control-container .comment-range-text::after,.paging-control-container .paging-control{
color:$(body.link.color)
}
.paging-control-container .comment-range-text,.paging-control-container .paging-control{
margin-$endSide:8px
}
.paging-control-container .comment-range-text::after,.paging-control-container .paging-control::after{
content:"\b7";
cursor:default;
padding-$startSide:8px;
pointer-events:none
}
.paging-control-container .comment-range-text:last-child::after,.paging-control-container .paging-control:last-child::after{
content:none
}
.byline.reactions iframe{
height:20px
}
.b-notification{
color:#000;
background-color:#fff;
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(.4,0,.2,1);
transition:margin-top .3s cubic-bezier(.4,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
}
@media screen and (max-width:800px){
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>.separator:first-child>a[imageanchor="1"]:first-child{
margin-top:20px
}
.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
}
}
.item-control{
display:none
}
#comments{
border-top:1px dashed rgba(0,0,0,.54);
margin-top:20px;
padding:20px
}
#comments .comment-thread ol{
margin:0;
padding-left:0;
padding-$startSide:0
}
#comments .comment .comment-replybox-single,#comments .comment-thread .comment-replies{
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;
margin-$startSide:60px;
padding-bottom:0
}
#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:700
}
#comments .comment .comment-actions{
bottom:0;
margin-bottom:15px;
position:absolute
}
#comments .comment .comment-actions>*{
margin-right:8px
}
#comments .comment .comment-header .datetime{
bottom:0;
color:rgba($(posts.title.color.red),$(posts.title.color.green),$(posts.title.color.blue),.54);
display:inline-block;
font-size:13px;
font-style:italic;
margin-$startSide:8px
}
#comments .comment .comment-footer .comment-timestamp a,#comments .comment .comment-header .datetime a{
color:rgba($(posts.title.color.red),$(posts.title.color.green),$(posts.title.color.blue),.54)
}
#comments .comment .comment-content,.comment .comment-body{
margin-top:12px;
word-break:break-word
}
.comment-body{
margin-bottom:12px
}
#comments.embed[data-num-comments="0"]{
border:0;
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(.4,0,.2,1);
transition:height .3s cubic-bezier(.4,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
}
.touch-icon:active,.touch-icon:focus{
background-color:rgba(153,153,153,.4);
border-radius:50%
}
svg:not(:root).touch-icon{
overflow:visible
}
html[dir=rtl] .rtl-reversible-icon{
-webkit-transform:scaleX(-1);
-ms-transform:scaleX(-1);
transform:scaleX(-1)
}
.svg-icon-24-button,.touch-icon-button{
background:0 0;
border:0;
margin:0;
outline:0;
padding:0
}
.touch-icon-button .touch-icon:active,.touch-icon-button .touch-icon:focus{
background-color:transparent
}
.touch-icon-button:active .touch-icon,.touch-icon-button:focus .touch-icon{
background-color:rgba(153,153,153,.4);
border-radius:50%
}
.Profile .default-avatar-wrapper .avatar-icon{
border-radius:50%;
border:solid 1px $(posts.icons.color);
box-sizing:border-box;
fill:$(posts.icons.color);
margin:0
}
.Profile .individual .default-avatar-wrapper .avatar-icon{
padding:25px
}
.Profile .individual .avatar-icon,.Profile .individual .profile-img{
height:120px;
width:120px
}
.Profile .team .default-avatar-wrapper .avatar-icon{
padding:8px
}
.Profile .team .avatar-icon,.Profile .team .default-avatar-wrapper,.Profile .team .profile-img{
height:40px;
width:40px
}
.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
}
.post-bottom{
-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-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap
}
.post-footer{
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
flex:1 1 auto;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-ordinal-group:2;
-webkit-order:1;
-ms-flex-order:1;
order:1
}
.post-footer>*{
-webkit-box-flex:0;
-webkit-flex:0 1 auto;
-ms-flex:0 1 auto;
flex:0 1 auto
}
.post-footer .byline:last-child{
margin-$endSide:1em
}
.jump-link{
-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-container.sticky{
left:0;
position:fixed;
right:0;
top:0;
width:auto;
z-index:50;
-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(.4,0,.2,1);
transition-timing-function:cubic-bezier(.4,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:0 0
}
.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(.4,0,.2,1);
transition:height .3s cubic-bezier(.4,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:0
}
.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:700;
text-transform:uppercase;
border-radius:2px;
padding:8px;
margin:-8px
}
.flat-icon-button{
background:0 0;
border:0;
margin:0;
outline:0;
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
}
.overflowable-container{
max-height:$(body.text.font.size * 1.2 + 2 * 8px + 2 * 4px + 4px);
overflow:hidden;
position:relative
}
.overflow-button{
cursor:pointer
}
#overflowable-dim-overlay{
background:0 0
}
.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.overflow.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 .tabs li,.overflow-popup li{
display:block;
height:auto
}
.overflow-popup .tabs li{
padding-left:0;
padding-right:0
}
.overflow-button.hidden,.overflow-popup .tabs li.hidden,.overflow-popup li.hidden{
display:none
}
.pill-button{
background:0 0;
border:1px solid;
border-radius:12px;
cursor:pointer;
display:inline-block;
padding:4px 16px;
text-transform:uppercase
}
.ripple{
position:relative
}
.ripple>*{
z-index:1
}
.splash-wrapper{
bottom:0;
left:0;
overflow:hidden;
pointer-events:none;
position:absolute;
right:0;
top:0;
z-index:0
}
.splash{
background:#ccc;
border-radius:100%;
display:block;
opacity:.6;
position:absolute;
-webkit-transform:scale(0);
-ms-transform:scale(0);
transform:scale(0)
}
.splash.animate{
-webkit-animation:ripple-effect .4s linear;
animation:ripple-effect .4s linear
}
@-webkit-keyframes ripple-effect{
100%{
opacity:0;
-webkit-transform:scale(2.5);
transform:scale(2.5)
}
}
@keyframes ripple-effect{
100%{
opacity:0;
-webkit-transform:scale(2.5);
transform:scale(2.5)
}
}
.search{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
line-height:24px;
width:24px
}
.search.focused{
width:100%
}
.search.focused .section{
width:100%
}
.search form{
z-index:101
}
.search h3{
display:none
}
.search form{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-flex:1;
-webkit-flex:1 0 0;
-ms-flex:1 0 0px;
flex:1 0 0;
border-bottom:solid 1px transparent;
padding-bottom:8px
}
.search form>*{
display:none
}
.search.focused form>*{
display:block
}
.search .search-input label{
display:none
}
.centered-top-placeholder.cloned .search form{
z-index:30
}
.search.focused form{
border-color:$(blog.title.color);
position:relative;
width:auto
}
.collapsed-header .centered-top-container .search.focused form{
border-bottom-color:transparent
}
.search-expand{
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto
}
.search-expand-text{
display:none
}
.search-close{
display:inline;
vertical-align:middle
}
.search-input{
-webkit-box-flex:1;
-webkit-flex:1 0 1px;
-ms-flex:1 0 1px;
flex:1 0 1px
}
.search-input input{
background:0 0;
border:0;
box-sizing:border-box;
color:$(blog.title.color);
display:inline-block;
outline:0;
width:calc(100% - 48px)
}
.search-input input.no-cursor{
color:transparent;
text-shadow:0 0 0 $(blog.title.color)
}
.collapsed-header .centered-top-container .search-action,.collapsed-header .centered-top-container .search-input input{
color:$(posts.title.color)
}
.collapsed-header .centered-top-container .search-input input.no-cursor{
color:transparent;
text-shadow:0 0 0 $(posts.title.color)
}
.collapsed-header .centered-top-container .search-input input.no-cursor:focus,.search-input input.no-cursor:focus{
outline:0
}
.search-focused>*{
visibility:hidden
}
.search-focused .search,.search-focused .search-icon{
visibility:visible
}
.search.focused .search-action{
display:block
}
.search.focused .search-action:disabled{
opacity:.3
}
.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
}
.centered-bottom .share-buttons .svg-icon-24,.share-buttons .svg-icon-24{
fill:$(sharing.icons.color)
}
.sharing-open.touch-icon-button:active .touch-icon,.sharing-open.touch-icon-button:focus .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:0 0;
border:0;
margin:0;
outline:0;
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,.1);
outline:0
}
.share-buttons li svg[class*=" sharing-"],.share-buttons li svg[class^=sharing-]{
position:absolute;
top:10px
}
.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:$(sidebar.backgroundColorBottom);
max-width:$(sidebar.width);
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,.2,1);
transition-timing-function:cubic-bezier(0,0,.2,1);
width:$(sidebar.width);
z-index:101;
-webkit-overflow-scrolling:touch
}
.sidebar-container .navigation{
line-height:0;
padding:16px
}
.sidebar-container .sidebar-back{
cursor:pointer
}
.sidebar-container .widget{
background:0 0;
margin:0 16px;
padding:16px 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 li{
font-size:16px;
line-height:normal
}
.sidebar-container .widget+.widget{
border-top:1px dashed $(sidebar.separator.color)
}
.BlogArchive li{
margin:16px 0
}
.BlogArchive li:last-child{
margin-bottom:0
}
.Label li a{
display:inline-block
}
.BlogArchive .post-count,.Label .label-count{
float:$endSide;
margin-$startSide:.25em
}
.BlogArchive .post-count::before,.Label .label-count::before{
content:"("
}
.BlogArchive .post-count::after,.Label .label-count::after{
content:")"
}
.widget.Translate .skiptranslate>div{
display:block!important
}
.widget.Profile .profile-link{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex
}
.widget.Profile .team-member .default-avatar-wrapper,.widget.Profile .team-member .profile-img{
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto;
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;
align-self:center;
display:block;
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
flex:1 1 auto
}
.dim-overlay{
background-color:rgba(0,0,0,.54);
z-index:100
}
body.sidebar-visible{
overflow-y:hidden
}
@media screen and (max-width:$(sidebar.width + content.width + content.margin * 2 - 1px)){
.sidebar-container{
bottom:0;
position:fixed;
top:0;
left:0;
right:auto
}
.sidebar-container.sidebar-invisible{
-webkit-transition-timing-function:cubic-bezier(.4,0,.6,1);
transition-timing-function:cubic-bezier(.4,0,.6,1);
-webkit-transform:translateX($(sidebar.width * -1));
-ms-transform:translateX($(sidebar.width * -1));
transform:translateX($(sidebar.width * -1))
}
}
@media screen and (min-width:$(sidebar.width + content.width + content.margin * 2)){
.sidebar-container{
position:absolute;
top:0;
left:0;
right:auto
}
.sidebar-container .navigation{
display:none
}
}
.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;
color:$(body.text.color);
padding:30px;
position:fixed;
text-align:center;
width:calc(100% - 24px);
z-index:101
}
.dialog input[type=email],.dialog input[type=text]{
background-color:transparent;
border:0;
border-bottom:solid 1px rgba($(body.text.color.red),$(body.text.color.green),$(body.text.color.blue),.12);
color:$(body.text.color);
display:block;
font-family:$(body.text.font.family);
font-size:16px;
line-height:24px;
margin:auto;
padding-bottom:7px;
outline:0;
text-align:center;
width:100%
}
.dialog input[type=email]::-webkit-input-placeholder,.dialog input[type=text]::-webkit-input-placeholder{
color:$(body.text.color)
}
.dialog input[type=email]::-moz-placeholder,.dialog input[type=text]::-moz-placeholder{
color:$(body.text.color)
}
.dialog input[type=email]:-ms-input-placeholder,.dialog input[type=text]:-ms-input-placeholder{
color:$(body.text.color)
}
.dialog input[type=email]::-ms-input-placeholder,.dialog input[type=text]::-ms-input-placeholder{
color:$(body.text.color)
}
.dialog input[type=email]::placeholder,.dialog input[type=text]::placeholder{
color:$(body.text.color)
}
.dialog input[type=email]:focus,.dialog input[type=text]:focus{
border-bottom:solid 2px $(body.link.color);
padding-bottom:6px
}
.dialog input.no-cursor{
color:transparent;
text-shadow:0 0 0 $(body.text.color)
}
.dialog input.no-cursor:focus{
outline:0
}
.dialog input.no-cursor:focus{
outline:0
}
.dialog input[type=submit]{
font-family:$(body.text.font.family)
}
.dialog .goog-buttonset-default{
color:$(body.link.color)
}
.subscribe-popup{
max-width:364px
}
.subscribe-popup h3{
color:$(posts.title.color);
font-size:1.8em;
margin-top:0
}
.subscribe-popup .FollowByEmail h3{
display:none
}
.subscribe-popup .FollowByEmail .follow-by-email-submit{
color:$(body.link.color);
display:inline-block;
margin:0 auto;
margin-top:24px;
width:auto;
white-space:normal
}
.subscribe-popup .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 auto;
width:100%
}
}
.tabs{
list-style:none
}
.tabs li{
display:inline-block
}
.tabs li a{
cursor:pointer;
display:inline-block;
font-weight:700;
text-transform:uppercase;
padding:12px 8px
}
.tabs .selected{
border-bottom:4px solid $(tabs.selected.color)
}
.tabs .selected a{
color:$(tabs.selected.color)
}
body#layout .bg-photo,body#layout .bg-photo-overlay{
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
}
.centered-top-container .svg-icon-24,body.collapsed-header .centered-top-placeholder .svg-icon-24{
fill:$(header.icons.color)
}
.sidebar-container .svg-icon-24{
fill:$(sidebar.icons.color)
}
.centered-bottom .svg-icon-24,body.collapsed-header .centered-top-container .svg-icon-24{
fill:$(posts.icons.color)
}
.centered-bottom .share-buttons .svg-icon-24,.share-buttons .svg-icon-24{
fill:$(sharing.icons.color)
}
body{
background-color:$(body.background.color);
color:$(body.text.color);
font:$(body.text.font);
margin:0;
min-height:100vh
}
img{
max-width:100%
}
h3{
color:$(body.text.color);
font-size:16px
}
a{
text-decoration:none;
color:$(body.link.color)
}
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;
text-align:center
}
.pill-button{
font-size:12px
}
.bg-photo-container{
height:$(body.background.height);
overflow:hidden;
position:absolute;
width:100%;
z-index:1
}
.bg-photo{
background:$(body.background);
background-attachment:scroll;
background-size:cover;
-webkit-filter:blur($(body.background.blur));
filter:blur($(body.background.blur));
height:calc(100% + 2 * $(body.background.blur));
left:$(0 - body.background.blur);
position:absolute;
top:$(0 - body.background.blur);
width:calc(100% + 2 * $(body.background.blur))
}
.bg-photo-overlay{
background:rgba(0,0,0,.26);
background-size:cover;
height:$(body.background.height);
position:absolute;
width:100%;
z-index:2
}
.hamburger-menu{
float:left;
margin-top:0
}
.sticky .hamburger-menu{
float:none;
position:absolute
}
.search{
border-bottom:solid 1px $(blog.title.color.transparent);
float:right;
position:relative;
-webkit-transition-property:width;
transition-property:width;
-webkit-transition-duration:.5s;
transition-duration:.5s;
-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);
transition-timing-function:cubic-bezier(.4,0,.2,1);
z-index:101
}
.search .dim-overlay{
background-color:transparent
}
.search form{
height:36px;
-webkit-transition-property:border-color;
transition-property:border-color;
-webkit-transition-delay:.5s;
transition-delay:.5s;
-webkit-transition-duration:.2s;
transition-duration:.2s;
-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);
transition-timing-function:cubic-bezier(.4,0,.2,1)
}
.search.focused{
width:calc(100% - 48px)
}
.search.focused form{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-flex:1;
-webkit-flex:1 0 1px;
-ms-flex:1 0 1px;
flex:1 0 1px;
border-color:$(blog.title.color);
margin-$startSide:-24px;
padding-$startSide:36px;
position:relative;
width:auto
}
.item-view .search,.sticky .search{
$endSide:0;
float:none;
margin-left:0;
position:absolute
}
.item-view .search.focused,.sticky .search.focused{
width:calc(100% - 50px)
}
.item-view .search.focused form,.sticky .search.focused form{
border-bottom-color:$(posts.text.color)
}
.centered-top-placeholder.cloned .search form{
z-index:30
}
.search_button{
-webkit-box-flex:0;
-webkit-flex:0 0 24px;
-ms-flex:0 0 24px;
flex:0 0 24px;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
-webkit-flex-direction:column;
-ms-flex-direction:column;
flex-direction:column
}
.search_button svg{
margin-top:0
}
.search-input{
height:48px
}
.search-input input{
display:block;
color:$(search.input.color);
font:$(search.input.font);
height:48px;
line-height:48px;
padding:0;
width:100%
}
.search-input input::-webkit-input-placeholder{
color:$(search.placeholder.color);
opacity:.3
}
.search-input input::-moz-placeholder{
color:$(search.placeholder.color);
opacity:.3
}
.search-input input:-ms-input-placeholder{
color:$(search.placeholder.color);
opacity:.3
}
.search-input input::-ms-input-placeholder{
color:$(search.placeholder.color);
opacity:.3
}
.search-input input::placeholder{
color:$(search.placeholder.color);
opacity:.3
}
.search-action{
background:0 0;
border:0;
color:$(blog.title.color);
cursor:pointer;
display:none;
height:48px;
margin-top:0
}
.sticky .search-action{
color:$(posts.text.color)
}
.search.focused .search-action{
display:block
}
.search.focused .search-action:disabled{
opacity:.3
}
.page_body{
position:relative;
z-index:20
}
.page_body .widget{
margin-bottom:16px
}
.page_body .centered{
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;
margin:0 auto;
max-width:$(content.width);
min-height:100vh;
padding:24px 0
}
.page_body .centered>*{
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto
}
.page_body .centered>#footer{
margin-top:auto
}
.blog-name{
margin:24px 0 16px 0
}
.item-view .blog-name,.sticky .blog-name{
box-sizing:border-box;
margin-left:36px;
min-height:48px;
opacity:1;
padding-top:12px
}
.blog-name .subscribe-section-container{
margin-bottom:32px;
text-align:center;
-webkit-transition-property:opacity;
transition-property:opacity;
-webkit-transition-duration:.5s;
transition-duration:.5s
}
.item-view .blog-name .subscribe-section-container,.sticky .blog-name .subscribe-section-container{
margin:0 0 8px 0
}
.blog-name .PageList{
margin-top:16px;
padding-top:8px;
text-align:center
}
.blog-name .PageList .overflowable-contents{
width:100%
}
.blog-name .PageList h3.title{
color:$(blog.title.color);
margin:8px auto;
text-align:center;
width:100%
}
.centered-top-container .blog-name{
-webkit-transition-property:opacity;
transition-property:opacity;
-webkit-transition-duration:.5s;
transition-duration:.5s
}
.item-view .return_link{
margin-bottom:12px;
margin-top:12px;
position:absolute
}
.item-view .blog-name{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
margin:0 48px 27px 48px
}
.item-view .subscribe-section-container{
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto
}
.item-view #header,.item-view .Header{
margin-bottom:5px;
margin-right:15px
}
.item-view .sticky .Header{
margin-bottom:0
}
.item-view .Header p{
margin:10px 0 0 0;
text-align:left
}
.item-view .post-share-buttons-bottom{
margin-$endSide:16px
}
.sticky{
background:$(posts.background.color);
box-shadow:0 0 20px 0 rgba(0,0,0,.7);
box-sizing:border-box;
margin-left:0
}
.sticky #header{
margin-bottom:8px;
margin-$endSide:8px
}
.sticky .centered-top{
margin:4px auto;
max-width:$(content.width - 32px);
min-height:48px
}
.sticky .blog-name{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
margin:0 48px
}
.sticky .blog-name #header{
-webkit-box-flex:0;
-webkit-flex:0 1 auto;
-ms-flex:0 1 auto;
flex:0 1 auto;
-webkit-box-ordinal-group:2;
-webkit-order:1;
-ms-flex-order:1;
order:1;
overflow:hidden
}
.sticky .blog-name .subscribe-section-container{
-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
}
.sticky .Header h1{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
margin-$endSide:-10px;
margin-bottom:-10px;
padding-$endSide:10px;
padding-bottom:10px
}
.sticky .Header p{
display:none
}
.sticky .PageList{
display:none
}
.search-focused>*{
visibility:visible
}
.search-focused .hamburger-menu{
visibility:visible
}
.item-view .search-focused .blog-name,.sticky .search-focused .blog-name{
opacity:0
}
.centered-bottom,.centered-top-container,.centered-top-placeholder{
padding:0 16px
}
.centered-top{
position:relative
}
.item-view .centered-top.search-focused .subscribe-section-container,.sticky .centered-top.search-focused .subscribe-section-container{
opacity:0
}
.page_body.has-vertical-ads .centered .centered-bottom{
display:inline-block;
width:calc(100% - 176px)
}
.Header h1{
color:$(blog.title.color);
font:$(blog.title.font);
line-height:normal;
margin:0 0 13px 0;
text-align:center;
width:100%
}
.Header h1 a,.Header h1 a:hover,.Header h1 a:visited{
color:$(blog.title.color)
}
.item-view .Header h1,.sticky .Header h1{
font-size:24px;
line-height:24px;
margin:0;
text-align:left
}
.sticky .Header h1{
color:$(posts.text.color)
}
.sticky .Header h1 a,.sticky .Header h1 a:hover,.sticky .Header h1 a:visited{
color:$(posts.text.color)
}
.Header p{
color:$(blog.title.color);
margin:0 0 13px 0;
opacity:.8;
text-align:center
}
.widget .title{
line-height:28px
}
.BlogArchive li{
font-size:16px
}
.BlogArchive .post-count{
color:$(posts.text.color)
}
#page_body .FeaturedPost,.Blog .blog-posts .post-outer-container{
background:$(posts.background.color);
min-height:40px;
padding:30px 40px;
width:auto
}
.Blog .blog-posts .post-outer-container:last-child{
margin-bottom:0
}
.Blog .blog-posts .post-outer-container .post-outer{
border:0;
position:relative;
padding-bottom:.25em
}
.post-outer-container{
margin-bottom:16px
}
.post:first-child{
margin-top:0
}
.post .thumb{
float:left;
height:20%;
width:20%
}
.post-share-buttons-bottom,.post-share-buttons-top{
float:$(endSide)
}
.post-share-buttons-bottom{
margin-$endSide:24px
}
.post-footer,.post-header{
clear:$(startSide);
color:$(posts.byline.color);
margin:0;
width:inherit
}
.blog-pager{
text-align:center
}
.blog-pager a{
color:$(posts.navigation.link.color)
}
.blog-pager a:visited{
color:$(posts.navigation.link.visited.color)
}
.blog-pager a:hover{
color:$(posts.navigation.link.hover.color)
}
.post-title{
font:$(posts.title.font);
float:$(startSide);
margin:0 0 8px 0;
max-width:calc(100% - 48px)
}
.post-title a{
font:$(posts.stream.title.font)
}
.post-title,.post-title a,.post-title a:hover,.post-title a:visited{
color:$(posts.title.color)
}
.post-body{
color:$(posts.text.color);
font:$(posts.text.font);
line-height:1.6em;
margin:1.5em 0 2em 0;
display:block
}
.post-body img{
height:inherit
}
.post-body .snippet-thumbnail{
float:$(startSide);
margin:0;
margin-$endSide:2em;
max-height:128px;
max-width:128px
}
.post-body .snippet-thumbnail img{
max-width:100%
}
.main .FeaturedPost .widget-content{
border:0;
position:relative;
padding-bottom:.25em
}
.FeaturedPost img{
margin-top:2em
}
.FeaturedPost .snippet-container{
margin:2em 0
}
.FeaturedPost .snippet-container p{
margin:0
}
.FeaturedPost .snippet-thumbnail{
float:none;
height:auto;
margin-bottom:2em;
margin-$endSide:0;
overflow:hidden;
max-height:calc(600px + 2em);
max-width:100%;
text-align:center;
width:100%
}
.FeaturedPost .snippet-thumbnail img{
max-width:100%;
width:100%
}
.byline{
color:$(posts.byline.color);
display:inline-block;
line-height:24px;
margin-top:8px;
vertical-align:top
}
.byline.post-author:first-child{
margin-$endSide:0
}
.byline.reactions .reactions-label{
line-height:22px;
vertical-align:top
}
.byline.post-share-buttons{
position:relative;
display:inline-block;
margin-top:0;
width:100%
}
.byline.post-share-buttons .sharing{
float:$(endSide)
}
.flat-button.ripple:hover{
background-color:rgba($(body.link.color.red),$(body.link.color.green),$(body.link.color.blue),.12)
}
.flat-button.ripple .splash{
background-color:rgba($(body.link.color.red),$(body.link.color.green),$(body.link.color.blue),.4)
}
a.timestamp-link,a:active.timestamp-link,a:visited.timestamp-link{
color:inherit;
font:inherit;
text-decoration:inherit
}
.post-share-buttons{
margin-left:0
}
.clear-sharing{
min-height:24px
}
.comment-link{
color:$(body.link.color);
position:relative
}
.comment-link .num_comments{
margin-left:8px;
vertical-align:top
}
#comment-holder .continue{
display:none
}
#comment-editor{
margin-bottom:20px;
margin-top:20px
}
#comments .comment-form h4,#comments h3.title{
position:absolute;
clip:rect(1px,1px,1px,1px);
padding:0;
border:0;
height:1px;
width:1px;
overflow:hidden
}
.post-filter-message{
background-color:rgba(0,0,0,.7);
color:#fff;
display:table;
margin-bottom:16px;
width:100%
}
.post-filter-message div{
display:table-cell;
padding:15px 28px
}
.post-filter-message div:last-child{
padding-$startSide:0;
text-align:$(endSide)
}
.post-filter-message a{
white-space:nowrap
}
.post-filter-message .search-label,.post-filter-message .search-query{
font-weight:700;
color:$(body.link.color)
}
#blog-pager{
margin:2em 0
}
#blog-pager a{
color:$(attribution.link.color);
font-size:14px
}
.subscribe-button{
border-color:$(blog.title.color);
color:$(blog.title.color)
}
.sticky .subscribe-button{
border-color:$(posts.text.color);
color:$(posts.text.color)
}
.tabs{
margin:0 auto;
padding:0
}
.tabs li{
margin:0 8px;
vertical-align:top
}
.tabs .overflow-button a,.tabs li a{
color:$(tabs.color);
font:$(tabs.font);
line-height:$(body.text.font.size * 1.2)
}
.tabs .overflow-button a{
padding:12px 8px
}
.overflow-popup .tabs li{
text-align:left
}
.overflow-popup li a{
color:$(tabs.overflow.color);
display:block;
padding:8px 20px
}
.overflow-popup li.selected a{
color:$(tabs.overflow.selected.color)
}
a.report_abuse{
font-weight:400
}
.Label li,.Label span.label-size,.byline.post-labels a{
background-color:$(labels.background.color);
border:1px solid $(labels.background.color);
border-radius:15px;
display:inline-block;
margin:4px 4px 4px 0;
padding:3px 8px
}
.Label a,.byline.post-labels a{
color:$(labels.text.color)
}
.Label ul{
list-style:none;
padding:0
}
.PopularPosts{
background-color:$(popularposts.background.color);
padding:30px 40px
}
.PopularPosts .item-content{
color:$(popularposts.text.color);
margin-top:24px
}
.PopularPosts a,.PopularPosts a:hover,.PopularPosts a:visited{
color:$(popularposts.link.color)
}
.PopularPosts .post-title,.PopularPosts .post-title a,.PopularPosts .post-title a:hover,.PopularPosts .post-title a:visited{
color:$(popularposts.title.color);
font-size:18px;
font-weight:700;
line-height:24px
}
.PopularPosts,.PopularPosts h3.title a{
color:$(posts.text.color);
font:$(posts.text.font)
}
.main .PopularPosts{
padding:16px 40px
}
.PopularPosts h3.title{
font-size:14px;
margin:0
}
.PopularPosts h3.post-title{
margin-bottom:0
}
.PopularPosts .byline{
color:$(popularposts.byline.color)
}
.PopularPosts .jump-link{
float:$(endSide);
margin-top:16px
}
.PopularPosts .post-header .byline{
font-size:.9em;
font-style:italic;
margin-top:6px
}
.PopularPosts ul{
list-style:none;
padding:0;
margin:0
}
.PopularPosts .post{
padding:20px 0
}
.PopularPosts .post+.post{
border-top:1px dashed $(sidebar.separator.color)
}
.PopularPosts .item-thumbnail{
float:$(startSide);
margin-$endSide:32px
}
.PopularPosts .item-thumbnail img{
height:88px;
padding:0;
width:88px
}
.inline-ad{
margin-bottom:16px
}
.desktop-ad .inline-ad{
display:block
}
.adsbygoogle{
overflow:hidden
}
.vertical-ad-container{
float:$(endSide);
margin-$endSide:16px;
width:128px
}
.vertical-ad-container .AdSense+.AdSense{
margin-top:16px
}
.inline-ad-placeholder,.vertical-ad-placeholder{
background:$(posts.background.color);
border:1px solid #000;
opacity:.9;
vertical-align:middle;
text-align:center
}
.inline-ad-placeholder span,.vertical-ad-placeholder span{
margin-top:290px;
display:block;
text-transform:uppercase;
font-weight:700;
color:$(posts.title.color)
}
.vertical-ad-placeholder{
height:600px
}
.vertical-ad-placeholder span{
margin-top:290px;
padding:0 40px
}
.inline-ad-placeholder{
height:90px
}
.inline-ad-placeholder span{
margin-top:36px
}
.Attribution{
color:$(attribution.text.color)
}
.Attribution a,.Attribution a:hover,.Attribution a:visited{
color:$(attribution.link.color)
}
.Attribution svg{
fill:$(attribution.icon.color)
}
.sidebar-container{
box-shadow:1px 1px 3px rgba(0,0,0,.1)
}
.sidebar-container,.sidebar-container .sidebar_bottom{
background-color:$(sidebar.backgroundColorBottom)
}
.sidebar-container .navigation,.sidebar-container .sidebar_top_wrapper{
background-color:$(sidebar.backgroundColorTop)
}
.sidebar-container .sidebar_top{
overflow:auto
}
.sidebar-container .sidebar_bottom{
width:100%;
padding-top:16px
}
.sidebar-container .widget:first-child{
padding-top:0
}
.sidebar_top .widget.Profile{
padding-bottom:16px
}
.widget.Profile{
margin:0;
width:100%
}
.widget.Profile h2{
display:none
}
.widget.Profile h3.title{
color:$(profile.title.color);
margin:16px 32px
}
.widget.Profile .individual{
text-align:center
}
.widget.Profile .individual .profile-link{
padding:1em
}
.widget.Profile .individual .default-avatar-wrapper .avatar-icon{
margin:auto
}
.widget.Profile .team{
margin-bottom:32px;
margin-left:32px;
margin-right:32px
}
.widget.Profile ul{
list-style:none;
padding:0
}
.widget.Profile li{
margin:10px 0
}
.widget.Profile .profile-img{
border-radius:50%;
float:none
}
.widget.Profile .profile-link{
color:$(profile.link.color);
font-size:.9em;
margin-bottom:1em;
opacity:.87;
overflow:hidden
}
.widget.Profile .profile-link.visit-profile{
border-style:solid;
border-width:1px;
border-radius:12px;
cursor:pointer;
font-size:12px;
font-weight:400;
padding:5px 20px;
display:inline-block;
line-height:normal
}
.widget.Profile dd{
color:$(profile.text.color);
margin:0 16px
}
.widget.Profile location{
margin-bottom:1em
}
.widget.Profile .profile-textblock{
font-size:14px;
line-height:24px;
position:relative
}
body.sidebar-visible .page_body{
overflow-y:scroll
}
body.sidebar-visible .bg-photo-container{
overflow-y:scroll
}
@media screen and (min-width:$(sidebar.width + content.width + content.margin * 2)){
.sidebar-container{
margin-top:$(body.background.height);
min-height:calc(100% - $(body.background.height));
overflow:visible;
z-index:32
}
.sidebar-container .sidebar_top_wrapper{
background-color:$(sidebar.backgroundColorTopHD);
height:$(body.background.height);
margin-top:$(body.background.height * -1)
}
.sidebar-container .sidebar_top{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
height:$(body.background.height);
-webkit-box-orient:horizontal;
-webkit-box-direction:normal;
-webkit-flex-direction:row;
-ms-flex-direction:row;
flex-direction:row;
max-height:$(body.background.height)
}
.sidebar-container .sidebar_bottom{
max-width:$(sidebar.width);
width:$(sidebar.width)
}
body.collapsed-header .sidebar-container{
z-index:15
}
.sidebar-container .sidebar_top:empty{
display:none
}
.sidebar-container .sidebar_top>:only-child{
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto;
-webkit-align-self:center;
-ms-flex-item-align:center;
align-self:center;
width:100%
}
.sidebar_top_wrapper.no-items{
display:none
}
}
.post-snippet.snippet-container{
max-height:120px
}
.post-snippet .snippet-item{
line-height:24px
}
.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:$(body.text.color);
height:24px
}
.popular-posts-snippet.snippet-container{
max-height:72px
}
.popular-posts-snippet .snippet-item{
line-height:24px
}
.PopularPosts .popular-posts-snippet .snippet-fade{
color:$(body.text.color);
height:24px
}
.main .popular-posts-snippet .snippet-fade{
background:-webkit-linear-gradient($startSide,$(popularposts.background.color) 0,$(popularposts.background.color) 20%,$(popularposts.background.color.transparent) 100%);
background:linear-gradient(to $startSide,$(popularposts.background.color) 0,$(popularposts.background.color) 20%,$(popularposts.background.color.transparent) 100%)
}
.sidebar_bottom .popular-posts-snippet .snippet-fade{
background:-webkit-linear-gradient($startSide,$(sidebar.backgroundColorBottom) 0,$(sidebar.backgroundColorBottom) 20%,$(sidebar.backgroundColorBottom.transparent) 100%);
background:linear-gradient(to $startSide,$(sidebar.backgroundColorBottom) 0,$(sidebar.backgroundColorBottom) 20%,$(sidebar.backgroundColorBottom.transparent) 100%)
}
.profile-snippet.snippet-container{
max-height:192px
}
.has-location .profile-snippet.snippet-container{
max-height:144px
}
.profile-snippet .snippet-item{
line-height:24px
}
.profile-snippet .snippet-fade{
background:-webkit-linear-gradient($startSide,$(sidebar.backgroundColorTop) 0,$(sidebar.backgroundColorTop) 20%,$(sidebar.backgroundColorTop.transparent) 100%);
background:linear-gradient(to $startSide,$(sidebar.backgroundColorTop) 0,$(sidebar.backgroundColorTop) 20%,$(sidebar.backgroundColorTop.transparent) 100%);
color:$(profile.text.color);
height:24px
}
@media screen and (min-width:$(sidebar.width + content.width + content.margin * 2)){
.profile-snippet .snippet-fade{
background:-webkit-linear-gradient($startSide,$(sidebar.backgroundColorTopHD) 0,$(sidebar.backgroundColorTopHD) 20%,$(sidebar.backgroundColorTopHD.transparent) 100%);
background:linear-gradient(to $startSide,$(sidebar.backgroundColorTopHD) 0,$(sidebar.backgroundColorTopHD) 20%,$(sidebar.backgroundColorTopHD.transparent) 100%)
}
}
@media screen and (max-width:800px){
.blog-name{
margin-top:0
}
body.item-view .blog-name{
margin:0 48px
}
.centered-bottom{
padding:8px
}
body.item-view .centered-bottom{
padding:0
}
.page_body .centered{
padding:10px 0
}
body.item-view #header,body.item-view .widget.Header{
margin-right:0
}
body.collapsed-header .centered-top-container .blog-name{
display:block
}
body.collapsed-header .centered-top-container .widget.Header h1{
text-align:center
}
.widget.Header header{
padding:0
}
.widget.Header h1{
font-size:$(blog.title.font.size * 24 / 45);
line-height:$(blog.title.font.size * 24 / 45);
margin-bottom:13px
}
body.item-view .widget.Header h1{
text-align:center
}
body.item-view .widget.Header p{
text-align:center
}
.blog-name .widget.PageList{
padding:0
}
body.item-view .centered-top{
margin-bottom:5px
}
.search-action,.search-input{
margin-bottom:-8px
}
.search form{
margin-bottom:8px
}
body.item-view .subscribe-section-container{
margin:5px 0 0 0;
width:100%
}
#page_body.section div.widget.FeaturedPost,div.widget.PopularPosts{
padding:16px
}
div.widget.Blog .blog-posts .post-outer-container{
padding:16px
}
div.widget.Blog .blog-posts .post-outer-container .post-outer{
padding:0
}
.post:first-child{
margin:0
}
.post-body .snippet-thumbnail{
margin:0 3vw 3vw 0
}
.post-body .snippet-thumbnail img{
height:20vw;
width:20vw;
max-height:128px;
max-width:128px
}
div.widget.PopularPosts div.item-thumbnail{
margin:0 3vw 3vw 0
}
div.widget.PopularPosts div.item-thumbnail img{
height:20vw;
width:20vw;
max-height:88px;
max-width:88px
}
.post-title{
line-height:1
}
.post-title,.post-title a{
font-size:20px
}
#page_body.section div.widget.FeaturedPost h3 a{
font-size:22px
}
.mobile-ad .inline-ad{
display:block
}
.page_body.has-vertical-ads .vertical-ad-container,.page_body.has-vertical-ads .vertical-ad-container ins{
display:none
}
.page_body.has-vertical-ads .centered .centered-bottom,.page_body.has-vertical-ads .centered .centered-top{
display:block;
width:auto
}
div.post-filter-message div{
padding:8px 16px
}
}
@media screen and (min-width:$(sidebar.width + content.width + content.margin * 2)){
body{
position:relative
}
body.item-view .blog-name{
margin-left:48px
}
.page_body{
margin-left:$(sidebar.width)
}
.search{
margin-left:0
}
.search.focused{
width:100%
}
.sticky{
padding-left:$(sidebar.width)
}
.hamburger-menu{
display:none
}
body.collapsed-header .page_body .centered-top-container{
padding-left:$(sidebar.width);
padding-right:0;
width:100%
}
body.collapsed-header .centered-top-container .search.focused{
width:100%
}
body.collapsed-header .centered-top-container .blog-name{
margin-left:0
}
body.collapsed-header.item-view .centered-top-container .search.focused{
width:calc(100% - 50px)
}
body.collapsed-header.item-view .centered-top-container .blog-name{
margin-left:40px
}
}
]]></b:skin>

Emporio

<b:skin version='1.3.3'><![CDATA[/*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
/*

<!-- Variable definitions -->

<Variable name="keycolor" description="Main Color" type="color" default="#8abc0d" value="#729c0b"/>
<Variable name="startSide" description="Start side in blog language" type="automatic" default="left" hideEditor="true" />
<Variable name="endSide" description="End side in blog language" type="automatic" default="right" hideEditor="true" />

<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="#f7f7f7"/>
  <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="#000000"/>
  <Variable name="body.link.color" description="Link color" type="color" default="$(keycolor)"  value="#729c0b"/>
  <Variable name="body.link.visited.color" description="Visited Link Color" type="color" default="$(body.link.color)"  value="#729c0b"/>
  <Variable name="body.link.hover.color" description="Link Hover Color" type="color" default="$(body.link.color)"  value="#729c0b"/>
  <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="#729c0b"/>
</Group>

<Group description="Blog title" selector="div.widget.Header">
  <Variable name="blog.title.font" description="Title Font" type="font" default="$(blogTitleFont)"  value="500 62px Ubuntu, sans-serif"/>
  <Variable name="blog.collapsed.title.font" description="Collapsed title font" type="font" default="$(blogCollapsedTitleFont)"  value="500 36px Ubuntu, sans-serif"/>
  <Variable name="blog.collapsed.title.color" description="Collapsed title color" type="color" default="$(blog.title.color)"  value="#1f1f1f"/>
  <Variable name="blog.title.color" description="Title color" type="color" default="#1f1f1f"  value="#1f1f1f"/>
  <Variable name="header.background.color" description="Header bar color" type="color" default="#efefef"  value="#efefef"/>
  <Variable name="header.icons.color" description="Header icons color" type="color" default="$(keycolor)"  value="#729c0b"/>
  <Variable name="header.separator.color" description="Header separator color" type="color" default="rgba(0, 0, 0, 0.3)"  value="rgba(0, 0, 0, 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="#1f1f1f"/>
</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="#729c0b"/>
  <Variable name="tabs.selected.color" description="Selected color" type="color" default="$(tabs.text.color)"  value="#729c0b"/>
  <Variable name="tabs.background.color" description="Tabs background color" type="color" default="#fff"  value="#ffffff"/>
</Group>

<Group description="Posts" selector="div.widget.Blog">
  <Variable name="posts.background.color" description="Post background color" type="color" default="#fff"  value="#ffffff"/>
  <Variable name="posts.title.color" description="Post title color" type="color" default="#212121"  value="#212121"/>
  <Variable name="posts.title.font" description="Post title font" type="font" default="$(titleFont)"  value="500 24px Ubuntu, sans-serif"/>
  <Variable name="posts.byline.color" description="Post byline color" type="color" default="#757575"  value="#757575"/>
  <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="#000000"/>
  <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="#729c0b"/>
  <Variable name="posts.icons.color" description="Post icons color" type="color" default="$(posts.link.color)"  value="#729c0b"/>
  <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="#729c0b"/>
  <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="#ffffff"/>
  <Variable name="postFilter.message.link.color" description="Filter keyword color" type="color" default="$(postFilter.message.color)"  value="#ffffff"/>
  <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="#ffffff"/>
  <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="#000000"/>
  <Variable name="sharing.icons.color" description="Sharing icons color" type="color" default="$(posts.icons.color)"  value="#729c0b"/>
</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="#424242"/>
  <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="#f7f7f7"/>
  <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="500 16px Ubuntu, sans-serif"/>
  <Variable name="widget.title.color" description="Gadget title color" type="color" default="$(body.text.color)"  value="#000000"/>
  <Variable name="sidebar.icons.color" description="Sidebar icons color" type="color" default="$(keycolor)"  value="#729c0b"/>
  <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="#729c0b"/>
  <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="#535353"/>
</Group>

<Group description="Search bar" selector="div.search">
  <Variable name="search.text.color" description="Text color" type="color" default="$(offBlack)"  value="#1f1f1f"/>
  <Variable name="search.icon.color" description="Icon color" type="color" default="rgba(0, 0, 0, 0.38)"  value="rgba(0, 0, 0, 0.38)"/>
  <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="color" default="rgba(0, 0, 0, 0.38)"  value="rgba(0, 0, 0, 0.38)"/>
  <Variable name="search.background.color" description="Background color" type="color" default="rgba(0, 0, 0, 0.03)"  value="rgba(0, 0, 0, 0.03)"/>
</Group>

<Group description="Attribution" selector=".widget.Attribution">
  <Variable name="attribution.text.color" description="Attribution text color" type="color" default="$(body.text.color)"  value="#000000"/>
  <Variable name="attribution.link.color" description="Attribution link color" type="color" default="$(body.link.color)"  value="#729c0b"/>
  <Variable name="attribution.icon.color" description="Attribution icon color" type="color" default="#757575" hideEditor="true"  value="#757575"/>
</Group>

<Group description="Widths">
  <Variable name="sidebar.width" description="Sidebar width" type="length" min="100px" max="1000px" default="280px"  value="280px"/>
  <Variable name="posts.width.stream" description="Post width (stream)" type="length" min="100px" max="1000px" default="385px"  value="385px"/>
</Group>
 */

/*!************************************************
 * Blogger Template Style
 * Name: Emporio
 **************************************************/
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
}
#comments .comment .comment-actions,.subscribe-popup .FollowByEmail .follow-by-email-submit{
background:0 0;
border:0;
box-shadow:none;
color:$(body.link.color);
cursor:pointer;
font-size:14px;
font-weight:700;
outline:0;
text-decoration:none;
text-transform:uppercase;
width:auto
}
.dim-overlay{
background-color:rgba(0,0,0,.54);
height:100vh;
left:0;
position:fixed;
top:0;
width:100%
}
#sharing-dim-overlay{
background-color:transparent
}
input::-ms-clear{
display:none
}
.blogger-logo,.svg-icon-24.blogger-logo{
fill:#ff9800;
opacity:1
}
.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,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
height:50px
}
#main{
outline:0
}
.main-heading{
position:absolute;
clip:rect(1px,1px,1px,1px);
padding:0;
border:0;
height:1px;
width:1px;
overflow:hidden
}
.Attribution{
margin-top:1em;
text-align:center
}
.Attribution .blogger img,.Attribution .blogger svg{
vertical-align:bottom
}
.Attribution .blogger img{
margin-$endSide:.5em
}
.Attribution div{
line-height:24px;
margin-top:.5em
}
.Attribution .copyright,.Attribution .image-attribution{
font-size:.7em;
margin-top:1.5em
}
.BLOG_mobile_video_class{
display:none
}
.bg-photo{
background-attachment:scroll!important
}
body .CSS_LIGHTBOX{
z-index:900
}
.extendable .show-less,.extendable .show-more{
border-color:$(body.link.color);
color:$(body.link.color);
margin-top:8px
}
.extendable .show-less.hidden,.extendable .show-more.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:0
}
.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
}
.link-copied-dialog{
max-width:520px;
outline:0
}
.link-copied-dialog .modal-dialog-buttons{
margin-top:8px
}
.link-copied-dialog .goog-buttonset-default{
background:0 0;
border:0
}
.link-copied-dialog .goog-buttonset-default:focus{
outline:0
}
.paging-control-container{
margin-bottom:16px
}
.paging-control-container .paging-control{
display:inline-block
}
.paging-control-container .comment-range-text::after,.paging-control-container .paging-control{
color:$(body.link.color)
}
.paging-control-container .comment-range-text,.paging-control-container .paging-control{
margin-$endSide:8px
}
.paging-control-container .comment-range-text::after,.paging-control-container .paging-control::after{
content:"\b7";
cursor:default;
padding-$startSide:8px;
pointer-events:none
}
.paging-control-container .comment-range-text:last-child::after,.paging-control-container .paging-control:last-child::after{
content:none
}
.byline.reactions iframe{
height:20px
}
.b-notification{
color:#000;
background-color:#fff;
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(.4,0,.2,1);
transition:margin-top .3s cubic-bezier(.4,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
}
@media screen and (max-width:745px){
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>.separator:first-child>a[imageanchor="1"]:first-child{
margin-top:20px
}
.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
}
}
.item-control{
display:none
}
#comments{
border-top:1px dashed rgba(0,0,0,.54);
margin-top:20px;
padding:20px
}
#comments .comment-thread ol{
margin:0;
padding-left:0;
padding-$startSide:0
}
#comments .comment .comment-replybox-single,#comments .comment-thread .comment-replies{
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;
margin-$startSide:60px;
padding-bottom:0
}
#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:700
}
#comments .comment .comment-actions{
bottom:0;
margin-bottom:15px;
position:absolute
}
#comments .comment .comment-actions>*{
margin-right:8px
}
#comments .comment .comment-header .datetime{
bottom:0;
color:rgba($(posts.title.color.red),$(posts.title.color.green),$(posts.title.color.blue),.54);
display:inline-block;
font-size:13px;
font-style:italic;
margin-$startSide:8px
}
#comments .comment .comment-footer .comment-timestamp a,#comments .comment .comment-header .datetime a{
color:rgba($(posts.title.color.red),$(posts.title.color.green),$(posts.title.color.blue),.54)
}
#comments .comment .comment-content,.comment .comment-body{
margin-top:12px;
word-break:break-word
}
.comment-body{
margin-bottom:12px
}
#comments.embed[data-num-comments="0"]{
border:0;
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(.4,0,.2,1);
transition:height .3s cubic-bezier(.4,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
}
.touch-icon:active,.touch-icon:focus{
background-color:rgba(153,153,153,.4);
border-radius:50%
}
svg:not(:root).touch-icon{
overflow:visible
}
html[dir=rtl] .rtl-reversible-icon{
-webkit-transform:scaleX(-1);
-ms-transform:scaleX(-1);
transform:scaleX(-1)
}
.svg-icon-24-button,.touch-icon-button{
background:0 0;
border:0;
margin:0;
outline:0;
padding:0
}
.touch-icon-button .touch-icon:active,.touch-icon-button .touch-icon:focus{
background-color:transparent
}
.touch-icon-button:active .touch-icon,.touch-icon-button:focus .touch-icon{
background-color:rgba(153,153,153,.4);
border-radius:50%
}
.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
}
.Profile .individual .default-avatar-wrapper .avatar-icon{
padding:25px
}
.Profile .individual .avatar-icon,.Profile .individual .profile-img{
height:90px;
width:90px
}
.Profile .team .default-avatar-wrapper .avatar-icon{
padding:8px
}
.Profile .team .avatar-icon,.Profile .team .default-avatar-wrapper,.Profile .team .profile-img{
height:40px;
width:40px
}
.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(.4,0,.2,1);
transition-timing-function:cubic-bezier(.4,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:0 0
}
.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(.4,0,.2,1);
transition:height .3s cubic-bezier(.4,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:0
}
.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:700;
text-transform:uppercase;
border-radius:2px;
padding:8px;
margin:-8px
}
.flat-icon-button{
background:0 0;
border:0;
margin:0;
outline:0;
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,body#layout .bg-photo-overlay{
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:0 0
}
.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 .tabs li,.overflow-popup li{
display:block;
height:auto
}
.overflow-popup .tabs li{
padding-left:0;
padding-right:0
}
.overflow-button.hidden,.overflow-popup .tabs li.hidden,.overflow-popup 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
}
.centered-bottom .share-buttons .svg-icon-24,.share-buttons .svg-icon-24{
fill:$(sharing.icons.color)
}
.sharing-open.touch-icon-button:active .touch-icon,.sharing-open.touch-icon-button:focus .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:0 0;
border:0;
margin:0;
outline:0;
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,.1);
outline:0
}
.share-buttons li svg[class*=" sharing-"],.share-buttons li svg[class^=sharing-]{
position:absolute;
top:10px
}
.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:$(sidebar.background.color);
max-width:$(sidebar.width);
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,.2,1);
transition-timing-function:cubic-bezier(0,0,.2,1);
width:$(sidebar.width);
z-index:101;
-webkit-overflow-scrolling:touch
}
.sidebar-container .navigation{
line-height:0;
padding:16px
}
.sidebar-container .sidebar-back{
cursor:pointer
}
.sidebar-container .widget{
background:0 0;
margin:0 16px;
padding:16px 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 li{
font-size:16px;
line-height:normal
}
.sidebar-container .widget+.widget{
border-top:1px solid $(sidebar.separator.color)
}
.BlogArchive li{
margin:16px 0
}
.BlogArchive li:last-child{
margin-bottom:0
}
.Label li a{
display:inline-block
}
.BlogArchive .post-count,.Label .label-count{
float:$endSide;
margin-$startSide:.25em
}
.BlogArchive .post-count::before,.Label .label-count::before{
content:"("
}
.BlogArchive .post-count::after,.Label .label-count::after{
content:")"
}
.widget.Translate .skiptranslate>div{
display:block!important
}
.widget.Profile .profile-link{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex
}
.widget.Profile .team-member .default-avatar-wrapper,.widget.Profile .team-member .profile-img{
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto;
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;
align-self:center;
display:block;
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
flex:1 1 auto
}
.dim-overlay{
background-color:rgba(0,0,0,.54);
z-index:100
}
body.sidebar-visible{
overflow-y:hidden
}
@media screen and (max-width:$(posts.width.stream + 15px + sidebar.width)){
.sidebar-container{
bottom:0;
position:fixed;
top:0;
left:auto;
right:0
}
.sidebar-container.sidebar-invisible{
-webkit-transition-timing-function:cubic-bezier(.4,0,.6,1);
transition-timing-function:cubic-bezier(.4,0,.6,1);
-webkit-transform:translateX(100%);
-ms-transform:translateX(100%);
transform:translateX(100%)
}
}
.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;
color:$(posts.text.color);
padding:30px;
position:fixed;
text-align:center;
width:calc(100% - 24px);
z-index:101
}
.dialog input[type=email],.dialog input[type=text]{
background-color:transparent;
border:0;
border-bottom:solid 1px rgba($(body.text.color.red),$(body.text.color.green),$(body.text.color.blue),.12);
color:$(posts.text.color);
display:block;
font-family:$(body.text.font.family);
font-size:16px;
line-height:24px;
margin:auto;
padding-bottom:7px;
outline:0;
text-align:center;
width:100%
}
.dialog input[type=email]::-webkit-input-placeholder,.dialog input[type=text]::-webkit-input-placeholder{
color:rgba($(posts.text.color.red),$(posts.text.color.green),$(posts.text.color.blue),.5)
}
.dialog input[type=email]::-moz-placeholder,.dialog input[type=text]::-moz-placeholder{
color:rgba($(posts.text.color.red),$(posts.text.color.green),$(posts.text.color.blue),.5)
}
.dialog input[type=email]:-ms-input-placeholder,.dialog input[type=text]:-ms-input-placeholder{
color:rgba($(posts.text.color.red),$(posts.text.color.green),$(posts.text.color.blue),.5)
}
.dialog input[type=email]::-ms-input-placeholder,.dialog input[type=text]::-ms-input-placeholder{
color:rgba($(posts.text.color.red),$(posts.text.color.green),$(posts.text.color.blue),.5)
}
.dialog input[type=email]::placeholder,.dialog input[type=text]::placeholder{
color:rgba($(posts.text.color.red),$(posts.text.color.green),$(posts.text.color.blue),.5)
}
.dialog input[type=email]:focus,.dialog input[type=text]:focus{
border-bottom:solid 2px $(posts.link.color);
padding-bottom:6px
}
.dialog input.no-cursor{
color:transparent;
text-shadow:0 0 0 $(posts.text.color)
}
.dialog input.no-cursor:focus{
outline:0
}
.dialog input.no-cursor:focus{
outline:0
}
.dialog input[type=submit]{
font-family:$(body.text.font.family)
}
.dialog .goog-buttonset-default{
color:$(posts.link.color)
}
.loading-spinner-large{
-webkit-animation:mspin-rotate 1.568s infinite linear;
animation:mspin-rotate 1.568s 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{
from{
-webkit-transform:translateX(0);
transform:translateX(0)
}
to{
-webkit-transform:translateX(-3888px);
transform:translateX(-3888px)
}
}
@keyframes mspin-singlecolor-large-film{
from{
-webkit-transform:translateX(0);
transform:translateX(0)
}
to{
-webkit-transform:translateX(-3888px);
transform:translateX(-3888px)
}
}
@-webkit-keyframes mspin-rotate{
from{
-webkit-transform:rotate(0);
transform:rotate(0)
}
to{
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes mspin-rotate{
from{
-webkit-transform:rotate(0);
transform:rotate(0)
}
to{
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-webkit-keyframes mspin-revrot{
from{
-webkit-transform:rotate(0);
transform:rotate(0)
}
to{
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg)
}
}
@keyframes mspin-revrot{
from{
-webkit-transform:rotate(0);
transform:rotate(0)
}
to{
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg)
}
}
.subscribe-popup{
max-width:364px
}
.subscribe-popup h3{
color:$(posts.title.color);
font-size:1.8em;
margin-top:0
}
.subscribe-popup .FollowByEmail h3{
display:none
}
.subscribe-popup .FollowByEmail .follow-by-email-submit{
color:$(posts.link.color);
display:inline-block;
margin:0 auto;
margin-top:24px;
width:auto;
white-space:normal
}
.subscribe-popup .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 auto;
width:100%
}
}
.sidebar-container .svg-icon-24{
fill:$(sidebar.icons.color)
}
.centered-top .svg-icon-24{
fill:$(header.icons.color)
}
.centered-bottom .svg-icon-24.touch-icon,.centered-bottom a .svg-icon-24,.centered-bottom button .svg-icon-24{
fill:$(body.link.color)
}
.post-wrapper .svg-icon-24.touch-icon,.post-wrapper a .svg-icon-24,.post-wrapper button .svg-icon-24{
fill:$(posts.icons.color)
}
.centered-bottom .share-buttons .svg-icon-24,.share-buttons .svg-icon-24{
fill:$(sharing.icons.color)
}
.svg-icon-24.hamburger-menu{
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:$(body.background);
background-color:$(body.background.color);
background-size:cover;
color:$(body.text.color);
font:$(body.text.font);
margin:0;
min-height:100vh
}
h3,h3.title{
color:$(body.text.color)
}
.post-wrapper .post-title,.post-wrapper .post-title a,.post-wrapper .post-title a:hover,.post-wrapper .post-title a:visited{
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
}
.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
}
.bg-photo-container{
overflow:hidden
}
.bg-photo-container,.bg-photo-container .bg-photo{
height:464px;
width:100%
}
.bg-photo-container .bg-photo{
background-position:center;
background-size:cover;
z-index:-1
}
.centered{
margin:0 auto;
position:relative;
width:$(3 * posts.width.stream + 2 * 16px + 15px + sidebar.width)
}
.centered .main,.centered .main-container{
float:$startSide
}
.centered .main{
padding-bottom:1em
}
.centered .centered-bottom::after{
clear:both;
content:"";
display:table
}
@media (min-width:$(3 * posts.width.stream + 2 * 16px + 143px + 15px + sidebar.width + 1px)){
.page_body.has-vertical-ads .centered{
width:$(3 * posts.width.stream + 2 * 16px + 143px + 15px + sidebar.width)
}
}
@media (min-width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width + 1px)) and (max-width:$(3 * posts.width.stream + 2 * 16px + 15px + sidebar.width)){
.centered{
width:$(2 * posts.width.stream + 1 * 16px + 15px + sidebar.width)
}
}
@media (min-width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width + 1px)) and (max-width:$(3 * posts.width.stream + 2 * 16px + 143px + 15px + sidebar.width)){
.page_body.has-vertical-ads .centered{
width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width)
}
}
@media (max-width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width)){
.centered{
width:$(posts.width.stream + 15px + sidebar.width)
}
}
@media (max-width:$(posts.width.stream + 15px + sidebar.width)){
.centered{
max-width:600px;
width:100%
}
}
.feed-view .post-wrapper.hero,.main,.main-container,.post-filter-message,.top-nav .section{
width:$(3 * posts.width.stream + 2 * 16px)
}
@media (min-width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width + 1px)) and (max-width:$(3 * posts.width.stream + 2 * 16px + 15px + sidebar.width)){
.feed-view .post-wrapper.hero,.main,.main-container,.post-filter-message,.top-nav .section{
width:$(2 * posts.width.stream + 1 * 16px)
}
}
@media (min-width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width + 1px)) and (max-width:$(3 * posts.width.stream + 2 * 16px + 143px + 15px + sidebar.width)){
.feed-view .page_body.has-vertical-ads .post-wrapper.hero,.page_body.has-vertical-ads .feed-view .post-wrapper.hero,.page_body.has-vertical-ads .main,.page_body.has-vertical-ads .main-container,.page_body.has-vertical-ads .post-filter-message,.page_body.has-vertical-ads .top-nav .section{
width:$(2 * posts.width.stream + 1 * 16px)
}
}
@media (max-width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width)){
.feed-view .post-wrapper.hero,.main,.main-container,.post-filter-message,.top-nav .section{
width:auto
}
}
.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-less,.extendable .show-more{
color:$(body.button.color);
font:$(body.button.font);
cursor:pointer;
text-transform:uppercase;
margin:0 -16px;
padding:16px
}
.widget.Profile{
font:$(body.text.font)
}
.sidebar-container .widget.Profile{
padding:16px
}
.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;
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 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-less,.widget.Profile .team .extendable .show-more{
position:relative;
$startSide:56px
}
#comments a,.post-wrapper a{
color:$(posts.link.color)
}
div.widget.Blog .blog-posts .post-outer{
border:0
}
div.widget.Blog .post-outer{
padding-bottom:0
}
.post .thumb{
float:left;
height:20%;
width:20%
}
.no-posts-message,.status-msg-body{
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-author a,.byline.post-timestamp a{
color:$(posts.byline.color);
font:$(posts.byline.font)
}
.byline.post-author{
text-transform:lowercase
}
.byline.post-author a{
text-transform:none
}
.item-byline .byline,.post-header .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>div:first-child{
-webkit-box-flex:1;
-webkit-flex:1 0 auto;
-ms-flex:1 0 auto;
flex:1 0 auto
}
.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 .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 li{
display:inline-block;
overflow:hidden;
max-width:100%;
text-overflow:ellipsis;
white-space:nowrap
}
.Label .first-ten{
margin-top:16px
}
.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
}
.Label li a,.Label span.label-size,.byline.post-labels a{
background-color:rgba($(sidebar.link.color.red),$(sidebar.link.color.green),$(sidebar.link.color.blue),.1);
border-radius:2px;
color:$(sidebar.link.color);
cursor:pointer;
display:inline-block;
font:$(labels.font);
line-height:1.5;
margin:4px 4px 4px 0;
padding:4px 8px;
text-transform:uppercase;
vertical-align:middle
}
body.item-view .byline.post-labels a{
background-color:rgba($(posts.link.color.red),$(posts.link.color.green),$(posts.link.color.blue),.1);
color:$(posts.link.color)
}
.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,$(sidebar.background.color) 0,$(sidebar.background.color) 20%,$(sidebar.background.color.transparent) 100%);
background:linear-gradient(to $startSide,$(sidebar.background.color) 0,$(sidebar.background.color) 20%,$(sidebar.background.color.transparent) 100%);
$endSide:0;
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
}
.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
}
.item-view .inline-ad{
display:block
}
.vertical-ad-container{
float:$startSide;
margin-$startSide:15px;
min-height:1px;
width:128px
}
.item-view .vertical-ad-container{
margin-top:30px
}
.inline-ad-placeholder,.vertical-ad-placeholder{
background:$(posts.background.color);
border:1px solid #000;
opacity:.9;
vertical-align:middle;
text-align:center
}
.inline-ad-placeholder span,.vertical-ad-placeholder span{
margin-top:290px;
display:block;
text-transform:uppercase;
font-weight:700;
color:$(posts.title.color)
}
.vertical-ad-placeholder{
height:600px
}
.vertical-ad-placeholder span{
margin-top:290px;
padding:0 40px
}
.inline-ad-placeholder{
height:90px
}
.inline-ad-placeholder span{
margin-top:35px
}
.centered-top-container.sticky,.sticky .centered-top{
background-color:$(header.background.color)
}
.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;
padding-top:40px;
max-width:$(3 * posts.width.stream + 2 * 16px + 15px + sidebar.width)
}
.page_body.has-vertical-ads .centered-top{
max-width:$(3 * posts.width.stream + 2 * 16px + 143px + 15px + sidebar.width)
}
.centered-top .blog-name,.centered-top .hamburger-section,.centered-top .search{
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;
height:24px;
-webkit-box-ordinal-group:1;
-webkit-order:0;
-ms-flex-order:0;
order:0;
width:24px
}
.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{
display:none;
-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
}
.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;
padding:0 16px
}
.sticky .centered-top .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
}
.sticky .centered-top .subscribe-section-container{
border-$startSide:1px solid $(header.separator.color);
-webkit-box-flex:1;
-webkit-flex:1 0 auto;
-ms-flex:1 0 auto;
flex:1 0 auto;
margin:0 16px;
-webkit-box-ordinal-group:3;
-webkit-order:2;
-ms-flex-order:2;
order:2
}
.sticky .centered-top .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
}
.sticky .centered-top .hamburger-section{
-webkit-box-ordinal-group:5;
-webkit-order:4;
-ms-flex-order:4;
order:4
}
.sticky .centered-top .top-nav{
display:none
}
.search{
position:relative;
width:250px
}
.search,.search .search-expand,.search .section{
height:48px
}
.search .search-expand{
background:0 0;
border:0;
margin:0;
outline:0;
padding:0;
display:none;
margin-$startSide:auto
}
.search .search-expand-text{
display:none
}
.search .search-expand .svg-icon-24,.search .search-submit-container .svg-icon-24{
fill:$(search.icon.color);
-webkit-transition:.3s fill cubic-bezier(.4,0,.2,1);
transition:.3s fill cubic-bezier(.4,0,.2,1)
}
.search h3{
display:none
}
.search .section{
background-color:$(search.background.color);
box-sizing:border-box;
$endSide:0;
line-height:24px;
overflow-x:hidden;
position:absolute;
top:0;
-webkit-transition-duration:.3s;
transition-duration:.3s;
-webkit-transition-property:background-color,width;
transition-property:background-color,width;
-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);
transition-timing-function:cubic-bezier(.4,0,.2,1);
width:250px;
z-index:8
}
.search.focused .section{
background-color:$(search.background.color)
}
.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-submit-container input[type=submit]{
display:none
}
.search .search-submit-container .search-icon{
margin:0;
padding:12px 8px
}
.search .search-input input{
background:0 0;
border:0;
color:$(search.text.color);
font:$(search.font);
outline:0;
padding:0 8px
}
.search .search-input input::-webkit-input-placeholder{
color:$(search.placeholder.color);
font:$(search.placeholder.font);
line-height:48px
}
.search .search-input input::-moz-placeholder{
color:$(search.placeholder.color);
font:$(search.placeholder.font);
line-height:48px
}
.search .search-input input:-ms-input-placeholder{
color:$(search.placeholder.color);
font:$(search.placeholder.font);
line-height:48px
}
.search .search-input input::-ms-input-placeholder{
color:$(search.placeholder.color);
font:$(search.placeholder.font);
line-height:48px
}
.search .search-input input::placeholder{
color:$(search.placeholder.color);
font:$(search.placeholder.font);
line-height:48px
}
.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:hover,.centered-top .Header h1 a:visited{
color:inherit;
font-size:inherit
}
.centered-top .Header p{
color:$(blog.description.color);
font:$(blog.description.font);
line-height:1.7;
margin:16px 0;
padding:0
}
.sticky .centered-top .Header h1{
color:$(blog.collapsed.title.color);
font-size:32px;
margin:16px 0;
padding:0;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.sticky .centered-top .Header p{
display:none
}
.subscribe-section-container{
border-left:0;
margin:0
}
.subscribe-section-container .subscribe-button{
background:0 0;
border:0;
margin:0;
outline:0;
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 .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);
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.selected a{
color:$(tabs.selected.color)
}
.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 .overflowable-contents li{
float:$startSide;
max-width:100%
}
.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(.4,0,.2,1);
transition:opacity .3s cubic-bezier(.4,0,.2,1);
width:24px
}
.top-nav .overflow-button.hidden{
display:none
}
.top-nav .overflow-button svg{
margin-top:0
}
@media (max-width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width)){
.search{
width:24px
}
.search .search-expand{
display:block;
position:relative;
z-index:8
}
.search .search-expand .search-expand-icon{
fill:transparent
}
.search .section{
background-color:$(search.background.color.transparent);
width:32px;
z-index:7
}
.search.focused .section{
width:250px;
z-index:8
}
.search .search-submit-container .svg-icon-24{
fill:$(header.icons.color)
}
.search.focused .search-submit-container .svg-icon-24{
fill:$(search.icon.color)
}
.blog-name,.return_link,.subscribe-section-container{
opacity:1;
-webkit-transition:opacity .3s cubic-bezier(.4,0,.2,1);
transition:opacity .3s cubic-bezier(.4,0,.2,1)
}
.centered-top.search-focused .blog-name,.centered-top.search-focused .return_link,.centered-top.search-focused .subscribe-section-container{
opacity:0
}
body.search-view .centered-top.search-focused .blog-name .section,body.search-view .centered-top.search-focused .subscribe-section-container{
display:none
}
}
@media (max-width:745px){
.top-nav .section.no-items#page_list_top{
display:none
}
.centered-top{
padding-top:16px
}
.centered-top .header_container{
margin:0 auto;
max-width:600px
}
.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
}
.widget.Header h1{
font:$(blog.collapsed.title.font);
padding:0
}
.top-nav .PageList{
max-width:100%;
overflow-x:auto
}
.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{
border:0;
-webkit-box-flex:1;
-webkit-flex:1 0 100%;
-ms-flex:1 0 100%;
flex:1 0 100%;
margin:-16px 0 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-button{
padding:8px 16px 16px;
margin-bottom:0
}
.centered-top-container.sticky .widget.Header h1{
font-size:16px;
margin:0
}
}
body.sidebar-visible .page{
overflow-y:scroll
}
.sidebar-container{
float:$startSide;
margin-$startSide:15px
}
.sidebar-container a{
font:$(sidebar.link.font);
color:$(sidebar.link.color)
}
.sidebar-container .sidebar-back{
float:$endSide
}
.sidebar-container .navigation{
display:none
}
.sidebar-container .widget{
margin:auto 0;
padding:24px
}
.sidebar-container .widget .title{
font:$(widget.title.font)
}
@media (min-width:$(posts.width.stream + 15px + sidebar.width + 1px)) and (max-width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width)){
.error-view .sidebar-container{
display:none
}
}
@media (max-width:$(posts.width.stream + 15px + sidebar.width)){
.sidebar-container{
margin-$startSide:0;
max-width:none;
width:100%
}
.sidebar-container .navigation{
display:block;
padding:24px
}
.sidebar-container .navigation+.sidebar.section{
clear:both
}
.sidebar-container .widget{
padding-$startSide:32px
}
.sidebar-container .widget.Profile{
padding-$startSide:24px
}
}
.post-wrapper{
background-color:$(posts.background.color);
position:relative
}
.feed-view .blog-posts{
margin-$endSide:-15px;
width:calc(100% + 15px)
}
.feed-view .post-wrapper{
border-radius:$(posts.border.radius);
float:$startSide;
overflow:hidden;
-webkit-transition:.3s box-shadow cubic-bezier(.4,0,.2,1);
transition:.3s box-shadow cubic-bezier(.4,0,.2,1);
width:$(posts.width.stream)
}
.feed-view .post-wrapper:hover{
box-shadow:0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2)
}
.feed-view .post-wrapper.hero{
background-position:center;
background-size:cover;
position:relative
}
.feed-view .post-wrapper .post,.feed-view .post-wrapper .post .snippet-thumbnail{
background-color:$(posts.background.color);
padding:24px 16px
}
.feed-view .post-wrapper .snippet-thumbnail{
-webkit-transition:.3s opacity cubic-bezier(.4,0,.2,1);
transition:.3s opacity cubic-bezier(.4,0,.2,1)
}
.feed-view .post-wrapper.has-labels.image .snippet-thumbnail-container{
background-color:$(posts.background.color.inverse)
}
.feed-view .post-wrapper.has-labels:hover .snippet-thumbnail{
opacity:.7
}
.feed-view .inline-ad,.feed-view .post-wrapper{
margin-bottom:15px;
margin-top:0;
margin-$endSide:15px;
margin-$startSide:0
}
.feed-view .post-wrapper.hero .post-title a{
font-size:$(posts.title.font.size * 5 / 6);
line-height:$(posts.title.font.size)
}
.feed-view .post-wrapper.not-hero .post-title a{
font-size:$(posts.title.font.size * 2 / 3);
line-height:$(posts.title.font.size)
}
.feed-view .post-wrapper .post-title a{
display:block;
margin:-296px -16px;
padding:296px 16px;
position:relative;
text-overflow:ellipsis;
z-index:2
}
.feed-view .post-wrapper .byline,.feed-view .post-wrapper .comment-link{
position:relative;
z-index:3
}
.feed-view .not-hero.post-wrapper.no-image .post-title-container{
position:relative;
top:-90px
}
.feed-view .post-wrapper .post-header{
padding:5px 0
}
.feed-view .byline{
line-height:$(posts.byline.font.size)
}
.feed-view .hero .byline{
line-height:$(posts.byline.font.size * 1.3)
}
.feed-view .hero .byline,.feed-view .hero .byline.post-author a,.feed-view .hero .byline.post-timestamp a{
font-size:$(posts.byline.font.size + 2px)
}
.feed-view .post-comment-link{
float:$startSide
}
.feed-view .post-share-buttons{
float:$endSide
}
.feed-view .header-buttons-byline{
margin-top:16px;
height:24px
}
.feed-view .header-buttons-byline .byline{
height:24px
}
.feed-view .post-header-right-buttons .post-comment-link,.feed-view .post-header-right-buttons .post-jump-link{
display:block;
float:left;
margin-left:16px
}
.feed-view .post .num_comments{
display:inline-block;
font:$(posts.title.font);
font-size:$(posts.title.font.size / 2);
margin:-14px 6px 0;
vertical-align:middle
}
.feed-view .post-wrapper .post-jump-link{
float:right
}
.feed-view .post-wrapper .post-footer{
margin-top:15px
}
.feed-view .post-wrapper .snippet-thumbnail,.feed-view .post-wrapper .snippet-thumbnail-container{
height:184px;
overflow-y:hidden
}
.feed-view .post-wrapper .snippet-thumbnail{
display:block;
background-position:center;
background-size:cover;
width:100%
}
.feed-view .post-wrapper.hero .snippet-thumbnail,.feed-view .post-wrapper.hero .snippet-thumbnail-container{
height:272px;
overflow-y:hidden
}
@media (min-width:$(posts.width.stream + 15px + sidebar.width + 1px)){
.feed-view .post-title a .snippet-container{
height:$(posts.title.font.size * 2);
max-height:$(posts.title.font.size * 2)
}
.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
}
.feed-view .hero .post-title-container .post-title a .snippet-container{
height:$(posts.title.font.size);
max-height:$(posts.title.font.size)
}
.feed-view .hero .post-title a .snippet-fade{
height:$(posts.title.font.size)
}
.feed-view .post-header-left-buttons{
position:relative
}
.feed-view .post-header-left-buttons:hover .touch-icon{
opacity:1
}
.feed-view .hero.post-wrapper.no-image .post-authordate,.feed-view .hero.post-wrapper.no-image .post-title-container{
position:relative;
top:-150px
}
.feed-view .hero.post-wrapper.no-image .post-title-container{
text-align:center
}
.feed-view .hero.post-wrapper.no-image .post-authordate{
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center
}
.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)
}
.feed-view .post-wrapper.has-labels:hover .labels-outer-container{
opacity:1
}
.feed-view .labels-container{
max-height:calc($(labels.font.size * 1.5 + 8px) + 2 * 4px);
overflow:hidden
}
.feed-view .labels-container .labels-more,.feed-view .labels-container .overflow-button-container{
display:inline-block;
float:$endSide
}
.feed-view .labels-items{
padding:0 4px
}
.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
}
.feed-view .labels-more{
min-width:$(labels.font.size * 1.5 + 8px);
padding:0;
width:$(labels.font.size * 1.5 + 8px)
}
.feed-view .labels-more{
margin-$startSide:8px
}
.feed-view .byline.post-labels{
margin:0
}
.feed-view .byline.post-labels a,.feed-view .labels-more a{
background-color:$(posts.background.color);
color:$(posts.link.color);
box-shadow:0 0 2px 0 rgba(0,0,0,.18);
opacity:.9
}
.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)
}
}
@media (max-width:$(2 * posts.width.stream + 1 * 16px + 143px + 15px + sidebar.width)){
.feed-view .centered{
padding-right:0
}
.feed-view .centered .main-container{
float:none
}
.feed-view .blog-posts{
margin-$endSide:0;
width:auto
}
.feed-view .post-wrapper{
float:none
}
.feed-view .post-wrapper.hero{
width:$(posts.width.stream + 15px + sidebar.width)
}
.feed-view .page_body .centered div.widget.FeaturedPost,.feed-view div.widget.Blog{
width:$(posts.width.stream)
}
.post-filter-message,.top-nav{
margin-top:32px
}
.widget.Header h1{
font:$(blog.collapsed.title.font)
}
.post-filter-message{
display:block
}
.post-filter-message a{
display:block;
margin-top:8px;
padding-left:0
}
.feed-view .not-hero .post-title-container .post-title a .snippet-container{
height:auto
}
.feed-view .vertical-ad-container{
display:none
}
.feed-view .blog-posts .inline-ad{
display:block
}
}
@media (max-width:$(posts.width.stream + 15px + sidebar.width)){
.feed-view .centered .main{
float:none;
width:100%
}
.feed-view .centered .centered-bottom{
max-width:600px;
width:auto
}
.feed-view .centered-bottom .hero.post-wrapper,.feed-view .centered-bottom .post-wrapper{
max-width:600px;
width:auto
}
.feed-view #header{
width:auto
}
.feed-view .page_body .centered div.widget.FeaturedPost,.feed-view div.widget.Blog{
top:50px;
width:100%;
z-index:6
}
.feed-view .main>.widget .title,.feed-view .post-filter-message{
margin-left:8px;
margin-right:8px
}
.feed-view .hero.post-wrapper{
background-color:$(posts.link.color);
border-radius:0;
height:416px
}
.feed-view .hero.post-wrapper .post{
bottom:0;
box-sizing:border-box;
margin:16px;
position:absolute;
width:calc(100% - 32px)
}
.feed-view .hero.no-image.post-wrapper .post{
box-shadow:0 0 16px rgba(0,0,0,.2);
padding-top:120px;
top:0
}
.feed-view .hero.no-image.post-wrapper .post-footer{
position:absolute;
bottom:16px;
width:calc(100% - 32px)
}
.hero.post-wrapper h3{
white-space:normal
}
.feed-view .post-wrapper h3,.feed-view .post-wrapper:hover h3{
width:auto
}
.feed-view .hero.post-wrapper{
margin:0 0 15px 0
}
.feed-view .inline-ad,.feed-view .post-wrapper{
margin:0 8px 16px
}
.feed-view .post-labels{
display:none
}
.feed-view .post-wrapper .snippet-thumbnail{
background-size:cover;
display:block;
height:184px;
margin:0;
max-height:184px;
width:100%
}
.feed-view .post-wrapper.hero .snippet-thumbnail,.feed-view .post-wrapper.hero .snippet-thumbnail-container{
height:416px;
max-height:416px
}
.feed-view .header-author-byline{
display:none
}
.feed-view .hero .header-author-byline{
display:block
}
}
.item-view .page_body{
padding-top:70px
}
.item-view .centered,.item-view .centered .main,.item-view .centered .main-container,.item-view .page_body.has-vertical-ads .centered,.item-view .page_body.has-vertical-ads .centered .main,.item-view .page_body.has-vertical-ads .centered .main-container{
width:100%
}
.item-view .main-container{
max-width:890px;
margin-$endSide:15px
}
.item-view .centered-bottom{
max-width:1185px;
margin-left:auto;
margin-right:auto;
padding-right:0;
padding-top:0;
width:100%
}
.item-view .page_body.has-vertical-ads .centered-bottom{
max-width:1328px;
width:100%
}
.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)
}
.item-view .bg-photo-container+.centered .centered-bottom{
margin-top:0
}
.item-view .bg-photo-container+.centered .centered-bottom .post-wrapper{
margin-top:-368px
}
.item-view .bg-photo-container+.centered-bottom{
margin-top:0
}
.item-view .inline-ad{
margin-bottom:0;
margin-top:30px;
padding-bottom:16px
}
.item-view .post-wrapper{
border-radius:$(posts.border.radius) $(posts.border.radius) 0 0;
float:none;
height:auto;
margin:0;
padding:32px;
width:auto
}
.item-view .post-outer{
padding:8px
}
.item-view .comments{
border-radius:0 0 $(posts.border.radius) $(posts.border.radius);
color:$(posts.text.color);
margin:0 8px 8px
}
.item-view .post-title{
font:$(posts.title.font)
}
.item-view .post-header{
display:block;
width:auto
}
.item-view .post-share-buttons{
display:block;
margin-bottom:40px;
margin-top:20px
}
.item-view .post-footer{
display:block
}
.item-view .post-footer a{
color:$(body.button.color);
font:$(body.button.font);
cursor:pointer;
text-transform:uppercase;
color:$(posts.link.color)
}
.item-view .post-footer-line{
border:0
}
.item-view .sidebar-container{
box-sizing:border-box;
margin-$startSide:0;
margin-top:15px;
max-width:280px;
padding:0;
width:280px
}
.item-view .sidebar-container .widget{
padding:15px 0
}
@media (max-width:1328px){
.item-view .centered{
width:100%
}
.item-view .centered .centered-bottom{
margin-left:auto;
margin-right:auto;
padding-right:0;
padding-top:0;
width:100%
}
.item-view .centered .main-container{
float:none;
margin:0 auto
}
.item-view div.section.main div.widget.PopularPosts{
margin:0 2.5%;
position:relative;
top:0;
width:95%
}
.item-view .bg-photo-container+.centered .main{
margin-top:0
}
.item-view div.widget.Blog{
margin:auto;
width:100%
}
.item-view .post-share-buttons{
margin-bottom:32px
}
.item-view .sidebar-container{
float:none;
margin:0;
max-height:none;
max-width:none;
padding:0 15px;
position:static;
width:100%
}
.item-view .sidebar-container .section{
margin:15px auto;
max-width:480px
}
.item-view .sidebar-container .section .widget{
position:static;
width:100%
}
.item-view .vertical-ad-container{
display:none
}
.item-view .blog-posts .inline-ad{
display:block
}
}
@media (max-width:745px){
.item-view.has-subscribe .bg-photo-container,.item-view.has-subscribe .centered-bottom{
padding-top:88px
}
.item-view .bg-photo,.item-view .bg-photo-container{
width:auto;
height:296px
}
.item-view .bg-photo-container+.centered .centered-bottom .post-wrapper{
margin-top:-240px
}
.item-view .bg-photo-container+.centered .centered-bottom,.item-view .page_body.has-subscribe .bg-photo-container+.centered .centered-bottom{
margin-top:0
}
.item-view .post-outer{
background:$(posts.background.color)
}
.item-view .post-outer .post-wrapper{
padding:16px
}
.item-view .comments{
margin:0
}
}
#comments{
background:$(posts.background.color);
border-top:1px solid $(sidebar.separator.color);
margin-top:0;
padding:32px
}
#comments .comment-form .title,#comments h3.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)
}
.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
}
]]></b:skin>

Essential

<b:skin version='1.0.1'><![CDATA[/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
/*
<!-- Constants -->

<Variable name="damionRegular36" description="Damion Regular 36" type="font" default="400 36px Damion, cursive" hideEditor="true"  value="400 36px Damion, cursive"/>
<Variable name="damionRegular62" description="Damion Regular 62" type="font" default="400 62px Damion, cursive" hideEditor="true"  value="400 62px Damion, cursive"/>
<Variable name="playfairDisplayBlack28" description="Playfair Display Black 28" type="font" default="900 28px Playfair Display, serif" hideEditor="true"  value="900 28px Playfair Display, serif"/>
<Variable name="playfairDisplayBlack36" description="Playfair Display Black 36" type="font" default="900 36px Playfair Display, serif" hideEditor="true"  value="900 36px Playfair Display, serif"/>
<Variable name="playfairDisplayBlack44" description="Playfair Display Black 44" type="font" default="900 44px Playfair Display, serif" hideEditor="true"  value="900 44px Playfair Display, serif"/>
<Variable name="robotoNormal15" description="Roboto Normal 15" type="font" default="15px Roboto, sans-serif" hideEditor="true"  value="15px Roboto, sans-serif"/>
<Variable name="robotoNormal16" description="Roboto Normal 16" type="font" default="16px Roboto, sans-serif" hideEditor="true"  value="16px Roboto, sans-serif"/>
<Variable name="robotoLightItalic15" description="Roboto Light Italic 15" type="font" default="italic 300 15px Roboto, sans-serif" hideEditor="true"  value="italic 300 15px Roboto, sans-serif"/>
<Variable name="robotoBold22" description="Roboto Bold 22" type="font" default="bold 22px Roboto, sans-serif" hideEditor="true"  value="bold 22px Roboto, sans-serif"/>
<Variable name="robotoBold30" description="Roboto Bold 30" type="font" default="bold 30px Roboto, sans-serif" hideEditor="true"  value="bold 30px Roboto, sans-serif"/>
<Variable name="robotoBold45" description="Roboto Bold 45" type="font" default="bold 45px Roboto, sans-serif" hideEditor="true"  value="bold 45px Roboto, sans-serif"/>

<!-- Variable definitions -->

<Variable name="keycolor" description="Main Color" type="color" default="#2196f3"  value="#2196f3"/>
<Variable name="startSide" description="Start side in blog language" type="automatic" default="left" hideEditor="true" />
<Variable name="endSide" description="End side in blog language" type="automatic" default="right" hideEditor="true" />

<Group description="Page Text">
  <Variable name="body.text.font" description="Font"
      type="font"
      default="$(robotoNormal15)"  value="15px Roboto, sans-serif"/>
  <Variable name="body.text.color" description="Color"
      type="color"
      default="#757575"  value="#757575"/>
</Group>

<Group description="Backgrounds">
  <Variable name="body.background.height" description="Background height"
      type="length"
      min="420px"
      max="640px"
      default="480px"  value="480px"/>
  <Variable name="body.background" description="Background"
      color="$(body.background.color)"
      type="background"
      default="$(color) none repeat scroll top left"  value="$(color) none repeat scroll top left"/>
  <Variable name="body.background.shadow" description="Background overlay shadow"
      type="color"
      default="rgba(0,0,0,.26)"  value="rgba(0, 0, 0 ,0)"/>
  <Variable name="body.background.color" description="Body background color"
      type="color"
      default="#eee"  value="#f4f4f4"/>
  <Variable name="posts.background.color" description="Post background color"
      type="color"
      default="#fff"  value="#ffffff"/>
  <Variable name="body.background.blur" description="Background blur"
      type="length"
      min="0px"
      max="50px"
      default="0px"  value="0px"/>
</Group>

<Group description="Links">
  <Variable name="body.link.color" description="Link color"
      type="color"
      default="#2196f3"  value="#2196f3"/>
  <Variable name="body.link.visited.color" description="Visited link color"
      type="color"
      default="$(body.link.color)"  value="#2196f3"/>
  <Variable name="body.link.hover.color" description="Link Hover Color"
      type="color"
      default="$(body.link.color)"  value="#2196f3"/>
</Group>

<Group description="Blog title" selector="div.widget.Header">
  <Variable name="blog.title.font" description="Font"
      type="font"
      default="$(robotoBold45)"  value="bold 45px Roboto, sans-serif"/>
  <Variable name="blog.title.color" description="Color"
      type="color"
      default="#fff"  value="#424242"/>
  <Variable name="header.icons.color"
      description="Background icons color"
      type="color"
      default="#fff"  value="#424242"/>
</Group>

<Group description="Tabs text" selector="div.widget.PageList">
  <Variable name="tabs.font" description="Font"
      type="font"
      family="$(robotoNormal15.family)"
      size="$(robotoNormal15.size)"
      default="700 normal $(size) $(family)"  value="700 normal $(size) $(family)"/>
  <Variable name="tabs.color" description="Text color"
      type="color"
      default="#ccc"  value="#757575"/>
  <Variable name="tabs.selected.color" description="Selected color"
      type="color"
      default="#fff"  value="#424242"/>
  <Variable name="tabs.overflow.background.color" description="Popup background color"
      type="color"
      default="$(posts.background.color)"  value="#ffffff"/>
  <Variable name="tabs.overflow.color" description="Popup text color"
      type="color"
      default="$(posts.text.color)"  value="#757575"/>
  <Variable name="tabs.overflow.selected.color" description="Popup selected color"
      type="color"
      default="$(posts.title.color)"  value="#424242"/>
</Group>

<Group description="Posts" selector="div.widget.Blog">
  <Variable name="posts.title.color" description="Post title color"
      type="color"
      default="#424242"  value="#424242"/>
  <Variable name="posts.title.font" description="Post title font"
      type="font"
      default="$(robotoBold22)"  value="bold 22px Roboto, sans-serif"/>
  <Variable name="posts.stream.title.font" description="Post title stream font"
      type="font"
      default="$(robotoBold30)"  value="bold 30px Roboto, sans-serif"/>
  <Variable name="posts.text.font" description="Post text font"
      type="font"
      default="$(body.text.font)"  value="15px Roboto, sans-serif"/>
  <Variable name="posts.text.color" description="Post text color"
      type="color"
      default="$(body.text.color)"  value="#757575"/>
  <Variable name="posts.byline.color" description="Post byline color"
      type="color"
      default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
  <Variable name="blockquote.font" description="Blockquote font"
      type="font"
      default="$(robotoLightItalic15)"  value="italic 300 15px Roboto, sans-serif"/>
  <Variable name="blockquote.color" description="Blockquote color"
      type="color"
      default="#444"  value="#444444"/>
  <Variable name="posts.icons.color"
      description="Post icons color"
      type="color"
      default="#707070"  value="#707070"/>
  <Variable name="posts.boxshadow.color" description="Post box shadow color"
      type="color"
      default="rgba(0, 0, 0, 0)"  value="rgba(60, 64, 67, 0.30)"/>
</Group>

<Group description="Search">
  <Variable name="search.input.color" description="Input color"
      type="color"
      default="$(blog.title.color)"  value="#424242"/>
  <Variable name="search.input.font" description="Input font"
      type="font"
      default="$(robotoNormal16)"  value="16px Roboto, sans-serif"/>
  <Variable name="search.placeholder.color" description="Placeholder text color"
      type="color"
      default="$(blog.title.color)"  value="#424242"/>
</Group>

<Group description="Sharing">
  <Variable name="sharing.background.color"
      description="Sharing background color"
      type="color"
      default="$(posts.background.color)"  value="#ffffff"/>
  <Variable name="sharing.text.color" description="Sharing text color"
      type="color"
      default="$(posts.title.color)"  value="#424242"/>
  <Variable name="sharing.icons.color"
      description="Sharing icons color"
      type="color"
      default="$(sharing.text.color)"  value="#424242"/>
</Group>

<Group description="Popular posts" selector="div.widget.PopularPosts">
  <Variable name="popularposts.background.color"
      description="Popular post background color"
      type="color"
      default="$(body.background.color)"  value="#f4f4f4"/>
  <Variable name="popularposts.byline.color"
      description="Popular post byline color"
      type="color"
      default="$(posts.byline.color)"  value="rgba(0, 0, 0, 0.54)"/>
  <Variable name="popularposts.title.color"
      description="Popular post title color"
      type="color"
      default="$(posts.title.color)"  value="#424242"/>
  <Variable name="popularposts.text.color"
      description="Popular post text color"
      type="color"
      default="$(posts.text.color)"  value="#757575"/>
  <Variable name="popularposts.link.color"
      description="Popular post link color"
      type="color"
      default="$(body.link.color)"  value="#2196f3"/>
</Group>

<Group description="Post navigation" selector='div.blog-pager'>
  <Variable name="posts.navigation.link.color"
      description="Post navigation links color"
      type="color"
      default="$(body.link.color)"  value="#2196f3"/>
  <Variable name="posts.navigation.link.visited.color"
      description="Post navigation links visited color"
      type="color"
      default="$(body.link.visited.color)"  value="#2196f3"/>
  <Variable name="posts.navigation.link.hover.color"
      description="Post navigations links hover color"
      type="color"
      default="$(body.link.hover.color)"  value="#2196f3"/>
</Group>

<Group description="Sidebar" selector="div.sidebar-container">
  <Variable name="sidebar.backgroundColorTop"
      description="Background color (Top)"
      type="color"
      default="#f7f7f7"  value="#f7f7f7"/>
  <Variable name="sidebar.backgroundColorTopHD"
      description="Background color (Top) - HD"
      type="color"
      default="rgba(255, 255, 255, 1)"  value="rgba(255, 255, 255, 1)"/>
  <Variable name="sidebar.backgroundColorBottom"
      description="Background color (Bottom)"
      type="color"
      default="#fff"  value="#ffffff"/>
  <Variable name="sidebar.separator.color"
      description="Separator color"
      type="color"
      default="#ccc"  value="#cccccc"/>
  <Variable name="widget.title.color"
      description="Gadget title color"
      type="color"
      default="#424242"  value="#424242"/>
  <Variable name="sidebar.icons.color"
      description="Sidebar icons color"
      type="color"
      default="#707070"  value="#707070"/>
</Group>

<Group description="Author profile" selector='.widget.Profile'>
  <Variable name="profile.title.color" description="Profile title color"
      type="color"
      default="rgba(0,0,0,0.52)"  value="rgba(0,0,0,0.52)"/>
  <Variable name="profile.text.color" description="Profile text color"
      type="color"
      default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
  <Variable name="profile.link.color" description="Profile link color"
      type="color"
      default="$(posts.title.color)"  value="#424242"/>
</Group>

<Group description="Labels" selector=".widget.Label">
  <Variable name="labels.text.color"
      description="Label text color"
      type="color"
      default="$(body.link.color)"  value="#2196f3"/>
  <Variable name="labels.background.color"
      description="Label background color"
      type="color"
      red="$(labels.text.color.red)"
      green="$(labels.text.color.green)"
      blue="$(labels.text.color.blue)"
      default="rgba($red, $green, $blue, 0.05)"  value="#f7f7f7"/>
</Group>

<Group description="Attribution" selector=".widget.Attribution">
  <Variable name="attribution.text.color" description="Attribution text color"
      type="color"
      default="$(body.text.color)"  value="#757575"/>
  <Variable name="attribution.link.color" description="Attribution link color"
      type="color"
      default="$(body.link.color)"  value="#2196f3"/>
  <Variable name="attribution.icon.color" description="Attribution icon color"
      type="color"
      default="#707070"
      hideEditor="true"  value="#707070"/>
</Group>

<Group description="Widths">
  <Variable name="sidebar.width" description="Sidebar width" type="length"
            min="100px" max="1000px" default="284px"  value="284px"/>
  <Variable name="content.width" description="Content width" type="length"
            min="600px" max="2400px" default="922px"  value="922px"/>
  <Variable name="content.margin" description="Content margin" type="length"
            min="0px" max="1000px" default="117px"  value="117px"/>
</Group>
*/

/*!************************************************
 * Blogger Template Style
 * Name: Essential
 **************************************************/
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
}
#comments .comment .comment-actions,.subscribe-popup .FollowByEmail .follow-by-email-submit,.widget.Profile .profile-link,.widget.Profile .profile-link.visit-profile{
background:transparent;
border:0;
box-shadow:none;
color:$(body.link.color);
cursor:pointer;
font-size:14px;
font-weight:700;
outline:none;
text-decoration:none;
text-transform:uppercase;
width:auto
}
.dim-overlay{
height:100vh;
left:0;
position:fixed;
top:0;
width:100%
}
#sharing-dim-overlay{
background-color:transparent
}
input::-ms-clear{
display:none
}
.blogger-logo,.svg-icon-24.blogger-logo{
fill:#ff9800;
opacity:1
}
.loading-spinner-large{
-webkit-animation:mspin-rotate 1568.63ms linear infinite;
animation:mspin-rotate 1568.63ms linear infinite;
height:48px;
overflow:hidden;
position:absolute;
width:48px;
z-index:200
}
.loading-spinner-large>div{
-webkit-animation:mspin-revrot 5332ms steps(4) infinite;
animation:mspin-revrot 5332ms steps(4) infinite
}
.loading-spinner-large>div>div{
-webkit-animation:mspin-singlecolor-large-film 1333ms steps(81) infinite;
animation:mspin-singlecolor-large-film 1333ms steps(81) infinite;
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(1turn);
transform:rotate(1turn)
}
}
@keyframes mspin-rotate{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
to{
-webkit-transform:rotate(1turn);
transform:rotate(1turn)
}
}
@-webkit-keyframes mspin-revrot{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
to{
-webkit-transform:rotate(-1turn);
transform:rotate(-1turn)
}
}
@keyframes mspin-revrot{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg)
}
to{
-webkit-transform:rotate(-1turn);
transform:rotate(-1turn)
}
}
.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,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
height:50px
}
#main{
outline:none
}
.main-heading{
position:absolute;
clip:rect(1px,1px,1px,1px);
padding:0;
border:0;
height:1px;
width:1px;
overflow:hidden
}
.Attribution{
margin-top:1em;
text-align:center
}
.Attribution .blogger img,.Attribution .blogger svg{
vertical-align:bottom
}
.Attribution .blogger img{
margin-$endSide:.5em
}
.Attribution div{
line-height:24px;
margin-top:.5em
}
.Attribution .copyright,.Attribution .image-attribution{
font-size:.7em;
margin-top:1.5em
}
.BLOG_mobile_video_class{
display:none
}
.bg-photo{
background-attachment:scroll!important
}
body .CSS_LIGHTBOX{
z-index:900
}
.extendable .show-less,.extendable .show-more{
border-color:$(body.link.color);
color:$(body.link.color);
margin-top:8px
}
.extendable .show-less.hidden,.extendable .show-more.hidden,.inline-ad{
display:none
}
.inline-ad{
max-width:100%;
overflow:hidden
}
.adsbygoogle{
display:block
}
#cookieChoiceInfo{
bottom:0;
top:auto
}
iframe.b-hbp-video{
border:0
}
.post-body iframe,.post-body img{
max-width:100%
}
.post-body a[imageanchor=\31]{
display:inline-block
}
.byline{
margin-$endSide:1em
}
.byline:last-child{
margin-$endSide:0
}
.link-copied-dialog{
max-width:520px;
outline:0
}
.link-copied-dialog .modal-dialog-buttons{
margin-top:8px
}
.link-copied-dialog .goog-buttonset-default{
background:transparent;
border:0
}
.link-copied-dialog .goog-buttonset-default:focus{
outline:0
}
.paging-control-container{
margin-bottom:16px
}
.paging-control-container .paging-control{
display:inline-block
}
.paging-control-container .comment-range-text:after,.paging-control-container .paging-control{
color:$(body.link.color)
}
.paging-control-container .comment-range-text,.paging-control-container .paging-control{
margin-$endSide:8px
}
.paging-control-container .comment-range-text:after,.paging-control-container .paging-control:after{
content:"\b7";
cursor:default;
padding-$startSide:8px;
pointer-events:none
}
.paging-control-container .comment-range-text:last-child:after,.paging-control-container .paging-control:last-child:after{
content:none
}
.byline.reactions iframe{
height:20px
}
.b-notification{
color:#000;
background-color:#fff;
border-bottom:1px solid #000;
box-sizing:border-box;
padding:16px 32px;
text-align:center
}
.b-notification.visible{
-webkit-transition:margin-top .3s cubic-bezier(.4,0,.2,1);
transition:margin-top .3s cubic-bezier(.4,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
}
@media screen and (max-width:800px){
body.item-view .post-body a[imageanchor=\31][style*=float\:\ left\;],body.item-view .post-body a[imageanchor=\31][style*=float\:\ right\;]{
float:none!important;
clear:none!important
}
body.item-view .post-body a[imageanchor=\31] img{
display:block;
height:auto;
margin:0 auto
}
body.item-view .post-body>.separator:first-child>a[imageanchor=\31]:first-child{
margin-top:20px
}
.post-body a[imageanchor]{
display:block
}
body.item-view .post-body a[imageanchor=\31]{
margin-left:0!important;
margin-right:0!important
}
body.item-view .post-body a[imageanchor=\31]+a[imageanchor=\31]{
margin-top:16px
}
}
.item-control{
display:none
}
#comments{
border-top:1px dashed rgba(0,0,0,.54);
margin-top:20px;
padding:20px
}
#comments .comment-thread ol{
margin:0;
padding-left:0;
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:1px solid $(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;
margin-$startSide:60px;
padding-bottom:0
}
#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:700
}
#comments .comment .comment-actions{
bottom:0;
margin-bottom:15px;
position:absolute
}
#comments .comment .comment-actions>*{
margin-right:8px
}
#comments .comment .comment-header .datetime{
bottom:0;
display:inline-block;
font-size:13px;
font-style:italic;
margin-$startSide:8px
}
#comments .comment .comment-footer .comment-timestamp a,#comments .comment .comment-header .datetime,#comments .comment .comment-header .datetime a{
color:rgba($(posts.title.color.red),$(posts.title.color.green),$(posts.title.color.blue),.54)
}
#comments .comment .comment-content,.comment .comment-body{
margin-top:12px;
word-break:break-word
}
.comment-body{
margin-bottom:12px
}
#comments.embed[data-num-comments=\30]{
border:0;
margin-top:0;
padding-top:0
}
#comment-editor-src,#comments.embed[data-num-comments=\30] #comment-post-message,#comments.embed[data-num-comments=\30] div.comment-form>p,#comments.embed[data-num-comments=\30] p.comment-footer{
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(.4,0,.2,1);
transition:height .3s cubic-bezier(.4,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
}
.touch-icon:active,.touch-icon:focus{
background-color:hsla(0,0%,60%,.4);
border-radius:50%
}
svg:not(:root).touch-icon{
overflow:visible
}
html[dir=rtl] .rtl-reversible-icon{
-webkit-transform:scaleX(-1);
transform:scaleX(-1)
}
.svg-icon-24-button,.touch-icon-button{
background:transparent;
border:0;
margin:0;
outline:none;
padding:0
}
.touch-icon-button .touch-icon:active,.touch-icon-button .touch-icon:focus{
background-color:transparent
}
.touch-icon-button:active .touch-icon,.touch-icon-button:focus .touch-icon{
background-color:hsla(0,0%,60%,.4);
border-radius:50%
}
.Profile .default-avatar-wrapper .avatar-icon{
border-radius:50%;
border:1px solid $(posts.icons.color);
box-sizing:border-box;
fill:$(posts.icons.color);
margin:0
}
.Profile .individual .default-avatar-wrapper .avatar-icon{
padding:25px
}
.Profile .individual .avatar-icon,.Profile .individual .profile-img{
height:120px;
width:120px
}
.Profile .team .default-avatar-wrapper .avatar-icon{
padding:8px
}
.Profile .team .avatar-icon,.Profile .team .default-avatar-wrapper,.Profile .team .profile-img{
height:40px;
width:40px
}
.snippet-container{
margin:0;
position:relative;
overflow:hidden
}
.snippet-fade{
bottom:0;
box-sizing:border-box;
position:absolute;
width:96px;
$endSide:0
}
.snippet-fade:after{
content:"\2026";
float:$endSide
}
.post-bottom{
-webkit-box-align:center;
align-items:center;
display:-webkit-box;
display:flex;
flex-wrap:wrap
}
.post-footer{
-webkit-box-flex:1;
flex:1 1 auto;
flex-wrap:wrap;
-webkit-box-ordinal-group:2;
order:1
}
.post-footer>*{
-webkit-box-flex:0;
flex:0 1 auto
}
.post-footer .byline:last-child{
margin-$endSide:1em
}
.jump-link{
-webkit-box-flex:0;
flex:0 0 auto;
-webkit-box-ordinal-group:3;
order:2
}
.centered-top-container.sticky{
left:0;
position:fixed;
right:0;
top:0;
width:auto;
z-index:50;
-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(.4,0,.2,1);
transition-timing-function:cubic-bezier(.4,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(.4,0,.2,1);
transition:height .3s cubic-bezier(.4,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;
align-items:center;
display:-webkit-box;
display:flex
}
.collapsible-title .title{
-webkit-box-flex:1;
flex:1 1 auto;
-webkit-box-ordinal-group:1;
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{
font-weight:700;
text-transform:uppercase;
border-radius:2px;
padding:8px;
margin:-8px
}
.flat-button,.flat-icon-button{
cursor:pointer;
display:inline-block
}
.flat-icon-button{
background:transparent;
border:0;
outline:none;
margin:-12px;
padding:12px;
box-sizing:content-box;
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
}
.overflowable-container{
max-height:$(body.text.font.size * 1.2 + 2 * 8px + 2 * 4px + 4px);
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.overflow.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 .tabs li,.overflow-popup li{
display:block;
height:auto
}
.overflow-popup .tabs li{
padding-left:0;
padding-right:0
}
.overflow-button.hidden,.overflow-popup .tabs li.hidden,.overflow-popup li.hidden{
display:none
}
.pill-button{
background:transparent;
border:1px solid;
border-radius:12px;
cursor:pointer;
display:inline-block;
padding:4px 16px;
text-transform:uppercase
}
.ripple{
position:relative
}
.ripple>*{
z-index:1
}
.splash-wrapper{
bottom:0;
left:0;
overflow:hidden;
pointer-events:none;
position:absolute;
right:0;
top:0;
z-index:0
}
.splash{
background:#ccc;
border-radius:100%;
display:block;
opacity:.6;
position:absolute;
-webkit-transform:scale(0);
transform:scale(0)
}
.splash.animate{
-webkit-animation:ripple-effect .4s linear;
animation:ripple-effect .4s linear
}
@-webkit-keyframes ripple-effect{
to{
opacity:0;
-webkit-transform:scale(2.5);
transform:scale(2.5)
}
}
@keyframes ripple-effect{
to{
opacity:0;
-webkit-transform:scale(2.5);
transform:scale(2.5)
}
}
.search{
display:-webkit-box;
display:flex;
line-height:24px;
width:24px
}
.search.focused,.search.focused .section{
width:100%
}
.search form{
z-index:101
}
.search h3{
display:none
}
.search form{
display:-webkit-box;
display:flex;
-webkit-box-flex:1;
flex:1 0 0;
border-bottom:1px solid transparent;
padding-bottom:8px
}
.search form>*{
display:none
}
.search.focused form>*{
display:block
}
.search .search-input label{
display:none
}
.collapsed-header .centered-top-container .search.focused form{
border-bottom-color:transparent
}
.search-expand{
-webkit-box-flex:0;
flex:0 0 auto
}
.search-expand-text{
display:none
}
.search-close{
display:inline;
vertical-align:middle
}
.search-input{
-webkit-box-flex:1;
flex:1 0 1px
}
.search-input input{
background:none;
border:0;
box-sizing:border-box;
color:$(blog.title.color);
display:inline-block;
outline:none;
width:calc(100% - 48px)
}
.search-input input.no-cursor{
color:transparent;
text-shadow:0 0 0 $(blog.title.color)
}
.collapsed-header .centered-top-container .search-action,.collapsed-header .centered-top-container .search-input input{
color:$(posts.title.color)
}
.collapsed-header .centered-top-container .search-input input.no-cursor{
color:transparent;
text-shadow:0 0 0 $(posts.title.color)
}
.collapsed-header .centered-top-container .search-input input.no-cursor:focus,.search-input input.no-cursor:focus{
outline:none
}
.search-focused>*{
visibility:hidden
}
.search-focused .search,.search-focused .search-icon{
visibility:visible
}
.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
}
.sharing-open.touch-icon-button:active .touch-icon,.sharing-open.touch-icon-button:focus .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:0;
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:hsla(0,0%,50.2%,.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{
position:relative;
top:0
}
.share-buttons li .platform-sharing-text{
display:block;
font-size:16px;
line-height:48px;
white-space:nowrap;
margin-$startSide:56px
}
.sidebar-container{
background-color:$(sidebar.backgroundColorBottom);
max-width:$(sidebar.width);
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,.2,1);
transition-timing-function:cubic-bezier(0,0,.2,1);
width:$(sidebar.width);
z-index:101;
-webkit-overflow-scrolling:touch
}
.sidebar-container .navigation{
line-height:0;
padding:16px
}
.sidebar-container .sidebar-back{
cursor:pointer
}
.sidebar-container .widget{
background:none;
margin:0 16px;
padding:16px 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 li{
font-size:16px;
line-height:normal
}
.sidebar-container .widget+.widget{
border-top:1px dashed $(sidebar.separator.color)
}
.BlogArchive li{
margin:16px 0
}
.BlogArchive li:last-child{
margin-bottom:0
}
.Label li a{
display:inline-block
}
.BlogArchive .post-count,.Label .label-count{
float:$endSide;
margin-$startSide:.25em
}
.BlogArchive .post-count:before,.Label .label-count:before{
content:"("
}
.BlogArchive .post-count:after,.Label .label-count:after{
content:")"
}
.widget.Translate .skiptranslate>div{
display:block!important
}
.widget.Profile .profile-link{
display:-webkit-box;
display:flex
}
.widget.Profile .team-member .default-avatar-wrapper,.widget.Profile .team-member .profile-img{
-webkit-box-flex:0;
flex:0 0 auto;
margin-$endSide:1em
}
.widget.Profile .individual .profile-link{
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
flex-direction:column
}
.widget.Profile .team .profile-link .profile-name{
align-self:center;
display:block;
-webkit-box-flex:1;
flex:1 1 auto
}
.dim-overlay{
background-color:rgba(0,0,0,.54);
z-index:100
}
body.sidebar-visible{
overflow-y:hidden
}
@media screen and (max-width:$(sidebar.width + content.width + content.margin * 2 - 1px)){
.sidebar-container{
bottom:0;
position:fixed;
top:0;
left:0;
right:auto
}
.sidebar-container.sidebar-invisible{
-webkit-transition-timing-function:cubic-bezier(.4,0,.6,1);
transition-timing-function:cubic-bezier(.4,0,.6,1);
-webkit-transform:translateX($(sidebar.width * -1));
transform:translateX($(sidebar.width * -1))
}
}
@media screen and (min-width:$(sidebar.width + content.width + content.margin * 2)){
.sidebar-container{
position:absolute;
top:0;
left:0;
right:auto
}
.sidebar-container .navigation{
display:none
}
}
.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;
color:$(body.text.color);
padding:30px;
position:fixed;
text-align:center;
width:calc(100% - 24px);
z-index:101
}
.dialog input[type=email],.dialog input[type=text]{
background-color:transparent;
border:0;
border-bottom:1px solid rgba($(body.text.color.red),$(body.text.color.green),$(body.text.color.blue),.12);
color:$(body.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=email]::-webkit-input-placeholder,.dialog input[type=text]::-webkit-input-placeholder{
color:$(body.text.color)
}
.dialog input[type=email]::-moz-placeholder,.dialog input[type=text]::-moz-placeholder{
color:$(body.text.color)
}
.dialog input[type=email]:-ms-input-placeholder,.dialog input[type=text]:-ms-input-placeholder{
color:$(body.text.color)
}
.dialog input[type=email]::-ms-input-placeholder,.dialog input[type=text]::-ms-input-placeholder{
color:$(body.text.color)
}
.dialog input[type=email]::placeholder,.dialog input[type=text]::placeholder{
color:$(body.text.color)
}
.dialog input[type=email]:focus,.dialog input[type=text]:focus{
border-bottom:2px solid $(body.link.color);
padding-bottom:6px
}
.dialog input.no-cursor{
color:transparent;
text-shadow:0 0 0 $(body.text.color)
}
.dialog input.no-cursor:focus{
outline:none
}
.dialog input[type=submit]{
font-family:$(body.text.font.family)
}
.dialog .goog-buttonset-default{
color:$(body.link.color)
}
.subscribe-popup{
max-width:364px
}
.subscribe-popup h3{
color:$(posts.title.color);
font-size:1.8em;
margin-top:0
}
.subscribe-popup .FollowByEmail h3{
display:none
}
.subscribe-popup .FollowByEmail .follow-by-email-submit{
color:$(body.link.color);
display:inline-block;
margin:24px auto 0;
width:auto;
white-space:normal
}
.subscribe-popup .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%
}
}
.tabs{
list-style:none
}
.tabs li,.tabs li a{
display:inline-block
}
.tabs li a{
cursor:pointer;
font-weight:700;
text-transform:uppercase;
padding:12px 8px
}
.tabs .selected{
border-bottom:4px solid $(tabs.selected.color)
}
.tabs .selected a{
color:$(tabs.selected.color)
}
body#layout .bg-photo,body#layout .bg-photo-overlay{
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
}
.centered-top-container .svg-icon-24,body.collapsed-header .centered-top-placeholder .svg-icon-24{
fill:$(header.icons.color)
}
.sidebar-container .svg-icon-24{
fill:$(sidebar.icons.color)
}
.centered-bottom .svg-icon-24,body.collapsed-header .centered-top-container .svg-icon-24{
fill:$(posts.icons.color)
}
.centered-bottom .share-buttons .svg-icon-24,.share-buttons .svg-icon-24{
fill:$(sharing.icons.color)
}
body{
background-color:$(body.background.color);
color:$(body.text.color);
font:$(body.text.font);
margin:0;
min-height:100vh
}
img{
max-width:100%
}
h3{
color:$(body.text.color);
font-size:16px
}
a{
text-decoration:none;
color:$(body.link.color)
}
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;
text-align:center
}
.pill-button{
font-size:12px
}
.bg-photo-container{
height:$(body.background.height);
overflow:hidden;
position:absolute;
width:100%;
z-index:1
}
.bg-photo{
background:$(body.background);
background-attachment:scroll;
background-size:cover;
-webkit-filter:blur($(body.background.blur));
filter:blur($(body.background.blur));
height:calc(100% + 2 * $(body.background.blur));
left:$(0 - body.background.blur);
position:absolute;
top:$(0 - body.background.blur);
width:calc(100% + 2 * $(body.background.blur))
}
.bg-photo-overlay{
background:$(body.background.shadow);
background-size:cover;
height:$(body.background.height);
position:absolute;
width:100%;
z-index:2
}
.hamburger-menu{
float:left;
margin-top:0
}
.sticky .hamburger-menu{
float:none;
position:absolute
}
.no-sidebar-widget .hamburger-menu{
display:none
}
.footer .widget .title{
margin:0;
line-height:24px
}
.search{
border-bottom:1px solid $(blog.title.color.transparent);
float:right;
position:relative;
-webkit-transition-property:width;
transition-property:width;
-webkit-transition-duration:.5s;
transition-duration:.5s;
-webkit-transition-timing-function:cubic-bezier(.4,0,.2,1);
transition-timing-function:cubic-bezier(.4,0,.2,1);
z-index:101
}
.search .dim-overlay{
background-color:transparent
}
.search form{
height:36px;
-webkit-transition:border-color .2s cubic-bezier(.4,0,.2,1) .5s;
transition:border-color .2s cubic-bezier(.4,0,.2,1) .5s
}
.search.focused{
width:calc(100% - 48px)
}
.search.focused form{
display:-webkit-box;
display:flex;
-webkit-box-flex:1;
flex:1 0 1px;
border-color:$(blog.title.color);
margin-$startSide:-24px;
padding-$startSide:36px;
position:relative;
width:auto
}
.item-view .search,.sticky .search{
$endSide:0;
float:none;
margin-left:0;
position:absolute
}
.item-view .search.focused,.sticky .search.focused{
width:calc(100% - 50px)
}
.item-view .search.focused form,.sticky .search.focused form{
border-bottom-color:$(posts.text.color)
}
.centered-top-placeholder.cloned .search form{
z-index:30
}
.search_button{
-webkit-box-flex:0;
flex:0 0 24px;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
flex-direction:column
}
.search_button svg{
margin-top:0
}
.search-input{
height:48px
}
.search-input input{
display:block;
color:$(search.input.color);
font:$(search.input.font);
height:48px;
line-height:48px;
padding:0;
width:100%
}
.search-input input::-webkit-input-placeholder{
color:$(search.placeholder.color);
opacity:.3
}
.search-input input::-moz-placeholder{
color:$(search.placeholder.color);
opacity:.3
}
.search-input input:-ms-input-placeholder{
color:$(search.placeholder.color);
opacity:.3
}
.search-input input::-ms-input-placeholder{
color:$(search.placeholder.color);
opacity:.3
}
.search-input input::placeholder{
color:$(search.placeholder.color);
opacity:.3
}
.search-action{
background:transparent;
border:0;
color:$(blog.title.color);
cursor:pointer;
display:none;
height:48px;
margin-top:0
}
.sticky .search-action{
color:$(posts.text.color)
}
.search.focused .search-action{
display:block
}
.search.focused .search-action:disabled{
opacity:.3
}
.page_body{
position:relative;
z-index:20
}
.page_body .widget{
margin-bottom:16px
}
.page_body .centered{
box-sizing:border-box;
display:-webkit-box;
display:flex;
-webkit-box-orient:vertical;
-webkit-box-direction:normal;
flex-direction:column;
margin:0 auto;
max-width:$(content.width);
min-height:100vh;
padding:24px 0
}
.page_body .centered>*{
-webkit-box-flex:0;
flex:0 0 auto
}
.page_body .centered>.footer{
margin-top:auto;
text-align:center
}
.blog-name{
margin:32px 0 16px
}
.item-view .blog-name,.sticky .blog-name{
box-sizing:border-box;
margin-left:36px;
min-height:48px;
opacity:1;
padding-top:12px
}
.blog-name .subscribe-section-container{
margin-bottom:32px;
text-align:center;
-webkit-transition-property:opacity;
transition-property:opacity;
-webkit-transition-duration:.5s;
transition-duration:.5s
}
.item-view .blog-name .subscribe-section-container,.sticky .blog-name .subscribe-section-container{
margin:0 0 8px
}
.blog-name .subscribe-empty-placeholder{
margin-bottom:48px
}
.blog-name .PageList{
margin-top:16px;
padding-top:8px;
text-align:center
}
.blog-name .PageList .overflowable-contents{
width:100%
}
.blog-name .PageList h3.title{
color:$(blog.title.color);
margin:8px auto;
text-align:center;
width:100%
}
.centered-top-container .blog-name{
-webkit-transition-property:opacity;
transition-property:opacity;
-webkit-transition-duration:.5s;
transition-duration:.5s
}
.item-view .return_link{
margin-bottom:12px;
margin-top:12px;
position:absolute
}
.item-view .blog-name{
display:-webkit-box;
display:flex;
flex-wrap:wrap;
margin:0 48px 27px
}
.item-view .subscribe-section-container{
-webkit-box-flex:0;
flex:0 0 auto
}
.item-view #header,.item-view .Header{
margin-bottom:5px;
margin-right:15px
}
.item-view .sticky .Header{
margin-bottom:0
}
.item-view .Header p{
margin:10px 0 0;
text-align:left
}
.item-view .post-share-buttons-bottom{
margin-$endSide:16px
}
.sticky{
background:$(posts.background.color);
box-shadow:0 0 20px 0 rgba(0,0,0,.7);
box-sizing:border-box;
margin-left:0
}
.sticky #header{
margin-bottom:8px;
margin-$endSide:8px
}
.sticky .centered-top{
margin:4px auto;
max-width:$(content.width - 32px);
min-height:48px
}
.sticky .blog-name{
display:-webkit-box;
display:flex;
margin:0 48px
}
.sticky .blog-name #header{
-webkit-box-flex:0;
flex:0 1 auto;
-webkit-box-ordinal-group:2;
order:1;
overflow:hidden
}
.sticky .blog-name .subscribe-section-container{
-webkit-box-flex:0;
flex:0 0 auto;
-webkit-box-ordinal-group:3;
order:2
}
.sticky .Header h1{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
margin-$endSide:-10px;
margin-bottom:-10px;
padding-$endSide:10px;
padding-bottom:10px
}
.sticky .Header p,.sticky .PageList{
display:none
}
.search-focused .hamburger-menu,.search-focused>*{
visibility:visible
}
.item-view .search-focused .blog-name,.sticky .search-focused .blog-name{
opacity:0
}
.centered-bottom,.centered-top-container,.centered-top-placeholder{
padding:0 16px
}
.centered-top{
position:relative
}
.item-view .centered-top.search-focused .subscribe-section-container,.sticky .centered-top.search-focused .subscribe-section-container{
opacity:0
}
.page_body.has-vertical-ads .centered .centered-bottom{
display:inline-block;
width:calc(100% - 176px)
}
.Header h1{
font:$(blog.title.font);
line-height:normal;
margin:0 0 13px;
text-align:center;
width:100%
}
.Header h1,.Header h1 a,.Header h1 a:hover,.Header h1 a:visited{
color:$(blog.title.color)
}
.item-view .Header h1,.sticky .Header h1{
font-size:24px;
line-height:24px;
margin:0;
text-align:left
}
.sticky .Header h1,.sticky .Header h1 a,.sticky .Header h1 a:hover,.sticky .Header h1 a:visited{
color:$(posts.text.color)
}
.Header p{
color:$(blog.title.color);
margin:0 0 13px;
opacity:.8;
text-align:center
}
.widget .title{
line-height:28px
}
.BlogArchive li{
font-size:16px
}
.BlogArchive .post-count{
color:$(posts.text.color)
}
#page_body .FeaturedPost,.Blog .blog-posts .post-outer-container{
background:$(posts.background.color);
min-height:40px;
padding:30px 40px;
width:auto;
box-shadow:0 1px 4px 0 $(posts.boxshadow.color)
}
.Blog .blog-posts .post-outer-container:last-child{
margin-bottom:0
}
.Blog .blog-posts .post-outer-container .post-outer{
border:0;
position:relative;
padding-bottom:.25em
}
.post-outer-container{
margin-bottom:16px
}
.post:first-child{
margin-top:0
}
.post .thumb{
float:left;
height:20%;
width:20%
}
.post-share-buttons-bottom,.post-share-buttons-top{
float:$(endSide)
}
.post-share-buttons-bottom{
margin-$endSide:24px
}
.post-footer,.post-header{
clear:$(startSide);
color:$(posts.byline.color);
margin:0;
width:inherit
}
.blog-pager{
text-align:center
}
.blog-pager a{
color:$(posts.navigation.link.color)
}
.blog-pager a:visited{
color:$(posts.navigation.link.visited.color)
}
.blog-pager a:hover{
color:$(posts.navigation.link.hover.color)
}
.post-title{
font:$(posts.title.font);
float:$(startSide);
margin:0 0 8px;
max-width:calc(100% - 48px)
}
.post-title a{
font:$(posts.stream.title.font)
}
.post-title,.post-title a,.post-title a:hover,.post-title a:visited{
color:$(posts.title.color)
}
.post-body{
color:$(posts.text.color);
font:$(posts.text.font);
line-height:1.6em;
margin:1.5em 0 2em;
display:block
}
.post-body img{
height:inherit
}
.post-body .snippet-thumbnail{
float:$(startSide);
margin:0;
margin-$endSide:2em;
max-height:128px;
max-width:128px
}
.post-body .snippet-thumbnail img{
max-width:100%
}
.main .FeaturedPost .widget-content{
border:0;
position:relative;
padding-bottom:.25em
}
.FeaturedPost img{
margin-top:2em
}
.FeaturedPost .snippet-container{
margin:2em 0
}
.FeaturedPost .snippet-container p{
margin:0
}
.FeaturedPost .snippet-thumbnail{
float:none;
height:auto;
margin-bottom:2em;
margin-$endSide:0;
overflow:hidden;
max-height:calc(600px + 2em);
max-width:100%;
text-align:center;
width:100%
}
.FeaturedPost .snippet-thumbnail img{
max-width:100%;
width:100%
}
.byline{
color:$(posts.byline.color);
display:inline-block;
line-height:24px;
margin-top:8px;
vertical-align:top
}
.byline.post-author:first-child{
margin-$endSide:0
}
.byline.reactions .reactions-label{
line-height:22px;
vertical-align:top
}
.byline.post-share-buttons{
position:relative;
display:inline-block;
margin-top:0;
width:100%
}
.byline.post-share-buttons .sharing{
float:$(endSide)
}
.flat-button.ripple:hover{
background-color:rgba($(body.link.color.red),$(body.link.color.green),$(body.link.color.blue),.12)
}
.flat-button.ripple .splash{
background-color:rgba($(body.link.color.red),$(body.link.color.green),$(body.link.color.blue),.4)
}
a.timestamp-link,a:active.timestamp-link,a:visited.timestamp-link{
color:inherit;
font:inherit;
text-decoration:inherit
}
.post-share-buttons{
margin-left:0
}
.post-share-buttons.invisible{
display:none
}
.clear-sharing{
min-height:24px
}
.comment-link{
color:$(body.link.color);
position:relative
}
.comment-link .num_comments{
margin-left:8px;
vertical-align:top
}
#comment-holder .continue{
display:none
}
#comment-editor{
margin-bottom:20px;
margin-top:20px
}
#comments .comment-form h4,#comments h3.title{
position:absolute;
clip:rect(1px,1px,1px,1px);
padding:0;
border:0;
height:1px;
width:1px;
overflow:hidden
}
.post-filter-message{
background-color:rgba(0,0,0,.7);
color:#fff;
display:table;
margin-bottom:16px;
width:100%
}
.post-filter-message div{
display:table-cell;
padding:15px 28px
}
.post-filter-message div:last-child{
padding-$startSide:0;
text-align:$(endSide)
}
.post-filter-message a{
white-space:nowrap
}
.post-filter-message .search-label,.post-filter-message .search-query{
font-weight:700;
color:$(body.link.color)
}
#blog-pager{
margin:2em 0
}
#blog-pager a{
color:$(attribution.link.color);
font-size:14px
}
.subscribe-button{
border-color:$(blog.title.color);
color:$(blog.title.color)
}
.sticky .subscribe-button{
border-color:$(posts.text.color);
color:$(posts.text.color)
}
.tabs{
margin:0 auto;
padding:0
}
.tabs li{
margin:0 8px;
vertical-align:top
}
.tabs .overflow-button a,.tabs li a{
color:$(tabs.color);
font:$(tabs.font);
line-height:$(body.text.font.size * 1.2)
}
.tabs .overflow-button a{
padding:12px 8px
}
.overflow-popup .tabs li{
text-align:left
}
.overflow-popup li a{
color:$(tabs.overflow.color);
display:block;
padding:8px 20px
}
.overflow-popup li.selected a{
color:$(tabs.overflow.selected.color)
}
.ReportAbuse.widget{
margin-bottom:0
}
.ReportAbuse a.report_abuse{
display:inline-block;
margin-bottom:8px;
font:$(body.text.font);
font-weight:400;
line-height:24px
}
.ReportAbuse a.report_abuse,.ReportAbuse a.report_abuse:hover{
color:#888
}
.byline.post-labels a,.Label li,.Label span.label-size{
background-color:$(labels.background.color);
border:1px solid $(labels.background.color);
border-radius:15px;
display:inline-block;
margin:4px 4px 4px 0;
padding:3px 8px
}
.byline.post-labels a,.Label a{
color:$(labels.text.color)
}
.Label ul{
list-style:none;
padding:0
}
.PopularPosts{
background-color:$(popularposts.background.color);
padding:30px 40px
}
.PopularPosts .item-content{
color:$(popularposts.text.color);
margin-top:24px
}
.PopularPosts a,.PopularPosts a:hover,.PopularPosts a:visited{
color:$(popularposts.link.color)
}
.PopularPosts .post-title,.PopularPosts .post-title a,.PopularPosts .post-title a:hover,.PopularPosts .post-title a:visited{
color:$(popularposts.title.color);
font-size:18px;
font-weight:700;
line-height:24px
}
.PopularPosts,.PopularPosts h3.title a{
color:$(posts.text.color);
font:$(posts.text.font)
}
.main .PopularPosts{
padding:16px 40px
}
.PopularPosts h3.title{
font-size:14px;
margin:0
}
.PopularPosts h3.post-title{
margin-bottom:0
}
.PopularPosts .byline{
color:$(popularposts.byline.color)
}
.PopularPosts .jump-link{
float:$(endSide);
margin-top:16px
}
.PopularPosts .post-header .byline{
font-size:.9em;
font-style:italic;
margin-top:6px
}
.PopularPosts ul{
list-style:none;
padding:0;
margin:0
}
.PopularPosts .post{
padding:20px 0
}
.PopularPosts .post+.post{
border-top:1px dashed $(sidebar.separator.color)
}
.PopularPosts .item-thumbnail{
float:$(startSide);
margin-$endSide:32px
}
.PopularPosts .item-thumbnail img{
height:88px;
padding:0;
width:88px
}
.inline-ad{
margin-bottom:16px
}
.desktop-ad .inline-ad{
display:block
}
.adsbygoogle{
overflow:hidden
}
.vertical-ad-container{
float:$(endSide);
margin-$endSide:16px;
width:128px
}
.vertical-ad-container .AdSense+.AdSense{
margin-top:16px
}
.inline-ad-placeholder,.vertical-ad-placeholder{
background:$(posts.background.color);
border:1px solid #000;
opacity:.9;
vertical-align:middle;
text-align:center
}
.inline-ad-placeholder span,.vertical-ad-placeholder span{
margin-top:290px;
display:block;
text-transform:uppercase;
font-weight:700;
color:$(posts.title.color)
}
.vertical-ad-placeholder{
height:600px
}
.vertical-ad-placeholder span{
margin-top:290px;
padding:0 40px
}
.inline-ad-placeholder{
height:90px
}
.inline-ad-placeholder span{
margin-top:36px
}
.Attribution{
display:inline-block;
color:$(attribution.text.color)
}
.Attribution a,.Attribution a:hover,.Attribution a:visited{
color:$(attribution.link.color)
}
.Attribution svg{
display:none
}
.sidebar-container{
box-shadow:1px 1px 3px rgba(0,0,0,.1)
}
.sidebar-container,.sidebar-container .sidebar_bottom{
background-color:$(sidebar.backgroundColorBottom)
}
.sidebar-container .navigation,.sidebar-container .sidebar_top_wrapper{
background-color:$(sidebar.backgroundColorTop)
}
.sidebar-container .sidebar_top{
overflow:auto
}
.sidebar-container .sidebar_bottom{
width:100%;
padding-top:16px
}
.sidebar-container .widget:first-child{
padding-top:0
}
.no-sidebar-widget .sidebar-container,.preview .sidebar-container{
display:none
}
.sidebar_top .widget.Profile{
padding-bottom:16px
}
.widget.Profile{
margin:0;
width:100%
}
.widget.Profile h2{
display:none
}
.widget.Profile h3.title{
color:$(profile.title.color);
margin:16px 32px
}
.widget.Profile .individual{
text-align:center
}
.widget.Profile .individual .profile-link{
padding:1em
}
.widget.Profile .individual .default-avatar-wrapper .avatar-icon{
margin:auto
}
.widget.Profile .team{
margin-bottom:32px;
margin-left:32px;
margin-right:32px
}
.widget.Profile ul{
list-style:none;
padding:0
}
.widget.Profile li{
margin:10px 0
}
.widget.Profile .profile-img{
border-radius:50%;
float:none
}
.widget.Profile .profile-link{
color:$(profile.link.color);
font-size:.9em;
margin-bottom:1em;
opacity:.87;
overflow:hidden
}
.widget.Profile .profile-link.visit-profile{
border-style:solid;
border-width:1px;
border-radius:12px;
cursor:pointer;
font-size:12px;
font-weight:400;
padding:5px 20px;
display:inline-block;
line-height:normal
}
.widget.Profile dd{
color:$(profile.text.color);
margin:0 16px
}
.widget.Profile location{
margin-bottom:1em
}
.widget.Profile .profile-textblock{
font-size:14px;
line-height:24px;
position:relative
}
body.sidebar-visible .bg-photo-container,body.sidebar-visible .page_body{
overflow-y:scroll
}
@media screen and (min-width:$(sidebar.width + content.width + content.margin * 2)){
.sidebar-container{
min-height:100%;
overflow:visible;
z-index:32
}
.sidebar-container.show-sidebar-top{
margin-top:$(body.background.height);
min-height:calc(100% - $(body.background.height))
}
.sidebar-container .sidebar_top_wrapper{
background-color:$(sidebar.backgroundColorTopHD);
height:$(body.background.height);
margin-top:$(body.background.height * -1)
}
.sidebar-container .sidebar_top{
height:$(body.background.height);
max-height:$(body.background.height)
}
.sidebar-container .sidebar_bottom{
max-width:$(sidebar.width);
width:$(sidebar.width)
}
body.collapsed-header .sidebar-container{
z-index:15
}
.sidebar-container .sidebar_top:empty{
display:none
}
.sidebar-container .sidebar_top>:only-child{
-webkit-box-flex:0;
flex:0 0 auto;
align-self:center;
width:100%
}
.sidebar_top_wrapper.no-items{
display:none
}
}
.post-snippet.snippet-container{
max-height:120px
}
.post-snippet .snippet-item{
line-height:24px
}
.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:$(body.text.color);
height:24px
}
.popular-posts-snippet.snippet-container{
max-height:72px
}
.popular-posts-snippet .snippet-item{
line-height:24px
}
.PopularPosts .popular-posts-snippet .snippet-fade{
color:$(body.text.color);
height:24px
}
.main .popular-posts-snippet .snippet-fade{
background:-webkit-linear-gradient($startSide,$(popularposts.background.color) 0,$(popularposts.background.color) 20%,$(popularposts.background.color.transparent) 100%);
background:linear-gradient(to $startSide,$(popularposts.background.color) 0,$(popularposts.background.color) 20%,$(popularposts.background.color.transparent) 100%)
}
.sidebar_bottom .popular-posts-snippet .snippet-fade{
background:-webkit-linear-gradient($startSide,$(sidebar.backgroundColorBottom) 0,$(sidebar.backgroundColorBottom) 20%,$(sidebar.backgroundColorBottom.transparent) 100%);
background:linear-gradient(to $startSide,$(sidebar.backgroundColorBottom) 0,$(sidebar.backgroundColorBottom) 20%,$(sidebar.backgroundColorBottom.transparent) 100%)
}
.profile-snippet.snippet-container{
max-height:192px
}
.has-location .profile-snippet.snippet-container{
max-height:144px
}
.profile-snippet .snippet-item{
line-height:24px
}
.profile-snippet .snippet-fade{
background:-webkit-linear-gradient($startSide,$(sidebar.backgroundColorTop) 0,$(sidebar.backgroundColorTop) 20%,$(sidebar.backgroundColorTop.transparent) 100%);
background:linear-gradient(to $startSide,$(sidebar.backgroundColorTop) 0,$(sidebar.backgroundColorTop) 20%,$(sidebar.backgroundColorTop.transparent) 100%);
color:$(profile.text.color);
height:24px
}
@media screen and (min-width:$(sidebar.width + content.width + content.margin * 2)){
.profile-snippet .snippet-fade{
background:-webkit-linear-gradient($startSide,$(sidebar.backgroundColorTopHD) 0,$(sidebar.backgroundColorTopHD) 20%,$(sidebar.backgroundColorTopHD.transparent) 100%);
background:linear-gradient(to $startSide,$(sidebar.backgroundColorTopHD) 0,$(sidebar.backgroundColorTopHD) 20%,$(sidebar.backgroundColorTopHD.transparent) 100%)
}
}
@media screen and (max-width:800px){
.blog-name{
margin-top:0
}
body.item-view .blog-name{
margin:0 48px
}
.blog-name .subscribe-empty-placeholder{
margin-bottom:0
}
.centered-bottom{
padding:8px
}
body.item-view .centered-bottom{
padding:0
}
body.item-view #header,body.item-view .widget.Header{
margin-right:0
}
body.collapsed-header .centered-top-container .blog-name{
display:block
}
body.collapsed-header .centered-top-container .widget.Header h1{
text-align:center
}
.widget.Header header{
padding:0
}
.widget.Header h1{
font-size:$(blog.title.font.size * 24/45);
line-height:$(blog.title.font.size * 24/45);
margin-bottom:13px
}
body.item-view .widget.Header h1,body.item-view .widget.Header p{
text-align:center
}
.blog-name .widget.PageList{
padding:0
}
body.item-view .centered-top{
margin-bottom:5px
}
.search-action,.search-input{
margin-bottom:-8px
}
.search form{
margin-bottom:8px
}
body.item-view .subscribe-section-container{
margin:5px 0 0;
width:100%
}
#page_body.section div.widget.FeaturedPost,.widget.Blog .blog-posts .post-outer-container,.widget.PopularPosts{
padding:16px
}
.widget.Blog .blog-posts .post-outer-container .post-outer{
padding:0
}
.post:first-child{
margin:0
}
.post-body .snippet-thumbnail{
margin:0 3vw 3vw 0
}
.post-body .snippet-thumbnail img{
height:20vw;
width:20vw;
max-height:128px;
max-width:128px
}
.widget.PopularPosts div.item-thumbnail{
margin:0 3vw 3vw 0
}
.widget.PopularPosts div.item-thumbnail img{
height:20vw;
width:20vw;
max-height:88px;
max-width:88px
}
.post-title{
line-height:1
}
.post-title,.post-title a{
font-size:20px
}
#page_body.section div.widget.FeaturedPost h3 a{
font-size:22px
}
.mobile-ad .inline-ad{
display:block
}
.page_body.has-vertical-ads .vertical-ad-container,.page_body.has-vertical-ads .vertical-ad-container ins{
display:none
}
.page_body.has-vertical-ads .centered .centered-bottom,.page_body.has-vertical-ads .centered .centered-top{
display:block;
width:auto
}
.post-filter-message div{
padding:8px 16px
}
}
@media screen and (min-width:$(sidebar.width + content.width + content.margin * 2)){
body{
position:relative
}
body.item-view .blog-name{
margin-left:48px
}
.no-sidebar-widget .page_body,.preview .page_body{
margin-left:0
}
.page_body{
margin-left:$(sidebar.width)
}
.search{
margin-left:0
}
.search.focused{
width:100%
}
.sticky{
padding-left:$(sidebar.width)
}
.hamburger-menu{
display:none
}
body.collapsed-header .page_body .centered-top-container{
padding-left:$(sidebar.width);
padding-right:0;
width:100%
}
body.collapsed-header .centered-top-container .search.focused{
width:100%
}
body.collapsed-header .centered-top-container .blog-name{
margin-left:0
}
body.collapsed-header.item-view .centered-top-container .search.focused{
width:calc(100% - 50px)
}
body.collapsed-header.item-view .centered-top-container .blog-name{
margin-left:40px
}
}
]]></b:skin>

Notable

<b:skin version='1.3.3'><![CDATA[/*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
/*
<!-- Constants -->

<Variable name="loraNormal20" description="Item body font" type="font" default="400 20px Lora, serif" hideEditor="true"  value="400 20px Lora, serif"/>
<Variable name="openSansNormal14" description="Small-size normal-weight font (eg: labels, subscribe popup email)" type="font" default="400 14px Open Sans, sans-serif" hideEditor="true"  value="400 14px Open Sans, sans-serif"/>
<Variable name="openSansNormal16" description="Medium-size normal-weight font (eg: sidebar titles)" type="font" default="400 16px Open Sans, sans-serif" hideEditor="true"  value="400 16px Open Sans, sans-serif"/>
<Variable name="openSansNormal20" description="Item body font, OpenSans" type="font" default="400 20px Open Sans, serif" hideEditor="true"  value="400 20px Open Sans, serif"/>
<Variable name="openSansSemibold14" description="Button font" type="font" default="600 14px Open Sans, sans-serif" hideEditor="true"  value="600 14px Open Sans, sans-serif"/>
<Variable name="openSansSemiboldItalic36" description="Open Sans semibold italic 36" type="font" default="italic 600 36px Open Sans, sans-serif" hideEditor="true"  value="italic 600 36px Open Sans, sans-serif"/>
<Variable name="openSansSemiboldItalic44" description="Blockquote font, Open Sans" type="font" default="italic 600 44px Open Sans, sans-serif" hideEditor="true"  value="italic 600 44px Open Sans, sans-serif"/>
<Variable name="openSansSemibold16" description="Subtitle font (eg: author attribution)" type="font" default="600 16px Open Sans, sans-serif" hideEditor="true"  value="600 16px Open Sans, sans-serif"/>
<Variable name="openSansSemibold48" description="Open Sans semibold 48" type="font" default="600 48px Open Sans, sans-serif" hideEditor="true"  value="600 48px Open Sans, sans-serif"/>
<Variable name="openSansBold16" description="Main blog title font" type="font" default="700 16px Open Sans, sans-serif" hideEditor="true"  value="700 16px Open Sans, sans-serif"/>
<Variable name="openSansBold24" description="Medium-size bold font (eg: subscribe popup title)" type="font" default="700 24px Open Sans, sans-serif" hideEditor="true"  value="700 24px Open Sans, sans-serif"/>
<Variable name="openSansBold36" description="Title font (eg: regular post title)" type="font" default="700 36px Open Sans, sans-serif" hideEditor="true"  value="700 36px Open Sans, sans-serif"/>
<Variable name="openSansExtraboldItalic24" description="Open Sans Extrabold italic 24" type="font" default="italic 800 24px Open Sans, sans-serif" hideEditor="true"  value="italic 800 24px Open Sans, sans-serif"/>
<Variable name="openSansExtraboldItalic40" description="Open Sans Extrabold italic 40" type="font" default="italic 800 40px Open Sans, sans-serif" hideEditor="true"  value="italic 800 40px Open Sans, sans-serif"/>
<Variable name="openSansExtraboldItalic48" description="Open Sans Extrabold italic 48" type="font" default="italic 800 48px Open Sans, sans-serif" hideEditor="true"  value="italic 800 48px Open Sans, sans-serif"/>
<Variable name="ebGaramondNormal14" description="Blog Description font, EB Garamond" type="font" default="400 14px EB Garamond, serif" hideEditor="true"  value="400 14px EB Garamond, serif"/>
<Variable name="ebGaramondNormal24" description="EB Garamond Normal 24" type="font" default="400 24px EB Garamond, serif" hideEditor="true"  value="400 24px EB Garamond, serif"/>
<Variable name="ebGaramondNormal44" description="Title font (eg: regular post title), EB Garamond" type="font" default="400 44px EB Garamond, serif" hideEditor="true"  value="400 44px EB Garamond, serif"/>
<Variable name="ebGaramondNormal48" description="EB Garamond Normal 48" type="font" default="400 48px EB Garamond, sans-serif" hideEditor="true"  value="400 48px EB Garamond, sans-serif"/>
<Variable name="ebGaramondSemiboldItalic44" description="Blockquote font, EB Garamond" type="font" default="italic 600 44px EB Garamond, serif" hideEditor="true"  value="italic 600 44px EB Garamond, serif"/>
<Variable name="latoNormal14" description="Lato Normal 14" type="font" default="400 14px Lato, sans-serif" hideEditor="true"  value="400 14px Lato, sans-serif"/>
<Variable name="latoNormal16" description="Lato Normal 16" type="font" default="400 16px Lato, sans-serif" hideEditor="true"  value="400 16px Lato, sans-serif"/>
<Variable name="latoNormal20" description="Lato Normal 20" type="font" default="400 20px Lato, sans-serif" hideEditor="true"  value="400 20px Lato, sans-serif"/>
<Variable name="latoBold14" description="Lato Bold 14" type="font" default="700 14px Lato, sans-serif" hideEditor="true"  value="700 14px Lato, sans-serif"/>
<Variable name="latoBold16" description="Lato Bold 16" type="font" default="700 16px Lato, sans-serif" hideEditor="true"  value="700 16px Lato, sans-serif"/>
<Variable name="latoBold24" description="Lato Bold 24" type="font" default="700 24px Lato, sans-serif" hideEditor="true"  value="700 24px Lato, sans-serif"/>
<Variable name="latoBold36" description="Lato Bold 36" type="font" default="700 36px Lato, sans-serif" hideEditor="true"  value="700 36px Lato, sans-serif"/>
<Variable name="latoBold48" description="Lato Bold 48" type="font" default="700 48px Lato, sans-serif" hideEditor="true"  value="700 48px Lato, sans-serif"/>
<Variable name="latoBoldItalic36" description="Lato Bold italic 36" type="font" default="italic 700 36px Lato, sans-serif" hideEditor="true"  value="italic 700 36px Lato, sans-serif"/>
<Variable name="latoExtrabold24" description="Lato Extrabold 24" type="font" default="900 24px Lato, sans-serif" hideEditor="true"  value="900 24px Lato, sans-serif"/>
<Variable name="dancingScriptNormal36" description="Dancing Script 36" type="font" default="400 36px Dancing Script, cursive" hideEditor="true"  value="400 36px Dancing Script, cursive"/>
<Variable name="dancingScriptNormal44" description="Dancing Script 44" type="font" default="400 44px Dancing Script, cursive" hideEditor="true"  value="400 44px Dancing Script, cursive"/>
<Variable name="dancingScriptNormal48" description="Dancing Script 48" type="font" default="400 48px Dancing Script, cursive" hideEditor="true"  value="400 48px Dancing Script, cursive"/>

<Variable name="keycolor" description="Main Color" type="color" default="#e5f0ee" hideEditor="true"  value="#e5f0ee"/>
<Variable name="startSide" description="Start side in blog language" type="automatic" default="left" hideEditor="true" />
<Variable name="endSide" description="End side in blog language" type="automatic" default="right" hideEditor="true" />

<!-- Variable definitions -->

<Group description="Body">
  <Variable name="body.background" description="Background" color="$(body.background.color)" type="background" default="$(color) none repeat scroll top left"  value="$(color) none repeat scroll top left"/>
  <Variable name="body.background.color" description="Body background color" type="color" default="#fff"  value="#ffffff"/>
  <Variable name="body.text.font" description="Font" type="font" default="$(loraNormal20)"  value="400 20px Lora, serif"/>
  <Variable name="body.text.color" description="Color" type="color" default="#292929"  value="#292929"/>
  <Variable name="body.link.color" description="Link color" type="color" default="#25a186"  value="#25a186"/>
  <Variable name="body.link.visited.color" description="Visited link color" type="color" default="$(body.link.color)"  value="#25a186"/>
  <Variable name="body.link.hover.color" description="Link Hover Color" type="color" default="$(body.link.color)"  value="#25a186"/>
  <Variable name="blog.title.font" description="Blog Title Font" type="font" default="$(openSansBold24)"  value="700 24px Open Sans, sans-serif"/>
  <Variable name="blog.title.color" description="Blog Title Color" type="color" default="#000"  value="#000000"/>
</Group>

<Group description="Featured post" selector=".heroPost">
  <Variable name="heropost.main.background.color" description="Featured post main background color" type="color" default="#25a186"  value="#25a186"/>
  <Variable name="heropost.main.title.color" description="Featured post main title color" type="color" default="#fff"  value="#ffffff"/>
  <Variable name="heropost.main.text.color" description="Featured post main text color" type="color" default="#fff"  value="#ffffff"/>
  <Variable name="heropost.main.button.color" description="Featured post main buttons color" type="color" default="#fff"  value="#ffffff"/>
  <Variable name="heropost.main.link.color" description="Featured post main link color" type="color" default="#173752"  value="#173752"/>
  <Variable name="heropost.secondary.background.color" description="Featured post background color (secondary)" type="color" default="#e5f0ee"  value="#e5f0ee"/>
  <Variable name="heropost.secondary.text.color" description="Featured post text color (secondary)" type="color" default="#000"  value="#000000"/>
  <Variable name="heropost.secondary.button.color" description="Featured post buttons color (secondary)" type="color" default="#25a186"  value="#25a186"/>
  <Variable name="heropost.secondary.dropcap.color" description="Featured post drop cap color (secondary)" type="color" default="$(heropost.secondary.button.color)"  value="#25a186"/>
</Group>

<Group description="Header" selector=".centered-top-container">
  <Variable name="header.background" description="Header Background" color="$(header.background.color)" type="background" default="$(color) none repeat scroll top left"  value="$(color) none repeat scroll top left"/>
  <Variable name="header.background.color" description="Background color" type="color" default="#fff"  value="#ffffff"/>
  <Variable name="header.description.font" description="Description font" type="font" default="$(openSansNormal14)"  value="400 14px Open Sans, sans-serif"/>
  <Variable name="header.description.color" description="Description Color" type="color" default="rgba(0,0,0,0.54)"  value="rgba(0,0,0,0.54)"/>
  <Variable name="header.pages.color" description="Page list color" type="color" default="#25a186"  value="#25a186"/>
  <Variable name="header.pages.selected.color" description="Page list color (selected page)" type="color" default="$(header.pages.color)"  value="#25a186"/>
  <Variable name="header.items.color" description="Text color" type="color" default="#25a186"  value="#25a186"/>
  <Variable name="header.items.font" description="Text font" type="font" default="$(openSansSemibold14)"  value="600 14px Open Sans, sans-serif"/>
</Group>

<Group description="Search">
  <Variable name="search.input.font" description="Input font" type="font" default="$(openSansSemibold16)"  value="600 16px Open Sans, sans-serif"/>
</Group>

<Group description="Feed" selector=".widget.Blog">
  <Variable name="feed.title.font" description="Post title font" type="font" default="$(openSansBold36)"  value="700 36px Open Sans, sans-serif"/>
  <Variable name="feed.title.color" description="Post title color" type="color" default="#25a186"  value="#25a186"/>
  <Variable name="feed.subtitle.font" description="Post subtitle font" type="font" default="$(openSansSemibold16)"  value="600 16px Open Sans, sans-serif"/>
  <Variable name="feed.subtitle.color" description="Post subtitle color" type="color" default="rgba(0,0,0,0.54)"  value="rgba(0,0,0,0.54)"/>
  <Variable name="feed.text.font" description="Post text font" type="font" default="$(loraNormal20)"  value="400 20px Lora, serif"/>
  <Variable name="feed.text.color" description="Post text color" type="color" default="rgba(0,0,0,0.84)"  value="rgba(0,0,0,0.84)"/>
  <Variable name="feed.button.font" description="Button font" type="font" default="$(openSansSemibold14)"  value="600 14px Open Sans, sans-serif"/>
  <Variable name="feed.button.color" description="Button color" type="color" default="#25a186"  value="#25a186"/>
</Group>

<Group description="Sharing" selector=".sharing">
  <Variable name="sharing.background.color"
      description="Sharing background color"
      type="color"
      default="$(body.background.color)"  value="#ffffff"/>
  <Variable name="sharing.text.color" description="Sharing text color"
      type="color"
      default="$(feed.button.color)"  value="#25a186"/>
  <Variable name="sharing.icons.color"
      description="Sharing icons color"
      type="color"
      default="$(sharing.text.color)"  value="#25a186"/>
</Group>

<Group description="Dialogs" selector=".subscribe-popup">
  <Variable name="dialog.title.font" description="Dialog title font" type="font" default="$(openSansBold24)"  value="700 24px Open Sans, sans-serif"/>
  <Variable name="dialog.title.color" description="Dialog title color" type="color" default="rgba(0,0,0,0.84)"  value="rgba(0,0,0,0.84)"/>
  <Variable name="dialog.input.font" description="Dialog input font" type="font" default="$(openSansNormal14)"  value="400 14px Open Sans, sans-serif"/>
  <Variable name="dialog.input.color" description="Dialog input color" type="color" default="rgba(0,0,0,0.84)"  value="rgba(0,0,0,0.84)"/>
  <Variable name="dialog.action.font" description="Dialog action font" type="font" default="$(openSansSemibold14)"  value="600 14px Open Sans, sans-serif"/>
  <Variable name="dialog.action.color" description="Dialog action color" type="color" default="$(feed.button.color)"  value="#25a186"/>
</Group>

<Group description="Individual Post or Page" selector="body.item-page .widget.Blog">
  <Variable name="item.title.font" description="Font" type="font" default="$(openSansSemibold48)"  value="600 48px Open Sans, sans-serif"/>
  <Variable name="item.title.color" description="Post title color" type="color" default="#fff"  value="#ffffff"/>
  <Variable name="item.title.background.color" description="Post title background color" type="color" default="#25a186"  value="#25a186"/>
  <Variable name="item.subtitle.font" description="Post subtitle font" type="font" default="$(openSansSemibold16)"  value="600 16px Open Sans, sans-serif"/>
  <Variable name="item.subtitle.color" description="Post subtitle color" type="color" default="rgba(0,0,0,0.54)"  value="rgba(0,0,0,0.54)"/>
  <Variable name="item.byline.color" description="Post byline color" type="color" default="#25a186"  value="#25a186"/>
  <Variable name="item.byline.font" description="Post byline font" type="font" default="$(openSansSemibold14)"  value="600 14px Open Sans, sans-serif"/>
  <Variable name="item.action.color" description="Action color" type="color" default="#25a186"  value="#25a186"/>
  <Variable name="item.action.font" description="Action font" type="font" default="$(openSansSemibold14)"  value="600 14px Open Sans, sans-serif"/>
  <Variable name="item.label.font" description="Label font" type="font" default="$(openSansNormal14)"  value="400 14px Open Sans, sans-serif"/>
  <Variable name="item.blockquote.font" description="Blockquote font" type="font" default="$(openSansSemiboldItalic44)"  value="italic 600 44px Open Sans, sans-serif"/>
</Group>

<Group description="Sidebar" selector=".sidebar-container">
  <Variable name="sidebar.backgroundColor" description="Background color" type="color" default="$(body.background.color)"  value="#ffffff"/>
  <Variable name="sidebar.icon.color" description="Icon color" type="color" default="#000"  value="#000000"/>
  <Variable name="sidebar.separator.color" description="Separator color" type="color" default="#000"  value="#000000"/>
  <Variable name="sidebar.widget.title.font" description="Gadget title font" type="font" default="$(openSansNormal16)"  value="400 16px Open Sans, sans-serif"/>
  <Variable name="sidebar.widget.title.color" description="Gadget title color" type="color" default="#000"  value="#000000"/>
  <Variable name="sidebar.profile.title.color" description="Profile name color" type="color" default="#000"  value="#000000"/>
  <Variable name="sidebar.profile.text.color" description="Profile description color" type="color" default="#000"  value="#000000"/>
  <Variable name="sidebar.profile.link.font" description="Profile link font" type="font" default="$(openSansSemibold16)"  value="600 16px Open Sans, sans-serif"/>
  <Variable name="sidebar.profile.link.color" description="Profile link color" type="color" default="$(body.link.color)"  value="#25a186"/>
</Group>


<Variable name="attribution.text.font" description="Attribution text font" type="font" default="$(openSansSemibold14)" hideEditor="true"  value="600 14px Open Sans, sans-serif"/>
<Variable name="attribution.icon.color" description="Attribution icon color" type="color" default="rgba(0,0,0,0.54)" hideEditor="true"  value="rgba(0,0,0,0.54)"/>

<Group description="Widths">
  <Variable name="sidebar.width" description="Sidebar width" type="length" min="100px" max="1000px" default="320px"  value="320px"/>
  <Variable name="feed.width" description="Content width" type="length" min="860px" max="1440px" default="1280px"  value="1280px"/>
</Group>
 */

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
}
#comments .comment .comment-actions,.subscribe-popup .FollowByEmail .follow-by-email-submit,.widget.Profile .profile-link{
background:0 0;
border:0;
box-shadow:none;
color:$(body.link.color);
cursor:pointer;
font-size:14px;
font-weight:700;
outline:0;
text-decoration:none;
text-transform:uppercase;
width:auto
}
.dim-overlay{
background-color:rgba(0,0,0,.54);
height:100vh;
left:0;
position:fixed;
top:0;
width:100%
}
#sharing-dim-overlay{
background-color:transparent
}
input::-ms-clear{
display:none
}
.blogger-logo,.svg-icon-24.blogger-logo{
fill:#ff9800;
opacity:1
}
.loading-spinner-large{
-webkit-animation:mspin-rotate 1.568s infinite linear;
animation:mspin-rotate 1.568s 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{
from{
-webkit-transform:translateX(0);
transform:translateX(0)
}
to{
-webkit-transform:translateX(-3888px);
transform:translateX(-3888px)
}
}
@keyframes mspin-singlecolor-large-film{
from{
-webkit-transform:translateX(0);
transform:translateX(0)
}
to{
-webkit-transform:translateX(-3888px);
transform:translateX(-3888px)
}
}
@-webkit-keyframes mspin-rotate{
from{
-webkit-transform:rotate(0);
transform:rotate(0)
}
to{
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes mspin-rotate{
from{
-webkit-transform:rotate(0);
transform:rotate(0)
}
to{
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-webkit-keyframes mspin-revrot{
from{
-webkit-transform:rotate(0);
transform:rotate(0)
}
to{
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg)
}
}
@keyframes mspin-revrot{
from{
-webkit-transform:rotate(0);
transform:rotate(0)
}
to{
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg)
}
}
.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,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
height:50px
}
#main{
outline:0
}
.main-heading{
position:absolute;
clip:rect(1px,1px,1px,1px);
padding:0;
border:0;
height:1px;
width:1px;
overflow:hidden
}
.Attribution{
margin-top:1em;
text-align:center
}
.Attribution .blogger img,.Attribution .blogger svg{
vertical-align:bottom
}
.Attribution .blogger img{
margin-$endSide:.5em
}
.Attribution div{
line-height:24px;
margin-top:.5em
}
.Attribution .copyright,.Attribution .image-attribution{
font-size:.7em;
margin-top:1.5em
}
.BLOG_mobile_video_class{
display:none
}
.bg-photo{
background-attachment:scroll!important
}
body .CSS_LIGHTBOX{
z-index:900
}
.extendable .show-less,.extendable .show-more{
border-color:$(body.link.color);
color:$(body.link.color);
margin-top:8px
}
.extendable .show-less.hidden,.extendable .show-more.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:0
}
.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
}
.link-copied-dialog{
max-width:520px;
outline:0
}
.link-copied-dialog .modal-dialog-buttons{
margin-top:8px
}
.link-copied-dialog .goog-buttonset-default{
background:0 0;
border:0
}
.link-copied-dialog .goog-buttonset-default:focus{
outline:0
}
.paging-control-container{
margin-bottom:16px
}
.paging-control-container .paging-control{
display:inline-block
}
.paging-control-container .comment-range-text::after,.paging-control-container .paging-control{
color:$(body.link.color)
}
.paging-control-container .comment-range-text,.paging-control-container .paging-control{
margin-$endSide:8px
}
.paging-control-container .comment-range-text::after,.paging-control-container .paging-control::after{
content:"\b7";
cursor:default;
padding-$startSide:8px;
pointer-events:none
}
.paging-control-container .comment-range-text:last-child::after,.paging-control-container .paging-control:last-child::after{
content:none
}
.byline.reactions iframe{
height:20px
}
.b-notification{
color:#000;
background-color:#fff;
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(.4,0,.2,1);
transition:margin-top .3s cubic-bezier(.4,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
}
@media screen and (max-width:968px){
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>.separator:first-child>a[imageanchor="1"]:first-child{
margin-top:20px
}
.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
}
}
.item-control{
display:none
}
#comments{
border-top:1px dashed rgba(0,0,0,.54);
margin-top:20px;
padding:20px
}
#comments .comment-thread ol{
margin:0;
padding-left:0;
padding-$startSide:0
}
#comments .comment .comment-replybox-single,#comments .comment-thread .comment-replies{
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 $(item.action.color);
box-sizing:border-box;
fill:$(item.action.color);
height:35px;
margin:0;
padding:7px;
width:35px
}
.comment .comment-block{
margin-top:10px;
margin-$startSide:60px;
padding-bottom:0
}
#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:$(body.text.color);
font-style:normal;
font-weight:700
}
#comments .comment .comment-actions{
bottom:0;
margin-bottom:15px;
position:absolute
}
#comments .comment .comment-actions>*{
margin-right:8px
}
#comments .comment .comment-header .datetime{
bottom:0;
color:$(item.subtitle.color);
display:inline-block;
font-size:13px;
font-style:italic;
margin-$startSide:8px
}
#comments .comment .comment-footer .comment-timestamp a,#comments .comment .comment-header .datetime a{
color:$(item.subtitle.color)
}
#comments .comment .comment-content,.comment .comment-body{
margin-top:12px;
word-break:break-word
}
.comment-body{
margin-bottom:12px
}
#comments.embed[data-num-comments="0"]{
border:0;
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(.4,0,.2,1);
transition:height .3s cubic-bezier(.4,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
}
.touch-icon:active,.touch-icon:focus{
background-color:rgba(153,153,153,.4);
border-radius:50%
}
svg:not(:root).touch-icon{
overflow:visible
}
html[dir=rtl] .rtl-reversible-icon{
-webkit-transform:scaleX(-1);
-ms-transform:scaleX(-1);
transform:scaleX(-1)
}
.svg-icon-24-button,.touch-icon-button{
background:0 0;
border:0;
margin:0;
outline:0;
padding:0
}
.touch-icon-button .touch-icon:active,.touch-icon-button .touch-icon:focus{
background-color:transparent
}
.touch-icon-button:active .touch-icon,.touch-icon-button:focus .touch-icon{
background-color:rgba(153,153,153,.4);
border-radius:50%
}
.Profile .default-avatar-wrapper .avatar-icon{
border-radius:50%;
border:solid 1px $(sidebar.icon.color);
box-sizing:border-box;
fill:$(sidebar.icon.color);
margin:0
}
.Profile .individual .default-avatar-wrapper .avatar-icon{
padding:25px
}
.Profile .individual .avatar-icon,.Profile .individual .profile-img{
height:120px;
width:120px
}
.Profile .team .default-avatar-wrapper .avatar-icon{
padding:8px
}
.Profile .team .avatar-icon,.Profile .team .default-avatar-wrapper,.Profile .team .profile-img{
height:40px;
width:40px
}
.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
}
.post-bottom{
-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-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap
}
.post-footer{
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
flex:1 1 auto;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-ordinal-group:2;
-webkit-order:1;
-ms-flex-order:1;
order:1
}
.post-footer>*{
-webkit-box-flex:0;
-webkit-flex:0 1 auto;
-ms-flex:0 1 auto;
flex:0 1 auto
}
.post-footer .byline:last-child{
margin-$endSide:1em
}
.jump-link{
-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-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(.4,0,.2,1);
transition-timing-function:cubic-bezier(.4,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:0 0
}
.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(.4,0,.2,1);
transition:height .3s cubic-bezier(.4,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:0
}
.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
}
.overflowable-container{
max-height:$(header.items.font.size * 12 / 7 + 24px);
overflow:hidden;
position:relative
}
.overflow-button{
cursor:pointer
}
#overflowable-dim-overlay{
background:0 0
}
.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:$(body.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 .tabs li,.overflow-popup li{
display:block;
height:auto
}
.overflow-popup .tabs li{
padding-left:0;
padding-right:0
}
.overflow-button.hidden,.overflow-popup .tabs li.hidden,.overflow-popup li.hidden{
display:none
}
.ripple{
position:relative
}
.ripple>*{
z-index:1
}
.splash-wrapper{
bottom:0;
left:0;
overflow:hidden;
pointer-events:none;
position:absolute;
right:0;
top:0;
z-index:0
}
.splash{
background:#ccc;
border-radius:100%;
display:block;
opacity:.6;
position:absolute;
-webkit-transform:scale(0);
-ms-transform:scale(0);
transform:scale(0)
}
.splash.animate{
-webkit-animation:ripple-effect .4s linear;
animation:ripple-effect .4s linear
}
@-webkit-keyframes ripple-effect{
100%{
opacity:0;
-webkit-transform:scale(2.5);
transform:scale(2.5)
}
}
@keyframes ripple-effect{
100%{
opacity:0;
-webkit-transform:scale(2.5);
transform:scale(2.5)
}
}
.search{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
line-height:24px;
width:24px
}
.search.focused{
width:100%
}
.search.focused .section{
width:100%
}
.search form{
z-index:101
}
.search h3{
display:none
}
.search form{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-flex:1;
-webkit-flex:1 0 0;
-ms-flex:1 0 0px;
flex:1 0 0;
border-bottom:solid 1px transparent;
padding-bottom:8px
}
.search form>*{
display:none
}
.search.focused form>*{
display:block
}
.search .search-input label{
display:none
}
.centered-top-placeholder.cloned .search form{
z-index:30
}
.search.focused form{
border-color:$(body.text.color);
position:relative;
width:auto
}
.collapsed-header .centered-top-container .search.focused form{
border-bottom-color:transparent
}
.search-expand{
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto
}
.search-expand-text{
display:none
}
.search-close{
display:inline;
vertical-align:middle
}
.search-input{
-webkit-box-flex:1;
-webkit-flex:1 0 1px;
-ms-flex:1 0 1px;
flex:1 0 1px
}
.search-input input{
background:0 0;
border:0;
box-sizing:border-box;
color:$(body.text.color);
display:inline-block;
outline:0;
width:calc(100% - 48px)
}
.search-input input.no-cursor{
color:transparent;
text-shadow:0 0 0 $(body.text.color)
}
.collapsed-header .centered-top-container .search-action,.collapsed-header .centered-top-container .search-input input{
color:$(body.text.color)
}
.collapsed-header .centered-top-container .search-input input.no-cursor{
color:transparent;
text-shadow:0 0 0 $(body.text.color)
}
.collapsed-header .centered-top-container .search-input input.no-cursor:focus,.search-input input.no-cursor:focus{
outline:0
}
.search-focused>*{
visibility:hidden
}
.search-focused .search,.search-focused .search-icon{
visibility:visible
}
.search.focused .search-action{
display:block
}
.search.focused .search-action:disabled{
opacity:.3
}
.sidebar-container{
background-color:#f7f7f7;
max-width:$(sidebar.width);
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,.2,1);
transition-timing-function:cubic-bezier(0,0,.2,1);
width:$(sidebar.width);
z-index:101;
-webkit-overflow-scrolling:touch
}
.sidebar-container .navigation{
line-height:0;
padding:16px
}
.sidebar-container .sidebar-back{
cursor:pointer
}
.sidebar-container .widget{
background:0 0;
margin:0 16px;
padding:16px 0
}
.sidebar-container .widget .title{
color:$(sidebar.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 li{
font-size:16px;
line-height:normal
}
.sidebar-container .widget+.widget{
border-top:1px dashed $(sidebar.separator.color)
}
.BlogArchive li{
margin:16px 0
}
.BlogArchive li:last-child{
margin-bottom:0
}
.Label li a{
display:inline-block
}
.BlogArchive .post-count,.Label .label-count{
float:$endSide;
margin-$startSide:.25em
}
.BlogArchive .post-count::before,.Label .label-count::before{
content:"("
}
.BlogArchive .post-count::after,.Label .label-count::after{
content:")"
}
.widget.Translate .skiptranslate>div{
display:block!important
}
.widget.Profile .profile-link{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex
}
.widget.Profile .team-member .default-avatar-wrapper,.widget.Profile .team-member .profile-img{
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto;
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;
align-self:center;
display:block;
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
flex:1 1 auto
}
.dim-overlay{
background-color:rgba(0,0,0,.54);
z-index:100
}
body.sidebar-visible{
overflow-y:hidden
}
@media screen and (max-width:$(feed.width + sidebar.width + 20px - 1px)){
.sidebar-container{
bottom:0;
position:fixed;
top:0;
left:auto;
right:0
}
.sidebar-container.sidebar-invisible{
-webkit-transition-timing-function:cubic-bezier(.4,0,.6,1);
transition-timing-function:cubic-bezier(.4,0,.6,1);
-webkit-transform:translateX($(sidebar.width));
-ms-transform:translateX($(sidebar.width));
transform:translateX($(sidebar.width))
}
}
.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:$(body.background.color);
box-sizing:border-box;
color:$(body.text.color);
padding:30px;
position:fixed;
text-align:center;
width:calc(100% - 24px);
z-index:101
}
.dialog input[type=email],.dialog input[type=text]{
background-color:transparent;
border:0;
border-bottom:solid 1px rgba($(body.text.color.red),$(body.text.color.green),$(body.text.color.blue),.12);
color:$(body.text.color);
display:block;
font-family:$(body.text.font.family);
font-size:16px;
line-height:24px;
margin:auto;
padding-bottom:7px;
outline:0;
text-align:center;
width:100%
}
.dialog input[type=email]::-webkit-input-placeholder,.dialog input[type=text]::-webkit-input-placeholder{
color:$(body.text.color)
}
.dialog input[type=email]::-moz-placeholder,.dialog input[type=text]::-moz-placeholder{
color:$(body.text.color)
}
.dialog input[type=email]:-ms-input-placeholder,.dialog input[type=text]:-ms-input-placeholder{
color:$(body.text.color)
}
.dialog input[type=email]::-ms-input-placeholder,.dialog input[type=text]::-ms-input-placeholder{
color:$(body.text.color)
}
.dialog input[type=email]::placeholder,.dialog input[type=text]::placeholder{
color:$(body.text.color)
}
.dialog input[type=email]:focus,.dialog input[type=text]:focus{
border-bottom:solid 2px $(body.link.color);
padding-bottom:6px
}
.dialog input.no-cursor{
color:transparent;
text-shadow:0 0 0 $(body.text.color)
}
.dialog input.no-cursor:focus{
outline:0
}
.dialog input.no-cursor:focus{
outline:0
}
.dialog input[type=submit]{
font-family:$(body.text.font.family)
}
.dialog .goog-buttonset-default{
color:$(body.link.color)
}
.subscribe-popup{
max-width:364px
}
.subscribe-popup h3{
color:$(item.title.color);
font-size:1.8em;
margin-top:0
}
.subscribe-popup .FollowByEmail h3{
display:none
}
.subscribe-popup .FollowByEmail .follow-by-email-submit{
color:$(body.link.color);
display:inline-block;
margin:0 auto;
margin-top:24px;
width:auto;
white-space:normal
}
.subscribe-popup .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 auto;
width:100%
}
}
body#layout .bg-photo,body#layout .bg-photo-overlay{
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
}
.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
}
.centered-bottom .share-buttons .svg-icon-24,.share-buttons .svg-icon-24{
fill:$(sharing.icons.color)
}
.sharing-open.touch-icon-button:active .touch-icon,.sharing-open.touch-icon-button:focus .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:0 0;
border:0;
margin:0;
outline:0;
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,.1);
outline:0
}
.share-buttons li svg[class*=" sharing-"],.share-buttons li svg[class^=sharing-]{
position:absolute;
top:10px
}
.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
}
.flat-button{
cursor:pointer;
display:inline-block;
font-weight:700;
text-transform:uppercase;
border-radius:2px;
padding:8px;
margin:-8px
}
.flat-icon-button{
background:0 0;
border:0;
margin:0;
outline:0;
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
}
h1,h2,h3,h4,h5,h6{
margin:0
}
.post-body h1,.post-body h2,.post-body h3,.post-body h4,.post-body h5,.post-body h6{
margin:1em 0
}
.action-link,a{
color:$(body.link.color);
cursor:pointer;
text-decoration:none
}
.action-link:visited,a:visited{
color:$(body.link.visited.color)
}
.action-link:hover,a:hover{
color:$(body.link.hover.color)
}
body{
background-color:$(body.background.color);
color:$(body.text.color);
font:$(body.text.font);
margin:0 auto
}
.unused{
background:$(body.background)
}
.dim-overlay{
z-index:100
}
.all-container{
min-height:100vh;
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
}
body.sidebar-visible .all-container{
overflow-y:scroll
}
.page{
max-width:$(feed.width);
width:100%
}
.Blog{
padding:0;
padding-$startSide:136px
}
.main_content_container{
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto;
margin:0 auto;
max-width:$(feed.width + sidebar.width);
width:100%
}
.centered-top-container{
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto
}
.centered-top,.centered-top-placeholder{
box-sizing:border-box;
width:100%
}
.centered-top{
box-sizing:border-box;
margin:0 auto;
max-width:$(feed.width);
padding:44px 136px 32px 136px;
width:100%
}
.centered-top h3{
color:$(header.description.color);
font:$(header.items.font)
}
.centered{
width:100%
}
.centered-top-firstline{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
position:relative;
width:100%
}
.main_header_elements{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-flex:0;
-webkit-flex:0 1 auto;
-ms-flex:0 1 auto;
flex:0 1 auto;
-webkit-box-ordinal-group:2;
-webkit-order:1;
-ms-flex-order:1;
order:1;
overflow-x:hidden;
width:100%
}
html[dir=rtl] .main_header_elements{
-webkit-box-ordinal-group:3;
-webkit-order:2;
-ms-flex-order:2;
order:2
}
body.search-view .centered-top.search-focused .blog-name{
display:none
}
.widget.Header img{
max-width:100%
}
.blog-name{
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
flex:1 1 auto;
min-width:0;
-webkit-box-ordinal-group:2;
-webkit-order:1;
-ms-flex-order:1;
order:1;
-webkit-transition:opacity .2s cubic-bezier(.4,0,.2,1);
transition:opacity .2s cubic-bezier(.4,0,.2,1)
}
.subscribe-section-container{
-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
}
.search{
-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;
line-height:$(blog.title.font.size)
}
.search svg{
margin-bottom:$(blog.title.font.size / 2 - 12px);
margin-top:$(blog.title.font.size / 2 - 12px);
padding-bottom:0;
padding-top:0
}
.search,.search.focused{
display:block;
width:auto
}
.search .section{
opacity:0;
position:absolute;
right:0;
top:0;
-webkit-transition:opacity .2s cubic-bezier(.4,0,.2,1);
transition:opacity .2s cubic-bezier(.4,0,.2,1)
}
.search-expand{
background:0 0;
border:0;
margin:0;
outline:0;
padding:0;
display:block
}
.search.focused .search-expand{
visibility:hidden
}
.hamburger-menu{
float:right;
height:$(blog.title.font.size)
}
.search-expand,.subscribe-section-container{
margin-$startSide:44px
}
.hamburger-section{
-webkit-box-flex:1;
-webkit-flex:1 0 auto;
-ms-flex:1 0 auto;
flex:1 0 auto;
margin-left:44px;
-webkit-box-ordinal-group:3;
-webkit-order:2;
-ms-flex-order:2;
order:2
}
html[dir=rtl] .hamburger-section{
-webkit-box-ordinal-group:2;
-webkit-order:1;
-ms-flex-order:1;
order:1
}
.search-expand-icon{
display:none
}
.search-expand-text{
display:block
}
.search-input{
width:100%
}
.search-focused .hamburger-section{
visibility:visible
}
.centered-top-secondline .PageList ul{
margin:0;
max-height:$(header.items.font.size * 12 / 7 * 6 + 144px);
overflow-y:hidden
}
.centered-top-secondline .PageList li{
margin-$endSide:30px
}
.centered-top-secondline .PageList li:first-child a{
padding-$startSide:0
}
.centered-top-secondline .PageList .overflow-popup ul{
overflow-y:auto
}
.centered-top-secondline .PageList .overflow-popup li{
display:block
}
.centered-top-secondline .PageList .overflow-popup li.hidden{
display:none
}
.overflowable-contents li{
display:inline-block;
height:$(header.items.font.size * 12 / 7 + 24px)
}
.sticky .blog-name{
overflow:hidden
}
.sticky .blog-name .widget.Header h1{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap
}
.sticky .blog-name .widget.Header p,.sticky .centered-top-secondline{
display:none
}
.centered-top-container,.centered-top-placeholder{
background:$(header.background)
}
.centered-top .svg-icon-24{
fill:$(header.items.color)
}
.blog-name h1,.blog-name h1 a{
color:$(blog.title.color);
font:$(blog.title.font);
line-height:$(blog.title.font.size);
text-transform:uppercase
}
.widget.Header .header-widget p{
font:$(header.description.font);
font-style:italic;
color:$(header.description.color);
line-height:1.6;
max-width:$(feed.width - 604px)
}
.centered-top .flat-button{
color:$(header.items.color);
cursor:pointer;
font:$(header.items.font);
line-height:$(blog.title.font.size);
text-transform:uppercase;
-webkit-transition:opacity .2s cubic-bezier(.4,0,.2,1);
transition:opacity .2s cubic-bezier(.4,0,.2,1)
}
.subscribe-button{
background:0 0;
border:0;
margin:0;
outline:0;
padding:0;
display:block
}
html[dir=ltr] .search form{
margin-right:12px
}
.search.focused .section{
opacity:1;
margin-right:36px;
width:calc(100% - 36px)
}
.search input{
border:0;
color:$(header.description.color);
font:$(search.input.font);
line-height:$(blog.title.font.size);
outline:0;
width:100%
}
.search form{
padding-bottom:0
}
.search input[type=submit]{
display:none
}
.search input::-webkit-input-placeholder{
text-transform:uppercase
}
.search input::-moz-placeholder{
text-transform:uppercase
}
.search input:-ms-input-placeholder{
text-transform:uppercase
}
.search input::-ms-input-placeholder{
text-transform:uppercase
}
.search input::placeholder{
text-transform:uppercase
}
.centered-top-secondline .dim-overlay,.search .dim-overlay{
background:0 0
}
.centered-top-secondline .PageList .overflow-button a,.centered-top-secondline .PageList li a{
color:$(header.pages.color);
font:$(header.items.font);
line-height:$(header.items.font.size * 12 / 7 + 24px);
padding:12px
}
.centered-top-secondline .PageList li.selected a{
color:$(header.pages.selected.color)
}
.centered-top-secondline .overflow-popup .PageList li a{
color:$(body.text.color)
}
.PageList ul{
padding:0
}
.sticky .search form{
border:0
}
.sticky{
box-shadow:0 0 20px 0 rgba(0,0,0,.7)
}
.sticky .centered-top{
padding-bottom:0;
padding-top:0
}
.sticky .blog-name h1,.sticky .search,.sticky .search-expand,.sticky .subscribe-button{
line-height:$(blog.title.font.size + 16px)
}
.sticky .hamburger-section,.sticky .search-expand,.sticky .search.focused .search-submit{
-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:$(blog.title.font.size + 16px)
}
.subscribe-popup h3{
color:$(dialog.title.color);
font:$(dialog.title.font);
margin-bottom:24px
}
.subscribe-popup div.widget.FollowByEmail .follow-by-email-address{
color:$(dialog.input.color);
font:$(dialog.input.font)
}
.subscribe-popup div.widget.FollowByEmail .follow-by-email-submit{
color:$(dialog.action.color);
font:$(dialog.action.font);
margin-top:24px
}
.post-content{
-webkit-box-flex:0;
-webkit-flex:0 1 auto;
-ms-flex:0 1 auto;
flex:0 1 auto;
-webkit-box-ordinal-group:2;
-webkit-order:1;
-ms-flex-order:1;
order:1;
margin-$endSide:76px;
max-width:$(feed.width - 604px);
width:100%
}
.post-filter-message{
background-color:$(body.link.color);
color:$(body.background.color);
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
font:$(feed.subtitle.font);
margin:40px 136px 48px 136px;
padding:10px;
position:relative
}
.post-filter-message>*{
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto
}
.post-filter-message .search-query{
font-style:italic;
quotes:"\201c" "\201d" "\2018" "\2019"
}
.post-filter-message .search-query::before{
content:open-quote
}
.post-filter-message .search-query::after{
content:close-quote
}
.post-filter-message div{
display:inline-block
}
.post-filter-message a{
color:$(body.background.color);
display:inline-block;
text-transform:uppercase
}
.post-filter-description{
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
flex:1 1 auto;
margin-$endSide:16px
}
.post-title{
margin-top:0
}
body.feed-view .post-outer-container{
margin-top:85px
}
body.feed-view .feed-message+.post-outer-container,body.feed-view .post-outer-container:first-child{
margin-top:0
}
.post-outer{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
position:relative
}
.post-outer .snippet-thumbnail{
-webkit-box-align:center;
-webkit-align-items:center;
-ms-flex-align:center;
align-items:center;
background:#000;
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:256px;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
margin-$endSide:136px;
overflow:hidden;
-webkit-box-ordinal-group:3;
-webkit-order:2;
-ms-flex-order:2;
order:2;
position:relative;
width:256px
}
.post-outer .thumbnail-empty{
background:0 0
}
.post-outer .snippet-thumbnail-img{
background-position:center;
background-repeat:no-repeat;
background-size:cover;
width:100%;
height:100%
}
.post-outer .snippet-thumbnail img{
max-height:100%
}
.post-title-container{
margin-bottom:16px
}
.post-bottom{
-webkit-box-align:baseline;
-webkit-align-items:baseline;
-ms-flex-align:baseline;
align-items:baseline;
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between
}
.post-share-buttons-bottom{
float:left
}
.footer{
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto;
margin:auto auto 0 auto;
padding-bottom:32px;
width:auto
}
.post-header-container{
margin-bottom:12px
}
.post-header-container .post-share-buttons-top{
float:right
}
.post-header-container .post-header{
float:$startSide
}
.byline{
display:inline-block;
margin-bottom:8px
}
.byline,.byline a,.flat-button{
color:$(feed.button.color);
font:$(feed.button.font)
}
.flat-button.ripple .splash{
background-color:rgba($(feed.button.color.red),$(feed.button.color.green),$(feed.button.color.blue),.4)
}
.flat-button.ripple:hover{
background-color:rgba($(feed.button.color.red),$(feed.button.color.green),$(feed.button.color.blue),.12)
}
.post-footer .byline{
text-transform:uppercase
}
.post-comment-link{
line-height:1
}
.blog-pager{
float:$endSide;
margin-$endSide:468px;
margin-top:48px
}
.FeaturedPost{
margin-bottom:56px
}
.FeaturedPost h3{
margin:16px 136px 8px 136px
}
.shown-ad{
margin-bottom:85px;
margin-top:85px
}
.shown-ad .inline-ad{
display:block;
max-width:$(feed.width - 604px)
}
body.feed-view .shown-ad:last-child{
display:none
}
.post-title,.post-title a{
color:$(feed.title.color);
font:$(feed.title.font);
line-height:1.3333333333
}
.feed-message{
color:$(feed.subtitle.color);
font:$(feed.subtitle.font);
margin-bottom:52px
}
.post-header-container .byline,.post-header-container .byline a{
color:$(feed.subtitle.color);
font:$(feed.subtitle.font)
}
.post-header-container .byline.post-author:not(:last-child)::after{
content:"\b7"
}
.post-header-container .byline.post-author:not(:last-child){
margin-$endSide:0
}
.post-snippet-container{
font:$(feed.text.font)
}
.sharing-button{
text-transform:uppercase;
word-break:normal
}
.post-outer-container .svg-icon-24{
fill:$(feed.button.color)
}
.post-body{
color:$(feed.text.color);
font:$(feed.text.font);
line-height:2;
margin-bottom:24px
}
.blog-pager .blog-pager-older-link{
color:$(feed.button.color);
float:right;
font:$(feed.button.font);
text-transform:uppercase
}
.no-posts-message{
margin:32px
}
body.item-view .Blog .post-title-container{
background-color:$(item.title.background.color);
box-sizing:border-box;
margin-bottom:-1px;
padding-bottom:86px;
padding-$endSide:290px;
padding-$startSide:140px;
padding-top:124px;
width:100%
}
body.item-view .Blog .post-title,body.item-view .Blog .post-title a{
color:$(item.title.color);
font:$(item.title.font);
line-height:1.4166666667;
margin-bottom:0
}
body.item-view .Blog{
margin:0;
margin-bottom:85px;
padding:0
}
body.item-view .Blog .post-content{
margin-$endSide:0;
max-width:none
}
body.item-view .comments,body.item-view .shown-ad,body.item-view .widget.Blog .post-bottom{
margin-bottom:0;
margin-$endSide:400px;
margin-$startSide:140px;
margin-top:0
}
body.item-view .widget.Header header p{
max-width:$(feed.width - 540px)
}
body.item-view .shown-ad{
margin-bottom:24px;
margin-top:24px
}
body.item-view .Blog .post-header-container{
padding-$startSide:140px
}
body.item-view .Blog .post-header-container .post-author-profile-pic-container{
background-color:$(item.title.background.color);
border-top:1px solid $(item.title.background.color);
float:$startSide;
height:84px;
margin-$endSide:24px;
margin-$startSide:-140px;
padding-$startSide:140px
}
body.item-view .Blog .post-author-profile-pic{
max-height:100%
}
body.item-view .Blog .post-header{
float:$startSide;
height:84px
}
body.item-view .Blog .post-header>*{
position:relative;
top:50%;
-webkit-transform:translateY(-50%);
-ms-transform:translateY(-50%);
transform:translateY(-50%)
}
body.item-view .post-body{
color:$(body.text.color);
font:$(body.text.font);
line-height:2
}
body.item-view .Blog .post-body-container{
padding-$endSide:290px;
position:relative;
margin-$startSide:140px;
margin-top:20px;
margin-bottom:32px
}
body.item-view .Blog .post-body{
margin-bottom:0;
margin-$endSide:110px
}
body.item-view .Blog .post-body::first-letter{
float:$startSide;
font-size:$(body.text.font.size * 2 * 2);
font-weight:600;
line-height:1;
margin-$endSide:16px
}
body.item-view .Blog .post-body div[style*="text-align: center"]::first-letter{
float:none;
font-size:inherit;
font-weight:inherit;
line-height:inherit;
margin-right:0
}
body.item-view .Blog .post-body::first-line{
color:$(item.action.color)
}
body.item-view .Blog .post-body-container .post-sidebar{
$endSide:0;
position:absolute;
top:0;
width:290px
}
body.item-view .Blog .post-body-container .post-sidebar .sharing-button{
display:inline-block
}
.widget.Attribution{
clear:both;
font:$(attribution.text.font);
padding-top:2em
}
.widget.Attribution .blogger{
margin:12px
}
.widget.Attribution svg{
fill:$(attribution.icon.color)
}
body.item-view .PopularPosts{
margin-$startSide:140px
}
body.item-view .PopularPosts .widget-content>ul{
padding-left:0
}
body.item-view .PopularPosts .widget-content>ul>li{
display:block
}
body.item-view .PopularPosts .post-content{
margin-$endSide:76px;
max-width:664px
}
body.item-view .PopularPosts .post:not(:last-child){
margin-bottom:85px
}
body.item-view .post-body-container img{
height:auto;
max-width:100%
}
body.item-view .PopularPosts>.title{
color:$(item.subtitle.color);
font:$(item.subtitle.font);
margin-bottom:36px
}
body.item-view .post-sidebar .post-labels-sidebar{
margin-top:48px;
min-width:150px
}
body.item-view .post-sidebar .post-labels-sidebar h3{
color:$(body.text.color);
font:$(item.action.font);
margin-bottom:16px
}
body.item-view .post-sidebar .post-labels-sidebar a{
color:$(item.action.color);
display:block;
font:$(item.label.font);
font-style:italic;
line-height:2
}
body.item-view blockquote{
font:$(item.blockquote.font);
font-style:italic;
quotes:"\201c" "\201d" "\2018" "\2019"
}
body.item-view blockquote::before{
content:open-quote
}
body.item-view blockquote::after{
content:close-quote
}
body.item-view .post-bottom{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
float:none
}
body.item-view .widget.Blog .post-share-buttons-bottom{
-webkit-box-flex:0;
-webkit-flex:0 1 auto;
-ms-flex:0 1 auto;
flex:0 1 auto;
-webkit-box-ordinal-group:3;
-webkit-order:2;
-ms-flex-order:2;
order:2
}
body.item-view .widget.Blog .post-footer{
line-height:1;
margin-$endSide:24px
}
.widget.Blog body.item-view .post-bottom{
margin-$endSide:0;
margin-bottom:80px
}
body.item-view .post-footer .post-labels .byline-label{
color:$(body.text.color);
font:$(item.action.font)
}
body.item-view .post-footer .post-labels a{
color:$(item.action.color);
display:inline-block;
font:$(item.label.font);
line-height:2
}
body.item-view .post-footer .post-labels a:not(:last-child)::after{
content:", "
}
body.item-view #comments{
border-top:0;
padding:0
}
body.item-view #comments h3.title{
color:$(item.subtitle.color);
font:$(item.subtitle.font);
margin-bottom:48px
}
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
}
.heroPost{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
position:relative
}
.widget.Blog .heroPost{
margin-$startSide:-136px
}
.heroPost .big-post-title .post-snippet{
color:$(heropost.main.text.color)
}
.heroPost.noimage .post-snippet{
color:$(heropost.secondary.text.color)
}
.heroPost .big-post-image-top{
display:none;
background-size:cover;
background-position:center
}
.heroPost .big-post-title{
background-color:$(heropost.main.background.color);
box-sizing:border-box;
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
flex:1 1 auto;
max-width:$(feed.width - 392px);
min-width:0;
padding-bottom:84px;
padding-$endSide:76px;
padding-$startSide:136px;
padding-top:76px
}
.heroPost.noimage .big-post-title{
-webkit-box-flex:1;
-webkit-flex:1 0 auto;
-ms-flex:1 0 auto;
flex:1 0 auto;
max-width:480px;
width:480px
}
.heroPost .big-post-title h3{
margin:0 0 24px
}
.heroPost .big-post-title h3 a{
color:$(heropost.main.title.color)
}
.heroPost .big-post-title .post-body{
color:$(heropost.main.text.color)
}
.heroPost .big-post-title .item-byline{
color:$(heropost.main.text.color);
margin-bottom:24px
}
.heroPost .big-post-title .item-byline .post-timestamp{
display:block
}
.heroPost .big-post-title .item-byline a{
color:$(heropost.main.text.color)
}
.heroPost .byline,.heroPost .byline a,.heroPost .flat-button{
color:$(heropost.main.button.color)
}
.heroPost .flat-button.ripple .splash{
background-color:rgba($(heropost.main.button.color.red),$(heropost.main.button.color.green),$(heropost.main.button.color.blue),.4)
}
.heroPost .flat-button.ripple:hover{
background-color:rgba($(heropost.main.button.color.red),$(heropost.main.button.color.green),$(heropost.main.button.color.blue),.12)
}
.heroPost .big-post-image{
background-position:center;
background-repeat:no-repeat;
background-size:cover;
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto;
width:392px
}
.heroPost .big-post-text{
background-color:$(heropost.secondary.background.color);
box-sizing:border-box;
color:$(heropost.secondary.text.color);
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
flex:1 1 auto;
min-width:0;
padding:48px
}
.heroPost .big-post-text .post-snippet-fade{
color:$(heropost.secondary.text.color);
background:-webkit-linear-gradient(right,$(heropost.secondary.background.color),$(heropost.secondary.background.color.transparent));
background:linear-gradient(to left,$(heropost.secondary.background.color),$(heropost.secondary.background.color.transparent))
}
.heroPost .big-post-text .byline,.heroPost .big-post-text .byline a,.heroPost .big-post-text .jump-link,.heroPost .big-post-text .sharing-button{
color:$(heropost.secondary.button.color)
}
.heroPost .big-post-text .snippet-item::first-letter{
color:$(heropost.secondary.dropcap.color);
float:left;
font-weight:700;
margin-right:12px
}
.sidebar-container{
background-color:$(sidebar.backgroundColor)
}
body.sidebar-visible .sidebar-container{
box-shadow:0 0 20px 0 rgba(0,0,0,.7)
}
.sidebar-container .svg-icon-24{
fill:$(sidebar.icon.color)
}
.sidebar-container .navigation .sidebar-back{
float:right
}
.sidebar-container .widget{
padding-right:16px;
margin-right:0;
margin-left:38px
}
.sidebar-container .widget+.widget{
border-top:solid 1px #bdbdbd
}
.sidebar-container .widget .title{
font:$(sidebar.widget.title.font)
}
.collapsible{
width:100%
}
.widget.Profile{
border-top:0;
margin:0;
margin-left:38px;
margin-top:24px;
padding-right:0
}
body.sidebar-visible .widget.Profile{
margin-left:0
}
.widget.Profile h2{
display:none
}
.widget.Profile h3.title{
color:$(sidebar.profile.title.color);
margin:16px 32px
}
.widget.Profile .individual{
text-align:center
}
.widget.Profile .individual .default-avatar-wrapper .avatar-icon{
margin:auto
}
.widget.Profile .team{
margin-bottom:32px;
margin-left:32px;
margin-right:32px
}
.widget.Profile ul{
list-style:none;
padding:0
}
.widget.Profile li{
margin:10px 0;
text-align:left
}
.widget.Profile .profile-img{
border-radius:50%;
float:none
}
.widget.Profile .profile-info{
margin-bottom:12px
}
.profile-snippet-fade{
background:-webkit-linear-gradient(right,$(sidebar.backgroundColor) 0,$(sidebar.backgroundColor) 20%,$(sidebar.backgroundColor.transparent) 100%);
background:linear-gradient(to left,$(sidebar.backgroundColor) 0,$(sidebar.backgroundColor) 20%,$(sidebar.backgroundColor.transparent) 100%);
height:1.7em;
position:absolute;
right:16px;
top:11.7em;
width:96px
}
.profile-snippet-fade::after{
content:"\2026";
float:right
}
.widget.Profile .profile-location{
color:$(sidebar.profile.text.color);
font-size:16px;
margin:0;
opacity:.74
}
.widget.Profile .team-member .profile-link::after{
clear:both;
content:"";
display:table
}
.widget.Profile .team-member .profile-name{
word-break:break-word
}
.widget.Profile .profile-datablock .profile-link{
color:$(sidebar.profile.title.color);
font:$(sidebar.profile.link.font);
font-size:24px;
text-transform:none;
word-break:break-word
}
.widget.Profile .profile-datablock .profile-link+div{
margin-top:16px!important
}
.widget.Profile .profile-link{
font:$(sidebar.profile.link.font);
font-size:14px
}
.widget.Profile .profile-textblock{
color:$(sidebar.profile.text.color);
font-size:14px;
line-height:24px;
margin:0 18px;
opacity:.74;
overflow:hidden;
position:relative;
word-break:break-word
}
.widget.Label .list-label-widget-content li a{
width:100%;
word-wrap:break-word
}
.extendable .show-less,.extendable .show-more{
font:$(sidebar.profile.link.font);
font-size:14px;
margin:0 -8px
}
.widget.BlogArchive .post-count{
color:$(body.text.color)
}
.Label li{
margin:16px 0
}
.Label li:last-child{
margin-bottom:0
}
.post-snippet.snippet-container{
max-height:$(body.text.font.size * 4 * 2)
}
.post-snippet .snippet-item{
line-height:$(body.text.font.size * 2)
}
.post-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%);
color:$(body.text.color);
height:$(body.text.font.size * 2)
}
.hero-post-snippet.snippet-container{
max-height:$(body.text.font.size * 4 * 2)
}
.hero-post-snippet .snippet-item{
line-height:$(body.text.font.size * 2)
}
.hero-post-snippet .snippet-fade{
background:-webkit-linear-gradient($startSide,$(heropost.main.background.color) 0,$(heropost.main.background.color) 20%,$(heropost.main.background.color.transparent) 100%);
background:linear-gradient(to $startSide,$(heropost.main.background.color) 0,$(heropost.main.background.color) 20%,$(heropost.main.background.color.transparent) 100%);
color:$(heropost.main.text.color);
height:$(body.text.font.size * 2)
}
.hero-post-snippet a{
color:$(heropost.main.link.color)
}
.hero-post-noimage-snippet.snippet-container{
max-height:$(body.text.font.size * 8 * 2)
}
.hero-post-noimage-snippet .snippet-item{
line-height:$(body.text.font.size * 2)
}
.hero-post-noimage-snippet .snippet-fade{
background:-webkit-linear-gradient($startSide,$(heropost.secondary.background.color) 0,$(heropost.secondary.background.color) 20%,$(heropost.secondary.background.color.transparent) 100%);
background:linear-gradient(to $startSide,$(heropost.secondary.background.color) 0,$(heropost.secondary.background.color) 20%,$(heropost.secondary.background.color.transparent) 100%);
color:$(heropost.secondary.text.color);
height:$(body.text.font.size * 2)
}
.popular-posts-snippet.snippet-container{
max-height:$(body.text.font.size * 4 * 2)
}
.popular-posts-snippet .snippet-item{
line-height:$(body.text.font.size * 2)
}
.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%);
color:$(body.text.color);
height:$(body.text.font.size * 2)
}
.profile-snippet.snippet-container{
max-height:192px
}
.profile-snippet .snippet-item{
line-height:24px
}
.profile-snippet .snippet-fade{
background:-webkit-linear-gradient($startSide,$(sidebar.backgroundColor) 0,$(sidebar.backgroundColor) 20%,$(sidebar.backgroundColor.transparent) 100%);
background:linear-gradient(to $startSide,$(sidebar.backgroundColor) 0,$(sidebar.backgroundColor) 20%,$(sidebar.backgroundColor.transparent) 100%);
color:$(sidebar.profile.text.color);
height:24px
}
.hero-post-noimage-snippet .snippet-item::first-letter{
font-size:$(body.text.font.size * 4);
line-height:$(body.text.font.size * 4)
}
#comments a,#comments cite,#comments div{
font-size:16px;
line-height:1.4
}
#comments .comment .comment-header .user,#comments .comment .comment-header .user a{
color:$(body.text.color);
font:$(item.action.font)
}
#comments .comment .comment-header .datetime a{
color:$(item.subtitle.color);
font:$(item.action.font)
}
#comments .comment .comment-header .datetime a::before{
content:"\b7  "
}
#comments .comment .comment-content{
margin-top:6px
}
#comments .comment .comment-actions{
color:$(item.action.color);
font:$(item.action.font)
}
#comments .continue{
display:none
}
#comments .comment-footer{
margin-top:8px
}
.cmt_iframe_holder{
margin-$startSide:140px!important
}
body.variant-rockpool_deep_orange .centered-top-secondline .PageList .overflow-popup li a{
color:#000
}
body.variant-rockpool_pink .blog-name h1,body.variant-rockpool_pink .blog-name h1 a{
text-transform:none
}
body.variant-rockpool_deep_orange .post-filter-message{
background-color:$(header.background.color)
}
@media screen and (max-width:$(feed.width + sidebar.width + 20px - 1px)){
.page{
float:none;
margin:0 auto;
max-width:none!important
}
.page_body{
max-width:$(feed.width);
margin:0 auto
}
}
@media screen and (max-width:1280px){
.heroPost .big-post-image{
display:table-cell;
left:auto;
position:static;
top:auto
}
.heroPost .big-post-title{
display:table-cell
}
}
@media screen and (max-width:1168px){
.centered-top-container,.centered-top-placeholder{
padding:24px 24px 32px 24px
}
.sticky{
padding:0 24px
}
.subscribe-section-container{
margin-$startSide:48px
}
.hamburger-section{
margin-left:48px
}
.big-post-text-inner,.big-post-title-inner{
margin:0 auto;
max-width:920px
}
.centered-top{
padding:0;
max-width:920px
}
.Blog{
padding:0
}
body.item-view .Blog{
padding:0 24px;
margin:0 auto;
max-width:920px
}
.post-filter-description{
margin-$endSide:36px
}
.post-outer{
display:block
}
.post-content{
max-width:none;
margin:0
}
.post-outer .snippet-thumbnail{
width:920px;
height:613.3333333333px;
margin-bottom:16px
}
.post-outer .snippet-thumbnail.thumbnail-empty{
display:none
}
.shown-ad .inline-ad{
max-width:100%
}
body.item-view .Blog{
padding:0;
max-width:none
}
.post-filter-message{
margin:24px calc((100% - 920px)/ 2);
max-width:none
}
.FeaturedPost h3,body.feed-view .blog-posts,body.feed-view .feed-message{
margin-left:calc((100% - 920px)/ 2);
margin-right:calc((100% - 920px)/ 2)
}
body.item-view .Blog .post-title-container{
padding:62px calc((100% - 920px)/ 2) 24px
}
body.item-view .Blog .post-header-container{
padding-$startSide:calc((100% - 920px)/ 2)
}
body.item-view .Blog .post-body-container,body.item-view .comments,body.item-view .post-outer-container>.shown-ad,body.item-view .widget.Blog .post-bottom{
margin:32px calc((100% - 920px)/ 2);
padding:0
}
body.item-view .cmt_iframe_holder{
margin:32px 24px!important
}
.blog-pager{
margin-left:calc((100% - 920px)/ 2);
margin-right:calc((100% - 920px)/ 2)
}
body.item-view .post-bottom{
margin:0 auto;
max-width:968px
}
body.item-view .PopularPosts .post-content{
max-width:100%;
margin-right:0
}
body.item-view .Blog .post-body{
margin-$endSide:0
}
body.item-view .Blog .post-sidebar{
display:none
}
body.item-view .widget.Blog .post-share-buttons-bottom{
margin-$endSide:24px
}
body.item-view .PopularPosts{
margin:0 auto;
max-width:920px
}
body.item-view .comment-thread-title{
margin-$startSide:calc((100% - 920px)/ 2)
}
.heroPost{
display:block
}
.heroPost .big-post-title{
display:block;
max-width:none;
padding:24px
}
.heroPost .big-post-image{
display:none
}
.heroPost .big-post-image-top{
display:block;
height:613.3333333333px;
margin:0 auto;
max-width:920px
}
.heroPost .big-post-image-top-container{
background-color:$(heropost.main.background.color)
}
.heroPost.noimage .big-post-title{
max-width:none;
width:100%
}
.heroPost.noimage .big-post-text{
position:static;
width:100%
}
.heroPost .big-post-text{
padding:24px
}
}
@media screen and (max-width:968px){
body{
font-size:$(body.text.font.size * 14 / 20)
}
.post-header-container .byline,.post-header-container .byline a{
font-size:14px
}
.post-title,.post-title a{
font-size:24px
}
.post-outer .snippet-thumbnail{
width:100%;
height:calc((100vw - 48px) * 2 / 3)
}
body.item-view .Blog .post-title-container{
padding:62px 24px 24px 24px
}
body.item-view .Blog .post-header-container{
padding-$startSide:24px
}
body.item-view .Blog .post-body-container,body.item-view .PopularPosts,body.item-view .comments,body.item-view .post-outer-container>.shown-ad,body.item-view .widget.Blog .post-bottom{
margin:32px 24px;
padding:0
}
.FeaturedPost h3,body.feed-view .blog-posts,body.feed-view .feed-message{
margin-left:24px;
margin-right:24px
}
.post-filter-message{
margin:24px 24px 48px 24px
}
body.item-view blockquote{
font-size:18px
}
body.item-view .Blog .post-title{
font-size:$(item.title.font.size * 24 / 48)
}
body.item-view .Blog .post-body{
font-size:$(body.text.font.size * 14 / 20)
}
body.item-view .Blog .post-body::first-letter{
font-size:$(body.text.font.size * 14 / 20 * 4);
line-height:$(body.text.font.size * 14 / 20 * 4)
}
.main_header_elements{
position:relative;
display:block
}
.search.focused .section{
margin-right:0;
width:100%
}
html[dir=ltr] .search form{
margin-right:0
}
.hamburger-section{
margin-left:24px
}
.search-expand-icon{
display:block;
float:left;
height:24px;
margin-top:-12px
}
.search-expand-text{
display:none
}
.subscribe-section-container{
margin-top:12px
}
.subscribe-section-container{
float:$startSide;
margin-$startSide:0
}
.search-expand{
position:absolute;
$endSide:0;
top:0
}
html[dir=ltr] .search-expand{
margin-left:24px
}
.centered-top.search-focused .subscribe-section-container{
opacity:0
}
.blog-name{
float:none
}
.blog-name{
margin-$endSide:36px
}
.centered-top-secondline .PageList li{
margin-$endSide:24px
}
.centered-top.search-focused .subscribe-button,.centered-top.search-focused .subscribe-section-container{
opacity:1
}
body.item-view .comment-thread-title{
margin-$startSide:24px
}
.blog-pager{
margin-left:24px;
margin-right:24px
}
.heroPost .big-post-image-top{
width:100%;
height:calc(100vw * 2 / 3)
}
.popular-posts-snippet.snippet-container,.post-snippet.snippet-container{
font-size:14px;
max-height:112px
}
.popular-posts-snippet .snippet-item,.post-snippet .snippet-item{
line-height:2
}
.popular-posts-snippet .snippet-fade,.post-snippet .snippet-fade{
height:28px
}
.hero-post-snippet.snippet-container{
font-size:14px;
max-height:112px
}
.hero-post-snippet .snippet-item{
line-height:2
}
.hero-post-snippet .snippet-fade{
height:28px
}
.hero-post-noimage-snippet.snippet-container{
font-size:14px;
line-height:2;
max-height:224px
}
.hero-post-noimage-snippet .snippet-item{
line-height:2
}
.hero-post-noimage-snippet .snippet-fade{
height:28px
}
.hero-post-noimage-snippet .snippet-item::first-letter{
font-size:56px;
line-height:normal
}
body.item-view .post-body-container .separator[style*="text-align: center"] a[imageanchor="1"]{
margin-left:-24px!important;
margin-right:-24px!important
}
body.item-view .post-body-container .separator[style*="text-align: center"] a[imageanchor="1"][style*="float: left;"],body.item-view .post-body-container .separator[style*="text-align: center"] a[imageanchor="1"][style*="float: right;"]{
margin-left:0!important;
margin-right:0!important
}
body.item-view .post-body-container .separator[style*="text-align: center"] a[imageanchor="1"][style*="float: left;"] img,body.item-view .post-body-container .separator[style*="text-align: center"] a[imageanchor="1"][style*="float: right;"] img{
max-width:100%
}
}
@media screen and (min-width:$(feed.width + sidebar.width + 20px)){
.page{
float:left
}
.centered-top{
max-width:$(feed.width + sidebar.width);
padding:44px $(sidebar.width + 136px) 32px 136px
}
.sidebar-container{
box-shadow:none;
float:right;
max-width:$(sidebar.width);
z-index:32
}
.sidebar-container .navigation{
display:none
}
.hamburger-section,.sticky .hamburger-section{
display:none
}
.search.focused .section{
margin-right:0;
width:100%
}
#footer{
padding-right:$(sidebar.width)
}
}
]]></b:skin>

Soho

<b:skin version='1.3.3'><![CDATA[/*! normalize.css v3.0.1 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
/*
<!-- Constants -->

<!-- Fonts -->

<Variable name="garamond12" description="12px Garamond" type="font" default="normal 400 12px EB Garamond, serif" hideEditor="true"  value="normal 400 12px EB Garamond, serif"/>
<Variable name="garamond14" description="14px Garamond" type="font" default="normal 400 14px EB Garamond, serif" hideEditor="true"  value="normal 400 14px EB Garamond, serif"/>
<Variable name="garamond16" description="16px Garamond" type="font" default="normal 400 16px EB Garamond, serif" hideEditor="true"  value="normal 400 16px EB Garamond, serif"/>
<Variable name="garamond18" description="18px Garamond" type="font" default="normal 400 18px EB Garamond, serif" hideEditor="true"  value="normal 400 18px EB Garamond, serif"/>
<Variable name="garamond20" description="20px Garamond" type="font" default="normal 400 20px EB Garamond, serif" hideEditor="true"  value="normal 400 20px EB Garamond, serif"/>
<Variable name="garamond24" description="24px Garamond" type="font" default="normal 400 24px EB Garamond, serif" hideEditor="true"  value="normal 400 24px EB Garamond, serif"/>
<Variable name="garamond36" description="36px Garamond" type="font" default="normal 400 36px EB Garamond, serif" hideEditor="true"  value="normal 400 36px EB Garamond, serif"/>
<Variable name="lato12" description="12px Lato" type="font" default="normal 400 12px Lato, sans-serif" hideEditor="true"  value="normal 400 12px Lato, sans-serif"/>
<Variable name="lato14" description="14px Lato" type="font" default="normal 400 14px Lato, sans-serif" hideEditor="true"  value="normal 400 14px Lato, sans-serif"/>
<Variable name="lato16" description="16px Lato" type="font" default="normal 400 16px Lato, sans-serif" hideEditor="true"  value="normal 400 16px Lato, sans-serif"/>
<Variable name="lato20" description="20px Lato" type="font" default="normal 400 20px Lato, sans-serif" hideEditor="true"  value="normal 400 20px Lato, sans-serif"/>
<Variable name="lato24" description="24px Lato" type="font" default="normal 400 24px Lato, sans-serif" hideEditor="true"  value="normal 400 24px Lato, sans-serif"/>
<Variable name="latoBold12" description="12px Lato Bold" type="font" default="normal 700 12px Lato, sans-serif" hideEditor="true"  value="normal 700 12px Lato, sans-serif"/>
<Variable name="latoBold14" description="14px Lato Bold" type="font" default="normal 700 14px Lato, sans-serif" hideEditor="true"  value="normal 700 14px Lato, sans-serif"/>
<Variable name="latoBold16" description="16px Lato Bold" type="font" default="normal 700 16px Lato, sans-serif" hideEditor="true"  value="normal 700 16px Lato, sans-serif"/>
<Variable name="latoBold24" description="24px Lato Bold" type="font" default="normal 700 24px Lato, sans-serif" hideEditor="true"  value="normal 700 24px Lato, sans-serif"/>
<Variable name="latoBold28" description="28px Lato Bold" type="font" default="normal 700 28px Lato, sans-serif" hideEditor="true"  value="normal 700 28px Lato, sans-serif"/>
<Variable name="latoLight18" description="18px Lato Light" type="font" default="normal 300 18px Lato, sans-serif" hideEditor="true"  value="normal 300 18px Lato, sans-serif"/>
<Variable name="latoLight20" description="20px Lato Light" type="font" default="normal 300 20px Lato, sans-serif" hideEditor="true"  value="normal 300 20px Lato, sans-serif"/>
<Variable name="latoLight24" description="24px Lato Light" type="font" default="normal 300 24px Lato, sans-serif" hideEditor="true"  value="normal 300 24px Lato, sans-serif"/>
<Variable name="latoLight36" description="36px Lato Light" type="font" default="normal 300 36px Lato, sans-serif" hideEditor="true"  value="normal 300 36px Lato, sans-serif"/>
<Variable name="lora14" description="14px Lora" type="font" default="normal 400 14px Lora, serif" hideEditor="true"  value="normal 400 14px Lora, serif"/>
<Variable name="lora16" description="16px Lora" type="font" default="normal 400 16px Lora, serif" hideEditor="true"  value="normal 400 16px Lora, serif"/>
<Variable name="montserrat12" description="12px Montserrat" type="font" default="normal 400 12px Montserrat, sans-serif" hideEditor="true"  value="normal 400 12px Montserrat, sans-serif"/>
<Variable name="montserrat14" description="14px Montserrat" type="font" default="normal 400 14px Montserrat, sans-serif" hideEditor="true"  value="normal 400 14px Montserrat, sans-serif"/>
<Variable name="montserrat16" description="16px Montserrat" type="font" default="normal 400 16px Montserrat, sans-serif" hideEditor="true"  value="normal 400 16px Montserrat, sans-serif"/>
<Variable name="montserrat24" description="24px Montserrat" type="font" default="normal 400 24px Montserrat, sans-serif" hideEditor="true"  value="normal 400 24px Montserrat, sans-serif"/>
<Variable name="montserratBold12" description="12px Montserrat Bold" type="font" default="normal 700 12px Montserrat, sans-serif" hideEditor="true"  value="normal 700 12px Montserrat, sans-serif"/>
<Variable name="montserratBold14" description="14px Montserrat Bold" type="font" default="normal 700 14px Montserrat, sans-serif" hideEditor="true"  value="normal 700 14px Montserrat, sans-serif"/>

<!-- Colors -->

<Variable name="shadowColor" description="Shadow color" type="color" default="rgba(0, 0, 0, 0.1)" hideEditor="true"  value="rgba(0, 0, 0, 0.1)"/>

<!-- Variable definitions -->

<Variable name="keycolor" description="Main Color" type="color" default="#bf8b38"  value="#bf8b38"/>
<Variable name="startSide" description="Start side in blog language" type="automatic" default="left" hideEditor="true" />
<Variable name="endSide" description="End side in blog language" type="automatic" default="right" hideEditor="true" />

<Group description="Body">
  <Variable name="body.background" description="Background" type="background" color="$(body.background.color)" default="$(color) none repeat scroll top left"  value="#ffffff url(https://themes.googleusercontent.com/image?id=NwAWve25XbjW2fxmDrisiIHRE8dTOrAuuoRCO6AB6bmodnPAywrXt7E6qZEgv3sik1dTnN0On7Hc) no-repeat scroll top center /* Credit: Mae Burke (http://www.offset.com/photos/389967) */;"/>
  <Variable name="body.background.color" description="Background color" type="color" default="#fff"  value="#ffffff"/>
  <Variable name="body.title.font.small" description="Title font (small)" type="font" default="$(garamond20)"  value="normal 400 20px EB Garamond, serif"/>
  <Variable name="body.title.font.large" description="Title font (large)" type="font" default="$(garamond24)"  value="normal 400 24px EB Garamond, serif"/>
  <Variable name="body.title.color" description="Title color" type="color" default="#000"  value="#000000"/>
  <Variable name="body.action.font.small" description="Action font (small)" type="font" default="$(montserrat12)"  value="normal 400 12px Montserrat, sans-serif"/>
  <Variable name="body.action.font.large" description="Action font (large)" type="font" default="$(montserrat14)"  value="normal 400 14px Montserrat, sans-serif"/>
  <Variable name="body.action.color" description="Action color" type="color" default="#bf8b38"  value="#bf8b38"/>
  <Variable name="body.text.font" description="Text font" type="font" default="$(garamond20)"  value="normal 400 20px EB Garamond, serif"/>
  <Variable name="body.text.color" description="Text color" type="color" default="#000"  value="#000000"/>
  <Variable name="body.link.color" description="Link color" type="color" default="#bf8b38"  value="#bf8b38"/>
  <Variable name="body.widget.title.font.small" description="Gadget title font (small)" type="font" default="$(montserrat12)"  value="normal 400 12px Montserrat, sans-serif"/>
  <Variable name="body.widget.title.font.large" description="Gadget title font (large)" type="font" default="$(montserrat14)"  value="normal 400 14px Montserrat, sans-serif"/>
  <Variable name="body.widget.title.color" description="Gadget title color" type="color" default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
  <Variable name="body.filter.background.color" description="Filter background color" type="color" default="#302c24"  value="#302c24"/>
  <Variable name="body.filter.text.font.small" description="Filter text font (small)" type="font" default="$(montserrat12)"  value="normal 400 12px Montserrat, sans-serif"/>
  <Variable name="body.filter.text.font.large" description="Filter text font (large)" type="font" default="$(montserrat14)"  value="normal 400 14px Montserrat, sans-serif"/>
  <Variable name="body.filter.text.color" description="Filter text color" type="color" default="rgba(255, 255, 255, 0.54)"  value="rgba(255, 255, 255, 0.54)"/>
  <Variable name="body.filter.keyword.font.small" description="Filter keyword font (small)" type="font" default="$(montserratBold12)"  value="normal 700 12px Montserrat, sans-serif"/>
  <Variable name="body.filter.keyword.font.large" description="Filter keyword font (large)" type="font" default="$(montserratBold14)"  value="normal 700 14px Montserrat, sans-serif"/>
  <Variable name="body.filter.keyword.color" description="Filter keyword color" type="color" default="rgba(255, 255, 255, 0.87)"  value="rgba(255, 255, 255, 0.87)"/>
  <Variable name="body.filter.link.font.small" description="Filter link font (small)" type="font" default="$(montserratBold12)"  value="normal 700 12px Montserrat, sans-serif"/>
  <Variable name="body.filter.link.font.large" description="Filter link font (large)" type="font" default="$(montserratBold14)"  value="normal 700 14px Montserrat, sans-serif"/>
  <Variable name="body.filter.link.color" description="Filter link color" type="color" default="#bf8b38"  value="#bf8b38"/>
</Group>

<Group description="Header">
  <Variable name="header.background.color" description="Background color" type="color" default="#fff"  value="#ffffff"/>
  <Variable name="header.title.font.small" description="Title font (small)" type="font" default="$(garamond18)"  value="normal 400 18px EB Garamond, serif"/>
  <Variable name="header.title.font.large" description="Title font (large)" type="font" default="$(garamond36)"  value="normal 400 36px EB Garamond, serif"/>
  <Variable name="header.title.color" description="Title color" type="color" default="#000"  value="#000000"/>
  <Variable name="header.text.font" description="Text font" type="font" default="$(montserrat12)"  value="normal 400 12px Montserrat, sans-serif"/>
  <Variable name="header.text.color" description="Text color" type="color" default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
  <Variable name="header.pageList.font" description="Page list font" type="font" default="$(montserrat14)"  value="normal 400 14px Montserrat, sans-serif"/>
  <Variable name="header.pageList.color" description="Page list color" type="color" default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
  <Variable name="header.pageList.selected.font" description="Page list font (selected page)" type="font" default="$(montserratBold14)"  value="normal 700 14px Montserrat, sans-serif"/>
  <Variable name="header.pageList.selected.color" description="Page list color (selected page)" type="color" default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
  <Variable name="header.icon.color" description="Icon color" type="color" default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
</Group>

<Group description="Posts">
  <Variable name="post.text.background.color" description="Background color (text-only post)" type="color" default="#302c24"  value="#302c24"/>
  <Variable name="post.title.font.small" description="Title font (small)" type="font" default="$(garamond20)"  value="normal 400 20px EB Garamond, serif"/>
  <Variable name="post.title.font.large" description="Title font (large)" type="font" default="$(garamond24)"  value="normal 400 24px EB Garamond, serif"/>
  <Variable name="post.title.color" description="Title color" type="color" default="#000"  value="#000000"/>
  <Variable name="post.text.title.color" description="Title color (text-only post)" type="color" default="#fff"  value="#ffffff"/>
  <Variable name="post.header.font" description="Header font" type="font" default="$(montserrat12)"  value="normal 400 12px Montserrat, sans-serif"/>
  <Variable name="post.header.color" description="Header color" type="color" default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
  <Variable name="post.text.header.color" description="Header color (text-only post)" type="color" default="rgba(255, 255, 255, 0.54)"  value="rgba(255, 255, 255, 0.54)"/>
  <Variable name="post.footer.font" description="Post Footer Font" type="font" default="$(montserrat12)"  value="normal 400 12px Montserrat, sans-serif"/>
  <Variable name="post.footer.color" description="Footer color" type="color" default="#bf8b38"  value="#bf8b38"/>
  <Variable name="post.text.font.small" description="Text font (small)" type="font" default="$(lora14)"  value="normal 400 14px Lora, serif"/>
  <Variable name="post.text.font.large" description="Text font (large)" type="font" default="$(lora16)"  value="normal 400 16px Lora, serif"/>
  <Variable name="post.text.color" description="Text color" type="color" default="#000"  value="#000000"/>
  <Variable name="post.text.footer.color" description="Footer color (text-only post)" type="color" default="#bf8b38"  value="#bf8b38"/>
  <Variable name="post.blockquote.font.small" description="Blockquote font (small)" type="font" default="$(montserrat16)"  value="normal 400 16px Montserrat, sans-serif"/>
  <Variable name="post.blockquote.font.large" description="Blockquote font (large)" type="font" default="$(montserrat24)"  value="normal 400 24px Montserrat, sans-serif"/>
  <Variable name="post.blockquote.color" description="Blockquote color" type="color" default="#000"  value="#000000"/>
  <Variable name="post.caption.font" description="Caption font" type="font" default="$(montserrat12)"  value="normal 400 12px Montserrat, sans-serif"/>
  <Variable name="post.caption.color" description="Caption color" type="color" default="#000"  value="#000000"/>
</Group>

<Group description="Comments">
  <Variable name="comment.header.font" description="Header font" type="font" default="$(montserrat12)"  value="normal 400 12px Montserrat, sans-serif"/>
  <Variable name="comment.header.color" description="Header color" type="color" default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
  <Variable name="comment.author.font" description="Author font" type="font" default="$(montserrat14)"  value="normal 400 14px Montserrat, sans-serif"/>
  <Variable name="comment.author.color" description="Author color" type="color" default="#000"  value="#000000"/>
  <Variable name="comment.content.font" description="Content font" type="font" default="$(lora14)"  value="normal 400 14px Lora, serif"/>
  <Variable name="comment.content.color" description="Content color" type="color" default="#000"  value="#000000"/>
  <Variable name="comment.action.font" description="Action font" type="font" default="$(montserrat12)"  value="normal 400 12px Montserrat, sans-serif"/>
  <Variable name="comment.action.color" description="Action color" type="color" default="#bf8b38"  value="#bf8b38"/>
</Group>

<Group description="Sidebar">
  <Variable name="sidebar.background.color" description="Background color" type="color" default="#fff"  value="#ffffff"/>
  <Variable name="sidebar.separator.color" description="Separator color" type="color" default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
  <Variable name="sidebar.profile.name.font" description="Profile name font" type="font" default="$(garamond24)"  value="normal 400 24px EB Garamond, serif"/>
  <Variable name="sidebar.profile.name.color" description="Profile name color" type="color" default="#000"  value="#000000"/>
  <Variable name="sidebar.profile.description.font" description="Profile description font" type="font" default="$(montserrat12)"  value="normal 400 12px Montserrat, sans-serif"/>
  <Variable name="sidebar.profile.description.color" description="Profile description color" type="color" default="rgba(0, 0, 0, 0.87)"  value="rgba(0, 0, 0, 0.87)"/>
  <Variable name="sidebar.action.font" description="Action font" type="font" default="$(montserrat14)"  value="normal 400 14px Montserrat, sans-serif"/>
  <Variable name="sidebar.action.color" description="Action color" type="color" default="#bf8b38"  value="#bf8b38"/>
  <Variable name="sidebar.widget.title.font" description="Gadget title font" type="font" default="$(montserrat16)"  value="normal 400 16px Montserrat, sans-serif"/>
  <Variable name="sidebar.widget.title.color" description="Gadget title color" type="color" default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
  <Variable name="sidebar.widget.text.font" description="Gadget text font" type="font" default="$(montserrat14)"  value="normal 400 14px Montserrat, sans-serif"/>
  <Variable name="sidebar.widget.text.color" description="Gadget text color" type="color" default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
  <Variable name="sidebar.icon.color" description="Icon color" type="color" default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
</Group>

<Group description="Search">
  <Variable name="search.input.font" description="Input font" type="font" default="$(montserrat16)"  value="normal 400 16px Montserrat, sans-serif"/>
</Group>

<Group description="Sharing">
  <Variable name="sharing.background.color" description="Sharing background color" type="color" default="#fafafa"  value="#fafafa"/>
  <Variable name="sharing.text.font" description="Sharing text font" type="font" default="$(montserrat16)"  value="normal 400 16px Montserrat, sans-serif"/>
  <Variable name="sharing.text.color" description="Sharing text color" type="color" default="#000"  value="#000000"/>
  <Variable name="sharing.icon.color" description="Sharing icons color" type="color" default="#bf8b38"  value="#bf8b38"/>
</Group>

<Group description="Attribution">
  <Variable name="attribution.text.font" description="Attribution text font" type="font" default="$(montserrat12)"  value="normal 400 12px Montserrat, sans-serif"/>
  <Variable name="attribution.text.color" description="Attribution text color" type="color" default="rgba(0, 0, 0, 0.54)"  value="rgba(0, 0, 0, 0.54)"/>
  <Variable name="attribution.icon.color" description="Attribution icon color" type="color" default="rgba(0, 0, 0, 0.54)" hideEditor="true"  value="rgba(0, 0, 0, 0.54)"/>
</Group>

<Group description="Widths" selector="#main, html[dir=rtl] .sidebar-container, html[dir=ltr] .sidebar-container">
  <Variable name="sidebar.width" description="Sidebar width" type="length"
            min="100px" max="1000px" default="284px"  value="284px"/>
  <Variable name="content.width" description="Content width" type="length"
            min="660px" max="2400px" default="922px"  value="922px"/>
  <Variable name="content.margin" description="Content margin" type="length"
            min="0px" max="1000px" default="117px"  value="117px"/>
</Group>
 */

/*!************************************************
 * Blogger Template Style
 * Name: Soho
 **************************************************/
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
}
#comments .comment .comment-actions,.subscribe-popup .FollowByEmail .follow-by-email-submit{
background:0 0;
border:0;
box-shadow:none;
color:$(body.link.color);
cursor:pointer;
font-size:14px;
font-weight:700;
outline:0;
text-decoration:none;
text-transform:uppercase;
width:auto
}
.dim-overlay{
background-color:rgba(0,0,0,.54);
height:100vh;
left:0;
position:fixed;
top:0;
width:100%
}
#sharing-dim-overlay{
background-color:transparent
}
input::-ms-clear{
display:none
}
.blogger-logo,.svg-icon-24.blogger-logo{
fill:#ff9800;
opacity:1
}
.loading-spinner-large{
-webkit-animation:mspin-rotate 1.568s infinite linear;
animation:mspin-rotate 1.568s 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{
from{
-webkit-transform:translateX(0);
transform:translateX(0)
}
to{
-webkit-transform:translateX(-3888px);
transform:translateX(-3888px)
}
}
@keyframes mspin-singlecolor-large-film{
from{
-webkit-transform:translateX(0);
transform:translateX(0)
}
to{
-webkit-transform:translateX(-3888px);
transform:translateX(-3888px)
}
}
@-webkit-keyframes mspin-rotate{
from{
-webkit-transform:rotate(0);
transform:rotate(0)
}
to{
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@keyframes mspin-rotate{
from{
-webkit-transform:rotate(0);
transform:rotate(0)
}
to{
-webkit-transform:rotate(360deg);
transform:rotate(360deg)
}
}
@-webkit-keyframes mspin-revrot{
from{
-webkit-transform:rotate(0);
transform:rotate(0)
}
to{
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg)
}
}
@keyframes mspin-revrot{
from{
-webkit-transform:rotate(0);
transform:rotate(0)
}
to{
-webkit-transform:rotate(-360deg);
transform:rotate(-360deg)
}
}
.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,.14),0 1px 10px 0 rgba(0,0,0,.12),0 2px 4px -1px rgba(0,0,0,.2);
height:50px
}
#main{
outline:0
}
.main-heading{
position:absolute;
clip:rect(1px,1px,1px,1px);
padding:0;
border:0;
height:1px;
width:1px;
overflow:hidden
}
.Attribution{
margin-top:1em;
text-align:center
}
.Attribution .blogger img,.Attribution .blogger svg{
vertical-align:bottom
}
.Attribution .blogger img{
margin-$endSide:.5em
}
.Attribution div{
line-height:24px;
margin-top:.5em
}
.Attribution .copyright,.Attribution .image-attribution{
font-size:.7em;
margin-top:1.5em
}
.BLOG_mobile_video_class{
display:none
}
.bg-photo{
background-attachment:scroll!important
}
body .CSS_LIGHTBOX{
z-index:900
}
.extendable .show-less,.extendable .show-more{
border-color:$(body.link.color);
color:$(body.link.color);
margin-top:8px
}
.extendable .show-less.hidden,.extendable .show-more.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:0
}
.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
}
.link-copied-dialog{
max-width:520px;
outline:0
}
.link-copied-dialog .modal-dialog-buttons{
margin-top:8px
}
.link-copied-dialog .goog-buttonset-default{
background:0 0;
border:0
}
.link-copied-dialog .goog-buttonset-default:focus{
outline:0
}
.paging-control-container{
margin-bottom:16px
}
.paging-control-container .paging-control{
display:inline-block
}
.paging-control-container .comment-range-text::after,.paging-control-container .paging-control{
color:$(body.link.color)
}
.paging-control-container .comment-range-text,.paging-control-container .paging-control{
margin-$endSide:8px
}
.paging-control-container .comment-range-text::after,.paging-control-container .paging-control::after{
content:"\b7";
cursor:default;
padding-$startSide:8px;
pointer-events:none
}
.paging-control-container .comment-range-text:last-child::after,.paging-control-container .paging-control:last-child::after{
content:none
}
.byline.reactions iframe{
height:20px
}
.b-notification{
color:#000;
background-color:#fff;
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(.4,0,.2,1);
transition:margin-top .3s cubic-bezier(.4,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
}
@media screen and (max-width:$(content.width + 240px)){
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>.separator:first-child>a[imageanchor="1"]:first-child{
margin-top:20px
}
.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
}
}
.item-control{
display:none
}
#comments{
border-top:1px dashed rgba(0,0,0,.54);
margin-top:20px;
padding:20px
}
#comments .comment-thread ol{
margin:0;
padding-left:0;
padding-$startSide:0
}
#comments .comment .comment-replybox-single,#comments .comment-thread .comment-replies{
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 $(comment.author.color);
box-sizing:border-box;
fill:$(comment.author.color);
height:35px;
margin:0;
padding:7px;
width:35px
}
.comment .comment-block{
margin-top:10px;
margin-$startSide:60px;
padding-bottom:0
}
#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:$(comment.author.color);
font-style:normal;
font-weight:700
}
#comments .comment .comment-actions{
bottom:0;
margin-bottom:15px;
position:absolute
}
#comments .comment .comment-actions>*{
margin-right:8px
}
#comments .comment .comment-header .datetime{
bottom:0;
color:$(comment.header.color);
display:inline-block;
font-size:13px;
font-style:italic;
margin-$startSide:8px
}
#comments .comment .comment-footer .comment-timestamp a,#comments .comment .comment-header .datetime a{
color:$(comment.header.color)
}
#comments .comment .comment-content,.comment .comment-body{
margin-top:12px;
word-break:break-word
}
.comment-body{
margin-bottom:12px
}
#comments.embed[data-num-comments="0"]{
border:0;
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(.4,0,.2,1);
transition:height .3s cubic-bezier(.4,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
}
.touch-icon:active,.touch-icon:focus{
background-color:rgba(153,153,153,.4);
border-radius:50%
}
svg:not(:root).touch-icon{
overflow:visible
}
html[dir=rtl] .rtl-reversible-icon{
-webkit-transform:scaleX(-1);
-ms-transform:scaleX(-1);
transform:scaleX(-1)
}
.svg-icon-24-button,.touch-icon-button{
background:0 0;
border:0;
margin:0;
outline:0;
padding:0
}
.touch-icon-button .touch-icon:active,.touch-icon-button .touch-icon:focus{
background-color:transparent
}
.touch-icon-button:active .touch-icon,.touch-icon-button:focus .touch-icon{
background-color:rgba(153,153,153,.4);
border-radius:50%
}
.Profile .default-avatar-wrapper .avatar-icon{
border-radius:50%;
border:solid 1px $(body.text.color);
box-sizing:border-box;
fill:$(body.text.color);
margin:0
}
.Profile .individual .default-avatar-wrapper .avatar-icon{
padding:25px
}
.Profile .individual .avatar-icon,.Profile .individual .profile-img{
height:120px;
width:120px
}
.Profile .team .default-avatar-wrapper .avatar-icon{
padding:8px
}
.Profile .team .avatar-icon,.Profile .team .default-avatar-wrapper,.Profile .team .profile-img{
height:40px;
width:40px
}
.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:50;
-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(.4,0,.2,1);
transition-timing-function:cubic-bezier(.4,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:0 0
}
.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(.4,0,.2,1);
transition:height .3s cubic-bezier(.4,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:0
}
.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:700;
text-transform:uppercase;
border-radius:2px;
padding:8px;
margin:-8px
}
.flat-icon-button{
background:0 0;
border:0;
margin:0;
outline:0;
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
}
.overflowable-container{
max-height:$(header.pageList.font.size * 2);
overflow:hidden;
position:relative
}
.overflow-button{
cursor:pointer
}
#overflowable-dim-overlay{
background:0 0
}
.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:$(header.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 .tabs li,.overflow-popup li{
display:block;
height:auto
}
.overflow-popup .tabs li{
padding-left:0;
padding-right:0
}
.overflow-button.hidden,.overflow-popup .tabs li.hidden,.overflow-popup li.hidden{
display:none
}
.search{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
line-height:24px;
width:24px
}
.search.focused{
width:100%
}
.search.focused .section{
width:100%
}
.search form{
z-index:101
}
.search h3{
display:none
}
.search form{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-flex:1;
-webkit-flex:1 0 0;
-ms-flex:1 0 0px;
flex:1 0 0;
border-bottom:solid 1px transparent;
padding-bottom:8px
}
.search form>*{
display:none
}
.search.focused form>*{
display:block
}
.search .search-input label{
display:none
}
.centered-top-placeholder.cloned .search form{
z-index:30
}
.search.focused form{
border-color:$(header.text.color);
position:relative;
width:auto
}
.collapsed-header .centered-top-container .search.focused form{
border-bottom-color:transparent
}
.search-expand{
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto
}
.search-expand-text{
display:none
}
.search-close{
display:inline;
vertical-align:middle
}
.search-input{
-webkit-box-flex:1;
-webkit-flex:1 0 1px;
-ms-flex:1 0 1px;
flex:1 0 1px
}
.search-input input{
background:0 0;
border:0;
box-sizing:border-box;
color:$(header.text.color);
display:inline-block;
outline:0;
width:calc(100% - 48px)
}
.search-input input.no-cursor{
color:transparent;
text-shadow:0 0 0 $(header.text.color)
}
.collapsed-header .centered-top-container .search-action,.collapsed-header .centered-top-container .search-input input{
color:$(header.text.color)
}
.collapsed-header .centered-top-container .search-input input.no-cursor{
color:transparent;
text-shadow:0 0 0 $(header.text.color)
}
.collapsed-header .centered-top-container .search-input input.no-cursor:focus,.search-input input.no-cursor:focus{
outline:0
}
.search-focused>*{
visibility:hidden
}
.search-focused .search,.search-focused .search-icon{
visibility:visible
}
.search.focused .search-action{
display:block
}
.search.focused .search-action:disabled{
opacity:.3
}
.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
}
.centered-bottom .share-buttons .svg-icon-24,.share-buttons .svg-icon-24{
fill:$(body.text.color)
}
.sharing-open.touch-icon-button:active .touch-icon,.sharing-open.touch-icon-button:focus .touch-icon{
background-color:transparent
}
.share-buttons{
background-color:$(body.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:$(body.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:0 0;
border:0;
margin:0;
outline:0;
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,.1);
outline:0
}
.share-buttons li svg[class*=" sharing-"],.share-buttons li svg[class^=sharing-]{
position:absolute;
top:10px
}
.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:$(sidebar.width);
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,.2,1);
transition-timing-function:cubic-bezier(0,0,.2,1);
width:$(sidebar.width);
z-index:101;
-webkit-overflow-scrolling:touch
}
.sidebar-container .navigation{
line-height:0;
padding:16px
}
.sidebar-container .sidebar-back{
cursor:pointer
}
.sidebar-container .widget{
background:0 0;
margin:0 16px;
padding:16px 0
}
.sidebar-container .widget .title{
color:$(sidebar.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 li{
font-size:16px;
line-height:normal
}
.sidebar-container .widget+.widget{
border-top:1px dashed $(sidebar.separator.color)
}
.BlogArchive li{
margin:16px 0
}
.BlogArchive li:last-child{
margin-bottom:0
}
.Label li a{
display:inline-block
}
.BlogArchive .post-count,.Label .label-count{
float:$endSide;
margin-$startSide:.25em
}
.BlogArchive .post-count::before,.Label .label-count::before{
content:"("
}
.BlogArchive .post-count::after,.Label .label-count::after{
content:")"
}
.widget.Translate .skiptranslate>div{
display:block!important
}
.widget.Profile .profile-link{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex
}
.widget.Profile .team-member .default-avatar-wrapper,.widget.Profile .team-member .profile-img{
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto;
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;
align-self:center;
display:block;
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
flex:1 1 auto
}
.dim-overlay{
background-color:rgba(0,0,0,.54);
z-index:100
}
body.sidebar-visible{
overflow-y:hidden
}
@media screen and (max-width:$(content.width + sidebar.width + content.margin * 2 - 1px)){
.sidebar-container{
bottom:0;
position:fixed;
top:0;
$startSide:0;
$endSide:auto
}
.sidebar-container.sidebar-invisible{
-webkit-transition-timing-function:cubic-bezier(.4,0,.6,1);
transition-timing-function:cubic-bezier(.4,0,.6,1)
}
html[dir=ltr] .sidebar-container.sidebar-invisible{
-webkit-transform:translateX($(sidebar.width * -1));
-ms-transform:translateX($(sidebar.width * -1));
transform:translateX($(sidebar.width * -1))
}
html[dir=rtl] .sidebar-container.sidebar-invisible{
-webkit-transform:translateX($(sidebar.width));
-ms-transform:translateX($(sidebar.width));
transform:translateX($(sidebar.width))
}
}
@media screen and (min-width:$(content.width + sidebar.width + content.margin * 2)){
.sidebar-container{
position:absolute;
top:0;
$startSide:0;
$endSide:auto
}
.sidebar-container .navigation{
display:none
}
}
.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:$(body.background.color);
box-sizing:border-box;
color:$(body.text.color);
padding:30px;
position:fixed;
text-align:center;
width:calc(100% - 24px);
z-index:101
}
.dialog input[type=email],.dialog input[type=text]{
background-color:transparent;
border:0;
border-bottom:solid 1px rgba($(body.text.color.red),$(body.text.color.green),$(body.text.color.blue),.12);
color:$(body.text.color);
display:block;
font-family:$(body.text.font.family);
font-size:16px;
line-height:24px;
margin:auto;
padding-bottom:7px;
outline:0;
text-align:center;
width:100%
}
.dialog input[type=email]::-webkit-input-placeholder,.dialog input[type=text]::-webkit-input-placeholder{
color:$(body.text.color)
}
.dialog input[type=email]::-moz-placeholder,.dialog input[type=text]::-moz-placeholder{
color:$(body.text.color)
}
.dialog input[type=email]:-ms-input-placeholder,.dialog input[type=text]:-ms-input-placeholder{
color:$(body.text.color)
}
.dialog input[type=email]::-ms-input-placeholder,.dialog input[type=text]::-ms-input-placeholder{
color:$(body.text.color)
}
.dialog input[type=email]::placeholder,.dialog input[type=text]::placeholder{
color:$(body.text.color)
}
.dialog input[type=email]:focus,.dialog input[type=text]:focus{
border-bottom:solid 2px $(body.link.color);
padding-bottom:6px
}
.dialog input.no-cursor{
color:transparent;
text-shadow:0 0 0 $(body.text.color)
}
.dialog input.no-cursor:focus{
outline:0
}
.dialog input.no-cursor:focus{
outline:0
}
.dialog input[type=submit]{
font-family:$(body.text.font.family)
}
.dialog .goog-buttonset-default{
color:$(body.link.color)
}
.subscribe-popup{
max-width:364px
}
.subscribe-popup h3{
color:$(body.title.color);
font-size:1.8em;
margin-top:0
}
.subscribe-popup .FollowByEmail h3{
display:none
}
.subscribe-popup .FollowByEmail .follow-by-email-submit{
color:$(body.link.color);
display:inline-block;
margin:0 auto;
margin-top:24px;
width:auto;
white-space:normal
}
.subscribe-popup .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 auto;
width:100%
}
}
body#layout .bg-photo,body#layout .bg-photo-overlay{
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
}
body{
background-color:$(body.background.color);
color:$(body.text.color);
font:$(body.text.font);
height:100%;
margin:0;
min-height:100vh
}
h1,h2,h3,h4,h5,h6{
font-weight:400
}
a{
color:$(body.link.color);
text-decoration:none
}
.dim-overlay{
z-index:100
}
body.sidebar-visible .page_body{
overflow-y:scroll
}
.widget .title{
color:$(body.widget.title.color);
font:$(body.widget.title.font.small)
}
.extendable .show-less,.extendable .show-more{
color:$(body.action.color);
font:$(body.action.font.small);
margin:12px -8px 0 -8px;
text-transform:uppercase
}
.footer .widget,.main .widget{
margin:50px 0
}
.main .widget .title{
text-transform:uppercase
}
.inline-ad{
display:block;
margin-top:50px
}
.adsbygoogle{
text-align:center
}
.page_body{
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;
position:relative;
z-index:20
}
.page_body>*{
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto
}
.page_body>#footer{
margin-top:auto
}
.centered-bottom,.centered-top{
margin:0 32px;
max-width:100%
}
.centered-top{
padding-bottom:12px;
padding-top:12px
}
.sticky .centered-top{
padding-bottom:0;
padding-top:0
}
.centered-top-container,.centered-top-placeholder{
background:$(header.background.color)
}
.centered-top{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
position:relative
}
.sticky .centered-top{
-webkit-flex-wrap:nowrap;
-ms-flex-wrap:nowrap;
flex-wrap:nowrap
}
.centered-top-container .svg-icon-24,.centered-top-placeholder .svg-icon-24{
fill:$(header.icon.color)
}
.back-button-container,.hamburger-menu-container{
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto;
height:48px;
-webkit-box-ordinal-group:2;
-webkit-order:1;
-ms-flex-order:1;
order:1
}
.sticky .back-button-container,.sticky .hamburger-menu-container{
-webkit-box-ordinal-group:2;
-webkit-order:1;
-ms-flex-order:1;
order:1
}
.back-button,.hamburger-menu,.search-expand-icon{
cursor:pointer;
margin-top:0
}
.search{
-webkit-box-align:start;
-webkit-align-items:flex-start;
-ms-flex-align:start;
align-items:flex-start;
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto;
height:48px;
margin-$startSide:24px;
-webkit-box-ordinal-group:4;
-webkit-order:3;
-ms-flex-order:3;
order:3
}
.search,.search.focused{
width:auto
}
.search.focused{
position:static
}
.sticky .search{
display:none;
-webkit-box-ordinal-group:5;
-webkit-order:4;
-ms-flex-order:4;
order:4
}
.search .section{
$endSide:0;
margin-top:12px;
position:absolute;
top:12px;
width:0
}
.sticky .search .section{
top:0
}
.search-expand{
background:0 0;
border:0;
margin:0;
outline:0;
padding:0;
color:$(body.action.color);
cursor:pointer;
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto;
font:$(body.action.font.small);
text-transform:uppercase;
word-break:normal
}
.search.focused .search-expand{
visibility:hidden
}
.search .dim-overlay{
background:0 0
}
.search.focused .section{
max-width:400px
}
.search.focused form{
border-color:$(header.icon.color);
height:24px
}
.search.focused .search-input{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
flex:1 1 auto
}
.search-input input{
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
flex:1 1 auto;
font:$(search.input.font)
}
.search input[type=submit]{
display:none
}
.subscribe-section-container{
-webkit-box-flex:1;
-webkit-flex:1 0 auto;
-ms-flex:1 0 auto;
flex:1 0 auto;
margin-$startSide:24px;
-webkit-box-ordinal-group:3;
-webkit-order:2;
-ms-flex-order:2;
order:2;
text-align:$endSide
}
.sticky .subscribe-section-container{
-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
}
.subscribe-button{
background:0 0;
border:0;
margin:0;
outline:0;
padding:0;
color:$(body.action.color);
cursor:pointer;
display:inline-block;
font:$(body.action.font.small);
line-height:48px;
margin:0;
text-transform:uppercase;
word-break:normal
}
.subscribe-popup h3{
color:$(body.widget.title.color);
font:$(body.widget.title.font.small);
margin-bottom:24px;
text-transform:uppercase
}
.subscribe-popup div.widget.FollowByEmail .follow-by-email-address{
color:$(body.text.color);
font:$(body.widget.title.font.small)
}
.subscribe-popup div.widget.FollowByEmail .follow-by-email-submit{
color:$(body.action.color);
font:$(body.action.font.small);
margin-top:24px;
text-transform:uppercase
}
.blog-name{
-webkit-box-flex:1;
-webkit-flex:1 1 100%;
-ms-flex:1 1 100%;
flex:1 1 100%;
-webkit-box-ordinal-group:5;
-webkit-order:4;
-ms-flex-order:4;
order:4;
overflow:hidden
}
.sticky .blog-name{
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
flex:1 1 auto;
margin:0 12px;
-webkit-box-ordinal-group:3;
-webkit-order:2;
-ms-flex-order:2;
order:2
}
body.search-view .centered-top.search-focused .blog-name{
display:none
}
.widget.Header h1{
font:$(header.title.font.small);
margin:0;
text-transform:uppercase
}
.widget.Header h1,.widget.Header h1 a{
color:$(header.title.color)
}
.widget.Header p{
color:$(header.text.color);
font:$(header.text.font);
line-height:1.7
}
.sticky .widget.Header h1{
font-size:16px;
line-height:48px;
overflow:hidden;
overflow-wrap:normal;
text-overflow:ellipsis;
white-space:nowrap;
word-wrap:normal
}
.sticky .widget.Header p{
display:none
}
.sticky{
box-shadow:0 1px 3px $(shadowColor)
}
#page_list_top .widget.PageList{
font:$(header.pageList.font);
line-height:$(header.pageList.font.size * 2)
}
#page_list_top .widget.PageList .title{
display:none
}
#page_list_top .widget.PageList .overflowable-contents{
overflow:hidden
}
#page_list_top .widget.PageList .overflowable-contents ul{
list-style:none;
margin:0;
padding:0
}
#page_list_top .widget.PageList .overflow-popup ul{
list-style:none;
margin:0;
padding:0 20px
}
#page_list_top .widget.PageList .overflowable-contents li{
display:inline-block
}
#page_list_top .widget.PageList .overflowable-contents li.hidden{
display:none
}
#page_list_top .widget.PageList .overflowable-contents li:not(:first-child):before{
color:$(header.pageList.color);
content:"\b7"
}
#page_list_top .widget.PageList .overflow-button a,#page_list_top .widget.PageList .overflow-popup li a,#page_list_top .widget.PageList .overflowable-contents li a{
color:$(header.pageList.color);
font:$(header.pageList.font);
line-height:$(header.pageList.font.size * 2);
text-transform:uppercase
}
#page_list_top .widget.PageList .overflow-popup li.selected a,#page_list_top .widget.PageList .overflowable-contents li.selected a{
color:$(header.pageList.selected.color);
font:$(header.pageList.selected.font);
line-height:$(header.pageList.font.size * 2)
}
#page_list_top .widget.PageList .overflow-button{
display:inline
}
.sticky #page_list_top{
display:none
}
body.homepage-view .hero-image.has-image{
background:$(body.background);
background-attachment:scroll;
background-color:$(body.background.color);
background-size:cover;
height:62.5vw;
max-height:75vh;
min-height:200px;
width:100%
}
.post-filter-message{
background-color:$(body.filter.background.color);
color:$(body.filter.text.color);
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
font:$(body.filter.text.font.small);
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between;
margin-top:50px;
padding:18px
}
.post-filter-message .message-container{
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
flex:1 1 auto;
min-width:0
}
.post-filter-message .home-link-container{
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto
}
.post-filter-message .search-label,.post-filter-message .search-query{
color:$(body.filter.keyword.color);
font:$(body.filter.keyword.font.small);
text-transform:uppercase
}
.post-filter-message .home-link,.post-filter-message .home-link a{
color:$(body.filter.link.color);
font:$(body.filter.link.font.small);
text-transform:uppercase
}
.widget.FeaturedPost .thumb.hero-thumb{
background-position:center;
background-size:cover;
height:360px
}
.widget.FeaturedPost .featured-post-snippet:before{
content:"\2014"
}
.snippet-container,.snippet-fade{
font:$(post.text.font.small);
line-height:$(post.text.font.small.size * 1.7)
}
.snippet-container{
max-height:$(post.text.font.small.size * 1.7 * 7);
overflow:hidden
}
.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%);
color:$(post.text.color)
}
.post-sidebar{
display:none
}
.widget.Blog .blog-posts .post-outer-container{
width:100%
}
.no-posts{
text-align:center
}
body.feed-view .widget.Blog .blog-posts .post-outer-container,body.item-view .widget.Blog .blog-posts .post-outer{
margin-bottom:50px
}
.widget.Blog .post.no-featured-image,.widget.PopularPosts .post.no-featured-image{
background-color:$(post.text.background.color);
padding:30px
}
.widget.Blog .post>.post-share-buttons-top{
$endSide:0;
position:absolute;
top:0
}
.widget.Blog .post>.post-share-buttons-bottom{
bottom:0;
$endSide:0;
position:absolute
}
.blog-pager{
text-align:$endSide
}
.blog-pager a{
color:$(body.action.color);
font:$(body.action.font.small);
text-transform:uppercase
}
.blog-pager .blog-pager-newer-link,.blog-pager .home-link{
display:none
}
.post-title{
font:$(post.title.font.small);
margin:0;
text-transform:uppercase
}
.post-title,.post-title a{
color:$(post.title.color)
}
.post.no-featured-image .post-title,.post.no-featured-image .post-title a{
color:$(post.text.title.color)
}
body.item-view .post-body-container:before{
content:"\2014"
}
.post-body{
color:$(post.text.color);
font:$(post.text.font.small);
line-height:1.7
}
.post-body blockquote{
color:$(post.blockquote.color);
font:$(post.blockquote.font.small);
line-height:1.7;
margin-left:0;
margin-right:0
}
.post-body img{
height:auto;
max-width:100%
}
.post-body .tr-caption{
color:$(post.caption.color);
font:$(post.caption.font);
line-height:1.7
}
.snippet-thumbnail{
position:relative
}
.snippet-thumbnail .post-header{
background:$(body.background.color);
bottom:0;
margin-bottom:0;
padding-$endSide:15px;
padding-bottom:5px;
padding-top:5px;
position:absolute
}
.snippet-thumbnail img{
width:100%
}
.post-footer,.post-header{
margin:8px 0
}
body.item-view .widget.Blog .post-header{
margin:0 0 16px 0
}
body.item-view .widget.Blog .post-footer{
margin:50px 0 0 0
}
.widget.FeaturedPost .post-footer{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-flex-wrap:wrap;
-ms-flex-wrap:wrap;
flex-wrap:wrap;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between
}
.widget.FeaturedPost .post-footer>*{
-webkit-box-flex:0;
-webkit-flex:0 1 auto;
-ms-flex:0 1 auto;
flex:0 1 auto
}
.widget.FeaturedPost .post-footer,.widget.FeaturedPost .post-footer a,.widget.FeaturedPost .post-footer button{
line-height:1.7
}
.jump-link{
margin:-8px
}
.post-header,.post-header a,.post-header button{
color:$(post.header.color);
font:$(post.header.font)
}
.post.no-featured-image .post-header,.post.no-featured-image .post-header a,.post.no-featured-image .post-header button{
color:$(post.text.header.color)
}
.post-footer,.post-footer a,.post-footer button{
color:$(post.footer.color);
font:$(post.footer.font)
}
.post.no-featured-image .post-footer,.post.no-featured-image .post-footer a,.post.no-featured-image .post-footer button{
color:$(post.text.footer.color)
}
body.item-view .post-footer-line{
line-height:2.3
}
.byline{
display:inline-block
}
.byline .flat-button{
text-transform:none
}
.post-header .byline:not(:last-child):after{
content:"\b7"
}
.post-header .byline:not(:last-child){
margin-$endSide:0
}
.byline.post-labels a{
display:inline-block;
word-break:break-all
}
.byline.post-labels a:not(:last-child):after{
content:","
}
.byline.reactions .reactions-label{
line-height:22px;
vertical-align:top
}
.post-share-buttons{
margin-$startSide:0
}
.share-buttons{
background-color:$(sharing.background.color);
border-radius:0;
box-shadow:0 1px 1px 1px $(shadowColor);
color:$(sharing.text.color);
font:$(sharing.text.font)
}
.share-buttons .svg-icon-24{
fill:$(sharing.icon.color)
}
#comment-holder .continue{
display:none
}
#comment-editor{
margin-bottom:20px;
margin-top:20px
}
.widget.Attribution,.widget.Attribution .copyright,.widget.Attribution .copyright a,.widget.Attribution .image-attribution,.widget.Attribution .image-attribution a,.widget.Attribution a{
color:$(attribution.text.color);
font:$(attribution.text.font)
}
.widget.Attribution svg{
fill:$(attribution.icon.color)
}
.widget.Attribution .blogger a{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-align-content:center;
-ms-flex-line-pack:center;
align-content:center;
-webkit-box-pack:center;
-webkit-justify-content:center;
-ms-flex-pack:center;
justify-content:center;
line-height:24px
}
.widget.Attribution .blogger svg{
margin-$endSide:8px
}
.widget.Profile ul{
list-style:none;
padding:0
}
.widget.Profile .individual .default-avatar-wrapper,.widget.Profile .individual .profile-img{
border-radius:50%;
display:inline-block;
height:120px;
width:120px
}
.widget.Profile .individual .profile-data a,.widget.Profile .team .profile-name{
color:$(body.title.color);
font:$(body.title.font.small);
text-transform:none
}
.widget.Profile .individual dd{
color:$(body.text.color);
font:$(body.text.font);
margin:0 auto
}
.widget.Profile .individual .profile-link,.widget.Profile .team .visit-profile{
color:$(body.action.color);
font:$(body.action.font.small);
text-transform:uppercase
}
.widget.Profile .team .default-avatar-wrapper,.widget.Profile .team .profile-img{
border-radius:50%;
float:$startSide;
height:40px;
width:40px
}
.widget.Profile .team .profile-link .profile-name-wrapper{
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
flex:1 1 auto
}
.widget.Label li,.widget.Label span.label-size{
color:$(body.action.color);
display:inline-block;
font:$(body.action.font.small);
word-break:break-all
}
.widget.Label li:not(:last-child):after,.widget.Label span.label-size:not(:last-child):after{
content:","
}
.widget.PopularPosts .post{
margin-bottom:50px
}
#comments{
border-top:none;
padding:0
}
#comments .comment .comment-footer,#comments .comment .comment-header,#comments .comment .comment-header .datetime,#comments .comment .comment-header .datetime a{
color:$(comment.header.color);
font:$(comment.header.font)
}
#comments .comment .comment-author,#comments .comment .comment-author a,#comments .comment .comment-header .user,#comments .comment .comment-header .user a{
color:$(comment.author.color);
font:$(comment.author.font)
}
#comments .comment .comment-body,#comments .comment .comment-content{
color:$(comment.content.color);
font:$(comment.content.font)
}
#comments .comment .comment-actions,#comments .footer,#comments .footer a,#comments .loadmore,#comments .paging-control{
color:$(comment.action.color);
font:$(comment.action.font);
text-transform:uppercase
}
#commentsHolder{
border-bottom:none;
border-top:none
}
#comments .comment-form h4{
position:absolute;
clip:rect(1px,1px,1px,1px);
padding:0;
border:0;
height:1px;
width:1px;
overflow:hidden
}
.sidebar-container{
background-color:$(sidebar.background.color);
color:$(sidebar.widget.text.color);
font:$(sidebar.widget.text.font);
min-height:100%
}
html[dir=ltr] .sidebar-container{
box-shadow:1px 0 3px $(shadowColor)
}
html[dir=rtl] .sidebar-container{
box-shadow:-1px 0 3px $(shadowColor)
}
.sidebar-container a{
color:$(sidebar.action.color)
}
.sidebar-container .svg-icon-24{
fill:$(sidebar.icon.color)
}
.sidebar-container .widget{
margin:0;
margin-$startSide:40px;
padding:40px;
padding-$startSide:0
}
.sidebar-container .widget+.widget{
border-top:1px solid $(sidebar.separator.color)
}
.sidebar-container .widget .title{
color:$(sidebar.widget.title.color);
font:$(sidebar.widget.title.font)
}
.sidebar-container .widget ul li,.sidebar-container .widget.BlogArchive #ArchiveList li{
font:$(sidebar.widget.text.font);
margin:1em 0 0 0
}
.sidebar-container .BlogArchive .post-count,.sidebar-container .Label .label-count{
float:none
}
.sidebar-container .Label li a{
display:inline
}
.sidebar-container .widget.Profile .default-avatar-wrapper .avatar-icon{
border-color:$(sidebar.profile.name.color);
fill:$(sidebar.profile.name.color)
}
.sidebar-container .widget.Profile .individual{
text-align:center
}
.sidebar-container .widget.Profile .individual dd:before{
content:"\2014";
display:block
}
.sidebar-container .widget.Profile .individual .profile-data a,.sidebar-container .widget.Profile .team .profile-name{
color:$(sidebar.profile.name.color);
font:$(sidebar.profile.name.font)
}
.sidebar-container .widget.Profile .individual dd{
color:$(sidebar.profile.description.color);
font:$(sidebar.profile.description.font);
margin:0 30px
}
.sidebar-container .widget.Profile .individual .profile-link,.sidebar-container .widget.Profile .team .visit-profile{
color:$(sidebar.action.color);
font:$(sidebar.action.font)
}
.sidebar-container .snippet-fade{
background:-webkit-linear-gradient($startSide,$(sidebar.background.color) 0,$(sidebar.background.color) 20%,$(sidebar.background.color.transparent) 100%);
background:linear-gradient(to $startSide,$(sidebar.background.color) 0,$(sidebar.background.color) 20%,$(sidebar.background.color.transparent) 100%)
}
@media screen and (min-width:640px){
.centered-bottom,.centered-top{
margin:0 auto;
width:576px
}
.centered-top{
-webkit-flex-wrap:nowrap;
-ms-flex-wrap:nowrap;
flex-wrap:nowrap;
padding-bottom:24px;
padding-top:36px
}
.blog-name{
-webkit-box-flex:1;
-webkit-flex:1 1 auto;
-ms-flex:1 1 auto;
flex:1 1 auto;
min-width:0;
-webkit-box-ordinal-group:3;
-webkit-order:2;
-ms-flex-order:2;
order:2
}
.sticky .blog-name{
margin:0
}
.back-button-container,.hamburger-menu-container{
margin-$endSide:36px;
-webkit-box-ordinal-group:2;
-webkit-order:1;
-ms-flex-order:1;
order:1
}
.search{
margin-$startSide:36px;
-webkit-box-ordinal-group:5;
-webkit-order:4;
-ms-flex-order:4;
order:4
}
.search .section{
top:36px
}
.sticky .search{
display:block
}
.subscribe-section-container{
-webkit-box-flex:0;
-webkit-flex:0 0 auto;
-ms-flex:0 0 auto;
flex:0 0 auto;
margin-$startSide:36px;
-webkit-box-ordinal-group:4;
-webkit-order:3;
-ms-flex-order:3;
order:3
}
.subscribe-button{
font:$(body.action.font.large);
line-height:48px
}
.subscribe-popup h3{
font:$(body.widget.title.font.large)
}
.subscribe-popup div.widget.FollowByEmail .follow-by-email-address{
font:$(body.widget.title.font.large)
}
.subscribe-popup div.widget.FollowByEmail .follow-by-email-submit{
font:$(body.action.font.large)
}
.widget .title{
font:$(body.widget.title.font.large)
}
.widget.Blog .post.no-featured-image,.widget.PopularPosts .post.no-featured-image{
padding:65px
}
.post-title{
font:$(post.title.font.large)
}
.blog-pager a{
font:$(body.action.font.large)
}
.widget.Header h1{
font:$(header.title.font.large)
}
.sticky .widget.Header h1{
font-size:24px
}
}
@media screen and (min-width:$(content.width + 240px)){
.centered-bottom,.centered-top{
width:$(content.width)
}
.back-button-container,.hamburger-menu-container{
margin-$endSide:48px
}
.search{
margin-$startSide:48px
}
.search-expand{
font:$(body.action.font.large);
line-height:48px
}
.search-expand-text{
display:block
}
.search-expand-icon{
display:none
}
.subscribe-section-container{
margin-$startSide:48px
}
.post-filter-message{
font:$(body.filter.text.font.large)
}
.post-filter-message .search-label,.post-filter-message .search-query{
font:$(body.filter.keyword.font.large)
}
.post-filter-message .home-link{
font:$(body.filter.link.font.large)
}
.widget.Blog .blog-posts .post-outer-container{
width:$(content.width / 2 - 10px)
}
body.item-view .widget.Blog .blog-posts .post-outer-container{
width:100%
}
body.item-view .widget.Blog .blog-posts .post-outer{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex
}
#comments,body.item-view .post-outer-container .inline-ad,body.item-view .widget.PopularPosts{
margin-$startSide:220px;
width:$(content.width - 240px)
}
.post-sidebar{
box-sizing:border-box;
display:block;
font:$(body.action.font.large);
padding-$endSide:20px;
width:220px
}
.post-sidebar-item{
margin-bottom:30px
}
.post-sidebar-item ul{
list-style:none;
padding:0
}
.post-sidebar-item .sharing-button{
color:$(body.action.color);
cursor:pointer;
display:inline-block;
font:$(body.action.font.large);
line-height:normal;
word-break:normal
}
.post-sidebar-labels li{
margin-bottom:8px
}
body.item-view .widget.Blog .post{
width:$(content.width - 240px)
}
.widget.Blog .post.no-featured-image,.widget.PopularPosts .post.no-featured-image{
padding:100px 65px
}
.page .widget.FeaturedPost .post-content{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex;
-webkit-box-pack:justify;
-webkit-justify-content:space-between;
-ms-flex-pack:justify;
justify-content:space-between
}
.page .widget.FeaturedPost .thumb-link{
display:-webkit-box;
display:-webkit-flex;
display:-ms-flexbox;
display:flex
}
.page .widget.FeaturedPost .thumb.hero-thumb{
height:auto;
min-height:300px;
width:$(content.width / 2 - 10px)
}
.page .widget.FeaturedPost .post-content.has-featured-image .post-text-container{
width:425px
}
.page .widget.FeaturedPost .post-content.no-featured-image .post-text-container{
width:100%
}
.page .widget.FeaturedPost .post-header{
margin:0 0 8px 0
}
.page .widget.FeaturedPost .post-footer{
margin:8px 0 0 0
}
.post-body{
font:$(post.text.font.large);
line-height:1.7
}
.post-body blockquote{
font:$(post.blockquote.font.large);
line-height:1.7
}
.snippet-container,.snippet-fade{
font:$(post.text.font.large);
line-height:$(post.text.font.large.size * 1.7)
}
.snippet-container{
max-height:$(post.text.font.large.size * 1.7 * 12)
}
.widget.Profile .individual .profile-data a,.widget.Profile .team .profile-name{
font:$(body.title.font.large)
}
.widget.Profile .individual .profile-link,.widget.Profile .team .visit-profile{
font:$(body.action.font.large)
}
}
@media screen and (min-width:$(content.width + sidebar.width + content.margin * 2)){
body{
position:relative
}
.page_body{
margin-$startSide:$(sidebar.width)
}
.sticky .centered-top{
padding-$startSide:$(sidebar.width)
}
.hamburger-menu-container{
display:none
}
.sidebar-container{
overflow:visible;
z-index:32
}
}
]]></b:skin>

Explorer les nœuds du fichier XML

• <html>
• <head>
• <body>
• <b:skin>
• <b:template-skin>
• <b:defaultmarkups>
• <macro:includable>

• Global
• Common
• AdSense
• Attribution
• Blog
• BlogArchive
• BloggerButton
• BlogList
• BlogSearch
• ContactForm
• FeaturedPost
• Feed
• Followers
• Header
• HTML
• Image
• Label
• LinkList
• Navbar
• PageList
• PopularPosts
• Profile
• ReportAbuse
• Stats
• Subscribe
• Text
• TextList
• Translate
• Wikipedia