@charset "utf-8";
/* CSS Document */
/* ================================================================ 
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_dropline_dropdown.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
.mainmenu {
/*This is the black box, first level of the menu.	*/	/* <-- This is now old news.  Integrating comments will be out here.	*/
/*I think it's just the container, but changing 	*/
/*the font size here actually does affect the font.	*/
/*I switched everything to em; adjust the width.	*/
width:880px;											/* Going to try and let as much auto or inherit as I can; I want the 	*/
background:transparent;									/* style from Oliver's website to take over here.	Allowing a width of	*/
position:relative; 										/* 100%, however, pushes the box way out to the right.  Auto does not.	*/
font-family:Arial, Helvetica, sans-serif; 				/* Changing the position from abs to rel has the peculiar affect of		*/
font-size:16px;											/* shifting everything about 1em to the left.  Font size does nothing, 	*/
font-style:bold;										/* nor does z-index appear to.	*/
z-index:500;
}

.mainmenu .select {
/*Margin shifts black box down whilst moving the	*/
/*text left.  Wraps at width defined above.			*/
/*Padding shifts the text I think of as being in the*/
/*black box down and to the left.  Also wraps.		*/
margin:0; 
padding:0 0 0 0px;		 								/* This might make a convenient place to pad out the 0 level menu later	*/
list-style:none; 										/* NOPE!  Post-hoc changes have no effect here.  Moving further down...	*/
white-space:nowrap;
/*I think the white-space:nowrap forces the text to	*/
/*not wrap unless it absolutely has to, but not sure*/
/*Commenting it out gives not immediate clues.		*/
}

.mainmenu li {
/*A container for the LI elements.					*/
float:left;
background:transparent;	/*#333*/						/* Set this one to transparent as well, showing Hr. Toon's lovely		*/
}														/* graphics underneath.  Consider making a display:block call here?	*/

.mainmenu .select a {
/*First level elements again.  Changing height		*/
/*affects grey box, but the entire area is hover-	*/
/*sensitive.  Doesn't affect lower levels.			*/
display:inline;
float:left;
padding:0.1px 115px 1px 27px;								/* Another good place to pad the 0 level menu.  Went back up, and the	*/
text-decoration:none; 									/* pads _do_ compound.	*/
background: transparent;	/*#000*/
line-height:36px; /*pushes text down out of grey box*/	/* Doesn't seem to anymore!  Now it makes the size of the green boxes	*/
white-space:nowrap; 									/* change.  Good for placing the text where I want it as well.	*/
color:#2a4a85;											/* Blue taken from Toon design.	*/
/*Color of li text with nothing underneath them - top level only	*/	
}

.mainmenu .select li.line a {color:#2a4acc;}			/* Right now, also taken from Toon design.  Consider different color.	*/
/*color of li text with something underneath them - top level only	*/
														/* Color lighter blue picked for higher visibility.						*/
.mainmenu .select a b {
/*The blocks around the top level list items.  I've	*/
/*made them green here, but they originally had an	*/
/*image associated with them, using the "right" and	*/
/*"top" tags (url="" right top)						*/
display:inline; 
position:absolute;
float:left;
padding:0.1px 30px 0px 30px;							/* Third padding: call I could use to move the links about.  They still	*/
																											/* all compound.	*/
background:transparent;	/*#0b0*/
}
/* End static 0 level behaviour */						/* The only thing I've got pushing any dimmensions at all into the		*/
/*--------------------------------------------------*/	/* static 0 level is a line height of 2.5em and a left pad of 2.5 em,	*/
														/* both in the ".mainmenu .select a {" section.	*/

.mainmenu .select a:hover, 
.mainmenu .select li:hover a {
/*Affects hover behaviour.  If one were to match	*/	/* Alright, we've got a bump upon hover going on.  Going to try and kill*/
/*the padding, line height and color indicators then*/	/* all possible sources, starting with the padding and line hieght tags	*/
/*there would be no clue of hover behaviour.  I'll	*/	/* and working my way down the calls underneath.	*/
/*match padding and line height, but set bg color to*/
/*blue of some sort.*/
padding:0.1px 115px 1px 27px;								/* Matching this to ".select a {" above.	*/
line-height:36px;										/* Going to consolodate, but not sure where yet.	*/ /* l-h is cool.	*/
cursor:pointer; 
color:#fff;												/* By the Toon design, these go white.	*/
/*Color only seems to be affecting the no-options-	*/
/*below menu items.  Hovering over "Home" gets the	*/
/*blue I wanted, though.*/
}

.mainmenu .select li.line a:hover, 
.mainmenu .select li.line:hover a {
/*Hover behaviour of li's with options underneath	*/
/*them.  Not sure why only the color is changed.	*/
/*(Note that it's a tiny bit darker when you hover)	*/
color:#fff;}											/* Again, by the Toon design, white.	*/

.mainmenu .select a:hover b, 
.mainmenu .select li:hover a b {
/*This box now displays in periwinkle.  Appears		*/
/*when a top level option is hovered over.			*/
/*I matched it's padding with that given in:		*/
/*.select a b {										*/
display:block; 
padding:0.1px 30px 24px 30px; 
background:transparent; /*#b0b*/
cursor:pointer;
}
														/* TO-DO: Chnage links with stuff below them to a different blue.	*/
														/* At this point, the 0 level menu should be identical.  It isn't - I	*/
/*--------------------------------------------------*/	/* can't work out the font/text size thing, and the labels are bolded.	*/
/*Everything below here has to do with the sub uls	*/	/* I'll play with that when the submenus work.	*/

/*Hides the submenus from view*/
.mainmenu .sub {display:none;} /*Hides the dropline*/
.mainmenu ul ul {display:none;} /*hides the submenus*/

/* IE6 only */
.mainmenu table {
border-collapse:collapse; 
margin:0; 
font: Arial, Helvetica, sans-serif;
font-size:16px; 
width:0; 
height:0;
/*I think this one is just IE6 - my understanding	*/	/* I'm leaving this untouched here as well, and just praying it works.	*/
/*of how IE6 support was added without JS is that 	*/
/*all the relevant ul containers were wrapped in	*/
/*table blocks that are only IE6-relevant. 			*/
/*Not working to debug for now, since IE6 support is*/
/*a lower priority of mine.							*/
}

.mainmenu .sub {
margin:0;/*Pushes the dropline down and left		*/
padding:0 0 0 0;
/*Can push the dropline any direction padding can go*/
list-style:none;

}

.mainmenu .sub li {
background:transparent;
/*This seems to be affecting the background of both	*/
/*levels of the dropdown menus.  Leaving it transp.	*/
}

.mainmenu .select :hover .sub {
/*This seems to be all my dropline container 		*/	/* And here's where we're going to do our dropline tweaking.  Toon's	*/
/*parameters in one conveneint place.				*/	/* menu only ever got a 1em pad for the dropline, but this is different.*/
height:25px;  /*Height of the dropline*/				/* Changes height, but when set to auto reverts to setting that that is	*/
display:inline; 										/* given below. When both are made auto, it hangs on the font size.	*/
position:absolute;
float:left;
width:880px;  /*Width of the dropline*/					/* This MUST be set to a defenite value.  I'm using em, but px is better*/
top:36px;
left:0px;
text-align:left;
background:url(../imgs/staib_instruments_subnaviback_blue_880.gif);
}

.mainmenu .select :hover .rt li {float:left;} /*Some the the uls have rt tags, this makes them float right*/
														/* Affects dropmenu float behaviour as well, and it's horrendous trying	*/
														/* to get everything to line up if they float different directions.	*/
														/* So I went back through and floated everything center.				*/
														/* Floated left, for IE support; still junked.*/

.mainmenu .select :hover .sub li a {
/*All my dropline text parameters in one place.		*/
display:inline;
line-height:25px;										/* Use line-height to move text about, height to move block about.	*/
/*Pushes dropline, but not dropmenu, down the way*/
float:left;
background:transparent;
/*Sets BG for both levels of dropdown, but takes precedence over the BG set above*/
position: relative;
left: 57px;
top:0px;
padding:0px 54.5px 0px 0px;
white-space:nowrap;
color:#2a4a85;											/* Switched color to Toon's blue.	*/
}

.mainmenu .select :hover .sub li.subline a {color:#2a4acc;} /*Color of subline with dropdown associated AND dropdown*/
														/* Toon's blue, but lightenend it up just a bit to give better		*/
														/* contrast against the white background.	*/

.mainmenu .select :hover .sub li a:hover,
.mainmenu .select :hover .sub li:hover {
color:#fff;  /*Doesn't seem to make a blessed bit of difference - all controled by color below*/
line-height:25px;  /*This one does, though!  Affects dropline text upon hover behaviour.*/				/* Matched to above	*/
position:relative;
top:0px;
}

.mainmenu .select :hover .sub li:hover > a {color:#fff;} /*Color of everything below top level upon hover*/

.mainmenu .select :hover .sub :hover ul {
/*Third level now, probably just the block.  I		*/
/*suspect that it will inherit all it's text		*/
/*parameters from elsewhere.						*/
padding:0 0 0 0px;
margin:0;
list-style:none;
display: block;
width:200px;
background:#919db5;
position:absolute;
top:24px;
left:50px;
}

.mainmenu .select :hover .sub :hover ul li a {
text-align:right;
position:relative;
top:0px;
left:7px;
line-height:25px;
}

.mainmenu .select :hover .sub :hover ul li a:hover {line-height:25px;}