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