/* css for  ' Local Administration Management :: Boxes '  March 2007 */

.box {
  width: 520px;
  margin: 0px 0px 0.5em 8px; 
}
.box p {
  font-size: 1.2em; 
}
.tl {
 width: 5px;
 height: 25px; 
 float: left;
}
.tm {
  width: 506px;
  height: 25px;
 float: left; 
}
.tr {
  width: 9px;
  height: 25px; 
 float: left;
}
.cl {
  clear: both;
 width: 5px;
 height: 100%;
 float: left;
}
.cm {
  width: 506px;
 height: 100%;
 float: left; 
}
.cr {
  width: 9px;
 height: 100%; 
 float: left;
}
.bl {
  clear: both;
 width: 5px;
 height: 10px; 
 float: left;
}
.bm {
  width: 506px;
  height: 10px;
 float: left; 
}
.br {
  width: 9px;
  height: 10px; 
 float: left;
}

/* BLUE */
.b { 
  background: url('images/blue_col.png') repeat-y 0 0; 
}
.b .tl {
  background: url('images/blue.png') no-repeat 0 0; 
}
.b .tm { 
  background: url('images/blue_top.png') repeat-x 0 0; 
}
.b .tr {
  background: url('images/blue.png') no-repeat 100% 0; 
}
.b .bl {
  background: url('images/blue.png') no-repeat 0 100%; 
}
.b .bm {
  background: url('images/blue_bottom.png') repeat-x 0 100%; 
}
.b .br {
  background: url('images/blue.png') no-repeat 100% 100%; 
}

/* GREEN */
.g { 
  background: url('images/green_col.png') repeat-y 0 0; 
}
.g .tl {
  background: url('images/green.png') no-repeat 0 0; 
}
.g .tm { 
  background: url('images/green_top.png') repeat-x 0 0; 
}
.g .tr {
  background: url('images/green.png') no-repeat 100% 0; 
}
.g .bl {
  background: url('images/green.png') no-repeat 0 100%; 
}
.g .bm {
  background: url('images/green_bottom.png') repeat-x 0 100%; 
}
.g .br {
  background: url('images/green.png') no-repeat 100% 100%; 
}

/* BLACK */
.k { 
  background: url('images/black_col.png') repeat-y 0 0; 
}
.k .tl {
  background: url('images/black.png') no-repeat 0 0; 
}
.k .tm { 
  background: url('images/black_top.png') repeat-x 0 0; 
}
.k .tr {
  background: url('images/black.png') no-repeat 100% 0; 
}
.k .bl {
  background: url('images/black.png') no-repeat 0 100%; 
}
.k .bm {
  background: url('images/black_bottom.png') repeat-x 0 100%; 
}
.k .br {
  background: url('images/black.png') no-repeat 100% 100%; 
}

/* DOUBLES */
.bx2 {
  width: 520px;
  margin: 0px 0px 0.5em 8px; 
}
.bx2 p {   
  margin: 0.25em 4% 0.75em;
  font-size: 1.2em; 
}
.kb { 
  background: url('images/kb_col.png') repeat-y 0 0; 
}
.bk { 
  background: url('images/bk_col.png') repeat-y 0 0; 
}
.kg { 
  background: url('images/kg_col.png') repeat-y 0 0; 
}
.gk { 
  background: url('images/gk_col.png') repeat-y 0 0; 
}
.bg { 
  background: url('images/bg_col.png') repeat-y 0 0; 
}
.gb { 
  background: url('images/gb_col.png') repeat-y 0 0; 
}


.bx2 .bxl {
 float: left;
 width: 260px; 
}
.bx2 .bxr {
 float: right; 
 width: 260px;
}
.bx2 .b,
.bx2 .g,
.bx2 .k {
   background: url(none);
}
.bx2 .tm,
.bx2 .cm,
.bx2 .bm {
 width: 246px; 
}

.xx { /* hack required for IE7 */
  height: 100%; 
}

/* colorless box */
.w_bx {
  width: 520px;
  margin: 0px 0px 0.5em 0px; 
  background: url('images/w_col.png') repeat-y 256px 0;
}
.w_bx p {   
  margin: 0.25em 4% 0.75em;
  font-size: 1.1em; 
}
.w_l {
 float: left;
 width: 260px;  
}
.w_r {
 float: right; 
 width: 260px;  
}

/* 
other width options
35% = 182px
65% = 338px
adjust 256px in .w_bx to 180px for 35% on left, or 335px for 65% on left
*/
