/*
Sentra.Designs\- global\StyleCommon\CSSnavigations\style_anchorlist.css

http://www.alistapart.com/articles/hybrid/
The first thing we are going to do with our CSS is to display the primary level horizontally
(using float) and hide all of the subnavigation lists.
We will also set the display for the links in the list to be bold, colored, and have a border.
*/
@anchorlistmargin:10px;

.flyout_anchorlist {/* the anchorlist button */
	float:left;
	width:{{anchorlist_button_vwidth}}px;
/*
	height:{{anchorlist_vertical_height}};
*/
	position:fixed;
	z-index:202;
	top:{{anchorlist_button_vtoppos}};
	right:{{anchorlist_button_hrightpos}};
	line-height: {{anchorlist_button_line_height}}px;
	background:{{anchorlist_button_bg_color}};
	color: {{anchorlist_button_color}};

	/* remove the bullets and set the margin and padding to zero for the unordered list */

	ul {
		background:{{anchorlist_button_bg_color}};
		float:left;
		padding: {{anchorlist_li_padding}}px;
		margin:0;
		list-style: none;
		border:0;

		table {
			border-collapse:collapse;
			margin:-1px -10px;
			font-size:1em;
		}

		li {
			float:left !important;
			width:{{anchorlist_button_vwidth}}px;
			left:0 !important;

			a, a:hover,
			a:visited {
				color:{{anchorlist_button_color}};
				font: normal {{anchorlist_button_fontsize}}px {{anchorlist_fontfamiliy}};
				display:block;
				text-align:center;
				text-decoration:none;
				width:{{anchorlist_button_vwidth}}px;
				em {
					clear:both;
					width:{{anchorlist_button_vwidth}}px;
					float:left;
					display:block;
				}
			}
			ul.anchorlist {/* Flyout-window  with links to paragraphs */
				position:absolute;
				list-style:none;
				width: {{anchorlist_flyout_width}}px + 2 * @anchorlistmargin + 2 * {{anchorlist_flyout_a_padding}}px;
/*
				clear:both;
*/
				float:left;
				background: {{anchorlist_bg}};
/*
				border: {{anchorlist_flyout_borderwidth}}px {{anchorlist_flyout_bordersytle}} {{anchorlist_flyout_bordercolor}};
*/
				li {
					float:left;
					background: {{anchorlist_flyout_li_bg}};
					margin: 0 @anchorlistmargin;

					a {
						float:left;
						font: normal {{anchorlist_flyout_fontsize}}px {{anchorlist_fontfamiliy}};
						white-space:normal;
						line-height: {{anchorlist_flyout_line_height}}px;
						color:{{anchorlist_flyout_link_color}};
						font-weight:bold;
						background: {{anchorlist_flyout_li_bg}};
						padding:0 {{anchorlist_flyout_a_padding}}px;
						text-align:left;
						width: {{anchorlist_flyout_width}}px;
/*
						border-bottom: {{anchorlist_flyout_a_border}};
*/
					}
					a:hover {
						color:{{anchorlist_hover_link_color}};
/*
						background: {{anchorlist_a_bg}};
*/
						background-color:{{anchorlist_hover_bg_color}};
					}
				}
			}
		}
		/* make the flying out ul invisible*/
		ul {
			left:-9999px;
			height:0;
			width: {{anchorlist_flyout_width}}px;
		}
	}

	ul li a:hover,
	ul li:hover a {
		color:{{anchorlist_hover_link_color}};
		background:{{anchorlist_bg}};
	}
	ul :hover ul {
		position:fixed;
		top: 0;
		height:auto;
		left: -{{anchorlist_flyout_width}}px - 2 * @anchorlistmargin - 2 * {{anchorlist_flyout_a_padding}}px;
		text-align:left;
		z-index:32;
	}
	ul :hover ul li {
		float:left;
		clear:both;
		padding: 0; /* {{anchorlist_horizontal_padding}};*/
		width:auto;
		white-space:normal;
	}
}