/* common styling */
/* set up the overall width of the menu div, the font and the margins */

.menu {
font-family: Verdana, Arial, Helvetica, sans-serif;
width:760px; 
margin:0; 
margin:0px 0 0px 0;
position:relative;
z-index:100;
}
/* remove the bullets and set the margin and padding to zero for the unordered list */
.menu ul {
padding:0; 
margin:0;
list-style-type: none;
}
/* float the list so that the items are in a line and their position relative so that the drop down list will appear in the right place underneath each list item */
.menu ul li {
float:left; 
position:relative;
}
/* style the links to be 150px wide by 30px high. Set the color and the font size. - Top Links*/
.menu ul li a, .menu ul li a:visited {
display:block; 
text-align:center; 
text-decoration:none; 
width:145px; 
height:20px; 
color:#000000; 
line-height:15px; 
font-size:13px;
font-weight:bold;
}
/* set up the background images relative to this css file */
/*Example .About {background:#999999 url(../Juxta-Cruises.jpg);}   .Biblio1 {background:transparent url(../Juxta-Velo.jpg) 0 -31px;}*/
.About {background:#B07700  url(images/Sand_Fade_1.jpg);}
.About1 {background:#339900 url(images/Menu_Fade_1.jpg) 0 -5px;}
.Art {background:#B07700 url(images/Sand_Fade_1.jpg);}
.Art1 {background:#339900 url(images/Menu_Fade_1.jpg) 0 -5px;}
.Design {background:#B07700 url(images/Sand_Fade_1.jpg);}
.Design1 {background:#339900 url(images/Menu_Fade_1.jpg) 0 -5px;}
.Biblio {background:#B07700 url(images/Sand_Fade_1.jpg);}
.Biblio1 {background:#339900 url(images/Menu_Fade_1.jpg) 0 -5px;}
.Contact {background:#B07700 url(images/Sand_Fade_1.jpg);}
.Contact1 {background:#339900 url(images/Menu_Fade_1.jpg) 0 -5px;}

/* make the dropdown ul invisible */
.menu ul li ul {
visibility:hidden;
position:absolute;
}

/* specific to non IE browsers */
/* set the background and foreground color of the main menu li on hover */
.menu ul li:hover a {
color:#0033CC; 
}
.menu ul li:hover a span {display:none;}

/* make the sub menu ul visible and position it beneath the main menu list item */
.menu ul li:hover ul {
visibility:visible; 
top:20px; 
left:0; 
width:145px;
}
/* style the background and foreground color of the submenu links - dropdown from main */
.menu ul li:hover ul li a {
display:block; 
color:#FFFFFF;

}
/* style the hidden span text */
.menu ul li:hover ul li a span {
	display:none;
	position:absolute;
	left:145px;
	top:0;
	background-color:#FEF0C0;
	width:190px;
	padding:12px;
	color:#000;
	font-size:12px;
	font-weight:normal;
	border:solid;
	border-width: 3px;
	border-color: #CC901E;
	
}
/* style the first letter of the span text */
.menu ul li:hover ul li a span:first-letter {
font-weight:bold;
font-size:1.4em;
}
/* style the background and forground colors of the links on hover */
.menu ul li:hover ul li:hover {
	background-color: #174373;
	
	
	
}
/* make the span text visible */
.menu ul li:hover ul li:hover span {
	display:block;
	text-align:justify;
	line-height:1.4em;
	vertical-align: baseline;	
	
}
/* position the span text on the left of the last menu item */
.menu ul li:hover ul.left li:hover span {
left:-214px;
}