/*
  Many thanks to Ian Zamojc izamojc(at)zamtools.com for making
  suggestions to improbve the site look and feel.
*/


html { 
/*  padding:0px;
  margin:0px; */
}

body {
  background-color: #fff;
  font-family: Verdana, Arial, SunSans-Regular, Sans-Serif;
  color: #000;  
  padding: 0px;
  margin: 0px;
  counter-reset: example;  /* Create an example counter scope */
}

.footer {
    color: #564b47;
    background-color: #fff;
    padding:0px;
    border-top:  1px solid #CCCCCC;
    margin-top: 3ex;
    font-size: smaller;
}

#job img {
   border:1px solid #DDDDDD;
}

#job:hover img {
   border:1px solid #8888EE;
}

p.menu {
 padding-top: 0px;
 padding-bottom: 0px; 
 margin-top: 0px;
 margin-bottom: 0px;
 font-size: smaller;
}

#container {
    display: grid;
    grid-template-columns: 15em 1fr 15em;
    grid-template-areas: "header header  header"
                         "left   content right";
    max-width: 90rem;
    margin-left: 1rem;
    #  margin-right: auto;

}


#header {
    grid-column-start: 1;
    grid-column-end: 4;    
}

#left {
    grid-area: left;    
    margin: 4px 0px 0px 4px; 
    padding: 0px;
    font-size: 80%;
    background-color: #ffffff;
}

#content {
    grid-area: content;
    max-width: 60rem;
    margin: 0px 1em 0px 1em;
    padding: 0px;
    line-height: 130%;
    background-color: #ffffff;  
}

#right {
    grid-area: right;    
    color: #564b47;
    margin: 4px 4px 0px 0px; 
    padding: 0px;
    background-color: #ffffff;    
    #border: 1px solid #cccccc;
    font-size: 80%;
}

#headerLine {
  background-color:#FFD0A0;
  border:1px solid #CCCCCC;
  font-size:small;
  margin:0 4px;
  padding:3px 10px;
}


a { 
 color: #4183c4; 
 background-color:transparent;
 text-decoration: none; 
}

.menuGroup {
  border: 1px solid #cccccc;  
  background-color: #fff8e8;
  color: #564b47;
  border: 1px solid #cccccc;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

#left a, #right a {
  display: block; 
  margin: 0px; 
  padding: 2px; 
  border: solid 1px #fff8e8; 
  color: #0066cc; 
  text-decoration: none;
}

p.menu_header {
  margin: 0px; 
  padding: 2px;
  font-weight: normal; 
  background-color: #ffd0a0; 
  border-top: solid 1px #CCCCCC;
  border-bottom: solid 1px #CCCCCC;
}

#left a:hover, #right a:hover {
  border: solid 1px #FFFFFF; 
  background-color: #3333CC; 
  color: #ffffff;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.pub {
  text-align: center;
}

#left .pub a:hover {
  background-color: transparent;
  border: solid 0px #FFFFFF;
}

#left img {
	border: none;
}

#left div.jobadd {
  font-size: 140%;
  color: #fff;
  margin: 0px;
  padding: 0px;

  text-align: center;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;

  background-image: -ms-linear-gradient(bottom right, #FFBB55 0%, #FF8822 100%);
  background-image: -moz-linear-gradient(bottom right, #FFBB55 0%, #FF8822 100%);
  background-image: -o-linear-gradient(bottom right, #FFBB55 0%, #FF8822 100%);
  background-image: -webkit-gradient(linear, right bottom, left top, color-stop(0, #FFBB55), color-stop(1, #FF8822));
  background-image: -webkit-linear-gradient(bottom right, #FFBB55 0%, #FF8822 100%);
  background-image: linear-gradient(to top left, #FFBB55 0%, #FF8822 100%);
}

#left div.jobadd a, div.jobadd a:hover {
  background-color: transparent;
  color: #fff;
  border-width: 0px;	
}

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



#content img {
	border:none;
	margin-left: auto;
	margin-right: auto;
        
	display: block;
}

span.asGroovy {
   background: #fff; 
   color: #0079C5;   
   font-family: "Comic Sans MS", sans-serif;
   white-space: nowrap;
   font-size: 80%;

   border-top:    2px solid #DDD;  
   border-left:   2px solid #DDD;  
   border-right:  2px solid #888;  
   border-bottom: 2px solid #888;    
   padding: 0px 1em 0px 1em;
   margin:  -4px 4px 0 4px; 
   float: right;
}
 
span.asGroovy:hover {
   background: #E0E0EF;
   cursor: pointer;
}

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

.anchor { display:none; }


h1, h2, h3, h4 {
    color: #505050;
    padding-top: 0ex; 
    background-color: transparent;
}

h2 {
    font-weight: 900;
    font-size: x-large;
}

h3 {
    font-weight: bold;
    font-size: large;
}

h4 {
    font-weight: bold;
    font-size: medium;
}

h1 .anchor:before {content:url(anchor24.png);}
h2 .anchor:before {content:url(anchor20.png);}
h3 .anchor:before {content:url(anchor16.png);}
h4 .anchor:before {content:url(anchor12.png);}
td .anchor:before {content:url(anchor12.png);}

h1:hover .anchor { margin-left: -24px; }
h2:hover .anchor { margin-left: -20px; }
h3:hover .anchor { margin-left: -16px; }
h4:hover .anchor { margin-left: -12px; }
td:hover .anchor { margin-left: -12px; }

h1:hover .anchor, 
h2:hover .anchor,  
h3:hover .anchor, 
h4:hover .anchor,
td:hover .anchor {
  display: inline-block;
  text-decoration: none;
}


div.source {
    margin-top: 1em;
}

.source, .command, .console {
    overflow-x: auto;  
    border-top: 1px solid #DDDDDD;
    border-bottom: 1px solid #DDDDDD;
    background: #f5f5f5;
    font-family: Courier, "MS Courier New", Prestige, monospace;
    padding-left: 1ex;
    white-space: pre;
    font-size: 16px;
}

.source {
  padding-bottom: 0.5ex;
  padding-top: 0.5ex;
}

.command {
  padding-bottom: 0ex;
  padding-top: 0ex;
}

.console {
}

pre {
    overflow-x: auto;
    padding: 0px;
    margin: 0px; 
    background-color:transparent;
    font-family: Courier, Monaco, Monospace;
}

.alignright {
 margin-top: 0; 
 text-align: right;
 font-size: 10px;
}

/* ========== body table ============ */
table.bodyTable {
	padding: 0px;
	margin-left: -2px;
	margin-right: -2px;
}

table.bodyTable th {
	color: white;
	background-color: #bbb;
	font-weight: bold;
}


table.bodyTable td {
  vertical-align: text-top;
  padding-left: 0.5ex;
  padding-bottom: 0.5ex;
}

table.bodyTable.rightAlign tr td {
    text-align: right;
}

/* apply to tr elements of tables which are both bodytable and dark */
table.bodyTable[class="dark"] tr {
	background-color: #ddd;
}

/* table.bodyTable tr.a { 	background-color: #ddd; } */
/* table.bodyTable tr.b {	background-color: #eee; } */
/* table.bodyTable tr.alt {	background-color: #eee;} */

/* we don't want the first p under td to appear indented */
table.bodyTable tr td p:first-child {
  padding-top: 0px;
  margin-top: 0px;
}

.striped tr:nth-child(odd) td {
  background-color: #f9f9f9;
}
.striped td {
  background-color: #f0f0f0;
}
.striped tr:last-child td {
  border-bottom: 2px solid #ddd;
}

td.word {
  text-align: right;
}

/* EOF =============== bodyTable =============== */

/* cosmetics */


.big {
  font-size: 130%;
}


.green {
	color: green;
}

.white_bg {
	background-color: #FFFFFF;
}

.lgray_bg {
	background-color: #EEE;
}

.blue {
	color: blue;	
}

.red {
	color: red;
}

.redBold {
	color: red;
	font-weight: bold;	
}

.greenBold {
	color: green;	
  font-weight: bold;	
}

.code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;    
    background-color: #EEE;
}

.pattern {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;    
    background-color: #DDD;
}

code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    background-color: #EEE;
}
    

.variable {
    font-family: Courier, monospace;
    font-style:italic;  
}



.attr {
	font-family: Courier, monospace;
  font-style:italic; 

}

.option, .prop {
  border-top: 1px dotted #BBBBBB;
  border-bottom: 1px dotted #BBBBBB;
  border-left: 1px dotted #AAAAAA;
  border-right: 1px dotted #AAAAAA;
  padding-left: 2px;
  padding-right: 2px;
  font-family: Arial, sans-serif;
}

/*  background:#FFCC99;	*/
.highlight {
  width: 18em;
  float: right;	
  display: inline;
  font-size: 110%;

  border: 2px solid #711;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  background:#FFE0B0;	
  padding-top: 1ex;
  padding-left: 1ex;
  padding-right: 1ex;
  padding-bottom: 1ex;
  margin-left: 1em;
  margin-right: 0em;
  margin-bottom: 1ex;
}

.quote {
   text-align: right;
  padding-left: 12em;
}

/* --------- numbering --------- */
.autoEx:before {
  counter-increment: example;  /* Add 1 to example */
  content: counter(example)
}


/** ----------- labels -------- */
.label {
  padding: 1px 3px 2px;
  font-size: 9.75px;
  font-weight: bold;
  color: #ffffff;
  text-transform: uppercase;
  white-space: nowrap;
  background-color: #bfbfbf;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.label.notice {
  background-color: #62cffc;
}