body {
  background-color: #ffffff;
  color: #000000; 
  max-width: 100ex; 
  text-align: justify;
  margin-left: 5%;
  margin-right: 5%;
  /* margin: 0px; */
}

h1,h2.header,div.footer {
  padding:0.5em;
  color:white;
  background-color:gray;
  clear:left;
}

h1 {
  padding:0.2ex;
  clear: both;
  margin-bottom:1em;
}

h2.header {
  padding:0.2ex;
  clear: both;
}

h3 {
  /*       top   ??? unter left  */
  padding: 0.1em 2em 0em   0.3em;
  border-style: solid;
  border-color: gray;
  color: gray; 
  border-left-width:    1px;
  border-top-width:     1px;
  border-bottom-width:  2px;
  border-right-width:   2px;
  clear: both;
}

h4 { 
  /*       top   ??? unter left  */
  padding: 0em 0em 0em   0em;
  margin:  0em 0em 0em   0em;
  clear: both;
}

.room {
  display: block;
  vertical-align: middle;  
}

.room:before { 
  content: "Office: ";
}

.tel {
  display: block;
  vertical-align: middle;  
}

.tel:before 
{ 
  /*   content: '<IMG SRC="/icons/phone.gif" HEIGHT=30 WIDTH=30 ALT="Tel: " align=middle>';  */
  content: url(/icons/phone.gif);
  vertical-align: middle;  
}

.fax {
  display: block;
  vertical-align: middle;  
}

.fax:before { 
  content: url(/icons/fax.gif);
  vertical-align: middle;  
}

.email {
  display: block;
  vertical-align: middle;  
}

.email:before 
{ 
  content: url(/icons/mailslot.gif);
  vertical-align: middle;  
}

.ref {
    font-size: 70%;
    vertical-align: text-top;
    padding-left: 0.3ex;
}
.ref:before {
  content: "[";
}
.ref:after {
  content: "]";
}

p {
  /* font-family: Verdana, Arial, Helvetica, sans-serif; */
  /* font-size: 12px; */
  /* color: #000000; */
}

dt { 
  float:         left;
  font-weight:   bold;
  padding-right: 0.5em;
  white-space: nowrap;
  height:1em;
}

dt:after { 
  content: ":";
}

dd { 
  margin-bottom: 0.5em 
}

.breadcrumb { 
  text-align: right;
  font-weight: bold;
  font-size: 80%; 
  margin-bottom: -1.7em;
  color:white;
  background-color:gray;
/*   background-color: #aaa; */
}

.breadcrumb ol { 
  list-style: none;
  margin-left: 0;
  padding-left: 0;
  display: inline;
  border: none; 
}

.breadcrumb li { 
  display: inline;
}

.breadcrumb li:after { 
  content: ">";
}

.breadcrumb a:link{color:#FFFFFF;text-decoration:none;font-weight:bold}
.breadcrumb a:visited{color:#FFFFFF;text-decoration:none;font-weight:bold}
.breadcrumb a:hover{color:#FFFFFF;text-decoration:underline;font-weight:bold}
.breadcrumb a:active{color:#FF0000;text-decoration:none;font-weight:bold}

.menu { 
  font-weight:   normal;
  font-size: 100%;
  float:right;  
  margin:0;
  margin-left:2em;
  margin-bottom:2em;
  padding:0em;
  list-style-type: none
}

.submenu { 
  font-size: 90%;
  margin:0;
  padding-left:1em;
  list-style-type: none
}

ul.foot { 
  font-weight:   normal;
  font-size: 100%;
  margin:0;
  padding:0em;
  list-style-type: none;
  white-space: nowrap;
  display: inline;
}

li.foot { 
  white-space: nowrap;
  display: inline;
}

.photo { 
  float: left;
  vertical-align: text-top;
  margin-right: 1em;
  margin-bottom: 1em;
}

a:link {
  color: #0000CC;
  text-decoration: underline;
}

a:visited 
{
  /*  color: #CC0000;*/
  color: 	#8A2BE2;
  text-decoration: underline;
}

a:hover {
  text-decoration: none;
/*   background-color: #CCCCCC; */
}

a:active {
  color: #00CC00;
  text-decoration: none;
}

.file { 
}

.prg { 
}

.host { 
}

.shell {  
  /*       top right bot left*/
  padding: 1em 5%    1em 5%;
  color: #393;
  background-color: #dfd;
  border-color: #090;
  border-style: double;
}

.prompt { 
  font-family: Verdana, Arial, Helvetica, sans-serif;
} 

.shell kbd { 
  color: #000;
}

.shell .comment { 
  color: #b22;
  text-align: right;
  float: right;
}

.shell .comment kbd { 
  color: #b22;
}

.code {  
  /*       top right bot left*/
  padding: 1em 5%    1em 5%;
  color: #933;
  background-color: #fdd;
  border-color: #900;
  border-style: double;
}

.code code { 
  color: #000;
}

.code .variable { 
  color: #46e;
}

.code .comment { 
  color: #b22;
}

.code .comment code { 
  color: #b22;
}