/*//////////////////////////////////////////////////////////////////////////////
// //
// BARVY //
// //
////////////////////////////////////////////////////////////////////////////////
#c00a30 vínově červená pro podtržení odkazů
#ddd světle šedá výchozí barva pozadí webu
#646464 -> #3c3c3c tmavě šedá -> velmi tmavě šedá záhlaví / zápatí
#3c3c3c -> white velmi tmavě šedá -> bílá pozadí webu
#f3f1dc světle béžová pozadí stránky 1
#e9e7d2 . 2
#dfddc8 . 3
#d5d3be tmavě béžová pozadí stránky 4
orange oranžová podtržení odkazů v menu
*/
/*//////////////////////////////////////////////////////////////////////////////
// //
// DEFINICE VLASTNÍCH PÍSEM //
// //
//////////////////////////////////////////////////////////////////////////////*/
@font-face {
font-family: Calibri_uploaded;
src: url("calibri.ttf");
}
/*//////////////////////////////////////////////////////////////////////////////
// //
// ELEMENTY HTML //
// //
//////////////////////////////////////////////////////////////////////////////*/
* {
font-family: Calibri_uploaded;
}
/*//////////////////////////////////////////////////////////////////////////////
// //
// ODKAZY //
// //
//////////////////////////////////////////////////////////////////////////////*/
a {
text-decoration: none;
color: black;
font-weight: bold;
cursor: pointer;
border-bottom: 2px dotted #c00a30;
}
a:hover {
border-bottom: 2px solid #c00a30;
}
.header_menu_links {
color: inherit;
border-bottom: 2px dotted orange;
padding: 4% 0% 0.5% 0%;
}
.header_menu_links:hover {
border-bottom: 4px solid white;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
-webkit-transition-property:border-bottom;
-webkit-transition-duration:0.1s;
-webkit-transition-timing-function:linear;
-moz-transition-property:border-bottom;
-moz-transition-duration:0.1s;
-moz-transition-timing-function:linear;
-o-transition-property:border-bottom;
-o-transition-duration:0.1s;
-o-transition-timing-function:linear;
transition-property:border-bottom;
transition-duration:0.1s;
transition-timing-function:linear;
}
/*//////////////////////////////////////////////////////////////////////////////
// //
// Page, header, content wrapper //
// //
//////////////////////////////////////////////////////////////////////////////*/
#page_background {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #ddd; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, white, #3c3c3c, white); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(left, white, #3c3c3c, white); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left, white, #3c3c3c, white); /* For Firefox 3.6 to 15 */
background: linear-gradient(left, white, #3c3c3c, white); /* Standard syntax */
}
#header_wrapper,
#header_bottom,
#content_wrapper {
position: fixed;
top: 0px;
left: 15vw;
width: 70vw;
height: 10%;
}
#header_wrapper {
background: #3c3c3c; /* For browsers that do not support gradients */
background: -webkit-radial-gradient( #646464, #3c3c3c); /* For Safari 5.1 to 6.0 */
background: -o-radial-gradient( #646464, #3c3c3c); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient( #646464, #3c3c3c); /* For Firefox 3.6 to 15 */
background: radial-gradient, #646464, #3c3c3c); /* Standard syntax */
display: flex;
margin: 0 auto;
z-index:1;
color: white;
}
#header_bottom {
top: 10%;
background: rgba(243,241,220,0); /* For browsers that do not support gradients */
background: -webkit-linear-gradient( rgba(243,241,220,1), rgba(243,241,220,0)); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient( rgba(243,241,220,1), rgba(243,241,220,0)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient( rgba(243,241,220,1), rgba(243,241,220,0)); /* For Firefox 3.6 to 15 */
background: linear-gradient, rgba(243,241,220,1), rgba(243,241,220,0)); /* Standard syntax */
z-index:1;
}
#content_wrapper {
position: absolute;
min-height: 400vh;
color: black;
background-color: red; /*#f3f1dc;*/
}
#header_name,
#header_menu {
font-weight: bold;
}
#header_name {
margin: auto 4%;
text-align: left;
font-size: 6vh;
/* color: orange;*/
}
#header_menu {
margin: auto 4% auto auto;
text-align: right;
font-size: 3vh;
}
/*//////////////////////////////////////////////////////////////////////////////
// //
// Content //
// //
//////////////////////////////////////////////////////////////////////////////*/
.page_container {
width: 90%;
height: 90vh;
padding: 10vh 5% 0 5%;
position: absolute;
vertical-align: middle;
display: flex;
margin: 0 auto;
}
#page_1_container {
top: 0vh;
background-color: #f3f1dc;
}
#page_2_container {
top: 100vh;
background-color: #e9e7d2;
}
#page_3_container {
top: 200vh;
background-color: #dfddc8;
}
#page_4_container {
top: 300vh;
background-color: #d5d3be;
}
#content_me_text {
margin: auto 5% auto 0;
text-align: left;
padding: 5%;
max-width: 45%;
font-size: 3vh;
}
#content_me_foto {
position: absolute;
right: 5%;
top: 20vh;
max-width: 45%;
max-height: 70vh;
}
#content_exp_text_left,
#content_exp_text_right {
margin: 5% 0 0 0;
text-align: left;
padding: 5%;
width: 45%;
font-size: 3vh;
}
#content_exp_text_right {
padding: 5% 0 0 0 ;
}
#content_exp_text_contact {
margin: 10% 0 0 0;
text-align: left;
padding: 5%;
width: 100%;
font-size: 3vh;
}
#content_exp_text_footer {
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 5vh;
padding: 2vh 0 0 0 ;
background: #3c3c3c; /* For browsers that do not support gradients */
background: -webkit-radial-gradient( #646464, #3c3c3c); /* For Safari 5.1 to 6.0 */
background: -o-radial-gradient( #646464, #3c3c3c); /* For Opera 11.1 to 12.0 */
background: -moz-radial-gradient( #646464, #3c3c3c); /* For Firefox 3.6 to 15 */
background: radial-gradient, #646464, #3c3c3c); /* Standard syntax */
color: white;
text-align: center;
font-size: 2.5vh;
}
.contact {
font-weight: bold;
min-width: 4em;
display: inline-block;
}
/*//////////////////////////////////////////////////////////////////////////////
// //
// Infobox //
// //
//////////////////////////////////////////////////////////////////////////////*/
.infobox {
cursor: pointer;
border-bottom: 2px dotted #c00a30;
}
.infobox:hover {
border-bottom: 2px solid #c00a30;
}
.infobox span {
position: absolute;
padding: 10px;
min-width: 200px;
margin: 3px 0 0 0;
border: black 1px solid;
opacity: 0;
display:block;
z-index: -1;
background-color: #ddd;
text-decoration: none;
font-size: 2vh;
transition-delay:0.1s; /* Delay before going back*/
}
.infobox:hover span {
opacity: 1;
z-index: 100;
-webkit-transition-property:opacity;
-webkit-transition-duration:0.1s;
-webkit-transition-timing-function:linear;
-moz-transition-property:opacity;
-moz-transition-duration:0.1s;
-moz-transition-timing-function:linear;
-o-transition-property:opacity;
-o-transition-duration:0.1s;
-o-transition-timing-function:linear;
transition-property:opacity;
transition-duration:0.1s;
transition-timing-function:linear;
}
.photo_thumbnail {
max-width: 20vw;
max-height: 20vh;
}
/*//////////////////////////////////////////////////////////////////////////////
// //
// test //
// //
//////////////////////////////////////////////////////////////////////////////*/
/*.photo_thumbnail:active{
max-width: 500px;
max-height: 500px;
}*/
#download {
background-color: #ddd;
padding: 10px;
border: #c00a30 2px solid;
font-weight: bold;
font-size: 3vh;
-webkit-transition-property:background-color;
-webkit-transition-duration:0.2s;
-webkit-transition-timing-function:linear;
-moz-transition-property:background-color;
-moz-transition-duration:0.2s;
-moz-transition-timing-function:linear;
-o-transition-property:background-color;
-o-transition-duration:0.2s;
-o-transition-timing-function:linear;
transition-property:background-color;
transition-duration:0.2s;
transition-timing-function:linear;
}
#download:hover {
background-color: #eee;
-webkit-transition-property:background-color;
-webkit-transition-duration:0.2s;
-webkit-transition-timing-function:linear;
-moz-transition-property:background-color;
-moz-transition-duration:0.2s;
-moz-transition-timing-function:linear;
-o-transition-property:background-color;
-o-transition-duration:0.2s;
-o-transition-timing-function:linear;
transition-property:background-color;
transition-duration:0.2s;
transition-timing-function:linear;
}