/* basic page default styling */

body {
    background-color: #ffffff;
    font: 10pt Arial;
}

h2, h4 {
    margin: 0px 0px 10px 0px;
}

p {
    margin-bottom: 0px;
}


/* syling for all rounded corners <div>s */

div.rounded {
    background-color: #cccccc;
    padding: 15px;
    position: relative;
}

div.rounded div.corner_rounded,
div.rounded div.corner_bordered {
    position: absolute;
    width: 14px;
    height: 14px;
    line-height: 1px; /* prevents older browsers from forcing a height > 14px */
}

div.rounded div.top_left {
    top: 0px;
    left: 0px;
    background-image: url( top_left.gif );
}

div.rounded div.top_right {
    top: 0px;
    right: 0px;
    background-image: url( top_right.gif );
}

div.rounded div.bottom_left {
    left: 0px;
    bottom: -1px; /* This removes a 1px underhang at the bottom */
    background-image: url( bottom_left.gif );
}

div.rounded div.bottom_right {
    right: 0px;
    bottom: -1px; /* This removes a 1px underhang at the bottom */
    background-image: url( bottom_right.gif );
}


/*
    styling for bordered rounded corners <div>s; note that there are several
    IE6-only hacks to make the corner images line up correctly; these are
    critical for IE6 correct visual positioning
*/

div.bordered {
    margin: -14px;
    position: relative;
}

div.rounded div.bordered div.top_left {
    background-image: url( top_left_border.gif );
    _left: -15px; /* IE6 only */
}

div.rounded div.bordered div.top_right {
    background-image: url( top_right_border.gif );
    _right: 1px; /* IE6 only */
}

div.rounded div.bordered div.bottom_left {
    background-image: url( bottom_left_border.gif );
    _left: -15px; /* IE6 only */
    _bottom: 1px; /* IE6 only */
}

div.rounded div.bordered div.bottom_right {
    background-image: url( bottom_right_border.gif );
    _bottom: 1px; /* IE6 only */
    _right: 1px;  /* IE6 only */
}


/*
    non-structural style definitions;
    for this example, only background color is set
*/

div.blue {
    background-color: #ccccff;
}

div.green {
    background-color: #ccffcc;
}

div.red {
    background-color: #ffcccc;
}

div.white {
    background-color: #ffffff;
}

div.ig_blue {
    background-color: #6b8ea2;
}


/*
    structural style definitions;
    for this example, only simple widths and margins are set
*/

div.box_type_a {
    width: 300px;
    margin-bottom: 20px;
}

div.box_type_b {
    width: 500px;
    margin-bottom: 20px;
}