.djdot{
font: bold 12px Tahoma;
width: 100%;
}

.djdot ul{
margin: 0px;
padding: 0px;
/* width: 80%; width of menu*/
}

.djdot ul li{
display: inline;
background: url(djdotbg.png);
background-position: center;
background-repeat: no-repeat;
width: 10px;
height: 10px;
}

.djdot ul li a{

color: white; /*text color*/
padding: 5px 9px;
text-decoration: none;
width: 10px;
height: 10px;
}

.djdot ul li a:visited{
color: white;
width: 10px;
height: 10px;
}

.djdot ul li a.selected{
color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
background: url(djdotbg2.png);
background-position: center;
background-repeat: no-repeat;
width: 10px;
height: 10px;
}


.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
margin-bottom: 1em;
padding: 10px;
}

.tabcontent{
display:none;
}


/* removing the active/focus dotted border */
#djdot_c {
  list-style-type:none; 
  padding:0; 
  width:36em;
  height:5em;
  margin:0 auto;
  }
#djdot_c li {
  display:block; 
  width:7em; 
  height:2em; 
  float:none; 
  margin-right:0.2em;
  }
#djdot_c a {
  display:block; 
  width:7em; 
  height:2em; 
  position:relative; 
  text-decoration:none;
  }
#djdot_c a em {
  font-style:normal; 
  color:#000; 
  display:block; 
  width:7em; 
  height:1.5em; 
  border-bottom:0.5em solid #000; 
  position:absolute; 
  top:0; 
  left:0; 
  cursor:pointer;
  }
#djdot_c a:hover {
  color:#c00;
  }
#djdot_c a:hover em {
  border-bottom:0.5em solid #c00;
  }


#djdot_c a:active, #djdot_c a:focus {
  /* reduce the link size to zero when the link is in the 
  active/focus state.
  This literally removes the dotted border which is ONLY applied
  to the link itself and not any containing elements WHEN THOSE
  ELEMENTS HAVE A POSITION ABSOLUTE! */
  width:0; height:0;
  outline:0; /* for browsers that understand */
  }

/* adding the active/focus state */
#djdot_d {
  list-style-type:none; 
  padding:0; 
  width:36em; 
  height:5em; 
  margin:0 auto;
  }
#djdot_d li {
  display:block; 
  width:7em; 
  height:2em; 
  float:right; 
  margin-right:0.2em;
  }
#djdot_d a {
  display:block; 
  width:7em; 
  height:2em; 
  position:relative; 
  text-decoration:none;
  }
#djdot_d a em {
  display:block; 
  font-style:normal; 
  width:7em; 
  height:1.5em; 
  color:#000; 
  border-bottom:0.5em solid #000; 
  position:absolute; 
  top:0; 
  left:0; 
  cursor:pointer;
  }
#djdot_d a:hover {
  color:#c00;
  }
#djdot_d a:hover em {
  border-bottom:0.5em solid #c00;
  }
#djdot_d a:active, #djdot_d a:focus {
  width:0; 
  height:0;
  outline:0; /* for browsers that understand */
  }

#djdot_d a:active em, #djdot_d a:focus em {

  /* change the em bottom border and text to blue on
  active/focus thus giving a suitable alternative to
  the dotted border */
  border-bottom:0.5em solid #00c; 
  color:#00c;
  outline:0; /* for browsers that understand */
  }
  
@media print {
.tabcontent {
display:block !important;
}
}