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