1/* plugin:boxwh */
2div.box {
3  width: 50%;
4  margin: 1em auto;
5  border: 1px solid;
6  padding: 4px;
7  overflow: hidden;
8}
9
10/* rounded corners styles from Stu Nicholls snazzy borders, http://www.cssplay.co.uk/boxes/snazzy.html */
11.xtop, .xbottom {background:transparent; font-size:0; line-height: 1px;}
12.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden; border-style: solid;}
13.xb2, .xb3 {height:1px;}
14.xb2, .xb3, .xb4 {border-width:0 1px;}
15.xb1 {height: 0; margin:0 5px; border-width:1px 0 0 0;}
16.xb2 {margin:0 3px; border-width:0 2px;}
17.xb3 {margin:0 2px;}
18.xb4 {height:2px; margin:0 1px;}
19
20div.box .xtop, div.box .xbottom {display: none;}
21div.box.round > .xtop, div.box.round > .xbottom {display: block;}
22
23div.box.round { border: none; padding: 0;}
24div.box.round > .xbox {display:block; border-width:0 1px; border-style: solid; padding: 0 4px; }
25
26div.box p.box_title, div.box p.box_caption {
27  font-size: 90%;
28  margin: 0;
29  padding: 2px 6px;
30  line-height: 1.2;
31}
32
33div.box p.box_title { margin-bottom: 4px;}
34div.box p.box_caption { margin-top: 4px;}
35
36div.box .box_content {
37  margin: 0;
38  padding: 0 6px;
39  border-width: 1px;
40  border-style: dashed;
41  line-height: 1.2;
42}
43
44/* floating alignment */
45
46div.box.left {
47  float: left;
48  margin-right: 1em;
49}
50
51div.box.right {
52  float: right;
53  margin-left: 1em;
54}
55
56/* colours */
57/* default */
58div.box, div.box .box_content, div.box .xbox, div.box .xb1, div.box .xb2, div.box .xb3, div.box .xb4 {
59  border-color:  __dark__;
60}
61
62div.box, div.box .xbox, div.box .xb1, div.box .xb2, div.box .xb3, div.box .xb4 {
63  background: __light__;
64}
65
66div.box p.box_title, div.box p.box_caption { background: __medium__;}
67div.box .box_content { background: __lighter__;}
68
69/* blue */
70div.box.blue, div.box.blue > * > .box_content, div.box.blue > .xbox,
71div.box.blue > * > .xb1, div.box.blue > * > .xb2, div.box.blue > * > .xb3, div.box.blue > * > .xb4 {
72  border-color:  #bbbbdd;
73}
74
75div.box.blue, div.box.blue > .xbox,
76div.box.blue > * > .xb1, div.box.blue > * > .xb2, div.box.blue > * > .xb3, div.box.blue > * > .xb4 {
77  background: #e4ecf8;
78}
79
80div.box.blue > * > p.box_title, div.box.blue > * > p.box_caption {background: #cad0ee;}
81div.box.blue > * > .box_content {background: #f4f8fd;}
82
83/* red */
84div.box.red, div.box.red > * > .box_content, div.box.red > .xbox,
85div.box.red > * > .xb1, div.box.red > * > .xb2, div.box.red > * > .xb3, div.box.red > * > .xb4 {
86  border-color:  #ddbbbb;
87}
88
89div.box.red, div.box.red > .xbox,
90div.box.red > * > .xb1, div.box.red > * > .xb2, div.box.red > * > .xb3, div.box.red > * > .xb4 {
91  background: #f8ece4;
92}
93
94div.box.red > * > p.box_title, div.box.red > * > p.box_caption {background: #eed0ca;}
95div.box.red > * > .box_content {background: #fdf4ec;}
96
97/* green */
98div.box.green, div.box.green > * > .box_content, div.box.green > .xbox,
99div.box.green > * > .xb1, div.box.green > * > .xb2, div.box.green > * > .xb3, div.box.green > * > .xb4 {
100  border-color:  #bbddbb;
101}
102
103div.box.green, div.box.green > .xbox,
104div.box.green > * > .xb1, div.box.green > * > .xb2, div.box.green > * > .xb3, div.box.green > * > .xb4 {
105  background: #e4f8f2;
106}
107
108div.box.green > * > p.box_title, div.box.green > * > p.box_caption {background: #c4e4d4;}
109div.box.green > * > .box_content {background: #ecfaf6;}
110
111/* orange */
112div.box.orange, div.box.orange > * > .box_content, div.box.orange > .xbox,
113div.box.orange > * > .xb1, div.box.orange > * > .xb2, div.box.orange > * > .xb3, div.box.orange > * > .xb4 {
114  border-color:  #da3;
115}
116
117div.box.orange, div.box.orange > .xbox,
118div.box.orange > * > .xb1, div.box.orange > * > .xb2, div.box.orange > * > .xb3, div.box.orange > * > .xb4 {
119  background: #f4e8ca;
120}
121
122div.box.orange > * > p.box_title, div.box.orange > * > p.box_caption {background: #f0d499;}
123div.box.orange > * > .box_content {background: #f8f0da;}
124
125/* must come last to override coloured background when using rounded corners */
126
127div.box.round {
128  background: transparent !important;
129}
130
131/* IE fixes for unsupported child selector \*/
132
133* html div.box div.box, * html div.box div.box .box_content, * html div.box div.box .xbox,
134* html div.box div.box .xb1, * html div.box div.box .xb2,
135* html div.box div.box .xb3, * html div.box div.box .xb4 {
136  border-color:  __dark__;
137}
138
139* html div.box div.box, * html div.box div.box .xbox,
140* html div.box div.box .xb1, * html div.box div.box .xb2,
141* html div.box div.box .xb3, * html div.box div.box .xb4 {
142  background: __light__;
143}
144
145* html div.box div.box p.box_title, * html div.box div.box p.box_caption { background: __medium__;}
146* html div.box div.box .box_content { background: __lighter__;}
147
148* html div.box.round .xtop, * html div.box.round .xbottom {display: block;}
149* html div.box.round .xbox {display:block; border-width:0 1px; border-style: solid; padding: 0 4px; }
150
151/* blue */
152* html div.box.blue .box_content, * html div.box.blue .xbox,
153* html div.box.blue .xb1, * html div.box.blue .xb2, * html div.box.blue .xb3, * html div.box.blue .xb4 {
154  border-color:  #bbbbdd;
155}
156
157* html div.box.blue .xbox,
158* html div.box.blue .xb1, * html div.box.blue .xb2, * html div.box.blue .xb3, * html div.box.blue .xb4 {
159  background: #e4ecf8;
160}
161
162* html div.box.blue p.box_title, * html div.box.blue p.box_caption {background: #cad0ee;}
163* html div.box.blue .box_content {background: #f4f8fd;}
164
165/* nested blue */
166* html div.box div.box.blue .box_content, * html div.box div.box.blue .xbox,
167* html div.box div.box.blue .xb1, * html div.box div.box.blue .xb2,
168* html div.box div.box.blue .xb3, * html div.box div.box.blue .xb4 {
169  border-color:  #bbbbdd;
170}
171
172* html div.box div.box.blue .xbox,
173* html div.box div.box.blue .xb1, * html div.box div.box.blue .xb2,
174* html div.box div.box.blue .xb3, * html div.box div.box.blue .xb4 {
175  background: #e4ecf8;
176}
177
178* html div.box div.box.blue p.box_title,
179* html div.box div.box.blue p.box_caption {background: #cad0ee;}
180* html div.box div.box.blue .box_content {background: #f4f8fd;}
181
182/* red */
183* html div.box.red .box_content, * html div.box.red .xbox,
184* html div.box.red .xb1, * html div.box.red .xb2, * html div.box.red .xb3, * html div.box.red .xb4 {
185  border-color:  #ddbbbb;
186}
187
188* html div.box.red .xbox,
189* html div.box.red .xb1, * html div.box.red .xb2, * html div.box.red .xb3, * html div.box.red .xb4 {
190  background: #f8ece4;
191}
192
193* html div.box.red p.box_title, * html div.box.red p.box_caption {background: #eed0ca;}
194* html div.box.red .box_content {background: #fdf4ec;}
195
196/* nested red */
197* html div.box div.box.red .box_content, * html div.box div.box.red .xbox,
198* html div.box div.box.red .xb1, * html div.box div.box.red .xb2,
199* html div.box div.box.red .xb3, * html div.box div.box.red .xb4 {
200  border-color:  #ddbbbb;
201}
202
203* html div.box div.box.red .xbox,
204* html div.box div.box.red .xb1, * html div.box div.box.red .xb2,
205* html div.box div.box.red .xb3, * html div.box div.box.red .xb4 {
206  background: #f8ece4;
207}
208
209* html div.box div.box.red p.box_title, * html div.box div.box.red p.box_caption {background: #eed0ca;}
210* html div.box div.box.red .box_content {background: #fdf4ec;}
211
212/* green */
213* html div.box.green .box_content, * html div.box.green .xbox,
214* html div.box.green .xb1, * html div.box.green .xb2, * html div.box.green .xb3, * html div.box.green .xb4 {
215  border-color:  #bbddbb;
216}
217
218* html div.box.green .xbox,
219* html div.box.green .xb1, * html div.box.green .xb2, * html div.box.green .xb3, * html div.box.green .xb4 {
220  background: #e4f8f2;
221}
222
223* html div.box.green p.box_title, * html div.box.green p.box_caption {background: #c4e4d4;}
224* html div.box.green .box_content {background: #ecfaf6;}
225
226/* nested green */
227* html div.box div.box.green .box_content, * html div.box div.box.green .xbox,
228* html div.box div.box.green .xb1, * html div.box div.box.green .xb2,
229* html div.box div.box.green .xb3, * html div.box div.box.green .xb4 {
230  border-color:  #bbddbb;
231}
232
233* html div.box div.box.green .xbox,
234* html div.box div.box.green .xb1, * html div.box div.box.green .xb2,
235* html div.box div.box.green .xb3, * html div.box div.box.green .xb4 {
236  background: #e4f8f2;
237}
238
239* html div.box div.box.green p.box_title, * html div.box div.box.green p.box_caption {background: #c4e4d4;}
240* html div.box div.box.green .box_content {background: #ecfaf6;}
241
242/* orange */
243* html div.box.orange .box_content, * html div.box.orange .xbox,
244* html div.box.orange .xb1, * html div.box.orange .xb2, * html div.box.orange .xb3, * html div.box.orange .xb4 {
245  border-color:  #da3;
246}
247
248* html div.box.orange .xbox,
249* html div.box.orange .xb1, * html div.box.orange .xb2, * html div.box.orange .xb3, * html div.box.orange .xb4 {
250  background: #f4e8ca;
251}
252
253* html div.box.orange p.box_title, * html div.box.orange p.box_caption {background: #f0d499;}
254* html div.box.orange .box_content {background: #f8f0da;}
255
256/* nestedorange */
257* html div.box div.box.orange .box_content, * html div.box div.box.orange .xbox,
258* html div.box div.box.orange .xb1, * html div.box div.box.orange .xb2,
259* html div.box div.box.orange .xb3, * html div.box div.box.orange .xb4 {
260  border-color:  #da3;
261}
262
263* html div.box div.box.orange .xbox,
264* html div.box div.box.orange .xb1, * html div.box div.box.orange .xb2,
265* html div.box div.box.orange .xb3, * html div.box div.box.orange .xb4 {
266  background: #f4e8ca;
267}
268
269* html div.box div.box.orange p.box_title, * html div.box div.box.orange p.box_caption {background: #f0d499;}
270* html div.box div.box.orange .box_content {background: #f8f0da;}
271
272/* end plugin:box */