/* -------------------------------------------- */
/* Rikiki: Blog */
/* Version: 2 */
/* -------------------------------------------- */
/* Created by @twotribes, Germany */
/* -------------------------------------------- */
/* Browser Scope: ALL */
/* StyleSheet Scope: Section Blog only */
/* Requirements: zwei_blog.css (overridden), base.css (augmented) */
/* !-------------------------------------------- */

/* !======================================================================================== */
/* !STAGE DEFINITIONS: General layout & viewport dependencies */
/* !======================================================================================== */

/* !-------------------------------------------- */
/* !STAGE: Blog */
/* !VIEWPORT: Desktop, iPad Landscape */
/* !-------------------------------------------- */

/* --- Actor Navigation */
body.stage-blog #actor-navigation {
position: absolute;
top: 0;
left: 0;
height: 185px;
width: 100%;
z-index: 200;
}

body.stage-blog #actor-navigation .actor-body {
width: 960px;
margin: 0 auto 0 auto;
}

/* --- Actor Blog Content */
body.stage-blog #zwei_content {
margin: 185px 0 15px 0;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}

body.stage-blog.spotlight-map #zwei_content {
margin-top: 30px;
-webkit-transition: margin 1s ease;
-moz-transition: margin 1s ease;
-ms-transition: margin 1s ease;
transition: margin 1s ease;
}

body.stage-blog #zwei_content .zwei-ui-container {
width: 960px;
margin: 0 auto 0 auto;
}

/* --- Actor Blog Footer */
body.stage-blog #zwei_footer {
}


/* !======================================================================================== */
/* !ACTOR DEFINITIONS: Inner layout & styling, some viewport-dependent adaptions */
/* !======================================================================================== */

/* !-------------------------------------------- */
/* !ACTOR: Blog Content */
/* !-------------------------------------------- */

/* --- Inner layout */
#zwei_content .zwei-ui-container {
color: #4D5855;
padding-top: 20px;
}

#zwei_content .zwei-ui-blognav {
float: left;
width: 25%;
padding-right: 30px;
margin-left: -15px;
}

#zwei_content .zwei-ui-bloglist {
float: left;
width: 540px;
}

#zwei_content .zwei-ui-blogcontrol {
float: right;
width: 175px;
}

#zwei_content .zwei-ui-paginator {
clear: left;
}

/* --- Blog navigation */
#zwei_content .zwei-ui-blognav h4 {
font-family: "aktiv-grotesk-extended";
font-weight: bold;
font-size: 100%;
letter-spacing: 1px;
text-transform: uppercase;
border-bottom: 1px solid #BDBCBB;
padding: 0 10px 3px 25px;
margin: 0 -10px 10px -10px;
}

#zwei_content .zwei-ui-blognav h4.item-active {
color: #C0087F;
}

/* Keyword-based post filtering */
#zwei_content .zwei-ui-blognav .blognav-keyword {
margin-bottom: 30px;
}

#zwei_content .zwei-ui-blognav .blognav-keyword .keyword-count {
font-size: 80%;
}

#zwei_content .zwei-ui-blognav .blognav-keyword .keyword-count:before {
content: " [";
}

#zwei_content .zwei-ui-blognav .blognav-keyword .keyword-count:after {
content: "]";
}

/* Latest posts */
#zwei_content .zwei-ui-blognav .blognav-latest {
margin-bottom: 30px;
}

/* Common treatment of navigation buttons */
#zwei_content .zwei-ui-blognav li {
position: relative;
overflow: hidden;
margin: 0 -10px 0 -10px;
padding: 0 10px 0 10px;
}

/* Sliding bar for active filters */
#zwei_content .zwei-ui-blognav li:before {
content: "";
position: absolute;
height: 100%;
width: 100%;
padding: 0 10px 0 10px;
background: #EFEFEF;
top: 0;
right: 100%;
-webkit-transition: right 2s ease;
-moz-transition: right 2s ease;
-ms-transition: right 2s ease;
transition: right 2s ease;
}

#zwei_content .zwei-ui-blognav li.item-active:before {
right: -10px;
-webkit-transition: right 2s ease;
-moz-transition: right 2s ease;
-ms-transition: right 2s ease;
transition: right 2s ease;
}

#zwei_content .zwei-ui-blognav .action {
position: relative;
display: block;
text-decoration: none;
color: #4D5855;
padding: 3px 0 3px 15px;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}

#zwei_content .zwei-ui-blognav .blognav-keyword .action:before {
content: "#";
}

#zwei_content .zwei-ui-blognav .blognav-keyword li:first-child .action:before {
content: "";
}

#zwei_content .zwei-ui-blognav .action:after {
background: #E9E9EA;
content: "";
display: block;
position: absolute;
top: 0.6em;
left: 2px;
height: 7px;
width: 7px;
border-radius: 50%;
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
-ms-transition: background 1s ease;
transition: background 1s ease;
}

#zwei_content .zwei-ui-blognav .action:hover, 
#zwei_content .zwei-ui-blognav .item-active .action {
color: #C0087F;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
transition: color 0.5s ease;
}

#zwei_content .zwei-ui-blognav .action:hover:after, 
#zwei_content .zwei-ui-blognav .item-active .action:after {
background: #BDBCBB;
-webkit-transition: background 0.5s ease;
-moz-transition: background 0.5s ease;
-ms-transition: background 0.5s ease;
transition: background 0.5s ease;
}

/* Arbitrary notice text */
#zwei_content .zwei-ui-blognav .blognav-notice {
padding-left: 15px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

#zwei_content .zwei-ui-blognav .blognav-notice h4 {
margin-left: -25px;
}

#zwei_content .zwei-ui-blognav .blognav-notice p {
line-height: 1.25em;
margin-bottom: 0.7em;
}

#zwei_content .zwei-ui-blognav .blognav-notice em {
font-style: normal;
font-weight: bold;
}

/* --- Blog entries */
/* Entry frame */
#zwei_content .zwei-ui-bloglist .bloglist-entry {
border: 10px solid #d1d1d1;
padding: 15px;
margin-bottom: 30px;
}

/* Date of publication */
#zwei_content .bloglist-entry .entry-date {
display: inline-block;
position: relative;
margin-left: -25px;
background: rgba(204,201,205,0.3);
padding: 5px 5px 5px 25px;
font-family: "aktiv-grotesk-extended";
color: #8E9391;
z-index: 20;
}

/* Assigned keywords */
#zwei_content .bloglist-entry .entry-keyword {
margin: 10px 0 20px 0;
}

#zwei_content .bloglist-entry .entry-keyword li {
display: inline-block;
}

#zwei_content .bloglist-entry .entry-keyword .item-active {
color: #C0087F;
}

#zwei_content .bloglist-entry .entry-keyword li:before {
content: "#";
}

#zwei_content .bloglist-entry .entry-keyword li:after {
content: ", ";
}

#zwei_content .bloglist-entry .entry-keyword li:last-child:after {
content: "";
}

/* Post title (also link outside or to single view) */
#zwei_content .bloglist-entry .entry-title {
margin-bottom: 20px;
}

#zwei_content .bloglist-entry .entry-title .action {
display: block;
color: inherit;
text-decoration: none;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}

#zwei_content .bloglist-entry.entry-outlink .entry-title .action:before {
content: "→ ";
}

body.zwei-blog-entry #zwei_content .bloglist-entry:not(.entry-outlink) .entry-title .action, 
#zwei_content .bloglist-entry .entry-title .action:hover {
color: #C0087F;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
transition: color 0.5s ease;
}

/* Optional permalink to the post */
#zwei_content .bloglist-entry.entry-outlink .action-permalink {
display: block;
color: #8E9391;
text-decoration: none;
margin-top: -10px;
margin-bottom: 20px;
font-size: 80%;
font-weight: bold;
letter-spacing: 0.5px;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}

#zwei_content .bloglist-entry.entry-outlink .action-permalink:hover {
color: #C0087F;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
transition: color 0.5s ease;
}

/* Content of post (including eventual captions for attached images) */
#zwei_content .bloglist-entry .entry-content {
margin-bottom: 20px;
}

#zwei_content .bloglist-entry .item-structured {
line-height: 1.25em;
-webkit-hyphens: auto;
-moz-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

#zwei_content .bloglist-entry .item-structured h1,
#zwei_content .bloglist-entry .item-structured h2,
#zwei_content .bloglist-entry .item-structured h3,
#zwei_content .bloglist-entry .item-structured h4 {
font-size: inherit;
margin: 1.4em 0 0.5em 0;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}

/* Paragraphs + emphasis */
#zwei_content .bloglist-entry .item-structured p {
margin-bottom: 0.7em;
}

#zwei_content .bloglist-entry .item-structured em {
font-style: normal;
font-weight: bold;
color: #5d6863;
}

#zwei_content .bloglist-entry .item-structured strong {
font-style: normal;
font-weight: normal;
color: #000;
}

/* Embedded links */
#zwei_content .bloglist-entry .item-structured a {
font-weight: normal;
color: #000;
text-decoration: none;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}

#zwei_content .bloglist-entry .item-structured a:before {
content: "→ ";
}

#zwei_content .bloglist-entry .item-structured a:hover {
color: #C0087F;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
transition: color 0.5s ease;
}

/* Bullet lists */
#zwei_content .bloglist-entry .item-structured li {
margin-bottom: 0.5em;
position: relative;
padding-left: 15px;
}

#zwei_content .bloglist-entry .item-structured li:last-child {
margin-bottom: 0.7em;
}

#zwei_content .bloglist-entry .item-structured li:before {
background: #BDBCBB;
content: "";
display: block;
position: absolute;
top: 0.35em;
left: 0;
height: 7px;
width: 7px;
border-radius: 50%;
}

/* Quotations */
#zwei_content .bloglist-entry .item-structured blockquote {
margin: 1.4em 0 1.4em 0;
padding: 0px 0px 0px 15px;
border-left: 4px solid #BDBCBB;
color: #000;
}

#zwei_content .bloglist-entry .item-structured blockquote strong {
font-weight: bold;
}

/* Embedded images */
#zwei_content .bloglist-entry .item-structured img {
max-width: 100%;
float: left;
margin: 0 1.4em 1.4em 0;
}

/* Author */
#zwei_content .bloglist-entry .entry-author {
font-family: "aktiv-grotesk-extended";
color: #8E9391;
font-size: 80%;
letter-spacing: 1px;
}

#zwei_content .bloglist-entry .entry-author .author-name {
font-weight: bold;
}

/* Attachments */
#zwei_content .bloglist-entry .entry-attachment {
margin-top: 20px;
}

#zwei_content .bloglist-entry .entry-attachment li {
margin-bottom: 20px;
}

#zwei_content .bloglist-entry .entry-attachment img {
max-width: 100%;
}

#zwei_content .bloglist-entry .entry-attachment .attachment-caption {
margin-top: 10px;
font-size: 80%;
}

/* --- Blog controls */
/* RSS feed subscription link */
#zwei_content .zwei-ui-blogcontrol .blogcontrol-subscription {
margin-bottom: 30px;
}

#zwei_content .zwei-ui-blogcontrol .blogcontrol-subscription .action-subscribe {
display: block;
position: relative;
height: 100%;
width: 100%;
padding: 50px 5px 5px 5px;
text-decoration: none;
text-align: center;
color: #4D5855;
font-weight: bold;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}

#zwei_content .zwei-ui-blogcontrol .blogcontrol-subscription .action-subscribe:hover {
color: #C0087F;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
transition: color 0.5s ease;
}

#zwei_content .zwei-ui-blogcontrol .blogcontrol-subscription .action-subscribe:before {
content: "";
display: block;
position: absolute;
    background: transparent url("img/sprite_buttons.svg") center -1380px no-repeat;
background-size: 44.11px 2798.11px; /* 130% of original */ 
top: 5px;
left: 50%;
margin-left: -17px;
height: 34px;
width: 34px;
border-radius: 50%;
-webkit-transition: box-shadow 1s ease;
-moz-transition: box-shadow 1s ease;
-ms-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
}

#zwei_content .zwei-ui-blogcontrol .blogcontrol-subscription .action-subscribe:hover:before {
box-shadow: 0 0 15px rgba(192,8,127,0.5);
-webkit-transition: box-shadow 0.5s ease;
-moz-transition: box-shadow 0.5s ease;
-ms-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
}

/* External content: Latest pins on Rikiki's Pinterest board */
#zwei_content .zwei-ui-blogcontrol .blogcontrol-external {
margin-bottom: 30px;
text-align: center;
}

/* Internal content: Link list of admired blogs */
#zwei_content .zwei-ui-blogcontrol .blogcontrol-internal h4 {
position: relative;
font-family: "aktiv-grotesk-extended";
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
text-align: center;
padding: 50px 0 3px 0;
border-bottom: 1px solid #BDBCBB;
margin-bottom: 3px;
}

#zwei_content .zwei-ui-blogcontrol .blogcontrol-internal h4:before {
content: "";
display: block;
position: absolute;
    background: transparent url("img/sprite_buttons.svg") center -1326px no-repeat;
background-size: 39.02px 2475.25px; /* 115% of original */
top: 5px;
left: 50%;
margin-left: -17px;
height: 34px;
width: 34px;
}

#zwei_content .zwei-ui-blogcontrol .blogcontrol-internal li {
padding-bottom: 3px;
border-bottom: 1px solid #BDBCBB;
margin-bottom: 3px;
text-align: center;
}

#zwei_content .zwei-ui-blogcontrol .blogcontrol-internal .action {
position: relative;
display: block;
text-decoration: none;
color: #4D5855;
padding: 3px 0 3px 0;
-webkit-transition: color 1s ease;
-moz-transition: color 1s ease;
-ms-transition: color 1s ease;
transition: color 1s ease;
}

#zwei_content .zwei-ui-blogcontrol .blogcontrol-internal .action:hover {
color: #C0087F;
-webkit-transition: color 0.5s ease;
-moz-transition: color 0.5s ease;
-ms-transition: color 0.5s ease;
transition: color 0.5s ease;
}

/* --- Paginator */
#zwei_content .zwei-ui-paginator {
width: 540px;
margin-left: 225px;
}

#zwei_content .zwei-ui-paginator .page-control {
float: left;
width: 255px;
border: 1px solid #888D8B;
}

#zwei_content .zwei-ui-paginator .page-forward {
float: right;
}

#zwei_content .zwei-ui-paginator .action {
display: block;
position: relative;
height: 100%;
min-height: 60px;
width: 100%;
padding: 10px;
text-decoration: none;
line-height: 38px;
color: #4D5855;
-webkit-transition: color 1s ease;
}

#zwei_content .zwei-ui-paginator .action:hover {
color: #C0087F;
-webkit-transition: color 1s ease;
}

#zwei_content .zwei-ui-paginator .action:before {
content: "";
    background: transparent url("img/sprite_buttons.svg") -1px -824px no-repeat;
background-size: 33.93px 2152.39px;
display: block;
position: absolute;
height: 34px;
width: 34px;
border: 3px solid #888D8B;
border-radius: 50%;
-webkit-transition: box-shadow 1s ease;
-moz-transition: box-shadow 1s ease;
-ms-transition: box-shadow 1s ease;
transition: box-shadow 1s ease;
}

#zwei_content .zwei-ui-paginator .action:hover:before {
box-shadow: 0 0 15px rgba(192,8,127,0.5);
-webkit-transition: box-shadow 0.5s ease;
-moz-transition: box-shadow 0.5s ease;
-ms-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
}

#zwei_content .zwei-ui-paginator .page-backward .action {
padding-left: 60px;
}

#zwei_content .zwei-ui-paginator .page-backward .action:before {
top: 10px;
left: 10px;
}

#zwei_content .zwei-ui-paginator .page-forward .action {
padding-right: 60px;
text-align: right;
}

#zwei_content .zwei-ui-paginator .page-forward .action:before {
background-position: 2px -902px;
top: 10px;
right: 10px;
}

#zwei_content .zwei-ui-paginator:after {
content: "";
display: block;
clear: both;
}


/* !-------------------------------------------- */
/* !ACTOR: Blog Footer */
/* !-------------------------------------------- */

#zwei_footer {
background: #c2cfcb;
background: -webkit-linear-gradient(left, #c2cfcb 0%, #242d2a 100%);
background: -moz-linear-gradient(left, #c2cfcb 0%, #242d2a 100%);
background: -ms-linear-gradient(left, #c2cfcb 0%, #242d2a 100%);
background: linear-gradient(left, #c2cfcb 0%, #242d2a 100%);
min-height: 15px;
}