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 */