Mercurial > hg > mpiwgzen_wide

annotate css/layouts/responsive.css~ @ 0:a3750d724105 default tip

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
initital
author Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
date Tue, 02 Jun 2015 09:16:36 +0200
parents
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
0
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
1 /**
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
2 * @file
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
3 * Positioning for a responsive layout.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
4 *
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
5 * Define CSS classes to create a fluid grid layout with optional sidebars
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
6 * depending on whether blocks are placed in the left or right sidebars.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
7 *
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
8 * This layout uses the Zen Grids plugin for Compass: http://zengrids.com
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
9 */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
10
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
11 /**
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
12 * Center the page.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
13 *
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
14 * For screen sizes larger than 1200px, prevent excessively long lines of text
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
15 * by setting a max-width.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
16 */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
17 #page,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
18 .region-bottom {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
19 margin-left: auto;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
20 margin-right: auto;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
21 max-width: 75em; /* 900px */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
22 background-color: #F7F7F7;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
23 border-right: solid 1px #efefef;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
24 border-left: solid 1px #efefef;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
25 padding: 0.5em 3.333em 0.833em 1.667em; /* 6px 40px 10px 20px */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
26 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
27
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
28 /* Apply the shared properties of grid items in a single, efficient ruleset. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
29 #header,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
30 #content,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
31 #navigation,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
32 .region-sidebar-first,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
33 .region-sidebar-second,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
34 #footer {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
35 padding-left: 0px;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
36 padding-right: 0px;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
37 -moz-box-sizing: border-box;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
38 -webkit-box-sizing: border-box;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
39 -ms-box-sizing: border-box;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
40 box-sizing: border-box;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
41 word-wrap: break-word;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
42 *behavior: url("/path/to/boxsizing.htc");
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
43 _display: inline;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
44 _overflow: hidden;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
45 _overflow-y: visible;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
46 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
47
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
48 /* Containers for grid items and flow items. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
49 #header,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
50 #main,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
51 #footer {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
52 *position: relative;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
53 *zoom: 1;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
54 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
55 #header:before,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
56 #header:after,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
57 #main:before,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
58 #main:after,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
59 #footer:before,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
60 #footer:after {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
61 content: "";
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
62 display: table;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
63 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
64 #header:after,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
65 #main:after,
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
66 #footer:after {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
67 clear: both;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
68 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
69
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
70 /* Navigation bar */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
71 @media all and (min-width: 480px) {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
72 #main {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
73 /* Move all the children of #main down to make room. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
74 padding-top: 2.833em;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
75 position: relative;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
76 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
77 #navigation {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
78 /* Move the navbar up inside #main's padding. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
79 position: absolute;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
80 top: 0;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
81 height: 2.833em;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
82 width: 100%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
83 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
84 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
85
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
86 /**
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
87 * Use 3 grid columns for smaller screens.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
88 */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
89 @media all and (min-width: 480px) and (max-width: 959px) {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
90
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
91 /**
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
92 * The layout when there is only one sidebar, the left one.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
93 */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
94
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
95 /* Span 2 columns, starting in 2nd column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
96 .sidebar-first #content {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
97 float: left;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
98 width: 66.66667%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
99 margin-left: 33.33333%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
100 margin-right: -100%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
101 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
102
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
103 /* Span 1 column, starting in 1st column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
104 .sidebar-first .region-sidebar-first {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
105 float: left;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
106 width: 33.33333%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
107 margin-left: 0%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
108 margin-right: -33.33333%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
109 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
110
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
111 /**
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
112 * The layout when there is only one sidebar, the right one.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
113 */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
114
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
115 /* Span 2 columns, starting in 1st column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
116 .sidebar-second #content {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
117 float: left;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
118 width: 66.66667%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
119 margin-left: 0%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
120 margin-right: -66.66667%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
121 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
122
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
123 /* Span 1 column, starting in 3rd column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
124 .sidebar-second .region-sidebar-second {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
125 float: left;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
126 width: 33.33333%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
127 margin-left: 66.66667%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
128 margin-right: -100%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
129 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
130
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
131 /**
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
132 * The layout when there are two sidebars.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
133 */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
134
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
135 /* Span 2 columns, starting in 2nd column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
136 .two-sidebars #content {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
137 float: left;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
138 width: 66.66667%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
139 margin-left: 33.33333%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
140 margin-right: -100%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
141 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
142
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
143 /* Span 1 column, starting in 1st column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
144 .two-sidebars .region-sidebar-first {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
145 float: left;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
146 width: 33.33333%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
147 margin-left: 0%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
148 margin-right: -33.33333%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
149 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
150
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
151 /* Start a new row and span all 3 columns. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
152 .two-sidebars .region-sidebar-second {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
153 float: left;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
154 width: 100%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
155 margin-left: 0%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
156 margin-right: -100%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
157 padding-left: 0;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
158 padding-right: 0;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
159 clear: left;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
160 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
161
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
162 /* Apply the shared properties of grid items in a single, efficient ruleset. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
163 .two-sidebars .region-sidebar-second .block {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
164 padding-left: 10px;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
165 padding-right: 10px;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
166 -moz-box-sizing: border-box;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
167 -webkit-box-sizing: border-box;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
168 -ms-box-sizing: border-box;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
169 box-sizing: border-box;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
170 word-wrap: break-word;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
171 *behavior: url("/path/to/boxsizing.htc");
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
172 _display: inline;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
173 _overflow: hidden;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
174 _overflow-y: visible;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
175 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
176
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
177 /* Span 1 column, starting in the 1st column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
178 .two-sidebars .region-sidebar-second .block:nth-child(3n+1) {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
179 float: left;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
180 width: 33.33333%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
181 margin-left: 0%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
182 margin-right: -33.33333%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
183 clear: left;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
184 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
185
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
186 /* Span 1 column, starting in the 2nd column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
187 .two-sidebars .region-sidebar-second .block:nth-child(3n+2) {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
188 float: left;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
189 width: 33.33333%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
190 margin-left: 33.33333%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
191 margin-right: -66.66667%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
192 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
193
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
194 /* Span 1 column, starting in the 3rd column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
195 .two-sidebars .region-sidebar-second .block:nth-child(3n) {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
196 float: left;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
197 width: 33.33333%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
198 margin-left: 66.66667%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
199 margin-right: -100%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
200 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
201 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
202
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
203 /**
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
204 * Use 5 grid columns for larger screens.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
205 */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
206 @media all and (min-width: 960px) {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
207
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
208 /**
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
209 * The layout when there is only one sidebar, the left one.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
210 */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
211
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
212 /* Span 4 columns, starting in 2nd column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
213 .sidebar-first #content {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
214 float: left;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
215 width: 55.5em; /*666px*/
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
216 margin-left: 19.5em; /*216+18px*/
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
217 margin-right: -100%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
218 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
219
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
220 /* Span 1 column, starting in 1st column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
221 .sidebar-first .region-sidebar-first {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
222 float: left;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
223 width: 18em;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
224 margin-left: 0%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
225 margin-right: -18em;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
226 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
227
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
228 /**
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
229 * The layout when there is only one sidebar, the right one.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
230 */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
231
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
232 /* Span 4 columns, starting in 1st column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
233 .sidebar-second #content {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
234 float: left;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
235 width: 80%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
236 margin-left: 0%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
237 margin-right: -80%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
238 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
239
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
240 /* Span 1 column, starting in 5th column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
241 .sidebar-second .region-sidebar-second {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
242 float: left;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
243 width: 20%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
244 margin-left: 80%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
245 margin-right: -100%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
246 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
247
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
248 /**
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
249 * The layout when there are two sidebars.
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
250 */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
251
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
252 /* Span 3 columns, starting in 2nd column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
253 .two-sidebars #content {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
254 float: left;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
255 width: 60%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
256 margin-left: 20%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
257 margin-right: -80%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
258 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
259
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
260 /* Span 1 column, starting in 1st column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
261 .two-sidebars .region-sidebar-first {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
262 float: left;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
263 width: 20%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
264 margin-left: 0%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
265 margin-right: -20%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
266 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
267
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
268 /* Span 1 column, starting in 5th column from left. */
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
269 .two-sidebars .region-sidebar-second {
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
270 float: left;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
271 width: 20%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
272 margin-left: 80%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
273 margin-right: -100%;
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
274 }
a3750d724105 initital
Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
parents:
diff changeset
275 }