fix
[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 .search-result .book-box-inner {
92     height: 1%;
93     overflow: hidden;
94 }
95
96 .book-mini-box img, .book-box img, .book-wide-box img, .search-result img {
97     width: 13.9em;
98     height: 19.3em;
99 }
100 .book-mini-box img {
101     margin-bottom: 1.8em;
102 }
103 .book-box-inner img, .book-wide-box img {
104     float: left;
105     margin-right: 1.5em;
106 }
107
108 .book-mini-box .desc {
109     margin-left:0em;
110 }
111 .book-mini-box .author {
112     font-size: 1.1em;
113     color: #707b7a;
114     display: block;
115     overflow:hidden;
116     text-overflow: ellipsis;
117     white-space: nowrap;
118 }
119 .book-mini-box .title {
120     font-size: 1.4em;
121     color: #242424;
122 }
123
124
125 .book-box-body {
126     height: 17em;
127     overflow:hidden;
128     position: relative;
129 }
130
131 .book-wide-box .book-box-body {
132     min-height: 17em;
133 }
134
135 .book-box-head {
136     min-height: 7em;
137     padding-top: 1.4em;
138     margin-bottom: 1em;
139 }
140 .book-box-head a {
141     color: black;
142 }
143 .book-box-head .author {
144     font-size: 1.1em;
145     max-width: 24em;
146 }
147 .book-box-head .title {
148     font-size: 2.4em;
149     height: 2.4em;
150     overflow:hidden;
151     margin-top: .3em;
152 }
153 .book-box-body .tags {
154     font-size: 1.1em;
155 }
156 .book-box-tag {
157     margin-right: .5em;
158     margin-left: .4em;
159 }
160 .book-box-download {
161     position: relative;
162 }
163
164 .book-box-download a {
165     position: relative;
166     z-index: 101;
167 }
168
169 .book-box-formats {
170     display: none;
171     position: absolute;
172
173     width: 16.363em;
174     border: 1px solid #ddd;
175     padding: 3.454em 1.727em .818em 1.727em;
176     background: #fff;
177     -moz-box-shadow: 2px 2px 2px #ddd;
178     -webkit-box-shadow: 2px 2px 2px #ddd;
179     box-shadow: 2px 2px 2px #ddd;
180
181     z-index: 100;
182     top: -1.454em;
183     left: -1.727em;
184 }
185 .book-box-formats span {
186     display: block;
187 }
188  
189
190 .book-box-download:hover .book-box-formats span:first-child {
191     margin-top: 1.454em;
192 }
193
194 .book-box-download:hover .book-box-formats {
195     display: block;
196 }
197
198 .book-box-tools {
199         width: 46em;
200     font-size: 1.1em;
201 }
202
203 .book-wide-box .book-box-tools {
204     margin-left: 14em;
205     width: 32em;
206 }
207
208 .book-wide-box #theme-list-wrapper {
209     margin-left: 15.4em;
210         width: 30em;
211 }
212
213
214
215 .book-box-read a:before {
216     content: "\2609";
217     font-family: WL-Nav;
218     font-size: 2.25em;
219     margin-right: .15em;
220     vertical-align: middle;
221     font-weight: normal;
222 }
223
224 .book-box-download a.downarrow:before {
225     content: "\21E9";
226     font-family: WL-Nav;
227     font-size: 2.25em;
228     margin-right: .15em;
229     vertical-align: middle;
230     font-weight: normal;
231 }
232
233 .book-box-audiobook a:before {
234     content: "\266B";
235     font-family: WL-Nav;
236     font-size: 2.25em;
237     margin-right: .15em;
238     vertical-align: middle;
239     font-weight: normal;
240 }
241
242 ul.book-box-tools {
243     margin: 0;
244     padding: 0;
245 }
246
247 .book-box-tools li {
248     display: inline-block;
249 }
250
251 .book-box-read {
252     width: 11.5em;
253 }
254 .book-box-download {
255     width: 8.5em;
256 }
257 .book-box-audiobook {
258     width: 7em;
259 }
260
261 .book-wide-box .right-column {
262     float: right;
263     width: 41.5em;
264 }
265
266 ul.inline-items, ul.inline-items li {
267     margin: 0;
268     padding: 0;
269 }
270
271 ul.inline-items li {
272     display: inline-block;
273 }
274
275 .book-wide-box .other-tools {
276     float: left;
277     width: 14.5em;
278     margin: 5em 0 0 1.5em;
279     
280 }
281
282 .book-wide-box .other-download {
283     float: left;
284     width: 22em;
285     margin: 5em 1.5em 0em 1.5em;
286 }
287 .book-wide-box .other-tools h2,
288 .book-wide-box .other-download h2,
289 .book-wide-box .other-tools ul,
290 .book-wide-box .other-download ul {
291         font-size: 1.1em;
292 }
293
294
295
296 .star {
297     font-size: 2.25em;
298     margin-right: .5em;
299     position: absolute;
300     right: 0;
301 }
302 .star button::-moz-focus-inner {
303     padding: 0;
304     border: 0
305 }
306 .if-unlike button {
307     font-size: 1em;
308     font-family: inherit;
309     border: 0;
310     background: none;
311     margin: 0;
312     padding: 0;
313 }
314
315 .if-like a {
316     display:block;
317     text-align:right;
318     padding: 0;
319 }
320
321 .like .if-unlike {
322     display: none;
323 }
324
325 .unlike .if-like {
326     display: none;
327 }
328
329 .snippets {
330     width: 44em;
331     float: right;
332 }
333
334 .snippets .snippet-text {
335     background: #f7f7f7;
336     font-size: 1.2em;
337     margin: 1.083em 0em;
338     padding: 1em;
339 }
340
341 .snippets .anchor {
342     display: none;
343 }