/*
 * Rounded boxes - inspired by CSSPlay
 * Doco at bottom.
 */

.roundedLarge, .roundedSmall {
    background: transparent;
    margin: 0;
}

.ctop, .cbottom {
    display: block;
    background: transparent;
    font-size: 1px;
}

.cb1, .cb2, .cb3, .cb4 {
    display: block;
    overflow: hidden;
}

.cb1 {
    background: #ccc;
}
.cb1, .cb2, .cb3 {
    height: 1px;
}

.cb2, .cb3, .cb4 {
    background: #f0f0f0;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
}

.roundedLarge .cb1 {
    margin: 0 5px;
}

.roundedLarge .cb2 {
    margin: 0 3px;
    border-width: 0 2px;
}

.roundedLarge .cb3 {
    margin: 0 2px;
}

.roundedLarge .cb4 {
    height: 2px;
    margin: 0 1px;
}

.roundedSmall .cb1 {
    margin: 0 2px;
}

.roundedSmall .cb2 {
    margin: 0 1px;
    border-width: 0 1px;
}

.roundedSmall .cb3, .roundedSmall .cb4 {
    display:none;
}

.roundedContent {
    border:1px solid #ccc;
    border-width:0 1px;
}

.nbS .roundedContent, .nbL .roundedContent {
    border-width:0;
}
.nbS .cb1, .nbS .cb2, .nbL .cb1, .nbL .cb2, .nbL .cb3, .nbL .cb4 {
    background-color:transparent;
    border:1px solid #fff;
    margin:0;
}
.nbS .cb1 {
    border-width:0 2px;
}
.nbS .cb2 {
    border-width:0 1px;
}
.nbL .cb1 {
    border-width:0 5px;
}
.nbL .cb2 {
    border-width:0 3px;
}
.nbL .cb3 {
    border-width:0 2px;
}
.nbL .cb4 {
    border-width:0 1px;
}

/* Change color or left corner*/
.nbS .leftCnr .cb1, .nbS .leftCnr .cb2, .nbL .leftCnr .cb1, .nbL .leftCnr .cb2, .nbL .leftCnr .cb3, .nbL .leftCnr .cb4 {
    border-left-color:#e0edfe;
}

.nbS .leftCnr2 .cb1, .nbS .leftCnr2 .cb2, .nbL .leftCnr2 .cb1, .nbL .leftCnr2 .cb2, .nbL .leftCnr2 .cb3, .nbL .leftCnr2 .cb4 {
    border-left-color:#c3d9ff;
}

/* Coloured bordered box */

.uce .roundedContent, .uce .cb2, .uce .cb3, .uce .cb4 {
    background-color: #C3D9FF;
    border-color: #ccc;
}

.uce .cb1 {
    background-color:#ccc;
}

.uce .roundedContent {
    padding:3px;
}

/* Grey topped box */

.gr .roundedContent, .gr .cb2, .gr .cb3, .gr .cb4 {
    background-color: #666;
    border-color: #999;
}

.gr .cb1 {
    background-color:#bbb;
}

.gr h4 {
	background-color:#666;
	color: #eee;
	padding: 2px 5px;
	margin: 0;
	font-family:Helvetica, Arial, Sans Serif;
	font-weight:normal;
	font-size: small;
	border-bottom: 1px solid #c6c6c6;
	border-left: 1px solid #aaa;
	border-right: 1px solid #bababa;
}

.gr .roundedContent, .gr .cbottom .cb2, .gr .cbottom .cb3, .gr .cbottom .cb4 {
	background-color: #fff;
	border-color: #ddd;
}

.gr .cbottom .cb1 {
    background-color:#ddd;
}

/*******************************************************************************
This is the full html structure, where XXX is Large or Small and Y is L or S

  - Adding the line of b's without the rounded class won't affect the layout
  - Remove the ctop or cbottom to drop those rounded corners
  - nbY is optional, add it to round without borders
  - the roundedContent div is redundant when using a borderless corners

<div class="roundedXXX nbY">
    <b class="ctop"><b class="cb1"></b><b class="cb2"></b><b class="cb3"></b><b class="cb4"></b></b>
    <div class="roundedContent">
        Content here
    </div>
    <b class="cbottom"><b class="cb4"></b><b class="cb3"></b><b class="cb2"></b><b class="cb1"></b></b>
</div>

*********************************************************************************/