cover.css 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. /*
  2. * Globals
  3. */
  4. /* Links */
  5. a,
  6. a:focus,
  7. a:hover {
  8. color: #fff;
  9. }
  10. /* Custom default button */
  11. .btn-default,
  12. .btn-default:hover,
  13. .btn-default:focus {
  14. color: #333;
  15. text-shadow: none; /* Prevent inheritence from `body` */
  16. background-color: #fff;
  17. border: 1px solid #fff;
  18. }
  19. /*
  20. * Base structure
  21. */
  22. html,
  23. body {
  24. height: 100%;
  25. background-color: #333;
  26. }
  27. body {
  28. color: #fff;
  29. text-align: center;
  30. text-shadow: 0 1px 3px rgba(0,0,0,.5);
  31. }
  32. /* Extra markup and styles for table-esque vertical and horizontal centering */
  33. .site-wrapper {
  34. display: table;
  35. width: 100%;
  36. height: 100%; /* For at least Firefox */
  37. min-height: 100%;
  38. -webkit-box-shadow: inset 0 0 100px rgba(0,0,0,.5);
  39. box-shadow: inset 0 0 100px rgba(0,0,0,.5);
  40. }
  41. .site-wrapper-inner {
  42. display: table-cell;
  43. vertical-align: top;
  44. }
  45. .cover-container {
  46. margin-right: auto;
  47. margin-left: auto;
  48. }
  49. /* Padding for spacing */
  50. .inner {
  51. padding: 30px;
  52. }
  53. /*
  54. * Header
  55. */
  56. .masthead-brand {
  57. margin-top: 10px;
  58. margin-bottom: 10px;
  59. }
  60. .masthead-nav > li {
  61. display: inline-block;
  62. }
  63. .masthead-nav > li + li {
  64. margin-left: 20px;
  65. }
  66. .masthead-nav > li > a {
  67. padding-right: 0;
  68. padding-left: 0;
  69. font-size: 16px;
  70. font-weight: bold;
  71. color: #fff; /* IE8 proofing */
  72. color: rgba(255,255,255,.75);
  73. border-bottom: 2px solid transparent;
  74. }
  75. .masthead-nav > li > a:hover,
  76. .masthead-nav > li > a:focus {
  77. background-color: transparent;
  78. border-bottom-color: #a9a9a9;
  79. border-bottom-color: rgba(255,255,255,.25);
  80. }
  81. .masthead-nav > .active > a,
  82. .masthead-nav > .active > a:hover,
  83. .masthead-nav > .active > a:focus {
  84. color: #fff;
  85. border-bottom-color: #fff;
  86. }
  87. @media (min-width: 768px) {
  88. .masthead-brand {
  89. float: left;
  90. }
  91. .masthead-nav {
  92. float: right;
  93. }
  94. }
  95. /*
  96. * Cover
  97. */
  98. .cover {
  99. padding: 0 20px;
  100. }
  101. .cover .btn-lg {
  102. padding: 10px 20px;
  103. font-weight: bold;
  104. }
  105. /*
  106. * Footer
  107. */
  108. .mastfoot {
  109. color: #999; /* IE8 proofing */
  110. color: rgba(255,255,255,.5);
  111. }
  112. /*
  113. * Affix and center
  114. */
  115. @media (min-width: 768px) {
  116. /* Pull out the header and footer */
  117. .masthead {
  118. position: fixed;
  119. top: 0;
  120. }
  121. .mastfoot {
  122. position: fixed;
  123. bottom: 0;
  124. }
  125. /* Start the vertical centering */
  126. .site-wrapper-inner {
  127. vertical-align: middle;
  128. }
  129. /* Handle the widths */
  130. .masthead,
  131. .mastfoot,
  132. .cover-container {
  133. width: 100%; /* Must be percentage or pixels for horizontal alignment */
  134. }
  135. }
  136. @media (min-width: 992px) {
  137. .masthead,
  138. .mastfoot,
  139. .cover-container {
  140. width: 700px;
  141. }
  142. }