/* 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;
}
:root {
--sahara: #F4D06F;
--cream: #FFF8E6;
--pink: #F7DDE2;
--blue: #C9DFF2;
--gray: #6F6F6F;
--lightGreen: #c7ff8ac5;
--black: #000000;
}
body {
margin: 0em;
font-size:1em;
font-family: Raleway, Verdana, Geneva, Arial, Helvetica, sans-serif;
background: var(--cream);
color: var(--black);
background-image: url(../../004_images/bg_gride_01.svg);
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
/* ----------------------------------- grid-container --------------------------------- */
.grid-container {
display: grid;
grid-template-areas:
'logoL header header header header logoR'
'motto motto motto motto motto motto'
'banner banner banner banner banner banner'
'left_1 middle middle middle middle right_1'
'left_2 middle middle middle middle right_2'
'left_3 middle middle middle middle right_3'
'left_4 middle middle middle middle right_4';
grid-column-gap: 0em; /* mezera mezi column */
}
/* ------------------sidenav ------------------ */
.logoL {grid-area: logoL;}
/* ---------------------------- header ------------------------------ */
.header {grid-area: header;}
/* ---------logo------------------- */
.logoR {grid-area: logoR;}
/* ----------- banner -----------------------*/
.banner {grid-area: banner;}
/* ----------------- motto---------------*/
.motto {grid-area: motto;}
/* ----------------- middle --------------- */
.middle {grid-area: middle;}
/* --------------------------------- left --------------------- */
.left_1 {grid-area: left_1;}
.left_2 {grid-area: left_2;}
.left_3 {grid-area: left_3;}
.left_4 {grid-area: left_4;}
/* ----------------- middle --------------- */
.middle {grid-area: middle;}
/* ------------------------------ right ----------------------- */
.right_1 {grid-area: right_1;}
.right_2 {grid-area: right_2;}
.right_3 {grid-area: right_3;}
.right_4 {grid-area: right_4;}
/*------------------------ style grid area -------------------------*/
/* ------------------sidenav ------------------ */
.logoL {
text-align: left;
padding: 0.15em 0.25em;
}
/*----------------------- logoR---------------------*/
.logoR{
display: flex;
flex-direction: row-reverse;/* reverzní řazení tedy logo je zarovnáno vpravo */
}
/* ---------------------------- header ------------------------------ */
.header {
text-align: center;
}
/* ----------- banner -----------------------*/
.banner {
text-align: center;
}
/* ----------------- motto---------------*/
.motto {
text-align: center;
}
/* ----------------- middle --------------- */
.middle {
max-width: 80em;
padding: 1.5em 2.5em 4.5em 2.5em ;
}
/* --------------------------------- left --------------------- */
.left_1, .left_2, .left_3, .left_4 {
padding: 1.5em 2.5em 1.5em 1.5em;
}
/* ------------------------------ right ----------------------- */
.right_1, .right_2, .right_3, .right_4 {
padding: 1.5em 0.5em 1.5em 2.5em;
}
/* ----------------------------- footer ------------------------------ */
.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);
}
.footer:hover {
background-color: #F9F9F9;
}
/* ------------------------------- angličtina Broňa.cz ------------------------------*/
/* --------------------- slovníček------------------------------------------*/
section.dictionary_brona {
display: flex;
flex: 1fr 1fr; /* 2 sloupce stejné šířky */
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin: 0.5em auto;
row-gap: 0.25em; /* mezera mezi řádky */
column-gap: 0.25em; /* mezera mezi sloupci */
max-width: 98%;
}
div.dictionary_list{
display: flex;
flex-direction: column;
justify-content: left;
width: 46%;
padding: 1.25em 0.8em 0.5em 1.5em;
border: #373737 1px solid;
border-radius: 0.5em;
box-shadow: #616161 2px 2px 5px;
text-align: left;
}
div.dictionary_list i{
font-size: 0.9em;
color: #575757;
letter-spacing: 0.1em;
margin-left: 0.25em;
}
/* ---------------------------------------- style ----------------------- */
p{font-size: 1em;margin: 0.15em;}
p span{margin-left: 0.25em; color: #575757; letter-spacing: 0.1em;}
a{font-size: 1em;color: #020202; text-decoration: none; display: block;}
a:hover{font-size: 1em; transform: none;}
/* tlačítka v návodu jak fotit svatbu Tahák - 036_tahak.html ----------------------------------*/
article.svatba nav.obsah {
padding: 0.5em;
display: flex;
flex-direction: row; /* zařadí boxy vedle sebe*/
flex-wrap: wrap; /* při nedostatku místa v řádku řadí boxy automaticky */
justify-content: center;/* zarovnání prvků na podélné ose (vycentrované)*/
align-items: center;
row-gap: 0.25em;/* mezera mezi řádky*/
column-gap: 1.25em;/* mezera mezi sloupci*/
}
article.svatba nav.obsah a{
text-align: center;
padding: 0.25em 0.5em;
margin: 0.15em 0.25em;
width: 12vw;
height: 5vh;
border: #000000 1px solid;
background-color: #faffb06c;
border-radius: 0.25em;
box-shadow: #000000 2px 2px 5px;
overflow: hidden;/* schová text který se nevejde do boxu- zabrání přetečení textu mimo box*/
}
article.svatba nav a.back-to-top{
display: block;
padding: 0.15em 0.5em;
margin: 1.5em auto;
width: 12vw;
height: 3vh;
text-align: center;
border: 1px solid rgba(197, 196, 196, 0.816);
border-radius: 1.25em;
box-shadow: #787878 2px 2px 5px;
color: var(--grey);
}
article.svatba section{ display: block; margin: 0.5em; padding: 1.25em 0.8em 0.5em 1.5em; border: #373737 1px solid;border-radius: 0.5em; box-shadow: #616161 2px 2px 5px;background: var(--lightGreen);}
/* ------------------------ decoration :HOVER for left and right column --------------------------- */
.left_1 a:hover{font-size: 1em; transform: scale(1.2) translateX(2.5em) translateY(0em);transition: all 0.3s ease-in-out;}
.left_2 a:hover{font-size: 1em; transform: scale(1.2) translateX(2.5em) translateY(0em);transition: all 0.3s ease-in-out;}
.right_1 a:hover{font-size: 1em; transform: scale(1.2) translateX(-0.8em) translateY(0em);transition: all 0.3s ease-in-out;}
.right_2 a:hover{font-size: 1em; transform: scale(1.2) translateX(-0.8em) translateY(0em);transition: all 0.3s ease-in-out;}
.right_3 a:hover{font-size: 1em; transform: scale(1.2) translateX(-0.8em) translateY(0em);transition: all 0.3s ease-in-out;}
h1{font-size:1.8em;}
h2{font-size:1.4em;}
h3{font-size:1.25em;}
h4{font-size:1.15em;}
h5{font-size:1.15em;}
h6{font-size:1em;}
h1, h2, h3, h4, h5, h6 {
letter-spacing: 0.1em;
margin: 0.1em 0.2em;
padding: 0.1em 0.2em;
}
mark{
padding: 0.2em 1.25em;
background-color: #ecfd05ee;
}
article {
max-width: 65em;
}
aside a h3{
font-size: 1.15em;
letter-spacing: 0.1em;
}
aside a:hover h3{
font-size: 1.15em;
text-decoration: underline;
}
/* ---------------------------------- vytvořen izualizace tlačítka pro zkratky atd. ------------------------------------------*/
kbd{
border: 1px solid black;
padding: 0.15em 0.45em;
border-radius: 0.35em;
box-shadow: rgb(92, 92, 92) 2px 1px 2px;
margin: 0.1em 0.25em;
background-color: rgb(229, 229, 229);
}
/* ------------------------- zakladni barvy --------------------------- */
.red{color: #fa0202;}
.green{ color: #3d7801;}
.greenyellow{color: greenyellow;}
.blue{ color: #1c03fe;}
.yellow{color: yellow;}
.italic{font-style: italic;}
.oblique{font-style: oblique; font-family: monospace;padding-left: 2.5em;}
.oblique::before{content: "←";}
.nadpis{
font-size:2.5em ;
font-family: 'Thasadith';
}
/* ----------------------- prvni odstavec po h3 trochu odsadime pomoci prvniho pismene ----------------*/
h3 + p::first-letter{
font-size: 1.5em;
margin-left: 0.5em;
}
h3 ~ p {letter-spacing: 0.05em;}
/* ------------------------------------ u prvniho radku roztahneme písmenka --------------------------- */
h3 + p::first-line{ letter-spacing: 0.15em;}
/*--------------------------- použijeme em k zvýraznění písma ------------------------------- */
em{
font-weight: bold;
letter-spacing: 0.1em;
}
/* ------------------------------------ po h2 zvyraznim em a span -- citace -- --------------------------------------*/
h3 em { letter-spacing: 0.25em; font-style: italic;}
h3 span { letter-spacing: 0.05em; font-style: oblique;}
/* -------------------------------- code -------------------------- */
code{
display: block;
width: 96%;
margin: 1.5em auto;
padding: 0.5em;
background-color: #b7ff6fb0;
border: #020202 1px solid;
text-align: left;
}
code.alignLeft{
text-align: left;
max-width: 86em;
}
article code.alignLeft p{
max-width: 86em;
}
.letterSpacing { letter-spacing: 0.25em;}
.strong { font-size: 1.15em; font-style: oblique; font-weight: bolder;}
/*------------------------------- místo tabulek použit seznam ------------------- */
dl {
display: block;
width: 86%;
margin: 1.25em auto;
padding: 0.15em 2.5em;
padding: 1.5em 0.5em;
border: #020202 1px solid;
border-radius: 0.5em;
border: Black 1px solid;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
}
dt{
font-weight: bold;
font-style: normal;
padding: 0.25em 0.15em;
letter-spacing: 0.15em;
}
/* ------------------------- podtrhneme vyraz ---------------------*/
dt::first-line {
text-decoration: underline;
}
dd{ padding: 0.15em 0.02em 0.15em 0.5em;}
/* ------------------- zvetsime privni pismenko a trochu jej pritahneme -------------------*/
dd::first-letter{
font-size: 1,5em;
padding-right: -0.2em;
}
/* .------------------------------- li ------------------ */
li{ list-style: none;}
li a{font-size: 1em; color: #070707;}
li a:hover{
text-decoration: underline;
}
article ol li{
list-style-type: decimal;
margin: 0.5em 0.25em;
}
hr{
border: #020202 1px solid;
margin: 1.5em auto;
width: 86%;
}
/* ------------------------------------------ style--------------------------- */
.centred{text-align: center;}
.white {color: #ffffff;}
.red{color: red;}
.black{color: black;}
/* -------------------------- zvyrazneni odkaz v sekci dron neni v textu patrný a proto jej zvyraznime ------------------*/
.zvyrazneni{
display: block;
margin: 2.5em auto;
padding: 0.5em;
text-align: center;
font-weight: bold;
letter-spacing: 0.15em;
}
/* ---------------------------------------- mezera nad a pod v nabídce -------------------*/
.gapTop{
margin-top: 0.5em;
border-top: #020202 1px solid;
}
.gapBottom{
margin-bottom: 0.5em;
border-bottom: #020202 1px solid;
}
/* ----------------------------- grammar tlačítko pro čtení textu -----------------------*/
.speak-btn {
margin-right: 0.5em;
background-color: rgba(249, 154, 91, 0.544);
cursor: pointer;
font-size: 1.5em;
border: 1px solid #fff;
border-radius: 0.5rem;
box-shadow: rgb(120, 120, 120) 0px 2px 5px;
}
/* ------------------------- zvyrazníme em v základních zkratkách VSC------------------------------*/
article.zakladni_zkratky table tr td em{ margin: 0.1em 0.5em; color: red;letter-spacing: 0.15em; }
article.zakladni_zkratky table tr td em::before {content: "<";}
article.zakladni_zkratky table tr td em::after {content: ">";}
/* ------------------------ zvyrazneni PRE ---------------------- */
/*
pre{ background-color: #f7ffd44f;
padding: 0.25em 0.5em;
border: #020202 1px solid;
border-radius: 1.2em;
}*/
/* ------------------------------------- IMG ----------------------------------------*/
.img_logo{
display: block;
width: 36%;
padding: 0.2em;
}
.img_icon{
display: block;
margin: 0.25em 0.5em 2.5em 0.25em;
padding: 0.25em;
border: solid 0.12em #020202;
border-radius: 0.5em;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
background-color:rgba(255, 255, 255, 0.781);
float: left;
}
/* ------------------------ použito pro rozměr ikony v HTML - Bostrap ikony ---------------------------- */
.img_icon_1{
width: 50px;
height: 50px;
display: block;
margin: 0.25em 0.5em 2.5em 0.25em;
padding: 0.25em;
border: solid 0.12em #020202;
border-radius: 0.5em;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
background-color:rgba(255, 255, 255, 0.781);
float: right;
}
.img_icon_2{
display: block;
margin: 0.25em 0.5em 2.5em 0.25em;
padding: 0.25em;
border: solid 0.12em #020202;
border-radius: 0.5em;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
background-color:rgba(255, 255, 255, 0.781);
float: right;
}
.img_icon_3{
display: block;
margin: 0.25em;
padding: 0.25em;
border: solid 0.12em #020202;
border-radius: 0.5em;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
background-color:rgba(255, 255, 255, 0.781);
float: none;
}
.img_01{
display: block;
width: 86%;
margin: 0.52em auto;
padding: 0.2em;
border: Black 2px solid;
border-radius: 0.5em;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
background-color:rgba(255, 255, 255, 0.781);
}
.img_02{
display: block;
width: 86%;
margin: 0.2em auto;
padding: 0.2em;
border: #848484 2px solid;
border-radius: 0.5em;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(176, 176, 176, 0.338);
}
/* -------------------------------------------- img je textem obtékáno float ----------------------*/
.img_03{
display: block;
width: 45%;
margin: 0.2em 0.5em;
padding: 0.2em;
border: #848484 2px solid;
border-radius: 0.5em;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(176, 176, 176, 0.338);
float: left;
}
.img_error{
display: block;
width: 86%;
margin: 0.2em auto;
padding: 0.2em;
border: none;
border: none;
}
.icon{
display: block;
width: 10%;
margin: 0.2em;
padding: 0.2em;
border: none;
box-shadow: none;
}
.img_trojuhelnik, .img_zarovka{
display: block;
width: 4em;
height: auto;
float: left;
margin: 0.15em 0.25em;
}
/* ------------------------- zvýrazňuje přednastavené hodnoty ------------------------------------ */
.prednastaveny {
font-weight: bold;
}
/* ------------------------ table ---------------------------------*/
table {
padding: 0em;
margin: 0.5em auto;
width: 86%;
border: Black 1px solid;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
}
td {
padding: 0.2em 0.5em;
}
/* ----------------------------- details summary-------------------------- */
details {
display: block;
padding: 0.1em 1.2em;
border: #6A6A6A 1px solid;
}
summary {
display: block;
padding: 0.1em 1.2em;
border: #6A6A6A 1px solid;
list-style: inherit;
}
summary:hover {
padding: 0.1em 1.2em;
color: Blue;
cursor: cell;
cursor: pointer;
}
details:hover {
background-color: White;
}
/* ------------------------------------------------ table ---------------------------------------- */
article table td:nth-child(odd){
font-weight: bold;
}
article table td:nth-child(even){
font-size: large;
}
/* ----------------------- zmena table pro ctyri sloupce ------------------------*/
article table.DlouhyKurz {border: #080808 2px solid;width: 96% ;}
article table.DlouhyKurz td:nth-child(odd){
font-weight: normal;
font-size: 1em
}
article table.DlouhyKurz td:nth-child(even){
font-size: 1em;
font-weight: normal;
}
article tr:nth-child(odd){
background-color: rgba(194, 255, 156, 0.683);
}
article tr:nth-child(even){
background-color: rgba(255, 176, 92, 0.716);
}
ul li span{
display: block;
text-align: right;
float: right;
color: #747474;
padding: 0em 0.25em 0em 1.5em;
}
/* ------------------------------- table tabulka_akordy --------------------------------- hodnoty se opakuji, aby smazaly drive zadané hodnoty 'Table' -- */
article table.tabulka_akordy {border: #080808 2px solid;}
table.tabulka_akordy th { padding: 0.2em 0.5em; text-align: center;}
table.tabulka_akordy td { padding: 0.2em 0.5em;text-align: center;}
article table.tabulka_akordy td:nth-child(odd){font-size: 1.2em;font-weight: bold; border: #020202 1px solid;}
article table.tabulka_akordy td:nth-child(even){font-size: 1em;font-weight: bold;border: #020202 1px solid;}
article table.tabulka_akordy tr:nth-child(odd){background-color: rgba(248, 255, 149, 0.441);}
article table.tabulka_akordy tr:nth-child(even){background-color: rgba(104, 248, 96, 0.504);font-size: 1.4em;}
/* ------------------------------- end table tabulka_akrody --------------------------------- */
/* ---------------------------------- button back---------------------------*/
.button-back{
display: block;
margin: 0.2em;
padding: 0.2em 2em;
border: Silver 1px solid;
position: fixed;
top: 7.5em;
right: 2.5em;
text-align: center;
border-radius: 2.5em;
background-color: White;
box-shadow: 5px 10px 18px #888888;
}
.button-back:hover{
background-color: #B6FF6F;
box-shadow: 5px 10px 8px #888888;
background-image: linear-gradient(#E2FFD4,#F7FFD4);
}
/* Responsive layout zmenšení písma pro rozlišení 1920 */
@media (max-width: 1900px) {
body{
font-size: 0.8em;
}
}
/* Responsive layout zmenšení písma pro rozlišení 1600 */
@media (max-width: 1600px) {
body{
font-size: 0.8em;
}
/* ----------------------------------- grid-container --------------------------------- */
.grid-container {
display: grid;
grid-template-areas:
'logoL header header header header header'
'middle middle middle middle middle middle';
grid-column-gap: 0em; /* mezera mezi column */
}
/* ------------------sidenav ------------------ */
.logoL {grid-area: logoL;}
/* ---------------------------- header ------------------------------ */
.header {grid-area: header;}
/* ---------logo------------------- */
.logoR, .banner, .motto, .left_1, .left_2, .left_3, .left_4,.right_1, .right_2, .right_3, .right_4 {
display: none;
visibility: hidden;
width: 0px;
padding: 0em;
}
table{
width: 98%;
font-size: 0.8em;
font-weight: none;
padding: 0.02em;
margin: 0em;
}
.img_01{
width: 96%;
border: Black 1px solid;
margin: 0.02em;
padding: 0.02em;
}
.img_02{
display: block;
width: 96%;
margin: 0.02em;
padding: 0.02em;
border: Black 1px solid;
}
/* ------------------------------------- IMG ----------------------------------------*/
.Abelton img, .Pinacle img, .Html img{
display: block;
width: 96%;
margin: 0em;
padding: 0.02em;
border: Black 1px solid;
}
/* -------------------------- zvyrazneni odkaz v sekci dron neni v textu patrný a proto jej zvyraznime ------------------*/
.zvyrazneni{
display: inline;
margin: 0.01em auto;
padding: 0.05em;
text-align: center;
font-weight: bold;
letter-spacing: 0.015em;
}
/*------------------------------ vratime seznam do nulové pozice a sebereme mu ramecek --------------- */
dl {margin: 0em;
padding: 0em;
border: none;
border-radius: none;
width: 100%;
margin: 0.25em auto;
padding: 0.2em;
border: none;
border-radius: 0em;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
}