/* ===================================================================================================
* WARNING – This file is part of the base implementation for WebMaker, so it should not be edited or changed for any project. 
* These files are replaced if a project is re-imported to the WebMaker Studio or migrated to a new version of the product. 
* For guidance on ‘How do I override or clone Hyfinity webapp files such as CSS & javascript?’, please read the following relevant FAQ entry: 
* http://www.hyfinity.net/faq/index.php?solution_id=1113
==================================================================================================== */
/*
 * CSS styles for the collapsible content composite control
 */
 
/* Enable Toggling of an Image Arrow on and off to show/hide a group */
.collapsibleSection .toggleLabelBackground
{
    width: 100%;
    padding-top: 0px;
    margin: 0px;
    display: block;
}
.collapsibleSection .formElement
{
    padding-left: 0px !important;
}
.collapsibleSection .formElement A
{
    display: inline-block;
	margin: 2px 0px 2px 0px !important;
}
.collapsibleSection .collapsibleContent .formElement, .collapsibleSection .collapsedContent .formElement 
{
    padding-left: 3px !important;
}
.collapsibleSection A.toggleVisible, .collapsibleSection A.toggleHidden
{
    /* vertical-align: middle; */
    font-size: 12px;
    font-weight: bold;
    color: #004677;
}
A.toggleVisible
{
    display: inline-block;
    background-image: url(../images/collapsiblecontent/arrowHidden.gif) !IMPORTANT;
    background-position: left;
    background-repeat: no-repeat;
    text-decoration: none;
    padding: 0px 0px 0px 25px;
    height : 19px;
    vertical-align: middle;
}
A.toggleVisible:hover
{
    background-image: url(../images/collapsiblecontent/arrowHiddenHover.gif) !IMPORTANT;
}
A.toggleHidden
{
    display: inline-block;
    background-image: url(../images/collapsiblecontent/arrowVisible.gif);
    background-position: left;
    background-repeat: no-repeat;
    text-decoration: none;
    padding: 0px 0px 0px 25px;
    height : 19px;
    vertical-align: middle;
}
A.toggleHidden:hover
{
    background-image: url(../images/collapsiblecontent/arrowVisibleHover.gif);
}
.collapsibleSection A.toggleVisible SPAN, .collapsibleSection A.toggleHidden SPAN
{
	display: inline-block;
    padding-top: 1px !IMPORTANT; 
}