1 | /** |
---|
2 | * Media Queries for responsive webdesign |
---|
3 | * Fuer kleine Browserfenster sowie mobile Endgeraete. |
---|
4 | **/ |
---|
5 | |
---|
6 | /** |
---|
7 | * Schmaler als die "Blattmetapher" 1200px: Blattmetapher aufgeben und Ueberbleibsel |
---|
8 | * des Seitenhintergrundes ausblenden. Zur Ladezeitoptimierung braucht der auch gar |
---|
9 | * nicht mehr geladen werden. |
---|
10 | * Experimentell den Footer auch nicht mit der dunkeln Hintergrundfarbe machen, weil |
---|
11 | * er sonst sehr aufdringlich ist. |
---|
12 | * |
---|
13 | **/ |
---|
14 | @media all and (max-width: 1250px) { /* was: 1199px */ |
---|
15 | body { |
---|
16 | background: #F4F4F4; /* BG von footer.attached */ |
---|
17 | } |
---|
18 | |
---|
19 | #container { |
---|
20 | margin-top: 0; |
---|
21 | box-shadow: none; |
---|
22 | } |
---|
23 | |
---|
24 | footer.in-sheet.empty-footer { |
---|
25 | height: 2px; /* Nur Linie anzeigen, keine weisse Flaeche */ |
---|
26 | } |
---|
27 | |
---|
28 | /* |
---|
29 | footer.attached { |
---|
30 | background: #F4F4F4; |
---|
31 | color: #777; |
---|
32 | } |
---|
33 | |
---|
34 | footer.attached a:link, footer.attached a:visited { |
---|
35 | color: #777; |
---|
36 | } |
---|
37 | */ |
---|
38 | } |
---|
39 | |
---|
40 | /** |
---|
41 | * Schmaler als 940px: Tablet-Design. Menue unten darstellen, keine Menuescrollfunktionen, |
---|
42 | * Menuepunkte nebeneinander (sieht huebsch aus). |
---|
43 | * |
---|
44 | **/ |
---|
45 | @media all and (max-width: 940px) { |
---|
46 | /* menue unten darstellen, Menuescrollfunktionen deaktivieren */ |
---|
47 | #container { |
---|
48 | width: 940px; |
---|
49 | } |
---|
50 | |
---|
51 | /* Header-Navigation */ |
---|
52 | header.banner { |
---|
53 | height: auto; |
---|
54 | background: none; |
---|
55 | } |
---|
56 | |
---|
57 | nav.horizontal { |
---|
58 | position: relative; |
---|
59 | top: auto; bottom: auto; |
---|
60 | margin: 108px 0 0 0; |
---|
61 | text-align: center; |
---|
62 | |
---|
63 | /* testweise: */ |
---|
64 | background-color: #f1f1f1; |
---|
65 | border-bottom: 2px solid #d2d2d2; |
---|
66 | border-top: 2px solid #d2d2d2; |
---|
67 | } |
---|
68 | nav.horizontal .u1 > li > a { |
---|
69 | margin-bottom: 0; /* kein Abstand zu nav.horizontal */ |
---|
70 | padding: 9px; /* groessere Klickflaechen */ |
---|
71 | } |
---|
72 | |
---|
73 | li.small-screen-only { |
---|
74 | display: inline-block !important; |
---|
75 | } |
---|
76 | |
---|
77 | #background-color-container, #content, section.sidebar { |
---|
78 | float: none; |
---|
79 | left: auto; |
---|
80 | background-color: transparent; |
---|
81 | } |
---|
82 | |
---|
83 | section.sidebar { |
---|
84 | width: 100%; |
---|
85 | background-color: #dfeaf0; |
---|
86 | } |
---|
87 | section.sidebar nav.side .u1 > li > a { |
---|
88 | /* u1-Trenner abschalten */ |
---|
89 | border-top: none; |
---|
90 | padding-top: 0; |
---|
91 | } |
---|
92 | |
---|
93 | /* clearfix */ |
---|
94 | #content:after, section.sidebar:after { content: ""; display: table; clear: both; } |
---|
95 | |
---|
96 | nav.side { /* Quick and dirty */ |
---|
97 | padding-bottom: 15px !important; |
---|
98 | } |
---|
99 | |
---|
100 | .button { display: none !important; } /* Quick and dirty */ |
---|
101 | |
---|
102 | /* Spalten */ |
---|
103 | section.sidebar ul.u1 > li { |
---|
104 | float: left; |
---|
105 | padding: 24px; |
---|
106 | width: 250px; |
---|
107 | } |
---|
108 | |
---|
109 | footer.in-sheet.empty-footer { display: none; } |
---|
110 | } |
---|
111 | |
---|
112 | /** |
---|
113 | * Schmaller als 600px: Handy-Design, alles einspaltig! |
---|
114 | * |
---|
115 | **/ |
---|
116 | @media all and (max-width: 600px) { |
---|
117 | #container { |
---|
118 | padding-top: 240px; /* wg grossem Header, to be fixed */ |
---|
119 | } |
---|
120 | #container, #content, section.sidebar, #background-color-container { |
---|
121 | width: inherit; |
---|
122 | } |
---|
123 | #content { |
---|
124 | padding: 1.5em 1em; |
---|
125 | } |
---|
126 | |
---|
127 | #container h1 a { |
---|
128 | /* Banner in der Mitte anzeigen */ |
---|
129 | left: 0; width: 100%; |
---|
130 | background-repeat: no-repeat; |
---|
131 | background-position: center center; |
---|
132 | } |
---|
133 | |
---|
134 | nav.rel { |
---|
135 | width: 100%; |
---|
136 | margin: 26px 0 0; |
---|
137 | text-align: center; |
---|
138 | } |
---|
139 | nav.rel li { |
---|
140 | position: relative; |
---|
141 | } |
---|
142 | |
---|
143 | footer.attached div.bigfooter ul, |
---|
144 | footer div.bigfooter li { |
---|
145 | padding: 0; |
---|
146 | width: 100% !important; |
---|
147 | } |
---|
148 | |
---|
149 | /* Mehrspaltige Contents. Overwrite dank #container */ |
---|
150 | #container div.startseiten-boxen, |
---|
151 | #container div.startseiten-boxen .cols, |
---|
152 | #container div.startseiten-boxen .leftcol, |
---|
153 | #container div.startseiten-boxen .rightcol, |
---|
154 | #content div.cols, |
---|
155 | #content div.cols .leftcol, |
---|
156 | #content div.cols .rightcol, |
---|
157 | #content div.desc-left, |
---|
158 | #content div.desc-right { |
---|
159 | float: none; |
---|
160 | width: inherit; |
---|
161 | padding: 0 !important; |
---|
162 | } |
---|
163 | |
---|
164 | /* Box-System einspaltig machen */ |
---|
165 | #content .auto-bildbreite img, |
---|
166 | #content .center img, |
---|
167 | #content .left img, |
---|
168 | #content .right img, |
---|
169 | #content div.desc-left img, |
---|
170 | #content div.desc-right img { |
---|
171 | float: none; |
---|
172 | display: block; margin: 0 auto; /* for small images */ |
---|
173 | max-width: 100%; |
---|
174 | height: auto; |
---|
175 | } |
---|
176 | |
---|
177 | #content div.desc-left, |
---|
178 | #content div.desc-right, |
---|
179 | #content .auto-bildbreite { |
---|
180 | width: 100% !important; |
---|
181 | margin: 1em 0; |
---|
182 | } |
---|
183 | |
---|
184 | } |
---|