body {
	color: #000;
    background-color: #ece0c6;
	font-size: medium;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-style: normal;
}

/* Container for the note */
.cssNote {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Headings */
.cssNote h2 {
    font-size: 24px;
    margin-bottom: 15px;
    color: #444;
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}

/* Lists */
.cssNote ul, .cssNote ol {
    margin-left: 20px;
    margin-bottom: 20px;
}

.cssNote ul li, .cssNote ol li {
    margin-bottom: 10px;
}

.cssNote ul li {
    list-style-type: disc;
}

.cssNote ol li {
    list-style-type: decimal;
}

/* Nested Lists */
.cssNote ul ul, .cssNote ol ul {
    margin-left: 20px;
    margin-top: 10px;
}

.cssNote ul ul li {
    list-style-type: circle;
}

/* Strong text within lists */
.cssNote ol li strong {
    color: #000;
    font-weight: bold;
}

/* Responsive Design */
@media (max-width: 768px) {
    .cssNote {
        padding: 15px;
    }

    .cssNote h2 {
        font-size: 22px;
    }

    .cssNote ul, .cssNote ol {
        margin-left: 15px;
    }
}

@media (max-width: 480px) {
    .cssNote {
        padding: 10px;
    }

    .cssNote h2 {
        font-size: 20px;
    }

    .cssNote ul, .cssNote ol {
        margin-left: 10px;
    }
}

.cssText {
	font-size: smaller;
}

.cssWarning {
color: #ff0000;
}

.cssSuccess {
color: #008000;
}


img.floatLeft { 
    float: left; 
    margin: 4px; 
}

img.floatRight { 
    float: right; 
    margin: 4px; 
}


.cssLink {
  padding: 4px;
  margin: 8px;
}

.cssLink ul {
  padding: 4px;
  margin: 8px;
}

.cssLink li {
  padding: 4px;
  margin: 2px;
}


div.floatLeft { 
    float: left; 
    margin: 4px; 
}

div.floatRight { 
    float: right; 
    margin: 4px; 
}

.btnBlue {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-weight: bold;
color: #FFFFFF;
background-color:navy;
width: auto;
height: auto;
border: 1px solid #CCCCCC;
padding-top: 4px;
padding-bottom: 4px;
padding-right: 6px;
padding-left: 6px;
text-decoration:none;
}

.cssWork {
    display : inline;
	font-size: smaller;
}

.cssQuizKey{
  border: 1px solid #999;
  overflow: auto;
  background: #FFFFDD;
  padding: 12px;
  margin: 1em 7px 1em 7px;
}

.cssQuizKey pre {
  margin: 0px;
  padding: 0px;
}

.cssQuizKeyHide{
 display : none;
}

.frame-style-article {
	background-color	:	#7190e0;
	border				:	1px #0000FF solid;
	padding				:	2px;
}

.container-style {
	background-color	:	White; 
	border				:	1px #0000FF solid;
	padding-top			:	5px;
	padding-right		:	5px;
	padding-left		:	5px;
	padding-bottom		:	5px;
	overflow			:	Auto;
	overflow-x			:	Auto;
	overflow-y			:	Auto;
}

.pageTitle {
	color				:	White;
	font-size			:	11pt;
	font-weight			:   bold;
	padding-left		:	5px;
	padding-top			:	2px;
	padding-bottom		:	2px;
}

.pageHeader {
	font-weight			:	bold;
	font-size			:	13pt;
	color				:	#022873;
}


pre.script {
	font-size			:	9pt;
	padding				:	10px;
	background-color	:	#f7f7e6;
	border-style		:	dashed;
	border-width		:	1px;
}

div.script {
	font-size			:	9pt;
	padding				:	2px;
	background-color	:	#f7f7e6;
	border-style		:	dashed;
	border-width		:	1px;
}


.imageLink a:hover, a:active { outline:0; }

.button {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border: 1px solid #fff;
background-color: transparent;
font-family: T6, "Gotham SSm A", "Gotham SSm B", Arial, sans-serif;
font-weight: 400;
font-size: 1.4rem;
color: #fff;
text-decoration: none;
text-transform: uppercase;
display: inline-block;
text-align: center;
padding: 10px 20px;
min-width: 133px;
}

.button:hover, .button:active {
background-color: #fff;
color: #353535;
text-decoration: none; }

.button.blue-button {
min-width: 180px;
background-color: #008ca1;
border: none; }

.button.blue-button:hover, .button.blue-button:active {
  background-color: #40a9b9;
  color: #fff; }

.button.green-button {
background-color: #799d3e;
border: none; }

.button.green-button:hover, .button.green-button:active {
  background-color: #8dbd3e;
  color: #fff; }
.button.disabled {
background-color: #d4d4d4;
cursor: default; }
.button.disabled:hover, .button.disabled:active {
  background-color: #d4d4d4; }


/* Styles for Navigation */

.nav-container { 
    width:420px; 
    overflow:auto;
	background-color:#FFEEDD;
	border: 1px solid #FF8855;
	padding: 5px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
                          
.nav-container a { outline:none; }
                          
.nav-list { list-style: none; padding:0; margin:0; font-family:Georgia, Times, serif; font-size:15px; }
.nav-list li {  }
.nav-list ul { list-style: none; padding:0; margin:0; }
.nav-list ul li {  }
.nav-list ul li a { display:block; text-decoration:none; color:#000000; line-height:30px;
	                border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#CCCCCC; padding-left:10px; cursor:pointer; }
.nav-list ul li a:hover { color:#FFFFFF; background-image:url(https://www.bangtech.com/share/mm/web/hover.png); background-repeat:repeat-x; }
.nav-list ul li a strong { margin-right:10px; }

.nav-indicator { line-height:20px; background-image:url(https://www.bangtech.com/share/mm/web/nav-indicator-bg.png); background-repeat:repeat-x; color:#FFFFFF; text-indent:20px; }

.nav-arrow
{
 float:right;
}

/* accordion */

.accordion{
  clear:both;
  margin-top:21px
}

@media screen and (max-width: 767px){
  .accordion{
    margin:20px -13px 30px
  }
}

.accordion .accordion__panel .accordion__panel__title{
  font-family:T3,"Gotham SSm A","Gotham SSm B",Arial,sans-serif;
  font-weight:300;
  font-size:1.8rem;
  color:#866a2d;
  min-height:50px;
  padding:12px 30px 12px 15px;
  margin:0;
  border:solid #efefef;
  border-width:1px 0;
  background-color:#fcfcfc;
  cursor:pointer;
  position:relative
}

.accordion .accordion__panel .accordion__panel__title a{
  display:none
}

.accordion .accordion__panel .arrow{
  background-image:url("https://bangtech.com/share/sprites/ui.png");
  background-position:-1063px -75px;
  width:9px;
  height:6px;
  display:inline-block;
  position:absolute;
  top:21px;
  right:15px
}

.accordion .accordion__panel .accordion__panel__content{
  display:none
}

.accordion .accordion__panel.panel-expanded .accordion__panel__title a{
  font-family:T9,"Gotham SSm A","Gotham SSm B",Arial,sans-serif;
  font-weight:400;
  font-size:1.2rem;
  color:#b50a47;
  font-size:1.4rem;
  display:inline-block;
  margin-left:10px
}

.accordion .accordion__panel.panel-expanded .arrow{
  background-image:url("https://bangtech.com/share/sprites/ui.png");
  background-position:-1039px -96px;
  width:9px;
  height:6px
}

.accordion .accordion__panel.panel-expanded .accordion__panel__content{
  display:block
}




.cssVideo {
  display:flex; 
  background :#E9ECCF;
  padding:6px 0;
}
.cssVideo ul {
 display:flex; 
 flex-wrap: wrap;
 margin :0 3px;
}
.cssVideo ul li{float:left;margin:0 6px;display:inline}
.cssVideo ul li a{line-height:2.5;text-align:center;font-size:12px;width:200px;display:block}
.cssVideo ul li .cssPic{height:154px;position:relative;border:1px solid #ccc}
.cssVideo ul li .cssPic:hover{border:1px solid #45a909}
.cssVideo ul li img{height:148px;width:192px;margin:3px}
.cssVideo a{text-decoration:none}
.cssVideo a:hover{text-decoration:underline}

@media (max-width: 767px) {
    .cssVideo {
       flex-direction: column;
    }
}


.headerInner {
  text-align:center
}

.headerInner h1 {
  color: var(--primary-color);
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .headerInner {
        margin: 1rem auto 0;
        padding: 1rem;
    }
    
    .headerInner h1 {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .headerInner h1 {
        font-size: 1.2rem;
    }
}


.cssRecipe {
    max-width: 800px;
    margin: 2rem auto;
    padding: 2rem;
    font-family: 'Segoe UI', system-ui, sans-serif;
    line-height: 1.5;
    color: #444;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.cssRecipe h3 {
    color: #2a5934;
    margin: 1.2rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #e0e0e0;
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: -0.02em;
}

.cssRecipe ul {
    list-style: none;
    padding-left: 1rem;
    margin: 0.8rem 0;
}

.cssRecipe ul li {
    position: relative;
    padding-left: 1rem;
    margin: 0.4rem 0;
}

.cssRecipe ul li::before {
    content: "•";
    color: #4a9c64;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.1em;
}

/* For nested lists in instructions */
.cssRecipe ol ul {
    padding-left: 1.5rem;
    margin: 0.3rem 0;
}

.cssRecipe ol ul li::before {
    content: "•";
    color: #7aa884;
    left: -1.5rem;
    font-size: 0.9em;
    top: 0;
}

.cssRecipe ol li::before {
    background: #2a5934;
    color: white;
    font-weight: 600;
    width: 1.6em;
    height: 1.6em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 0.8rem;
    margin-left: -1.5rem;
    font-size: 0.9em;
}

/* Ensure all list-style-types are removed */
.cssRecipe ul, 
.cssRecipe ol {
    list-style-type: none;
}

/* Prep/Cook Time Highlight */
.cssOverview {
    background: #f8fff9;
    padding: 0.8rem;
    border-radius: 8px;
    border: 1px solid #e0efe3;
    font-size: 0.9rem;
    color: #4a6b54;
    margin: 1rem 0;
}

/* Link Styling */
.cssRecipe a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding: 0.7rem 1.5rem;
    background: #2a5934;
    color: white !important;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: transform 0.2s, box-shadow 0.2s;
}

.cssRecipe a:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(42,89,52,0.2);
}