/* <dtml-with base_properties> (do not remove this :) */
/* <dtml-call "REQUEST.set('portal_url', portal_url())"> (not this either :) */

/* Collapsible elements */

dl.collapsible {
    border: &dtml-borderWidth; &dtml-borderStyle; &dtml-globalBorderColor; !important;
    margin: 1em 0 0 0;
    padding: 0;
}

dl.collapsible dt.collapsibleHeader {
    display: block;
    float: left;
    background: &dtml-backgroundColor;;
    line-height: 1.2em;
    vertical-align: middle;
    font-size: 90%;
    position: relative;
    top: -0.6em;
    width: auto;
    margin: 0 0 -0.6em 1em;
    padding: 0 0.5em;
}

dl.collapsible dd.collapsibleContent {
    margin: 0;
    padding: 0 1em;
    clear: left;
}

/* for IE the following isn't needed, that's why the css2 selector is used */
dl.collapsible dd.collapsibleContent > dl {
    margin: 0;
    padding: 0;
}

dl.expandedInlineCollapsible dt.collapsibleHeader,
dl.expandedBlockCollapsible dt.collapsibleHeader {
    padding: 0 6px 0 22px;
    background: &dtml-backgroundColor; url(treeExpanded.gif) no-repeat 6px 50%;
    cursor: pointer;
}

dl.collapsedBlockCollapsible {
    border: none !important;
    height: 1em;
    width: auto;
}

dl.collapsedBlockCollapsible dt.collapsibleHeader {
    float: none;
    position: static;
    margin: 0;
    padding: 0 0 0 22px;
    line-height: 1em;
    background: transparent url(treeCollapsed.gif) no-repeat 6px 50%;
    cursor: pointer;
}

dl.collapsedInlineCollapsible dd.collapsibleContent,
dl.collapsedBlockCollapsible dd.collapsibleContent {
    display: none;
}

dl.collapsedInlineCollapsible {
    border: none !important;
    height: 1em;
    width: auto;
    display: inline;
}

dl.collapsedInlineCollapsible dt.collapsibleHeader {
    position: static;
    float: none;
    margin: 0;
    padding: 0 0 0 22px;
    line-height: 1em;
    background: transparent url(treeCollapsed.gif) no-repeat 6px 50%;
    cursor: pointer;
    display: inline;
}

/* </dtml-with> (do not remove this either :) */