﻿html, body, div, p, ul, form, fieldset, h1, h2, h3, h4, h5, h6   { margin: 0; padding: 0; list-style: none; }
body { margin: 0; padding: 0; font-family: Arial, Helvetica, Sans-Serif; color: #fff; font-size: 14px; width: 100%; background: #202020; }
img { vertical-align: middle; }
h1 { font-size: 2.429em; margin: 0 0 .411em; font-weight: normal; } /*font-size: 1.286em; margin: 0 0 .722em*/
p.perex { font-size: 1.214em; line-height: 1.176em; margin: 0 0 1em; }
p { margin: 0 0 1.286em; }
a { color: #fff; text-decoration: underline; }
table { width: 100%; border-collapse: collapse; margin: 0 0 1.286em; }
thead td, thead th { padding: .45em .5em; border: 1px solid #fff; font-size: 1em; font-weight: bold; }
td, th { padding: .25em .5em; border: 1px solid #fff; font-size: .857em; }
td p, th p { margin: 0; }
tfoot td, tfoot th { font-size: .714em; }
ol { padding: 0 0 0 1em; margin: 0 0 1.286em; }
ul { margin: 0 0 1.286em; }
ul li { position: relative; padding: 0 0 0 1em; }
ul li:before { background: url("https://static-css.pencdn.cz/css/images/gallery.png") no-repeat -40px 0; content: ''; display: block; position: absolute; top: .5em; left: 0; width: 3px; height: 3px; }

.cols:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; position: relative; }

#view { margin: 1.333em 0; }
.main { min-width: 320px; max-width: 800px; margin: 0 auto; position: relative; padding: 0 5px; }
.right { text-align: right; }
.left { text-align: left; }
.center { text-align: center; }
.hidden { display: none; }
.fakeLink { cursor: pointer; text-decoration: underline; }
.bold { font-weight: bold; }
.noMargin { margin: 0; }
.cc-info { font-size: .8em; margin: 1em 0; }

#navigation { }
#adWrap { display: none; }

.cols .col1 { width: 32%; float: left; margin: 0 2% 0 0; }
.cols .col2 { width: 32%; float: left; margin: 0 2% 0 0; }
.cols .col3 { width: 32%; float: right; }

.imgItem { margin: 0 0 20px; text-align: center; }
.imgItem img { max-width: 100%; border: 0; }
.imgItem img:hover { outline: 3px solid #d92429; }

#close { width: 40px; height: 40px; display: inline-block; background: url("https://static-css.pencdn.cz/css/images/gallery.png") -80px 0; }
#close:hover { background-position: -120px 0; }

.sliderBg { width: 258px; height: 13px; display: inline-block; background: url("https://static-css.pencdn.cz/css/images/gallery.png") 0 -80px; vertical-align: middle; }
.ui-slider-handle { width: 28px; height: 13px; display: inline-block; background: url("https://static-css.pencdn.cz/css/images/gallery.png") -80px -40px; cursor: pointer; position: absolute; }
.ui-slider-handle .ui-slider-actual { display: inline-block; text-align: center; width: 100%; margin: .571em 0 0; }
.prev { width: 40px; height: 40px; display: inline-block; background: url("https://static-css.pencdn.cz/css/images/gallery.png") 0 0; float: left; }
.prev:hover { cursor: default; }
.prev.active { cursor: pointer; }
.prev.active:hover { background-position: -40px 0; }
.next { width: 40px; height: 40px; display: inline-block; background: url("https://static-css.pencdn.cz/css/images/gallery.png") 0 -40px; float: right; }
.next:hover { cursor: default; }
.next.active { cursor: pointer; }
.next.active:hover { background-position: -40px -40px; }
.share { width: 40px; height: 40px; display: inline-block; background: url("https://static-css.pencdn.cz/css/images/gallery.png") -160px 0; vertical-align: middle; }
.thubm { width: 40px; height: 40px; display: inline-block; background: url("https://static-css.pencdn.cz/css/images/gallery.png") -120px -40px; vertical-align: middle; margin: 0 0 0 10px; }

#paging { position: relative; }
#paging .info { text-align: center; }
#paging .pager { width: 378px; margin: 0 auto; }
#slider { float: left; margin: 0 20px; line-height: 40px; width: 230px; position: relative;}

#imageListing { position: relative; }

#shareWrap { display: none; }
#imageListing .pager { width: 255px; margin: 0 auto 10px auto; text-align: center; line-height: 40px; }

/*.imageDetail { max-width: 800px; max-height: 535px; display: table-cell; text-align: center; vertical-align: middle; background: #2c2c2c; }*/
#imageDetail { max-width: 800px; height: 234px; line-height: 230px; text-align: center; background: #2c2c2c; }
.detail { max-width: 100%; max-height: 100%; }
.imageDesc { margin: 0.714em 0 0 0; padding: 1.429em 1.429em; background: #0f0f0f; }
.imageDesc h1 { font-size: 2em; margin: 0 0 .3em; }
.imageDesc h2 { font-size: 1.5em; margin: 0 0 .411em; }
.imageDesc p { line-height: 1.4em; }

@media screen and (min-width: 350px) {
    #imageDetail { height: 267px; line-height: 265px; }
}

@media screen and (min-width: 400px) {
    #imageDetail { height: 334px; line-height: 330px; }
}

@media screen and (min-width: 500px) {
    #imageDetail { height: 401px; line-height: 400px; }
}

@media screen and (min-width: 600px) {
    #imageDetail { height: 468px; line-height: 460px; }
    #paging .info { position: absolute; line-height: 40px; text-align: left; }
}

@media screen and (min-width: 700px) {
    #imageDetail { height: 535px; line-height: 530px; }
    #shareWrap { display: block; position: absolute; right: 0; top: 0; line-height: 40px; }
    #shareIcons { background: #fff; width: 120px; height: 44px; line-height: 44px; position: absolute; top: 40px; }
    #fb { width: 21px; height: 21px; display: inline-block; background: url("https://static-css.pencdn.cz/css/images/gallery.png") 0 -93px; cursor: pointer; vertical-align: middle; margin: 0 0 0 12px }
    #fb:hover { background-position: 0 -114px; }
    #tw { width: 21px; height: 21px; display: inline-block; background: url("https://static-css.pencdn.cz/css/images/gallery.png") -25px -93px; cursor: pointer; vertical-align: middle; }
    #tw:hover { background-position: -25px -114px; }
    #g { width: 21px; height: 21px; display: inline-block; background: url("https://static-css.pencdn.cz/css/images/gallery.png") -53px -93px; cursor: pointer; vertical-align: middle; }
    #g:hover { background-position: -53px -114px; }
    #p { width: 21px; height: 21px; display: inline-block; background: url("https://static-css.pencdn.cz/css/images/gallery.png") -80px -93px; cursor: pointer; vertical-align: middle; }
    #p:hover { background-position: -80px -114px; }
}

@media screen and (min-width: 1420px) {
    #adWrap { display: block; position: absolute; right: -15px; }
    #adWrapWrap { position: absolute; left: 0; width: 300px; }
    .adHead { width: 40px; height: 7px; background: url("https://static-css.pencdn.cz/css/images/gallery.png") -80px -70px; margin: 0 0 2px; }
}
