/*



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 */



/* All <ul> tags in the menu including the first level */



.menulist, .menulist  ul {

	margin: 0;

	padding: 0;

	list-style: none;

	z-index:10000;

}



/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */

.menulist ul {

	visibility: hidden;

	position: absolute;

	top: 24px;

	left: 3px;

	width: 133px;
	
	/*border-top: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-left: 1px solid #333;
	border-bottom: 1px solid #333;*/

}



/* Second and third etc. level submenus - position across from parent instead */

.menulist ul ul {

	top: 0px;

	left: 150px;

}



/*

 All menu items (<li> tags). 'float: left' lines them up horizontally, and they are

 positioned relatively to correctly offset submenus. Also, they have overlapping borders.

*/

.menulist li {

	float: left;

	position: relative;

	margin-right: -1px;

}



/* Items in submenus - override float/border/margin from above, restoring default vertical style */

.menulist ul li {

	float: none;

	margin-right: 0;

	background: #FFF url(../images/bg_tools_menu.jpg) right repeat-y;

	/*border: 1px solid #CCC;*/
	border-top: 1px dotted #6699CC;
	border-bottom: 1px dotted #6699CC;
	border-right: 1px solid #CCC;
	border-left: 1px solid #333;
	
	padding: 0;

	margin-bottom: -1px;

}

.menulist ul li.firstOne {

	float: none;

	margin-right: 0;

	background: #FFF url(../images/bg_tools_menu.jpg) right repeat-y;

	/*border: 1px solid #CCC;*/
	border-bottom: 1px dotted #6699CC;
	border-top: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-left: 1px solid #333;
	
	padding: 0;

	margin-bottom: -1px;

}

.menulist ul li.lastOne {

	float: none;

	margin-right: 0;

	background: #FFF url(../images/bg_tools_menu.jpg) right repeat-y;

	/*border: 1px solid #CCC;*/
	border-top: 1px dotted #6699CC;
	border-bottom: 1px solid #333;
	border-right: 1px solid #CCC;
	border-left: 1px solid #333;
	
	padding: 0;

	margin-bottom: -1px;

}

.menulist ul>li:last-child {

	margin-bottom: 1px;

}



/* Links inside the menu */

.menulist a {

	font-family:Arial,Helvetica,Verdana,sans-serif;

	font-size:11px;
	line-height: 18px;

	display: block;

	padding: 1px;

	padding-left: 5px;

	color: #003366;

	text-decoration: none;

}



/* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */

.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {

	color: #003366;

	background-color: #99FF99;

}

.menulist  a.highlighted {

	color: #003366;

	background-color: #99FF99;

}





/* QUICKTIP FREESTYLE MENU LAYOUT */





/* All <ul> tags in the menu including the first level */



.quicklist, .quicklist  ul {

	margin: 0;

	padding: 0;

	list-style: none;

}



/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */

.quicklist ul {

	visibility: hidden;

	position: absolute;

	top: 2em; /* I'm using ems rather than px to allow people to zoom their font */

	left: -10px;

	width: 144px;

}



/* Second and third etc. level submenus - position across from parent instead */

.quicklist ul ul {

	top: 0px;

	left: 144px;

}



/*

 All menu items (<li> tags). 'float: left' lines them up horizontally, and they are

 positioned relatively to correctly offset submenus. Also, they have overlapping borders.

*/

#quicktip{

	overflow:visible;

	width:144px;

}

.quicklist li {

	position: relative;

	margin-right: -1px;

}



/* Items in submenus - override float/border/margin from above, restoring default vertical style */

.quicklist ul li {

	background: #006ABC;

	border: 1px solid #F3EE73;

	font-family:Arial,Helvetica,Verdana,sans-serif;

	font-size:8pt;

	color: #FFF;

	padding:10px;

}

.quicklist ul>li:last-child {

	margin-bottom: 1px;

}



/* Links inside the menu */

.quicklist a {

	font-family:Arial,Helvetica,Verdana,sans-serif;

	font-size:8pt;

	display: block;

	padding: 0px;

	color: #FFF;

	text-decoration: none;

}



/* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */

.quicklist a:hover, .quicklist a.highlighted:hover, .quicklist a:focus {

	color: #1E6F41;

	background-color: none;

}

.quicklist  a.highlighted {

	color: #1E6F41;

	background-color: none;

}



/* MYTHBUSTER FREESTYLE MENU LAYOUT */





#mythbuster {

	overflow:visible;

	width:144px;

}



/* All <ul> tags in the menu including the first level */



.myth-pop, .myth-pop  ul {

	margin: 0;

	padding: 0;

	list-style: none;

}



/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */

.myth-pop ul {

	visibility: hidden;

	position: absolute;

	top: 4em; /* I'm using ems rather than px to allow people to zoom their font */

	left: -10px;

	width: 144px;

}



/* Second and third etc. level submenus - position across from parent instead */

.myth-pop ul ul {

	top: 0px;

	left: 144px;

}



/*

 All menu items (<li> tags). 'float: left' lines them up horizontally, and they are

 positioned relatively to correctly offset submenus. Also, they have overlapping borders.

*/

.myth-pop li {

	position: relative;

	font-family:Arial,Helvetica,Verdana,sans-serif;

	line-height:120%;

	font-size:8pt;

	color:#FFF;

}



/* Items in submenus - override float/border/margin from above, restoring default vertical style */

.myth-pop ul li {

	background: #F3EE73;

	border: 1px solid #A2CB5B;

	font-family:Arial,Helvetica,Verdana,sans-serif;

	line-height:130%;

	padding:10px;

	font-size:7pt;

	color:#1E6F41;

}

.myth-pop ul>li:last-child {

	margin-bottom: 1px;

}



/* Links inside the menu */

.myth-pop a {

	font-family:Arial,Helvetica,Verdana,sans-serif;

	font-size:7pt;

	padding: 0px;

	color: #A2CB5B;

	text-decoration: none;

}



/* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */

.myth-pop a:hover, .myth-pop a.highlighted:hover, .myth-pop a:focus {

	color: #A2CB5B;

	background-color: none;

}

.myth-pop  a.highlighted {

	color: #A2CB5B;

	background-color: none;

}.loveQuestions {
	color: #FF6309;
	font-weight: bold;
}