normalize.css 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191
  1. /******************************************************************
  2. Bones Normalize Stylesheet
  3. Designed by Eddie Machado
  4. http://themble.com/bones
  5. eddie@themble.com
  6. Special Thanks to:
  7. Paul Irish, Divya Manian & the HTML5 Boilerplate
  8. @necolas for normalize.css and other inspirations
  9. Andy Clarke & the 320 & Up Extension
  10. Yoast for some WP functions & optimization ideas
  11. Andrew Rogers for code optimization
  12. David Dellanave for speed & code optimization
  13. and several other developers. :)
  14. I ADVISE AGAINST EDITING THIS FILES.
  15. ******************************************************************/
  16. /******************************************************************
  17. GENERAL NORMALIZE
  18. ******************************************************************/
  19. article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
  20. audio, canvas, video { display: inline-block; *display: inline; *zoom: 1; }
  21. audio:not([controls]), [hidden] { display: none; }
  22. /** Base Styles **/
  23. html { font-size: 100%; overflow-y: scroll; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
  24. body { margin: 0; font-size: 13px; line-height: 1.231; }
  25. body, button, input, select, textarea { font-family: sans-serif; color: #333; }
  26. /** IE Fixes **/
  27. img { border: 0; -ms-interpolation-mode: bicubic; }
  28. svg:not(:root) { overflow: hidden; }
  29. figure { margin: 0; }
  30. /** Links **/
  31. a:focus { outline: thin dotted; }
  32. a:hover, a:active { outline: 0; }
  33. /** Typography **/
  34. p { -webkit-hyphens: auto; -moz-hyphens: auto; -epub-hyphens: auto; hyphens: auto; }
  35. abbr[title] { border-bottom: 1px dotted; }
  36. b, strong, .strong { font-weight: bold; }
  37. dfn, em, .em { font-style: italic; }
  38. small, .small, sub, sup { font-size: 85%; }
  39. ins, .ins { background: #ff9; color: #000; text-decoration: none; }
  40. mark, .mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
  41. hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
  42. pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
  43. pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
  44. blockquote { margin: 1em 40px; }
  45. q { quotes: none; }
  46. q:before, q:after { content: ""; content: none; }
  47. ul, ol { margin: 1.231em 0; padding: 0; }
  48. dd { margin: 0; }
  49. nav ul, nav ol, .widget ol, .widget ul, .commentlist { list-style: none; margin: 0; }
  50. /* Position subscript and superscript content without affecting line-height: gist.github.com/413930 */
  51. sub, sup { line-height: 0; position: relative; vertical-align: baseline; }
  52. sup { top: -0.5em; }
  53. sub { bottom: -0.25em; }
  54. /** Forms **/
  55. form, fieldset, form ul, form ol, fieldset ol, fieldset ul { margin: 0; border: 0; }
  56. legend { border: 0; *margin-left: -7px; padding: 0; }
  57. button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
  58. button, input { line-height: normal; *overflow: visible; }
  59. button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
  60. input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
  61. input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
  62. input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
  63. button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
  64. textarea { overflow: auto; vertical-align: top; }
  65. /* Colors for form validity */
  66. input:invalid, textarea:invalid { background-color: #f0dddd; }
  67. /** Tables **/
  68. table { border-collapse: collapse; border-spacing: 0; }
  69. /** Image Replacement **/
  70. .ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
  71. .ir br { display: none; }
  72. /** Hidden & Invisiblity **/
  73. .hidden { display: none; visibility: hidden; }
  74. .visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
  75. .visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
  76. .invisible { visibility: hidden; }
  77. /* Contain floats: nicolasgallagher.com/micro-clearfix-hack/ */
  78. .clearfix:before, .clearfix:after, nav[role=navigation] .menu ul:before, nav[role=navigation] .menu ul:after { content: ""; display: table; }
  79. .clearfix:after, nav[role=navigation] .menu ul:after { clear: both; }
  80. .clearfix, nav[role=navigation] .menu ul { zoom: 1; }
  81. /******************************************************************
  82. H1, H2, H3, H4, H5 STYLES
  83. ******************************************************************/
  84. h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 { font-family: sans-serif; font-weight: 500; }
  85. h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a { text-decoration: none; }
  86. h1, .h1 { font-size: 2.5em; line-height: 1.333em; }
  87. h2, .h2 { font-size: 1.75em; line-height: 1.4em; margin-bottom: 0.375em; }
  88. h3, .h3 { font-size: 1.125em; }
  89. h4, .h4 { font-size: 1.1em; font-weight: 700; }
  90. h5, .h5 { font-size: 0.846em; line-height: 2.09em; text-transform: uppercase; letter-spacing: 2px; }
  91. /******************************************************************
  92. NAVIGATION STYLES
  93. ******************************************************************/
  94. nav[role=navigation] .menu ul li { float: left; }
  95. nav[role=navigation] .menu ul li a { display: block; text-decoration: none; }
  96. nav[role=navigation] .menu ul li ul, nav[role=navigation] .menu ul li ul, nav[role=navigation] .menu ul li ul li ul { position: absolute; left: -9999em; z-index: 9999; width: 200px; }
  97. nav[role=navigation] .menu ul li ul li ul { margin-left: 200px; top: auto; margin-top: -30px; }
  98. nav[role=navigation] .menu ul li ul li:hover ul, nav[role=navigation] .menu ul li:hover ul { left: auto; }
  99. nav[role=navigation] .menu ul li ul li a { width: 160px; }
  100. /******************************************************************
  101. POST STYLES
  102. ******************************************************************/
  103. .page-title, .single-title { margin: 0 0 0.375em; }
  104. .archive_title { margin: 1.1em 0 0.75em; }
  105. /* post meta information */
  106. .meta { font-size:0.9em; letter-spacing:0.05em; line-height:1.75em; color: #999; margin: 0.875em 0; }
  107. /* typographical styles */
  108. .post_content p { margin: 0 0 1.5em 0; line-height: 1.5em; }
  109. .post_content ul, .post_content ol, .post_content table, .post_content dl { margin: 1.5em 0; }
  110. .post_content ul, .post_content ol { list-style-position:outside; line-height:1.5; margin-left: 2.2em; margin-right: 2.2em; }
  111. .post_content li { margin-bottom: 0.75em; }
  112. .post_content ul li { list-style-type: disc; }
  113. .post_content ol li { list-style-type: decimal; }
  114. .post_content blockquote { font-style:italic; line-height:1.6em; margin: 1.5em 2.2em; }
  115. .post_content blockquote:before { font-family:Georgia, serif; content: "“"; font-size:2.75em; text-indent:-.8em; margin-top:.1em; float:left; opacity:.3; }
  116. .post_content dl { margin:1.75em 0 1.75em; }
  117. .post_content dt { margin-top: 1.25em; font-weight:700; }
  118. .post_content dd { font-style: italic; margin-top:0.5em; line-height:1.6em; }
  119. .post_content video { margin: 1.5em 0; max-width: 100%; display: block; }
  120. .post_content object { display: block; margin: 1.5em 0; max-width: 100%; }
  121. /* image alignment & styles */
  122. .post_content img { margin: 0 0 1.5em 0; max-width: 100%; }
  123. .alignleft, img.alignleft { margin-right: 1.5em; display: inline; float: left; }
  124. .alignright, img.alignright { margin-left: 1.5em; display: inline; float: right; }
  125. .aligncenter, img.aligncenter { margin-right: auto; margin-left: auto; display: block; clear: both; }
  126. /* wp caption styles */
  127. .wp-caption { margin-bottom: 1.5em; text-align: center; padding-top: 5px; }
  128. .wp-caption img { border: 0 none; padding: 0; margin: 0; }
  129. .wp-caption .wp-caption-text { font-size:0.8em; font-style:italic; margin:.6em 0 -.2em; }
  130. /* misc styles */
  131. .wp-smiley { margin: 0 !important; max-height: 1em; }
  132. .hentry footer { clear: both; margin: 1.5em 0 0; padding-bottom: 2.2em; }
  133. /* page navigation */
  134. .page-navigation, .wp-prev-next { margin: 1.1em 0 2.2em; }
  135. .bones_page_navi li { float: left; margin-left: 10px; } /* regular links */
  136. .bones_page_navi li a { display: block; text-decoration: none; position: relative; }
  137. .bones_page_navi li a:hover { text-decoration: underline; }
  138. .bones_page_navi .bpn-current { position: relative; } /* current page link */
  139. .bones_page_navi .bpn-prev-link, .bones_page_navi .bpn-next-link { font-weight: 700; }
  140. .bones_page_navi .bpn-next-link a { padding: 0; }
  141. .wp-prev-next .prev-link { float: left; }
  142. .wp-prev-next .next-link { float: right; }
  143. /******************************************************************
  144. COMMENT STYLES
  145. ******************************************************************/
  146. #comments { margin: 0 20px 0.75em; } /* h3 comment title */
  147. .commentlist li { position: relative; clear: both; list-style-type: none; }
  148. .commentlist .vcard time a { text-decoration: none; }
  149. .commentlist li .comment_content p { font-size: 1em; line-height: 1.5em; }
  150. .commentlist li ul { margin: 0; }
  151. .commentlist .comment-reply-link { font-size: 0.9em; }
  152. /* comment form styles */
  153. .respond-form { margin: 1.5em 20px; padding-bottom: 2.2em; }
  154. .respond-form h3 { margin: 0 0 1.1em; }
  155. .respond-form form[method=post] { margin: 0.75em 0; }
  156. .respond-form form[method=post] li { list-style-type: none; clear: both; margin-bottom: 0.7335em; }
  157. .respond-form form[method=post] li label, .respond-form form[method=post] li small { display: none; }
  158. .respond-form input[type=text], .respond-form input[type=email], .respond-form input[type=url], .respond-form textarea { padding: 3px 6px; background: #efefef; border: 2px solid #cecece; line-height: 1.5em; }
  159. .respond-form input[type=text]:focus, .respond-form input[type=email]:focus, .respond-form input[type=url]:focus, .respond-form textarea:focus { background: #fff; }
  160. .respond-form input[type=text], .respond-form input[type=email], .respond-form input[type=url] { max-width: 400px; min-width: 250px; }
  161. #allowed_tags { margin: 1.5em 10px 0.7335em 0; }
  162. .respond-form textarea { resize: none; width: 97.3%; height: 150px; }
  163. /* form validation */
  164. .respond-form input:invalid, .respond-form textarea:invalid { border-color: #fbc2c4; background: #fbe3e4; outline: none; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; background-color: #f6e7eb; }
  165. /* no comments */
  166. .nocomments { margin: 0 20px 1.1em; }
  167. /******************************************************************
  168. FOOTER STYLES
  169. ******************************************************************/
  170. .footer-links ul.menu { margin-top: 0; }
  171. .footer-links ul li { list-style-type: none; float: left; font-size: 0.9em; }
  172. .footer-links ul li a { margin-right: 10px; text-decoration: underline; }
  173. .footer-links ul li:last-child a { margin-right: 0; }
  174. .footer-links ul li ul { display: none; } /* shouldn't have that many links in footer anyway */
  175. .attribution { float: right; color: #999; font-size: 0.9em; }
  176. /******************************************************************
  177. PRINT STYLESHEET
  178. ******************************************************************/
  179. @media print { * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important; -ms-filter: none !important; } a, a:visited { color: #444 !important; text-decoration: underline; } a[href]:after { content: " (" attr(href) ")"; } abbr[title]:after { content: " (" attr(title) ")"; } .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: ""; } pre, blockquote { border: 1px solid #999; page-break-inside: avoid; } thead { display: table-header-group; } tr, img { page-break-inside: avoid; } img { max-width: 100% !important; }
  180. @page { margin: 0.5cm; } p, h2, h3 { orphans: 3; widows: 3; } h2, h3{ page-break-after: avoid; }
  181. }