/*  pg_cnt_present.css — global page content styling layer 
    Base block styling for all content pages 
   'pg_cnt_style' is the workhorse/mainstay, full width div..
    of the content pages
*/
.pg_cnt_style {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  color: rgb(34, 38, 59);
  background-color: #ececee;
  border: 0.15em solid #4a4a4a;
  border-radius: 0.666em;
  box-shadow: 0.111em -0.055em 0.666em #6d7592;
  margin: 1em;
  padding: 1.25em;
}

.example_wrap {
display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  color: rgb(34, 38, 59);
  background-color: #ececee;
  border: 0.15em solid #4a4a4a;
  border-radius: 0.666em;
  box-shadow: 0.111em -0.055em 0.666em #6d7592;
  margin: 1em;
  padding: 0.5em;
}

.example_wrap ul {
  list-style-type: decimal;
  margin: 0.5em 0 0.5em 2em;
  padding:0.5em;
}

.example_wrap p{
margin:0.5em 0;
padding:0;
}


#tut_pg_intro{
  margin: 1em;
  padding:0 0 0 0.5em; 
}
.h3_dt_anchors{
  color: #3c63c3;
  margin:0;
  padding:0;
}

.pg_cnt_style p{
line-height:1.25em; 
margin: 0.125em 0;
padding:0; 
}

.tut_pg_intro ul{
list-style:none;    
}

#pg_cnt_dllist {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin: 1em;
  padding:0;
}

#pg_cnt_dllist dl {
  background-color: #ececee;
  border: 0.125em solid #4a4a4a;
  border-radius: 0.666em;
  box-shadow: 0.085em -0.035em 0.5em rgba(109, 117, 146, 0.5);
  margin: 0.25em 0;
  padding: 0.25em 0.25em 0.75em 0.25em;
}

#pg_cnt_dllist dl dt {
  font-weight:600;
  background-color: #f1e0e0;
  border: 0.125em solid #f5d7d7;
  border-radius: 0.5em;
  box-shadow: 0.085em -0.035em 0.5em rgba(191, 174, 174, 0.3);
  margin: 0.85em 0.25em;
  padding:0.5em;
}



#pg_btm_nav {
  width: 100%;
  background: #c2c2c2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: flex-start;
  box-sizing: border-box;
  border-radius: 1em;
  margin: 0.25em 0;
  padding: 0.5em;
}
#pg_btm_nav ul {
  width: 100%;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding: 0;
  margin: 0;
}
#pg_btm_nav ul li {
  width: 30%;
  font-size:0.875em;
  border-radius: 0.5em;
  border: 0.062em solid rgb(10, 102, 82);
  box-sizing: border-box;
  background-color: #d3caca;
  margin: 0.25em 0;
  padding: 0.5em 0.5em 0.5em 0.5em;
}
#pg_btm_nav ul li:hover {
  color: purple;
  background-color: #E7DFE7;
}
#pg_btm_nav a {
  color: #640000;
  text-decoration:none;
  display: inline-block;
  margin:0 0 0 0.25em;
  padding:0;
}
#pg_btm_nav a:hover { 
  color: #da1515;
  text-decoration:underline;
}


/* Responsive collapse */
@media (max-width: 600px) {
  #pg_btm_nav ul li {
    width: 100%;
  }
}


/*  This is a 'span' class more tan a 'dl dd'  */
.curly_brace_left {
  color: #a30a0a;
  font-size:1.1em;
  background: url(../imgs/icons/curly_brace_left.svg)no-repeat center left;
  background-position:center right -0.75em;
  padding-left: 2em; /* Adjust padding to make space for the icon */
  background-size:2em;
  margin: 0 0 0 1em;
padding: 0.4em 1.75em 0.4em 0.5em;
  }
  .curly_brace_lft-lrg {
    color: #a30a0a;
    font-size:1.1em;
    background: url(../imgs/icons/curly_brace_left.svg)no-repeat center left;
    background-position:center right -0.75em;
    padding-left: 2em; /* Adjust padding to make space for the icon */
    background-size:2.15em;
    margin: 0;
  padding: 0.5em 1.75em 0.5em 0.5em;
    }  
h2.lft_curly_lrg {
color: #3c63c3; 
border-left: 0.065em solid rgb(146, 157, 185);
border-top: 0.065em solid rgb(146, 157, 185);
border-radius: 0.333em 0 0 0;
margin:0;
padding: 0.75em 0.75em 0.75em 0.25em;
}


  .default_bullet {
    border-left: 0.065em solid rgb(146, 157, 185);
    border-top: 0.065em solid rgb(146, 157, 185);
    border-radius: 0.333em 0 0 0;
    background:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="0.5em" height="0.5em" viewBox="0 0 12 12"><rect x="1" y="1" width="10" height="10" stroke="rgb(7, 41, 127)" stroke-width="0.125em" fill="none"/></svg>') no-repeat center left; 
    background-size: 0.5em;
    background-position: 0.25em center;
    padding: 0.5em 0.125em 0.275em 1.5em;
    margin: 0.25em 0.125em 0.5em 0.5em;
  }

  /*   NEW STYLES  TO BE PUSHED UP HILL */
  .square_bullet {
    background:  url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="0.5em" height="0.5em" viewBox="0 0 12 12"><rect x="1" y="1" width="10" height="10" stroke="rgb(7, 41, 127)" stroke-width="0.125em" fill="none"/></svg>') no-repeat center left; 
    background-size: 0.5em;
    background-position: 0.25em center;
    padding: 0.25em 0.15em 0.25em 1.25em;
    margin: 0.25em 0.125em 0.5em 0.15em;
  }


  .circle_bullet {
    color:rgb(28, 50, 107);
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><circle cx="6" cy="6" r="5" stroke="black" stroke-width="2" fill="none"/></svg>') no-repeat center left;
    background-position: 0.25em center;
    background-size: 0.5em;
    margin:0 0.25em 0.125em 1em;
    padding:0 0.125em 0.75em 1.5em;
  }
  .no_bullet{
    color:rgb(30, 50, 100);
    margin:0 0.25em 0.125em 1.75em;
    padding:0 0.125em 0.75em 0;
  } 
  
 /*  this is the anchor on page anchor link/h3's */ 
.h3_dt_anchors{
color: #3c63c3; 
font-size:0.85em;
margin:0.45em 0 0.075em 0.25em;
padding:0;
}

pre {
display: inline;
}

/* HTML tags in inline content */
.hi_ltred {
  color: #914141;
  margin: 0;
  padding: 0.25em 0.125em 0.25em 0.25em;
}
.hi_drkred {
  color: #771111;
  margin: 0;
  padding: 0.25em 0.125em 0.25em 0.25em;
}

/* CSS-style comments */
.hi_ltgrn {
  color: #197c45;
  margin: 0;
  padding: 0.35em;
}
/* CSS properties/keywords */
.hi_ltblu {
  color: #3c63c3;
  margin: 0;
  padding: 0.25em;
}

.hi_drkblu {
  color: #271daa;
  margin: 0;
  padding: 0.35em;
}


/*  generic no bullets list class */
.gen_no_bullets{
list-style:none;
margin:0;
padding:0;  
}


/* Our subdir (tutorials, contests etc) link list */
/* ul's are styled to minic toggled_divs.css */
.ul_navlinks {
  width: 100%;
  list-style-type: none;
  background-color: #c2c2c2;
  border-radius: 0.75em;
  margin: 0;
  padding: 0.5em;
}

.ul_navlinks li {
  font-size: 1em;
  text-decoration: none;
  background-color: #d3caca;
  border-radius: 0.25em;
  margin: 0.5em 0;
  padding: 0.625em 0;
  border: 0.062em solid rgb(10, 102, 82);
}

.ul_navlinks li:hover {
  background: #E7DFE7;
}

.ul_navlinks a {
  display: block;
  text-decoration: none;
  color: #640000;
  background: url(../imgs/icons/garrow.gif) 0.375em 0.375em no-repeat;
  margin: 0;
  padding: 0em 0em 0em 1.125em;
}

.ul_navlinks a:hover {
  color: #000;
  background: url(../imgs/icons/rarrow.gif) 0.375em 0.375em no-repeat;
  background-color: #E7DFE7;
  margin: 0;
  padding: 0em 0em 0em 1.125em;
}