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
4a1fae7 by Anon Ray at 2013-05-09 96
.page {
97
  border: 1px solid #999;
98
  padding: 20px;
99
  width: 400px;
100
  height: 400px;
101
}
102
#pages {
103
  position: absolute;
104
  left: 20px;
105
  top: 20px;
106
  border: 1px solid black;
107
  padding: 10px;
108
  width: 300px;
109
  height: 80%;
110
}
111
#page {
112
  position: absolute;
113
  left: 500px;
114
  top: 90px;
115
}
116
#pagelist {
117
  padding: 10px;
118
}
119
#content {
120
  padding: 10px;
121
  margin: 3px;
122
  margin-bottom: 10px;
123
  max-height: 120px;
124
  overflow-y: auto;
125
}
126
.content-item:hover {
127
  cursor: pointer;
128
  cursor: hand;
129
}
130
#contentview {
131
  border: 1px solid #999;
132
  padding: 10px;
133
  margin: 10px;
134
}
135
.contentview {
136
}
137
#specific-content {
138
  padding: 3px;
139
  margin-bottom: 10px;
140
}
3ce3fe9 by Anon Ray at 2012-11-23 141
142
/* ==========================================================================
143
   Helper classes
144
   ========================================================================== */
145
146
/*
147
 * Image replacement
148
 */
149
150
.ir {
151
    background-color: transparent;
152
    border: 0;
153
    overflow: hidden;
154
    /* IE 6/7 fallback */
155
    *text-indent: -9999px;
156
}
157
158
.ir:before {
159
    content: "";
160
    display: block;
161
    width: 0;
162
    height: 100%;
163
}
164
165
/*
166
 * Hide from both screenreaders and browsers: h5bp.com/u
167
 */
168
169
.hidden {
170
    display: none !important;
171
    visibility: hidden;
172
}
173
174
/*
175
 * Hide only visually, but have it available for screenreaders: h5bp.com/v
176
 */
177
178
.visuallyhidden {
179
    border: 0;
180
    clip: rect(0 0 0 0);
181
    height: 1px;
182
    margin: -1px;
183
    overflow: hidden;
184
    padding: 0;
185
    position: absolute;
186
    width: 1px;
187
}
188
189
/*
190
 * Extends the .visuallyhidden class to allow the element to be focusable
191
 * when navigated to via the keyboard: h5bp.com/p
192
 */
193
194
.visuallyhidden.focusable:active,
195
.visuallyhidden.focusable:focus {
196
    clip: auto;
197
    height: auto;
198
    margin: 0;
199
    overflow: visible;
200
    position: static;
201
    width: auto;
202
}
203
204
/*
205
 * Hide visually and from screenreaders, but maintain layout
206
 */
207
208
.invisible {
209
    visibility: hidden;
210
}
211
212
/*
213
 * Clearfix: contain floats
214
 *
215
 * For modern browsers
216
 * 1. The space content is one way to avoid an Opera bug when the
217
 *    `contenteditable` attribute is included anywhere else in the document.
218
 *    Otherwise it causes space to appear at the top and bottom of elements
219
 *    that receive the `clearfix` class.
220
 * 2. The use of `table` rather than `block` is only necessary if using
221
 *    `:before` to contain the top-margins of child elements.
222
 */
223
224
.clearfix:before,
225
.clearfix:after {
226
    content: " "; /* 1 */
227
    display: table; /* 2 */
228
}
229
230
.clearfix:after {
231
    clear: both;
232
}
233
234
/*
235
 * For IE 6/7 only
236
 * Include this rule to trigger hasLayout and contain floats.
237
 */
238
239
.clearfix {
240
    *zoom: 1;
241
}
242
243
/* ==========================================================================
244
   EXAMPLE Media Queries for Responsive Design.
245
   Theses examples override the primary ('mobile first') styles.
246
   Modify as content requires.
247
   ========================================================================== */
248
249
@media only screen and (min-width: 35em) {
250
    /* Style adjustments for viewports that meet the condition */
251
}
252
253
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
254
       only screen and (min-resolution: 144dpi) {
255
    /* Style adjustments for high resolution devices */
256
}
257
258
/* ==========================================================================
259
   Print styles.
260
   Inlined to avoid required HTTP connection: h5bp.com/r
261
   ========================================================================== */
262
263
@media print {
264
    * {
265
        background: transparent !important;
266
        color: #000 !important; /* Black prints faster: h5bp.com/s */
267
        box-shadow:none !important;
268
        text-shadow: none !important;
269
    }
270
271
    a,
272
    a:visited {
273
        text-decoration: underline;
274
    }
275
276
    a[href]:after {
277
        content: " (" attr(href) ")";
278
    }
279
280
    abbr[title]:after {
281
        content: " (" attr(title) ")";
282
    }
283
284
    /*
285
     * Don't show links for images, or javascript/internal links
286
     */
287
288
    .ir a:after,
289
    a[href^="javascript:"]:after,
290
    a[href^="#"]:after {
291
        content: "";
292
    }
293
294
    pre,
295
    blockquote {
296
        border: 1px solid #999;
297
        page-break-inside: avoid;
298
    }
299
300
    thead {
301
        display: table-header-group; /* h5bp.com/t */
302
    }
303
304
    tr,
305
    img {
306
        page-break-inside: avoid;
307
    }
308
309
    img {
310
        max-width: 100% !important;
311
    }
312
313
    @page {
314
        margin: 0.5cm;
315
    }
316
317
    p,
318
    h2,
319
    h3 {
320
        orphans: 3;
321
        widows: 3;
322
    }
323
324
    h2,
325
    h3 {
326
        page-break-after: avoid;
327
    }
328
}