:root
{
--text-signal: red;
--text-link: blue;
--background-darker: rgba(0,0,0,0.3);
--background-menu: rgba(0,0,0,0.85);
--background-content: #E8E8E8;
--background-line: #D0D0D0;
--background-footer: rgb(60,60,60);
--menu-item: #E0E0E0;
--menu-item-hover: #FFFFFF;
--menu-item-border: #707070;
--background-footer-fixed : yellow;
--callbutton-text: white;
--callbutton-background: #A0A040;;
--callbutton-background-hover: #C0C040;
}
body
{
background-color: var(--background);
background: no-repeat center center;
background-size: cover;
background-attachment: fixed;
background-position: 50% 50%;
color: var(--text);
font-family: 'Mira Sans', 'Lucida Sans Unicode', 'Lucida Grande', 'Helvetica', sans-serif;
font-size: var(--basic-font-size);
padding: 0px;
margin: 0px;
}
.darker
{
background-color: var(--background-darker);
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: -1;
}
#mylogo
{
position: fixed;
top: 8px;
left: 100px;
}
#menu
{
position: fixed;
background-color: var(--background-menu);
top: 60px;
left: 0px;
width: 100%;
max-width: 1000;
height: 80px;
z-index: 100;
}
.menu-item
{
position: relative;
float: left;
}
.menu-item-button
{
position: relative;
float: left;
color: var(--menu-item);
padding-left: 10px;
padding-right: 10px;
font-size: 1.1em;
border: 1px solid var(--transparent);
line-height: 40px;
margin-top: 19px;
}
.menu-item-button:hover
{
color: var(--menu-item-hover);
cursor: pointer;
}
.menu-item-language
{
border: 1px solid var(--menu-item-border);
border-radius: 5px;
margin-left: 20px;
}
.menu-item-language:hover
{
border: 1px solid var(--menu-item-hover);
cursor: pointer;
}
#website-settings
{
display: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 90%;
max-width: 400px;
background-color: #F0F0F0;
color: #000000;
border-radius: 5px;
z-index: 101;
}
#website-settings-content
{
margin: 20px;
}
#website-settings-close
{
position: absolute;
right: 15px;
top: 10px;
width: 40px;
height: 40px;
background: no-repeat center center;
background-size: 40px 40px;
background-image: url(../images/icons/highlight_off-24px.svg);
border-radius: 50%;
cursor: pointer;
}
#website-settings-close:hover
{
}
.website-settings-bullet
{
margin: 20px;
margin-top: 10px;
margin-left: 10px;
padding-left: 40px;
background-repeat: no-repeat;
background-image: url(../images/icons/done-24px.svg);
background-position: 0px center;
background-size: 28px 28px;
}
.btn-select-language
{
margin: 20px;
width: 80px;
height: 80px;
background-color: #E0E0E0;
border-radius: 50% 50%;
border: 2px solid #E0E0E0;
display: grid;
justify-content: center;
align-items: center;
background-repeat: no-repeat;
background-position: center center;
background-size: 50px auto;
}
.btn-select-language:hover
{
background-color: #F8F8F8;
cursor: pointer;
}
.btn-select-language-selected
{
background-color: #FFFFFF;
border: 2px solid #C0C0C0;
}
#footer
{
background-color: var(--background-footer);
left: 0px;
width: calc(100% - 60px);
text-align: center;
padding: 30px;
}
.footer-fixed
{
position: fixed;
bottom: 0px;
background-color: var(--background-footer-fixed);
}
.callButton
{
position: relative;
float: left;
background-color: var(--callbutton-background);
border-radius: 3px 3px;
color: var(--callbutton-text);
line-height: 30px;
font-weight: 400;
text-align: center;
white-space: pre-line;
vertical-align: middle;
cursor: pointer;
margin-left: 20px;
margin-right: 20px;
}
.callButton:hover
{
background-color: var(--callbutton-background-hover);
}
.callButton a
{
padding-left: 20px;
padding-right: 20px;
height: 30px;
float: left;
}
a
{
color: white;
text-decoration: none;
}
a.textlink { color: var(--link-text-color); cursor: pointer; }
a.textlink:hover { text-decoration: underline; }
a.footerlink { text-decoration: none; color: var(--footerlink-text-color); cursor: pointer; font-size: 120%; margin: 10px; text-shadow: 0 0 5px black;}
a.footerlink:hover { text-decoration: underline; }
a.footerlink:visited { color: var(--footerlink-text-color); text-decoration: underline; }
.footerlink-separator { color: var(--footerlink-text-color); text-shadow: 0 0 5px black; margin-left: 3px; }
.icon_infos
{
background-repeat: no-repeat;
background-image: url(../images/icons/cnf-info.svg);
background-position: 10px center;
background-size: 20px 20px;
}
.icon_dashboard
{
background-repeat: no-repeat;
background-image: url(../images/icons/dashboard-24px.svg);
background-position: 10px center;
background-size: 20px 20px;
}