815b1eb272f4d0f5ee8ebb7a95529f826e1157b5
[openlib.git] / www / styles / style-eink.css
1 /* Global Box Sizing and Font-Smoothing */
2 *, *:after, *:before {
3     box-sizing:border-box;
4     -webkit-box-sizing:border-box;
5     -moz-box-sizing:border-box;
6     -webkit-font-smoothing:antialiased;
7     -moz-font-smoothing:antialiased;
8     -o-font-smoothing:antialiased;
9     font-smoothing:antialiased;
10     text-rendering:optimizeLegibility;
11 }
12
13 html { font-size: 100%; -webkit-text-size-adjust: 100%; 
14                           -ms-text-size-adjust: 100%; }
15
16 body {
17     font-family: 'Open Sans', sans-serif;
18     line-height:18px;
19     color: #1c1c1c; /* Lighter on the eyes than #000 Black */
20     margin: 0px; background: #cccccc; background-size: cover;
21 }
22
23 img {
24     border: 0px;
25     max-width: 100%;
26     height: auto;
27     width: auto\9; /* ie8 */
28         opacity: 1;
29 }
30
31 /* ==========================================================================
32    Typography stuff goes here
33    ========================================================================== */
34 h1,h2,h3,h4,h5,h6 { font-weight: bold; margin:0; padding:0;}
35 /*h1 see mediaqueries*/ 
36 h2 {font-size: 1.2em;}
37 h3 {font-size: 1.1em;}
38 h4 {font-size: 1.0em; }
39 h5 {font-size: 0.83em;}
40 h6 {font-size: 0.75em;}
41
42 a:hover, a:focus, a:active { outline: none; }
43 a {
44         color: black;
45         text-decoration: none;
46         font-weight: bold;
47 }
48 a:hover { color:#000; text-decoration: none; }
49 .frontpage a {display:block; }
50 .frontpage a:hover { width: 100%; background-color: white;}
51 .books:hover { width: 100%; background-color: silver; }
52 .link a:hover { display:inline-block; width: 100%; background-color: #778899;  /*Dirty IE Hack*/  zoom: 1;  *display: inline;}
53
54 .mfp-content .bookpopup {
55   position: relative;
56   background: #FFF;
57   padding: 20px;
58   width: auto;
59   max-width: 700px;
60   margin: 20px auto;
61 }
62
63 #email {
64 width: 300px;
65 }
66
67 .filtered {
68 display: none;
69 }
70
71 #filter {
72 clear:both;
73 }
74
75 #filter ul {
76 margin: 0;
77 padding: 0;
78 list-style-type: none;
79 text-align: left;
80 text-transform:none; 
81 font-variant: normal;
82 }
83
84 li {
85 display: inline-block;
86 padding: .2em 1em;
87 margin: 2px;
88 color: black;
89 background-color: #ddd;
90 opacity: 0.5;
91 }
92
93 .filter-include { 
94     border-left:thick solid blue;
95     opacity: 1;
96 }
97
98 .filter-exclude { 
99     border-right:thick solid red;
100     opacity: 1;
101 }
102
103
104 img
105 {
106 margin:0;
107 padding:0;
108 border:0;
109 }
110
111 /* =============================================================================
112    Main container stuff goes here and other globals
113    ========================================================================== */
114 .container{
115         border:1px solid #000; border-radius:10px;
116     max-width:800px;width:95%;margin:0 auto;position:relative;
117         background-color: white;
118 }
119
120 /* =============================================================================
121    Header stuff goes here
122    ========================================================================== */
123 header {
124     clear:both; 
125     color: black; 
126     text-align:center;
127         display:block;
128     min-height:70px;
129     border-radius: 10px 10px 0px 0px;
130         border-bottom: 2px dashed gray;
131         font-variant: small-caps;
132         letter-spacing: 2px;
133 }
134
135 .hicon{
136     display:inline-block;
137     color:black;
138     text-align: center;
139     vertical-align: bottom;
140 }
141
142 .submit {
143     color: black;
144     cursor: pointer;
145     background-color: transparent;
146     background-image: none;
147     border-color: transparent;
148     -webkit-border-radius: 0;
149      -moz-border-radius: 0;
150           border-radius: 0;
151     -webkit-box-shadow: none;
152      -moz-box-shadow: none;
153           box-shadow: none; 
154 }
155
156 .hicon64{
157     font-size: 64px;
158     line-height: 64px;
159     width: 64px;
160     height: 64px;
161 }
162
163 .hicon32{
164     font-size: 24px;
165     line-height: 32px;
166     width: 32px;
167     height: 32px;
168 }
169
170 .headleft {
171     float: left;
172 }
173
174 .headcenter
175 {
176 float:none;
177 margin:auto;
178 text-align:center;
179 height:70px;
180 display:table;
181 }
182
183 header h1{
184     display: table-cell;
185     vertical-align: middle;
186     text-align: center;
187     line-height: 100%;
188 }
189
190 .headright {
191     float: right;
192 }
193
194 /* =============================================================================
195    Section and Article stuff goes here
196    ========================================================================== */
197 section {
198 clear:both;
199 background-color: #fff;
200 }
201
202 article {
203 border-bottom: 1px solid black;
204 max-width:800px;
205 }
206
207 /*-------------frontpage article-------------*/
208
209 .frontpage h2 {
210         text-align: center;
211         letter-spacing: 2px;
212         color: black;
213         font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
214         padding: 5px 0;
215 }
216
217 .frontpage h4 {
218     padding: 5px 0;
219         text-align: center;
220         color: gray;
221          font-style: italic;
222          font-size: 13px;
223          text-decoration: overline;
224  }
225
226 /*-------------books article-------------*/
227 .books {
228     clear: both;
229     min-height: 90px;
230 }
231
232 .books .cover {
233     float:left;
234     margin: 4px 10px 4px 4px;
235     width: 60px;
236     height: 82px;
237 }
238
239 .bookpopup .cover {
240     float:left;
241     margin: 4px 10px 4px 4px;
242     width: 100px;
243     height: 150px;
244 }
245
246 .cover img {
247     max-width:100%;
248     max-height:100%;
249     color: white;
250 }
251
252 .download {
253     float: right;
254     line-height:40px;
255     text-align: right;
256     margin: 6px;
257 }
258
259 .download a {
260     border-radius: 2px;
261     background: black;  
262     color: white;
263     text-decoration : none;
264     font-weight: bold;
265     padding: 5px 10px 5px 10px;
266 }
267
268
269 .books h4{
270     display: inline;
271     font-style: italic;
272 }
273
274 /*-------------books popup article-------------*/
275 .bookpopup h2{
276     margin: 15px 15px; 
277 }
278
279 .bookpopup h3{
280     display:inline;  /*Dirty IE Hack*/  zoom: 1;  *display: inline;
281 }
282
283 .bookpopup h4{
284     border-top: 1px solid black;
285 }
286
287 .fullclickpopup{
288     display: block;
289         color: black;
290 }
291
292 section .bookpopup{
293     padding: 8px 8px;
294 }
295
296 /* =============================================================================
297    Footer stuff goes here
298    ========================================================================== */
299 footer
300 {
301 clear:both;
302 color:white;
303 border-radius: 0px 0px 10px 10px; 
304 height:32px;
305 }
306
307 .footleft
308 {
309 float:left;
310 height:32px;
311 }
312
313 .footright
314 {
315 float:right;
316 height:32px;
317 }
318
319 .footcenter
320 {
321 margin:auto;
322 text-align:center;
323 height:32px;
324 display:table;
325 color: black;
326 font-weight: bold;
327 }
328
329 .footcenter p, .footcenter a
330 {
331 display: table-cell;
332 vertical-align: middle;
333 text-align: center;
334 line-height: 100%;
335 }
336
337 /* =============================================================================
338    Aside stuff goes here
339    ========================================================================== */   
340 #tool
341 {
342 width:100%;
343 overflow: hidden;
344 }
345
346
347 /*-------------Search Aside-------------*/
348 #tool input[type=text]
349 {
350 vertical-align: middle;
351 width: 100%;
352 margin: 5px;
353 }
354
355 .stop select
356 {
357 vertical-align: middle;
358 margin: 5px;
359 }
360
361 #sort
362 {
363 cursor:pointer;
364 }
365
366 .stop
367 {
368 display: block;
369 overflow: hidden;
370 }
371
372 /* =============================================================================
373    Mediaquerie stuff goes here
374    ========================================================================== */
375 /* 100px and greater */
376 @media only screen and (min-width: 100px) {
377 h1 {font-size: 1em;}
378 .container { width:100%; }
379 }
380    
381 /* 320px and greater */
382 @media only screen and (min-width: 320px) {
383 h1 {font-size: 1.2em;}
384 }
385
386 /* 480px and greater */
387 @media only screen and (min-width: 480px) {
388 h1 {font-size: 1.5em;}
389 body {  font-size: 1em;/*12px/16px */
390             font-weight:450; /* Better supported than 'lighter' attribute */
391     }
392 }
393
394 /* 768px and greater */
395 @media only screen and (min-width: 768px) {
396 h1 {font-size: 2em; line-height: 1em;}
397 body {  margin: 5px; 
398             font-size: 0.85em;/*12px/16px */
399             font-weight:400; /* Better supported than 'lighter' attribute */
400     }
401 }