/*		MultiColumnLists.css		*/

/*	applies to: http://novitskisoftware.com/demos/multiColumnLists/multiColumnLists.html */


/*==============================
clear any inherited styling
==============================*/
div#PageArticle ul,
div#PageArticle ol,
div#PageArticle li,
div#PageArticle a
{
	margin: 0;
	padding: 0;
	height: auto;
	border: none;
}
div#PageArticle a
{
	display: inline;
}
/*==============================
styles pertinent to the demo
==============================*/
div#PageArticle .wraplist li
{
	/* If li position is left static, 
   Internet Explorer 6 disables hyperlinks in the list 
   in all but the final column */
	position: relative;

	/* It's necessary to control the height of each list item
	so that vertical return = items * height */
	line-height: 1.2em;

	/* Clear the default margins & padding 
	so we can style the list from scratch */
	margin: 0;
	padding: 0;
}

/* This brings the first item of each column back up to the level of item 1.
	Vertical return = number of items in a column * height of each item.
	In this case 5 items * 1.2em line-height = 6em */
div#PageArticle .wraplist li.item6,
div#PageArticle .wraplist li.item11
{
	margin-top: -6em;
}

/* Horizontal positions of the columns */
div#PageArticle .wraplist li.item1,
div#PageArticle .wraplist li.item2,
div#PageArticle .wraplist li.item3,
div#PageArticle .wraplist li.item4,
div#PageArticle .wraplist li.item5
{
	margin-left: 5em;
}
div#PageArticle .wraplist li.item6,
div#PageArticle .wraplist li.item7,
div#PageArticle .wraplist li.item8,
div#PageArticle .wraplist li.item9,
div#PageArticle .wraplist li.item10
{
	margin-left: 15em;
}
div#PageArticle .wraplist li.item11,
div#PageArticle .wraplist li.item12,
div#PageArticle .wraplist li.item13,
div#PageArticle .wraplist li.item14,
div#PageArticle .wraplist li.item15
{
	margin-left: 25em;
}

/* Hover behavior (arbitrary) */
div#PageArticle .wraplist li a:hover
{
	color: #FFF; /* white */
	background-color: #A52A2A; /* brown */
}

/*==============================
Example 2 - block anchors
==============================*/
div#PageArticle #list2.wraplist li a
{
	/* extend the anchors to fill the LIs */
	display: block;

	/* Hyperlink width -- purely cosmetic; 
	don't let links reach as far as the next column */
	width: 8em;	
}

/*==============================
Example 3 - gettin' fancy
==============================*/
div#PageArticle ul#list3.wraplist
{
	/* ditch the default bullets */
	list-style-type: none;
}
div#PageArticle ul#list3.wraplist li
{
	/* Taller list items to accommodate padding and borders */
	height: 2em;
}
/* Increase the vertical return 
to accommodate the taller list items */
div#PageArticle ul#list3.wraplist li.item6,
div#PageArticle ul#list3.wraplist li.item11
{
	margin-top: -10em;
}

/* Purty it up */
div#PageArticle ul#list3.wraplist li a
{
	display: block;
	width: 8em;
	padding: 0.5ex;
	padding-left: 1em;
	border: 1px solid #A52A2A; /* brown */
	text-decoration: none;
	color: #A52A2A; /* brown */
	background-color: #F90;
	background-image: url("../images/navplus.jpg");
	background-repeat: no-repeat;
	background-position: 1% 50%;
}
div#PageArticle ul#list3.wraplist li a:hover
{
	font-weight: bold;
	color: #FFF; /* white */
	background-color: #E70;
	background-image: url("../images/navdash.jpg");
}