1/* plugin:box */
2div.box {
3  width: 50%;
4  margin: 1em auto;
5  border: 1px solid;
6/*  border-color: #000000;*/
7  padding: 4px;
8  overflow: hidden;
9}
10
11/* rounded corners styles from Stu Nicholls snazzy borders, http://www.cssplay.co.uk/boxes/snazzy.html */
12.xtop, .xbottom {background:transparent; font-size:0; line-height: 1px;}
13.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden; border-style: solid;}
14.xb2, .xb3 {height:1px;}
15.xb2, .xb3, .xb4 {border-width:0 1px;}
16.xb1 {height: 0; margin:0 5px; border-width:1px 0 0 0;}
17.xb2 {margin:0 3px; border-width:0 2px;}
18.xb3 {margin:0 2px;}
19.xb4 {height:2px; margin:0 1px;}
20
21div.box .xtop, div.box .xbottom {display: none;}
22div.box.round > .xtop, div.box.round > .xbottom {display: block;}
23
24div.box.round { border: none; padding: 0;}
25div.box.round > .xbox {display:block; border-width:0 1px; border-style: solid; padding: 0 4px; }
26
27div.box p.box_title, div.box p.box_caption {
28/*  font-size: 90%;*/
29  margin: 0;
30  padding-bottom: 2px;
31  padding-top: 4px;
32  padding-left: 3px;
33  line-height: 1.2;
34}
35
36div.box p.box_title { margin-bottom: 2px; margin-top: 0px;}
37div.box p.box_caption { margin-top: 2px;}
38
39div.box .box_content {
40  margin-left: 0px;
41  margin-right: 0px;
42  margin-bottom: 0px;
43  margin-top: 5px;
44  border-width: 1px;
45  border-style: dashed;
46}
47
48/* floating alignment */
49
50div.box.left {
51  float: left;
52  margin-right: 0px;
53}
54
55div.box.right {
56  float: right;
57  margin-left: 0px;
58  margin-right: 0px;
59}
60
61/* colours */
62/* default */
63div.box, div.box .box_content, div.box .xbox, div.box .xb1, div.box .xb2, div.box .xb3, div.box .xb4 {
64  border-color:  __dark__;
65}
66
67div.box, div.box .xbox, div.box .xb1, div.box .xb2, div.box .xb3, div.box .xb4 {
68/*  background: __light__;*/
69/*  background: #e4edfb;*/
70  background: #ffffff;
71}
72
73div.box p.box_title, div.box p.box_caption {
74	background: __dark__;
75	color: #ffffff;
76	}
77div.box .box_content {
78  padding: 0 0px;
79  background: #ffffff;
80  border-color: __dark__;
81  }
82
83/* simple noborder box to organize content */
84div.box.noborder, div.box.noborder > * > .box_content, div.box.noborder > .xbox,
85div.box.noborder > * > .xb1, div.box.noborder > * > .xb2, div.box.noborder > * > .xb3, div.box.noborder > * > .xb4 {
86  border-color:  #ffffff;
87  border-width: 0px;
88  padding-right: 0px;
89  padding-left: 0px;
90  padding-top: 0px;
91  padding-bottom: 0px;
92  margin-top: 0px;
93  margin-right: 0px;
94  margin-left: 0px;
95  margin-bottom: 0px;
96}
97
98div.box.noborder, div.box.noborder > .xbox,
99div.box.noborder > * > .xb1, div.box.noborder > * > .xb2, div.box.noborder > * > .xb3, div.box.noborder > * > .xb4 {
100  background: #ffffff;
101}
102
103div.box.noborder > * > p.box_title, div.box.noborder > * > p.box_caption {background: #ffffff;}
104div.box.noborder > * > .box_content {
105  background: #ffffff;
106}
107
108/* center attribute */
109div.box.centered, div.box.centered > * > .box_content, div.box.centered > .xbox,
110div.box.centered > * > .xb1, div.box.centered > * > .xb2, div.box.centered > * > .xb3, div.box.centered > * > .xb4 {
111  border-color:  #ffffff;
112  border-width: 0px;
113  padding-right: 0px;
114  padding-left: 0px;
115  padding-top: 0px;
116  padding-bottom: 0px;
117  margin-top: 0px;
118  margin-right: 0px;
119  margin-left: 0px;
120  margin-bottom: 0px;
121  float: center;
122}
123
124div.box.centered, div.box.centered > .xbox,
125div.box.centered > * > .xb1, div.box.centered > * > .xb2, div.box.centered > * > .xb3, div.box.centered > * > .xb4 {
126  background: #ffffff;
127  float: center;
128}
129
130div.box.centered > * > p.box_title, div.box.centered > * > p.box_caption {background: #ffffff;}
131div.box.centered > * > .box_content {
132  background: #ffffff;
133  float: center;
134}
135
136
137/* ---------------------------- simple border ---------------------------- */
138div.box.border, div.box.border > * > .box_content, div.box.border > .xbox,
139div.box.border > * > .xb1, div.box.border > * > .xb2, div.box.border > * > .xb3, div.box.border > * > .xb4 {
140  border-color:  __dark__;
141  border-width: 1px;
142  padding-right: 0px;
143  padding-left: 0px;
144  padding-top: 0px;
145  padding-bottom: 0px;
146  margin-top: 0px;
147  margin-right: 0px;
148  margin-left: 0px;
149  margin-bottom: -6px;
150}
151
152div.box.border, div.box.border > .xbox,
153div.box.border > * > .xb1, div.box.border > * > .xb2, div.box.border > * > .xb3, div.box.border > * > .xb4 {
154  background: #ffffff;
155
156}
157
158div.box.border > * > p.box_title, div.box.border > * > p.box_caption {background: #ffffff;}
159div.box.border > * > .box_content {
160  background: #ffffff;
161  border-width: 0px;
162  }
163
164
165/* ---------------------------- no dash ---------------------------- */
166
167div.box.nodash, div.box.nodash > * > .box_content, div.box.nodash > .xbox,
168div.box.nodash > * > .xb1, div.box.nodash > * > .xb2, div.box.nodash > * > .xb3, div.box.nodash > * > .xb4 {
169}
170
171div.box.nodash > * > .box_content {
172  border-width: 0px;
173}
174
175/* ---------------------------- simple text ---------------------- */
176
177div.box.text, div.box.text > * > .box_content, div.box.text > .xbox,
178div.box.text > * > .xb1, div.box.text > * > .xb2, div.box.text > * > .xb3, div.box.text > * > .xb4 {
179}
180
181div.box.text > * > .box_content {
182  padding: 4px;
183  border-width: 0px;
184}
185
186/* ---------------------------- blue ---------------------------- */
187div.box.blue, div.box.blue > * > .box_content, div.box.blue > .xbox,
188div.box.blue > * > .xb1, div.box.blue > * > .xb2, div.box.blue > * > .xb3, div.box.blue > * > .xb4 {
189  border-color:  #bbbbdd;
190}
191
192div.box.blue, div.box.blue > .xbox,
193div.box.blue > * > .xb1, div.box.blue > * > .xb2, div.box.blue > * > .xb3, div.box.blue > * > .xb4 {
194  background: #e4ecf8;
195}
196
197div.box.blue > * > p.box_title, div.box.blue > * > p.box_caption {
198  background: #cad0ee;
199  color: #000000;
200  font-weight: bold;
201  }
202div.box.blue > * > .box_content {
203/*  background: #ffffff;*/
204  background: #f4f8fd;
205  padding: 4px;
206  }
207
208/* ---------------------------- red ---------------------------- */
209div.box.red, div.box.red > * > .box_content, div.box.red > .xbox,
210div.box.red > * > .xb1, div.box.red > * > .xb2, div.box.red > * > .xb3, div.box.red > * > .xb4 {
211  border-color:  #ddbbbb;
212}
213
214div.box.red, div.box.red > .xbox,
215div.box.red > * > .xb1, div.box.red > * > .xb2, div.box.red > * > .xb3, div.box.red > * > .xb4 {
216   background: #f8ece4;
217/*  background: #ffffff;*/
218}
219
220div.box.red > * > p.box_title, div.box.red > * > p.box_caption {
221	background: #eed0ca;
222/*	background: #fdf4ec;*/
223	color: #000000;
224	font-weight: bold;
225	}
226div.box.red > * > .box_content {
227	background: #fdf4ec;
228    padding: 4px;
229	}
230
231/* green */
232div.box.green, div.box.green > * > .box_content, div.box.green > .xbox,
233div.box.green > * > .xb1, div.box.green > * > .xb2, div.box.green > * > .xb3, div.box.green > * > .xb4 {
234  border-color:  #bbddbb;
235}
236
237div.box.green, div.box.green > .xbox,
238div.box.green > * > .xb1, div.box.green > * > .xb2, div.box.green > * > .xb3, div.box.green > * > .xb4 {
239  background: #e4f8f2;
240}
241
242div.box.green > * > p.box_title, div.box.green > * > p.box_caption {background: #c4e4d4;}
243div.box.green > * > .box_content {background: #ecfaf6;}
244
245/* orange */
246div.box.orange, div.box.orange > * > .box_content, div.box.orange > .xbox,
247div.box.orange > * > .xb1, div.box.orange > * > .xb2, div.box.orange > * > .xb3, div.box.orange > * > .xb4 {
248  border-color:  #da3;
249}
250
251div.box.orange, div.box.orange > .xbox,
252div.box.orange > * > .xb1, div.box.orange > * > .xb2, div.box.orange > * > .xb3, div.box.orange > * > .xb4 {
253  background: #f4e8ca;
254}
255
256div.box.orange > * > p.box_title, div.box.orange > * > p.box_caption {background: #f0d499;}
257div.box.orange > * > .box_content {background: #f8f0da;}
258
259/* must come last to override coloured background when using rounded corners */
260
261div.box.round {
262  background: transparent !important;
263}
264
265/* IE fixes for unsupported child selector \*/
266
267* html div.box div.box, * html div.box div.box .box_content, * html div.box div.box .xbox,
268* html div.box div.box .xb1, * html div.box div.box .xb2,
269* html div.box div.box .xb3, * html div.box div.box .xb4 {
270  border-color:  __dark__;
271}
272
273* html div.box div.box, * html div.box div.box .xbox,
274* html div.box div.box .xb1, * html div.box div.box .xb2,
275* html div.box div.box .xb3, * html div.box div.box .xb4 {
276  background: __light__;
277}
278
279* html div.box div.box p.box_title, * html div.box div.box p.box_caption { background: __medium__;}
280* html div.box div.box .box_content { background: __lighter__;}
281
282* html div.box.round .xtop, * html div.box.round .xbottom {display: block;}
283* html div.box.round .xbox {display:block; border-width:0 1px; border-style: solid; padding: 0 4px; }
284
285/* blue */
286* html div.box.blue .box_content, * html div.box.blue .xbox,
287* html div.box.blue .xb1, * html div.box.blue .xb2, * html div.box.blue .xb3, * html div.box.blue .xb4 {
288  border-color:  #bbbbdd;
289}
290
291* html div.box.blue .xbox,
292* html div.box.blue .xb1, * html div.box.blue .xb2, * html div.box.blue .xb3, * html div.box.blue .xb4 {
293  background: #e4ecf8;
294}
295
296* html div.box.blue p.box_title, * html div.box.blue p.box_caption {background: #cad0ee;}
297* html div.box.blue .box_content {background: #f4f8fd;}
298
299/* nested blue */
300* html div.box div.box.blue .box_content, * html div.box div.box.blue .xbox,
301* html div.box div.box.blue .xb1, * html div.box div.box.blue .xb2,
302* html div.box div.box.blue .xb3, * html div.box div.box.blue .xb4 {
303  border-color:  #bbbbdd;
304}
305
306* html div.box div.box.blue .xbox,
307* html div.box div.box.blue .xb1, * html div.box div.box.blue .xb2,
308* html div.box div.box.blue .xb3, * html div.box div.box.blue .xb4 {
309  background: #e4ecf8;
310}
311
312* html div.box div.box.blue p.box_title,
313* html div.box div.box.blue p.box_caption {background: #cad0ee;}
314* html div.box div.box.blue .box_content {background: #f4f8fd;}
315
316/* red */
317* html div.box.red .box_content, * html div.box.red .xbox,
318* html div.box.red .xb1, * html div.box.red .xb2, * html div.box.red .xb3, * html div.box.red .xb4 {
319  border-color:  #ddbbbb;
320}
321
322* html div.box.red .xbox,
323* html div.box.red .xb1, * html div.box.red .xb2, * html div.box.red .xb3, * html div.box.red .xb4 {
324  background: #f8ece4;
325}
326
327* html div.box.red p.box_title, * html div.box.red p.box_caption {background: #eed0ca;}
328* html div.box.red .box_content {background: #fdf4ec;}
329
330/* nested red */
331* html div.box div.box.red .box_content, * html div.box div.box.red .xbox,
332* html div.box div.box.red .xb1, * html div.box div.box.red .xb2,
333* html div.box div.box.red .xb3, * html div.box div.box.red .xb4 {
334  border-color:  #ddbbbb;
335}
336
337* html div.box div.box.red .xbox,
338* html div.box div.box.red .xb1, * html div.box div.box.red .xb2,
339* html div.box div.box.red .xb3, * html div.box div.box.red .xb4 {
340  background: #f8ece4;
341}
342
343* html div.box div.box.red p.box_title, * html div.box div.box.red p.box_caption {background: #eed0ca;}
344* html div.box div.box.red .box_content {background: #fdf4ec;}
345
346/* green */
347* html div.box.green .box_content, * html div.box.green .xbox,
348* html div.box.green .xb1, * html div.box.green .xb2, * html div.box.green .xb3, * html div.box.green .xb4 {
349  border-color:  #bbddbb;
350}
351
352* html div.box.green .xbox,
353* html div.box.green .xb1, * html div.box.green .xb2, * html div.box.green .xb3, * html div.box.green .xb4 {
354  background: #e4f8f2;
355}
356
357* html div.box.green p.box_title, * html div.box.green p.box_caption {background: #c4e4d4;}
358* html div.box.green .box_content {background: #ecfaf6;}
359
360/* nested green */
361* html div.box div.box.green .box_content, * html div.box div.box.green .xbox,
362* html div.box div.box.green .xb1, * html div.box div.box.green .xb2,
363* html div.box div.box.green .xb3, * html div.box div.box.green .xb4 {
364  border-color:  #bbddbb;
365}
366
367* html div.box div.box.green .xbox,
368* html div.box div.box.green .xb1, * html div.box div.box.green .xb2,
369* html div.box div.box.green .xb3, * html div.box div.box.green .xb4 {
370  background: #e4f8f2;
371}
372
373* html div.box div.box.green p.box_title, * html div.box div.box.green p.box_caption {background: #c4e4d4;}
374* html div.box div.box.green .box_content {background: #ecfaf6;}
375
376/* orange */
377* html div.box.orange .box_content, * html div.box.orange .xbox,
378* html div.box.orange .xb1, * html div.box.orange .xb2, * html div.box.orange .xb3, * html div.box.orange .xb4 {
379  border-color:  #da3;
380}
381
382* html div.box.orange .xbox,
383* html div.box.orange .xb1, * html div.box.orange .xb2, * html div.box.orange .xb3, * html div.box.orange .xb4 {
384  background: #f4e8ca;
385}
386
387* html div.box.orange p.box_title, * html div.box.orange p.box_caption {background: #f0d499;}
388* html div.box.orange .box_content {background: #f8f0da;}
389
390/* nestedorange */
391* html div.box div.box.orange .box_content, * html div.box div.box.orange .xbox,
392* html div.box div.box.orange .xb1, * html div.box div.box.orange .xb2,
393* html div.box div.box.orange .xb3, * html div.box div.box.orange .xb4 {
394  border-color:  #da3;
395}
396
397* html div.box div.box.orange .xbox,
398* html div.box div.box.orange .xb1, * html div.box div.box.orange .xb2,
399* html div.box div.box.orange .xb3, * html div.box div.box.orange .xb4 {
400  background: #f4e8ca;
401}
402
403* html div.box div.box.orange p.box_title, * html div.box div.box.orange p.box_caption {background: #f0d499;}
404* html div.box div.box.orange .box_content {background: #f8f0da;}
405
406/* end plugin:box */