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