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