.djdot{
font: bold 13px Arial;
width: 100%; /*leave this value as is in most cases*/
list-style: none;
padding: 15px 0 0 0;
}

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

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



#star a.selected{
padding: 8px 0px ;
background:  url(star_on.gif) center center;
background-repeat: no-repeat
}
#star a:hover   {
  text-decoration:  none;
  padding: 8px 0px ;
	background:  url(star_hover.gif) center center;
	background-repeat: no-repeat
  } 


#star{
padding: 8px 0px ;
background:  url(star.gif) center center;
background-repeat: no-repeat
}

#bio a.selected{
padding: 8px 0px ;
background:  url(bio_on.gif) center center;
background-repeat: no-repeat
}

#bio{
padding: 8px 0px ;
background:  url(bio_.gif) center center;
background-repeat: no-repeat
}

#bio a:hover   {
text-decoration:  none;
padding: 8px 0px ;
background:  url(bio_hover.gif) center center;
background-repeat: no-repeat
  
  } 

#blog_tab a.selected{
padding: 8px 0px ;
background:  url(blog_on.gif) center center;
background-repeat: no-repeat
}

#blog_tab a:hover   {
padding: 8px 0px ;
background:  url(blog_hover.gif) center center;
background-repeat: no-repeat
  text-decoration:  none;
  } 

#blog_tab{
padding: 8px 0px ;
background:  url(blog.gif) center center;
background-repeat: no-repeat
}

#medals a:hover   {
padding: 8px 0px ;
background:  url(medals_hover.gif) center center;
background-repeat: no-repeat
  text-decoration:  none;
  } 
  
#medals a.selected{
padding: 8px 0px ;
background:  url(medals_on.gif) center center;
background-repeat: no-repeat
}

#medals{
padding: 8px 0px ;
background:  url(medals.gif) center center;
background-repeat: no-repeat
}

#ranks a:hover   {
  text-decoration:  none;
  padding: 8px 0px ;
background:  url(ranks_hover.gif) center center;
background-repeat: no-repeat
  } 

#ranks a.selected{
padding: 8px 0px ;
background:  url(ranks_on.gif) center center;
background-repeat: no-repeat
}

#ranks{
padding: 8px 0px ;
background:  url(ranks.gif) center center;
background-repeat: no-repeat
}






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

.tabcontent{
padding: 5px;
display:none;
height:auto;
min-height:105px;
line-height: 140%; 
}

.info{
padding-bottom: 4px;

}


/* 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;
}
}