css/main.css

   1 /*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */\r
   2 \r
   3 /*\r
   4  * What follows is the result of much research on cross-browser styling.\r
   5  * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,\r
   6  * Kroc Camen, and the H5BP dev community and team.\r
   7  */\r
   8 \r
   9 /* ==========================================================================\r
  10    Base styles: opinionated defaults\r
  11    ========================================================================== */\r
  12 \r
  13 html,\r
  14 button,\r
  15 input,\r
  16 select,\r
  17 textarea {\r
  18     color: #222;\r
  19 }\r
  20 \r
  21 html {\r
  22     font-size: 1em;\r
  23     line-height: 1.4;\r
  24 }\r
  25 \r
  26 /*\r
  27  * Remove text-shadow in selection highlight: h5bp.com/i\r
  28  * These selection rule sets have to be separate.\r
  29  * Customize the background color to match your design.\r
  30  */\r
  31 \r
  32 ::-moz-selection {\r
  33     background: #b3d4fc;\r
  34     text-shadow: none;\r
  35 }\r
  36 \r
  37 ::selection {\r
  38     background: #b3d4fc;\r
  39     text-shadow: none;\r
  40 }\r
  41 \r
  42 /*\r
  43  * A better looking default horizontal rule\r
  44  */\r
  45 \r
  46 hr {\r
  47     display: block;\r
  48     height: 1px;\r
  49     border: 0;\r
  50     border-top: 1px solid #ccc;\r
  51     margin: 1em 0;\r
  52     padding: 0;\r
  53 }\r
  54 \r
  55 /*\r
  56  * Remove the gap between images, videos, audio and canvas and the bottom of\r
  57  * their containers: h5bp.com/i/440\r
  58  */\r
  59 \r
  60 audio,\r
  61 canvas,\r
  62 img,\r
  63 video {\r
  64     vertical-align: middle;\r
  65 }\r
  66 \r
  67 /*\r
  68  * Remove default fieldset styles.\r
  69  */\r
  70 \r
  71 fieldset {\r
  72     border: 0;\r
  73     margin: 0;\r
  74     padding: 0;\r
  75 }\r
  76 \r
  77 /*\r
  78  * Allow only vertical resizing of textareas.\r
  79  */\r
  80 \r
  81 textarea {\r
  82     resize: vertical;\r
  83 }\r
  84 \r
  85 /* ==========================================================================\r
  86    Browse Happy prompt\r
  87    ========================================================================== */\r
  88 \r
  89 .browsehappy {\r
  90     margin: 0.2em 0;\r
  91     background: #ccc;\r
  92     color: #000;\r
  93     padding: 0.2em 0;\r
  94 }\r
  95 \r
  96 /* ==========================================================================\r
  97    silcnet.org styles\r
  98    ========================================================================== */\r
  99 \r
 100 * {\r
 101         margin: 0;\r
 102         padding: 0;\r
 103 }\r
 104 \r
 105 html {\r
 106         /* CSS3 Multiple backgrounds with a fallback */\r
 107 \r
 108         /* Gradient background, various fallbacks */\r
 109         background-image: -moz-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #e4e4e4 100%);\r
 110         background-image: -o-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #e4e4e4 100%);\r
 111         background-image: -webkit-gradient(radial, center center, 0, center center, 498, color-stop(0, #FFFFFF), color-stop(1, #e4e4e4));\r
 112         background-image: -webkit-radial-gradient(center, circle farthest-corner, #FFFFFF 0%, #e4e4e4 100%);\r
 113         background-image: radial-gradient(circle farthest-corner at center, #FFFFFF 0%, #e4e4e4 100%);\r
 114 \r
 115 //      background:url('../img/bg_gradient.jpg') no-repeat center center,url('../img/bg_tile.jpg');\r
 116 }\r
 117 \r
 118 body {\r
 119         color:#555;\r
 120         padding: 10px;\r
 121         position: relative;\r
 122         min-height: 300px;\r
 123         max-height: 300px;\r
 124         height: 100px;\r
 125         font:24px/1.3 'Open Sans Condensed',sans-serif;\r
 126 }\r
 127 \r
 128 small {\r
 129         text-transform: none;\r
 130         font-size: 13px;\r
 131         display: block;\r
 132         margin: 0px 0 0 0;\r
 133 }\r
 134 \r
 135 code {\r
 136         font-size: 18px;\r
 137 }\r
 138 \r
 139 .downloadbutton {\r
 140         display: inline-block;\r
 141         color: #fff !important;\r
 142         line-height: 48px;\r
 143         font-size: 20px;\r
 144         text-transform: uppercase;\r
 145         text-decoration: none !important;\r
 146         text-align: left;\r
 147         padding: 0 30px 0 30px;\r
 148         background: #22cc11;\r
 149         margin: 10px 0 0 0;\r
 150 }\r
 151 \r
 152 .downloadbutton:hover {\r
 153         background: #33dd22;\r
 154 }\r
 155 \r
 156 .downloadbutton small {\r
 157         text-transform: none;\r
 158         font-size: 14px;\r
 159         display: block;\r
 160         margin: -28px 0 0 0;\r
 161         color: #fff\r
 162 }\r
 163 \r
 164 .downloadbutton img {\r
 165         width: 48px;\r
 166         height: 48px;\r
 167         display: inline-block;\r
 168         background-repeat: no-repeat;\r
 169         margin: 10px 10px 10px 0px;\r
 170         float: left;\r
 171 }\r
 172 \r
 173 a, a:visited {\r
 174         text-decoration: none;\r
 175         outline: none;\r
 176         color: #259525;\r
 177 }\r
 178 \r
 179 a:hover {\r
 180         text-decoration:none;\r
 181         color: #255525;\r
 182 }\r
 183 \r
 184 nav {\r
 185         border-top: 1px solid #aaa;\r
 186         font:20px/1.3 'Open Sans Condensed',sans-serif;\r
 187         padding: 0;\r
 188         width: 100%;\r
 189 }\r
 190 \r
 191 nav a, nav a:visited {\r
 192         padding: 1%;\r
 193         text-decoration: none;\r
 194         outline: none;\r
 195         color: #555;\r
 196 }\r
 197 \r
 198 nav a:hover {\r
 199         text-decoration: none;\r
 200         color: #777;\r
 201 }\r
 202 \r
 203 #container {\r
 204         color: #555;\r
 205         font-size: 58px;\r
 206         margin: 0 auto;\r
 207         padding: 6% 0 100px;\r
 208         width: 100%;\r
 209         position:relative;\r
 210         text-align: center;\r
 211         min-height: 40px;\r
 212 \r
 213         font-family:'Open Sans Condensed';,sans-serif;\r
 214         text-shadow:1px 1px 0 rgba(255,255,255,0.5);\r
 215 }\r
 216 \r
 217 #container2 {\r
 218         color: #555;\r
 219         font-size: 52px;\r
 220         margin: 0 auto;\r
 221         padding: 0 0 10px;\r
 222         width: 100%;\r
 223         position:relative;\r
 224         text-align: center;\r
 225         min-height: 10px;\r
 226 \r
 227         font-family:'Open Sans Condensed';,sans-serif;\r
 228         text-shadow:1px 1px 0 rgba(255,255,255,0.5);\r
 229 }\r
 230 \r
 231 footer {\r
 232         display:block;\r
 233         position:fixed;\r
 234         width:100%;\r
 235         height:75px;\r
 236         bottom:0;\r
 237         left:0;\r
 238         z-index: 100000;\r
 239         margin: auto;\r
 240         text-align: center;\r
 241 }\r
 242 \r
 243 @media screen and (min-height: 1100px) {\r
 244         footer {\r
 245                 height:500px;\r
 246         }\r
 247 }\r
 248 \r
 249 @media screen and (min-height: 1000px) {\r
 250         footer {\r
 251                 height:400px;\r
 252         }\r
 253 }\r
 254 \r
 255 @media screen and (min-height: 900px) {\r
 256         footer {\r
 257                 height:300px;\r
 258         }\r
 259 }\r
 260 \r
 261 @media screen and (max-width: 700px), screen and (max-height: 700px) {\r
 262         #container {\r
 263                 font-size: 50px;\r
 264                 padding: 4% 0 80px;\r
 265         }\r
 266         #container2 {\r
 267                 font-size: 46px;\r
 268                 padding: 1% 0 10px;\r
 269         }\r
 270         body {\r
 271                 font-size: 24px;\r
 272         }\r
 273         code {\r
 274                 font-size: 16px;\r
 275         }\r
 276 }\r
 277 \r
 278 @media screen and (max-width: 500px), screen and (max-height: 650px) {\r
 279         #container {\r
 280                 font-size: 43px;\r
 281                 padding: 4% 0 70px;\r
 282         }\r
 283         #container2 {\r
 284                 font-size: 38px;\r
 285                 padding: 1% 0 5px;\r
 286         }\r
 287         body {\r
 288                 font-size: 22px;\r
 289         }\r
 290         code {\r
 291                 font-size: 14px;\r
 292         }\r
 293 }\r
 294 \r
 295 @media screen and (max-width: 420px), screen and (max-height: 550px) {\r
 296         #container {\r
 297                 font-size: 38px;\r
 298                 padding: 3% 0 40px;\r
 299         }\r
 300         #container2 {\r
 301                 font-size: 32px;\r
 302                 padding: 1% 0 5px;\r
 303         }\r
 304         nav {\r
 305                 font-size: 18px;\r
 306         }\r
 307         body {\r
 308                 font-size: 18px;\r
 309         }\r
 310         code {\r
 311                 font-size: 12px;\r
 312         }\r
 313         footer {\r
 314                 height:50px;\r
 315         }\r
 316 }\r
 317 \r
 318 #userText {\r
 319         background: none;\r
 320         border: none;\r
 321         border-bottom: 1px solid #aaa;\r
 322         \r
 323         color: #777777;\r
 324         display: block;\r
 325         font-family: 'Open Sans Condensed',sans-serif;\r
 326         font-size: 26px;\r
 327         margin: 0 auto 0px;\r
 328         padding: 10px;\r
 329         text-align: center;\r
 330         width: 300px;\r
 331         outline: none;\r
 332 }\r
 333 \r
 334 \r
 335 /* ==========================================================================\r
 336    Helper classes\r
 337    ========================================================================== */\r
 338 \r
 339 /*\r
 340  * Image replacement\r
 341  */\r
 342 \r
 343 .ir {\r
 344     background-color: transparent;\r
 345     border: 0;\r
 346     overflow: hidden;\r
 347     /* IE 6/7 fallback */\r
 348     *text-indent: -9999px;\r
 349 }\r
 350 \r
 351 .ir:before {\r
 352     content: "";\r
 353     display: block;\r
 354     width: 0;\r
 355     height: 150%;\r
 356 }\r
 357 \r
 358 /*\r
 359  * Hide from both screenreaders and browsers: h5bp.com/u\r
 360  */\r
 361 \r
 362 .hidden {\r
 363     display: none !important;\r
 364     visibility: hidden;\r
 365 }\r
 366 \r
 367 /*\r
 368  * Hide only visually, but have it available for screenreaders: h5bp.com/v\r
 369  */\r
 370 \r
 371 .visuallyhidden {\r
 372     border: 0;\r
 373     clip: rect(0 0 0 0);\r
 374     height: 1px;\r
 375     margin: -1px;\r
 376     overflow: hidden;\r
 377     padding: 0;\r
 378     position: absolute;\r
 379     width: 1px;\r
 380 }\r
 381 \r
 382 /*\r
 383  * Extends the .visuallyhidden class to allow the element to be focusable\r
 384  * when navigated to via the keyboard: h5bp.com/p\r
 385  */\r
 386 \r
 387 .visuallyhidden.focusable:active,\r
 388 .visuallyhidden.focusable:focus {\r
 389     clip: auto;\r
 390     height: auto;\r
 391     margin: 0;\r
 392     overflow: visible;\r
 393     position: static;\r
 394     width: auto;\r
 395 }\r
 396 \r
 397 /*\r
 398  * Hide visually and from screenreaders, but maintain layout\r
 399  */\r
 400 \r
 401 .invisible {\r
 402     visibility: hidden;\r
 403 }\r
 404 \r
 405 /*\r
 406  * Clearfix: contain floats\r
 407  *\r
 408  * For modern browsers\r
 409  * 1. The space content is one way to avoid an Opera bug when the\r
 410  *    `contenteditable` attribute is included anywhere else in the document.\r
 411  *    Otherwise it causes space to appear at the top and bottom of elements\r
 412  *    that receive the `clearfix` class.\r
 413  * 2. The use of `table` rather than `block` is only necessary if using\r
 414  *    `:before` to contain the top-margins of child elements.\r
 415  */\r
 416 \r
 417 .clearfix:before,\r
 418 .clearfix:after {\r
 419     content: " "; /* 1 */\r
 420     display: table; /* 2 */\r
 421 }\r
 422 \r
 423 .clearfix:after {\r
 424     clear: both;\r
 425 }\r
 426 \r
 427 /*\r
 428  * For IE 6/7 only\r
 429  * Include this rule to trigger hasLayout and contain floats.\r
 430  */\r
 431 \r
 432 .clearfix {\r
 433     *zoom: 1;\r
 434 }\r
 435 \r
 436 /* ==========================================================================\r
 437    EXAMPLE Media Queries for Responsive Design.\r
 438    These examples override the primary ('mobile first') styles.\r
 439    Modify as content requires.\r
 440    ========================================================================== */\r
 441 \r
 442 @media only screen and (min-width: 35em) {\r
 443     /* Style adjustments for viewports that meet the condition */\r
 444 }\r
 445 \r
 446 @media print,\r
 447        (-o-min-device-pixel-ratio: 5/4),\r
 448        (-webkit-min-device-pixel-ratio: 1.25),\r
 449        (min-resolution: 120dpi) {\r
 450     /* Style adjustments for high resolution devices */\r
 451 }\r
 452 \r
 453 /* ==========================================================================\r
 454    Print styles.\r
 455    Inlined to avoid required HTTP connection: h5bp.com/r\r
 456    ========================================================================== */\r
 457 \r
 458 @media print {\r
 459     * {\r
 460         background: transparent !important;\r
 461         color: #000 !important; /* Black prints faster: h5bp.com/s */\r
 462         box-shadow: none !important;\r
 463         text-shadow: none !important;\r
 464     }\r
 465 \r
 466     a,\r
 467     a:visited {\r
 468         text-decoration: underline;\r
 469     }\r
 470 \r
 471     a[href]:after {\r
 472         content: " (" attr(href) ")";\r
 473     }\r
 474 \r
 475     abbr[title]:after {\r
 476         content: " (" attr(title) ")";\r
 477     }\r
 478 \r
 479     /*\r
 480      * Don't show links for images, or javascript/internal links\r
 481      */\r
 482 \r
 483     .ir a:after,\r
 484     a[href^="javascript:"]:after,\r
 485     a[href^="#"]:after {\r
 486         content: "";\r
 487     }\r
 488 \r
 489     pre,\r
 490     blockquote {\r
 491         border: 1px solid #999;\r
 492         page-break-inside: avoid;\r
 493     }\r
 494 \r
 495     thead {\r
 496         display: table-header-group; /* h5bp.com/t */\r
 497     }\r
 498 \r
 499     tr,\r
 500     img {\r
 501         page-break-inside: avoid;\r
 502     }\r
 503 \r
 504     img {\r
 505         max-width: 100% !important;\r
 506     }\r
 507 \r
 508     @page {\r
 509         margin: 0.5cm;\r
 510     }\r
 511 \r
 512     p,\r
 513     h2,\r
 514     h3 {\r
 515         orphans: 3;\r
 516         widows: 3;\r
 517     }\r
 518 \r
 519     h2,\r
 520     h3 {\r
 521         page-break-after: avoid;\r
 522     }\r
 523 }\r