/* IE needs both a gif instead of a PNG here and also some help understanding the > selector notation, using a Javascript-built class "firstchild". */

ul.navigation li.hassubmenu a.firstchild
{
	background-image: url(./arrow.gif); /* A .gif for IE. */
	background-repeat: no-repeat;
}

ul.navigation li.displaysubmenu a.firstchild
{
	background-image: url(./revealedarrow.gif); /* A .gif for IE. */
	background-repeat: no-repeat;
}

/* This style makes sure any arrows "below" a displayed one are "closed". */
ul.navigation li.displaysubmenu li.hassubmenu a.firstchild
{
	background-image: url(./arrow.gif); /* A .gif for IE. */
	background-repeat: no-repeat;
}


body
{
	text-align: left;
}

/* I need to add this to make IE display the border's correctly. the #fdd449 is to make the top border
   "invisible" by matching the background color. */
ul.navigation li li
{
	border: none;
	border-top: solid 1px #fceebb; /* very pale yellow */
	border-bottom: solid #fde289 1px; /* background color -- must match ul.navigation background-color */
	margin: 0px;
}

/* For some bizarre reason, this allows the href's to work even with the transparent png background in IE. See http://allinthehead.com/retro/69/sleight-of-hand#c002523 */
a
{
	position: relative;
}

/* This doesn't quite vertically center the dates in the a's, but close enough. */
ul table.month-calendar a, ul table.year-calendar a
{
  line-height: 1.75em;
}

/* Since the regular CSS for other browsers wasn't enough, it needed and extra "kick." */
ul.navigation table caption
{
       padding-top: 0.5em;
}