47d71ba0ce3ad413dc241eef37ce5d6cfbafb923
[website] / src / main / webapp / less / tablet / layout.less
1 body
2 {
3   padding: 0 0 0 5em;
4   @media (max-width: @maxsmalltablet)
5   {
6     padding: 0 0 0 3.5em;
7   }
8   @media (max-width: @maxsmallertablet)
9   {
10     padding: 0 0 0 2.5em;
11   }
12 }
13
14 #header
15 {
16   @media (max-width: @maxsmalltablet)
17   {
18     margin-left: -1.5em;
19   }
20   @media (max-width: @maxsmallertablet)
21   {
22     margin-left: -1.2em;
23   }
24 }
25
26 .cols_1
27 {
28   padding-right: 3em;
29   @media (max-width: @maxsmalltablet)
30   {
31     padding-right: 2em;
32   }
33   @media (max-width: @maxsmallertablet)
34   {
35     padding-right: 1em;
36   }
37 }
38 .cols_1 > .content
39 {
40   padding-bottom: 5em;
41   @media (max-width: @maxsmalltablet)
42   {
43     padding-bottom: 4em;
44   }
45   @media (max-width: @maxsmallertablet)
46   {
47     padding-bottom: 3.25em;
48   }
49 }
50 .cols_2 > .content
51 {
52   padding: 0 15em 0 0;
53   margin-right: -15em;
54   z-index: 2;
55 }
56 .cols_2 > .content.cf:before,
57 .cols_2 > .content.cf:after
58 {
59   clear: none;
60   content: none;
61   display: inline;
62 }
63 .cols_2 > .content > .main
64 {
65   float: none;
66   margin-right: -15em;
67   width: auto;
68   background-color: @hintergrund;
69   border-right: 3em solid @hintergrund;
70   @media (max-width: @maxsmalltablet)
71   {
72     margin-top: -.5em;
73     border-right-width: 2em;
74   }
75   @media (max-width: @maxsmallertablet)
76   {
77     border-right-width: 1em;
78   }
79   /** Die 1px-Rahmen triggern, dass das erste Margin den Footer aufschiebt.
80       Bei einem Wert von 0 ragt dieses Margin dann einfach aus dem Footer
81       heraus... */
82   border-top: 1px solid @hintergrund;
83   border-bottom: 1px solid @hintergrund;
84 }
85 .cols_1 > .content > .marginal
86 {
87   margin: 2em -3em 0 -5em;
88 }
89 .cols_1 > .content > .marginal aside.m
90 {
91   margin: -.125em 3em 0 5em;
92   padding: 2em 0;
93   background-color: @heller;
94   border-bottom: .125em solid @hintergrund;
95 }
96 .cols_2 > .content > .marginal
97 {
98   float: left;
99   margin: 0 0 0 -5em;
100   padding: 2em 0 5em 5em;
101   position: static;
102   width: 100%;
103   border-top: 3em solid @hintergrund;
104 }
105 .cols_2 > .content > .marginal > aside.m
106 {
107   margin-right: -12em;
108 }
109 .cols_2 > .content #nav
110 {
111   position: static;
112   width: auto;
113   border-right: .125em solid @hintergrund;
114 }
115 .cols_2 > .content #nav > #menu
116 {
117   position: absolute;
118   top: -7em; /** 112px */
119   right: 3em;
120   margin: 0;
121 }
122
123 /** Faux-Column-Hack-Eigengew√§chs anpassen */
124 #page.cols_2
125 {
126   max-width: none;
127   border-right-width: 15em;
128 }
129 .cols_2 > #header
130 {
131   margin-right: -15em;
132   border-right: 3em solid @hintergrund;
133   @media (max-width: @maxsmalltablet)
134   {
135     border-right-width: 2em;
136   }
137   @media (max-width: @maxsmallertablet)
138   {
139     border-right-width: 1em;
140   }
141 }
142 .cols_2 > #breadcrumb
143 {
144   right: -15em;
145 }
146 .cols_2 > #footer
147 {
148   position: static;
149   float: right;
150   margin-right: -15em;
151   padding: 0;
152   width: 15em;
153   background-color: @heller;
154   border-top: 3em solid @hintergrund;
155 }
156