div.code { font-family: courier; background:  #bcd3d9; padding: 2em; 
    border: solid 6px  #5d0d0d;	   
    border-color:  #daebef #3b3f40 /*#a8b8bc*/ #767b7c #b2c2c6;
    cursor: pointer;
}
div.code-selected {background: #8da0a5;    border-color: #475457 #b2c2c6 #aaced7 /*#daebef*/  #5b6d72  ;
     }
div.code-before-protection div.code { background: #d8ddbe;  border-color: #b6ba9e;  
    cursor: default;  }

div.code-before-protection div.code-selected { 
    border: solid 0.5em  #5d0d0d;	   
    border-color:  black #7d2d2d #9d4242 #300000  ;

    }

div.mode-item { padding-bottom-zzz: 3em; }


div.code-separator { text-align: center; padding-top: 1em;}
div.code-separator hr { display: none; }
div.code-type-label { text-align: center; font-family: arial; color: #997777; }


/*div.code:hover { background: #6d1515;     } */



span.details-btn { font-size: 70%; font-weight: bold; 
    font-family: verdana; /*background: #770000;*/
    padding-left: 2em; border: solid 1px #440000;}


div.comment { padding: 0.4em; font-size: 90%; padding-left: 2em; } 

div.mode-item hr { width: 80%; }
div.code-after-protection div.mode-title { padding-left: 4em;}

div.mode-item  { border: solid 1px #aa6666; border-style: dashed; 
    padding: 1em; spacing: 1em; margin-bottom: 2em;
    }

/* the triangle pointing upwards or downwards */
span.showhide {  cursor: pointer;  }



#site-samples div.code { font-family: courier; background: #fdcdcd; padding: 2em; 
    border: solid 0.5em  #ed8d8d; text-align: left;	   
    cursor: default;
}

#site-samples div.code-before-protection div.code { background: #fd9d9d;  border-color: #7d2d2d;  
    cursor: default; text-align: left; }


#site-samples hr { margin: 5em; background-color: red; }

#site-samples div.mode { background: #grey; padding-top: 1em; padding-bottom: 0.7em;
    padding-left:  2em; padding-right: 1em;      width: auto; }


#site-samples span.whentouse,  #site-samples span.note, #site-samples span.changing
{ font-size: 80%; font-weight: bold; }