/* powered by http://mierendo.com/software/rounded_css_boxes/ */
.box_tl, .box_t, .box_tr, .box_l, .box_r, .box_bl, .box_b, .box_br, .box {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
}
.box_t {
    /*
        change this div to layout the whole box (width, height, float, margin, ...)
        example lines:
        width: 60%;
        margin: 7px 35px 0px 1px
        to change distance to content/text scroll to class ".box" and change the padding
    */
    background-color: #f8f8f8;
    background-image: url("/img/box_border.png");
    background-repeat: repeat-x;
    background-position: top;
}
.box_tl {
    height: 100%;
    background-image: url("/img/box_topleft.png");
    background-repeat: no-repeat;
    background-position: left top;
}
.box_tr {
    height: 100%;
    background-image: url("/img/box_topright.png");
    background-repeat: no-repeat;
    background-position: right top;
}
.box_bl {
    height: 100%;
    background-image: url("/img/box_bottomleft.png");
    background-repeat: no-repeat;
    background-position: left bottom;
}
.box_br {
    height: 100%;
    background-image: url("/img/box_bottomright.png");
    background-repeat: no-repeat;
    background-position: right bottom;
}
.box {
    height: 100%;
    /* change this if you want to change the distance distance to text/content */
    padding: 5px 6px 5px 6px;
}

.box_l {
    height: 100%;
    background-image: url("/img/box_border.png");
    background-repeat: repeat-y;
    background-position: left;
}
.box_r {
    height: 100%;
    background-image: url("/img/box_border.png");
    background-repeat: repeat-y;
    background-position: right;
}
.box_b {
    height: 100%;
    background-image: url("/img/box_border.png");
    background-repeat: repeat-x;
    background-position: bottom;
}