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 }
 402
 403 .modalDialog {
 404         position: fixed;
 405         font-family: Arial, Helvetica, sans-serif;
 406         top: 0;
 407         right: 0;
 408         bottom: 0;
 409         left: 0;
 410         background: rgba(0,0,0,0.8);
 411         z-index: 99999;
 412         opacity:0;
 413         -webkit-transition: opacity 400ms ease-in;
 414         -moz-transition: opacity 400ms ease-in;
 415         transition: opacity 400ms ease-in;
 416         pointer-events: none;
 417 }
 418
 419 .modalDialog:target {
 420         opacity:1;
 421         pointer-events: auto;
 422 }
 423
 424 .modalDialog > div {
 425         width: 400px;
 426         position: relative;
 427         margin: 10% auto;
 428         padding: 5px 20px 13px 20px;
 429         border-radius: 10px;
 430         background: #fff;
 431         background: -moz-linear-gradient(#fff, #999);
 432         background: -webkit-linear-gradient(#fff, #999);
 433         background: -o-linear-gradient(#fff, #999);
 434 }
 435
 436
 437
 438 .close {
 439         background: #606061;
 440         color: #FFFFFF;
 441         line-height: 25px;
 442         position: absolute;
 443         right: -12px;
 444         text-align: center;
 445         top: -10px;
 446         width: 24px;
 447         text-decoration: none;
 448         font-weight: bold;
 449         -webkit-border-radius: 12px;
 450         -moz-border-radius: 12px;
 451         border-radius: 12px;
 452         -moz-box-shadow: 1px 1px 3px #000;
 453         -webkit-box-shadow: 1px 1px 3px #000;
 454         box-shadow: 1px 1px 3px #000;
 455 }
 456
 457 .close:hover { background: #00d9ff; }