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:22px/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 small a, small a:visited {\r
 136         color: #555;\r
 137 }\r
 138 \r
 139 small a:hover {\r
 140         color: #777;\r
 141 }\r
 142 \r
 143 code {\r
 144         font-size: 18px;\r
 145 }\r
 146 \r
 147 .list {\r
 148         width: 75%;\r
 149         text-align: left;\r
 150         font-size: 90%;\r
 151 }\r
 152 \r
 153 .downloadbutton {\r
 154         display: inline-block;\r
 155         color: #fff !important;\r
 156         line-height: 48px;\r
 157         font-size: 20px;\r
 158         text-transform: uppercase;\r
 159         text-decoration: none !important;\r
 160         text-align: left;\r
 161         padding: 0 30px 0 30px;\r
 162         background: #22cc11;\r
 163         margin: 10px 0 0 0;\r
 164 }\r
 165 \r
 166 .downloadbutton:hover {\r
 167         background: #33dd22;\r
 168 }\r
 169 \r
 170 .downloadbutton small {\r
 171         text-transform: none;\r
 172         font-size: 14px;\r
 173         display: block;\r
 174         margin: -28px 0 0 0;\r
 175         color: #fff\r
 176 }\r
 177 \r
 178 .downloadbutton img {\r
 179         width: 48px;\r
 180         height: 48px;\r
 181         display: inline-block;\r
 182         background-repeat: no-repeat;\r
 183         margin: 10px 10px 10px 0px;\r
 184         float: left;\r
 185 }\r
 186 \r
 187 a, a:visited {\r
 188         text-decoration: none;\r
 189         outline: none;\r
 190         color: #259525;\r
 191 }\r
 192 \r
 193 a:hover {\r
 194         text-decoration:none;\r
 195         color: #255525;\r
 196 }\r
 197 \r
 198 nav {\r
 199         border-top: 1px solid #aaa;\r
 200         font:20px/1.3 'Open Sans Condensed',sans-serif;\r
 201         padding: 0;\r
 202         width: 100%;\r
 203 }\r
 204 \r
 205 nav a, nav a:visited {\r
 206         padding: 1%;\r
 207         text-decoration: none;\r
 208         outline: none;\r
 209         color: #555;\r
 210 }\r
 211 \r
 212 nav a:hover {\r
 213         text-decoration: none;\r
 214         color: #777;\r
 215 }\r
 216 \r
 217 #container {\r
 218         color: #555;\r
 219         font-size: 58px;\r
 220         margin: 0 auto;\r
 221         padding: 6% 0 100px;\r
 222         width: 100%;\r
 223         position:relative;\r
 224         text-align: center;\r
 225         min-height: 40px;\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 #container2 {\r
 232         color: #555;\r
 233         font-size: 52px;\r
 234         margin: 0 auto;\r
 235         padding: 0 0 10px;\r
 236         width: 100%;\r
 237         position:relative;\r
 238         text-align: center;\r
 239         min-height: 10px;\r
 240 \r
 241         font-family:'Open Sans Condensed';,sans-serif;\r
 242         text-shadow:1px 1px 0 rgba(255,255,255,0.5);\r
 243 }\r
 244 \r
 245 footer {\r
 246         display:block;\r
 247         position:fixed;\r
 248         width:100%;\r
 249         height:75px;\r
 250         bottom:0;\r
 251         left:0;\r
 252         z-index: 100000;\r
 253         margin: auto;\r
 254         text-align: center;\r
 255 }\r
 256 \r
 257 @media screen and (min-height: 1100px) {\r
 258         footer {\r
 259                 height:500px;\r
 260         }\r
 261 }\r
 262 \r
 263 @media screen and (min-height: 1000px) {\r
 264         footer {\r
 265                 height:400px;\r
 266         }\r
 267 }\r
 268 \r
 269 @media screen and (min-height: 930px) {\r
 270         footer {\r
 271                 height:300px;\r
 272         }\r
 273 }\r
 274 \r
 275 @media screen and (max-width: 700px), screen and (max-height: 700px) {\r
 276         #container {\r
 277                 font-size: 56px;\r
 278                 padding: 4% 0 80px;\r
 279         }\r
 280         #container2 {\r
 281                 font-size: 38px;\r
 282                 padding: 1% 0 10px;\r
 283         }\r
 284         body {\r
 285                 font-size: 21px;\r
 286         }\r
 287         code {\r
 288                 font-size: 16px;\r
 289         }\r
 290 }\r
 291 \r
 292 @media screen and (max-width: 500px), screen and (max-height: 650px) {\r
 293         #container {\r
 294                 font-size: 43px;\r
 295                 padding: 4% 0 70px;\r
 296         }\r
 297         #container2 {\r
 298                 font-size: 36px;\r
 299                 padding: 1% 0 5px;\r
 300         }\r
 301         body {\r
 302                 font-size: 18px;\r
 303         }\r
 304         code {\r
 305                 font-size: 14px;\r
 306         }\r
 307 }\r
 308 \r
 309 @media screen and (max-width: 420px), screen and (max-height: 550px) {\r
 310         #container {\r
 311                 font-size: 38px;\r
 312                 padding: 3% 0 40px;\r
 313         }\r
 314         #container2 {\r
 315                 font-size: 32px;\r
 316                 padding: 1% 0 5px;\r
 317         }\r
 318         nav {\r
 319                 font-size: 18px;\r
 320         }\r
 321         body {\r
 322                 font-size: 17px;\r
 323         }\r
 324         code {\r
 325                 font-size: 12px;\r
 326         }\r
 327         footer {\r
 328                 height:50px;\r
 329         }\r
 330 }\r
 331 \r
 332 #userText {\r
 333         background: none;\r
 334         border: none;\r
 335         border-bottom: 1px solid #aaa;\r
 336         \r
 337         color: #777777;\r
 338         display: block;\r
 339         font-family: 'Open Sans Condensed',sans-serif;\r
 340         font-size: 26px;\r
 341         margin: 0 auto 0px;\r
 342         padding: 10px;\r
 343         text-align: center;\r
 344         width: 300px;\r
 345         outline: none;\r
 346 }\r
 347 \r
 348 \r
 349 /* ==========================================================================\r
 350    Helper classes\r
 351    ========================================================================== */\r
 352 \r
 353 /*\r
 354  * Image replacement\r
 355  */\r
 356 \r
 357 .ir {\r
 358     background-color: transparent;\r
 359     border: 0;\r
 360     overflow: hidden;\r
 361     /* IE 6/7 fallback */\r
 362     *text-indent: -9999px;\r
 363 }\r
 364 \r
 365 .ir:before {\r
 366     content: "";\r
 367     display: block;\r
 368     width: 0;\r
 369     height: 150%;\r
 370 }\r
 371 \r
 372 /*\r
 373  * Hide from both screenreaders and browsers: h5bp.com/u\r
 374  */\r
 375 \r
 376 .hidden {\r
 377     display: none !important;\r
 378     visibility: hidden;\r
 379 }\r
 380 \r
 381 /*\r
 382  * Hide only visually, but have it available for screenreaders: h5bp.com/v\r
 383  */\r
 384 \r
 385 .visuallyhidden {\r
 386     border: 0;\r
 387     clip: rect(0 0 0 0);\r
 388     height: 1px;\r
 389     margin: -1px;\r
 390     overflow: hidden;\r
 391     padding: 0;\r
 392     position: absolute;\r
 393     width: 1px;\r
 394 }\r
 395 \r
 396 /*\r
 397  * Extends the .visuallyhidden class to allow the element to be focusable\r
 398  * when navigated to via the keyboard: h5bp.com/p\r
 399  */\r
 400 \r
 401 .visuallyhidden.focusable:active,\r
 402 .visuallyhidden.focusable:focus {\r
 403     clip: auto;\r
 404     height: auto;\r
 405     margin: 0;\r
 406     overflow: visible;\r
 407     position: static;\r
 408     width: auto;\r
 409 }\r
 410 \r
 411 /*\r
 412  * Hide visually and from screenreaders, but maintain layout\r
 413  */\r
 414 \r
 415 .invisible {\r
 416     visibility: hidden;\r
 417 }\r
 418 \r
 419 /*\r
 420  * Clearfix: contain floats\r
 421  *\r
 422  * For modern browsers\r
 423  * 1. The space content is one way to avoid an Opera bug when the\r
 424  *    `contenteditable` attribute is included anywhere else in the document.\r
 425  *    Otherwise it causes space to appear at the top and bottom of elements\r
 426  *    that receive the `clearfix` class.\r
 427  * 2. The use of `table` rather than `block` is only necessary if using\r
 428  *    `:before` to contain the top-margins of child elements.\r
 429  */\r
 430 \r
 431 .clearfix:before,\r
 432 .clearfix:after {\r
 433     content: " "; /* 1 */\r
 434     display: table; /* 2 */\r
 435 }\r
 436 \r
 437 .clearfix:after {\r
 438     clear: both;\r
 439 }\r
 440 \r
 441 /*\r
 442  * For IE 6/7 only\r
 443  * Include this rule to trigger hasLayout and contain floats.\r
 444  */\r
 445 \r
 446 .clearfix {\r
 447     *zoom: 1;\r
 448 }\r
 449 \r
 450 /* ==========================================================================\r
 451    EXAMPLE Media Queries for Responsive Design.\r
 452    These examples override the primary ('mobile first') styles.\r
 453    Modify as content requires.\r
 454    ========================================================================== */\r
 455 \r
 456 @media only screen and (min-width: 35em) {\r
 457     /* Style adjustments for viewports that meet the condition */\r
 458 }\r
 459 \r
 460 @media print,\r
 461        (-o-min-device-pixel-ratio: 5/4),\r
 462        (-webkit-min-device-pixel-ratio: 1.25),\r
 463        (min-resolution: 120dpi) {\r
 464     /* Style adjustments for high resolution devices */\r
 465 }\r
 466 \r
 467 /* ==========================================================================\r
 468    Print styles.\r
 469    Inlined to avoid required HTTP connection: h5bp.com/r\r
 470    ========================================================================== */\r
 471 \r
 472 @media print {\r
 473     * {\r
 474         background: transparent !important;\r
 475         color: #000 !important; /* Black prints faster: h5bp.com/s */\r
 476         box-shadow: none !important;\r
 477         text-shadow: none !important;\r
 478     }\r
 479 \r
 480     a,\r
 481     a:visited {\r
 482         text-decoration: underline;\r
 483     }\r
 484 \r
 485     a[href]:after {\r
 486         content: " (" attr(href) ")";\r
 487     }\r
 488 \r
 489     abbr[title]:after {\r
 490         content: " (" attr(title) ")";\r
 491     }\r
 492 \r
 493     /*\r
 494      * Don't show links for images, or javascript/internal links\r
 495      */\r
 496 \r
 497     .ir a:after,\r
 498     a[href^="javascript:"]:after,\r
 499     a[href^="#"]:after {\r
 500         content: "";\r
 501     }\r
 502 \r
 503     pre,\r
 504     blockquote {\r
 505         border: 1px solid #999;\r
 506         page-break-inside: avoid;\r
 507     }\r
 508 \r
 509     thead {\r
 510         display: table-header-group; /* h5bp.com/t */\r
 511     }\r
 512 \r
 513     tr,\r
 514     img {\r
 515         page-break-inside: avoid;\r
 516     }\r
 517 \r
 518     img {\r
 519         max-width: 100% !important;\r
 520     }\r
 521 \r
 522     @page {\r
 523         margin: 0.5cm;\r
 524     }\r
 525 \r
 526     p,\r
 527     h2,\r
 528     h3 {\r
 529         orphans: 3;\r
 530         widows: 3;\r
 531     }\r
 532 \r
 533     h2,\r
 534     h3 {\r
 535         page-break-after: avoid;\r
 536     }\r
 537 }\r