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