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