/* 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;}
/* ---------------------------------- */
* {
box-sizing: border-box;
}
/* Style the body */
body {
font-family: Raleway, Verdana, Geneva, Arial, Helvetica, sans-serif;
margin: 0;
background-image: url(../images/001.svg);
}
/* --------------------------------------- Basic style ------------------------------------------- */
a{
background-color:transparent;
-webkit-text-decoration-skip:objects;
text-decoration: none;
color: #4F4F4F;
padding: 0.2em 0.5em;
margin: 0.2em;
}
a:active,a:hover{
outline-width: 1px;
color: #0B0B0B;
background-color: #FDF5E6;
}
a.gohome {
padding: 0.2em 0.5em;
margin: 0.2em;
font-size: 1.2vw;
color: #FBFBFB;
position: fixed;
top: 2em;
right: 2em;
border: black 1px solid;
border-radius: 2em;
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0, 0.6); /* Black w/opacity/see-through */
}
a.gohome:hover{
color: Black;
background-color: #96FF2F;
transition: 1.2s;
}
ul li{
list-style: none;
display: block;
width: 85%;
margin: 0.2em 0em;
}
ul li span{
display: block;
text-align: right;
float: right;
color: #959595;
padding-right: 5px;
}
.Img_02{
border: 1px #C6C6C6 solid;
display: block;
width: 20%;
margin: 1.25em;
padding: 0.2em;
-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);
float: right;
}
.Img_03{
display: block;
width: 86%;
margin: 1.25em;
padding: 0.2em;
float: none;
}
.Img_04{
border: 1px #C6C6C6 solid;
display: block;
width: 65%;
margin: 1.25em;
padding: 0.2em;
-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);
float: left;
}
.Img_05{
border: 1px #C6C6C6 solid;
display: block;
width: 65%;
margin: 1.25em;
padding: 0.2em;
-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);
float: right;
}
.Img_06{
display: block;
width: 65%;
margin: 0em auto;
padding: 0.1em;
float: none;
}
.Img_07{
display: block;
width: 35%;
margin: 0.1em;
padding: 0.1em;
float: left;
}
/* ---------------------- definice pro THIRD ------------------------------------- */
table.four {
margin: 0px auto;
border-spacing: 0.55em;
}
table.four td {
width: 20%;
padding: 0.8em 0.6em;
border: #888888 1px solid;
border-radius: 0.25em ;
text-align: center;
box-shadow: 3px 5px 2px #6A6A6A;
background-color: White;
}
table.four a{
outline-width: 2em;
background-color: White;
text-transform: uppercase;
font-weight: bolder;
color: Black;
text-decoration: none;
}
table.four a:hover{
outline-width: 0.2em;
background-color: White;
text-transform: none;
font-weight: normal;
}
/* Header/logo Title */
.header {
padding: 1.5em;
text-align: center;
}
/* Increase the font size of the heading */
.header h2 {
font-size: 2.5vw;
}
/* Style the top navigation bar */
.navbar {
overflow: hidden;
background-color: White;
border-bottom: #484848 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);
}
/* Style the navigation bar links */
.navbar a {
float: left;
display: block;
color: #0D0D0D;
text-align: center;
padding: 14px 20px;
text-decoration: none;
}
/* Right-aligned link */
.navbar a.right {
float: right;
}
/* Change color on hover */
.navbar a:hover {
background-color: #ddd;
color: black;
}
/* Column container */
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
margin: 2em 0.2em;
}
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.left {
-ms-flex: 25%; /* IE10 */
flex: 25%;
}
/* Main column */
.main {
-ms-flex: 50%; /* IE10 */
flex: 50%;
padding: 2em;
}
.right {
-ms-flex: 30%; /* IE10 */
flex: 25%;
}
.sideCards{
display: block;
padding: 2em;
margin: 1.25em;
-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);
border-radius: 0em 2.5em ;
background-color:rgba(18,255,7,0.3);
}
/* Details Main */
details {
display: block;
padding: 0.5em 0.2em;
float: none;
}
/* Sumary Main column */
summary {
font-size: 1.2em;
padding: 0.5em 0.2em;
color: #161616;
}
summary:hover {
font-size: 1.2em;
color: Black;
padding: 0.5em 0.2em;
background-color:rgba(18,255,7,0.3);
}
details summary span{
display: block;
text-align: right;
float: right;
color: Red;
padding-right: 5px;
font-size: 0.8em;
}
/* Footer */
.footer {
padding: 2em;
text-align: center;
border-top: #BABABA 1px solid;
background-color:rgba(128,251,250,0.2);
}
.footer a{
color: Black;
text-decoration: none;
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}