-body
+/** Seite gesamt (Abmessungen, Aussenabstände etc.) */
+
+body.menu,
+body.nomenu
{
padding: 0;
}
{
overflow: hidden;
}
+.nomenu #page
+{
+ padding: 0;
+}
+
+/** Seitenaufteilung mit/ohne Menü für Tablets optimieren */
+
+.menu .content
+{
+ padding: 0;
+}
.nomenu .content
{
padding-bottom: 5em;
content: none;
display: inline;
}
-.nomenu .content > .main,
-.menu .content > .main
+.menu .content > .main,
+.nomenu .content > .main
{
float: none;
width: auto;
border-top: 1px solid @hintergrund;
border-bottom: 1px solid @hintergrund;
}
+.menu .content > .marginal
+{
+ margin: 3em 0 -994em -15em;
+ padding: 2em 0 999em 0;
+ width: 100%;
+ position: static;
+}
.nomenu .content > .marginal
{
margin: 3em 0 -999em 0;
padding-right: 1em;
}
}
-.nomenu .content > .marginal aside.m
-{
- margin: 3.5em -3em -999em -5em;
- padding: 2em 3em 995em 5em;
- border-style: none;
-}
-.menu .content > .marginal
-{
- margin: 3em 0 -994em -15em;
- padding: 2em 0 999em 0;
- width: 100%;
- position: static;
-}
-.nomenu #footer
-{
- border-style: none;
-}
-.menu .content > .marginal > aside.m
+
+
+/** Seitenkopf positionieren */
+
+#header
{
- margin: 0 -12em 1em 17.5em;
+ padding: 1em 3em 0 5em;
@media (max-width: @maxsmalltablet)
{
- margin-right: -13em;
+ margin-left: -1.5em;
+ padding: .5em 2em 0 3.5em;
}
@media (max-width: @maxsmallertablet)
{
- margin-right: -14em;
+ margin-left: -1.2em;
+ padding: 1em 1em 0 2.5em;
}
}
+
+
+/** Bereichsauswahl positionieren */
+
.menu .content > .marginal > #nav
{
position: static;
}
width: auto;
}
-
-
-/** Faux-Column-Hack-Eigengewächs zurücksetzen */
-#header
+.nomenu #menu,
+.menu #menu
{
- padding: 1em 3em 0 5em;
+ position: absolute;
+ width: auto;
+ right: 3em;
@media (max-width: @maxsmalltablet)
{
- margin-left: -1.5em;
- padding: 1em 2em 0 3.5em;
+ top: -5.7em;
+ right: 2em;
}
@media (max-width: @maxsmallertablet)
{
- margin-left: -1.2em;
- padding: 1em 1em 0 2.5em;
+ top: -4.5em;
+ right: 1em;
}
}
-
-.menu #page
+#menu > li.m
{
- max-width: none;
- border-right-style: none;
+ @media (max-width: @maxsmalltablet)
+ {
+ padding: 0 0 0 3em;
+ }
+ @media (max-width: @maxsmallertablet)
+ {
+ padding: 0 0 0 2em;
+ }
}
-.menu #header
+#menu > li.m > .m
{
- margin-right: 0;
- border-right-style: none;
+ @media (max-width: @maxsmalltablet)
+ {
+ font-size: 200%; /* 32px */
+ }
+ @media (max-width: @maxsmallertablet)
+ {
+ font-size: 150%; /* 24px */
+ }
}
-.menu .content
+#menu > li.m > a.m:hover:before,
+#menu > li.m > a.m.selected:before,
+#menu > li.m > strong.m:before
{
- margin: 0;
- padding: 0;
+ @media (max-width: @maxsmalltablet)
+ {
+ content: '> ';
+ margin-left: -.95em;
+ }
+ @media (max-width: @maxsmallertablet)
+ {
+ }
}
+
+
+/** Footer positionieren */
+
.menu #footer
{
position: static;
width: 15em;
background-color: @heller;
}
+.nomenu #footer
+{
+ padding: 0 3em 1.5em 5em;
+ @media (max-width: @maxsmalltablet)
+ {
+ padding: 0 2em 1em 3em;
+ }
+ @media (max-width: @maxsmallertablet)
+ {
+ padding: 0 1em .75em 2.5em;
+ }
+ background-color: @heller;
+ border-style: none;
+}
+
+/** Breadcrump positionieren */
+
+#breadcrumb
+{
+ left: 11.9em;
+ right: 3em;
+ @media (max-width: @maxsmalltablet)
+ {
+ font-size: 87.5%; /* 14px */
+ top: 7.2em;
+ left: 10.3em;
+ }
+ @media (max-width: @maxsmallertablet)
+ {
+ display: none;
+ }
+}
+
+
+/** Faux-Column-Hack für Marginalinhalte */
+
+.nomenu .content > .marginal aside.m
+{
+ margin: 3.5em -3em -999em -5em;
+ padding: 2em 3em 995em 5em;
+ background-color: @heller;
+ position: relative;
+ top: -4.5em;
+}
+.menu .content > .marginal > aside.m
+{
+ margin: 0 -12em 1em 17.5em;
+ @media (max-width: @maxsmalltablet)
+ {
+ margin-right: -13em;
+ }
+ @media (max-width: @maxsmallertablet)
+ {
+ margin-right: -14em;
+ }
+}