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

CSS Provided by the Development Group but independent of the house style.

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


/* 
    Rounded borders.compatible with any browser.     
    See grails tag CamlibsTagLib#roundedBox
    
    Default colour scheme: Grey border, white inside.
*/

/* rounded corner border style without color info */
.b1, .b2, .b3, .b4, .bflat {font-size:1px; overflow:hidden; display:block;}
.b1 {height:1px; margin:0 4px;}
.b2 {height:1px; border-right:2px solid; border-left:2px solid; margin:0 2px;}
.b3 {height:1px; border-right:2px solid; border-left:1px solid; margin:0 1px;}
.b4 {height:2px; border-right:1px solid; border-left:1px solid; margin:0 0px;}
.bflat {height:1px; margin:0 0px; }
.roundedBoxSides { border-right:1px solid; border-left:1px solid; margin:0 0px; overflow:hidden; display:block;  }
.roundedBoxSides > *  { position: relative; top: -2px; }

/* rounded corner colors 
   (to be overridden in your application's stylesheet) */
.b1, .bflat {background:#E0E0F0;}
 .b2, .b3, .b4, .roundedBoxSides {background:#FFF; border-right-color:#E0E0F0; border-left-color:#E0E0F0;}


/*
Tabs.
    The normal structure would be as follows:
    
        <div class="camJsTabSet">
            <div class="allTabTops">
                <div class="tabTop"> ... Tab 1 ... </div>
                <div class="tabTop"> ... Tab 2 ... </div>
            </div>
            <div class="camTab">
                <div class="tabTop">  ... Tab 1 ... </div>
                <div class="tabBody"> ... Tab 1 ... </div>
            </div>
            <div class="camTab">
                <div class="tabTop">  ... Tab 2 ... </div>
                <div class="tabBody"> ... Tab 2 ... </div>
            </div>
        </div>
        
    Initially, allTabTops are hidden and each tab and body appear sequentially in the page. 
    If javascript is enabled, allTabTops is revealed, and all but the one tab is displayed.       
*/

.camJsTabSet { padding: 1em 0; }

.camTab, .allTabTops { 
	/* Don't pad tabs as this can still apply to the hidden ones 
	   Pad the tabBody bottom instead.
	 */
	padding: 0 0; 
}

/* Initially, allTabTops are hidden and then javascript reveals them. */
.allTabTops { display: none; }

/* Position the tab tops. 1px overlap with the panel below.
   Float left so they appear next to each other. 
 */
.tabTop {
	position: relative;
	bottom: -1px;
	left: 1.5em;
	width: 12em;
	float: left;
	/*display: inline-table;*/
	margin-left: 0;
    margin-right: 0.5em;	
}

.tabTop .roundedBoxSides { height: auto; }

/* make a tabTop link fill the surrounding box. */
.tabTop a {
	display: block;
	text-decoration: none;
	outline-style: none;
}

.tabTop a:hover { 
	text-decoration: underline;
}

.camJsTabSet .tabTop * { 
	padding: 0 0.5em; 
	text-align: center;
}

/* tabBody should appear on the next line */
.tabBody { clear: left; }

/* make body text line up with left tab edge */
.tabBody > .roundedBoxSides{ 
	padding: 2em;
    overflow: hidden;
    
}

.tabBody { padding-bottom: 2em; }

/* hide tabBody when in the background */
.tabBody.bg { display: none;}


/*-------------------------------------------------------------------
    Default colors
---------------------------------------------------------------------*/

/* Foreground tab tops. */
.tabTop .b1
    {background:#aaaaaa;}
.tabTop .b2, .tabTop .b3, .tabTop .b4, .tabTop .roundedBoxSides, .tabTop .bflat
    {background:#f4f4ee; border-right-color:#aaaaaa; border-left-color:#aaaaaa;}

/* Background tab tops.  Emulates class tabs */
.camJsTabSet .bg .bflat 
    { background: #aaaaaa; }
.camJsTabSet .bg .b1, .camJsTabSet .bg .b2, .camJsTabSet .bg .b3, .camJsTabSet .bg .b4, .camJsTabSet .bg .roundedBoxSides
    {background:#333333; border-right-color:#333333; border-left-color:#333333;}
.camJsTabSet .bg { color: white; }

/* tab panel */
.tabBody .b1
    {background:#aaaaaa;}
.tabBody .b2,  .tabBody .b3,  .tabBody .b4,  .tabBody .roundedBoxSides,  .tabBody .bflat
    {background:#f4f4ee; border-right-color:#aaaaaa; border-left-color:#aaaaaa;}

/* tab tops in the background are dark. Make text light. */
.tabTop.bg * {  color: white; }

/* Make bg tabTop appear in IE 6 */
.allTabTops .tabTop.bg {
	display: block;
	visibility: visible;
}

/*-------------------------------------------------------------------
    Other useful styles
---------------------------------------------------------------------*/
.clear { clear: both; }