.djdot{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
}

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

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

.djdot ul li a{
float: left;
color: white; /*text color*/
padding: 5px 11px;
text-decoration: none;
background:  url(djdotbg.png) center center;
background-repeat: no-repeat
}

.djdot ul li a:visited{
color: white;
background:  url(djdotbg.png) center center;
background-repeat: no-repeat
}

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


.tabcontentstyle{ /*style of tab content oontainer*/
border: 1px solid gray;
width: 450px;
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:left; 
  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:left; 
  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;
}
}