[Summary view] [Print] [Text view]

   1  /* plugin:box */
   2  div.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  
  20  div.box .xtop, div.box .xbottom {display: none;}
  21  div.box.round > .xtop, div.box.round > .xbottom {display: block;}
  22  
  23  div.box.round { border: none; padding: 0;}
  24  div.box.round > .xbox {display:block; border-width:0 1px; border-style: solid; padding: 0 4px; }
  25  
  26  div.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  
  33  div.box p.box_title { margin-bottom: 4px;}
  34  div.box p.box_caption { margin-top: 4px;}
  35  
  36  div.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  
  46  div.box.left {
  47    float: left;
  48    margin-right: 1em;
  49  }
  50   
  51  div.box.right {
  52    float: right;
  53    margin-left: 1em;
  54  }
  55  
  56  /* colours */
  57  /* default */
  58  div.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  
  62  div.box, div.box .xbox, div.box .xb1, div.box .xb2, div.box .xb3, div.box .xb4 {
  63    background: __light__;
  64  }
  65  
  66  div.box p.box_title, div.box p.box_caption { background: __medium__;}
  67  div.box .box_content { background: __lighter__;}
  68  
  69  /* blue */
  70  div.box.blue, div.box.blue > * > .box_content, div.box.blue > .xbox, 
  71  div.box.blue > * > .xb1, div.box.blue > * > .xb2, div.box.blue > * > .xb3, div.box.blue > * > .xb4 {
  72    border-color:  #bbbbdd;
  73  }
  74  
  75  div.box.blue, div.box.blue > .xbox, 
  76  div.box.blue > * > .xb1, div.box.blue > * > .xb2, div.box.blue > * > .xb3, div.box.blue > * > .xb4 {
  77    background: #e4ecf8;
  78  }
  79  
  80  div.box.blue > * > p.box_title, div.box.blue > * > p.box_caption {background: #cad0ee;}
  81  div.box.blue > * > .box_content {background: #f4f8fd;}
  82  
  83  /* red */
  84  div.box.red, div.box.red > * > .box_content, div.box.red > .xbox, 
  85  div.box.red > * > .xb1, div.box.red > * > .xb2, div.box.red > * > .xb3, div.box.red > * > .xb4 {
  86    border-color:  #ddbbbb;
  87  }
  88  
  89  div.box.red, div.box.red > .xbox, 
  90  div.box.red > * > .xb1, div.box.red > * > .xb2, div.box.red > * > .xb3, div.box.red > * > .xb4 {
  91    background: #f8ece4;
  92  }
  93  
  94  div.box.red > * > p.box_title, div.box.red > * > p.box_caption {background: #eed0ca;}
  95  div.box.red > * > .box_content {background: #fdf4ec;}
  96  
  97  /* green */
  98  div.box.green, div.box.green > * > .box_content, div.box.green > .xbox, 
  99  div.box.green > * > .xb1, div.box.green > * > .xb2, div.box.green > * > .xb3, div.box.green > * > .xb4 {
 100    border-color:  #bbddbb;
 101  }
 102  
 103  div.box.green, div.box.green > .xbox, 
 104  div.box.green > * > .xb1, div.box.green > * > .xb2, div.box.green > * > .xb3, div.box.green > * > .xb4 {
 105    background: #e4f8f2;
 106  }
 107  
 108  div.box.green > * > p.box_title, div.box.green > * > p.box_caption {background: #c4e4d4;}
 109  div.box.green > * > .box_content {background: #ecfaf6;}
 110  
 111  /* orange */
 112  div.box.orange, div.box.orange > * > .box_content, div.box.orange > .xbox, 
 113  div.box.orange > * > .xb1, div.box.orange > * > .xb2, div.box.orange > * > .xb3, div.box.orange > * > .xb4 {
 114    border-color:  #da3;
 115  }
 116  
 117  div.box.orange, div.box.orange > .xbox, 
 118  div.box.orange > * > .xb1, div.box.orange > * > .xb2, div.box.orange > * > .xb3, div.box.orange > * > .xb4 {
 119    background: #f4e8ca;
 120  }
 121  
 122  div.box.orange > * > p.box_title, div.box.orange > * > p.box_caption {background: #f0d499;}
 123  div.box.orange > * > .box_content {background: #f8f0da;}
 124  
 125  /* must come last to override coloured background when using rounded corners */
 126  
 127  div.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 */