ï»?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{
background-position: center; display: inline;
background-color:transparent; background-repeat:no-repeat; background-attachment:scroll

}

.djdot ul li a{
background-position: center; float: left;
color: white; /*text color*/
text-decoration: none;
padding-left:7px; padding-right:1px; padding-top:5px; padding-bottom:5px; background-repeat:no-repeat; background-color:transparent; background-attachment:scroll
}

.djdot ul li a:visited{
background-position: center; color: white;
background-color:transparent; background-repeat:no-repeat; background-attachment:scroll

}

.djdot ul li a.selected{
background-position: center; color: white !important;
padding-top: 6px; /*shift text down 1px*/
padding-bottom: 4px;
background-color:transparent; background-repeat:no-repeat; background-attachment:scroll

}


.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;
}
}