/* BOXES */

.box { 
 margin:0 0 0 12px; /* so edge of gradient lines up with 20px padding */ /* margin-left is default, width of left corner */
 width:333px; /* 367px - 12px */
 position:relative;
 z-index:1;
}
.box#myAccount-box{margin-bottom:20px;}

/* default is orange */
.box .content,
.box .top,
.box .btm,
.box .btm div {background-repeat:no-repeat; background-position:top right;}

.box#myAccount-box .content,
.box#myAccount-box .top,
.box#myAccount-box .btm,
.box#myAccount-box .btm div,
.box#developers-box .content,
.box#developers-box .top,
.box#developers-box .btm,
.box#developers-box .btm div  {background-image: url(../images/box_landing.png);}


.box .content{padding:0 12px 0 0; position:relative; zoom:1; _overflow-y:hidden; }

/* top+left vertical slice */
.box .top{
 margin-left:-12px;
 position:absolute;
 left:0;
 top:0;
 width:12px; /* top slice width */
 height:100%;
 _height:1600px; /* arbitrary long height, IE 6 */
 background-position:top left;
}

/* bottom */
.box .btm{position:relative; width:100%;}
/* height of bottom cap/shade */
.box .btm,
.box .btm div{height:30px; font-size:1px; height:20px;}
.box .btm{background-position:bottom right;}
/* bottom corner width */
.box .btm div {position:relative; width:12px; margin-left:-12px; background-position:bottom left;}

.box .head,
.box .body,
.box .foot{position:relative;}
.box .body{ min-height:100px; padding:20px 9px 0 9px;} /* padding bottom includes height of button so really 12px */

/* extra content protector - preventing vertical overflow (past background) */
.box .wrapper{position:static; max-height:1000px; overflow:auto; overflow:hidden;/* note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */}