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