/*
** Adapted from http://modxcms.com/simple-rounded-corner-css-boxes.html
*/

/*
** PADDING:T,R,B,L
** BOXWIDTH = 350 = 200 = Intended total box width
** GAP      =  15 =  10 = the gap on the right edge of the image (not content padding)
** INSIDE   =  25 =   5 = right-inside padding
*/

/* set the image to use and establish the lower-right position */ 
.box, .box .body, .box .head, .box .head p
{
    background: transparent url(images/box.gif) no-repeat bottom right; 
} 
.box
{ 
    width: 190px !important; /* BOXWIDTH - GAP */
    width: 180px;            /* IE Win = width - GAP */
    padding-right: 10px;     /* GAP */
    margin: 10px auto;       /* use to position the box */ 
} 

/* set the top-right image */ 
.box .head
{ 
    background-position: top right;
    margin-right: -10px;  /* -GAP, pull the right image over on top of border */
    padding-right: 25px;  /* GAP + INSIDE [+GAP] */
    text-align: center; 
} 

.box .head p
{ 
    background-position: top left; 
    margin: 0;                           /* reset main site styles*/ 
    border: 0;                           /* ditto */ 
    padding: 10px 0px 0px 15px;           /* T=INSIDE; R=0; B=[0] GAP; L=GAP + INSIDE; */ 
    height: auto !important; height: 1%; /* IE Holly Hack */
    text-align: center; 
    font-size: 110%;
    font-weight: bold;
} 

.box .body
{ 
    background-position: bottom left; 
    margin-right: 15px;        /* INSIDE [+GAP] */ 
    padding: 0px 0 10px 15px; /* T=[0] GAP; R=0; B=GAP; L=GAP + INSIDE; mirror .box_head right/left */ 
    height:150px;
    min-width: 150px;
} 

.box .body p
{
   font-size: 80%;
   margin: auto;  /*1ex auto*/
   text-align: center;
}

.box .body img
{
   margin:1em;
}