/* For these styles, we use REM units instead of EM,
 *  because EM change with the different Heading elements font sizes.
 *  REM is the font size of the root HTML element, so it does not change
 *  when used for other elements, such as H1, H2, ....
 */
main section.cls-ale-class             ,
main section.cls-embed-video           {
  border          : 0.2rem solid #607523;
  border-radius   : 0.5rem;
  margin          : 0.2rem -0.2rem;
  padding         : 1.0rem;
  padding-bottom  : 0;
}
/* Make the video container DIV (without any class) extend into the padding of the section
 * NB: the negative margin matches the padding of the section
 */
 main section.cls-embed-video div  {
  margin          : 0 -1.0rem;
}
/* The IFRAME element get surrounded by a DIV.fluid-width-video-wrapper
 *  We don't want to give it a negative margin, so we set it specifically
 */
main section.cls-embed-video div.fluid-width-video-wrapper  {
  margin          : 0;
}




main section.cls-ale-class   > h2:first-child  ,
main section.cls-ale-class   > h3:first-child  ,
main section.cls-ale-class   > h4:first-child  ,
main section.cls-embed-video > h2:first-child  ,
main section.cls-embed-video > h3:first-child  ,
main section.cls-embed-video > h4:first-child  {
  background-color  : #dbe8b5;
  border-radius     : 0.5rem;
  margin            : -1.0rem;
  margin-bottom     : 0;
  padding           : 1.0rem;
  padding-bottom    : 0;
}
main section.cls-ale-class   p.cls-info ,
main section.cls-embed-video p.cls-info {
  border            : 2px solid #dbe8b5;
  padding           : 0.4rem;
}