/* =general
-----------------------------*/
* {
margin: 0;
padding: 0;
font-family: Palatino, "Palatino Linotype", "Book Antiqua", Georgia, Constantia, serif;
line-height: 1.4em;
font-size: 16px;
}
body {
background-color: #fff;
}
/* =layout
-----------------------------*/
#page {
width: 890px;
margin: 28px auto 0;
}
#header {
margin: 0 0 56px;
position: relative;
width: 100%;
height: 111px;
}
#main {
margin: 0 0 56px;
}
#content {
width: 500px;
padding: 0 84px 56px 28px;
float: left;
}
#sidebar {
width: 278px;
float: left;
padding-bottom: 56px;
}
#header .tagline {
width: 555px;
margin-right: 56px;
height: 111px;
background: url(../i/header.png) no-repeat;
float: left;
text-indent: -9999px;
}
#header .tagline .home {
display: block;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
width: 555px;
height: 112px;
}
body.home #header .tagline .home {
display: none;
}
#header .tagline a.home:hover {
background-color: transparent;
}
/* =search
-----------------------------*/
.searchform {
width: 278px;
margin-top: 28px;
margin-bottom: 23px;
float: left;
}
.searchform .control {
float: left;
}
.searchform .text input {
width: 188px;
margin-right: 4px;
}
.searchform label {
display: none;
}
.searchform button {
float: left;
width: 79px;
height: 29px;
text-indent: -9999px;
background: url(../i/buttons.gif) no-repeat;
}
#content .searchform {
margin-top: 3px;
width: 500px;
}
#content .searchform input {
width: 272px;
}
/* =menu
-----------------------------*/
ul.menu {
width: 278px;
float: left;
}
ul.menu li {
float: left;
}
ul.menu a {
display: block;
font-variant: small-caps;
margin-right: 25px;
font-size: 18px;
}
ul.menu li.home a {
width: 48px;
}
ul.menu li.blog a {
width: 43px;
}
ul.menu li.works a {
width: 57px;
}
ul.menu li.about a {
width: 53px;
margin-right: 0;
}
/* =headings
-----------------------------*/
h1, h2, h3, h4, h6,  /* h5 is italic */
h1 *, h2 *, h3 *, h4 *, h6 * {
font-variant: small-caps;
font-weight: normal;
letter-spacing: 0.5px;
line-height: 1em;
}
h1, #sidebar h2, #sidebar h3 {
border-bottom: 1px solid #ddd;
}
h1 {
padding-bottom: 11px;
margin: -3px 0 27px;
}
h1, h1 * {
font-size: 48px;
}
h2 {
margin: 13px 0 27px;
padding-bottom: 7px;
}
#sidebar h2 {
margin-top: 6px;
padding-bottom: 14px;
margin-bottom: 30px;
}
#sidebar h2:not(:first-of-type) {
margin-top: 21px;
}
h2, h2 * {
font-size: 36px;
}
h3 {
margin: 20px 0;
}
#sidebar h3 {
margin-bottom: 28px;
padding-bottom: 11px;
}
body.about #sidebar h3 {
padding-bottom: 17px;
}
body.home #panel h3 {
margin-top: 24px;
}
#sidebar h3:first-of-type {
margin-top: 15px;
}
h3, h3 * {
font-size: 24px;
}
h4 {
margin: 20px 0;
}
h4, h4 * {
font-size: 20px;
}
#sidebar h4 {
margin-top: 20px;
margin-bottom: 4px;
}
#sidebar > h4:first-child {
margin-top: 32px;
}
h5 {
margin: 20px 0;
}
h5, h5 * {
font-size: 18px;
font-style: italic;
font-weight: normal;
}
/* =content
-----------------------------*/
p+p {
text-indent: 21px;
}
.summary+p {
text-indent: 0;
}
code {
font-family: "Lucida Console", "Courier New", monospace;
}
pre.code {
margin: 20px 0;
overflow: auto;
color: #333;
}
del {
color: #333;
}
del a {
color: #9f5e82;
}
ins {
text-decoration: none;
}
ins, ins * {
font-style: italic;
}
blockquote {
margin: 20px 0;
font-style: italic;
}
blockquote:nth-child(1n+0):before { /* FF 3.0: I'm targeting you OUT for your ignorance of generated content positioning foo */
content: "“";
margin-left: -8px;
position: absolute;
}
blockquote:nth-child(1n+0) p:last-of-type:after {
content: "”";
}
blockquote cite {
display: block;
font-variant: small-caps;
font-weight: bold;
}
.amp {
font-style: italic;
}
blockquote:first-child, pre.code:first-child {
margin-top: 0;
}
.wide-figure:last-child, blockquote:last-child, pre.code:last-child {
margin-bottom: 0;
}
dl {
overflow: hidden;
}
dt {
font-weight: bold;
clear: left;
margin-right: 1ex;
}
dd {
margin-bottom: 8px;
text-align: justify;
}
dt, dd {
float: left;
}
/* =links
-----------------------------*/
a {
text-decoration: none;
color: #9f1f65;
}
a:hover {
background-color: #efefef;
}
.entry a[href^="http://"],
body.work #panel p a:not([href^="http://szafranek.net"]),
.elsewhere li a[href^="http://"] span,
.share li a[href^="http://"] span,
#footer a.license[href^="http://"] {
border-bottom: 1px solid #9f1f65;
}
.entry a[href^="http://"]:visited,
body.work #panel p a:not([href^="http://szafranek.net"]):visited,
.elsewhere li a[href^="http://"]:visited span,
.share li a[href^="http://"]:visited span,
#footer a.license[href^="http://"]:visited {
border-bottom-color: #e5d9e0;
}
body.home #sidebar li h4 a:after,
body.home #sidebar .more a:after,
.commentlist h3 a:not([href^="http://szafranek.net"]):after,
body.about #panel h3 a:after {
margin-left: 7px;
content: url(../i/outgoing-link.png);
}
/* =more links
-----------------------------*/
.archives {
margin-top: 3px;
}
.archives * {
text-transform: uppercase;
letter-spacing: 0.5px;
}
.archives div {
float: left;
margin-top: 28px;
margin-right: 28px;
}
.archives div:empty {
display: none;
}
.archives .rss {
background: url(../i/buttons.gif) no-repeat 0 -116px;
height: 15px;
}
.archives .rss a {
padding-left: 17px;
background-color: transparent;
}
#panel #commentform .archives {
width: 311px;
float: left;
}
#panel #commentform .archives div {
float: right;
margin-right: 0;
margin-top: 3px;
}
/* =flags
-----------------------------*/
div.post h1,
.years .works h3,
li h3,
li h4 {
position: relative;
}
div.post h1[lang=pl]:nth-child(1n+0):before,
.years .works h3[lang=pl]:nth-child(1n+0):before,
li h3[lang=pl]:nth-child(1n+0):before,
li h4[lang=pl]:nth-child(1n+0):before {
content: url(../i/polish.png);
position: absolute;
left: -23px;
}
div.post h1[lang=pl]:before {
top: 27px;
}
.years .works h3[lang=pl]:before {
top: 9px;
}
li h3[lang=pl]:before {
top: 9px;
}
li h4[lang=pl]:before {
top: 5px;
}
/* =panel
-----------------------------*/
#panel, #panel-container, #panel-content {
background-image: url(../i/panel.png);
}
#panel-container {
clear: both;
background-repeat: repeat-y;
background-position: -1780px 0;
}
#panel-content {
background-repeat: no-repeat;
background-position: -890px bottom;
}
#panel {
background-repeat: no-repeat;
background-position: 0 0;
padding: 49px 56px 52px 29px;
position: relative;
overflow: hidden;
}
#panel .text {
float: left;
width: 500px;
margin-right: 77px;
}
#panel h2 {
margin-bottom: 20px;
}
#panel .summary {
margin-bottom: 19px;
}
#panel .figure {
margin-right: 0;
}
/* =comments
-----------------------------*/
body.about #panel {
padding-bottom: 0;
}
body.about #panel ul, #panel .commentlist {
clear: both;
padding-left: 0;
}
body.about #panel ul li, #panel .commentlist li.comment {
list-style-image: none;
list-style: none;
overflow: hidden;
width: 861px;
background: url(../i/hr.gif) no-repeat -919px bottom;
margin-bottom: 23px;
padding-left: 28px;
margin-left: -28px;
position: relative;
}
body.about #panel ul li.last, #panel .commentlist li.last {
background: none;
}
body.about #panel ul p, #panel .commentlist .entry {
width: 500px;
float: left;
margin-right: 84px;
margin-bottom: 28px;
min-height: 43px;
}
body.about #panel ul h3, #panel .commentlist h3 {
margin-top: 0;
float: left;
width: 249px;
}
#panel .commentlist .details {
margin-bottom: 28px;
margin-left: 584px;
}
#panel .commentlist li.comment ul {
padding-left: 28px;
}
#panel .commentlist li.comment ul li {
margin-left: -28px;
}
/* =comment form
-----------------------------*/
#commentform .control {
position: relative;
margin-bottom: 14px;
float: left;
width: 100%;
}
#commentform .control input {
width: 272px;
}
#commentform .control label {
position: absolute;
top: 5px;
left: 292px;
}
#commentform .control label, #commentform .control label * {
color: #666;
}
#commentform .textarea label {
width: 250px;
left: 581px;
top: 0;
}
#commentform textarea {
width: 492px;
}
#commentform .button .field {
float: left;
}
#commentform .button {
width: auto;
margin-bottom: 0;
}
#commentform .submit button {
width: 75px;
height: 29px;
float: left;
text-indent: -9999px;
margin-right: 28px;
background: url(../i/buttons.gif) no-repeat 0 -29px;
}

#acp-preview {
float: left;
border: 0;
width: 86px;
height: 29px;
text-indent: -9999px;
background: url(../i/buttons.gif) no-repeat 0 -58px;
}
#ajax-comment-preview {
clear: both;
}
#ajax-comment-preview .commentlist {
padding-top: 19px;
margin-bottom: -28px;
}
#ajax-comment-preview .commentlist li.comment {
padding-top: 35px;
background: url(../i/hr.gif) no-repeat -919px top;
}
/* =figures
-----------------------------*/
.figure { /* Look ma, a microformat! */
padding: 28px 28px 0;
border: 1px solid #ccc;
margin: 7px 28px 4px 0;
position: relative;
float:  left;
}
ol + .figure,
ul + .figure,
blockquote + .figure,
object + .figure {
margin-top: 8px;
}
.figure + .figure {
margin-top: 24px;
}
body.about #content .figure {
float: right;
margin: 4px 0 4px 28px;
}
.wide-figure {
margin: 28px 28px 28px 0;
}
.wide-figure + p, .wide-figure + div, .wide-figure + ul {
clear: both;
}
.figure .legend {
margin: 0 auto;
padding-top: 13px;
padding-bottom: 8px;
text-align: center;
min-height: 7px;
color: #666;
background: url(../i/image.png) no-repeat center -6px;
}
.figure .legend, .figure .legend * {
font-size: 14px;
}
.narrow-figure, .narrow-figure .legend {
background-image: none;
}
.close-figure {
float: none;
margin: 28px 0;
}
.figure img {
display: block;
margin: 0 auto 0;
border: 1px solid #ccc;
}
#content .figure>a {
overflow: hidden;
display: block;
position: relative;
border: 1px solid #9f1f65;
}
.figure a img {
border: 0;
}
.figure a.button {
background-image: url(../i/buttons.gif);
background-repeat: no-repeat;
height: 29px;
border: 0;
margin: auto;
text-indent: -9999px;
overflow: hidden;
margin-bottom: 5px;
display: block;
}
.figure a.copy {
background-position: 0 -58px;
width: 86px;
}
.figure a.open {
background-position: 0 -87px;
width: 61px;
}
/* =tables
-----------------------------*/
table {
border-collapse: collapse;
width: 100%;
margin: 20px 0;
}
th {
text-align: left;
}
th, td {
border: 1px solid #eee;
border-width: 1px 0;
padding: 7px 0;
}
caption {
caption-side: bottom;
font-size: 14px;
color: #666;
text-align: left;
padding-top: 7px;
margin-bottom: 2px;
}
table tr > .count {
    text-align: right;
}
/* =posts
-----------------------------*/
.posts li {
margin-bottom: 35px;
}
#main .posts li:last-child {
margin-bottom: 19px;
}
#content .posts .details {
margin: -17px 0 6px;
}
.posts li .excerpt, .posts li .excerpt p, .posts li .more {
display: inline;
}
.posts li .more {
margin-left: 0.3ex;
font-variant: small-caps;
}
/* =post
-----------------------------*/
div.post h1 {
padding-bottom: 0;
border-bottom: 0;
margin-bottom: 5px;
}
.details {
color: #666;
margin: 2px 0 7px;
}
.details .date {
font-size: 16px;
margin-bottom: 6px;
}
.details, .details * {
font-size: 14px;
}
#content .entry p, #content .entry li, #panel .entry p, #panel .entry li {
text-align: justify;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
.entry .summary, .share {
margin: 22px 0 28px;
padding: 26px 0 23px;
border-width: 1px 0;
border-color: #ccc;
border-style: dotted;
}
.entry .summary, .entry .summary *, .share {
font-size: 15px;
}
.share {
margin-bottom: 0;
overflow: hidden;
}
.share li {
float: left;
background-image: url(../i/social-icons.png);
background-repeat: no-repeat;
position: relative;
height: 21px;
margin-right: 28px;
}
.share li a {
display: inline-block;
padding-left: 32px;
position: relative;
height: 22px;
padding-top: 1px;
}
.share li a:hover {
background-color: transparent;
}
.share li a:hover span {
background-color: #efefef;
}
.post footer, .post footer * {
font-size: 14px;
}
.post footer {
margin: 18px 0 13px;
}
/* =lists
-----------------------------*/
ul {
list-style-type: none;
}
.entry ul, #panel ul {
list-style-image: url(../i/bullet-1.png);
margin: 20px 0;
padding-left: 28px;
}
body.work #panel>div:first-child,
body.work #panel>div.year,
body.about #panel>div:first-child {
padding-left: 28px;
margin-left: -28px;
}
.entry ul li, #panel ul li {
margin-left: -28px;
}
.entry ul ul, #panel ul ul {
list-style-image: url(../i/bullet-2.png);
margin: 0 0 0 35px;
}
.entry ul ul ul, #panel ul ul ul {
list-style-image: url(../i/bullet-3.png);
}
.entry ul:first-child {
margin-top: 0;
}
.entry ol {
    margin: 20px 0;
}
.entry ol ol {
margin: 0 0 0 20px;
}

/* =archive
-----------------------------*/
.shortcuts {
margin: -3px 0 25px;
border-bottom: 1px solid #ddd;
padding-bottom: 21px;
overflow: hidden;
}
.shortcuts li {
float: left;
margin-right: 14px;
}
.years h2 {
padding-bottom: 0;
margin-bottom: -2px;
}
/* =works
-----------------------------*/
.years .year {
margin-bottom: 1px;
position: relative;
height: 100%;
display: table;
}
body.works .years .year {
width: 862px;
}
body.work-category .years .year {
width: 558px;
}
.years .year:last-child .work:last-child {
margin-bottom: 0;
}
.years .year .highlights,
.years .year .works,
.years .year .timeline {
position: relative;
height: 100%;
display: table-cell;
border: 0;
}
.years .year .works {
width: 529px;
}
.years .year .timeline {
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #aaa;
margin: 0;
padding: 0;
text-indent: -9999px;
background-image: url(../i/years.png);
background-repeat: no-repeat;
width: 29px;
}
.years .timeline span {
display: none; /* Operah ignores table width if the text inside is wider */
}
/* @TODO: replace it with CSS3/canvas before the end of the world in 2019 */
#year-2001 .timeline {
background-position: 0 center;
}
#year-2002 .timeline {
background-position: -29px center;
}
#year-2003 .timeline {
background-position: -58px center;
}
#year-2004 .timeline {
background-position: -87px center;
}
#year-2005 .timeline {
background-position: -116px center;
}
#year-2006 .timeline {
background-position: -145px center;
}
#year-2007 .timeline {
background-position: -174px center;
}
#year-2008 .timeline {
background-position: -203px center;
}
#year-2009 .timeline {
background-position: -232px center;
}
#year-2010 .timeline {
background-position: -261px center;
}
#year-2011 .timeline {
background-position: -290px center;
}
#year-2012 .timeline {
background-position: -319px center;
}
#year-2013 .timeline {
background-position: -348px center;
}
#year-2014 .timeline {
background-position: -377px center;
}
#year-2015 .timeline {
background-position: -406px center;
}
#year-2016 .timeline {
background-position: -435px center;
}
#year-2017 .timeline {
background-position: -464px center;
}
#year-2018 .timeline {
background-position: -493px center;
}
.years .works .work {
background: url(../i/work-bg.png) no-repeat;
padding: 7px 57px 0 29px;
margin: 0 0 28px;
position: relative;
height: 219px;
width: 443px;
}
.years .works .work .more {
position: absolute;
bottom: 23px;
left: 29px;
}
.years .works .work .text {
float: left;
width: 248px;
margin-right: 28px;

}
.years .works .work .figure {
border: 0;
margin: -5px 0 0;
padding: 28px 0 0;
}
.years .year .highlights {
vertical-align: top;
width: 304px;
}
.years .year .highlights .vevent {
margin-top: 7px;
margin-bottom: 56px;
}
.years .year .highlights .dtstart {
padding-left: 28px;
padding-bottom: 3px;
margin-bottom: 9px;
border-bottom: 1px solid #ccc;
color: #666;
}
.years .year .highlights .summary {
padding-left: 28px;
}
#panel .year {
overflow: hidden;
margin-bottom: 49px;
}
#panel .year:last-child {
margin-bottom: 0;
}
/* =sidenotes
-----------------------------*/
.sidenote {
float: right;
width: 222px;
margin: 4px 0 0 28px;
border: 1px solid #ccc;
padding: 24px 28px 22px;
}
.sidenote, .sidenote * {
font-size: 15px;
line-height: 1.5;
}
.sidenote + p {
text-indent: 21px;
}
/* =about
-----------------------------*/
.elsewhere li {
background-image: url(../i/social-icons.png);
background-repeat: no-repeat;
margin-left: -3px;
position: relative;
margin-bottom: 10px;
}
li.linkedin {
background-position: 0 0;
}
li.reader {
background-position: 0 -23px;
}
li.delicious {
background-position: 0 -46px;
}
li.lastfm {
background-position: 0 -69px;
}
li.supervolatile {
background-position: 0 -138px;
}
li.twitter {
background-position: 0 -161px;
}
ul.share li.rss {
margin-right: 0;
background-position: 0 -115px;
}
.elsewhere li a {
display: block;
padding-left: 35px;
position: relative;
height: 22px;
padding-top: 1px;
}
.elsewhere li a:hover {
background-color: transparent;
}
.elsewhere li a:hover span {
background-color: #efefef;
}
/* =forms
-----------------------------*/
button {
border: 0;
}
.text .field input {
height: 19px;
}
textarea {
overflow: auto;
}
.text .field input, textarea {
border: 1px solid #cfcfcf;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
padding: 6px 2px 2px;
font-size: 16px;
background-color: #fff;
}

/* =footer
-----------------------------*/
#footer {
background: url(../i/hr.gif) no-repeat 0 -1px;
padding: 33px 0 22px;
overflow: hidden;
clear: both;
}
#footer .menu {
margin-left: 28px;
}
#footer .license {
float: right;
margin: 2px 56px 0 0;
}
/* =preview frame
-----------------------------*/
body.preview {
border-bottom: 1px solid #d8d8d8;
}
body.preview .all {
border-bottom: 1px solid #404040;
}
body.preview #page {
margin: 0 auto 0 163px;
width: auto;
}
body.preview #page h3 {
position: absolute;
left: 28px;
top: 20px;
}
body.preview #page h1 {
margin: 25px 0 6px;
border: 0;
}
body.preview #page h3 {
position: absolute;
left: 28px;
top: 23px;
}
/* =lightbox
-----------------------------*/
body #lightbox-overlay {
background-color: #fff;
}
body #lightbox-infoFooter, body #lightbox-nav, body #lightbox-overlay-text-interact {
display: none !important;
}
body #lightbox-caption-title {
font-weight: normal;
text-decoration: none !important;
color: #9f1f65 !important;
}
body #lightbox-caption-title:hover {
background-color: #ccc;
}
body #lightbox-overlay-text-close {
color: #9f1f65 !important;
}
body #lightbox-overlay-text-close:hover {
background-color: #efefef;
}
body #lightbox-infoBox {
display: block !important;
background-color: #efefef;
border: 1px solid #e5e5e5;
border-width: 0 1px 1px;
}
body #lightbox-imageBox {
border: 1px solid #ccc;
border-bottom-width: 0;
}
/* =lightbox thumbnails customizations
-----------------------------*/
.lightbox-overlay, .lightbox-enlarge {
display: none;
cursor: pointer;
}
a:hover .lightbox-overlay, a:hover .lightbox-enlarge {
display: block;
}
.lightbox-overlay {
background: #000;
opacity: 0.15;
-ms-filter: "alpha(opacity=15)";
text-indent: -9999px;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.lightbox-enlarge {
background: url(../i/enlarge.png) no-repeat center center;
text-indent: -9999px;
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
cursor: -moz-zoom-in;
}
/* =minigallery default
-----------------------------*/
.minigallery {
overflow: auto;	/* fallback popeye is scrolling! */
height: 180px;	/* set to max height of fallback popeye */
}
.minigallery ul,		/* reset browser list styles */
.minigallery li {              
list-style: none; 
margin: 0;
padding: 0;
}
.minigallery-tools-wrap,
.minigallery-tools {
overflow: hidden;
}
.minigallery-cap {
overflow: auto;	/* if height is set, caption will scroll */
}
/* =minigallery custom
-----------------------------*/
.minigallery {
border: 1px solid #ccc;
float: left;
margin: 4px 0;
padding: 28px 28px 0;
position: relative;
}
.minigallery-stage {
min-height: 7px;
padding-bottom: 8px;
margin-bottom: 5px;
background: url(../i/image.png) no-repeat center bottom;
}
.minigallery-stage a {
border: 1px solid #9f1f65;
position: relative;
display: block;
overflow: hidden;
}
.minigallery-stage a img {
border: 1px solid #fff;
}
.minigallery-stage a:hover img {
border: 1px solid #ddd;
}
.minigallery-tools-wrap {
margin: auto;
text-align: center;
}
.minigallery-tools-wrap * {
font-size: 14px;
line-height: 1.6em;
font-style: normal;
}
.minigallery-tools a {
float: left;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
background-color: #efefef;
padding: 0 7px;
width: 44px;
}
.minigallery-tools a:hover {
background-color: #ccc;
}
.minigallery-tools a:focus {
-moz-outline: 0;
outline: 0;
}
.minigallery-prev {
text-align: left;
}
.minigallery-next {
text-align: right;
}
.minigallery-count {
float: left;
width: 53px;
}
.minigallery-cap {
color: #666;
margin: 10px auto 8px;
clear: both;
}