@charset "utf-8";
/* CSS Document */


/*
//----------------------------------------------------------------------------------
Side menu accordion CSS include

//----------------------------------------------------------------------------------
*/


	
/*


Old methods that were in the HTML file
//-------------------------------------------------------------------------------
<!-- Include the FontAwesome framework so that bootstrap icons/fonts can be used-->
<!-- Instructions: http://fortawesome.github.io/Font-Awesome/3.2.1/get-started/-->



<!--Font Awesome - old method - note that I abandoned this route for the route directly below.
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css" rel="stylesheet">
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet"> 
<link rel="stylesheet" href="assets/blog/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/blog/css/font-awesome.min.css">		
-->



<!--This is the technique I ended up using instead of the methods above-->
<!--http://fortawesome.github.io/Font-Awesome/get-started/-->

//-------------------------------------------------------------------------------


	This is how the icons can be used as fonts from bootstrap - making the icons a BREEZE!
	http://fortawesome.github.io/Font-Awesome/

	JTL - Cheat sheet for icons and their codes
	http://astronautweb.co/snippet/font-awesome/
	

However, hitting some implmentation problems
Here is another route that is working better:

http://marcoceppi.github.io/bootstrap-glyphicons/


Another cheat sheet
http://fortawesome.github.io/Font-Awesome/cheatsheet/


How to use fontawesome with varying sizes
http://fortawesome.github.io/Font-Awesome/examples/

*/


 
#leftMenu, #rightMenu, .accordion-group {
    margin-bottom: 0px;
    border:0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
} 
   

.accordion-heading {
    /*height: 34px;*/
    border-top: 1px solid #717171; /* inner stroke */
    border-bottom: 1px solid #5A5A5A; /* inner stroke */
    /*background-color: #353535;*/ /* layer fill content */ /* JTL - Removed so it could be dynamic from the database*/
    background-image: -moz-linear-gradient(90deg, #595b59 0%, #616161 100%); /* gradient overlay */
    background-image: -o-linear-gradient(90deg, #595b59 0%, #616161 100%); /* gradient overlay */
    background-image: -webkit-linear-gradient(90deg, #595b59 0%, #616161 100%); /* gradient overlay */
    background-image: linear-gradient(90deg, #595b59 0%, #616161 100%); /* gradient overlay */
    list-style-type:none;
	
}  

.accordion-heading  a{  
   /* color: #cbcbcb;*/ /* text color */  /* JTL - Removed so it could be dynamic from the database*/
    text-shadow: 0 1px 0 #3b3b3b; /* drop shadow */
    text-decoration:none;
    font-weight:bold;  
}

.accordion-heading,  a:hover{  
    /*color:#ccc */    
}

#leftMenu .accordion-heading .active {
    width: 182px;
    /*height: 34px;*/
    border: 1px solid #5b5b5b; /* inner stroke */
   /* background-color: #353535;*/ /* layer fill content */  /* JTL - Removed so it could be dynamic from the database*/
    background-image: -moz-linear-gradient(90deg, #4b4b4b 0%, #555 100%); /* gradient overlay */
    background-image: -o-linear-gradient(90deg, #4b4b4b 0%, #555 100%); /* gradient overlay */
    background-image: -webkit-linear-gradient(90deg, #4b4b4b 0%, #555 100%); /* gradient overlay */
    background-image: linear-gradient(90deg, #4b4b4b 0%, #555 100%); /* gradient overlay */
} 
 
 
 
 
 
/*@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');
@import url('//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css');
*/

.panel-heading {
    cursor: pointer;
}

/* CSS Method for adding Font Awesome Chevron Icons */

/*.panel-heading.collapsed .accordion-toggle:after {*/  /*JTL original before removing on sub module items*/



 .panel-title:after {
    /* symbol for "opening" panels */
    font-family:'FontAwesome';
    content:"\f01a";		/*JTL was \f077*/
    float: right;
    color: inherit;
}




 /*

	This is how the icons can be used as fonts from bootstrap - making the icons a BREEZE!
	http://fortawesome.github.io/Font-Awesome/

	JTL - Cheat sheet for icons and their codes
	http://astronautweb.co/snippet/font-awesome/
	*/

 
  .accordion-group:after {
    /* symbol for "opening" panels */
    font-family:'FontAwesome';
   /* content:"\f077";*/		/*JTL was \f077*/
    float: left;
    color: inherit;
}

/* Lesson-completion checkmark toggle (ticket #46207219 / #46207221) */
.lesson-check-toggle {
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 11px;
    line-height: 1.4;
    border: 1px solid #9E9D9D;
    border-radius: 3px;
    background-color: #FFFFFF;
    color: #4A4949;
    cursor: pointer;
}

.lesson-check-toggle.lesson-complete {
    border-color: #2e7d32;
    background-color: #eaf6ea;
    color: #2e7d32;
}

.lesson-check-toggle [data-lesson-check-icon] {
    color: #2e7d32;
    font-weight: bold;
}

/* Menu-row variant (ticket #46207220 UI follow-up, Josh's 2026-08-31 feedback): the
   checkbox sits inline before the title, one row, instead of a pill below it. Method 1
   (the lesson-body button above) keeps its original look untouched. */
.lesson-menu-item {
    display: flex;
    align-items: center;
}

.lesson-menu-item a {
    flex: 1;
    min-width: 0;
}

.lesson-check-toggle--menu {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin: 0 8px 0 0;
    padding: 0;
    border: 2px solid #9E9D9D;
    border-radius: 3px;
    background-color: #FFFFFF;
    font-size: 13px;
    line-height: 1;
}

.lesson-check-toggle.lesson-check-toggle--menu.lesson-complete {
    border-color: #2e7d32;
    background-color: #2e7d32;
}

.lesson-check-toggle--menu [data-lesson-check-icon] {
    line-height: 1;
}

.lesson-check-toggle--menu.lesson-complete [data-lesson-check-icon] {
    color: #FFFFFF;
    font-weight: bold;
}

/* Class header (ticket #46114613). This rule exists to beat the unscoped
   "header { display: flex }" in cms/video_manager/videomanager.css - #overview
   outranks a bare tag selector regardless of load order.

   Correction to what this comment used to claim: docs.css is NOT "only loaded on
   some content-serving files". index.php:735 links it unconditionally, confirmed
   live against production. So docs.css's .jumbotron is always in the cascade, and
   because this selector is (1,1,1) against its (0,1,0) we override it everywhere -
   including inside its media queries, which add no specificity of their own.

   Consequence: every property declared here must match docs.css at EVERY
   breakpoint, or it silently changes geometry. box-sizing:border-box did exactly
   that - it pulled the padding inside min-height, so the full-width image header
   rendered 150px instead of 190px on desktop and 150px instead of 230px on mobile.
   That is the "full width image lost its fixed height" Josh reported 2026-09-15.

   min-height stays: the color-only header (no image) has no inline min-height, so
   this is the only thing giving that band any size. */
header#overview.jumbotron {
    display: block;
    width: auto;
    min-height: 150px;
    padding: 20px 20px;    /* matches css/docs.css:93 */
    color: #FFFFFF;
    text-align: center;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

/* Below 768px, bootstrap-responsive.css puts 20px of side padding on <body>, so a
   banner that only fills its containing block stops 20px short of each screen edge.
   Bleed back out over that padding to stay edge-to-edge.

   Why "width: auto" above and not "width: 100%": 100% resolves against the body's
   *content* box (viewport - 40px), which together with these negative margins
   over-constrains the box - the browser then discards margin-right per CSS 2.1
   10.3.3, leaving the banner flush left and exactly 40px short on the right. That
   was the mobile bug reported on this ticket 2026-09-08. "auto" lets the margins
   widen the box instead of fighting a fixed width.

   These values mirror css/docs.css's mobile .jumbotron rule (docs.css:963-968)
   deliberately. The padding is not optional duplication: the base rule above is
   (1,1,1) and outranks docs.css's (0,1,0) even inside this media query, so without
   restating 40px here the mobile header would inherit the desktop 20px and come out
   40px short. Identical values to docs.css, so no conflict when both load.

   margin-top is intentionally not declared - we never set it, so docs.css's
   -20px navbar offset falls through at both this breakpoint and 768-979px. */
@media (max-width: 767px) {
    header#overview.jumbotron {
        padding: 40px 20px;    /* matches css/docs.css:964 - see note above */
        margin-left: -20px;
        margin-right: -20px;
    }
}