876bf06b07d1889331ff40bbe661f222eb41444f
[wolnelektury.git] / wolnelektury / static / css / book_box.css
1 .book-mini-box, .Book-item {
2     display: inline-block;
3     vertical-align: top;
4 }
5
6 .book-wide-box, .book-box {
7     margin: 0;
8     vertical-align: top;
9 }
10
11 .book-box {
12     width: 48.75em;
13 }
14
15 .book-mini-box {
16     width: 16.15em;
17 }
18
19 .book-wide-box {
20     width: 97.5em;
21
22     /** This is a fullpage box, it must be aligned with the top menu. 
23         This corresponds to a .1em margin below **/
24     margin-left: -0.1em;
25 }
26
27 /* 
28  * A mini-box wraps it's contents (image + label) in an <a>
29  * other boxes have an inner box as a wrapper.
30  */
31
32 .book-box-inner {
33     /* min, so it can grow */
34     min-height: 19.75em; 
35     margin: .5em;
36 }
37
38 .book-mini-box a, .book-box-inner {
39     display: block;
40     color: black;
41     border: 1px solid #ddd;
42 /*    height: 20em; */
43     padding: .8em 1em;
44     margin: .1em;
45     background: #fff;
46     -moz-box-shadow: 2px 2px 2px #ddd;
47     -webkit-box-shadow: 2px 2px 2px #ddd;
48     box-shadow: 2px 2px 2px #ddd;
49 }
50
51 .book-mini-box a {
52     height: 27.1em;
53     margin: .1em;
54     overflow: hidden;
55 }
56
57
58 .book-wide-box .book-box-inner {
59    /* min, so it can grow */ 
60    min-height: 24.4em;
61 }
62
63 .search-result {
64     width: 97.5em;
65 }
66
67 .search-result .book-box-body {
68     width: 31em;
69 }
70
71 .book-list-header {
72     width: 97.5em;
73     padding: 0em;
74     margin-left: -0.1em;
75 }
76
77 .book-list-header .book-box-inner {
78     min-height: 1em;
79 }
80
81 .book-list-header p {
82     font-size: 2.4em;
83     margin: 0.5em;
84 }
85
86
87 /* 
88  * ingenous float containment hack 
89  * http://www.mikepadgett.com/technology/technical/alternative-to-the-pie-clearfix-hack/
90  */
91 /*
92 .search-result .book-box-inner {
93     height: 1%;
94     overflow: hidden;
95 }
96 */
97
98 .book-mini-box img, .book-box img, .book-wide-box img, .search-result img {
99     width: 13.9em;
100     height: 19.3em;
101 }
102 .book-mini-box img {
103     margin-bottom: 1.8em;
104 }
105 .book-box-inner img, .book-wide-box img {
106     float: left;
107     margin-right: 1.5em;
108 }
109
110 .book-mini-box .desc {
111     margin-left:0em;
112 }
113 .book-mini-box .author {
114     font-size: 1.1em;
115     color: #6d7877;
116     display: block;
117     overflow:hidden;
118     text-overflow: ellipsis;
119     white-space: nowrap;
120 }
121 .book-mini-box .title {
122     font-size: 1.4em;
123     color: #242424;
124 }
125
126
127 .book-box-body {
128     height: 17em;
129     overflow:hidden;
130     position: relative;
131 }
132
133 .book-wide-box .book-box-body {
134     min-height: 17em;
135 }
136
137 .book-box-head {
138     min-height: 7em;
139     padding-top: 1.4em;
140     margin-bottom: 1em;
141 }
142 .book-box-head a {
143     color: black;
144 }
145 .book-box-head .author {
146     font-size: 1.1em;
147     max-width: 24em;
148 }
149 .book-box-head .title {
150     font-size: 2.4em;
151     height: 2.4em;
152     overflow:hidden;
153     margin-top: .3em;
154 }
155 .book-box-body .tags {
156     font-size: 1.1em;
157 }
158 .book-box-tag {
159     margin-right: .5em;
160     margin-left: .4em;
161 }
162 .book-box-download {
163     position: relative;
164 }
165
166 .book-box-download a {
167     position: relative;
168     z-index: 101;
169 }
170
171 .book-box-formats {
172     display: none;
173     position: absolute;
174
175     width: 16.363em;
176     border: 1px solid #ddd;
177     padding: 3.454em 1.727em .818em 1.727em;
178     background: #fff;
179     -moz-box-shadow: 2px 2px 2px #ddd;
180     -webkit-box-shadow: 2px 2px 2px #ddd;
181     box-shadow: 2px 2px 2px #ddd;
182
183     z-index: 100;
184     top: -1.454em;
185     left: -1.727em;
186 }
187 .book-box-formats span {
188     display: block;
189 }
190  
191
192 .book-box-download:hover .book-box-formats span:first-child {
193     margin-top: 1.454em;
194 }
195
196 .book-box-download:hover .book-box-formats {
197     display: block;
198 }
199
200 .book-box-tools {
201         width: 46em;
202     font-size: 1.1em;
203 }
204
205 .book-wide-box .book-box-tools {
206     margin-left: 14em;
207     width: 32em;
208 }
209
210 .book-wide-box #theme-list-wrapper {
211     margin-left: 15.4em;
212         width: 30em;
213 }
214
215
216
217 .book-box-read a:before {
218     content: "\2609";
219     font-family: WL-Nav;
220     font-size: 2.25em;
221     margin-right: .15em;
222     vertical-align: middle;
223     font-weight: normal;
224 }
225
226 .book-box-download a.downarrow:before {
227     content: "\21E9";
228     font-family: WL-Nav;
229     font-size: 2.25em;
230     margin-right: .15em;
231     vertical-align: middle;
232     font-weight: normal;
233 }
234
235 .book-box-audiobook a:before {
236     content: "\266B";
237     font-family: WL-Nav;
238     font-size: 2.25em;
239     margin-right: .15em;
240     vertical-align: middle;
241     font-weight: normal;
242 }
243
244 ul.book-box-tools {
245     margin: 0;
246     padding: 0;
247 }
248
249 .book-box-tools li {
250     display: inline-block;
251 }
252
253 .book-box-read {
254     width: 11.5em;
255 }
256 .book-box-download {
257     width: 8.5em;
258 }
259 .book-box-audiobook {
260     width: 7em;
261 }
262
263 .book-wide-box .right-column {
264     float: right;
265     width: 41.5em;
266 }
267
268 ul.inline-items, ul.inline-items li {
269     margin: 0;
270     padding: 0;
271 }
272
273 ul.inline-items li {
274     display: inline-block;
275 }
276
277 .book-wide-box .other-tools {
278     float: left;
279     width: 14.5em;
280     margin: 5em 0 0 1.5em;
281     
282 }
283
284 .book-wide-box .other-download {
285     float: left;
286     width: 22em;
287     margin: 5em 1.5em 0em 1.5em;
288 }
289 .book-wide-box .other-tools h2,
290 .book-wide-box .other-download h2,
291 .book-wide-box .other-tools ul,
292 .book-wide-box .other-download ul {
293         font-size: 1.1em;
294 }
295
296
297
298 .star {
299     font-size: 2.25em;
300     margin-right: .5em;
301     position: absolute;
302     right: 0;
303 }
304 .star button::-moz-focus-inner {
305     padding: 0;
306     border: 0
307 }
308 .if-unlike button {
309     font-size: 1em;
310     font-family: inherit;
311     border: 0;
312     background: none;
313     margin: 0;
314     padding: 0;
315     color: #757575;
316 }
317
318 .if-like a {
319     display:block;
320     text-align:right;
321     padding: 0;
322 }
323
324 .like .if-unlike {
325     display: none;
326 }
327
328 .unlike .if-like {
329     display: none;
330 }
331
332 .snippets {
333     width: 44em;
334     float: right;
335 }
336
337 .snippets .snippet-text {
338     background: #f7f7f7;
339     font-size: 1.2em;
340     margin: 1.083em 0em;
341     padding: 1em;
342 }
343
344 .snippets .anchor {
345     display: none;
346 }