| OLD | NEW |
| (Empty) | |
| 1 /*! |
| 2 Pure v0.6.2 |
| 3 Copyright 2013 Yahoo! |
| 4 Licensed under the BSD License. |
| 5 https://github.com/yahoo/pure/blob/master/LICENSE.md |
| 6 */ |
| 7 /*! |
| 8 normalize.css v^3.0 | MIT License | git.io/normalize |
| 9 Copyright (c) Nicolas Gallagher and Jonathan Neal |
| 10 */ |
| 11 /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ |
| 12 |
| 13 /** |
| 14 * 1. Set default font family to sans-serif. |
| 15 * 2. Prevent iOS and IE text size adjust after device orientation change, |
| 16 * without disabling user zoom. |
| 17 */ |
| 18 html { |
| 19 font-family: sans-serif; /* 1 */ |
| 20 -ms-text-size-adjust: 100%; /* 2 */ |
| 21 -webkit-text-size-adjust: 100%; /* 2 */ |
| 22 } |
| 23 |
| 24 /** |
| 25 * Remove default margin. |
| 26 */ |
| 27 |
| 28 body { |
| 29 margin: 0; |
| 30 } |
| 31 |
| 32 /* HTML5 display definitions |
| 33 ========================================================================== */ |
| 34 |
| 35 /** |
| 36 * Correct `block` display not defined for any HTML5 element in IE 8/9. |
| 37 * Correct `block` display not defined for `details` or `summary` in IE 10/11 |
| 38 * and Firefox. |
| 39 * Correct `block` display not defined for `main` in IE 11. |
| 40 */ |
| 41 |
| 42 article, |
| 43 aside, |
| 44 details, |
| 45 figcaption, |
| 46 figure, |
| 47 footer, |
| 48 header, |
| 49 hgroup, |
| 50 main, |
| 51 menu, |
| 52 nav, |
| 53 section, |
| 54 summary { |
| 55 display: block; |
| 56 } |
| 57 |
| 58 /** |
| 59 * 1. Correct `inline-block` display not defined in IE 8/9. |
| 60 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. |
| 61 */ |
| 62 |
| 63 audio, |
| 64 canvas, |
| 65 progress, |
| 66 video { |
| 67 display: inline-block; /* 1 */ |
| 68 vertical-align: baseline; /* 2 */ |
| 69 } |
| 70 |
| 71 /** |
| 72 * Prevent modern browsers from displaying `audio` without controls. |
| 73 * Remove excess height in iOS 5 devices. |
| 74 */ |
| 75 |
| 76 audio:not([controls]) { |
| 77 display: none; |
| 78 height: 0; |
| 79 } |
| 80 |
| 81 /** |
| 82 * Address `[hidden]` styling not present in IE 8/9/10. |
| 83 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. |
| 84 */ |
| 85 |
| 86 [hidden], |
| 87 template { |
| 88 display: none; |
| 89 } |
| 90 |
| 91 /* Links |
| 92 ========================================================================== */ |
| 93 |
| 94 /** |
| 95 * Remove the gray background color from active links in IE 10. |
| 96 */ |
| 97 |
| 98 a { |
| 99 background-color: transparent; |
| 100 } |
| 101 |
| 102 /** |
| 103 * Improve readability of focused elements when they are also in an |
| 104 * active/hover state. |
| 105 */ |
| 106 |
| 107 a:active, |
| 108 a:hover { |
| 109 outline: 0; |
| 110 } |
| 111 |
| 112 /* Text-level semantics |
| 113 ========================================================================== */ |
| 114 |
| 115 /** |
| 116 * Address styling not present in IE 8/9/10/11, Safari, and Chrome. |
| 117 */ |
| 118 |
| 119 abbr[title] { |
| 120 border-bottom: 1px dotted; |
| 121 } |
| 122 |
| 123 /** |
| 124 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. |
| 125 */ |
| 126 |
| 127 b, |
| 128 strong { |
| 129 font-weight: bold; |
| 130 } |
| 131 |
| 132 /** |
| 133 * Address styling not present in Safari and Chrome. |
| 134 */ |
| 135 |
| 136 dfn { |
| 137 font-style: italic; |
| 138 } |
| 139 |
| 140 /** |
| 141 * Address variable `h1` font-size and margin within `section` and `article` |
| 142 * contexts in Firefox 4+, Safari, and Chrome. |
| 143 */ |
| 144 |
| 145 h1 { |
| 146 font-size: 2em; |
| 147 margin: 0.67em 0; |
| 148 } |
| 149 |
| 150 /** |
| 151 * Address styling not present in IE 8/9. |
| 152 */ |
| 153 |
| 154 mark { |
| 155 background: #ff0; |
| 156 color: #000; |
| 157 } |
| 158 |
| 159 /** |
| 160 * Address inconsistent and variable font size in all browsers. |
| 161 */ |
| 162 |
| 163 small { |
| 164 font-size: 80%; |
| 165 } |
| 166 |
| 167 /** |
| 168 * Prevent `sub` and `sup` affecting `line-height` in all browsers. |
| 169 */ |
| 170 |
| 171 sub, |
| 172 sup { |
| 173 font-size: 75%; |
| 174 line-height: 0; |
| 175 position: relative; |
| 176 vertical-align: baseline; |
| 177 } |
| 178 |
| 179 sup { |
| 180 top: -0.5em; |
| 181 } |
| 182 |
| 183 sub { |
| 184 bottom: -0.25em; |
| 185 } |
| 186 |
| 187 /* Embedded content |
| 188 ========================================================================== */ |
| 189 |
| 190 /** |
| 191 * Remove border when inside `a` element in IE 8/9/10. |
| 192 */ |
| 193 |
| 194 img { |
| 195 border: 0; |
| 196 } |
| 197 |
| 198 /** |
| 199 * Correct overflow not hidden in IE 9/10/11. |
| 200 */ |
| 201 |
| 202 svg:not(:root) { |
| 203 overflow: hidden; |
| 204 } |
| 205 |
| 206 /* Grouping content |
| 207 ========================================================================== */ |
| 208 |
| 209 /** |
| 210 * Address margin not present in IE 8/9 and Safari. |
| 211 */ |
| 212 |
| 213 figure { |
| 214 margin: 1em 40px; |
| 215 } |
| 216 |
| 217 /** |
| 218 * Address differences between Firefox and other browsers. |
| 219 */ |
| 220 |
| 221 hr { |
| 222 box-sizing: content-box; |
| 223 height: 0; |
| 224 } |
| 225 |
| 226 /** |
| 227 * Contain overflow in all browsers. |
| 228 */ |
| 229 |
| 230 pre { |
| 231 overflow: auto; |
| 232 } |
| 233 |
| 234 /** |
| 235 * Address odd `em`-unit font size rendering in all browsers. |
| 236 */ |
| 237 |
| 238 code, |
| 239 kbd, |
| 240 pre, |
| 241 samp { |
| 242 font-family: monospace, monospace; |
| 243 font-size: 1em; |
| 244 } |
| 245 |
| 246 /* Forms |
| 247 ========================================================================== */ |
| 248 |
| 249 /** |
| 250 * Known limitation: by default, Chrome and Safari on OS X allow very limited |
| 251 * styling of `select`, unless a `border` property is set. |
| 252 */ |
| 253 |
| 254 /** |
| 255 * 1. Correct color not being inherited. |
| 256 * Known issue: affects color of disabled elements. |
| 257 * 2. Correct font properties not being inherited. |
| 258 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. |
| 259 */ |
| 260 |
| 261 button, |
| 262 input, |
| 263 optgroup, |
| 264 select, |
| 265 textarea { |
| 266 color: inherit; /* 1 */ |
| 267 font: inherit; /* 2 */ |
| 268 margin: 0; /* 3 */ |
| 269 } |
| 270 |
| 271 /** |
| 272 * Address `overflow` set to `hidden` in IE 8/9/10/11. |
| 273 */ |
| 274 |
| 275 button { |
| 276 overflow: visible; |
| 277 } |
| 278 |
| 279 /** |
| 280 * Address inconsistent `text-transform` inheritance for `button` and `select`. |
| 281 * All other form control elements do not inherit `text-transform` values. |
| 282 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. |
| 283 * Correct `select` style inheritance in Firefox. |
| 284 */ |
| 285 |
| 286 button, |
| 287 select { |
| 288 text-transform: none; |
| 289 } |
| 290 |
| 291 /** |
| 292 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` |
| 293 * and `video` controls. |
| 294 * 2. Correct inability to style clickable `input` types in iOS. |
| 295 * 3. Improve usability and consistency of cursor style between image-type |
| 296 * `input` and others. |
| 297 */ |
| 298 |
| 299 button, |
| 300 html input[type="button"], /* 1 */ |
| 301 input[type="reset"], |
| 302 input[type="submit"] { |
| 303 -webkit-appearance: button; /* 2 */ |
| 304 cursor: pointer; /* 3 */ |
| 305 } |
| 306 |
| 307 /** |
| 308 * Re-set default cursor for disabled elements. |
| 309 */ |
| 310 |
| 311 button[disabled], |
| 312 html input[disabled] { |
| 313 cursor: default; |
| 314 } |
| 315 |
| 316 /** |
| 317 * Remove inner padding and border in Firefox 4+. |
| 318 */ |
| 319 |
| 320 button::-moz-focus-inner, |
| 321 input::-moz-focus-inner { |
| 322 border: 0; |
| 323 padding: 0; |
| 324 } |
| 325 |
| 326 /** |
| 327 * Address Firefox 4+ setting `line-height` on `input` using `!important` in |
| 328 * the UA stylesheet. |
| 329 */ |
| 330 |
| 331 input { |
| 332 line-height: normal; |
| 333 } |
| 334 |
| 335 /** |
| 336 * It's recommended that you don't attempt to style these elements. |
| 337 * Firefox's implementation doesn't respect box-sizing, padding, or width. |
| 338 * |
| 339 * 1. Address box sizing set to `content-box` in IE 8/9/10. |
| 340 * 2. Remove excess padding in IE 8/9/10. |
| 341 */ |
| 342 |
| 343 input[type="checkbox"], |
| 344 input[type="radio"] { |
| 345 box-sizing: border-box; /* 1 */ |
| 346 padding: 0; /* 2 */ |
| 347 } |
| 348 |
| 349 /** |
| 350 * Fix the cursor style for Chrome's increment/decrement buttons. For certain |
| 351 * `font-size` values of the `input`, it causes the cursor style of the |
| 352 * decrement button to change from `default` to `text`. |
| 353 */ |
| 354 |
| 355 input[type="number"]::-webkit-inner-spin-button, |
| 356 input[type="number"]::-webkit-outer-spin-button { |
| 357 height: auto; |
| 358 } |
| 359 |
| 360 /** |
| 361 * 1. Address `appearance` set to `searchfield` in Safari and Chrome. |
| 362 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. |
| 363 */ |
| 364 |
| 365 input[type="search"] { |
| 366 -webkit-appearance: textfield; /* 1 */ |
| 367 box-sizing: content-box; /* 2 */ |
| 368 } |
| 369 |
| 370 /** |
| 371 * Remove inner padding and search cancel button in Safari and Chrome on OS X. |
| 372 * Safari (but not Chrome) clips the cancel button when the search input has |
| 373 * padding (and `textfield` appearance). |
| 374 */ |
| 375 |
| 376 input[type="search"]::-webkit-search-cancel-button, |
| 377 input[type="search"]::-webkit-search-decoration { |
| 378 -webkit-appearance: none; |
| 379 } |
| 380 |
| 381 /** |
| 382 * Define consistent border, margin, and padding. |
| 383 */ |
| 384 |
| 385 fieldset { |
| 386 border: 1px solid #c0c0c0; |
| 387 margin: 0 2px; |
| 388 padding: 0.35em 0.625em 0.75em; |
| 389 } |
| 390 |
| 391 /** |
| 392 * 1. Correct `color` not being inherited in IE 8/9/10/11. |
| 393 * 2. Remove padding so people aren't caught out if they zero out fieldsets. |
| 394 */ |
| 395 |
| 396 legend { |
| 397 border: 0; /* 1 */ |
| 398 padding: 0; /* 2 */ |
| 399 } |
| 400 |
| 401 /** |
| 402 * Remove default vertical scrollbar in IE 8/9/10/11. |
| 403 */ |
| 404 |
| 405 textarea { |
| 406 overflow: auto; |
| 407 } |
| 408 |
| 409 /** |
| 410 * Don't inherit the `font-weight` (applied by a rule above). |
| 411 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. |
| 412 */ |
| 413 |
| 414 optgroup { |
| 415 font-weight: bold; |
| 416 } |
| 417 |
| 418 /* Tables |
| 419 ========================================================================== */ |
| 420 |
| 421 /** |
| 422 * Remove most spacing between table cells. |
| 423 */ |
| 424 |
| 425 table { |
| 426 border-collapse: collapse; |
| 427 border-spacing: 0; |
| 428 } |
| 429 |
| 430 td, |
| 431 th { |
| 432 padding: 0; |
| 433 } |
| 434 |
| 435 /*csslint important:false*/ |
| 436 |
| 437 /* ========================================================================== |
| 438 Pure Base Extras |
| 439 ========================================================================== */ |
| 440 |
| 441 /** |
| 442 * Extra rules that Pure adds on top of Normalize.css |
| 443 */ |
| 444 |
| 445 /** |
| 446 * Always hide an element when it has the `hidden` HTML attribute. |
| 447 */ |
| 448 |
| 449 .hidden, |
| 450 [hidden] { |
| 451 display: none !important; |
| 452 } |
| 453 |
| 454 /** |
| 455 * Add this class to an image to make it fit within it's fluid parent wrapper wh
ile maintaining |
| 456 * aspect ratio. |
| 457 */ |
| 458 .pure-img { |
| 459 max-width: 100%; |
| 460 height: auto; |
| 461 display: block; |
| 462 } |
| 463 |
| 464 /*csslint regex-selectors:false, known-properties:false, duplicate-properties:fa
lse*/ |
| 465 |
| 466 .pure-g { |
| 467 letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ |
| 468 *letter-spacing: normal; /* reset IE < 8 */ |
| 469 *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */ |
| 470 text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegi
bility */ |
| 471 |
| 472 /* |
| 473 Sets the font stack to fonts known to work properly with the above letter |
| 474 and word spacings. See: https://github.com/yahoo/pure/issues/41/ |
| 475 |
| 476 The following font stack makes Pure Grids work on all known environments. |
| 477 |
| 478 * FreeSans: Ships with many Linux distros, including Ubuntu |
| 479 |
| 480 * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and |
| 481 Arial to get picked up by the browser, even though neither is available |
| 482 in Chrome OS. |
| 483 |
| 484 * Droid Sans: Ships with all versions of Android. |
| 485 |
| 486 * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows. |
| 487 */ |
| 488 font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; |
| 489 |
| 490 /* Use flexbox when possible to avoid `letter-spacing` side-effects. */ |
| 491 display: -webkit-box; |
| 492 display: -webkit-flex; |
| 493 display: -ms-flexbox; |
| 494 display: flex; |
| 495 -webkit-flex-flow: row wrap; |
| 496 -ms-flex-flow: row wrap; |
| 497 flex-flow: row wrap; |
| 498 |
| 499 /* Prevents distributing space between rows */ |
| 500 -webkit-align-content: flex-start; |
| 501 -ms-flex-line-pack: start; |
| 502 align-content: flex-start; |
| 503 } |
| 504 |
| 505 /* IE10 display: -ms-flexbox (and display: flex in IE 11) does not work inside a
table; fall back to block and rely on font hack */ |
| 506 @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { |
| 507 table .pure-g { |
| 508 display: block; |
| 509 } |
| 510 } |
| 511 |
| 512 /* Opera as of 12 on Windows needs word-spacing. |
| 513 The ".opera-only" selector is used to prevent actual prefocus styling |
| 514 and is not required in markup. |
| 515 */ |
| 516 .opera-only :-o-prefocus, |
| 517 .pure-g { |
| 518 word-spacing: -0.43em; |
| 519 } |
| 520 |
| 521 .pure-u { |
| 522 display: inline-block; |
| 523 *display: inline; /* IE < 8: fake inline-block */ |
| 524 zoom: 1; |
| 525 letter-spacing: normal; |
| 526 word-spacing: normal; |
| 527 vertical-align: top; |
| 528 text-rendering: auto; |
| 529 } |
| 530 |
| 531 /* |
| 532 Resets the font family back to the OS/browser's default sans-serif font, |
| 533 this the same font stack that Normalize.css sets for the `body`. |
| 534 */ |
| 535 .pure-g [class *= "pure-u"] { |
| 536 font-family: sans-serif; |
| 537 } |
| 538 |
| 539 .pure-u-1, |
| 540 .pure-u-1-1, |
| 541 .pure-u-1-2, |
| 542 .pure-u-1-3, |
| 543 .pure-u-2-3, |
| 544 .pure-u-1-4, |
| 545 .pure-u-3-4, |
| 546 .pure-u-1-5, |
| 547 .pure-u-2-5, |
| 548 .pure-u-3-5, |
| 549 .pure-u-4-5, |
| 550 .pure-u-5-5, |
| 551 .pure-u-1-6, |
| 552 .pure-u-5-6, |
| 553 .pure-u-1-8, |
| 554 .pure-u-3-8, |
| 555 .pure-u-5-8, |
| 556 .pure-u-7-8, |
| 557 .pure-u-1-12, |
| 558 .pure-u-5-12, |
| 559 .pure-u-7-12, |
| 560 .pure-u-11-12, |
| 561 .pure-u-1-24, |
| 562 .pure-u-2-24, |
| 563 .pure-u-3-24, |
| 564 .pure-u-4-24, |
| 565 .pure-u-5-24, |
| 566 .pure-u-6-24, |
| 567 .pure-u-7-24, |
| 568 .pure-u-8-24, |
| 569 .pure-u-9-24, |
| 570 .pure-u-10-24, |
| 571 .pure-u-11-24, |
| 572 .pure-u-12-24, |
| 573 .pure-u-13-24, |
| 574 .pure-u-14-24, |
| 575 .pure-u-15-24, |
| 576 .pure-u-16-24, |
| 577 .pure-u-17-24, |
| 578 .pure-u-18-24, |
| 579 .pure-u-19-24, |
| 580 .pure-u-20-24, |
| 581 .pure-u-21-24, |
| 582 .pure-u-22-24, |
| 583 .pure-u-23-24, |
| 584 .pure-u-24-24 { |
| 585 display: inline-block; |
| 586 *display: inline; |
| 587 zoom: 1; |
| 588 letter-spacing: normal; |
| 589 word-spacing: normal; |
| 590 vertical-align: top; |
| 591 text-rendering: auto; |
| 592 } |
| 593 |
| 594 .pure-u-1-24 { |
| 595 width: 4.1667%; |
| 596 *width: 4.1357%; |
| 597 } |
| 598 |
| 599 .pure-u-1-12, |
| 600 .pure-u-2-24 { |
| 601 width: 8.3333%; |
| 602 *width: 8.3023%; |
| 603 } |
| 604 |
| 605 .pure-u-1-8, |
| 606 .pure-u-3-24 { |
| 607 width: 12.5000%; |
| 608 *width: 12.4690%; |
| 609 } |
| 610 |
| 611 .pure-u-1-6, |
| 612 .pure-u-4-24 { |
| 613 width: 16.6667%; |
| 614 *width: 16.6357%; |
| 615 } |
| 616 |
| 617 .pure-u-1-5 { |
| 618 width: 20%; |
| 619 *width: 19.9690%; |
| 620 } |
| 621 |
| 622 .pure-u-5-24 { |
| 623 width: 20.8333%; |
| 624 *width: 20.8023%; |
| 625 } |
| 626 |
| 627 .pure-u-1-4, |
| 628 .pure-u-6-24 { |
| 629 width: 25%; |
| 630 *width: 24.9690%; |
| 631 } |
| 632 |
| 633 .pure-u-7-24 { |
| 634 width: 29.1667%; |
| 635 *width: 29.1357%; |
| 636 } |
| 637 |
| 638 .pure-u-1-3, |
| 639 .pure-u-8-24 { |
| 640 width: 33.3333%; |
| 641 *width: 33.3023%; |
| 642 } |
| 643 |
| 644 .pure-u-3-8, |
| 645 .pure-u-9-24 { |
| 646 width: 37.5000%; |
| 647 *width: 37.4690%; |
| 648 } |
| 649 |
| 650 .pure-u-2-5 { |
| 651 width: 40%; |
| 652 *width: 39.9690%; |
| 653 } |
| 654 |
| 655 .pure-u-5-12, |
| 656 .pure-u-10-24 { |
| 657 width: 41.6667%; |
| 658 *width: 41.6357%; |
| 659 } |
| 660 |
| 661 .pure-u-11-24 { |
| 662 width: 45.8333%; |
| 663 *width: 45.8023%; |
| 664 } |
| 665 |
| 666 .pure-u-1-2, |
| 667 .pure-u-12-24 { |
| 668 width: 50%; |
| 669 *width: 49.9690%; |
| 670 } |
| 671 |
| 672 .pure-u-13-24 { |
| 673 width: 54.1667%; |
| 674 *width: 54.1357%; |
| 675 } |
| 676 |
| 677 .pure-u-7-12, |
| 678 .pure-u-14-24 { |
| 679 width: 58.3333%; |
| 680 *width: 58.3023%; |
| 681 } |
| 682 |
| 683 .pure-u-3-5 { |
| 684 width: 60%; |
| 685 *width: 59.9690%; |
| 686 } |
| 687 |
| 688 .pure-u-5-8, |
| 689 .pure-u-15-24 { |
| 690 width: 62.5000%; |
| 691 *width: 62.4690%; |
| 692 } |
| 693 |
| 694 .pure-u-2-3, |
| 695 .pure-u-16-24 { |
| 696 width: 66.6667%; |
| 697 *width: 66.6357%; |
| 698 } |
| 699 |
| 700 .pure-u-17-24 { |
| 701 width: 70.8333%; |
| 702 *width: 70.8023%; |
| 703 } |
| 704 |
| 705 .pure-u-3-4, |
| 706 .pure-u-18-24 { |
| 707 width: 75%; |
| 708 *width: 74.9690%; |
| 709 } |
| 710 |
| 711 .pure-u-19-24 { |
| 712 width: 79.1667%; |
| 713 *width: 79.1357%; |
| 714 } |
| 715 |
| 716 .pure-u-4-5 { |
| 717 width: 80%; |
| 718 *width: 79.9690%; |
| 719 } |
| 720 |
| 721 .pure-u-5-6, |
| 722 .pure-u-20-24 { |
| 723 width: 83.3333%; |
| 724 *width: 83.3023%; |
| 725 } |
| 726 |
| 727 .pure-u-7-8, |
| 728 .pure-u-21-24 { |
| 729 width: 87.5000%; |
| 730 *width: 87.4690%; |
| 731 } |
| 732 |
| 733 .pure-u-11-12, |
| 734 .pure-u-22-24 { |
| 735 width: 91.6667%; |
| 736 *width: 91.6357%; |
| 737 } |
| 738 |
| 739 .pure-u-23-24 { |
| 740 width: 95.8333%; |
| 741 *width: 95.8023%; |
| 742 } |
| 743 |
| 744 .pure-u-1, |
| 745 .pure-u-1-1, |
| 746 .pure-u-5-5, |
| 747 .pure-u-24-24 { |
| 748 width: 100%; |
| 749 } |
| 750 .pure-button { |
| 751 /* Structure */ |
| 752 display: inline-block; |
| 753 zoom: 1; |
| 754 line-height: normal; |
| 755 white-space: nowrap; |
| 756 vertical-align: middle; |
| 757 text-align: center; |
| 758 cursor: pointer; |
| 759 -webkit-user-drag: none; |
| 760 -webkit-user-select: none; |
| 761 -moz-user-select: none; |
| 762 -ms-user-select: none; |
| 763 user-select: none; |
| 764 box-sizing: border-box; |
| 765 } |
| 766 |
| 767 /* Firefox: Get rid of the inner focus border */ |
| 768 .pure-button::-moz-focus-inner { |
| 769 padding: 0; |
| 770 border: 0; |
| 771 } |
| 772 |
| 773 /* Inherit .pure-g styles */ |
| 774 .pure-button-group { |
| 775 letter-spacing: -0.31em; /* Webkit: collapse white-space between units */ |
| 776 *letter-spacing: normal; /* reset IE < 8 */ |
| 777 *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */ |
| 778 text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegi
bility */ |
| 779 } |
| 780 |
| 781 .opera-only :-o-prefocus, |
| 782 .pure-button-group { |
| 783 word-spacing: -0.43em; |
| 784 } |
| 785 |
| 786 .pure-button-group .pure-button { |
| 787 letter-spacing: normal; |
| 788 word-spacing: normal; |
| 789 vertical-align: top; |
| 790 text-rendering: auto; |
| 791 } |
| 792 |
| 793 /*csslint outline-none:false*/ |
| 794 |
| 795 .pure-button { |
| 796 font-family: inherit; |
| 797 font-size: 100%; |
| 798 padding: 0.5em 1em; |
| 799 color: #444; /* rgba not supported (IE 8) */ |
| 800 color: rgba(0, 0, 0, 0.80); /* rgba supported */ |
| 801 border: 1px solid #999; /*IE 6/7/8*/ |
| 802 border: none rgba(0, 0, 0, 0); /*IE9 + everything else*/ |
| 803 background-color: #E6E6E6; |
| 804 text-decoration: none; |
| 805 border-radius: 2px; |
| 806 } |
| 807 |
| 808 .pure-button-hover, |
| 809 .pure-button:hover, |
| 810 .pure-button:focus { |
| 811 /* csslint ignore:start */ |
| 812 filter: alpha(opacity=90); |
| 813 /* csslint ignore:end */ |
| 814 background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%
, rgba(0,0,0, 0.10)); |
| 815 background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0
,0,0, 0.10)); |
| 816 } |
| 817 .pure-button:focus { |
| 818 outline: 0; |
| 819 } |
| 820 .pure-button-active, |
| 821 .pure-button:active { |
| 822 box-shadow: 0 0 0 1px rgba(0,0,0, 0.15) inset, 0 0 6px rgba(0,0,0, 0.20) ins
et; |
| 823 border-color: #000\9; |
| 824 } |
| 825 |
| 826 .pure-button[disabled], |
| 827 .pure-button-disabled, |
| 828 .pure-button-disabled:hover, |
| 829 .pure-button-disabled:focus, |
| 830 .pure-button-disabled:active { |
| 831 border: none; |
| 832 background-image: none; |
| 833 /* csslint ignore:start */ |
| 834 filter: alpha(opacity=40); |
| 835 /* csslint ignore:end */ |
| 836 opacity: 0.40; |
| 837 cursor: not-allowed; |
| 838 box-shadow: none; |
| 839 pointer-events: none; |
| 840 } |
| 841 |
| 842 .pure-button-hidden { |
| 843 display: none; |
| 844 } |
| 845 |
| 846 .pure-button-primary, |
| 847 .pure-button-selected, |
| 848 a.pure-button-primary, |
| 849 a.pure-button-selected { |
| 850 background-color: rgb(0, 120, 231); |
| 851 color: #fff; |
| 852 } |
| 853 |
| 854 /* Button Groups */ |
| 855 .pure-button-group .pure-button { |
| 856 margin: 0; |
| 857 border-radius: 0; |
| 858 border-right: 1px solid #111; /* fallback color for rgba() for IE7/8 */ |
| 859 border-right: 1px solid rgba(0, 0, 0, 0.2); |
| 860 |
| 861 } |
| 862 |
| 863 .pure-button-group .pure-button:first-child { |
| 864 border-top-left-radius: 2px; |
| 865 border-bottom-left-radius: 2px; |
| 866 } |
| 867 .pure-button-group .pure-button:last-child { |
| 868 border-top-right-radius: 2px; |
| 869 border-bottom-right-radius: 2px; |
| 870 border-right: none; |
| 871 } |
| 872 |
| 873 /*csslint box-model:false*/ |
| 874 /* |
| 875 Box-model set to false because we're setting a height on select elements, which |
| 876 also have border and padding. This is done because some browsers don't render |
| 877 the padding. We explicitly set the box-model for select elements to border-box, |
| 878 so we can ignore the csslint warning. |
| 879 */ |
| 880 |
| 881 .pure-form input[type="text"], |
| 882 .pure-form input[type="password"], |
| 883 .pure-form input[type="email"], |
| 884 .pure-form input[type="url"], |
| 885 .pure-form input[type="date"], |
| 886 .pure-form input[type="month"], |
| 887 .pure-form input[type="time"], |
| 888 .pure-form input[type="datetime"], |
| 889 .pure-form input[type="datetime-local"], |
| 890 .pure-form input[type="week"], |
| 891 .pure-form input[type="number"], |
| 892 .pure-form input[type="search"], |
| 893 .pure-form input[type="tel"], |
| 894 .pure-form input[type="color"], |
| 895 .pure-form select, |
| 896 .pure-form textarea { |
| 897 padding: 0.5em 0.6em; |
| 898 display: inline-block; |
| 899 border: 1px solid #ccc; |
| 900 box-shadow: inset 0 1px 3px #ddd; |
| 901 border-radius: 4px; |
| 902 vertical-align: middle; |
| 903 box-sizing: border-box; |
| 904 } |
| 905 |
| 906 /* |
| 907 Need to separate out the :not() selector from the rest of the CSS 2.1 selectors |
| 908 since IE8 won't execute CSS that contains a CSS3 selector. |
| 909 */ |
| 910 .pure-form input:not([type]) { |
| 911 padding: 0.5em 0.6em; |
| 912 display: inline-block; |
| 913 border: 1px solid #ccc; |
| 914 box-shadow: inset 0 1px 3px #ddd; |
| 915 border-radius: 4px; |
| 916 box-sizing: border-box; |
| 917 } |
| 918 |
| 919 |
| 920 /* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */ |
| 921 /* May be able to remove this tweak as color inputs become more standardized acr
oss browsers. */ |
| 922 .pure-form input[type="color"] { |
| 923 padding: 0.2em 0.5em; |
| 924 } |
| 925 |
| 926 |
| 927 .pure-form input[type="text"]:focus, |
| 928 .pure-form input[type="password"]:focus, |
| 929 .pure-form input[type="email"]:focus, |
| 930 .pure-form input[type="url"]:focus, |
| 931 .pure-form input[type="date"]:focus, |
| 932 .pure-form input[type="month"]:focus, |
| 933 .pure-form input[type="time"]:focus, |
| 934 .pure-form input[type="datetime"]:focus, |
| 935 .pure-form input[type="datetime-local"]:focus, |
| 936 .pure-form input[type="week"]:focus, |
| 937 .pure-form input[type="number"]:focus, |
| 938 .pure-form input[type="search"]:focus, |
| 939 .pure-form input[type="tel"]:focus, |
| 940 .pure-form input[type="color"]:focus, |
| 941 .pure-form select:focus, |
| 942 .pure-form textarea:focus { |
| 943 outline: 0; |
| 944 border-color: #129FEA; |
| 945 } |
| 946 |
| 947 /* |
| 948 Need to separate out the :not() selector from the rest of the CSS 2.1 selectors |
| 949 since IE8 won't execute CSS that contains a CSS3 selector. |
| 950 */ |
| 951 .pure-form input:not([type]):focus { |
| 952 outline: 0; |
| 953 border-color: #129FEA; |
| 954 } |
| 955 |
| 956 .pure-form input[type="file"]:focus, |
| 957 .pure-form input[type="radio"]:focus, |
| 958 .pure-form input[type="checkbox"]:focus { |
| 959 outline: thin solid #129FEA; |
| 960 outline: 1px auto #129FEA; |
| 961 } |
| 962 .pure-form .pure-checkbox, |
| 963 .pure-form .pure-radio { |
| 964 margin: 0.5em 0; |
| 965 display: block; |
| 966 } |
| 967 |
| 968 .pure-form input[type="text"][disabled], |
| 969 .pure-form input[type="password"][disabled], |
| 970 .pure-form input[type="email"][disabled], |
| 971 .pure-form input[type="url"][disabled], |
| 972 .pure-form input[type="date"][disabled], |
| 973 .pure-form input[type="month"][disabled], |
| 974 .pure-form input[type="time"][disabled], |
| 975 .pure-form input[type="datetime"][disabled], |
| 976 .pure-form input[type="datetime-local"][disabled], |
| 977 .pure-form input[type="week"][disabled], |
| 978 .pure-form input[type="number"][disabled], |
| 979 .pure-form input[type="search"][disabled], |
| 980 .pure-form input[type="tel"][disabled], |
| 981 .pure-form input[type="color"][disabled], |
| 982 .pure-form select[disabled], |
| 983 .pure-form textarea[disabled] { |
| 984 cursor: not-allowed; |
| 985 background-color: #eaeded; |
| 986 color: #cad2d3; |
| 987 } |
| 988 |
| 989 /* |
| 990 Need to separate out the :not() selector from the rest of the CSS 2.1 selectors |
| 991 since IE8 won't execute CSS that contains a CSS3 selector. |
| 992 */ |
| 993 .pure-form input:not([type])[disabled] { |
| 994 cursor: not-allowed; |
| 995 background-color: #eaeded; |
| 996 color: #cad2d3; |
| 997 } |
| 998 .pure-form input[readonly], |
| 999 .pure-form select[readonly], |
| 1000 .pure-form textarea[readonly] { |
| 1001 background-color: #eee; /* menu hover bg color */ |
| 1002 color: #777; /* menu text color */ |
| 1003 border-color: #ccc; |
| 1004 } |
| 1005 |
| 1006 .pure-form input:focus:invalid, |
| 1007 .pure-form textarea:focus:invalid, |
| 1008 .pure-form select:focus:invalid { |
| 1009 color: #b94a48; |
| 1010 border-color: #e9322d; |
| 1011 } |
| 1012 .pure-form input[type="file"]:focus:invalid:focus, |
| 1013 .pure-form input[type="radio"]:focus:invalid:focus, |
| 1014 .pure-form input[type="checkbox"]:focus:invalid:focus { |
| 1015 outline-color: #e9322d; |
| 1016 } |
| 1017 .pure-form select { |
| 1018 /* Normalizes the height; padding is not sufficient. */ |
| 1019 height: 2.25em; |
| 1020 border: 1px solid #ccc; |
| 1021 background-color: white; |
| 1022 } |
| 1023 .pure-form select[multiple] { |
| 1024 height: auto; |
| 1025 } |
| 1026 .pure-form label { |
| 1027 margin: 0.5em 0 0.2em; |
| 1028 } |
| 1029 .pure-form fieldset { |
| 1030 margin: 0; |
| 1031 padding: 0.35em 0 0.75em; |
| 1032 border: 0; |
| 1033 } |
| 1034 .pure-form legend { |
| 1035 display: block; |
| 1036 width: 100%; |
| 1037 padding: 0.3em 0; |
| 1038 margin-bottom: 0.3em; |
| 1039 color: #333; |
| 1040 border-bottom: 1px solid #e5e5e5; |
| 1041 } |
| 1042 |
| 1043 .pure-form-stacked input[type="text"], |
| 1044 .pure-form-stacked input[type="password"], |
| 1045 .pure-form-stacked input[type="email"], |
| 1046 .pure-form-stacked input[type="url"], |
| 1047 .pure-form-stacked input[type="date"], |
| 1048 .pure-form-stacked input[type="month"], |
| 1049 .pure-form-stacked input[type="time"], |
| 1050 .pure-form-stacked input[type="datetime"], |
| 1051 .pure-form-stacked input[type="datetime-local"], |
| 1052 .pure-form-stacked input[type="week"], |
| 1053 .pure-form-stacked input[type="number"], |
| 1054 .pure-form-stacked input[type="search"], |
| 1055 .pure-form-stacked input[type="tel"], |
| 1056 .pure-form-stacked input[type="color"], |
| 1057 .pure-form-stacked input[type="file"], |
| 1058 .pure-form-stacked select, |
| 1059 .pure-form-stacked label, |
| 1060 .pure-form-stacked textarea { |
| 1061 display: block; |
| 1062 margin: 0.25em 0; |
| 1063 } |
| 1064 |
| 1065 /* |
| 1066 Need to separate out the :not() selector from the rest of the CSS 2.1 selectors |
| 1067 since IE8 won't execute CSS that contains a CSS3 selector. |
| 1068 */ |
| 1069 .pure-form-stacked input:not([type]) { |
| 1070 display: block; |
| 1071 margin: 0.25em 0; |
| 1072 } |
| 1073 .pure-form-aligned input, |
| 1074 .pure-form-aligned textarea, |
| 1075 .pure-form-aligned select, |
| 1076 /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead.
*/ |
| 1077 .pure-form-aligned .pure-help-inline, |
| 1078 .pure-form-message-inline { |
| 1079 display: inline-block; |
| 1080 *display: inline; |
| 1081 *zoom: 1; |
| 1082 vertical-align: middle; |
| 1083 } |
| 1084 .pure-form-aligned textarea { |
| 1085 vertical-align: top; |
| 1086 } |
| 1087 |
| 1088 /* Aligned Forms */ |
| 1089 .pure-form-aligned .pure-control-group { |
| 1090 margin-bottom: 0.5em; |
| 1091 } |
| 1092 .pure-form-aligned .pure-control-group label { |
| 1093 text-align: right; |
| 1094 display: inline-block; |
| 1095 vertical-align: middle; |
| 1096 width: 10em; |
| 1097 margin: 0 1em 0 0; |
| 1098 } |
| 1099 .pure-form-aligned .pure-controls { |
| 1100 margin: 1.5em 0 0 11em; |
| 1101 } |
| 1102 |
| 1103 /* Rounded Inputs */ |
| 1104 .pure-form input.pure-input-rounded, |
| 1105 .pure-form .pure-input-rounded { |
| 1106 border-radius: 2em; |
| 1107 padding: 0.5em 1em; |
| 1108 } |
| 1109 |
| 1110 /* Grouped Inputs */ |
| 1111 .pure-form .pure-group fieldset { |
| 1112 margin-bottom: 10px; |
| 1113 } |
| 1114 .pure-form .pure-group input, |
| 1115 .pure-form .pure-group textarea { |
| 1116 display: block; |
| 1117 padding: 10px; |
| 1118 margin: 0 0 -1px; |
| 1119 border-radius: 0; |
| 1120 position: relative; |
| 1121 top: -1px; |
| 1122 } |
| 1123 .pure-form .pure-group input:focus, |
| 1124 .pure-form .pure-group textarea:focus { |
| 1125 z-index: 3; |
| 1126 } |
| 1127 .pure-form .pure-group input:first-child, |
| 1128 .pure-form .pure-group textarea:first-child { |
| 1129 top: 1px; |
| 1130 border-radius: 4px 4px 0 0; |
| 1131 margin: 0; |
| 1132 } |
| 1133 .pure-form .pure-group input:first-child:last-child, |
| 1134 .pure-form .pure-group textarea:first-child:last-child { |
| 1135 top: 1px; |
| 1136 border-radius: 4px; |
| 1137 margin: 0; |
| 1138 } |
| 1139 .pure-form .pure-group input:last-child, |
| 1140 .pure-form .pure-group textarea:last-child { |
| 1141 top: -2px; |
| 1142 border-radius: 0 0 4px 4px; |
| 1143 margin: 0; |
| 1144 } |
| 1145 .pure-form .pure-group button { |
| 1146 margin: 0.35em 0; |
| 1147 } |
| 1148 |
| 1149 .pure-form .pure-input-1 { |
| 1150 width: 100%; |
| 1151 } |
| 1152 .pure-form .pure-input-3-4 { |
| 1153 width: 75%; |
| 1154 } |
| 1155 .pure-form .pure-input-2-3 { |
| 1156 width: 66%; |
| 1157 } |
| 1158 .pure-form .pure-input-1-2 { |
| 1159 width: 50%; |
| 1160 } |
| 1161 .pure-form .pure-input-1-3 { |
| 1162 width: 33%; |
| 1163 } |
| 1164 .pure-form .pure-input-1-4 { |
| 1165 width: 25%; |
| 1166 } |
| 1167 |
| 1168 /* Inline help for forms */ |
| 1169 /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline instead.
*/ |
| 1170 .pure-form .pure-help-inline, |
| 1171 .pure-form-message-inline { |
| 1172 display: inline-block; |
| 1173 padding-left: 0.3em; |
| 1174 color: #666; |
| 1175 vertical-align: middle; |
| 1176 font-size: 0.875em; |
| 1177 } |
| 1178 |
| 1179 /* Block help for forms */ |
| 1180 .pure-form-message { |
| 1181 display: block; |
| 1182 color: #666; |
| 1183 font-size: 0.875em; |
| 1184 } |
| 1185 |
| 1186 @media only screen and (max-width : 480px) { |
| 1187 .pure-form button[type="submit"] { |
| 1188 margin: 0.7em 0 0; |
| 1189 } |
| 1190 |
| 1191 .pure-form input:not([type]), |
| 1192 .pure-form input[type="text"], |
| 1193 .pure-form input[type="password"], |
| 1194 .pure-form input[type="email"], |
| 1195 .pure-form input[type="url"], |
| 1196 .pure-form input[type="date"], |
| 1197 .pure-form input[type="month"], |
| 1198 .pure-form input[type="time"], |
| 1199 .pure-form input[type="datetime"], |
| 1200 .pure-form input[type="datetime-local"], |
| 1201 .pure-form input[type="week"], |
| 1202 .pure-form input[type="number"], |
| 1203 .pure-form input[type="search"], |
| 1204 .pure-form input[type="tel"], |
| 1205 .pure-form input[type="color"], |
| 1206 .pure-form label { |
| 1207 margin-bottom: 0.3em; |
| 1208 display: block; |
| 1209 } |
| 1210 |
| 1211 .pure-group input:not([type]), |
| 1212 .pure-group input[type="text"], |
| 1213 .pure-group input[type="password"], |
| 1214 .pure-group input[type="email"], |
| 1215 .pure-group input[type="url"], |
| 1216 .pure-group input[type="date"], |
| 1217 .pure-group input[type="month"], |
| 1218 .pure-group input[type="time"], |
| 1219 .pure-group input[type="datetime"], |
| 1220 .pure-group input[type="datetime-local"], |
| 1221 .pure-group input[type="week"], |
| 1222 .pure-group input[type="number"], |
| 1223 .pure-group input[type="search"], |
| 1224 .pure-group input[type="tel"], |
| 1225 .pure-group input[type="color"] { |
| 1226 margin-bottom: 0; |
| 1227 } |
| 1228 |
| 1229 .pure-form-aligned .pure-control-group label { |
| 1230 margin-bottom: 0.3em; |
| 1231 text-align: left; |
| 1232 display: block; |
| 1233 width: 100%; |
| 1234 } |
| 1235 |
| 1236 .pure-form-aligned .pure-controls { |
| 1237 margin: 1.5em 0 0 0; |
| 1238 } |
| 1239 |
| 1240 /* NOTE: pure-help-inline is deprecated. Use .pure-form-message-inline inste
ad. */ |
| 1241 .pure-form .pure-help-inline, |
| 1242 .pure-form-message-inline, |
| 1243 .pure-form-message { |
| 1244 display: block; |
| 1245 font-size: 0.75em; |
| 1246 /* Increased bottom padding to make it group with its related input elem
ent. */ |
| 1247 padding: 0.2em 0 0.8em; |
| 1248 } |
| 1249 } |
| 1250 |
| 1251 /*csslint adjoining-classes: false, box-model:false*/ |
| 1252 .pure-menu { |
| 1253 box-sizing: border-box; |
| 1254 } |
| 1255 |
| 1256 .pure-menu-fixed { |
| 1257 position: fixed; |
| 1258 left: 0; |
| 1259 top: 0; |
| 1260 z-index: 3; |
| 1261 } |
| 1262 |
| 1263 .pure-menu-list, |
| 1264 .pure-menu-item { |
| 1265 position: relative; |
| 1266 } |
| 1267 |
| 1268 .pure-menu-list { |
| 1269 list-style: none; |
| 1270 margin: 0; |
| 1271 padding: 0; |
| 1272 } |
| 1273 |
| 1274 .pure-menu-item { |
| 1275 padding: 0; |
| 1276 margin: 0; |
| 1277 height: 100%; |
| 1278 } |
| 1279 |
| 1280 .pure-menu-link, |
| 1281 .pure-menu-heading { |
| 1282 display: block; |
| 1283 text-decoration: none; |
| 1284 white-space: nowrap; |
| 1285 } |
| 1286 |
| 1287 /* HORIZONTAL MENU */ |
| 1288 .pure-menu-horizontal { |
| 1289 width: 100%; |
| 1290 white-space: nowrap; |
| 1291 } |
| 1292 |
| 1293 .pure-menu-horizontal .pure-menu-list { |
| 1294 display: inline-block; |
| 1295 } |
| 1296 |
| 1297 /* Initial menus should be inline-block so that they are horizontal */ |
| 1298 .pure-menu-horizontal .pure-menu-item, |
| 1299 .pure-menu-horizontal .pure-menu-heading, |
| 1300 .pure-menu-horizontal .pure-menu-separator { |
| 1301 display: inline-block; |
| 1302 *display: inline; |
| 1303 zoom: 1; |
| 1304 vertical-align: middle; |
| 1305 } |
| 1306 |
| 1307 /* Submenus should still be display: block; */ |
| 1308 .pure-menu-item .pure-menu-item { |
| 1309 display: block; |
| 1310 } |
| 1311 |
| 1312 .pure-menu-children { |
| 1313 display: none; |
| 1314 position: absolute; |
| 1315 left: 100%; |
| 1316 top: 0; |
| 1317 margin: 0; |
| 1318 padding: 0; |
| 1319 z-index: 3; |
| 1320 } |
| 1321 |
| 1322 .pure-menu-horizontal .pure-menu-children { |
| 1323 left: 0; |
| 1324 top: auto; |
| 1325 width: inherit; |
| 1326 } |
| 1327 |
| 1328 .pure-menu-allow-hover:hover > .pure-menu-children, |
| 1329 .pure-menu-active > .pure-menu-children { |
| 1330 display: block; |
| 1331 position: absolute; |
| 1332 } |
| 1333 |
| 1334 /* Vertical Menus - show the dropdown arrow */ |
| 1335 .pure-menu-has-children > .pure-menu-link:after { |
| 1336 padding-left: 0.5em; |
| 1337 content: "\25B8"; |
| 1338 font-size: small; |
| 1339 } |
| 1340 |
| 1341 /* Horizontal Menus - show the dropdown arrow */ |
| 1342 .pure-menu-horizontal .pure-menu-has-children > .pure-menu-link:after { |
| 1343 content: "\25BE"; |
| 1344 } |
| 1345 |
| 1346 /* scrollable menus */ |
| 1347 .pure-menu-scrollable { |
| 1348 overflow-y: scroll; |
| 1349 overflow-x: hidden; |
| 1350 } |
| 1351 |
| 1352 .pure-menu-scrollable .pure-menu-list { |
| 1353 display: block; |
| 1354 } |
| 1355 |
| 1356 .pure-menu-horizontal.pure-menu-scrollable .pure-menu-list { |
| 1357 display: inline-block; |
| 1358 } |
| 1359 |
| 1360 .pure-menu-horizontal.pure-menu-scrollable { |
| 1361 white-space: nowrap; |
| 1362 overflow-y: hidden; |
| 1363 overflow-x: auto; |
| 1364 -ms-overflow-style: none; |
| 1365 -webkit-overflow-scrolling: touch; |
| 1366 /* a little extra padding for this style to allow for scrollbars */ |
| 1367 padding: .5em 0; |
| 1368 } |
| 1369 |
| 1370 .pure-menu-horizontal.pure-menu-scrollable::-webkit-scrollbar { |
| 1371 display: none; |
| 1372 } |
| 1373 |
| 1374 /* misc default styling */ |
| 1375 |
| 1376 .pure-menu-separator, |
| 1377 .pure-menu-horizontal .pure-menu-children .pure-menu-separator { |
| 1378 background-color: #ccc; |
| 1379 height: 1px; |
| 1380 margin: .3em 0; |
| 1381 } |
| 1382 |
| 1383 .pure-menu-horizontal .pure-menu-separator { |
| 1384 width: 1px; |
| 1385 height: 1.3em; |
| 1386 margin: 0 .3em ; |
| 1387 } |
| 1388 |
| 1389 /* Need to reset the separator since submenu is vertical */ |
| 1390 .pure-menu-horizontal .pure-menu-children .pure-menu-separator { |
| 1391 display: block; |
| 1392 width: auto; |
| 1393 } |
| 1394 |
| 1395 .pure-menu-heading { |
| 1396 text-transform: uppercase; |
| 1397 color: #565d64; |
| 1398 } |
| 1399 |
| 1400 .pure-menu-link { |
| 1401 color: #777; |
| 1402 } |
| 1403 |
| 1404 .pure-menu-children { |
| 1405 background-color: #fff; |
| 1406 } |
| 1407 |
| 1408 .pure-menu-link, |
| 1409 .pure-menu-disabled, |
| 1410 .pure-menu-heading { |
| 1411 padding: .5em 1em; |
| 1412 } |
| 1413 |
| 1414 .pure-menu-disabled { |
| 1415 opacity: .5; |
| 1416 } |
| 1417 |
| 1418 .pure-menu-disabled .pure-menu-link:hover { |
| 1419 background-color: transparent; |
| 1420 } |
| 1421 |
| 1422 .pure-menu-active > .pure-menu-link, |
| 1423 .pure-menu-link:hover, |
| 1424 .pure-menu-link:focus { |
| 1425 background-color: #eee; |
| 1426 } |
| 1427 |
| 1428 .pure-menu-selected .pure-menu-link, |
| 1429 .pure-menu-selected .pure-menu-link:visited { |
| 1430 color: #000; |
| 1431 } |
| 1432 |
| 1433 .pure-table { |
| 1434 /* Remove spacing between table cells (from Normalize.css) */ |
| 1435 border-collapse: collapse; |
| 1436 border-spacing: 0; |
| 1437 empty-cells: show; |
| 1438 border: 1px solid #cbcbcb; |
| 1439 } |
| 1440 |
| 1441 .pure-table caption { |
| 1442 color: #000; |
| 1443 font: italic 85%/1 arial, sans-serif; |
| 1444 padding: 1em 0; |
| 1445 text-align: center; |
| 1446 } |
| 1447 |
| 1448 .pure-table td, |
| 1449 .pure-table th { |
| 1450 border-left: 1px solid #cbcbcb;/* inner column border */ |
| 1451 border-width: 0 0 0 1px; |
| 1452 font-size: inherit; |
| 1453 margin: 0; |
| 1454 overflow: visible; /*to make ths where the title is really long work*/ |
| 1455 padding: 0.5em 1em; /* cell padding */ |
| 1456 } |
| 1457 |
| 1458 /* Consider removing this next declaration block, as it causes problems when |
| 1459 there's a rowspan on the first cell. Case added to the tests. issue#432 */ |
| 1460 .pure-table td:first-child, |
| 1461 .pure-table th:first-child { |
| 1462 border-left-width: 0; |
| 1463 } |
| 1464 |
| 1465 .pure-table thead { |
| 1466 background-color: #e0e0e0; |
| 1467 color: #000; |
| 1468 text-align: left; |
| 1469 vertical-align: bottom; |
| 1470 } |
| 1471 |
| 1472 /* |
| 1473 striping: |
| 1474 even - #fff (white) |
| 1475 odd - #f2f2f2 (light gray) |
| 1476 */ |
| 1477 .pure-table td { |
| 1478 background-color: transparent; |
| 1479 } |
| 1480 .pure-table-odd td { |
| 1481 background-color: #f2f2f2; |
| 1482 } |
| 1483 |
| 1484 /* nth-child selector for modern browsers */ |
| 1485 .pure-table-striped tr:nth-child(2n-1) td { |
| 1486 background-color: #f2f2f2; |
| 1487 } |
| 1488 |
| 1489 /* BORDERED TABLES */ |
| 1490 .pure-table-bordered td { |
| 1491 border-bottom: 1px solid #cbcbcb; |
| 1492 } |
| 1493 .pure-table-bordered tbody > tr:last-child > td { |
| 1494 border-bottom-width: 0; |
| 1495 } |
| 1496 |
| 1497 |
| 1498 /* HORIZONTAL BORDERED TABLES */ |
| 1499 |
| 1500 .pure-table-horizontal td, |
| 1501 .pure-table-horizontal th { |
| 1502 border-width: 0 0 1px 0; |
| 1503 border-bottom: 1px solid #cbcbcb; |
| 1504 } |
| 1505 .pure-table-horizontal tbody > tr:last-child > td { |
| 1506 border-bottom-width: 0; |
| 1507 } |
| OLD | NEW |