Home Explore Help
Register Sign In
MEDLab
/
medlab-website-archival
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Branch: master
Branches Tags
medlab-website-...
/
_includes
/
branding.css

branding.css 6.3 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 
  1. /** Global styles */
    2. 

  2. html { box-sizing: border-box; }
    3. 

  3. 

  4. body { margin: 0; padding: 0; }
    5. 

  5. 

  6. .page { background: #fff; }
    7. 

  7. 

  8. *, *:before, *:after { box-sizing: inherit; }
    9. 

  9. 

  10. a:link, a:visited { color: #0277BD; transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease; text-decoration: none; text-decoration-color: rgba(2, 119, 189, 0.65); -webkit-text-decoration-color: rgba(2, 119, 189, 0.65); }
    11. 

  11. a:hover { color: #B71C1C; text-decoration-color: rgba(183, 28, 28, 0.65); -webkit-text-decoration-color: rgba(183, 28, 28, 0.65); }
    12. 

  12. a:active, a:focus { color: #B71C1C; text-decoration-color: rgba(183, 28, 28, 0.65); -webkit-text-decoration-color: rgba(183, 28, 28, 0.65); }
    13. 

  13. 

  14. /** Branding styles */
    15. 

  15. #print-header { display: none; }
    16. 

  16. 

  17. .banner-white .header-wrapper, header.white { background: #fff; color: #111111; }
    18. 

  18. .banner-white .header-wrapper a:link, .banner-white .header-wrapper a:visited, .banner-white .header-wrapper a:hover, header.white a:link, header.white a:visited, header.white a:hover { color: #111111; }
    19. 

  19. .banner-white .header-wrapper .menu-toggle button, header.white .menu-toggle button { color: #111111; border-color: rgba(128, 128, 128, 0.5); }
    20. 

  20. .banner-white .header-wrapper a.search-toggle:link, .banner-white .header-wrapper a.search-toggle:visited, header.white a.search-toggle:link, header.white a.search-toggle:visited { color: #111111; }
    21. 

  21. 

  22. .banner-light .header-wrapper, header.light { background: #EEEEEE; color: #111111; }
    23. 

  23. .banner-light .header-wrapper a:link, .banner-light .header-wrapper a:visited, .banner-light .header-wrapper a:hover, header.light a:link, header.light a:visited, header.light a:hover { color: #111111; }
    24. 

  24. .banner-light .header-wrapper .menu-toggle button, header.light .menu-toggle button { color: #111111; border-color: rgba(128, 128, 128, 0.5); }
    25. 

  25. .banner-light .header-wrapper a.search-toggle:link, .banner-light .header-wrapper a.search-toggle:visited, header.light a.search-toggle:link, header.light a.search-toggle:visited { color: #111111; }
    26. 

  26. 

  27. .banner-dark .header-wrapper, header.dark { background: #424242; color: #fff; }
    28. 

  28. .banner-dark .header-wrapper a:link, .banner-dark .header-wrapper a:visited, .banner-dark .header-wrapper a:hover, header.dark a:link, header.dark a:visited, header.dark a:hover { color: #fff; }
    29. 

  29. .banner-dark .header-wrapper .menu-toggle button, header.dark .menu-toggle button { color: #fff; border-color: rgba(128, 128, 128, 0.5); }
    30. 

  30. .banner-dark .header-wrapper a.search-toggle:link, .banner-dark .header-wrapper a.search-toggle:visited, header.dark a.search-toggle:link, header.dark a.search-toggle:visited { color: #fff; }
    31. 

  31. 

  32. .banner-black .header-wrapper, header.black { background: #000; color: #fff; }
    33. 

  33. .banner-black .header-wrapper a:link, .banner-black .header-wrapper a:visited, .banner-black .header-wrapper a:hover, header.black a:link, header.black a:visited, header.black a:hover { color: #fff; }
    34. 

  34. .banner-black .header-wrapper .menu-toggle button, header.black .menu-toggle button { color: #fff; border-color: rgba(128, 128, 128, 0.5); }
    35. 

  35. .banner-black .header-wrapper a.search-toggle:link, .banner-black .header-wrapper a.search-toggle:visited, header.black a.search-toggle:link, header.black a.search-toggle:visited { color: #fff; }
    36. 

  36. 

  37. #branding { position: relative; }
    38. 

  38. 

  39. /* NEW BRANDING */
    40. 

  40. .brand-bar { background: #000; color: #fff; padding: 10px 0px; }
    41. 

  41. .brand-bar a:link, .brand-bar a:visited { color: #fff; }
    42. 

  42. .brand-bar.brand-bar-color-white { background: #000; color: #fff; }
    43. 

  43. .brand-bar.brand-bar-color-white a:link, .brand-bar.brand-bar-color-white a:visited { color: #fff; }
    44. 

  44. .brand-bar.brand-bar-color-black { background: #fff; color: #000; }
    45. 

  45. .brand-bar.brand-bar-color-black a:link, .brand-bar.brand-bar-color-black a:visited { color: #000; }
    46. 

  46. 

  47. .brand-bar-container { display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%; }
    48. 

  48. .brand-bar-container .brand-logo img { width: 100%; max-width: 200px; min-width: 160px; height: auto; display: block; }
    49. 

  49. @media screen and (min-width: 768px) { .brand-bar-container .brand-logo img { max-width: 240px; } }
    50. 

  50. 

  51. .brand-color-white, .brand-bar-reverse, .brand-bar-dark, .brand-bar-black { color: #fff !important; }
    52. 

  52. .brand-color-white a:link, .brand-color-white a:visited, .brand-bar-reverse a:link, .brand-bar-reverse a:visited, .brand-bar-dark a:link, .brand-bar-dark a:visited, .brand-bar-black a:link, .brand-bar-black a:visited { color: #fff !important; }
    53. 

  53. 

  54. .header-wrapper { background: #fff; color: #111111; }
    55. 

  55. 

  56. header.ucb { position: relative; display: flex; align-items: center; font-size: 20px; padding: 20px 0; font-weight: 750; font-family: "Neue Helvetica W05", "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; line-height: 1.1; }
    57. 

  57. header.ucb .site-name, header.ucb h1.site-name { font-size: 20px; font-weight: 750; font-family: "Neue Helvetica W05", "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif; }
    58. 

  58. @media screen and (min-width: 768px) { header.ucb, header.ucb .site-name, header.ucb h1.site-name { font-size: 30px; } }
    59. 

  59. header.ucb .site-name-wrapper { flex-grow: 1; padding-right: 40px; }
    60. 

  60. 

  61. .site-name { padding: 0; margin: 0; }
    62. 

  62. 

  63. .affiliation { text-transform: uppercase; font-size: 50%; padding-top: 5px; font-weight: bold; }
    64. 

  64. .banner-black .header-wrapper .affiliation, .banner-black .header-wrapper .affiliation a:link, .banner-black .header-wrapper .affiliation a:visited, header.ucb.black .affiliation, .affiliation header.ucb.black a:link, .affiliation header.ucb.black a:visited { color: #aaa; }
    65. 

  65. .banner-dark .header-wrapper .affiliation, .banner-dark .header-wrapper .affiliation a:link, .banner-dark .header-wrapper .affiliation a:visited, header.ucb.dark .affiliation, header.ucb.dark .affiliation a:link, header.ucb.dark .affiliation a:visited { color: #9b9b9b; }
    66. 

  66. .banner-white .header-wrapper .affiliation, .banner-white .header-wrapper .affiliation a:link, .banner-white .header-wrapper .affiliation a:visited, header.ucb.white .affiliation, header.ucb.white .affiliation a:link, header.ucb.white .affiliation a:visited { color: #757575; }
    67. 

  67. .banner-light .header-wrapper .affiliation, .banner-light .header-wrapper .affiliation a:link, .banner-light .header-wrapper .affiliation a:visited, header.ucb.light .affiliation, header.ucb.light .affiliation a:link, header.ucb.light .affiliation a:visited { color: #6e6e6e; }
    68. 

  68. 

  69. /*# sourceMappingURL=branding.css.map */
    70.