/* Copyright Dynarch.com, 2003-2006.  All Rights Reserved. */

/*
	Note, this file wants to be a sample showing you how to create custom skins.
	Feel free to use it as a starting point. */

/* Import the main layout file.  Several layouts are predefined:

	- hmenu.css          -- standard 2D layout
	- hmenu-extended.css -- facilitates skins like "Office XP" menus
	- hmenu-3d.css       -- facilitates 3D skins suitable for Win98-like menus

	Please note that the URL that you specify in the @import clause is relative
	to the path of this file itself.  Since skin-sample.css is located in the same
	directory as hmenu.css, we can include it directly as "hmenu.css".  If you plan
	to put your custom skins in another directory, then you would need to include
	for instance: "/hmenu/hmenu.css", assuming that "/hmenu/" is the path to your
	DynarchMenu installation, accessible from your server's document root.
*/

@import url("hmenu.css");

/****************************************************
	(1) THE MAIN MENU BAR
*****************************************************/

div.dynarch-horiz-menu {
  /* This is a DIV, container of the horizontal menu bar.
	  Please note that if you customize fonts here, the setting will most likely
	  be lost in Internet Explorer because tables don't inherit fonts.  Therefore,
	  we would better customize fonts in the "table" children. */

	height:21px;
	border:none;
    margin: 0px;
    padding: 0px;
    background-color:#8E0E0D;
}

div.dynarch-horiz-menu table td{
  /* A table is used to layout elements in the main menu bar.
	  Here is safe to specify fonts. */

	white-space:nowrap;
	font:bold 10px verdana; color:#fff;
	text-decoration:none; text-transform:uppercase;
}

div.dynarch-horiz-menu table tr td div{padding:1px 0 1px}
div.dynarch-horiz-menu table tr td{background:no-repeat -100px}
div.dynarch-horiz-menu table tr td.downarrow{background-image:url("img/tarrow.gif"); background-position:bottom right}
div.dynarch-horiz-menu table tr td.hover, div.dynarch-horiz-menu table tr td.active{
  /* Styles for hover items in the main menu bar */
	background-color:#000;
	background-image:url("img/tarrow.gif");
	color:#fff; 
    height:22px;
}
/****************************************************
	(2) THE POPUP MENUS
*****************************************************/

div.dynarch-popup-menu {
	/* This is the element containing a single popup menu.  Many other elements are inside it,
		but you normally only need to mess with this one and with <table> and <td> elements. */

	background:#000;		/* light yellow background */
	padding:0px;				/* An ugly, 10 pixels, padding. */
	border:none;
    				/* a thick red border. */
}

div.dynarch-popup-menu table td {
  /* This table contains popup menu items.  It's a good place to configure fonts. */

	padding-left:5px; padding-right:0px;
	padding-top:3px; padding-bottom:3px;
	font:12px verdana; /* customize popup menu fonts */
	color:#fff;
    /* make sure they are initially dark red */
}

div.dynarch-popup-menu tr.item.hover td, div.dynarch-popup-menu tr.item.active td{
  /* Set the style for hovered items. */
  background-color:#8E0E0D;
  color:#fff;
}

div.dynarch-popup-menu tr.separator td{padding-left:0px}
div.dynarch-popup-menu tr.separator td div {
  /* Here we can configure the horizontal separator style. */
  background-color:#80A45A;        /* give it a red background in order to have a red line as separator. */

  /* Let's space it "properly" ;-) */
  margin-top:10px;
  margin-bottom:10px;
  
}