/* ------------------------------------------ */
/* Webova galerie Azael --------------------- */
/* Zakladni styly --------------------------- */
/* ------------------------------------------ */



/* Reset css
----------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
body {line-height: 1; color: black; background: #fff;}
ol, ul {list-style: none;}
table {border-collapse: collapse; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
blockquote, q {quotes: none;}
:focus {outline: 0;}
ins {text-decoration: none;}
del {text-decoration: line-through;}



/* Basic formatting
----------------------------------------------- */
html {height: 100%;}
body {color: #000; font: 16px/1em 'Open Sans', Raleway, Arial, "Trebuchet MS", Verdana; height: 100%; background: #fff; font-weight: 500;}

a, a:visited {color: #000; text-decoration: underline; cursor: pointer;}
a:hover {color: #8d6d51; text-decoration: none;}
p {margin: 20px 0;}
strong {font-weight: bold;}
em {font-style: italic;}

input[type="submit"] {cursor: pointer;}

.clear {clear: both;}
.clear-10 {clear: both; padding: 8px 0 7px 0;}
.clear-20 {clear: both; padding: 10px 0;}
.left {float: left;}
.right {float: right;}
.bold {font-weight: bold;}
.no-bold {font-weight: normal; padding-left: 17px;}

.height-1 {height: 1px;}
.height-15 {height: 15px;}
.margin-0 {margin: 0;}
.padding-0 {padding: 0;}

.black {color: black;}
.blue {color: blue;}
.green {color: green;}
.grey {color: grey;}
.orange {color: orange;}
.red {color: red;}
.red2 {color: red;}

.hidden {display: none; visibility: hidden;}



/* Fonty
----------------------------------------------- */
/*
@font-face {font-family: Enge; src: url("../type/engeexpa.ttf");}
*/



/* ------------------------------------------ */
/* Webova galerie Azael --------------------- */
/* Styly galerie ---------------------------- */
/* ------------------------------------------ */



/* Save layout
----------------------------------------------- */
.blog-content {width: 100%; margin-left: 0;}



/* Debug table
----------------------------------------------- */
#debug {border-spacing: 1px; font-size: 0.69em; position: absolute; left: 0; top: 0;}
#debug td {background: #d5d5d5; padding: 5px 8px;}
#debug th {background: #aaa; font-weight: bold; padding: 5px 8px;}
#debug tr.debug-red td {font-weight: bold; color: red;}

#debugdiv {width: 90%; margin-left: 5%;}
#debugdiv h3 {font-weight: bold; color: blue; font-size: 1.5em; display: block; width: 100%; margin: 20px 0 5px;}
#debugdiv h3 span {color: red;}
#debugdiv h3 span.green {color: green;}



/* Lista
----------------------------------------------- */
.lista {float: left; margin: 10px 0 15px 0; clear: both; width: 96%; font-size: 0.75em; line-height: 2.0em;}
.lista a, .lista a:visited {text-decoration: underline;}



/* Strankovani
----------------------------------------------- */
#centering {clear: both; width: 100%; overflow: hidden; padding: 15px 0;}

#pagination {padding: 0; margin: 0 auto; list-style-type: none; float: left; position: relative; left: 50%; font-size: 0.875em;}
#pagination li {float: left; position: relative; right: 50%;}
#pagination li a {width: auto; display: block; padding: 2px 4px; text-decoration: none;}
#pagination .active {padding: 2px 4px; color: #a00000;}



/* Alerts
----------------------------------------------- */
.alert-bad {border: 0; width: calc(100% - 20px); font-size: 0.75em; padding: 10px; font-weight: bold; background: #ef3b3d; margin: 10px 0 12px 0; color: #fff; position: relative; z-index: 3;}
.alert-good {border: 0; width: calc(100% - 20px); font-size: 0.75em; padding: 10px; font-weight: bold; background: #5fa74d; margin: 10px 0 12px 0; color: #fff; position: relative; z-index: 3;}

.alert-blue {width: calc(100% - 34px); float: left; text-align: center; background: #3472bb; color: #fff; padding: 16px; margin-top: 30px; line-height: 1.75em; border: 1px solid #3472bb;}
.alert-blue a, .alert-blue a:visited {color: #fff833; border-bottom: 1px solid #fff833; text-decoration: none;}
.alert-blue a:hover {color: #fff; border-bottom: 1px solid #fff; text-decoration: none;}

.alert-grey {width: calc(100% - 34px); float: left; text-align: left; background: #fff; color: #000; padding: 8px 16px; margin-top: 10px; line-height: 1.5em; font-size: 0.875em; border: 1px solid #000;}
.alert-grey strong span {width: auto; display: inline; font-size: 2.125em; color: #000; position: relative; top: 10px;}
.alert-grey span {width: 100%; display: block; font-size: 0.875em; color: #aaa;}

.alert-sql {border: 1px dashed #f3c14a; width: 500px; font-size: 0.75em; line-height: 1.4em; padding: 5px 5px 5px 35px; background: #fffca2; margin: 10px 0 12px 0; color: #000; position: relative; z-index: 3;}
.alert-sql-highlight {border: 5px solid red;}
.alert-info {border: 0; width: calc(100% - 20px); font-size: 0.75em; padding: 10px; font-weight: bold; background: #ce6f00; margin: 10px 0 12px 0; color: #fff; position: relative; z-index: 3;}
.alert-bad a, .alert-good a, .alert-info a, .alert-bad a:visited, .alert-good a:visited, .alert-info a:visited {color: #fff; text-decoration: underline;}
.alert-bad a:hover, .alert-good a:hover, .alert-info a:hover {color: #fff;}
.align-center {position: relative; left: 50%; margin: 0 0 0 -195px; width: 410px; padding-bottom: 10px; clear: both;}
.align-left {width: 410px; padding-bottom: 10px; clear: both;}



/* Kniha navstev - editace
----------------------------------------------- */
#kniha {width: 650px; max-width: calc(100% - 50px); background: #f8f8f8; border: 5px solid #e8e8e8; font-size: 0.75em;}
#kniha input, #kniha textarea {background: #fff; border: 1px solid #ccc; color: #777;}
.posttop-comment {border: 1px solid #e3e3e3; background: #e3e3e3;}
.posttext-comment {border: 1px solid #f8f8f8; background: #f8f8f8; font-size: 0.75em;}
.post-comment-reply .posttop-comment {border: 1px solid #d5e0f6; background: #d5e0f6;}
.post-comment-reply .posttext-comment {border: 1px solid #eaf0fb; background: #eaf0fb; font-size: 0.75em;}



/* Kniha navstev
----------------------------------------------- */
#kniha {padding: 20px; margin: 10px auto 40px; overflow: hidden; position: relative; left: 0; clear: both;}
#kniha h4 {color: #7f7f7f; font-size: 1.5em; font-weight: bold; margin-bottom: 7px; padding-bottom: 0;}
#kniha p {color: #7f7f7f; font-size: 0.875em; margin: 0; padding: 0;}
#kniha p a, #kniha p a:visited {color: #525252;}
#kniha hr {border-width: 0; border-top: 1px solid #d9d9d9; height: 1px; margin: 20px 0 15px 0; padding: 0;}
#kniha .comment-input {width: 100%; margin-bottom: 4px;}
#kniha .comment-nadpis {width: calc(100% - 2px); text-align: left; padding: 7px 0 4px 2px; font-weight: bold; color: #777;}
#kniha .comment-nadpis span {margin-left: 5px; font-size: 1.25em; color: red;}
#kniha .comment-pole {width: 100%; float: left; margin-bottom: 10px;}
#kniha .comment-pole input {width: calc(100% - 10px); font-size: 1.0em; padding: 4px;}
#kniha .comment-pole input:focus {border: 1px solid #8c8c8c;}
#kniha .comment-pole-textarea textarea {height: 177px; padding: 4px; width: calc(100% - 10px);}
#kniha .comment-pole-textarea textarea:focus {border: 1px solid #8c8c8c;}
#kniha .comment-antispam {width: calc(100% - 112px); float: left;}
#kniha .comment-antispam input {width: calc(100% - 10px); font-size: 1.0em; padding: 4px;}
#kniha .comment-antispam input:focus {border: 1px solid #8c8c8c;}
#kniha .comment-kod {width: 100px; float: left; padding: 2px 0 0 5px;}
#kniha .comment-bottom {width: 100%; float: left;}
#kniha .comment-smile {float: left; width: 140px; padding: 8px 0 0 10px;}
#kniha .comment-button {float: right; font-weight: bold; width: 120px; text-align: right; margin-right: 2%;}
#kniha .comment-button input {width: 90%; padding: 5px; cursor: pointer;}
#kniha .comment-button input:hover {background: #e8e8e8; color: #c60000;}
#kniha .comment-button input:focus {color: #7e0000;}

#kniha .prvni-sloupec {width: 40%; float: left;}
#kniha .druhy-sloupec {float: right; width: 57%;}
#kniha #antispam img {position: relative; top: 5px;}
#kniha textarea {width: 100%; height: 86px; margin-bottom: 10px; position: relative; top: -1px; padding: 0;}

.slider-inbox-reply {width: 477px; font-size: 0.75em; margin: 10px;}
.slider-inbox-reply input, .slider-inbox-reply textarea {background: #fff; border: 1px solid #ccc; color: #777;}
.slider-inbox-reply .comment-input {width: 100%; margin-bottom: 4px;}
.slider-inbox-reply .comment-nadpis {width: 40%; text-align: left; padding: 7px 0 4px 2px; font-weight: bold; color: #777;}
.slider-inbox-reply .comment-nadpis span {margin-left: 5px; font-size: 1.25em; color: red;}
.slider-inbox-reply .comment-pole {width: 90%; float: left; margin-bottom: 10px;}
.slider-inbox-reply .comment-pole input {width: 98%; font-size: 1.0em; padding: 4px;}
.slider-inbox-reply .comment-pole input:focus {border: 1px solid #8c8c8c;}
.slider-inbox-reply .comment-pole-textarea textarea {}
.slider-inbox-reply .comment-pole-textarea textarea:focus {border: 1px solid #8c8c8c;}
.slider-inbox-reply .prvni-sloupec-reply {width: 40%; float: left;}
.slider-inbox-reply .druhy-sloupec-reply {float: right; width: 59%;}
.slider-inbox-reply textarea {width: 97%; height: 86px; margin-bottom: 10px;}

.slider-inbox-reply .comment-bottom {width: 100%; float: left;}
.slider-inbox-reply .comment-button {float: right; font-weight: bold; width: 136px; text-align: right;}
.slider-inbox-reply .comment-button input {width: 90%; padding: 5px; cursor: pointer;}
.slider-inbox-reply .comment-button input:hover {background: #e8e8e8; color: #c60000;}
.slider-inbox-reply .comment-button input:focus {color: #7e0000;}

.post-comment {margin: 0 0 16px 40px; width: 500px;}
.post-comment-reply {margin: 0 0 16px 70px; width: 470px; overflow: hidden;}
.posttop-comment {padding: 7px 7px 10px 7px; height: 12px;}
.username-comment {font-weight: bold; width: auto; float: left;}
.username-comment a {color: #8f8f8f; font-size: 0.75em; font-weight: normal; position: relative; top: -1px; cursor: pointer; margin-right: 2px; text-decoration: none;}
.username-comment a.order-reply {color: #9da8be;}
.username-comment a:hover {color: #000;}
.comment-reakce {color: #168ec6; text-decoration: none; display: block; padding-top: 10px; width: 150px;}
.comment-reakce-link, a.comment-reakce-link:visited {padding: 0 5px 0 9px; color: green; background: url("../img/reaction-down.gif") 0 4px no-repeat;}
.comment-reakce-who, a.comment-reakce-who:visited {color: #7f7f7f; padding-left: 9px; background: url("../img/reaction-up.gif") 0 4px no-repeat; margin-left: 5px;}
.userweb-comment {width: auto; float: left; margin-left: 10px;}
.userweb-comment-right {width: auto; float: right;}
.userweb-image {height: 20px; border: 0;}
.posttext-comment {padding: 7px; border-top: 0; text-align: left; overflow: hidden;}
.postdate-comment {float: right; margin-right: 10px; font-size: 0.75em; padding: 1px 0 0 0;}

.postimg-comment {width: 40px; float: left;}
.postbody-comment {width: 425px; float: right;}

#vypis {width: 500px; position: relative; left: 50%; margin: 0 0 0 -290px; float: left;}



/* Thumbnail
----------------------------------------------- */
.thumbnail {width: 23.5%; height: auto; float: left; text-align: left; font-size: 0.75em; position: relative; margin: 0 2% 2% 0;}
.thumbnail:nth-child(4n) {margin-right: 0;}
.thumbnail a, .thumbnail a:visited {width: 100%; height: 100%; display: block;}
.thumbnail span {width: 100%; display: block; float: left; text-align: center; padding: 10px 0; position: absolute; bottom: 0; background: #fff; opacity: 0.85; font-size: 0.875em; color: #000; font-weight: 400;}
.thumbnail img {width: 100%; border: 0px solid #000; margin: 0 0 0 0;}
.thumbnail a img, .thumbnail a:visited img {transition: 0.3s; opacity: 1;}
.thumbnail a:hover img {opacity: 0.7;}

.star {color: red; font-weight: bold;}
.star img {border: 1px solid red;}

.shadow img {border: 0;}
.shadow a, .shadow a:visited {background: #fff; border-left: 1px solid #e0e0e0; border-top: 1px solid #e0e0e0; padding: 8px 8px 3px 8px; display: block; float: left; -moz-box-shadow: 0px 1px 10px #b7b7b7; -webkit-box-shadow: 0px 1px 10px #b7b7b7; box-shadow: 0px 1px 10px #b7b7b7; -o-box-shadow: 0px 1px 10px #b7b7b7; -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#d1d1d1')"; filter: progid:DXImageTransform.Microsoft.Shadow(Strength=5, Direction=135, Color='#d1d1d1');}
.shadow span {width: 161px; display: block; float: left; text-align: center; padding-left: 1px; padding-top: 7px;}

.thumbnail-all-span {width: 500px; display: block; float: left; font-weight: bold; font-size: 0.75em; padding-top: 5px;}
.thumbnail-all-p {width: 500px; display: block; float: left; font-size: 0.75em; margin-top: 0; padding-top: 3px;}

.gallery-info {font-size: 0.75em; width: 95%; margin: 0 0 15px 2%;}



/* Vypis poslednich komentaru
----------------------------------------------- */
.comments-list {overflow: hidden; float: left; width: 600px; margin: 0 0 15px 2%;}
.comments-list-re {padding-left: 75px; width: 540px;}

.comments-list .comments-list-img {float: left; margin: 0 15px 0 0;}
.comments-list .comments-list-img img {border: 1px solid #000; width: 60px;}
.comments-list .comments-list-text {float: left; width: 520px;}
.comments-list .comments-list-text h4 {margin: 0; padding: 0 0 3px 0; font-weight: bold; font-size: 0.75em;}
.comments-list .comments-list-text h4 span {color: #aaa; font-weight: normal;}
.comments-list .comments-list-text p {margin: 0; padding: 0; font-size: 0.75em;}



/* Thumbnail - zarovnani na stred vertikalne i horizontalne
----------------------------------------------- */
.thumbnail-back {border: 1px solid #d2d2d2; margin: 0 0 10px 10px; background: #ebebeb;}
.thumbnail-back:hover {background: #cacaca;}
.posun {margin-top: 10px;}



/* Thumbnail - odkazy
----------------------------------------------- */
.thumbnail-link {width: 150px; height: 160px; float: left; text-align: center; font-size: 0.75em;}
.thumbnail-link img {border: 1px solid #000; margin: 0 0 5px 0;}

.thumbnail-link-list {width: 96%; margin-left: 2%;}
.thumbnail-link-list h4 {margin: 0; padding: 0 0 3px 0; font-weight: bold;}
.thumbnail-link-list h4 a, .thumbnail-link-list h4 a:visited {text-decoration: underline; font-size: 0.75em;}
.thumbnail-link-list h4 span a, .thumbnail-link-list h4 span a:visited {color: #828282; font-size: 0.75em; font-weight: normal; text-decoration: none;}
.thumbnail-link-list p {margin: 0 0 20px 0; padding: 0; font-size: 0.875em; color: #494949;}

.thumbnail-link-thumblist {width: 90%; margin: 0 0 15px 2%; float: left;}
.thumbnail-link-thumblist .thumbnail-link-list-img {float: left; margin: 0 15px 20px 0;}
.thumbnail-link-thumblist .thumbnail-link-list-img img {border: 1px solid #000;}
.thumbnail-link-thumblist .thumbnail-link-list-text {float: left; width: 480px;}
.thumbnail-link-thumblist .thumbnail-link-list-text h4 {margin: 0; padding: 0 0 3px 0; font-weight: bold;}
.thumbnail-link-thumblist .thumbnail-link-list-text h4 a, .thumbnail-link-thumblist .thumbnail-link-list-text h4 a:visited {text-decoration: none;}
.thumbnail-link-thumblist .thumbnail-link-list-text h4 span a, .thumbnail-link-thumblist .thumbnail-link-list-text h4 span a:visited {color: #828282; font-size: 0.75em; font-weight: normal; text-decoration: none;}
.thumbnail-link-thumblist .thumbnail-link-list-text p {margin: 0 0 20px 0; padding: 0; font-size: 0.875em;}

#links {clear: both; float: left; margin: 0; width: 95%;}
#links h3 {margin: 0 0 0 2%; padding-top: 0.3em; font-weight: bold; line-height: 2.5em; display: block; clear: both;}
#links h3.first {padding-top: 0em;}



/* Seznam uzivatelu
----------------------------------------------- */
.userlist-img {float: left; width: 160px; margin-left: 2%; padding: 0 10px 10px 0;}
.userlist-img img {border: 1px solid #000;}
.userlist-text {float: right; width: 490px; padding: 0 20px 20px 0;}
.userlist-text h1 {font-size: 1.0em; font-weight: bold; padding-bottom: 7px;}
.userlist-text h1 a, .userlist-text h1 a:visited {text-decoration: none;}
.userlist-text ul li {font-size: 0.75em; display: block; padding-bottom: 5px;}



/* Article
----------------------------------------------- */
.article {width: 100%; margin-left: 0; clear: both;}

.article h1 {font-weight: 500; font-size: 2.5em; padding: 0.31em 0 0 0; line-height: 1.25em; color: #8d6d51; letter-spacing: 1.5pt; word-spacing: 2pt;}
.article h1.h1-smaller {font-size: 1.75em;}
.article h2 {font-weight: 500; font-size: 2.0em; padding: 1.0em 0 0.25em 0; line-height: 1.25em; color: #8d6d51; letter-spacing: 1.5pt; word-spacing: 2pt;}
.article h3 {font-weight: 500; font-size: 1.75em; padding: 0.5em 0 0.35em 0; line-height: 1.25em; color: #8d6d51; letter-spacing: 1.5pt; word-spacing: 2pt;}
.article h3.h3-red {color: #ef3b3d;}
.article h4 {font-weight: 500; font-size: 1.35em; padding: 0.25em 0 1.0em 0; line-height: 1.25em; color: #8d6d51; letter-spacing: 1.5pt; word-spacing: 2pt;}
.article h4.h4-smaller {font-size: 1.0em;}
.article h5 {font-weight: 500; font-size: 0.875em; padding: 1.0em 0 0.75em 0; line-height: 1.25em; text-decoration: underline; color: #8d6d51; letter-spacing: 1.5pt; word-spacing: 2pt;}
.article h6 {font-weight: 500; font-size: 0.875em; padding: 1.0em 0 0.75em 0; line-height: 1.25em; font-style: italic; color: #8d6d51; letter-spacing: 1.5pt; word-spacing: 2pt;}

.article hr {border-width: 0; border-top: 1px solid #8D6D51; height: 1px; margin: 45px 0 30px 0; padding: 0;}

.article p {font-size: 1.06em; line-height: 1.5em; margin: 0 0 1.1em 0; font-weight: 500;}
.article p.text-brown {background: #8d6d51; color: #fff; width: calc(100% - 40px); padding: 20px;}
.article p.text-red {background: #ef3b3d; color: #fff; width: calc(100% - 40px); padding: 20px;}

.article img {max-width: 100%;}
.article pre {border: 1px dotted #000; margin: 0.75em 1.56em 0.75em 0; padding: 0.63em 0.94em; background: #fff; font-size: 0.75em; font-family: "courier new"; line-height: 1.4em; display: block; overflow-x: auto; white-space: pre-wrap; white-space: -moz-pre-wrap !important; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;}
.article blockquote {border-left: 1px dashed #000; margin: 0.75em 25px 0.75em 0; background: #d7d7d7; display: block;}
.article blockquote p {font-size: 0.875em; line-height: 1.6em; padding: 0.63em 0.94em;}

.article ul {margin: 0.75em 0 1.25em 1.56em; font-size: 1.0em; list-style: disc; float: left; display: block; width: calc(100% - 1.56em);}
.article ul li {line-height: 1.5em; float: left; width: 100%;}
.article ul li ul {margin-top: 0; margin-bottom: 0; font-size: 1.0em; list-style: circle; width: calc(100% - 1.56em);}
.article ul li ul li ul {margin-top: 0; margin-bottom: 0; font-size: 1.0em; list-style: square;}

.article ol {margin: 0.75em 0 1.25em 1.56em; font-size: 1.0em; list-style: decimal; float: left; display: block; width: calc(100% - 1.56em);}
.article ol li {line-height: 1.5em; float: left; width: 100%;}
.article ol li ol {margin-top: 0; margin-bottom: 0; font-size: 1.0em; width: calc(100% - 1.56em);}
.article ol li ol li ol {margin-top: 0; margin-bottom: 0; font-size: 1.0em; list-style: lower-latin;}

.article table {width: auto; border-collapse: collapse; font-size: 0.75em; margin: 1.0em 0 2.5em 0; border: 1px solid #888; border-right: 0;}
.article table caption {font-variant: small-caps; padding-bottom: 0.63em;}
.article table.full {width: 100%;}
.article table th {background: #e0e0e0; color: #333; padding: 0.5em; border-bottom: 1px solid #888; text-align: left; font-weight: bold; border-right: 1px solid #888;}
.article table td {border-bottom: 1px solid #888; border-right: 1px solid #888; padding: 0.5em;}

.article .table-title {padding-top: 10px; float: left; width: 100%;}
.article .table-desc, .article .table-title {font-size: 0.75em;}

.article .article-vlevo {float: left; margin: 10px; margin-left: 0; border: 1px solid #000;}
.article .article-vpravo {float: right; margin: 10px 5px 10px 10px; border: 1px solid #000;}
.article .article-text-vlevo {text-align: left;}
.article .article-text-vpravo {text-align: right;}
.article .article-text-center {text-align: center;}
.article .article-text-justify {text-align: justify;}
.article .youtube {text-align: center; padding: 20px 0;}

.article .underline {text-decoration: underline;}

.article .hover-vlevo {float: left; margin: 0 10px 3px 0;}
.article .hover-vpravo {float: right; margin: 0 0 3px 10px;}
.article span.hover-vlevo {float: left; margin: 0 10px 3px 0; display: block;}
.article span.hover-vpravo {float: right; margin: 0 0 3px 10px; display: block;}
.article span.hover-vlevo span, .article span.hover-vpravo span {font-size: 0.75em; font-style: italic; display: block; padding-top: 4px;}

.article .article-img {padding: 0 0 9px 0; background: none; border: 0; color: #000; font-style: italic; font-size: 0.75em; margin: 20px 0; width: 100%;}
.article .article-img img {margin-bottom: 7px; border: 1px solid #e3e3e3; width: 100%;}
.article .article-img span {clear: both; display: block; margin-left: 4px;}

.article .article-img-fly-left {float: left; margin: 0 25px 3px 0;}
.article .article-img-fly-right {float: right; margin: 0 0 3px 25px;}

.article .article-column-2 {column-count: 2;}
.article .article-column-3 {column-count: 3;}
.article .article-column-4 {column-count: 4;}

.social {position: relative; left: -4px; margin-top: 10px; float: left;}
.social .st_fblike_hcount {padding-right: 15px;}
.social .st_twitter_hcount {padding-right: 7px;}

.social-article {margin-left: 2%;}
.social-article span.st_fblike_hcount {position: relative; top: -3px;}
.social-article span.st_fblike_hcount, .social-article span.st_plusone_hcount, .social-article span.st_twitter_hcount, .social-article span.st_pinterest_hcount {margin-bottom: 5px; display: block; float: left; height: 22px;}

.social-foto span.st_fblike_hcount {position: relative; top: -3px;}
.social-foto span.st_fblike_hcount, .social-foto span.st_plusone_hcount, .social-foto span.st_twitter_hcount, .social-foto span.st_pinterest_hcount {margin-bottom: 5px; display: block; float: left; height: 22px;}




/* Struktura formularu v clanku
----------------------------------------------- */
form.formik {font-size: 0.875em; margin: 20px 0 30px;}
.formik label, .formik .div-checkbox, .formik .div-radio	{float: left; width: 95%; display: block; clear: left; text-align: left; cursor: pointer; font-size: 1.0em; margin-top: 10px;}
.formik label.label-checkbox, .formik label.label-radio {clear: none; width: 80%; padding-left: 5px; margin-top: 3px; margin-bottom: 5px;}
.formik .div-checkbox, .formik .div-radio {width: 100%; padding: 0 0 7px 3px; color: #333; font-weight: bold;}

.formik label.red {color: red;}
.formik label.label-radio.red {width: calc(80% - 22px); margin-left: 22px;}

.formik textarea, .formik input, .formik select, .formik button, .formik optgroup {margin-top: 0px; padding-left: 3px;}
.formik select {margin-top: 5px; margin-left: 3px;}
.formik textarea, .formik input.input-input {padding: 7px 3px; width: calc(100% - 6px);}
.formik textarea, .formik input.input-antispam {padding: 3px; width: 150px; margin-right: 7px;}
.formik textarea, .formik input.input-checkbox, .formik input.input-radio {float: left; margin-top: 4px;}


.formik textarea {height: 80px; width: 97%; margin-bottom: 7px;}
.formik label.input-text {padding: 3px 0 10px 3px;}
.formik input.button {cursor: pointer; font-weight: bold; position: relative; left: 0em; margin-top: 15px;}

.formik input.button {font-family: 'Open Sans'; font-size: 1.0em; background: #8e6e51; border: 0; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; color: #fff; font-weight: 600; text-transform: uppercase; padding: 8px 20px; margin: 10px 0 0 0; min-width: 200px; transition: 0.3s; -webkit-box-shadow: 3px 3px 10px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 3px 3px 10px 0px rgba(50, 50, 50, 0.75); box-shadow: 3px 3px 10px 0px rgba(50, 50, 50, 0.75);}
.formik input.button:hover {background: #7b593b; -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.25); -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.25); box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.25);}

.formik img {position: relative; top: 5px;}
.formik h3 {font-size: 1.0em; padding-top: 25px;}
.formik p {font-size: 1.0em;}



/* Barvy formularu v clanku
----------------------------------------------- */
.formik label	{color: #333; font-weight: bold;}
.formik label span, .formik div span {color: red; font-size: 1.5em;}	
.formik input.input-input, .formik textarea {border: 1px solid #aaa;}
.formik textarea:focus, .formik input.input-input:focus {border: 1px solid #000;}
.formik select {background: #fff; color: #000; border: 1px solid #aaa;}
.formik option {background: #fff; color: #000;}
.formik optgroup {background: #ccc; color: #000;}



/* Uprava typografie
----------------------------------------------- */
.uprava-typografie {font-size: 1.0em;}



/* Anketa
----------------------------------------------- */
.poll {border: 1px dashed #aaa; padding: 10px; width: 300px; margin: 7px 0 20px 0; float: left; font-size: 0.875em;}
.poll strong {line-height: 1.4em;}
.poll .voted {color: red; font-size: 0.75em; line-height: 2.0em;}
.poll hr {border-width: 0; border-top: 1px dashed #aaa; height: 1px;}
.poll ul {margin-left: 0;}
.poll ul li {display: block; list-style: none; margin-bottom: 10px;}
.poll .poll-img {border: 0; display: block; height: 10px; margin: 2px 0 10px 0; width: 1%;}
.poll form input {border: 0; background: none; border-bottom: 1px solid #000; cursor: pointer; padding: 0; margin: 0; font-size: 1.0em; font-family: Arial, "Trebuchet MS", Verdana; overflow: visible; width: auto; text-align: left;}
.poll form input:hover {border: 0; margin-bottom: 1px;}

.poll-sidebar {width: 190px; font-size: 0.75em;}
.poll-sidebar strong {margin-bottom: 10px; display: block; float: left; font-size: 1.0em;}
.poll-sidebar ul {clear: both;}
.poll-sidebar hr {border-width: 0; border-top: 1px dashed #aaa; height: 1px;}
.poll-sidebar .voted {font-size: 0.875em;}



/* Blog
----------------------------------------------- */
.blog {margin: 0 0 20px 0; width: 100%; float: left;}
.blog-img {width: 150px; float: left;}
.blog-img a {border: 0; display: block; width: 100%;}
.blog-img a:hover {}
.blog-img img {width: 100%;}
.blog-text {width: calc(100% - 170px); float: left; margin-left: 20px;}
.blog h3 {margin: 0; padding: 0 0 3px 0;}
.blog h3 a, .blog h3 a:visited {font-weight: bold; font-size: 1.0em; text-decoration: none;}
.blog span {font-style: italic; padding-bottom: 7px; display: block; font-size: 0.75em;}
.blog span strong {text-decoration: underline; font-weight: normal;}
.blog p {margin: 0; padding: 5px 0 0 0; font-size: 0.75em; border-top: 1px dashed #a2a2a2; line-height: 1.75em;}



/* Fotokosik
----------------------------------------------- */
.fotokosik p {font-size: 0.75em; margin-top: 0; line-height: 1.5em;}
.fotokosik .thumbnail span a, .fotokosik .thumbnail span a:visited {color: red; text-decoration: none;}
.fotokosik .thumbnail span a:hover {color: #000;}

.fotokosik label {width: 100%; display: block; float: left; padding: 0 0 4px 0;}
.fotokosik input, .fotokosik textarea {width: 90%; border: 1px solid #8f8f8f; margin-bottom: 15px; padding: 2px;}
.fotokosik input:focus, .fotokosik textarea:focus {border: 1px solid #000;}
.fotokosik textarea {height: 130px; position: relative; top: -1px; width: 100%;}

.fotokosik input.button {font-weight: bold; border: 1px solid #514743; padding: 5px 10px; width: 170px; float: right;}
.fotokosik input.button:hover {cursor: pointer;}

.fotokosik .fotokosik-left {width: 40%; float: left; font-size: 0.75em;}
.fotokosik .fotokosik-right {width: 57%; float: left; font-size: 0.75em;}

#box-fotokosik {background: url("../img/basket.png") 0 5px no-repeat #d3ffbf; border: 1px dashed #7ef24b; padding: 10px 10px 10px 46px; margin: 0 0 10px 0; float: left; width: 157px; font-size: 0.75em;}



/* Socialni site
----------------------------------------------- */
.addthis_toolbox {padding: 7px 0 15px 4px;}
.addthis_button_tweet {margin-right: 16px;}

#twtr-widget-1 {float: left; overflow: hidden;}

#twtr-widget-1 .twtr-hd {padding-bottom: 0;}
#twtr-widget-1 .twtr-hd a.twtr-profile-img-anchor {float: left;}
#twtr-widget-1 .twtr-hd h3 {margin: 0; display: block; float: left; visibility: hidden;}

#socialmenu {position: fixed; left: 0; top: 12px; width: 100%; text-align: center; z-index: 99;}
#socialmenu #socialmenuin {margin: 0 auto; width: 1388px;}
#socialmenu #socialmenuin div {margin-right: 3px; float: right; position: relative; z-index: 6;}
#socialmenu #socialmenuin div a {padding: 0;}
#socialmenu #socialmenuin div a img {width: 24px; opacity: 0.5; transition: 0.3s;}
#socialmenu #socialmenuin div a:hover img {opacity: 1.0;}



/* Vlajky
----------------------------------------------- */
#flag {position: absolute; left: 0; top: 89px; width: 100%; text-align: center;}
#flag #flagin {margin: 0 auto; width: 1200px;}
#flag #flagin a, #flag #flagin a:visited {display: block; margin-right: 3px; float: right; position: relative; z-index: 6;}



/* Image
----------------------------------------------- */
#image {width: 100%; text-align: center;}
#image img {border: 0px solid #000; max-height: 85vh; max-width: 96%;}
#image img.photography {border: 0; width: 662px;}
#image img.photography-small {border: 0;}
#image #sipky {width: 276px; margin: 20px auto; height: 25px; font-size: 0.875em;}
#image #sipky a, #image #sipky a:visited {text-decoration: none;}
#image #sipky .vlevo {width: 90px; float: left; height: 23px; text-align: right;}
#image #sipky .vpravo {width: 90px; float: left; height: 23px; text-align: left;}
#image #sipky .zpet {width: 90px; float: left; height: 23px;}

#info {width: 660px; margin: 20px auto; text-align: left; padding-bottom: 30px; overflow: hidden;}
#info h1 {float: left; display: block; font-weight: bold; line-height: 1.5em; margin: 7px 0; border-bottom: 0px dashed #aaa; width: 100%; padding: 0 0 5px 0; font-size: 1.125em;}
#info p {margin: 7px 0; line-height: 1.5em; font-size: 0.875em;}
#info p .image-facebook {background: url("../img/facebook.png") no-repeat; padding: 0 15px 0 22px;}
#info p .image-twitter {background: url("../img/twitter.png") no-repeat; padding: 0 15px 0 22px;}
#info p .image-delicious {background: url("../img/delicious.png") no-repeat; padding: 0 15px 0 22px;}
#info p .image-gplus {float: right; overflow: hidden; display: block; width: 202px; position: relative; top: 3px;}





/* Plynula zmena pozadi
----------------------------------------------- */
.barvy {clear: both; cursor: pointer; margin: 0 auto;}
.barvy td {width: 20px; height: 20px;}





/* Google mapa
----------------------------------------------- */
#map_canvas {width: 640px; height: 600px; border: 1px solid #000; width: 96%; margin-left: 2%; margin-bottom: 20px;}
#map_canvas strong {color: #000;}
#map_canvas p {color: #000;}




/* Cluster
----------------------------------------------- */
#map {width: 100%; height: 700px;}

#cluster-panel {width: 0; height: 0; visibility: hidden;}
#cluster-markerlist {height:0; margin:0; overflow: auto;}

.cluster-info {width: 170px;}
.cluster-info h3 {font-weight: bold; display: block; padding-bottom: 7px; font-size: 0.75em; width: 150px; line-height: 1.5em;}
.cluster-info img {border: 0;}
.cluster-info .cluster-info-img {height: 150px; width: 150px;}




/* Menu galerie
----------------------------------------------- */
.gallery-menu {font-size: 0.75em; padding-bottom: 1px; border: 0; background: none; margin-bottom: 10px; float: left; width: 100%;}

.gallery-menu li {border: 0;}
.gallery-menu li.last {border: 0;}
.gallery-menu li a {text-decoration: none; display: block; padding: 6px 0; padding-left: 0;}
/*.gallery-menu li li a:before {content:  "– ";}*/
.gallery-menu li a:hover {color: #000;}
.gallery-menu li a.current, .gallery-menu li a.current-up {font-weight: bold;}

.gallery-menu li li a {padding-left: 20px;}
.gallery-menu li li li a {padding-left: 40px;}
.gallery-menu li li li li a {padding-left: 60px;}
.gallery-menu li li li li li a {padding-left: 80px;}



/* Menu galerie - background
----------------------------------------------- */
.menu-content {width: 172px; float: left; overflow: hidden; background: url("../images/menu-content.jpg") repeat-y #33f3ff;}
.menu-content .menu-top {width: 172px; height: 21px; float: left; background: url("../images/menu-top.jpg") no-repeat #fffd33;}
.menu-content .menu-bottom {width: 172px; height: 21px; float: left; background: url("../images/menu-bottom.jpg") no-repeat #85ff33;}



/* Barevne kategorie
----------------------------------------------- */
#box-color {float: left;}
#box-color a, #box-color a:visited {width: 15px; height: 15px; float: left; margin-right: 2px; display: block; text-decoration: none;}



/* Mracno klicovych slov
----------------------------------------------- */
#cloud {width: 193px; padding: 7px 10px 7px 7px; float: left; line-height: 1.6em; font-size: 1.0em;}
#cloud a {float: left; display: block; padding: 0 3px;}
#cloud a.key-low {font-size: 0.69em;}
#cloud a.key-middle {font-size: 1.0em;}
#cloud a.key-high {font-size: 1.25em;}



/* Prilohy k clankum
----------------------------------------------- */
h4.prilohy {font-weight: bold; font-size: 1.0em; width: 100%; padding-top: 7px; margin-left: 0;}
#attach {width: 100%; margin: 12px 0 30px 0; float: left; font-size: 0.75em;}
#attach li {line-height: 2.0em;}
#attach li span {color: grey;}
#attach li a {padding-left: 25px;}
#attach li.ext-ai {background: url("../img/ext_ai.png") 1px 4px no-repeat;}
#attach li.ext-avi {background: url("../img/ext_avi.png") 1px 4px no-repeat;}
#attach li.ext-bmp {background: url("../img/ext_bmp.png") 1px 4px no-repeat;}
#attach li.ext-doc {background: url("../img/ext_doc.png") 1px 4px no-repeat;}
#attach li.ext-docx {background: url("../img/ext_docx.png") 1px 4px no-repeat;}
#attach li.ext-exe {background: url("../img/ext_exe.png") 2px 4px no-repeat;}
#attach li.ext-gif {background: url("../img/ext_gif.png") 1px 4px no-repeat;}
#attach li.ext-html {background: url("../img/ext_html.png") 0 4px no-repeat;}
#attach li.ext-jpg {background: url("../img/ext_jpg.png") 0 4px no-repeat;}
#attach li.ext-js {background: url("../img/ext_js.png") 2px 4px no-repeat;}
#attach li.ext-mp3 {background: url("../img/ext_mp3.png") 1px 4px no-repeat;}
#attach li.ext-other {background: url("../img/ext_other.png") 1px 4px no-repeat;}
#attach li.ext-pdf {background: url("../img/ext_pdf.png") 0 4px no-repeat;}
#attach li.ext-php {background: url("../img/ext_php.png") 0 4px no-repeat;}
#attach li.ext-png {background: url("../img/ext_png.png") 0 4px no-repeat;}
#attach li.ext-psd {background: url("../img/ext_psd.png") 0 4px no-repeat;}
#attach li.ext-rar {background: url("../img/ext_rar.png") 1px 4px no-repeat;}
#attach li.ext-tif {background: url("../img/ext_tif.png") 1px 4px no-repeat;}
#attach li.ext-ttf {background: url("../img/ext_ttf.png") 1px 4px no-repeat;}
#attach li.ext-xls {background: url("../img/ext_xls.png") 1px 4px no-repeat;}
#attach li.ext-xlsx {background: url("../img/ext_xlsx.png") 1px 4px no-repeat;}
#attach li.ext-zip {background: url("../img/ext_zip.png") 1px 4px no-repeat;}



/* Registrace
----------------------------------------------- */
#registrace fieldset {border: 1px solid #aaa; width: 703px; padding: 10px 10px 20px 10px; margin: 0 0 25px 0; float: left;}
#registrace legend {padding: 0 3px; text-align: center; font-weight: bold; margin-bottom: 0.1em;}
#registrace .registrace-left {float: left;}
#registrace .registrace-left .change-checkbox {font-size: 0.75em; padding: 0 0 7px 103px; clear: both;}
#registrace .registrace-left .change-checkbox label {position: relative; top: -2px;}
#registrace .registrace-left .change-checkbox a {text-decoration: none;}
#registrace .registrace-left .change-checkbox img {position: relative; top: 4px; padding-left: 5px;}
#registrace .registrace-left .change-checkbox strong {padding-left: 5px;}
#registrace .registrace-left .change-checkbox img.edit-adress {position: relative; top: 7px;}
#registrace .registrace-left .change-checkbox img.delete-adress {position: relative; top: 3px; padding: 0;}
#registrace .registrace-left .change-checkbox img.primary-adress {position: relative; top: 3px;}
#registrace .registrace-help {float: left; border: 1px solid #e2d64d; background: #fff9b1; width: 270px; padding: 7px; margin: 5px 0 15px 0; font-size: 0.75em;}
#registrace .registrace-help p {padding-bottom: 10px; margin: 0;}
#registrace .registrace-vop {float: left; border: 1px solid #769bea; background: #cbd9f7; width: 708px; padding: 7px; margin: 5px 0 15px 0; font-size: 0.75em;}
#registrace .registrace-newsletter {float: left; border: 1px solid #f6d240; background: #ffe88e; width: 708px; padding: 7px; margin: 5px 0 15px 0; font-size: 0.75em;}
#registrace .registrace-newsletter input {position: relative; top: 2px; margin-right: 10px;}



/* Formulare
----------------------------------------------- */
.form .input-cell {width: 400px; text-align: left;}
.input-cell-login {border: 1px solid red; width: 195px;}
.form .input-textarea {width: 400px; text-align: left;}
.form .input-text, .form .input-text-selectbox {width: 100px; float: left; text-align: right; position: relative; top: 9px; font-size: 0.75em; font-weight: bold; padding: 0 7px 0 0;}

.form .input-input {width: 270px; float: left; text-align: left;}
.form .input-input input {height: 20px; border: 1px solid #aaa; background: #efefef; padding: 3px 3px 0 3px; width: 270px;}
.form .input-input select {border: 1px solid #aaa; background: #efefef; width: 200px; margin: 7px 0;}
.form .input-input textarea {height: 150px; width: 370px; border: 1px solid #aaa; background: #efefef; padding: 3px 3px 0 3px}

.form .em-upozorneni {color: red; margin: 10px 0; float: left; font-size: 0.75em; width: 640px;}
.form .input-input input.field {border: 1px solid #666; margin: 5px 0;}
.form .input-input input.obligatory {background: #fcffad; border: 1px solid #666; margin: 5px 0;}
.form .input-input input:focus {border: 1px solid #000;}
.form .input-input input.obligatory:focus {border: 1px solid #000; background: #fbff87;}

.form-login .input-cell {width: 190px; float: left;}
.form-login .input-text {width: 50px; font-size: 1.0em; font-weight: normal;}
.form-login .input-input {width: 125px;}
.form-login .input-input input {width: 115px; background: #fff;}
.form-login .input-button {width: 125px; float: left;}
.form-login .input-button input {float: right; margin-right: 7px; margin-top: 3px;}

.input-confirmation {display: none;}



/* Password form
----------------------------------------------- */
#password-form fieldset {border: 1px solid #aaa; width: 90%; padding: 10px; margin: 0 0 25px 2%; float: left;}
#password-form legend {padding: 0 3px; text-align: center; font-weight: bold; margin-bottom: 0.1em;}

#password-form .registrace-left {float: left; width: 40%; padding-right: 15px;}

#password-form .registrace-left .input-cell {float: left; width: 100%;}
#password-form .registrace-left .input-text {width: 28%; padding: 0; padding-right: 2%;}
#password-form .registrace-left .input-input {width: 70%; padding: 0;}
#password-form .registrace-left .input-button {width: 70%; padding: 0; float: right;}
#password-form .registrace-left .input-input input {position: relative; top: 6px; width: 95%;}
#password-form .registrace-left .input-button input {float: right; margin: 15px 6% 0 0; cursor: pointer; width: 100px;}

#password-form .registrace-help {float: left; border: 1px solid #e2d64d; background: #fff9b1; width: 53%; padding: 7px; margin: 5px 0 15px 0; font-size: 0.75em;}
#password-form .registrace-help p {padding-bottom: 10px; margin: 0;}



/* Search box
----------------------------------------------- */
#box-search {background: #d3ffbf; border: 1px dashed #7ef24b; padding: 10px; margin: 0 0 10px 0; float: left; width: 193px;}
#box-search input.search-input {height: 18px; border: 1px solid #aaa; padding: 0 3px; width: 115px; background: #fff; margin-right: 3px; float: left;}
#box-search input.search-button, .search-where input.where-submit {border: 1px solid #aaa; background: #efefef; cursor: pointer;}
#box-search input.search-button:hover, .search-where input.where-submit:hover {background: #aaa; color: #fff;}

.search-lista {float: left;}
.search-where {float: right; line-height: 1.5em;}
.search-where label {margin-left: 10px;}

.search-where .where-nadpis {font-weight: bold; margin-right: 10px;}
.search-where .where-submit {margin-left: 10px; padding: 0 5px;}

.search-where #where_foto {position: relative; top: 2px;}
.search-where #where_article {position: relative; top: 2px;}

.openBtn {background: none; border: none; cursor: pointer; position: absolute; left: 50%; top: 6px; margin: 0 0 0 400px; padding: 0; width: 24px; height: 24px; opacity: 0.5; transition: 0.3s; display: block;}
.openBtn img {width: 24px; height: 24px;}
.openBtn:hover {background: none; opacity: 1;}
.overlay {height: 100%; width: 100%; display: none; position: fixed; z-index: 999; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9);}
.overlay-content {position: relative; top: 46%; width: 80%; text-align: center; margin-top: 30px; margin: auto;}
.overlay .closebtn {position: absolute; top: 55px; right: 45px; font-size: 60px; cursor: pointer; color: white;}
.overlay .closebtn:hover {color: #ccc;}
.overlay input[type=text] {padding: 15px; font-size: 17px; border: none; float: left; width: calc(80% - 30px); background: white;}
.overlay input[type=text]:hover {background: #f1f1f1;}
.overlay button {float: left; width: calc(20% - 30px); padding: 15px; background: #ddd; font-size: 17px; border: none; cursor: pointer;}
.overlay button:hover {background: #bbb;}



/* Subscribe box
----------------------------------------------- */
#box-subscribe {background: #d3ffbf; border: 1px dashed #7ef24b; padding: 5px 10px; margin: 0 0 10px 0; float: left; width: 193px;}
#box-subscribe p {font-size: 0.75em; padding: 5px 5px 10px 0; margin: 0;}
#box-subscribe input.subscribe-input {height: 18px; border: 1px solid #aaa; background: #efefef; padding: 0 3px; width: 95px; background: #fff; margin-right: 3px;}
#box-subscribe input.subscribe-button {border: 1px solid #aaa; background: #efefef; cursor: pointer}
#box-subscribe input.subscribe-button:hover {background: #aaa; color: #fff;}



/* Stitky
----------------------------------------------- */
.label {font-style: normal; padding: 1px 4px; background: #000; margin-right: 7px; display: block; float: left;}
a.label, a.label:visited {text-decoration: none;}



/* Kontaktni informace
----------------------------------------------- */
#kontakt {width: 40%; margin-left: 0; float: left; font-size: 0.875em; line-height: 1.5em; padding-top: 12px;}
#kontakt ul li {padding-left: 30px; font-size: 1.0em; line-height: 2.0em;}
#kontakt ul li.kontakt-user {background: url("../images/kontakt-black-user.png") 0 4px no-repeat; background-size: 20px 20px;}
#kontakt ul li.kontakt-email {background: url("../images/kontakt-black-email.png") 0px 6px no-repeat; background-size: 20px 20px;}
#kontakt ul li.kontakt-phone {background: url("../images/kontakt-black-mobil.png") 0 5px no-repeat; background-size: 20px 20px;}
#kontakt ul li.kontakt-facebook {background: url("../images/kontakt-black-facebook.png") 1px 5px no-repeat; background-size: 20px 20px;}
#kontakt ul li.kontakt-twitter {background: url("../images/kontakt-black-twitter.png") 1px 5px no-repeat; background-size: 20px 20px;}
#kontakt ul li.kontakt-instagram {background: url("../images/kontakt-black-instagram.png") 1px 5px no-repeat; background-size: 20px 20px;}
#kontakt ul li.kontakt-none {background: none; padding-left: 0;}
#kontakt div.article {width: 90%; margin: 0;}
#kontakt p {width: 100%; margin: 23px 0 20px 0;}
#kontakt .uprava-typografie {font-size: 1.0em;}



/* Kontaktni mailovy formular - barvy
----------------------------------------------- */
#formular input, #formular textarea {border: 1px solid #aaa;}
#formular input:focus, #formular textarea:focus {border: 1px solid #000;}



/* Kontaktni mailovy formular
----------------------------------------------- */
#formular {width: 53%; float: right; margin: 0; font-size: 0.875em;}
#formular form {padding: 15px;}
#formular form .input-cell {width: 100%; text-align: left; height: 20px; margin: 0; padding-bottom: 17px;}
#formular form .input-text {width: 80px; height: 22px; float: left; text-align: right; padding: 5px 7px 0 0; font-size: 0.875em;}
#formular form .input-input {width: calc(100% - 87px); height: 15px; float: left; text-align: left;}
#formular form .input-input input.field {width: calc(100% - 8px); height: 20px; padding: 3px 3px 0 3px;}
#formular form .input-antispam input.field {width: calc(100% - 113px);}
#formular form .input-antispam span {font-size: 0.75em; position: relative; top: -3px; left: 8px;}
#formular form .input-input img {position: relative; top: 3px; left: 5px;}
#formular form .input-textarea {width: 100%; height: 175px; text-align: left; margin: 0;}
#formular form .input-input textarea {width: calc(100% - 8px); height: 160px; padding: 3px 3px 0 3px; margin: 0 0 10px 0;}
#formular form .input-button {width: 100%; text-align: left; height: 20px; margin: 0; padding-bottom: 17px;}
#formular form .input-button .input-input input.button {font-weight: bold; border: 1px solid #514743; padding: 5px 10px;}
#formular form .input-button .input-input input.button:hover {cursor: pointer;}

#formular .privacy {width: 75%; float: left; margin: 0 0 10px 20%;}



/* Checkbox list
----------------------------------------------- */
.checkbox-list span {width: 180px; font-size: 0.75em; padding-top: 2px;}
.checkbox-list .checkbox-disabled {font-weight: bold;}



/* Mega box
----------------------------------------------- */
ul#menumap  {width: 100px; display: block; float: left; margin: 0 0 15px 14px;}
ul#menumap li.mega a {background: url(../img/map.gif) 0 4px no-repeat; display: block; font-size: 0.75em; text-decoration: none; padding: 0 0 0 11px;}
ul#menumap li.mega a:hover {background-position: 0 -40px;}
ul#menumap div {display: none;}
ul#menumap li.mega div {position: relative; border: 1px solid #dda; padding: 10px; background: #ffc; margin: 5px 0 10px 0; font-size: 0.75em; width: 200px;}
ul#mega-gallery div {z-index: 5;}
ul#mega-category div {z-index: 10;}
ul#menumap li.mega label {position: relative; top: -2px;}
ul#menumap li.hovering div {display: block;}
ul#menumap li.mega div span {width: 180px; font-size: 0.75em; padding-top: 2px;}
ul#menumap li.mega div .checkbox-disabled {font-weight: bold;}

ul#menumap li.mega div .map-button {margin-top: 10px; width: 170px; border: 1px solid #aaa; background: #efefef; cursor: pointer;}
ul#menumap li.mega div .map-button:hover {background: #dbdbdb; color: #000;}



/* Naseptavac
----------------------------------------------- */
.naseptavac {position: relative; font-size: 0.75em;}
.naseptavac ul {position: absolute;	background: #86bac7; top: 0; left: 0;}
.naseptavac li {padding: 0;	list-style: none;}
.naseptavac li a {display: block; text-indent: 5px; color: #fff; text-decoration: none; padding: 3px;}
.naseptavac li.selected a {background: #3d91a5;}

.naseptavac_inactive {color: #aaa;}
.naseptavac_active {color: #000;}
.naseptavac_text {color: #000;}



/* RSS sidebar
----------------------------------------------- */
#sidebar-rss li {line-height: 2.0em; font-size: 0.75em; clear: both; padding-left: 6px;}
#sidebar-rss li a {padding-left: 17px; text-decoration: none;}
#sidebar-rss li.ext-rss {background: url("../img/ext_rss.png") 6px 7px no-repeat;}



/* Scroll top
----------------------------------------------- */
.scrolltop {width: 30px; height: 30px; padding: 0; text-align: center; text-decoration: none; position: fixed; bottom: 87px; right: 20px; display: none; background: url("../images/scrolltop.png") no-repeat 0 0; opacity: 0.2; transition: 0.3s;}
.scrolltop:hover {opacity: 1;}



/* Pohlednice
----------------------------------------------- */
#postcard {float: left; font-size: 0.75em; width: 470px; margin-left: 15px;}
#postcard #postcard-left {float: left; width: 45%;}
#postcard #postcard-right {float: left; width: 54%;}

#postcard label {width: 90%; display: block; float: left; text-align: left; margin: 0 5px 4px 0;}
#postcard label span {color: red;}

#postcard #postcard-left input {width: 90%; float: left; text-align: left; border: 1px solid #aaa; color: #000; padding: 3px; margin-bottom: 10px;}
#postcard #postcard-left input:focus {border: 1px solid #000;}

#postcard #postcard-right textarea {width: 90%; height: 124px; float: left; text-align: left; border: 1px solid #aaa; color: #000; padding: 3px; margin-bottom: 10px;}
#postcard #postcard-right textarea:focus {border: 1px solid #000;}
#postcard #postcard-right label {margin-bottom: 3px;}
#postcard #postcard-right input {float: right; margin-right: 17px;}



/* EU cookies
----------------------------------------------- */
.eu-cookies {position: fixed; left: 0; bottom: 0; width: 100%; color: #fff; background-color: #444; z-index: 2000; padding: 4px 10px; text-align: center;}
.eu-cookies button {background: #45ae52; border: medium none; border-radius: 3px; color: #fff; cursor: pointer; font-weight: 700; margin: 0 20px; padding: 4px 12px;}
.eu-cookies a, .eu-cookies a:visited {color: #fff; text-decoration: none;}
.eu-cookies a:hover {text-decoration: underline;}



/* Titulni slideshow
----------------------------------------------- */
#slideshow {margin-left: 0;}





/* ------------------------------------------ */
/* Webova galerie Azael --------------------- */
/* Zakladni layout stranek ------------------ */
/* ------------------------------------------ */



/* Layout
----------------------------------------------- */
#container {text-align: left; width: 100%; max-width: 1400px; margin: 0 auto; padding-top: 110px;}



/* Header
----------------------------------------------- */
#header {width: 100%; height: 110px; background: #fff; overflow: hidden; position: fixed; z-index: 4;}

h1.header, h2.header {width: 57px; height: 72px; position: fixed; z-index: 10; left: 50%; top: 28px; margin: 0 0 0 -580px; background: url("../images/h1.png") no-repeat; background-size: 57px 72px;}
h1.header a, h2.header a {display: block; width: 57px; height: 72px; text-decoration: none;}
h1.header a span, h2.header a span {visibility: hidden;}



/* Menu
----------------------------------------------- */
#menu {position: fixed; left: 0; top: 51px; width: 100%; padding: 0; text-align: center; z-index: 5; background: none;}



/* Menu - zarovnane vlevo
----------------------------------------------- */
#menu .nav-collapse {position: relative; font-family: Raleway;}
#menu .nav-collapse ul {width: 1200px; margin: 0 auto; padding-left: 200px; background: none; overflow: hidden; text-transform: uppercase;}
#menu .nav-collapse ul li {padding: 0; font-size: 0.85em; float: left; font-weight: 600;}
#menu .nav-collapse ul li a {background: none; padding: 10px 0 10px 0; margin-right: 14px; display: block; text-decoration: none; color: #45484a;}
#menu .nav-collapse ul li:last-child a {margin-right: 0;}
#menu .nav-collapse ul li a:hover, #menu .nav-collapse ul li a.current {background: none; color: #8d6d51;}



/* Content
----------------------------------------------- */
#content {float: left; width: 100%; padding: 0; background: none;}
#content .article {max-width: 100%; width: calc(100% - 284px); float: left; margin-left: 227px;}
#mygallery {max-width: 100%; width: calc(100% - 284px); float: left; margin-left: 227px; margin-top: 24px;}



/* Content home
----------------------------------------------- */
#content-home {float: left; width: 100%; min-height: 828px; padding: 0; background: url("../images/title.jpg") no-repeat; position: relative; background-size: 100% auto;}
#content-home .h2-title {font-family: Dosis; font-weight: 800; font-size: 4.0em; color: #8d6e51; line-height: 1.0em; padding: 9px 0 0 42px;}
#content-home .article {width: 550px; position: absolute; top: 380px; left: 42px;}
#content-home .article h3 {font-family: Dosis; font-weight: 800; font-size: 2.5em; color: #676767; line-height: 1.25em; margin-bottom: 10px; text-transform: uppercase;}
#content-home .article p {color: #45484a; font-size: 1.125em;}



/* Content others
----------------------------------------------- */
#content #content-left {float: left; width: 48%;}
#content #content-right {float: right; width: 50%;}

#content #content-background {width: 100%; position: relative;}
#content #content-background p {width: 510px; position: absolute; top: 20px; left: 0; background: rgba(255, 255, 255, 0.8); padding: 24px 30px 24px 0;}

a.mapview, a.mapview:visited {color: #8e6e51; text-decoration: none; background: url("../images/point.png") 100% 0 no-repeat; display: inline-block; padding: 0 25px 0 0; float: right; margin: 10px 0 0 0;}
a.mapview:hover {color: #000;}



/* Sidebar
----------------------------------------------- */
#sidebar {float: left; width: 260px; padding: 0; margin: 0; background: #e0f6f7;}
#sidebar h3 {clear: both;}



/* Footer
----------------------------------------------- */
#footer {clear: both; text-align: center; font-style: normal; font-size: 0.75em; color: #545454; width: 100%; height: 100px; margin: 0; padding: 28px 0; background: none;}

#footer .footer-link {border-bottom: 1px solid #8d6d50; width: calc(100% - 284px); margin: 0 0 0 227px; position: relative; z-index: 1;}
#footer .footer-link-home {width: 950px; margin: 0 auto;}
#footer .footer-link span {background: #fff; position: relative; top: 16px; z-index: 2; display: inline-block; padding: 0 13px;}
#footer .footer-link span a, #footer .footer-link span a:visited {text-decoration: none; background: #fff; color: #5d6162; font-size: 1.31em; text-transform: uppercase; border: 1px solid #8d6d50; display: inline-block; padding: 7px 32px 6px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}
#footer .footer-link span a:hover {background: #8d6d50; color: #fff;}

.page-link {border-bottom: 1px solid #8d6d50; width: 100%; margin: 30px auto 70px; position: relative; z-index: 1; text-align: center;}
.page-link span {background: #fff; position: relative; top: 16px; z-index: 2; display: inline-block; padding: 0 13px;}
.page-link span a, .page-link span a:visited {text-decoration: none; background: #fff; color: #5d6162; font-size: 2.0em; text-transform: uppercase; border: 1px solid #8d6d50; display: inline-block; padding: 7px 32px 6px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}
.page-link span a:hover {background: #8d6d50; color: #fff;}
.page-link span a em, .page-link span a:visited em {font-style: normal; transform: rotate(90deg); display: block; font-weight: 400; position: relative; left: 4px;}

.page-link-system {float: left;}
.page-link-system span a, .page-link-system span a:visited {font-size: 1.0em;}

.signin {position: fixed; top: 20px; left: 50%; margin: 0 0 0 346px; width: 300px; z-index: 999; font-size: 0.75em; text-align: right;}
.signin a, .signin a:visited {color: #aaa; text-decoration: none; transition: 0.3s;}
.signin a:hover {color: #8D6D51;}



/* Page
----------------------------------------------- */
#page {width: calc(100% - 284px); margin: 0 0 0 227px; float: left; font-family: 'Open Sans';}

#page #kontakt-left {width: 48%; float: left; margin: 0 0 20px 0;}
#page #kontakt-left img {max-width: 100%; max-height: auto;}
#page #kontakt-left .article {width: 100%; margin: 0;}

#page #kontakt-right {width: 48%; float: right; margin: 0 0 20px 0;}
#page #kontakt-right img {max-width: 100%; width: 1000;}
#page #kontakt-right .article {width: 100%; margin: 63px 0 0 0; width: 100%; float: left;}
#page #kontakt-right .kontakt-right-image {margin: 122px 0 0 0; display: block; float: right; width: calc(100% - 235px);}

.page-order h1 {color: #8e6e51; text-transform: uppercase; font-weight: 500; font-size: 2.5em; padding: 0.31em 0 0 0; line-height: 1.25em; letter-spacing: 1.5pt; word-spacing: 2pt;}
.page-order h2 {color: #8e6e51; text-transform: uppercase; font-weight: 600; font-size: 1.25em; padding: 0 0 0 0; line-height: 1.25em;}
.page-order p {font-size: 1.125em; color: #45484a; margin: 0 0 20px 0; line-height: 1.25em;}
.page-order p strong {color: #8e6e51;}

.page-order p.red2 {color: red; font-size: 0.875em;}
.page-order p.red2 strong {color: red;}

.page-order p a, .page-order p a:visited {color: #8e6e51; text-decoration: underline; font-size: 1.5em;}
.page-order p a:hover {color: #000; text-decoration: none;}

.page-order-form {float: left; width: calc(50% - 25px); min-height: 400px; margin: 5px 0 20px 0; padding: 34px 0 0 0;}
.page-order-form:nth-of-type(1) {border-top: 2px solid #8e6e51; border-bottom: 2px solid #8e6e51; margin-right: 50px;}

.page-user .page-order-form:nth-of-type(1) {border: 0;}

.page-zvirata .page-order-form {width: calc(100% - 0px);}
.page-zvirata .page-order-form:nth-of-type(1) {border: 0;}
.page-zvirata .page-order-form input {}

.page-order .page-order-form h3 {background: #8d6d51; width: 216px; display: block; float: left; color: #fff; font-size: 1.125em; line-height: 1.125em; padding: 16px 12px 14px; margin-bottom: 19px;}
.page-order .page-order-form h3.name-h3 {width: auto;}

.page-order .page-order-form a.page-order-form-h3-side-link, .page-order .page-order-form a.page-order-form-h3-side-link:visited {display: block; float: left; width: calc(100% - 250px); margin: 18px 0 0 10px;}

.page-order .page-order-form h4 {display: inline-block; font-size: 1.25em; color: #8d6d51; font-weight: 600; padding: 0 0 0 0; margin: 10px 0 19px; text-decoration: underline;}
.page-order p.page-order-form-p {font-size: 0.75em; color: #000; font-weight: 600; padding: 18px 0 0 14px; float: left; display: block; width: calc(100% - 254px);}
.page-order p.page-order-form-p span {color: #8d6d51; text-decoration: underline;}

a.animal-history, a.animal-history:visited {background: #8d6d51; width: auto; display: block; float: left; color: #fff; font-size: 1.25em; padding: 16px 12px 14px; margin-bottom: 19px; margin-left: 5px; text-decoration: none;}
a.animal-history:hover {background: #9e7d5f;}

a.back-to-calendar, a.back-to-calendar:visited {background: #8d6d51; width: auto; display: block; float: left; color: #fff; font-size: 1.25em; padding: 16px 12px 14px; margin-bottom: 19px; float: right; text-decoration: none; transition: 0.3s;}
a.back-to-calendar:hover {background: #9e7d5f;}

.page-order p.page-order-form-p-under {font-size: 0.75em; color: #000; font-weight: 600; padding: 25px 0 0 0; float: left; display: block; width: 100%;}
.page-order p.page-order-form-p-under a, .page-order p.page-order-form-p-under a:visited {font-size: 1.0em;}

a.animal-no, a.animal-no:visited {display: block; float: left; width: calc(100% - 40px); padding: 20px; border: 1px solid #aaa; color: #aaa; transition: 0.3s; text-decoration: none; line-height: 1.4em;}
a.animal-no:hover {color: #000; border: 1px solid #000;}

a.animal-no-red, a.animal-no-red:visited {border: 1px solid #ef3b3d; color: #ef3b3d;}
a.animal-no-red:hover {color: #000; border: 1px solid #000;}

#sex_animal1 {display: none;}
#sport_animal1 {display: none;}
#childbirth_animal1 {display: none;}
#castration_animal1 {display: none;}

#page .alert-info {margin-bottom: 90px;}



/* Stopy
----------------------------------------------- */
.paw {animation: one 2s forwards; opacity: 0; z-index: 100;}
.paw1 {position: fixed; top: 8px; left: 25px;}
.paw2 {position: fixed; top: 84px; left: 55px; animation-delay: 0.25s;}
.paw3 {position: fixed; top: 99px; left: 146px; animation-delay: 0.5s; transform: rotate(10deg);}
.paw4 {position: fixed; top: 179px; left: 117px; animation-delay: 0.75s; transform: rotate(10deg);}
.paw5 {position: fixed; top: 224px; left: 199px; animation-delay: 1.0s; transform: rotate(25deg);}
.paw6 {position: fixed; top: 282px; left: 123px; animation-delay: 1.25s; transform: rotate(30deg);}
.paw7 {position: fixed; top: 358px; left: 164px; animation-delay: 1.5s; transform: rotate(45deg);}
.paw8 {position: fixed; top: 386px; left: 77px; animation-delay: 1.75s; transform: rotate(48deg);}
.paw9 {position: fixed; top: 470px; left: 122px; animation-delay: 2.0s; transform: rotate(55deg);}
.paw10 {position: fixed; top: 490px; left: 31px; animation-delay: 2.25s; transform: rotate(65deg);}
.paw11 {position: fixed; top: 567px; left: 55px; animation-delay: 2.5s; transform: rotate(80deg);}

@keyframes one {
  0% {opacity: 0;}
  50% {opacity: 1;}
  75% {opacity: 0.5;}
  100% {opacity: 0.25;}
}



/* Fyzio formulare
----------------------------------------------- */
.fyzio-input {width: calc(100% - 12px); display: block; float: left; border: 1px solid #c7c8c9; padding: 17px 5px 13px; margin-bottom: 7px; font-size: 0.875em; font-family: 'Open Sans'; font-weight: 400;}
.fyzio-input:focus {border: 1px solid #000;}
.fyzio-input::placeholder {color: #7c7c7c;}

.fyzio-input-antispam-right {width: 118px; float: right; text-align: center; padding-top: 8px;}
.fyzio-input-antispam {width: calc(100% - 130px);}
.fyzio-input-antispam-span {color: red; font-size: 0.75em;}

.fyzio-button {font-family: 'Open Sans'; font-size: 1.0em; background: #8e6e51; border: 0; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; color: #fff; font-weight: 600; text-transform: uppercase; padding: 8px 20px; margin: 10px 0 0 0; min-width: 200px; transition: 0.3s; -webkit-box-shadow: 3px 3px 10px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 3px 3px 10px 0px rgba(50, 50, 50, 0.75); box-shadow: 3px 3px 10px 0px rgba(50, 50, 50, 0.75);}
.fyzio-button:hover {background: #7b593b; -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.25); -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.25); box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.25);}

.fyzio-textarea {width: calc(100% - 12px); height: 100px; display: block; float: left; border: 1px solid #c7c8c9; padding: 17px 5px 13px; margin-bottom: 7px; font-size: 0.875em; font-family: 'Open Sans'; font-weight: 400;}
.fyzio-textarea:focus {border: 1px solid #000;}

.fyzio-radio-radio {position: relative; left: -4px; top: 1px; display: inline-block; float: left;}
.fyzio-radio-text {line-height: 1.4em; float: left; width: calc(100% - 30px); margin-bottom: 6px;}

.fyzio-input-label {width: 100%; display: block; float: left; line-height: 1.0em; padding-bottom: 7px; font-weight: 600;}
.fyzio-input-label span {font-size: 1.25em; color: red; font-weight: 700; position: relative; top: 3px;}

.fyzio-select-select {width: 500px; max-width: 100%; display: block; float: left; border: 1px solid #c7c8c9; padding: 17px 5px 13px; margin-bottom: 7px; font-size: 0.875em; font-family: 'Open Sans'; font-weight: 400; background: #fff;}
.fyzio-select-select:focus {border: 1px solid #000;}
.fyzio-select-label {width: 100%; display: block; float: left; line-height: 1.0em; padding-bottom: 12px; font-weight: 600;}
.fyzio-select-label span {font-size: 1.25em; color: red; font-weight: 700; position: relative; top: 3px;}

.date-dropdowns select {width: 100px; max-width: 100%; display: block; float: left; border: 1px solid #c7c8c9; padding: 17px 5px 13px; margin-bottom: 21px; margin-right: 10px; font-size: 0.875em; font-family: 'Open Sans'; font-weight: 400; background: #fff;}
.date-dropdowns select:focus {border: 1px solid #000;}

.fyzio-textarea-label {width: 100%; display: block; float: left; line-height: 1.0em; padding-bottom: 7px; font-weight: 600;}
.fyzio-textarea-label span {font-size: 1.25em; color: red; font-weight: 700; position: relative; top: 3px;}

.fyzio-radio-label {width: 100%; display: block; float: left; line-height: 1.0em; padding-bottom: 10px; font-weight: 600;}
.fyzio-radio-label span {font-size: 1.25em; color: red; font-weight: 700; position: relative; top: 3px;}

.register_user input.obligatory {border: 1px solid #ef3b3d;}
.register_user input.obligatory:focus {border: 1px solid #000;}

.login_user input.obligatory {border: 1px solid #ef3b3d;}
.login_user input.obligatory:focus {border: 1px solid #000;}

.edit_user input.obligatory {border: 1px solid #ef3b3d;}
.edit_user input.obligatory:focus {border: 1px solid #000;}

.generate_user input.obligatory {border: 1px solid #ef3b3d;}
.generate_user input.obligatory:focus {border: 1px solid #000;}

.edit_animal input.obligatory {border: 1px solid #ef3b3d;}
.edit_animal input.obligatory:focus {border: 1px solid #000;}

.edit_animal .fyzio-input {margin-bottom: 20px;}

.page-order p.eldery strong {color: #000; font-weight: 600; font-size: 0.875em;}

#content .form-text {width: 100%; float: left; overflow: hidden; margin: 10px 0 0 0;}
#content .form-text .article {font-size: 1.125em; width: 100%; float: left; overflow: hidden; margin: 0;}
#content .form-text .article ul {position: relative; left: -9px;}

.form-h3 {font-size: 1.5em; line-height: 1.25em; display: block; width: 100%; margin-bottom: 15px;}

.zprava {width: calc(100% - 40px); float: left; padding: 15px 20px 5px 20px; line-height: 1.5em; margin-bottom: 20px; background: #f2e4d8;}
.zprava h4 {display: block; width: 100%; float: left;}
.zprava p {display: block; width: 100%; float: left;}

#sleva .fyzio-checkbox-checkbox {position: relative; left: -4px; top: 2px; display: inline-block; float: left;}
#sleva .fyzio-checkbox-text {line-height: 1.4em; float: left; width: calc(100% - 30px); margin-bottom: 6px; color: red;}

.animal_change {float: left; width: 100%; margin: 20px 0 30px 0;}
.animal_change select {border: 1px solid #c7c8c9; padding: 9px 5px 8px; margin-right: 20px; font-size: 0.875em; font-family: 'Open Sans'; font-weight: 400; background: #fff;}
.animal_change select:focus {border: 1px solid #000;}




/* Kalendar
----------------------------------------------- */
#kalendar {min-height: 600px; width: 100%; min-width: 850px; border: 0; padding: 0; color: #aaa; overflow: visible; margin-top: 30px; position: relative;}

#kalendar .kalendar-top {width: 300px; max-width: 100%; height: 35px; margin: 0 auto;}
#kalendar .kalendar-top a, #kalendar .kalendar-top a:visited {text-decoration: none; font-size: 1.75em; font-weight: 600; transition: 0.3s;}
#kalendar .kalendar-top h3 {display: block; float: left; width: calc(100% - 60px); text-align: center; font-size: 0.69em; color: #000; position: relative; top: 1px;}
#kalendar .kalendar-top h3 a, #kalendar .kalendar-top h3 a:visited {font-weight: 400;}
#kalendar .kalendar-top .kalendar-top-previous {display: block; float: left; width: 30px; text-align: right;}
#kalendar .kalendar-top .kalendar-top-next {display: block; float: left; width: 30px; text-align: left;}

#kalendar .vysvetlivky {width: 150px; position: absolute; right: 0; top: -80px; color: #000; line-height: 1.25em;}
#kalendar .vysvetlivky .vysvetlivky-2 span {width: 10px; height: 10px; display: block; background: green; float: left; position: relative; top: 5px; left: -5px;}
#kalendar .vysvetlivky .vysvetlivky-171 span {width: 10px; height: 10px; display: block; background: #0000ff; float: left; position: relative; top: 5px; left: -5px;}
#kalendar .vysvetlivky .vysvetlivky-305 span {width: 10px; height: 10px; display: block; background: #d6b4fc; float: left; position: relative; top: 5px; left: -5px;}
#kalendar .vysvetlivky .vysvetlivky-716 span {width: 10px; height: 10px; display: block; background: #df8300; float: left; position: relative; top: 5px; left: -5px;}
#kalendar .vysvetlivky .vysvetlivky-845 span {width: 10px; height: 10px; display: block; background: #df8300; float: left; position: relative; top: 5px; left: -5px;}
#kalendar .vysvetlivky .vysvetlivky-992 span {width: 10px; height: 10px; display: block; background: #00ffff; float: left; position: relative; top: 5px; left: -5px;}
#kalendar .vysvetlivky .vysvetlivky-1497 span {width: 10px; height: 10px; display: block; background: #b111a4; float: left; position: relative; top: 5px; left: -5px;}

#kalendar .day {width: 14.28%; float: left; height: 1515px; margin-bottom: 30px; border-bottom: 1px solid #d2d2d2;}
#kalendar .day-before {height: 505px;}
#kalendar .day div {width: calc(100% - 1px); height: 100px; border: 1px solid #d2d2d2; border-right: 0; border-bottom: 0; text-align: center; overflow: hidden; position: relative;}
#kalendar .day div.day-th {background: #8e6e51; color: #fff;}
#kalendar .day div span {position: relative; top: 29px; color: #fff; font-weight: 600;}
#kalendar .day div span em {font-weight: 400; font-size: 0.75em; font-style: normal;}
#kalendar .day div span a.block-whole-day, #kalendar .day div span a.block-whole-day:visited {position: relative; top: 0; color: #fff; font-weight: 600; width: auto; height: auto; padding: 0; display: inline;}
#kalendar .day div span a.block-whole-day:hover {background: none; color: #ecf60b;}

#kalendar .day .star {position: absolute; top: 85%; right: 4px; color: #000; font-size: 1.25em;}

#kalendar .day div span.type_calendar_config_name {position: static; top: auto; color: #aaa; font-weight: 600; font-size: 0.69em;}

#kalendar .sunday div {width: calc(100% - 2px); border-right: 1px solid #d2d2d2;}

#kalendar .day a, #kalendar .day a:visited {width: 100%; height: 56px; padding: 44px 0 0 0; display: block; cursor: pointer; text-decoration: none; transition: 0.3s; position: relative;}
#kalendar .day a:hover {background: #d2d2d2;}

#kalendar .day a .poukaz, #kalendar .day a:visited .poukaz, #kalendar .day div .poukaz {position: absolute; right: 20px; top: 5px; width: 10px; height: 10px; background: red; display: block; border-radius: 50%;}

#kalendar .day a .employ, #kalendar .day a:visited .employ, #kalendar .day div .employ {position: absolute; right: 5px; top: 5px; width: 10px; height: 10px; display: block;}
#kalendar .day a .employ-2, #kalendar .day a:visited .employ-2, #kalendar .day div .employ-2 {background: green;}
#kalendar .day a .employ-171, #kalendar .day a:visited .employ-171, #kalendar .day div .employ-171 {background: #0000ff;}
#kalendar .day a .employ-305, #kalendar .day a:visited .employ-305, #kalendar .day div .employ-305 {background: #d6b4fc;}
#kalendar .day a .employ-716, #kalendar .day a:visited .employ-716, #kalendar .day div .employ-716 {background: #df8300;}
#kalendar .day a .employ-845, #kalendar .day a:visited .employ-845, #kalendar .day div .employ-845 {background: #df8300;}
#kalendar .day a .employ-992, #kalendar .day a:visited .employ-992, #kalendar .day div .employ-992 {background: #00ffff;}
#kalendar .day a .employ-1497, #kalendar .day a:visited .employ-1497, #kalendar .day div .employ-1497 {background: #b111a4;}

#kalendar .day a .narozeninovasleva, #kalendar .day a:visited .narozeninovasleva, #kalendar .day div .narozeninovasleva {position: absolute; right: 26px; top: 3px; width: 10px; height: 10px; background: none; display: block; font-weight: 600; color: blue; font-size: 0.75em;}
#kalendar .day a .hodina, #kalendar .day a:visited .hodina, #kalendar .day div .hodina {position: absolute; left: 2px; top: 2px; width: auto; height: 10px; color: #000; font-size: 0.75em; font-weight: 600;}

#kalendar .day .block a, #kalendar .day .block a:visited {padding-top: 0; height: 75px;}
#kalendar .day .blockmyres a, #kalendar .day .blockmyres a:visited {padding-top: 20px; padding-bottom: 5px; height: 75px; line-height: 0.875em;}
#kalendar .day .myrestext span.myresspan {color: #000; font-size: 0.75em; top: 21px;}

#kalendar .day .block {background: #fff2f2;}
#kalendar .day .blockuser {background: #e6ecff;}
#kalendar .day .blockmyres {background: #ecf60b;}
#kalendar .day .svatek {background: #DDF9E2;}
#kalendar .day .blockdetail {font-size: 0.69em; color: #000; top: 5px;}
#kalendar .day .blockmyresgrey {background: #e8e8e8;}

#kalendar .day .block-empty a, #kalendar .day .block-empty a:visited {padding-top: 20px; padding-bottom: 5px;}

#kalendar .time {width: 84px; float: left; height: 300px;}
#kalendar .time div {width: 100%; height: 75px; text-align: right;}
#kalendar .time div span {position: relative; top: 33px; color: #000; padding-right: 15px;}

.title .employ {position: static; width: 10px; height: 10px; display: block; float: left; position: relative; top: 3px; margin-right: 5px;}
.title .employ-2 {background: green;}
.title .employ-171 {background: #0000ff;}
.title .employ-305 {background: #d6b4fc;}
.title .employ-716 {background: #df8300;}
.title .employ-845 {background: #df8300;}
.title .employ-992 {background: #00ffff;}
.title .employ-1497 {background: #b111a4;}



/* Kalendar - laser
----------------------------------------------- */
#kalendar-laser {min-height: 600px; width: 100%; min-width: 850px; border: 0; padding: 0; color: #aaa; overflow: visible; margin-top: 30px; position: relative;}

#kalendar-laser .kalendar-top {width: 300px; max-width: 100%; height: 35px; margin: 0 auto;}
#kalendar-laser .kalendar-top a, #kalendar-laser .kalendar-top a:visited {text-decoration: none; font-size: 1.75em; font-weight: 600; transition: 0.3s;}
#kalendar-laser .kalendar-top h3 {display: block; float: left; width: calc(100% - 60px); text-align: center; font-size: 0.69em; color: #000; position: relative; top: 1px;}
#kalendar-laser .kalendar-top h3 a, #kalendar-laser .kalendar-top h3 a:visited {font-weight: 400;}
#kalendar-laser .kalendar-top .kalendar-top-previous {display: block; float: left; width: 30px; text-align: right;}
#kalendar-laser .kalendar-top .kalendar-top-next {display: block; float: left; width: 30px; text-align: left;}

#kalendar-laser .vysvetlivky {width: 200px; position: absolute; right: 0; top: -80px; color: #000; line-height: 1.25em;}
#kalendar-laser .vysvetlivky .vysvetlivky-2 span {width: 10px; height: 10px; display: block; background: green; float: left; position: relative; top: 5px; left: -5px;}
#kalendar-laser .vysvetlivky .vysvetlivky-171 span {width: 10px; height: 10px; display: block; background: #0000ff; float: left; position: relative; top: 5px; left: -5px;}
#kalendar-laser .vysvetlivky .vysvetlivky-305 span {width: 10px; height: 10px; display: block; background: #d6b4fc; float: left; position: relative; top: 5px; left: -5px;}
#kalendar-laser .vysvetlivky .vysvetlivky-716 span {width: 10px; height: 10px; display: block; background: #df8300; float: left; position: relative; top: 5px; left: -5px;}
#kalendar-laser .vysvetlivky .vysvetlivky-845 span {width: 10px; height: 10px; display: block; background: #df8300; float: left; position: relative; top: 5px; left: -5px;}
#kalendar-laser .vysvetlivky .vysvetlivky-992 span {width: 10px; height: 10px; display: block; background: #00ffff; float: left; position: relative; top: 5px; left: -5px;}
#kalendar-laser .vysvetlivky .vysvetlivky-1497 span {width: 10px; height: 10px; display: block; background: #b111a4; float: left; position: relative; top: 5px; left: -5px;}

#kalendar-laser .day {width: 14.28%; float: left; height: 2929px; margin-bottom: 30px; border-bottom: 1px solid #d2d2d2;}
#kalendar-laser .day-before {height: 505px;}
#kalendar-laser .day div {width: calc(100% - 1px); height: 100px; border: 1px solid #d2d2d2; border-right: 0; border-bottom: 0; text-align: center; overflow: hidden; position: relative;}
#kalendar-laser .day div.day-th {background: #8e6e51; color: #fff;}
#kalendar-laser .day div span {position: relative; top: 29px; color: #fff; font-weight: 600;}
#kalendar-laser .day div span em {font-weight: 400; font-size: 0.75em; font-style: normal;}
#kalendar-laser .day div span a.block-whole-day, #kalendar-laser .day div span a.block-whole-day:visited {position: relative; top: 0; color: #fff; font-weight: 600; width: auto; height: auto; padding: 0; display: inline;}
#kalendar-laser .day div span a.block-whole-day:hover {background: none; color: #ecf60b;}

#kalendar-laser .day div span.type_calendar_config_name {position: static; top: auto; color: #aaa; font-weight: 600; font-size: 0.69em;}

#kalendar-laser .sunday div {width: calc(100% - 2px); border-right: 1px solid #d2d2d2;}

#kalendar-laser .day a, #kalendar-laser .day a:visited {width: 100%; height: 56px; padding: 44px 0 0 0; display: block; cursor: pointer; text-decoration: none; transition: 0.3s; position: relative;}
#kalendar-laser .day a:hover {background: #d2d2d2;}

#kalendar-laser .day a .poukaz, #kalendar-laser .day a:visited .poukaz, #kalendar-laser .day div .poukaz {position: absolute; right: 20px; top: 5px; width: 10px; height: 10px; background: red; display: block; border-radius: 50%;}

#kalendar-laser .day a .employ, #kalendar-laser .day a:visited .employ, #kalendar-laser .day div .employ {position: absolute; right: 5px; top: 5px; width: 10px; height: 10px; display: block;}
#kalendar-laser .day a .employ-2, #kalendar-laser .day a:visited .employ-2, #kalendar-laser .day div .employ-2 {background: green;}
#kalendar-laser .day a .employ-171, #kalendar-laser .day a:visited .employ-171, #kalendar-laser .day div .employ-171 {background: #0000ff;}
#kalendar-laser .day a .employ-305, #kalendar-laser .day a:visited .employ-305, #kalendar-laser .day div .employ-305 {background: #d6b4fc;}
#kalendar-laser .day a .employ-716, #kalendar-laser .day a:visited .employ-716, #kalendar-laser .day div .employ-716 {background: #df8300;}
#kalendar-laser .day a .employ-845, #kalendar-laser .day a:visited .employ-845, #kalendar-laser .day div .employ-845 {background: #df8300;}
#kalendar-laser .day a .employ-992, #kalendar-laser .day a:visited .employ-992, #kalendar-laser .day div .employ-992 {background: #00ffff;}
#kalendar-laser .day a .employ-1497, #kalendar-laser .day a:visited .employ-1497, #kalendar-laser .day div .employ-1497 {background: #b111a4;}

#kalendar-laser .day a .narozeninovasleva, #kalendar-laser .day a:visited .narozeninovasleva, #kalendar-laser .day div .narozeninovasleva {position: absolute; right: 26px; top: 3px; width: 10px; height: 10px; background: none; display: block; font-weight: 600; color: blue; font-size: 0.75em;}
#kalendar-laser .day a .hodina, #kalendar-laser .day a:visited .hodina, #kalendar-laser .day div .hodina {position: absolute; left: 2px; top: 2px; width: auto; height: 10px; color: #000; font-size: 0.75em; font-weight: 600;}

#kalendar-laser .day .block a, #kalendar-laser .day .block a:visited {padding-top: 0; height: 75px;}
#kalendar-laser .day .blockmyres a, #kalendar-laser .day .blockmyres a:visited {padding-top: 20px; padding-bottom: 5px; height: 75px; line-height: 0.875em;}
#kalendar-laser .day .blockmyres-laser a, #kalendar-laser .day .blockmyres-laser a:visited {padding-top: 20px; padding-bottom: 5px; height: 75px; line-height: 0.875em;}
#kalendar-laser .day .myrestext span.myresspan {color: #000; font-size: 0.75em; top: 21px;}

#kalendar-laser .day .block {background: #fff2f2;}
#kalendar-laser .day .blockuser {background: #e6ecff;}
#kalendar-laser .day .blockmyres {background: #ecf60b;}
#kalendar-laser .day .blockmyres-laser {background: #b8e3ff;}
#kalendar-laser .day .svatek {background: #DDF9E2;}
#kalendar-laser .day .blockdetail {font-size: 0.69em; color: #000; top: 5px;}
#kalendar-laser .day .blockmyresgrey {background: #e8e8e8;}

#kalendar-laser .day .block-empty a, #kalendar-laser .day .block-empty a:visited {padding-top: 20px; padding-bottom: 5px;}

#kalendar-laser .time {width: 84px; float: left; height: 300px;}
#kalendar-laser .time div {width: 100%; height: 75px; text-align: right;}
#kalendar-laser .time div span {position: relative; top: 33px; color: #000; padding-right: 15px;}



/* Vypis zvirat
----------------------------------------------- */
.toc li {display: flex; margin-bottom: 20px; font-size: 0.875em;}
.toc li .title {order: 1; padding-right: 5px;}
.toc li .chapter {order: 3; padding-left: 5px;}
.toc li .chapter a, .toc li .chapter a:visited {transition: 0.3s;}
.toc li::after {background-image: radial-gradient(circle, currentcolor 1px, transparent 1.5px); background-position: bottom; background-size: 1ex 4.5px; background-repeat: space no-repeat; content: ""; flex-grow: 1; height: 1em; order: 2;}

.toc li.animal-rip, .toc li.animal-rip span, .toc li.animal-rip span a, .toc li.animal-rip span a:visited {color: #aaa;}



/* Upload
----------------------------------------------- */
#upload {width: calc(100% - 40px); float: left; padding: 20px; background: #feef9a; color: #000; margin: 20px 0;}
#upload h5 {font-weight: 600; font-size: 1.125em; display: block; width: 100%; float: left; margin-bottom: 10px;}
#upload p {width: 100%; display: block; float: left; line-height: 1.5em; font-size: 0.875em; color: #000;}
#upload p a, #upload p a:visited {font-size: 1.0em;}
#upload form {width: 50%; display: block; float: left; margin-top: 20px;}
#upload form input {width: 100%;}
#upload form input.fyzio-button {width: auto; margin: 20px 0 10px;}
#upload #attach {width: 50%; display: block; float: left;}
#upload #attach li a, #upload #attach li a:visited {text-decoration: none;}
#upload #attach li a:hover {text-decoration: underline; color: #000;}



/* Kurzy
----------------------------------------------- */
#kurzy-left {float: left; width: 58%;}
#kurzy-left p em {color: #aaa;}
#kurzy-right {float: right; width: 38%;}
#kurzy-right .article {width: 100%; margin: 0;}
#kurzy-right p em {color: #aaa;}
#kurzy-bottom {float: left; width: 100%; margin: 60px 0 0 0;}
#kurzy-bottom p em {color: #aaa;}



/* Other
----------------------------------------------- */
.page-order p.poukaz-all {font-size: 0.875em;}

.title-lightbox-div {position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; z-index: 1100; background:#7f7f7f; background:rgba(255,255,255,0.75);} 
.title-lightbox {position: absolute; left: 50%; top: 120px; width: 800px; margin: 0 0 0 -400px; z-index: 1200; -webkit-box-shadow: 1px 1px 10px 0px rgba(50, 50, 50, 0.75); -moz-box-shadow: 1px 1px 10px 0px rgba(50, 50, 50, 0.75); box-shadow: 1px 1px 10px 0px rgba(50, 50, 50, 0.75);}
.title-lightbox img {max-width: 100%;}
.title-lightbox-close {position: absolute; left: 50%; top: 110px; margin: 0 0 0 380px; z-index: 1200;}



/* Nas tym
----------------------------------------------- */
#tym {width: 100%; float: left; margin: 100px 0;}
#tym a, #tym a:visited {width: 50%; float: left; display: block; text-align: center; font-size: 1.5em; line-height: 1.25em; font-weight: 400; text-decoration: none; color: #8d6d51; transition: 0.3s; margin: 0 0 65px 0;}
#tym a:hover {color: #000;}
#tym img {width: 90%; overflow: hidden; border-radius: 50%; max-width: 300px; margin-bottom: 30px;}



/* Tabulka
----------------------------------------------- */
table.erase {border: 0; border-collapse: collapse; width: 100%; clear: both; margin: 20px 0 50px 0;}
table.erase th {font-weight: 600;}
table.erase th, table.erase td {background: #dcdcdc; padding: 7px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; }

table.erase tr:hover td {background: #fffccd; cursor: pointer;}



/* Switch
----------------------------------------------- */
#kalendar .switch {position: absolute; left: 0; top: -48px; color: #000; line-height: 1.25em;}
#kalendar .switch a, #kalendar .switch a:visited {color: #aaa; text-decoration: none;}
#kalendar .switch a:hover {text-decoration: underline;}

#kalendar-laser .switch {position: absolute; left: 0; top: -48px; color: #000; line-height: 1.25em;}
#kalendar-laser .switch a, #kalendar-laser .switch a:visited {color: #aaa; text-decoration: none;}
#kalendar-laser .switch a:hover {text-decoration: underline;}

#kalendar-laser .day div span em.reservation-type {color: red; font-size: 11.04px;}
#kalendar-laser .day div span em.reservation-type-aqua {color: blue; font-size: 11.04px;}

.formik label span.red-smaller {font-size: 1.0em;}

.unsubscribe {width: 90%; margin: 30px auto;}
.unsubscribe p {line-height: 1.5em;}