/*

Here's a demo stylesheet used to format a menu and its content.
Feel free to alter the menu layout however you want. All you have to do is ensure the script
has the correct CSS property name (like 'visibility' or 'display') that you want it to change.

One good resource for UL/LI formatting: http://www.alistapart.com/articles/taminglists/
Consult your favourite CSS reference for editing fonts/borders/etc.

Otherwise, even if you're not very experienced at CSS, you can just go through and change
the #RGB border/background colours where suitable to customise for your site!

*/



/* HORIZONTAL FREESTYLE MENU LAYOUT */



/* ==================================== */
/* 	     DON'T EDIT THE FOLLOWING
/* ==================================== */

/* All <ul> tags in the menu including the first level */
.menulist, .leveltwo, .levelthree {
	/* don't edit these */
	margin: 0;
	padding: 0;
	list-style: none;
	/* ================ */
}

/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
.leveltwo {
	/* don't edit these */
	visibility: hidden;
	position: absolute;
	top: 34px;
	left: 0px; 
	line-height: 34px;
	/* ================ */
}

/* Second and third etc. level submenus - position across from parent instead */
.levelthree {
	/* don't edit these */
	position: absolute;
	top: 0px;
	left: 112px;
	/* ================ */
}

/* ==================================== */
/* 	     OVERALL MENU DEFAULTS
/* ==================================== */
/* MikeC: Global defaults for the whole menu */

.menulist li {
	/* don't edit these */
	float: left;
	position: relative;
	/* ================ */

	width: 112px;	/* you can define a width of each menu item, or take this out for it to wrap */
	height: 34px; 
	background-color: gray;	/* JVD: This is the background color under the image in the next line. It should never be seen */
	background: url(http://staging.barryclingan.org/images/images_A2728/btn_off.png) left no-repeat;
	line-height: 34px;
}

/* mikec: overrides settings for submenus */
.leveltwo li {
	/* don't edit these */
	float: none;
	margin-right: 0;
	/* ================ */
	width: 112px;
	/* you can define a width of each menu item, or take this out for it to wrap */
	height: 34px;
	background-color: #333333;
	/* JVD: Change this to match the color scheme of your site.*/
	background-image : none;
	/* JVD: You could replace the background color with an image by placing url(image.png) here */
}


/* ==================================== */
/*       FIRST LEVEL OF THE MENU
/* ==================================== */
/* MikeC: All links inside the first level of the menu */

.menulist a {
	display: block;		/* don't edit this one */
	
	width: 112px;
	text-align: center;
	
	color: #fff; /* JVD: This is the text color for the first level */
	text-decoration:  none; /* */
	font-size: 10pt; /* JVD: This is the text size for the first level */
}

/* JVD: Be sure to change this to match the lines above */
.menulist a:visited { 
	color: #fff;
	text-decoration: none;
	font-size: 10pt;
}

/* MikeC: this defines all the mouseovers for the first level of the menu */
.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus, .menulist a.highlighted {
	color: Silver;
	text-decoration: none;
	background-color: blue;
	height: 34px;
	/* JVD: Change this to match the site*/
	background: url(http://staging.barryclingan.org/images/images_A2728/btn_on.png) left no-repeat;
}


/* ==================================== */
/*    SUBSEQUENT LEVELS OF THE MENU
/* ==================================== */
/* mikec: override all links inside the sublevels of the menu */

.leveltwo li a {
	text-align: left;
	color: #fff; /* JVD: Text color for second level of menu*/
	text-decoration:  none;
	font-size: 10pt; /* JVD: Text size for second level of menu*/
	text-indent: 5px;
}

/* JVD: Be sure this matches the font-size line above */
.leveltwo li a:visited {
	font-size:10pt;
}

/* MikeC: this defines all the mouseovers on the sublevels of the menu */
.leveltwo a:hover, .leveltwo a.highlighted:hover, .leveltwo a:focus, .leveltwo a.highlighted { 
	color: #FFF;
	text-decoration:  none;
	background-color: #666666; /* JVD: Change this to match the color scheme of your site.*/
	background-image: none; /* JVD: You could replace the background color with an image by placing url(image.png) here */
}

/* JVD: DON'T MAKE CHANGES BELOW THIS LINE */

/*
 If you want per-item background images in your menu items, here's how to do it.
 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#">
 2) Copy and paste these next lines for each link you want to have an image:
    .menulist a#xyz {
      background-image: url(out.gif);
    }
    .menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus {
     background-image: url(over.gif);
    }
*/

/* Only style submenu indicators within submenus. */
/*.menulist a .subind {
 display:  none;
} 
.leveltwo a .subind {
 display:  block;
 float: right;
} */

/* 'Escaped Comment' hack for horizontal menubar width in IE5/Mac */
.menulist a {
 float: left;
}
.leveltwo a {
 float: none;
}
/* \*/
.menulist a {
 float: none;
}
/* */


/* This semi-commented section exists to fix bugs in IE/Windows (the 'Holly Hack'). \*/
* html .leveltwo li {
 float: left;
 height: 1%;
}
* html .leveltwo a {
 height: 1%;
}
/* End Hack */