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