/***************************** HOW TO USE THIS CSS ****************************/
/* This style sheet will  or hide containers.                             */
/* There is a sample to use all style sheets :                                */
/* <div id="blockContainerId" class="[open or closed]" 
                              onClick="toggleContentVisibility(this)" >       */
/*       <div class="toggle"> Title </div>                                    */
/*       <div class="toggleBody" onClick="cancelBubble(event)">body</div>    */
/* </div>                                                                     */
/* Global container is divided in 2 parts :                                   */
/*         1) The header : It is contained in this sample in HTML tag DIV.    */
/*                But the tag could be another HTML element instead of DIV.   */
/*                Values possible are h1, span, ...                           */
/*         2) The content (or body) : It is contained in HTML element div     */
/*                defined with class name toggleBody. This div element       */
/*                invoke method cancelBubble(event) in order to cancel    */
/*                or hide content when user select content.                   */
/******************************************************************************/


/* style for toggle body closed */
.closed .toggleBody
{
	display:none;
}

/* style for toggle body open */
.open .toggleBody                                                                   
{
	display: block;
}

/* display icon for header opened */
.open .toggle{
  display: block;
  background-image: url('/img/designSite/toggle_open.gif');
  background-repeat: no-repeat;
  background-position: 5px center;
}

/* display icon for header closed */
.closed .toggle{
  display: block;
  list-style-image:none;
  background-image: url('/img/designSite/toggle_closed.gif');
  background-repeat: no-repeat;
  background-position: 5px center;
}

/* style for header */
.toggle {
  cursor:pointer; 
  position: relative;
  margin-top : 5px;
  text-indent: 19px; /* 19 px : 5px to the left of toggle picture and to the right, 9 px for toggle picture width */
}


/* margin and padding style for toggle body */
.toggleBody{
      margin-top : 2px;
      margin-bottom : 16px;
      padding : 0px;
}
/* add a top margin in open division */
.open{

   padding-top: 2px;
}

/* add a top margin in closed division */
.closed{
  padding-top: 2px;
}