html { font-size:0.950em; }
body { background:#fff; color:rgba(0,0,0,0.87); }
footer { background:rgba(0,159,227,1); color:rgba(255,255,255,1); margin-top: 50px; }
main { /* background:#fefefe; */ color:#222; min-height:400px; min-height:86.25vh; }
body {
background-size:100%;
background-repeat: no-repeat;
background-color:rgba(255,255,255,1);
background-position: center top;
padding-bottom: 0px !important;
background-image: url(pic/header-bg-small.svg) !important;
}
a.headerKalenderLink { width:15vw; height:8vw; position:absolute; display:block; top:0.5vw; left:15vw; z-index:2; }
nav { background-color:rgba(255,255,255,1); color:#121212; font-size:115%; }
main aside, main article { background:#fff;}
.container { max-width:none;}
main .container { padding:64px 0px; margin-top:160px; /* min-height:590px; min-height:95vh; */ width:100%; }
main .container > div > h2 { margin-top:320px; text-align: center; color: rgba(255,106,0,1) !important; width:100%; display:block; position:relative; font-weight:400; text-transform: uppercase; font-size:1.25rem; }
footer { min-height:100px !important; border-top:rgba(224,224,224,1.00) 1px solid;}
footer .container { min-height:24px !important;}
aside.admin { padding-top:60px;}
nav { display:block;background-size:contain;background-position:46px;background-repeat:no-repeat;background-image:url(pic/logo-b.svg) !important;z-index:999;position:fixed;}
/* Zoom Navi */
nav .container ul li a { padding:56px 22px 18px 22px; font-size:120%; font-weight:400;}
nav.smooth .container ul li a { -webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;}
nav.slim .container ul li a { padding:16px 18px 15px 18px; font-size:100%; position:relative;}
nav.slim { background-color:rgba(255,255,255,0.70); }
/* Markierung Unterstrich */
nav .container ul li a:after { display:block; position:relative; width:100%; float:left; height:1px; background:rgba(0,157,197,1.00); content:''; opacity:0; margin-top:4px;}
nav .container ul li a:hover:after { opacity:0.33;}
nav .container ul li a.actual:after { opacity:1; }
/* WELCOME IMAGE BOX HOME-SITE */
header div.parallaxImage { font-size:240%; display:block; position:relative; float:left; width:100% !important; max-width:100vw;
max-height:1920px !important; min-height:90vh !important; height:auto !important; }
header div.parallaxImage div.homelogo { display:none !important}
header div.parallaxImage h2 { font-size:120%; font-weight:400; display:inline-block; position:relative; float:left; color:rgba(255,255,255,1.00); width:100%; text-align:center; line-height:0.67 !important;}
header div.parallaxImage h3 { font-size:70%; font-weight:300; display:inline-block; position:relative; float:left; color:rgba(255,255,255,1.00); width:100%; text-align:center; line-height:1.5 !important;}
header div.parallaxImage h2 small { font-weight:400; font-size:33%; }
div.context { min-height:75vh; }
div.actionBox { background-color:transparent !important; background: none !important; }
div.actionBox > input,
div.actionBox > table > tbody { background-color: rgba(0,159,227,0.5) !important; }
header div.parallaxImage div.buttonBar { display:inline-block; position:relative; float:left; width:80%; margin-top: 48px; margin-left: 10%; text-align: center; }
header div.parallaxImage div.buttonBar a.button.desktop {
display:inline-block !important; position:relative; vertical-align: middle; box-sizing: border-box;
width:20%; min-width: 190px; margin:16px 2.5% 16px 2.5% !important; padding-top:220px !important;
font-weight:700; text-transform: uppercase; font-size:35%;
background-color: rgba(91,197,242,1);
background-color: rgba(255,106,0,1);
background-color: rgba(0,159,227,1);
color:rgba(250,250,250,1.00);
background-size:120px;
background-repeat: no-repeat;
background-position: center 80px;
}
a.button.desktop.Kalender { background-image: url(material/ic_today_white_24px.svg); }
a.button.desktop.AGV { background-image: url(material/ic_account_box_white_18px.svg); }
a.button.desktop.MAV { background-image: url(material/ic_people_white_24px.svg); }
a.button.desktop.Auswertung { background-image: url(material/ic_show_chart_white_24px.svg);}
a.button.desktop.Einsatzplaene { background-image: url(material/ic_beenhere_white_24px.svg);}
a.button.desktop.Systemeinstellungen { background-image: url(material/ic_settings_white_18px.svg);}
a.button.desktop.Daten_Backup { background-image: url(material/ic_archive_white_24px.svg);}
a.button.desktop.News { background-image: url(material/ic_info_outline_white_18px.svg);}
a.button.desktop.Rechnungen { background-image: url(material/ic_send_white_24px.svg);}
a.button.desktop.Urlaubsuebersicht { background-image: url(material/ic_apps_white_24px.svg);}
a.button.desktop.CSVimport { display:none !important; background-image: url(material/ic_archive_white_24px.svg);}
header div.parallaxImage div.buttonBar a.button.desktop.apps { background-image: url(material/app-white.svg); background-color: rgba(0,171,78,1.00);}
header div.parallaxImage div.buttonBar a.button.desktop:hover { cursor: pointer; background-color: rgba(255,106,0,1); background-position: center 24px; background-size:80px; padding-top:120px !important; }
a.button.desktop { padding-bottom:0px !important; padding-left: 0px !important; padding-right: 0px !important; overflow: hidden; }
a.button.desktop div { background: rgba(0,0,0,0) !important; display:inline-block !important; text-transform: none !important; padding:12px; min-height: 0px; max-height: 0px; margin-top: 15px; color:rgba(255,255,255,0.00); line-height: 20px; margin-bottom: 0px !important; text-align:center; box-sizing: border-box; padding-top:36px; overflow:hidden }
a.button.desktop:hover div { color: rgba(255,255,255,1); background: rgba(0,0,0,0.45) !important; padding-top:32px; min-height: 148px; max-height: 155px; }
a.button.desktop, a.button.desktop div {
-webkit-transition: all 100ms ease-in-out;
-moz-transition: all 100ms ease-in-out;
-ms-transition: all 100ms ease-in-out;
-o-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
}
div.infoBobble { font-size:15px; width:25vw; max-width:700px; min-width:360px; display:block; position:fixed; z-index:999 !important; background-color: rgba(255,106,0,1); padding:12px 24px 12px 62px; right:-600px; -webkit-box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.7); box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.7); line-height: 24px; background-image: url(material/ic_info_outline_white_18px.svg); background-position: 8px center; background-repeat: no-repeat; background-size: 40px; color:rgba(255,255,255,1.00); -webkit-transition: all 700ms ease-in-out; -moz-transition: all 700ms ease-in-out; -ms-transition: all 700ms ease-in-out; -o-transition: all 700ms ease-in-out; transition: all 700ms ease-in-out; opacity:0; }
div.infoBobble a { color:rgba(255,255,255,1.00); text-decoration: underline; cursor:pointer; }
div.parallaxImage div.infoBobble:first-child { top:122px !important; }
div.parallaxImage div.infoBobble:nth-child(2) { top:202px !important; }
div.parallaxImage div.infoBobble:nth-child(3) { top:282px !important; }
div.infoBobble.display { right:0px; opacity:0.97; }
div.infoBobble.display:hover { opacity:1; background-color: rgba(25,25,25,1); }
main .container { min-height:1px !important; }
/* Content-Formatierung */
main div.left70 { display:block; float:left; width:69%; }
main div.right30 { display:block; float:right; width:25%; min-height:128px; margin-right: 4%; }
/* Allgemeines aussehen */
main article, main aside { padding:28px 20px; display:block; position:relative; float:left; margin-bottom:24px; width:100%;}
main article:nth-child(even) { background-color:rgba(0,157,197,0.10); }
main article { border-bottom:2px solid rgba(0,157,197,0.5); width:80%; margin-left: 10%; }
/* Content */
main article > h2, main article > p { display:block; float:left; margin:0.5% 2%; }
main article > h2 { text-align:left; font-weight:700; font-size:130%; hyphens: auto; word-break: break-all; }
main article > p { line-height:1.67em; opacity:0.9; font-size:110%; font-weight:400; width:65%; }
main article > a > img,
main article > img { display:block; float:left; width:25%; }
main article > time { display:block; margin-top:-12px; width:98%; text-align:right;
font-size:87%; opacity:0.87; z-index:2; }
main article > p > a { color:rgba(0,0,0,1.00); font-weight:400; font-size:105%; }
main article > p > a:hover { text-decoration:underline; }
main article a.speichern { display:block; position:relative; float:right; padding:8px 24px; text-transform:uppercase; max-width:25%; }
/* Andere Abwandlungen - Impressum, Datenschutz, Haftung etc... */
main article.imprint.half { width:45%; margin:2.5%; }
main article.imprint > h2,
main article.imprint > h3,
main article.imprint > p { line-height:1.67em; opacity:0.90; float:left; margin-left:2%; width:95%; font-weight:400;}
main article.imprint > h2 { font-size:185%; }
main article.imprint > p { font-size:100%; }
/* Seiten - News */
main aside { font-size:95%; padding-bottom:12px; -webkit-box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.33); box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.33);}
main aside > div { width:100%; position:absolute; top:0px; left:0px; height:96px; z-index:1; overflow:hidden; background-size:100%; background-position:center; background-repeat:no-repeat;}
main aside>a { width:56px; height:56px; background-image:url(pic/g_link.svg); -webkit-border-radius: 28px; border-radius: 28px; background-size:90%; opacity:0.87; background-position:center; background-repeat:no-repeat; overflow:hidden; position:absolute; top:67px; right:24px; z-index:2; background-color:rgba(255,255,255,1.00); }
main aside>a:hover { opacity:1; }
main aside h3 { opacity:1; display:block; padding-right:16%; margin-top:80px; }
main aside time { display:block; margin-top:-12px; width:98%; text-align:right; font-size:87%; opacity:0.87; z-index:2; }
main aside p { line-height:24px; margin-top:24px; overflow:hidden; text-align:justify; }
/* Linien / Abstandsbalken */
main article h2:after,
main aside h3:after { content:''; display:block; width:100%; height:1px; margin:8px 0px 16px 0px; }
main article h2:after { background:rgba(0,157,197,0.5); }
main aside h3:after { background:rgba(0,157,197,0.1); }
mark { background: #0d47a1; color: white; padding: 0px 8px; }
main .container { padding: 0px 0px !important; }
#page {
padding-top: 0px !important;
}
.loginbox { display:block;
position:relative;
min-width:380px;
width:380px;
width:30vw;
max-width:480px;
padding: 170px 32px 32px 32px;
background-color:rgba(255,255,255,1);
margin:90px auto 0 auto;
margin:13vw auto 0 auto;
background-image: url(pic/logo-b.svg);
background-repeat:no-repeat;
background-position: center 24px;
background-size:240px;
-webkit-box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.37);
box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.37);
border-radius:24px;
}
.loginbox > form > button { font-size:18px; width:96%; margin-left: 2%; border-radius: 24px; text-transform: uppercase; font-weight:800; margin-top:2px; background:rgba(255,106,0,1) !important }
ul#sort a.button.solo:hover,
ul#sort a.button.solo {width:auto !important; min-width: 36px !important; max-width:100% !important; background-repeat: no-repeat; background-position: right top; background-size: 24px; }
ul#sort a.button.solo.edit { background-image:url(material/ic_build_white_18px-topright.svg); }
ul#sort a.data.edit:hover,
ul#sort a.data.edit { width:24px !important;
min-width: 24px !important;
max-width: 24px !important;
min-height: 24px !important;
font-size: 0px !important; color:rgba(0,0,0,0) !important;
background-repeat: no-repeat; background-position: center; background-size: 18px;
padding:0px 0px 0px 0px !important;
background-image: url(material/ic_settings_white_18px.svg); }
ul#sort button.speichern { /* min-width:32px !important; */ padding:6px 8px 6px 8px !important; /* margin-left: 18px !important; margin-right: 6px !important;*/}
div.timeElement.einsatz.warning {
background: url(material/ic_warning_white_24px.svg), #fefcea !important;
background: url(material/ic_warning_white_24px.svg), -moz-linear-gradient(top, #fefcea 0%, #f1da36 100%) !important;
background: url(material/ic_warning_white_24px.svg), -webkit-linear-gradient(top, #fefcea 0%,#f1da36 100%) !important;
background: url(material/ic_warning_white_24px.svg), linear-gradient(to bottom, #fefcea 0%,#f1da36 100%) !important;
background-position:right center !important; background-repeat: no-repeat !important; background-size: contain !important;
}
ul.onpagenav { display:block; position:absolute; top:20px; right:16vw; z-index:6; }
ul.onpagenav form,
ul.onpagenav li { display:inline-block; float:left; margin:0.5vw 0px 0px 0px !important; padding:0px 0px 0px 0px !important; }
ul.onpagenav button.navlogout,
ul.onpagenav li a { display:block; box-sizing: border-box; padding:8px 12px; color:rgba(255,255,255,1.00); font-size:1.2rem; margin:0px 0px 0px 0px !important; }
ul.onpagenav li a:hover { text-shadow: 1px 1px 2px #404040; }
ul.onpagenav li a.actual { font-weight:600; }
ul.onpagenav button.navlogout { margin-left:32px !important; margin-top:5px !important; min-width:40px !important; padding:8px 12px 8px 32px !important; min-height:12px; font-size:16px; line-height:16px !important; border-radius: 16px; background-color:rgba(255,255,255,1.00); color:rgba(255,106,0,1); background-image: url(pic/login-icon.svg); background-repeat: no-repeat;
background-position: 26px center;
background-size: 14px; }
ul.onpagenav button.navlogout:hover {
color:rgba(255,255,255,1.00); background-color:rgba(255,106,0,1); background-image: url(pic/login-icon-weiss.svg);
}
form.topFix { box-sizing: border-box !important; padding:0px !important; position:absolute !important; right:90px; z-index:5 !important; top:8px; width:256px; text-align: center; }
form.topFix.one { right:90px; }
form.topFix.two { right:346px; }
form.topFix.three { right:605px; width: auto !important; }
div.updateTipp > div.toggleme { position: absolute; top:0px; left:0px; width:64px; height:64px; display:block; background: rgba(0,0,0,0.02); cursor:pointer; }
div.updateTipp > div.toggleme:hover { background-color: rgba(42,158,243,0.67); }
div.updateTipp {
display:block;
float:none;
position:fixed;
width:480px; height:64px; overflow: hidden;
box-sizing: border-box;
padding:12px 32px 32px 80px;
z-index:9;
background-color: rgba(255,106,0,0.7);
-webkit-box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.45);
box-shadow: 2px 2px 5px 0 rgba(0,0,0,0.45);
opacity:1;
left:100vw;
margin-left: -76px;
-webkit-transition: all 300ms ease-in-out;
-moz-transition: all 300ms ease-in-out;
-ms-transition: all 300ms ease-in-out;
-o-transition: all 300ms ease-in-out;
transition: all 300ms ease-in-out;
}
div.updateTipp.warning { background-color: rgba(255,0,0,0.9); }
div.updateTipp.free { background-color: rgba(0,0,0,0.2); }
div.updateTipp.free:not(.isopen) { -webkit-box-shadow: 0px 0px 0px 0 rgba(0,0,0,0.0); box-shadow: 0px 0px 0px 0 rgba(0,0,0,0); }
div.updateTipp.free > div.toggleme,
div.updateTipp.free > div.toggleme:hover { background: rgba(0,0,0,0.0); }
div.updateTipp.pos0 { top:6px; z-index:99; }
div.updateTipp.pos1 { top:76px; z-index:10; }
div.updateTipp.pos2 { top:145px; z-index:9; }
div.updateTipp.isopen {
margin-left: -480px;
padding: 17px 32px 32px 80px;
height: auto !important;
background-color: rgba(252,252,252,1.00);
}
div.updateTipp.isopen:not(.free) p {
max-height: calc(100vh - 180px) !important;
/* overflow-y: auto; */
}
div.updateTipp.free.isopen p {
max-height: 500px !important;
min-height: 120px;
overflow-y: none;
}
div.updateTipp:before { background-image: url(material/ic_info_white_18px.svg) }
div.updateTipp.warning:before { background-image: url(material/ic_warning_white_24px.svg) }
div.updateTipp.free:before { background-image: url(material/baseline-notification_important-24px.svg) }
div.updateTipp.chat:before { background-image: url(material/ic_chat_bubble_white_24px.svg) }
div.updateTipp.bug:before { background-image: url(material/baseline-bug_report-24px.svg) }
div.updateTipp.check:before { background-image: url(material/ic_check_white_24px.svg) }
div.updateTipp.isopen:before { background-image: url(material/ic_close_black_24px.svg) }
div.updateTipp:before {
z-index: 100;
pointer-events: none;
top: 7px;
left: 7px;
opacity: 0.9;
display: block;
position: absolute;
width: 48px;
height: 48px;
content: '';
background-size: 36px;
background-repeat: no-repeat;
background-position: 6px 6px;
animation-name: hint;
animation-duration: 0.85s;
animation-iteration-count: 3;
animation-delay: 0.5s;
}
@keyframes hint {
0% { transform: translateY(0px); }
50% { transform: translateY(-6px); }
100% { transform: translateY(0px); }
}
div.updateTipp > h2,
div.updateTipp > h3,
div.updateTipp > h4,
div.updateTipp > h5 { text-transform: uppercase; font-weight:600; color: rgba(5,94,167,1.00) !important; display:block; }
div.updateTipp > p { display:inline-block; margin-top:30px; font-size:92%; font-weight:400; color:rgba(85,85,85,1.00); width:100%; position: relative; float:left; min-height:80px; }
div.updateTipp > p i { display:block; margin-top: 12px; padding-top: 12px; border-top:1px solid rgba(170,170,170,0.30); font-size :92%; font-weight:400; color: rgba(237,96,0,1.00) }
@media only screen and (max-width : 1600px) { }
@media only screen and (max-width : 1280px) { header div.parallaxImage div.buttonBar a.button { font-size:50%; } }
@media
only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio: 1),
only screen and (max-width : 1040px) { header div.parallaxImage div.buttonBar a.button { font-size:40%; } }
@media only screen and (max-width : 960px) { }
/* FULL MOBILE */
@media
only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1),
only screen and (max-width : 765px) {
header div.parallaxImage div.buttonBar a.button { width:30%; padding:20px 0px 0px 0px !important; }
header div.parallaxImage div.buttonBar a.button:first-child,
header div.parallaxImage div.buttonBar a.button:nth-child(2),
header div.parallaxImage div.buttonBar a.button:nth-child(3) { margin-left:2.5%; }
header div.parallaxImage div.buttonBar a.button > div.linktext { width:90%; }
header div.parallaxImage div.buttonBar a.button > div.linktext p { font-size:75%; }
main div.left70,main div.right30 { float:left; width:100%; }}
@media only screen and (max-width : 720px) { }
@media only screen and (max-width : 520px) { header div.parallaxImage h2 { font-size:170%; } }
/* iPhone 5 */
@media
only screen and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait),
only screen and (max-width : 389px) { }