/* [row xclass="cls-row-with-label"][column xs="4"]When:  [/column][column xs="6"]Thursday, October 19th[/column][/row]
 *
 * Bootstrap shortcodes renders grids (rows) as --
 *  <div class="row cls-row-with-label">
 *    <div class="col-xs-4">When:  </div>
 *    <div class="col-xs-6">Thursday, October 19th</div>
 *  </div>
 * In case the columns collapse we want to add spaace between the rows.
 * We want the first column (div) to be styled like a label with a relatively fixed width.
 */
 .row.cls-row-with-label {
  margin-top      : 5px;
}
.row.cls-row-with-label div:first-child {
  border-bottom   : 2px solid #607523;
  display         : inline-block;
  margin-left     : 15px;
  min-width       : 8em;
  padding         : 0;
  vertical-align  : top;
  width           : 25%;
}

/**************************/
/* [collapsibles xclass="cls-accordion"]
 * [collapse title="Collapse title" active="true" id="id-xxx"]
 * This is the collapse content.
 * [/collapse]
 * [/collapsibles]
 *
 * Bootstrap shortcodes renders collapsibles (accordions) as --
 *   <div class="panel-group cls-accordion" id="custom-collapse-4">
 *     <div class="panel panel-default">
 *       <div class="panel-heading">
 *         <h4 class="panel-title">
 *           <a class="" data-toggle="collapse" data-parent="#custom-collapse-4" href="#custom-collapse-4-8" data-slimstat="5">Collapse title</a>
 *         </h4>
 *       </div>
 *       <div id="custom-collapse-4-8" class="panel-collapse in">
 *         <div class="panel-body">
 *           <p>This is the collapse content.</p>
 *         </div>
 *       </div>
 *     </div>
 *   </div>
 *
 * we need to redine some of the standard bootstrap styles with more specific selectors
 * to override the standard styles for panels.
 */
.cls-accordion h2 { font-size: 34px;  }
.cls-accordion h3 { font-size: 30px;  }
.cls-accordion h4 { font-size: 26px;  }
.cls-accordion h5 { font-size: 22px;  }
.cls-accordion h6 { font-size: 18px;  }

.cls-accordion .panel-heading { padding: 0;}
.cls-accordion .panel-title > a {
  display           : block;
  padding           : 0.4em 0.6em;
  outline           : none;
  text-decoration   : none;
}
.cls-accordion .panel-title > a.accordion-toggle::before,
.cls-accordion a[data-toggle="collapse"]::before  {
  content:"\e113";
  float             : left;
  font-family       : 'Glyphicons Halflings';
  margin-right      : 1em;
}
.cls-accordion .panel-title > a.accordion-toggle.collapsed::before,
.cls-accordion a.collapsed[data-toggle="collapse"]::before  {
  content           : "\e114";
}

/**************************/
/* [panel type="default" title=true heading="Panel Title" footer="Footer text" xclass="cls-panel"]
 *   This is the panel content.
 * [/panel]
 *
 * Bootstrap shortcodes [with title=true] renders panels as --
 *   <div class="panel panel-default>
 *     <div class="panel-heading">
 *       <h3 class="panel-title">Panel Title</h3>
 *     </div>
 *     <div class="panel-body">
 *       <p>This is the panel content.</p>
 *     </div>
 *     <div class="panel-footer">Footer text</div>
 *   </div>
 *
 * we need to redefine some of the standard bootstrap styles with more specific selectors
 * to override the standard styles for panels.
 * Example: .panel-title {font-size: 18px;} make na h2.panel-title small font-size
 */
.cls-panel h2 { font-size: 34px;  }
.cls-panel h3 { font-size: 30px;  }
.cls-panel h4 { font-size: 26px;  }
.cls-panel h5 { font-size: 22px;  }
.cls-panel h6 { font-size: 18px;  }

/* If the panel-body starts with a heading element, then ignore the top margin of the heading.
 */
.panel-body h2:first-child ,
.panel-body h3:first-child ,
.panel-body h4:first-child ,
.panel-body h5:first-child ,
.panel-body h6:first-child {
    margin-top  : 0;
}




/* For these styles, we are modifying the bootstrap styles for panels for our constructs:
 *  ALE course listing
 *  Embedded videos on Vimeo
 */
 main div.panel.cls-ale-class             ,
 main div.panel.cls-embed-video           {
   border          : 0.2rem solid #607523;
 }

 main div.panel.cls-ale-class    .panel-heading  ,
 main div.panel.cls-embed-video  .panel-heading  {
   background-color  : #dbe8b5;
 }
 /* [panel footer="Footer text" xclass="cls-panel cls-ale-class"]
  *   <h3>Panel Title</h3>
  *   <p>This is the panel content.</p>
  * [/panel]
  * You can choose to use a heading inside the body instead of the panel heading element
  * So we style it to be a panel heading
  *  but only when the div.panel-heading is missing so that div.aneel-body is the first child of div.panel
  * Bootstrap shortcodes renders panels as --
  *   <div class="panel panel-default cls-ale-class">
  *     <div class="panel-body">
  *       <h3>Panel Title</h3>
  *       <p>This is the panel content.</p>
  *     </div>
  *     <div class="panel-footer">Footer text</div>
  *   </div>
  */
 main div.panel.cls-ale-class   .panel-body:first-child > h2:first-child  ,
 main div.panel.cls-ale-class   .panel-body:first-child > h3:first-child  ,
 main div.panel.cls-ale-class   .panel-body:first-child > h4:first-child  ,
 main div.panel.cls-embed-video .panel-body:first-child > h2:first-child  ,
 main div.panel.cls-embed-video .panel-body:first-child > h3:first-child  ,
 main div.panel.cls-embed-video .panel-body:first-child > h4:first-child  {
   background-color  : #dbe8b5;
   border-radius     : 4px;
   margin            : -15px;
   margin-bottom     : 0;
   padding           : 10px 15px;
 }

 /* Make the video container DIV (without any class) extend into the padding of the div.panel
 * NB: the negative margin matches the padding of the div.panel
 */
 main div.panel.cls-embed-video .panel-body div  {
   margin          : 0 -15px -15px;
 }
 /* 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 div.panel.cls-embed-video div.fluid-width-video-wrapper  {
   margin          : 0;
 }


/**************************/
/* Bootstrap shortcodes renders default wells and .panel-heading
 * with light grey background.
 * We add some color when we add our custom class
 *  .cls-well for [well xclass="cls-well"]
 *  .cls-panel for [panel xclass="cls-panel"]
**/
.well.cls-info       {
  background-color  : #e2f5f8;
}
.well.cls-warning       {
  background-color  : #f9dcb7;
}
.well.cls-error       {
  background-color  : #f7c8c8;
}
.panel-default.cls-panel > .panel-heading {
  background-color  : #e2f5f8;
}
/**************************/
/* Well rule
 *  Used for the WELL shortcode
 *  We want it to clear floating images so they don't overlap
 */
 .well                {
  clear     : both;
  margin    : 0.5em;
}


/**************************/
/* Bootstrap shortcodes renders buttons as links,
 * we need to redine some of the standard bootstrap styles with more specific selectors
 * to override the WP theme styles for links.
**/
main a.btn-default {
  color            : #333;
  background-color : #fff;
  border-color     : #ccc;
}
main a.btn-default:hover,
main a.btn-default:focus {
  background-color : #e6e6e6;
  border-color     : #adadad;
}
main a.btn-primary  {
  color            : #fff;
  background-color : #337ab7;
  border-color     : #2e6da4;
}
main a.btn-primary:hover  {
  background-color : #286090;
  border-color     : #204d74;
}
main a.btn-success {
  color            : #fff;
  background-color : #5cb85c;
  border-color     : #4cae4c;
}
main a.btn-success:hover {
  background-color : #449d44;
  border-color     : #398439;
}
main a.btn-info {
  color            : #fff;
  background-color : #5bc0de;
  border-color     : #46b8da;
}
main a.btn-info:hover {
  background-color : #31b0d5;
  border-color     : #269abc;
}
main a.btn-warning {
  color            : #fff;
  background-color : #f0ad4e;
  border-color     : #eea236;
}
main a.btn-warning {
  background-color : #ec971f;
  border-color     : #d58512;
}
main a.btn-danger {
  color            : #fff;
  background-color : #d9534f;
  border-color     : #d43f3a;
}
main a.btn-danger {
  background-color : #c9302c;
  border-color     : #ac2925;
}
main a.btn-link {
  border-color : transparent;
}
main a.btn-link:hover {
  color            : #23527c;
  text-decoration  : underline;
  background-color : transparent;
}

div.panel.cls-panel-access  {
  float       : right;
  max-width   : 50%;
  margin      : 0 1.0em 1.0em;
}
div.panel.cls-panel-access a.btn {
  margin-bottom   : 0.4em;
}