2 style.css contains a reset, font normalization and some base styles.
4 credit is left where credit is due.
5 additionally, much inspiration was taken from these projects:
6 yui.yahooapis.com/2.8.1/build/base/base.css
7 camendesign.com/design/
8 praegnanz.de/weblog/htmlcssjs-kickstart
12 html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
13 v1.4 2009-07-27 | Authors: Eric Meyer & Richard Clark
14 html5doctor.com/html-5-reset-stylesheet/
17 html, body, div, span, object, iframe,
18 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
19 abbr, address, cite, code,
20 del, dfn, em, img, ins, kbd, q, samp,
21 small, strong, sub, sup, var,
23 dl, dt, dd, ol, ul, li,
24 fieldset, form, label, legend,
25 table, caption, tbody, tfoot, thead, tr, th, td,
26 article
, aside
, figure
, footer
, header
,
27 hgroup
, menu, nav
, section
, menu,
28 time
, mark
, audio
, video
{
34 vertical-align:baseline
;
35 background:transparent
;
38 article
, aside
, figure
, footer
, header
,
39 hgroup
, nav
, section
{ display:block
; }
41 nav
ul { list-style:none
; }
43 blockquote, q { quotes:none
; }
45 blockquote:before
, blockquote:after
,
46 q:before
, q:after
{ content:''; content:none
; }
48 a { margin:0; padding:0; font-size:100%; vertical-align:baseline
; background:transparent
; }
50 ins { background-color:#ff9; color:#000; text-decoration:none
; }
52 mark
{ background-color:#ff9; color:#000; font-style:italic
; font-weight:bold
; }
54 del { text-decoration: line-through
; }
56 abbr[title], dfn[title] { border-bottom:1px dotted
#000; cursor:help
; }
58 /* tables still need cellspacing="0" in the markup */
59 table { border-collapse:collapse
; border-spacing:0; }
61 hr { display:block
; height:1px; border:0; border-top:1px solid
#ccc; margin:1em 0; padding:0; }
63 input, select { vertical-align:middle
; }
68 fonts.css from the YUI Library: developer.yahoo.com/yui/
69 Please refer to developer.yahoo.com/yui/fonts/ for font sizing percentages
71 There are three custom edits:
72 * remove arial, helvetica from explicit font stack
73 * make the line-height relative and unit-less
74 * remove the pre, code styles
76 body { font:13px sans-serif
; *font-size:small; *font:x-small
; line-height:1.22; }
78 table { font-size:inherit
; font:100%; }
80 select, input, textarea { font:99% sans-serif
; }
83 /* normalize monospace sizing
84 * en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome
86 pre, code, kbd, samp { font-family: monospace
, sans-serif
; }
95 /* #444 looks better than black: twitter.com/H_FJ/statuses/11800719859 */
96 body, select, input, textarea { color:#444; }
98 /* Headers (h1,h2,etc) have no default font-size or margin,
99 you'll want to define those yourself. */
101 /* www.aestheticallyloyal.com/public/optimize-legibility/ */
102 h1,h2,h3,h4,h5,h6 { font-weight: bold
; text-rendering: optimizeLegibility
; }
104 /* maxvoltar.com/archive/-webkit-font-smoothing */
105 html { -webkit-font-smoothing: antialiased
; }
108 /* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
109 a:hover
, a:active
{ outline: none
; }
111 a, a:active
, a:visited
{ color:#607890; }
112 a:hover
{ color:#036; }
115 ul { margin-left:30px; }
116 ol { margin-left:30px; list-style-type: decimal
; }
118 small { font-size:85%; }
119 strong, th { font-weight: bold
; }
121 td, td img { vertical-align:top
; }
123 sub { vertical-align: sub; font-size: smaller
; }
124 sup { vertical-align: super
; font-size: smaller
; }
129 /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
130 white-space: pre; /* CSS2 */
131 white-space: pre-wrap
; /* CSS 2.1 */
132 white-space: pre-line
; /* CSS 3 (and 2.1 as well, actually) */
133 word-wrap: break-word
; /* IE */
136 /* align checkboxes, radios, text inputs with their label
137 by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */
138 input[type
="radio"] { vertical-align: text-bottom
; }
139 input[type
="checkbox"] { vertical-align: bottom
; *vertical-align: baseline
; }
140 .ie6 input { vertical-align: text-bottom
; }
142 /* hand cursor on clickable input elements */
143 label, input[type
=button], input[type
=submit
], button { cursor: pointer
; }
145 /* j.mp/webkit-tap-highlight-color */
146 a:link { -webkit-tap-highlight-color: #FF5E99; }
149 /* always force a scrollbar in non-IE */
150 html { overflow-y: scroll
; }
152 /* make buttons play nice in IE:
153 www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
154 button { width: auto
; overflow: visible
; }
156 /* bicubic resizing for non-native sized IMG:
157 code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
158 .ie7 img { -ms-interpolation-mode: bicubic
; }
163 * Non-semantic helper classes
166 /* for image replacement */
167 .ir { display:block
; text-indent:-999em; overflow:hidden
; background-repeat: no-repeat
; }
169 /* Hide for both screenreaders and browsers
170 css-discuss.incutio.com/wiki/Screenreader_Visibility */
171 .hidden { display:none
; visibility:hidden
; }
173 /* Hide only visually, but have it available for screenreaders
174 www.webaim.org/techniques/css/invisiblecontent/
175 Solution from: j.mp/visuallyhidden - Thanks Jonathan Neal! */
176 .visuallyhidden { position:absolute
!important
;
177 clip: rect
(1px 1px 1px 1px); /* IE6, IE7 */
178 clip: rect
(1px, 1px, 1px, 1px); }
180 /* Hide visually and from screenreaders, but maintain layout */
181 .invisible { visibility: hidden
; }
183 /* >> The Magnificent CLEARFIX << */
184 .clearfix:after { content: "."; display: block
; height: 0; clear: both
; visibility: hidden
; }
185 .clearfix { display: inline-block
; }
186 * html .clearfix
{ height: 1%; } /* Hides from IE-mac \*/
187 .clearfix { display: block
; }
209 * inlined to avoid required HTTP connection www.phpied.com/delay-loading-your-print-css/
212 * { background: transparent
!important
; color: #444 !important
; text-shadow: none
; }
214 a, a:visited
{ color: #444 !important
; text-decoration: underline
; }
216 a:after
{ content: " (" attr
(href
) ")"; }
218 abbr:after
{ content: " (" attr
(title) ")"; }
220 .ir a:after { content: ""; } /* Don't show links for images */
222 pre, blockquote { border: 1px solid
#999; page-break-inside: avoid
; }
224 img { page-break-inside: avoid
; }
226 @page
{ margin: 0.5cm; }
228 p, h2, h3 { orphans: 3; widows: 3; }
230 h2, h3{ page-break-after: avoid
; }
236 * Media queries for responsive design
239 @media all and
(orientation:portrait
) {
240 /* Style adjustments for portrait mode goes here */
244 @media all and
(orientation:landscape
) {
245 /* Style adjustments for landscape mode goes here */
249 /* Grade-A Mobile Browsers (Opera Mobile, iPhone Safari, Android Chrome)
250 Consider this: www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/ */
251 @media screen and
(max-device-width: 480px) {
254 /* Prevent iOS, WinMobile from adjusting font size */
255 html { -webkit-text-size-adjust:none
; -ms-text-size-adjust:none
; }