/* First the Header Image */
#header_image {
  width: 170px;
  height: 40px;
  display: block;
  float: left;
  background-image: url('/img/tp_header.gif');
  background-position: 0 0;
  text-decoration: none;
}

#header_image:hover {
 background-position: -180px 0;
}

/* Setup the navigation items */
#nav {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  font-size: 12px;

  float: right;

  margin: 0;
  padding: 0;

  color:#787878;
}

/* It is imperative that the tab-block exists, because
   It is the container that item_block's fill */
#nav .tab_block {
  position:relative;
  /*border: 1px solid brown; */
  /*height: 30px;  Height doesn't matter, but it's good for debugging */
}


#nav .tab {
  margin:0;
  padding:0;

  float: left;

  width: 115px;  /* The total space take must == 115px */

  cursor: default;

  /* border: 1px solid blue;*/
}

#nav .tab {
  height: 20px;
}

/* Style the tab labels and the item-links
USE THIS CSS IF YOU WANT TO MAKE THE UNDERLINE SPREAD BEYOND THE TEXT ONLY
ON THE .label ELEMENTS
#nav .tab .label {
  width: 85px;
  margin: 0 0 0 30px;   /* Notice the total space taken is 115 px
  text-align: right;
}
*/

#nav .tab .label {
  float: right;
}


/*
USE THIS CSS IF YOU WANT TO MAKE THE UNDERLINE SPREAD BEYOND THE TEXT ONLY
ON THE <A> ELEMENTS
#nav .item a {
  width: 95px;
  margin: 0 0 0 20px;   /* Notice the total space taken is 115 px
  text-align: right;
}
*/
#nav .item {
  width: 115px;
  float: left;
}

/* set up the item-blocks, and HIDE them by default  */
#nav .item_block {
  display:none;
  position:absolute;

  top: 18px;

  /* height: 60px;  This height make it easier to keep the sub-menu open as you move left-right */
  width:100%;

  /* push the item block down a little*/
  margin-top: 0.4em;

  text-align: right;
  /*border: 1px solid red;*/
}

/* trick to make IE6 behave */
#nav .tab_block .tab .item a:hover{
  border-bottom: 1px solid #888;
}

/* IE Browsers */
#nav .item_block {
  left: -100%;
  width: 575px;
  /* border: 1px solid green; */
}

/* NON IE Browsers */
#nav .tab > .item_block {
  left: 0;
  /* border: 10px solid brown; */
}

/* Show the item blocks when the tabs are hovered over
 * now done with javascript show_menu.js
#nav .tab:hover .item_block, #nav .tab_block  .over .item_block {
  display:block;
}
*/

/* Draw a line under the tab labels and items when the tabs are hovered over */
#nav .tab:hover .label, #nav .item:hover a, #nav .over .label, #nav .over .item_block .over a {
  border-bottom: 1px solid #888;
}

/* Grey out un-selected tabs when hovered over a particular tab */
#nav:hover .label, .over .label {
  color: #b6b6b6;
}
#nav .tab:hover .label, #nav .over .label {
  color:#787878;   /* Keep the hovered tab full-grey */
}

/* special for the javascript menu */
.sticky{
  text-decoration: underline;
  color:#787878;   /* Keep the hovered tab full-grey */
  float: right;
}

.unsticky{
  text-decoration: none;
  color:#b6b6b6;   /* Grey out un-selected  */
  float: right;
}


/*
  color: #ddd;
#nav ul li:hover, #nav ul li.over {
  color: #333;
  border-bottom: 2px solid #888;
  margin-bottom: 0;
}
*/


#nav a {
  float:right;
  text-align: right;

  padding: 0;

  text-decoration: none;
  color:#787878;   /* links are full-grey */

  /*border: 1px solid red;*/
}