@import url(print.css) print;
@import url(screen.css) screen;

html, body { margin: 0; padding: 0; font: 12px Verdana, sans-serif; background: white; }
a img { border: none; }

ul.images { width: 800px; padding: 0; margin: 60px auto; text-align: center; min-height: 700px; }
ul.images li { width: 160px; height: 120px; margin: 60px 0; padding: 0; display: inline-block; vertical-align: top; overflow: hidden; }
ul.images li img.foto { display: block; width: 160px; height: 120px; position: absolute; }
ul.images li span.title { display: block; width: 154px; height: 20px; background: #111; overflow: hidden; position: absolute; margin: 100px 0 0 0; text-align: left; color: #ddd; opacity: 0.6; padding: 0 3px; font-size: 12px; line-height: 20px; white-space: nowrap; text-overflow: ellipsis; }
ul.images li a { text-decoration: none; }
ul.images li div.under { position: absolute; margin: 120px 0 0 0; display: block; width: 154px; height: 100px; color: #444; font-size: 10px; overflow: hidden; text-align: left; padding: 0 3px; }
ul.images li div.under img { vertical-align: middle; }
ul.images li div.under a { text-decoration: none; color: #000; }

ul.images li img.flag { position: absolute; margin: 3px 0 0 3px; display: none; }
ul.images li:hover img.flag, ul.images li.selected img.flag { display: block; }

ul.images li span.menu { position: absolute; width: 16px; margin: 3px 0 0 141px; display: none; }
ul.images li:hover span.menu, ul.images li.selected span.menu { display: block; }

ul.squareImages { padding: 0; }
ul.squareImages li { display: inline-block; padding: 0; }
ul.squareImages li img { margin: 5px 10px 5px 0; }

div.header { width: 100%; background: #111 url(../img/world.png) repeat-x center center; border-bottom: 5px solid #444; min-height: 100px; color: #ddd; overflow: hidden; padding: 15px 0; }
div.content { width: 800px; margin: 0 auto; padding: 0; background: #eee; overflow: hidden; }
div.footer { width: 100%; background: #111; border-top: 5px solid #444; color: #ddd; padding: 15px 0; }
div.header + div.footer { border-top: none; }
div.footer p.copyright { text-align: right; clear: both; font-size: 8px; }
div.footer p.copyright a { color: inherit; text-decoration: inherit; }
div.footer p.stat { line-height: 20px; }
div.footer p.stat img { vertical-align: middle; }
div.footer p.legend img { vertical-align: middle; }

div.header > div, div.footer > div { width: 800px; margin: 0 auto; }
div.header h1 { margin: 0 0 0 80px; }
div.header a { color: inherit; font: inherit; text-decoration: inherit; }
div.header a:hover { color: white; text-decoration: underline; }
div.header p.description { margin: 7px 0 0 80px; column-count: 2; }
div.header img.me { width: 64px; height: 64px; border: 3px solid #444; float: left; margin: 12px 0 0 -80px; }
div.header strong, div.footer strong { color: #ccc; }
div.header h2 img { vertical-align: middle; }
div.header .ads { margin: 10px 0 10px 80px; }

div.content > div { margin: 1em 2.5em 4em; clear: hidden; }

a.map { display: inline-block; width: 16px; height: 16px; background: url(../img/map.png) no-repeat; color: transparent; overflow: hidden; text-indent: 20px; }
a.zoom { display: inline-block; width: 16px; height: 16px; background: url(../img/zoom.png) no-repeat; color: transparent; overflow: hidden; text-indent: 20px; }
a.delete { display: inline-block; width: 16px; height: 16px; background: url(../img/delete.png) no-repeat; color: transparent; overflow: hidden; text-indent: 20px; }

span.progress { display: block; width: 85px; height: 46px; color: #444; font-size: 16px; font-weight: bold; padding: 24px 55px 0 0; text-align: right; vertical-align: top; float: right; margin: 0 0 25px 25px; }
span.progress, span.progress.p0 { background: url(../img/progress/00.png) no-repeat; }
span.progress.p10 { background: url(../img/progress/10.png) no-repeat; }
span.progress.p20 { background: url(../img/progress/20.png) no-repeat; }
span.progress.p30 { background: url(../img/progress/30.png) no-repeat; }
span.progress.p40 { background: url(../img/progress/40.png) no-repeat; }
span.progress.p50 { background: url(../img/progress/50.png) no-repeat; }
span.progress.p60 { background: url(../img/progress/60.png) no-repeat; }
span.progress.p70 { background: url(../img/progress/70.png) no-repeat; }
span.progress.p80 { background: url(../img/progress/80.png) no-repeat; }
span.progress.p90 { background: url(../img/progress/90.png) no-repeat; }
span.progress.p100 { background: url(../img/progress/100.png) no-repeat; }

span.days { display: block; width: 70px; height: 70px; background: #444; color: #111; text-align: center; line-height: 20px; vertical-align: top; font-weight: bold; float: right; }
span.days strong { display: block; background: #111; color: #444; margin: 2px 3px; font-size: 16px; padding: 2px 0; }

div.cloud { position: absolute; width: 250px; min-height: 300px; background: #111 url(../img/world.png) no-repeat 12% 18%; z-index: 1; border: 3px solid #444; border-radius: 10px; color: #ddd; }
div.cloud:before { content: url(../img/corner.png); position: absolute; margin: 35px 0 0 250px; }
div.cloud.left:before { content: url(../img/corner-left.png); position: absolute; margin: 35px 0 0 -18px; }
div.cloud h2 { margin: 5px 10px;}
div.cloud p { margin: 2px 10px;}

form.comments { margin: 5px 10px; padding: 0; }
form.comments fieldset { margin: 0; padding: 0; border: none; }
form.comments input[type=text] { display: block; border: 1px solid #444; color: #ddd; background: none; margin: 3px 0; width: 100%; font: 11px Verdana, sans-serif; }
form.comments textarea { display: block; border: 1px solid #444; color: #ddd; background: none; height: 40px; margin: 3px 0; width: 100%; font: 11px Verdana, sans-serif; }
form.comments input[type=submit] { display: block; border: 1px solid #444; color: #ddd; background: none; margin: 3px 0; float: right; }
form.comments input[name=name] { background: url(../img/user.png) no-repeat 2px center; text-indent: 20px; }

ul.comments { padding: 0; margin: 2px 10px; }
ul.comments li { list-style: none; margin: 7px 0; }
ul.comments a, dl.comments a { color: inherit; text-decoration: underline; }

p.info { width: 100%; border-bottom: 2px solid olive; text-align: center; color: olive; background: #fffacd; margin: 0; padding: 1ex 0; }
p.error { width: 100%; border-bottom: 2px solid #7f0000; text-align: center; color: #7f0000; background: #ffb6c1; margin: 0; padding: 1ex 0; }
div.image-panel { padding: 60px 0 30px 400px; }
div.image-panel img.foto { float: left; margin-left: -400px; border: 3px solid #444; clear: left; }
div.image-panel img.foto + span.foto { display: block; float: left; margin-left: -400px; clear: left; font-size: smaller; width: 350px; }
div.image-panel div.underFoto { display: block; float: left; margin-left: -400px; clear: left; width: 370px; }
div.image-panel form.comments { margin: 5px 0; }
div.image-panel ul.comments { margin: 2px 0; }

p.icons > a, p.icons > img, p.icons > span > a, p.icons > span > img { margin: 0 8px 0 0; }


div.banner.wgorach { float:left; width:180px; margin:0 1em 0 0; }
div.banner.wgorach p { margin: 0 0 1px 0; }

img.qr-code { margin: 20px 0 10px 0; float: right; }
.printonly { display: none; }

ul.gallery { margin: 6px 0; padding: 0; }
ul.gallery li { display: block; float: right; clear: right; margin: 6px 0 6px 12px; padding: 0; }
ul.gallery li img { width: 140px; height: 140px; }

div.content .ads { width: 320px; margin: 0; padding: 0 0 14px 0; float: left; }
div.content p a { text-decoration: underline; color: inherit; }
div.content p a:hover { text-decoration: none; color: #444; }

@media (max-width: 800px) {
    *{box-sizing:border-box;}
    html, body { font-size: 16px; line-height:1.6;}
    div.header > div, div.footer > div{width:100vw;padding:0 1ex;}
    div.header h1{margin:0;}
    div.header img.me{display:none;}
    div.header p.description{padding:0;margin:0;column-count:1;}
    div.image-panel {padding:0;}
    div.image-panel div.underFoto{width:100%;margin:0;float:none;}
    div.image-panel img.foto{margin:0;float:none;max-width:100%;}
    span.menu{display:block;margin-left:-10px;}
    span.menu>a,span.menu>img{padding:10px;margin:0 20px 0 0;vertical-align:middle;display:inline;}
    span.menu>a{background-position:10px center;padding-left:35px;white-space:nowrap;}
    p.icons iframe{display:block;margin:1em 0 0;}
    form.comments input[type=text]{height:2.5em;}
    form.comments textarea{height:6em;}
    form.comments input[type=submit]{padding:1ex 5ex;}
    div.footer p.copyright {font-size: 0.9rem;text-align: left;}
    div.banner.wgorach {float:none;width: auto;}
    p.legend strong {display:block;}
    span.progress,span.progress *{box-sizing:content-box;}
    span.progress{float:none;display:block;}
    div.content{width:100%;padding:0 1ex;}
    ul.images li{width:100%;float:none;height:auto;margin:1ex 0;}
    ul.images li img.foto{position:static;}
    ul.images li span.title{position:static;height:auto;width:100%;margin:0;opacity:1;background:transparent;color:#444;padding:0;}
    ul.images li:hover span.menu,ul.images li.selected span.menu{display:none;}
    div.header .ads{margin:10px 0;}
}