1// 2// Reset CSS 3// Adapted from http://github.com/necolas/normalize.css 4// -------------------------------------------------- 5 6 7// Display in IE6-9 and FF3 8// ------------------------- 9 10article, 11aside, 12details, 13figcaption, 14figure, 15footer, 16header, 17hgroup, 18nav, 19section { 20 display: block; 21} 22 23// Display block in IE6-9 and FF3 24// ------------------------- 25 26audio, 27canvas, 28video { 29 display: inline-block; 30 *display: inline; 31 *zoom: 1; 32} 33 34// Prevents modern browsers from displaying 'audio' without controls 35// ------------------------- 36 37audio:not([controls]) { 38 display: none; 39} 40 41// Base settings 42// ------------------------- 43 44html { 45 font-size: 100%; 46 -webkit-text-size-adjust: 100%; 47 -ms-text-size-adjust: 100%; 48} 49// Focus states 50a:focus { 51 .tab-focus(); 52} 53// Hover & Active 54a:hover, 55a:active { 56 outline: 0; 57} 58 59// Prevents sub and sup affecting line-height in all browsers 60// ------------------------- 61 62sub, 63sup { 64 position: relative; 65 font-size: 75%; 66 line-height: 0; 67 vertical-align: baseline; 68} 69sup { 70 top: -0.5em; 71} 72sub { 73 bottom: -0.25em; 74} 75 76// Img border in a's and image quality 77// ------------------------- 78 79img { 80 /* Responsive images (ensure images don't scale beyond their parents) */ 81 max-width: 100%; /* Part 1: Set a maxium relative to the parent */ 82 width: auto\9; /* IE7-8 need help adjusting responsive images */ 83 height: auto; /* Part 2: Scale the height according to the width, otherwise you get stretching */ 84 85 vertical-align: middle; 86 border: 0; 87 -ms-interpolation-mode: bicubic; 88} 89 90// Prevent max-width from affecting Google Maps 91#map_canvas img, 92.google-maps img { 93 max-width: none; 94} 95 96// Forms 97// ------------------------- 98 99// Font size in all browsers, margin changes, misc consistency 100button, 101input, 102select, 103textarea { 104 margin: 0; 105 font-size: 100%; 106 vertical-align: middle; 107} 108button, 109input { 110 *overflow: visible; // Inner spacing ie IE6/7 111 line-height: normal; // FF3/4 have !important on line-height in UA stylesheet 112} 113button::-moz-focus-inner, 114input::-moz-focus-inner { // Inner padding and border oddities in FF3/4 115 padding: 0; 116 border: 0; 117} 118button, 119html input[type="button"], // Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` and `video` controls. 120input[type="reset"], 121input[type="submit"] { 122 -webkit-appearance: button; // Corrects inability to style clickable `input` types in iOS. 123 cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others. 124} 125label, 126select, 127button, 128input[type="button"], 129input[type="reset"], 130input[type="submit"], 131input[type="radio"], 132input[type="checkbox"] { 133 cursor: pointer; // Improves usability and consistency of cursor style between image-type `input` and others. 134} 135input[type="search"] { // Appearance in Safari/Chrome 136 .box-sizing(content-box); 137 -webkit-appearance: textfield; 138} 139input[type="search"]::-webkit-search-decoration, 140input[type="search"]::-webkit-search-cancel-button { 141 -webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5 142} 143textarea { 144 overflow: auto; // Remove vertical scrollbar in IE6-9 145 vertical-align: top; // Readability and alignment cross-browser 146} 147 148 149// Printing 150// ------------------------- 151// Source: https://github.com/h5bp/html5-boilerplate/blob/master/css/main.css 152 153@media print { 154 155 * { 156 text-shadow: none !important; 157 color: #000 !important; // Black prints faster: h5bp.com/s 158 background: transparent !important; 159 box-shadow: none !important; 160 } 161 162 a, 163 a:visited { 164 text-decoration: underline; 165 } 166 167 a[href]:after { 168 content: " (" attr(href) ")"; 169 } 170 171 abbr[title]:after { 172 content: " (" attr(title) ")"; 173 } 174 175 // Don't show links for images, or javascript/internal links 176 .ir a:after, 177 a[href^="javascript:"]:after, 178 a[href^="#"]:after { 179 content: ""; 180 } 181 182 pre, 183 blockquote { 184 border: 1px solid #999; 185 page-break-inside: avoid; 186 } 187 188 thead { 189 display: table-header-group; // h5bp.com/t 190 } 191 192 tr, 193 img { 194 page-break-inside: avoid; 195 } 196 197 img { 198 max-width: 100% !important; 199 } 200 201 @page { 202 margin: 0.5cm; 203 } 204 205 p, 206 h2, 207 h3 { 208 orphans: 3; 209 widows: 3; 210 } 211 212 h2, 213 h3 { 214 page-break-after: avoid; 215 } 216} 217