assets/css/main.css

509 lines
9.0 KiB
CSS
Executable File

body.main {
overflow-y : scroll;
overflow-x : hidden;
text-align : center;
padding : 0px;
margin : 0px;
position : absolute;
bottom : 0px;
top : 0px;
left : 0px;
right : 0px;
}
.JSW.OuterBox {
z-index : 5;
}
iframe {
background-color : transparent;
border-radius : 4px;
}
.NoJsHeight {
bottom : 0px;
}
#BoxTop {
font-family: 'Perspective Sans';
color : #000;
position : absolute;
height : 300px;
top : 0px;
left : 0px;
right : 0px;
border-bottom : 1px solid #eaeaea;
text-align : left;
z-index : 4;
}
#BoxMiddle {
text-align : left;
position : absolute;
top : 300px;
right : 0px;
left : 0px;
padding-bottom : 20px;
text-align : center;
box-sizing: border-box;
}
#BoxMiddle.NoJsHeight {
left : 0px !important;
}
#BoxTop .bgImage {
background-size : cover;
background-position : center;
position : absolute;
top : 0px;
left : 0px;
bottom : 0px;
right : 0px;
}
#BoxTop #ListSocialmedia {
position : absolute;
writing-mode : vertical-rl;
text-orientation : upright;
text-align : left;
white-space : normal;
font-size : 10px;
top : 0px;
padding : 5px;
padding-right : 10px;
bottom : 0px;
right : 0px;
background-color : rgba(255, 255, 255, 0.7);
}
#BoxTop #ListSocialmedia a {
display : inline-block;
width : 40px;
height : 40px;
background-size : 100% 100%;
background-repeat : no-repeat;
margin-left : 5px;
}
#BoxTop #ListSocialmedia a svg {
display : inline-block;
width : 40px;
height : 40px;
}
#BoxTop .logo {
float : left;
height : 114px;
margin-right : 8px;
position : relative;
top : 64px;
left : 10%;
z-index : 2;
transition: height 2s, top 2s, left 2s, margin-right 2s;
}
#BoxTop.smallLogo .logo {
height : 40px;
top : 20px;
left : 20px;
margin-right : 2.8px;
}
#BoxTop.smallLogo h1, #BoxTop.smallLogo h2 {
height : 14px;
top : 20px;
left : 20px;
font-size : 22.8px;
}
#BoxTop.smallLogo h1 {
line-height : 22.4px;
}
#BoxTop.smallLogo h2 {
line-height : 36.5px;
}
#BoxTop h1, #BoxTop h2 {
font-size : 65px;
letter-spacing: -0.02em;
margin : 0px;
text-decoration : none;
font-style : italic;
font-weight : bold;
height : 40px;
white-space : nowrap;
position : relative;
width : 0px;
overflow : visible;
top : 64px;
left : 10%;
z-index : 2;
transition: height 2s, top 2s, left 2s, font-size 2s, line-height 2s;
}
#BoxTop h1 a, #BoxTop h2 a {
text-decoration : none;
color : inherit;
}
#BoxTop h1 {
color : #00aff0;
line-height : 64px;
}
#BoxTop h2 {
color : #bedc0a;
line-height : 104px;
}
#BoxTop .subheadingLink {
margin-left : 10%;
font-size : 1.5em;
}
#BoxLinksPos {
position : absolute;
top : 0px;
margin-top : -66px;
left : 0px;
text-align : center;
width : 100%;
}
#BoxLinks {
width : 100%;
padding-top: 300px;
overflow-x : scroll;
-ms-overflow-style: none;
scrollbar-width: none;
white-space : nowrap;
text-align : center;
display : block;
}
#BoxLinks::-webkit-scrollbar {
display : none;
}
#BoxLinks::after {
content: '';
display: inline-block;
width:95px;
height:1px;
}
#BoxLinks a.MenuLink {
display : inline-block;
color : black;
text-shadow: 0px 0px 8px white, 0px 0px 8px white, 0px 0px 8px white, 0px 0px 8px white;
font-size : 22.4px;
padding-left : 15px;
padding-right : 15px;
line-height : 66px;
font-weight : bold;
text-decoration : none;
position : relative;
vertical-align: top;
}
#BoxLinks a:link { }
#BoxLinks a:visited { }
#BoxLinks a:focus { }
#BoxLinks a:hover { color: #00aff0; }
#BoxLinks a:active { color: #42A62A; }
#BoxLinks a.MenuLink.active {
text-decoration : underline;
color : #000;
text-shadow: 0px 0px 8px #bedc0a, 0px 0px 8px #bedc0a, 0px 0px 8px #bedc0a, 0px 0px 8px #bedc0a;
cursor : default;
background-color : transparent;
}
#BoxLinks .submenu {
display: inline-block;
position: relative;
vertical-align: top;
}
#BoxLinks .submenu a.MenuLink {
cursor: default;
}
#BoxLinks .submenu .flapoutcontainer {
display: inline-block;
width : 0px;
}
#BoxLinks .submenu .flapout {
background-color : rgba(255, 255, 255, 0.7);
backdrop-filter: blur(2px);
display: none;
text-align: left;
margin-top : 66px;
}
#BoxLinks .submenu:hover .flapout {
display: inline-block;
}
#BoxLinks .submenu .submenu .flapoutcontainer {
display: inline-block;
width : 0px;
float:right;
}
#BoxLinks .submenu .submenu .flapout {
display: none;
margin-top : 0px;
}
#BoxLinks .submenu .submenu:hover .flapout {
display: inline-block;
}
#BoxLinks .submenu .flapout a.MenuLink {
cursor: pointer;
display: block;
}
#BoxBottom {
background-color: #efebdc;
margin-top: 20px;
}
#BoxBottom .footer__ternary-navigation {
display: inline-block;
text-align: left;
}
#BoxBottom .footer__ternary-navigation li:before {
display: none;
}
#BoxCenter {
position : relative;
display : inline-block;
width : 100%;
max-width : 1200px;
box-sizing : border-box;
padding-left : 30px;
padding-right : 30px;
text-align : left;
}
#BoxCenter.NoJsHeight {
height : 100%;
}
#FrameBox {
width : 100%;
z-index : 3;
}
#FrameBox.NoJsHeight {
height : 100%;
}
#FrameBox iframe {
position : relative;
left : -30px;
width : 100%;
width : calc(100% + 60px);
height : 100%;
margin-right : -100%;
margin-right : calc(-100% - 60px);
float : left;
border : 0px none white;
}
#BoxLeft {
position : static;
width : 300px;
margin-left : -300px;
float : left;
overflow : hidden;
white-space : nowrap;
height: 100vh;
overflow-y: scroll;
-ms-overflow-style: none;
scrollbar-width: none;
}
#BoxLeft::-webkit-scrollbar {
display : none;
}
#BoxMiddle.leftBoxVisible {
padding-left : 300px;
}
.NoJsHeight #BoxLeft {
display : none;
}
.inhaltsverzeichnis {
margin : 0px;
padding-top : 10px;
position : relative;
padding-left : 0px;
width : calc(100% - 20px);
vertical-align : top;
white-space : normal;
color : white;
font-size : 0.8em;
text-align : left;
padding-left : 20px;
}
.inhaltsverzeichnis li {
list-style-type : none;
padding-left : 1em;
line-height : 1.3em;
margin-bottom : 0.2em;
}
.inhaltsverzeichnis li span {
display : inline-block;
margin-right : 0.08em;
margin-left : -1em;
min-width : 1em;
}
.inhaltsverzeichnis ol li {
padding-left : 2em;
}
.inhaltsverzeichnis ol li span {
margin-left : -2em;
min-width : 2em;
}
.inhaltsverzeichnis ol ol li {
padding-left : 3em;
}
.inhaltsverzeichnis ol ol li span {
margin-left : -3em;
min-width : 3em;
}
.inhaltsverzeichnis ol {
padding : 0px;
padding-left : 10px;
margin : 0px;
}
.inhaltsverzeichnis a {
text-decoration : none;
}
.inhaltsverzeichnis a.active {
text-decoration : underline;
color : black;
}
@media handheld, screen and (max-width: 1100px) {
body.main {
overflow-x : auto;
}
#BoxTop .logo, #BoxTop h1, #BoxTop h2 {
top : 20px;
left : 20px;
}
#BoxTop .subheadingLink {
font-size : 1.3em;
margin-left : 5%;
}
#BoxTop {
top : 0px;
height : 200px;
}
#BoxLinks {
padding-top: 200px;
}
#BoxTop .bgImage {
padding-top : 13px;
}
#hessenlink {
display : none;
}
#BoxLeft {
position: absolute;
top: 0px;
left: 0px;
padding-left: 1em;
padding-right: 1em;
width: 100vw;
z-index: 3;
margin-left: 0px;
background-color: white;
}
#BoxLeft::before {
content: '\25C0';
position: absolute;
top: 0px;
left: 0px;
}
#BoxLeft::after {
content: '\25B6';
position: absolute;
top: 5px;
right: 0px;
}
.desktop-only { display: none; }
#BoxMiddle.withLeftBox {
left : 0px !important;
}
#BoxMiddle {
left : 0px !important;
top : 200px;
}
#BoxMiddle.withLeftBox #BoxLeft {
margin-left : 0px !important;
margin-right : 0px;
}
#BoxMiddle.withLeftBox #BoxCenter {
top : 3em;
left : 0px;
}
.NoJsHeight #BoxMiddle.withLeftBox #BoxCenter {
left : 0px;
}
#BoxCenter {
width : 100vw;
}
#BoxCenter {
padding-left : 10px;
padding-right : 10px;
}
#BoxLeft {
position: absolute;
top : 0px;
left : 0px;
padding-left : 1em;
padding-right : 1em;
width : 100vw;
z-index : 3;
margin-left : 0px;
background-color : white;
height: auto;
}
#BoxMiddle.leftBoxVisible {
padding-left : 0px;
}
#BoxLeft:before {
content : '\25C0';
position : absolute;
top : 0px;
left : 0px;
}
#BoxLeft:after {
content : '\25B6';
position : absolute;
top : 5px;
right : 0px;
}
.inhaltsverzeichnis {
margin-top : 0px !important;
white-space : nowrap;
overflow-x : scroll;
padding-bottom : 5px;
}
#BoxLeft ol ol {
display : none;
}
#BoxLeft ol li {
display : inline-block;
margin-right : 2em;
}
#genderlabel { display: none !important; }
}
@media handheld, screen and (max-width: 800px) {
#BoxMiddle {
right : auto;
width : 800px;
}
#BoxCenter {
width : 800px;
}
}