main.css 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305
  1. /*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */
  2. /*
  3. * What follows is the result of much research on cross-browser styling.
  4. * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
  5. * Kroc Camen, and the H5BP dev community and team.
  6. */
  7. /* ==========================================================================
  8. Base styles: opinionated defaults
  9. ========================================================================== */
  10. html,
  11. button,
  12. input,
  13. select,
  14. textarea {
  15. color: #222;
  16. }
  17. html {
  18. font-size: 1em;
  19. line-height: 1.4;
  20. }
  21. /*
  22. * Remove text-shadow in selection highlight: h5bp.com/i
  23. * These selection rule sets have to be separate.
  24. * Customize the background color to match your design.
  25. */
  26. ::-moz-selection {
  27. background: #b3d4fc;
  28. text-shadow: none;
  29. }
  30. ::selection {
  31. background: #b3d4fc;
  32. text-shadow: none;
  33. }
  34. /*
  35. * A better looking default horizontal rule
  36. */
  37. hr {
  38. display: block;
  39. height: 1px;
  40. border: 0;
  41. border-top: 1px solid #ccc;
  42. margin: 1em 0;
  43. padding: 0;
  44. }
  45. /*
  46. * Remove the gap between images, videos, audio and canvas and the bottom of
  47. * their containers: h5bp.com/i/440
  48. */
  49. audio,
  50. canvas,
  51. img,
  52. video {
  53. vertical-align: middle;
  54. }
  55. /*
  56. * Remove default fieldset styles.
  57. */
  58. fieldset {
  59. border: 0;
  60. margin: 0;
  61. padding: 0;
  62. }
  63. /*
  64. * Allow only vertical resizing of textareas.
  65. */
  66. textarea {
  67. resize: vertical;
  68. }
  69. /* ==========================================================================
  70. Browse Happy prompt
  71. ========================================================================== */
  72. .browsehappy {
  73. margin: 0.2em 0;
  74. background: #ccc;
  75. color: #000;
  76. padding: 0.2em 0;
  77. }
  78. /* ==========================================================================
  79. Author's custom styles
  80. ========================================================================== */
  81. /* ==========================================================================
  82. Helper classes
  83. ========================================================================== */
  84. /*
  85. * Image replacement
  86. */
  87. .ir {
  88. background-color: transparent;
  89. border: 0;
  90. overflow: hidden;
  91. /* IE 6/7 fallback */
  92. *text-indent: -9999px;
  93. }
  94. .ir:before {
  95. content: "";
  96. display: block;
  97. width: 0;
  98. height: 150%;
  99. }
  100. /*
  101. * Hide from both screenreaders and browsers: h5bp.com/u
  102. */
  103. .hidden {
  104. display: none !important;
  105. visibility: hidden;
  106. }
  107. /*
  108. * Hide only visually, but have it available for screenreaders: h5bp.com/v
  109. */
  110. .visuallyhidden {
  111. border: 0;
  112. clip: rect(0 0 0 0);
  113. height: 1px;
  114. margin: -1px;
  115. overflow: hidden;
  116. padding: 0;
  117. position: absolute;
  118. width: 1px;
  119. }
  120. /*
  121. * Extends the .visuallyhidden class to allow the element to be focusable
  122. * when navigated to via the keyboard: h5bp.com/p
  123. */
  124. .visuallyhidden.focusable:active,
  125. .visuallyhidden.focusable:focus {
  126. clip: auto;
  127. height: auto;
  128. margin: 0;
  129. overflow: visible;
  130. position: static;
  131. width: auto;
  132. }
  133. /*
  134. * Hide visually and from screenreaders, but maintain layout
  135. */
  136. .invisible {
  137. visibility: hidden;
  138. }
  139. /*
  140. * Clearfix: contain floats
  141. *
  142. * For modern browsers
  143. * 1. The space content is one way to avoid an Opera bug when the
  144. * `contenteditable` attribute is included anywhere else in the document.
  145. * Otherwise it causes space to appear at the top and bottom of elements
  146. * that receive the `clearfix` class.
  147. * 2. The use of `table` rather than `block` is only necessary if using
  148. * `:before` to contain the top-margins of child elements.
  149. */
  150. .clearfix:before,
  151. .clearfix:after {
  152. content: " "; /* 1 */
  153. display: table; /* 2 */
  154. }
  155. .clearfix:after {
  156. clear: both;
  157. }
  158. /*
  159. * For IE 6/7 only
  160. * Include this rule to trigger hasLayout and contain floats.
  161. */
  162. .clearfix {
  163. *zoom: 1;
  164. }
  165. /* ==========================================================================
  166. EXAMPLE Media Queries for Responsive Design.
  167. These examples override the primary ('mobile first') styles.
  168. Modify as content requires.
  169. ========================================================================== */
  170. @media only screen and (min-width: 35em) {
  171. /* Style adjustments for viewports that meet the condition */
  172. }
  173. @media print,
  174. (-o-min-device-pixel-ratio: 5/4),
  175. (-webkit-min-device-pixel-ratio: 1.25),
  176. (min-resolution: 120dpi) {
  177. /* Style adjustments for high resolution devices */
  178. }
  179. /* ==========================================================================
  180. Print styles.
  181. Inlined to avoid required HTTP connection: h5bp.com/r
  182. ========================================================================== */
  183. @media print {
  184. * {
  185. background: transparent !important;
  186. color: #000 !important; /* Black prints faster: h5bp.com/s */
  187. box-shadow: none !important;
  188. text-shadow: none !important;
  189. }
  190. a,
  191. a:visited {
  192. text-decoration: underline;
  193. }
  194. a[href]:after {
  195. content: " (" attr(href) ")";
  196. }
  197. abbr[title]:after {
  198. content: " (" attr(title) ")";
  199. }
  200. /*
  201. * Don't show links for images, or javascript/internal links
  202. */
  203. .ir a:after,
  204. a[href^="javascript:"]:after,
  205. a[href^="#"]:after {
  206. content: "";
  207. }
  208. pre,
  209. blockquote {
  210. border: 1px solid #999;
  211. page-break-inside: avoid;
  212. }
  213. thead {
  214. display: table-header-group; /* h5bp.com/t */
  215. }
  216. tr,
  217. img {
  218. page-break-inside: avoid;
  219. }
  220. img {
  221. max-width: 100% !important;
  222. }
  223. @page {
  224. margin: 0.5cm;
  225. }
  226. p,
  227. h2,
  228. h3 {
  229. orphans: 3;
  230. widows: 3;
  231. }
  232. h2,
  233. h3 {
  234. page-break-after: avoid;
  235. }
  236. }