jslint
[ckeditor.git] / skins / ckeditor / samples / sample.css
1 /*
2 Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
3 For licensing, see LICENSE.md or http://ckeditor.com/license
4 */
5
6 html, body, h1, h2, h3, h4, h5, h6, div, span, blockquote, p, address, form, fieldset, img, ul, ol, dl, dt, dd, li, hr, table, td, th, strong, em, sup, sub, dfn, ins, del, q, cite, var, samp, code, kbd, tt, pre
7 {
8 line-height: 1.5;
9 }
10
11 body
12 {
13 padding: 10px 30px;
14 }
15
16 input, textarea, select, option, optgroup, button, td, th
17 {
18 font-size: 100%;
19 }
20
21 pre, code, kbd, samp, tt
22 {
23 font-family: monospace,monospace;
24 font-size: 1em;
25 }
26
27 body {
28 width: 960px;
29 margin: 0 auto;
30 }
31
32 code
33 {
34 background: #f3f3f3;
35 border: 1px solid #ddd;
36 padding: 1px 4px;
37
38 -moz-border-radius: 3px;
39 -webkit-border-radius: 3px;
40 border-radius: 3px;
41 }
42
43 abbr
44 {
45 border-bottom: 1px dotted #555;
46 cursor: pointer;
47 }
48
49 .new, .beta
50 {
51 text-transform: uppercase;
52 font-size: 10px;
53 font-weight: bold;
54 padding: 1px 4px;
55 margin: 0 0 0 5px;
56 color: #fff;
57 float: right;
58
59 -moz-border-radius: 3px;
60 -webkit-border-radius: 3px;
61 border-radius: 3px;
62 }
63
64 .new
65 {
66 background: #FF7E00;
67 border: 1px solid #DA8028;
68 text-shadow: 0 1px 0 #C97626;
69
70 -moz-box-shadow: 0 2px 3px 0 #FFA54E inset;
71 -webkit-box-shadow: 0 2px 3px 0 #FFA54E inset;
72 box-shadow: 0 2px 3px 0 #FFA54E inset;
73 }
74
75 .beta
76 {
77 background: #18C0DF;
78 border: 1px solid #19AAD8;
79 text-shadow: 0 1px 0 #048CAD;
80 font-style: italic;
81
82 -moz-box-shadow: 0 2px 3px 0 #50D4FD inset;
83 -webkit-box-shadow: 0 2px 3px 0 #50D4FD inset;
84 box-shadow: 0 2px 3px 0 #50D4FD inset;
85 }
86
87 h1.samples
88 {
89 color: #0782C1;
90 font-size: 200%;
91 font-weight: normal;
92 margin: 0;
93 padding: 0;
94 }
95
96 h1.samples a
97 {
98 color: #0782C1;
99 text-decoration: none;
100 border-bottom: 1px dotted #0782C1;
101 }
102
103 .samples a:hover
104 {
105 border-bottom: 1px dotted #0782C1;
106 }
107
108 h2.samples
109 {
110 color: #000000;
111 font-size: 130%;
112 margin: 15px 0 0 0;
113 padding: 0;
114 }
115
116 p, blockquote, address, form, pre, dl, h1.samples, h2.samples
117 {
118 margin-bottom: 15px;
119 }
120
121 ul.samples
122 {
123 margin-bottom: 15px;
124 }
125
126 .clear
127 {
128 clear: both;
129 }
130
131 fieldset
132 {
133 margin: 0;
134 padding: 10px;
135 }
136
137 body, input, textarea
138 {
139 color: #333333;
140 font-family: Arial, Helvetica, sans-serif;
141 }
142
143 body
144 {
145 font-size: 75%;
146 }
147
148 a.samples
149 {
150 color: #189DE1;
151 text-decoration: none;
152 }
153
154 form
155 {
156 margin: 0;
157 padding: 0;
158 }
159
160 pre.samples
161 {
162 background-color: #F7F7F7;
163 border: 1px solid #D7D7D7;
164 overflow: auto;
165 padding: 0.25em;
166 white-space: pre-wrap; /* CSS 2.1 */
167 word-wrap: break-word; /* IE7 */
168 -moz-tab-size: 4;
169 -o-tab-size: 4;
170 -webkit-tab-size: 4;
171 tab-size: 4;
172 }
173
174 #footer
175 {
176 clear: both;
177 padding-top: 10px;
178 }
179
180 #footer hr
181 {
182 margin: 10px 0 15px 0;
183 height: 1px;
184 border: solid 1px gray;
185 border-bottom: none;
186 }
187
188 #footer p
189 {
190 margin: 0 10px 10px 10px;
191 float: left;
192 }
193
194 #footer #copy
195 {
196 float: right;
197 }
198
199 #outputSample
200 {
201 width: 100%;
202 table-layout: fixed;
203 }
204
205 #outputSample thead th
206 {
207 color: #dddddd;
208 background-color: #999999;
209 padding: 4px;
210 white-space: nowrap;
211 }
212
213 #outputSample tbody th
214 {
215 vertical-align: top;
216 text-align: left;
217 }
218
219 #outputSample pre
220 {
221 margin: 0;
222 padding: 0;
223 }
224
225 .description
226 {
227 border: 1px dotted #B7B7B7;
228 margin-bottom: 10px;
229 padding: 10px 10px 0;
230 overflow: hidden;
231 }
232
233 label
234 {
235 display: block;
236 margin-bottom: 6px;
237 }
238
239 /**
240 * CKEditor editables are automatically set with the "cke_editable" class
241 * plus cke_editable_(inline|themed) depending on the editor type.
242 */
243
244 /* Style a bit the inline editables. */
245 .cke_editable.cke_editable_inline
246 {
247 cursor: pointer;
248 }
249
250 /* Once an editable element gets focused, the "cke_focus" class is
251 added to it, so we can style it differently. */
252 .cke_editable.cke_editable_inline.cke_focus
253 {
254 box-shadow: inset 0px 0px 20px 3px #ddd, inset 0 0 1px #000;
255 outline: none;
256 background: #eee;
257 cursor: text;
258 }
259
260 /* Avoid pre-formatted overflows inline editable. */
261 .cke_editable_inline pre
262 {
263 white-space: pre-wrap;
264 word-wrap: break-word;
265 }
266
267 /**
268 * Samples index styles.
269 */
270
271 .twoColumns,
272 .twoColumnsLeft,
273 .twoColumnsRight
274 {
275 overflow: hidden;
276 }
277
278 .twoColumnsLeft,
279 .twoColumnsRight
280 {
281 width: 45%;
282 }
283
284 .twoColumnsLeft
285 {
286 float: left;
287 }
288
289 .twoColumnsRight
290 {
291 float: right;
292 }
293
294 dl.samples
295 {
296 padding: 0 0 0 40px;
297 }
298 dl.samples > dt
299 {
300 display: list-item;
301 list-style-type: disc;
302 list-style-position: outside;
303 margin: 0 0 3px;
304 }
305 dl.samples > dd
306 {
307 margin: 0 0 3px;
308 }
309 .warning
310 {
311 color: #ff0000;
312 background-color: #FFCCBA;
313 border: 2px dotted #ff0000;
314 padding: 15px 10px;
315 margin: 10px 0;
316 }
317
318 /* Used on inline samples */
319
320 blockquote
321 {
322 font-style: italic;
323 font-family: Georgia, Times, "Times New Roman", serif;
324 padding: 2px 0;
325 border-style: solid;
326 border-color: #ccc;
327 border-width: 0;
328 }
329
330 .cke_contents_ltr blockquote
331 {
332 padding-left: 20px;
333 padding-right: 8px;
334 border-left-width: 5px;
335 }
336
337 .cke_contents_rtl blockquote
338 {
339 padding-left: 8px;
340 padding-right: 20px;
341 border-right-width: 5px;
342 }
343
344 img.right {
345 border: 1px solid #ccc;
346 float: right;
347 margin-left: 15px;
348 padding: 5px;
349 }
350
351 img.left {
352 border: 1px solid #ccc;
353 float: left;
354 margin-right: 15px;
355 padding: 5px;
356 }