/*
 * 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: #ddedff;
    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;
    overflow:hidden;
}

.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;
}

.roundedLarge .noLeftCnr .cb1, .roundedLarge .noLeftCnr .cb2, .roundedLarge .noLeftCnr .cb3, .roundedLarge .noLeftCnr .cb4 {
    margin-left:0;
    border-left-width:1px;
}

.roundedLarge .tabbedLeftCnr .cb1, .roundedLarge .tabbedLeftCnr .cb2, .roundedLarge .tabbedLeftCnr .cb3, .roundedLarge .tabbedLeftCnr .cb4 {
    margin-left:0;
}
.roundedLarge .tabbedLeftCnr .cb2{
    border-left-width:5px;
}
.roundedLarge .tabbedLeftCnr .cb3 {
    border-left-width:3px;
}
.roundedLarge .tabbedLeftCnr .cb4 {
    border-left-width:2px;
    height:2px;
}


/*******************************************************************************
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>

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

/*********************************************************************************
e.g. Rouned corners using images
           <div id="nav">
                <ul>
                    <li class="active"><a>Review</a></li>
                    <li><a onclick="submitDefaultForm('changes')">Manage Contents</a></li>
                </ul>
           </div>
**********************************************************************************/


#nav {
    position: absolute;
    bottom: 0;
    left: 0;
}

#nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    width: 500px;
}
#nav li {
    float: left;
    margin: 0 4px 0 0;
    display: block;
    padding: 0;
    background: #eff7ff url(img/cnrL_tl.gif) no-repeat top left;
}
#nav a {
    float: left;
    padding: 5px 10px 3px 10px;
    font-weight: bold;
    text-decoration:none;
    background: url(img/cnrL_tr.gif) no-repeat top right;
    color: #222;
}
#nav li:hover {
    background-color: bisque;
}
#nav li.active, #nav li.active:hover {
    background-color: #ddedff;
}

#mapnav {
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index:10000;
}

#mapnav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    float: left;
    width: 100%;
}
#mapnav li {
    float: left;
    margin: 0 10px 0 0;
    display: block;
    padding: 0;
    width:100px;
}
#mapnav a {
    text-decoration:none;
    color: #222;
}
#mapnav .roundedContent, #mapnav .cb2, #mapnav .cb3, #mapnav .cb4 {
    background-color:#ccc;
}
#mapnav .mapactive .roundedContent, #mapnav .mapactive .cb2, #mapnav .mapactive .cb3, #mapnav .mapactive .cb4 {
    background-color:#f5f5f5;
}
#mapnav ul li div {
    text-align:center;
    font-weight:bold;
}
#mapnav ul li .roundedContent {
    padding:5px;
}
#mapnav ul li.mapactive .roundedContent {
    border-bottom:1px solid #f5f5f5;
}