/* reset.css */
html {margin:0;padding:0;border:0;}
body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, nav, section {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure, dialog, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1.5;background:white;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:'';}
blockquote, q {quotes:"" "";}
a img {border:none;}
:focus {outline:0;}
/* ---------------------------------- End reset css ----------------------------------------*/
* {
box-sizing: border-box;
}
body {
font-family: 'Raleway', Raleway, Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0em;
font-size: 1em;
background-color: #D1FFCC;
}
/* ----------------------------------- grid-container --------------------------------- */
.grid-container {
display: grid;
grid-template-areas:
/*'menu menu menu menu menu menu' */
'logo_left header header header header logo_right'
'info info info info info info'
'menu_left menu_left menu_middle menu_right menu_right menu_right'
'left middle middle middle middle right';
grid-column-gap: 0em; /* mezera mezi column */
padding: 0em;
margin: 0em;
width: 100%;
background-color: Green;
}
/* ------------------menu ------------------
.menu {
grid-area: menu;
background-color: Green;
}
*/
/* ------------------------------ při plném rozlišení nebudeme menu zobrazovat ------------------------*/
/* ---------logo------------------- */
.logo_left {
grid-area: logo_left;
background-color: Green;
}
.logo_right {
grid-area: logo_right;
background-color: Green;
}
/* ---------------------------- Header ------------------------------ */
.header {
grid-area: header;
padding: 0.5em;
text-align: center;
font-size: 1.2em;
background-color: Green;
}
/* ---------------------------- Menu ------------------------------ */
.menu_left {
grid-area: menu_left;
padding: 0.5em;
text-align: center;
font-size: 1.2em;
}
.menu_middle {
grid-area: menu_middle;
padding: 0.5em;
text-align: center;
font-size: 1.2em;
}
.menu_right {
grid-area: menu_right;
padding: 0.5em;
text-align: center;
font-size: 1.2em;
}
/* ---------------------------- Info ------------------------------ */
.info {
grid-area: info;
padding: 0.5em;
text-align: center;
font-size: 1.2em;
background-color: Green;
}
/* --------------------------------Left -------------------------------- */
.left {
grid-area: left;
background-color: #BDE9B9;
padding: 0.25em 0.5em 2.5em 0.5em;
text-align: left;
border-top: 0.08em solid Black;
}
/* ----------------------------------- Middle -------------------------------------------- */
.middle {
grid-area: middle;
background-color: #7BCE77;
padding: 0.25em 1.5em 2.5em 1.5em;
border-top: 0.08em solid Black;
border-left: 0.10em solid #006400;
border-right: 0.10em solid #006400;
}
/* ---------------------------------------Right--------------------------- */
.right {
grid-area: right;
padding: 0.25em 0.5em 2.5em 0.5em;
background-color: #BDE9B9;
border-top: 0.08em solid Black;
}
/* ----------------------------------Fotter -------------------------------*/
.footer {
display: block;
width: 100%;
margin: 0em auto;
position: fixed;
bottom: 0px;
border-top: #274F00 1px solid;
text-align: center;
background-color: rgb(255,255,255);
background-color: rgba(255,255,255, 0.8);
color: Black;
}
.footer:hover {
background-color: #F9F9F9;
}
.align_left {
text-align: left;
padding: 0.5em;
}
article {
border-bottom:3px double #3E7D00;
padding: 0.5em;
}
.posledni { border-bottom: none;}
.nadpis {
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.05em;
text-shadow: 3px 3px 10px rgba(120, 120, 120, 0.5);
text-align: center;
color: #7BCE77;
color: #fafd85ff;
}
/* ------------------------------------------ vzhled pouzity pro Footer --------------------------*/
.decorative {
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.05em;
text-shadow: 3px 3px 10px rgba(120, 120, 120, 0.5);
text-align: center;
text-decoration: none;
color: Black;
}
.poznamkaSUP {
font-size: 0.6em;
padding: 0.2em;
font-style: italic;
}
/* ---------------------------- Style -------------------------------------- */
h1, h2 {
text-transform: capitalize;
letter-spacing: 0.05em;
}
h1 { font-size: 1.4em; }
h2 { font-size: 1.4em; padding: 0.5em; }
h3 { font-size: 1.2em; padding: 0.5em; }
h4 { font-size: 1em; }
h5 { font-size: 0.8em; }
h6 { font-size: 0.8em; }
h1 {
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.05em;
text-shadow: 3px 3px 10px rgba(120, 120, 120, 0.5);
text-align: center;
}
h4 { font-weight: bold;}
a {
display: block;
text-decoration: none;
color: rgb(0, 0, 0);
font-weight: normal;
padding: 0.25em 0.5em;
}
a:hover {
color: black;
}
.left a:hover, .right a:hover {
border: 1px solid #070D00;
border-radius: 0.25em;
background-color: #7BCE77;
box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.left span, .right span{
display: block;
text-align: right;
font-weight: bold;
color: Green;
padding: 0.1em 0.25em;
float: right;
}
/* --------------- style the navigation bar links------------------------- */
.menu_left a, .menu_right a {
float: left;
display: block;
text-align: center;
padding: 0.4em 2em;
margin: 0em 0.25em;
text-decoration: none;
text-transform: uppercase;
font-size: 0.8em;
border: 1px solid #070D00;
border-radius: 0.25em;
background-color: #7BCE77;
background-color: Green;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
/*------------------------------ Change color on hover --------------------------- */
.menu_left a:hover, .menu_right a:hover {
background-color: Green;
background-color: #7BCE77;
color: black;
transition: background-color 2s;
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
border-radius: 1.5em;
}
table {
position: relative;
letter-spacing: 0.05em;
border-collapse: collapse;
width: 80%;
border: Green 1px solid;
opacity: 0.8;
}
aside table {
width: 98%;
opacity: 1;
}
article table {
width: 98%;
opacity: 1;
}
#cenik article table {
width: 100%;
opacity: 1;
}
table td{
padding: 0.2em 1.2em;
box-shadow: 1px 1px 3px rgba(0, 128, 0, 0.7);
font-size: 1.2em;
}
table tr:nth-child(odd) {
background-color: #7BCE77;
}
table tr:nth-child(even) {
background-color: #BDE9B9;
}
table tr.prvniRadek {
background-color: #BDE9B9;
}
table tr.druhyRadek {
background-color: #7BCE77;
}
li {
list-style: none;
}
sup {
vertical-align: super;
font-size: smaller;
}
.poznamkaSUP {
font-size: 0.6em;
padding: 0.2em;
font-style: italic;
}
sub {
vertical-align: sub;
font-size: smaller;
}
.centred {
text-align: center;
}
.green {color: #01b519;}
/* --------------------------------------- mapy.com*/
iframe {
display: block;
padding: 0.25em;
margin: 0.25em auto;
width: 98%;
height: auto;
border: 1px solid black;
box-shadow: 2px 2px 5px #808080;
background-color: antiquewhite;
}
/* ----------------------------- pro zvyrazneni textu ------------------------------------ */
.italic {
font-size: 0.8em;
letter-spacing: 0.01em;
text-indent: 1.5em;
text-transform: uppercase;
padding: 0.3em;
}
/* ----- center ----------*/
.center {
text-align: center;
}
/* ------------------------------------ druhy odstavec odsaddme------------------------------ */
p + p { text-indent: 0.5em; }
/* ------------------prvni linka v odstavci */
p:first-line {text-indent: 0.25em; }
/* ------------------------prvni pismeno v odstavci-------------------- */
p:first-letter {font-size: 1.4em;}
q {
font-style: italic;
letter-spacing: .05em;
}
hr {
width: 92%;
size: 0.01em;
border: 3px double green;
box-shadow: #274F00 0.5px 0.5px 1px;
}
article p em {
font-weight: bold;
}
article p span {
font-weight: bold;
}
article p span.Red {
font-weight: normal;
color: Red;
}
article li span {
font-weight: bold;
}
article ul li {
list-style-type: lower-latin;
}
article ul.circle li {
list-style-type: none;
}
article ul.circle li ul li {
list-style-type: circle;
}
/* ---------------------- obecna tridada pro IMG mimo Article MUSIM zmenit na img nemohu pouzivat picture protoze je to TAG --------------------- */
.picture {
display: block;
margin: 0em auto;
width: 86%;
padding: 0.5em;
background-color: White;
border: Black 1px solid;
border-radius: 0.5em;
box-shadow: 1em 1em 1.2em black;
margin: 2em 0.5em;
}
/* IMG uvnitr Article musi byt malinkate, aby nerozhodilo text */
article .pictureHOME {
display: block;
width: 25%;
padding: 0.5em;
background-color: White;
border: Black 1px solid;
border-radius: 0.5em;
float: right;
}
/* ------------------------------ img------------------------------*/
.img_01{
display: block;
padding: 0.25em;
margin: 0.25em auto;
}
/* ------------------- znak mesta -------------------------*/
.logo_left img#znak_mesta{
display: block;
top: 0;
left: 0;
position: relative;
}
/* ------------------- znak TS -------------------------*/
.logo_right img#znak_ts{
display: block;
top: 0;
right: 0;
position: absolute;
}
/* ----------------------------- animace v banneru --------------------- */
.myAnime {
width: 100%;
height: auto;
margin: 0 auto;
padding: 0em;
animation-name: myAnim;
animation: myAnim 5s ease 4s 1 normal forwards;
}
.myAnime img{
display: block;
margin: 0 auto;
padding: 0em;
width: 86%;
}
/* ------------------ Responsive layout pro 1600px ----------------------------------------- */
@media (max-width: 1600px) {
/* ----------------------------------- grid-container --------------------------------- */
.grid-container {
display: grid;
grid-template-areas:
'logo_left header header header header logo_right'
'menu menu menu menu menu menu'
'middle middle middle middle middle right';
grid-column-gap: 0em; /* mezera mezi column */
padding: 0em;
background-color: Green;
}
.logo {
display: none;
visibility: hidden;
}
.left, .info, .menu_left, .menu_middle, .menu_right{
display: none;
width: 0px;
visibility: hidden;
}
.menu {
grid-area: menu;
background-color: Green;
}
nav.menu details{
width: calc(98%);/* u mobilního rozlišení přepočteme na 98% */
height: auto;
transition: all 2.5s ease;
margin: 0.05em 0.05em 0.05em 0.55em;
padding: 0.15em 0.25em 0.15em 0.05em;
color: rgb(109, 109, 109);
font-size: 1.25em;
}
nav.menu details summary{
text-align: right;
list-style: none;
padding: 0.05em;
cursor: pointer;
background-color: #7BCE77;
}
nav.menu details:not([open]){
width: 1.25em; /* velikost zavřeného bloku */
color: rgb(2, 2, 2);
}
nav.menu a{
color: rgb(0, 0, 0);
font-size: 0.8em;
}
nav.menu a:hover{
color: azure;
}
nav.menu a::after{
content: " | ";
}
}
/* -------------------------- Responsive layout --------------------- */
@media (max-width: 1200px) {
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu menu menu menu menu menu'
'info info info info info info'
'middle middle middle middle middle middle';
grid-column-gap: 0em; /* mezera mezi column */
padding: 0em;
background-color: Green;
}
.menu {
grid-area: menu;
background-color: Green;
}
nav.menu details{
width: 98%;/* u mobilního rozlišení přepočteme na 98% */
height: auto;
transition: all 2.5s ease;
margin: 0.05em 0.05em 0.05em 0.55em;
padding: 0.15em 0.25em 0.15em 0.05em;
border: 0.015em rgb(254, 255, 254) dotted;
color: rgb(66, 78, 1);
font-size: 1.25em;
background-color: rgb(40, 157, 1);
}
nav.menu summary{
text-align: right;
list-style: none;
padding: 0.05em;
cursor: pointer;
background-color:( rgb(1, 85, 1));
}
nav.menu details:not([open]){
width: 1.25em; /* velikost zavřeného bloku */
background-color: green;
border: green 1px solid;
color: rgb(2, 2, 2);
}
nav.menu a:hover{
color: azure;
}
nav.menu a::after{
content: " ";
}
/* ---------------------------- Menu ------------------------------ */
.left, .right, .info, .menu_left, .menu_middle, .menu_right, .logo_left, .logo_right{
display: none;
width: 0px;
visibility: hidden;
}
}
/* -------------------------- Responsive layout 800px --------------------- */
@media (max-width: 800px) {
.grid-container {
display: grid;
grid-template-areas:
'header header header header header header'
'menu menu menu menu menu menu'
'middle middle middle middle middle middle';
grid-column-gap: 0.05em; /* mezera mezi column */
padding: 0em;
margin: 0em;
background-color: Green;
}
/* ---------logo------------------- */
.logo_left {
display: block;
width: 0px;
visibility: hidden;
}
.logo_right {
display: block;
width: 0px;
visibility: hidden;
}
nav.menu details{
width: 98%;/* u mobilního rozlišení přepočteme na 98% */
}
/* ---------------------------- Menu ------------------------------ */
.left, .right, .info, .menu_left, .menu_middle, .menu_right, .logo_left, .logo_right{
display: none;
width: 0px;
visibility: hidden;
}
/* ----------------------------------- Middle -------------------------------------------- */
.middle {
background-color: #7BCE77;
padding: 0em;
}
/* ------------------- znak mesta -------------------------*/
img#znak_mesta{
display: block;
width: 0px;
visibility: hidden;
}
/* ------------------- znak TS -------------------------*/
img#znak_ts{
display: block;
width: 0px;
visibility: hidden;
}
.picture {
display: none;
margin: 0em;
width: 0em;
padding: 0em;
background-color:none;
border: none;
border-radius: none;
box-shadow: none;
margin: 0em;
visibility: hidden;
}
/* ---------------------- style the navigation bar links ------------------- */
.menu_left a, .menu_right a {
margin: 0.15em auto;
width: 86%;
float: none;
display: block;
text-align: center;
padding: 0.12em;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
table td{
font-size: 0.9em;
}
}
/* ------------------------- Animation Key ------------------------------------------ */
@keyframes AnimMain {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}