/*
  Menu-Bar with pull-down menus of any level, implemented in pure CSS

  Lets first define some names:

    - A 'menu' is any menu level

    - The 'menubar' is the first level of the menu and is always visible

    - A 'pulldown' is any higher-level menu (i.e. any menu except for
      the menubar)

    - The 'top pulldown' is the first pulldown level

    - A 'submenu' is any pulldown wich is not a top pulldown

  The complete menu structure is represented in HTML as a simple
  nested list of ul's
*/

body {
	font-family: Verdana,Arial, sans-serif;
	font-size: 10px;
	margin: 0;
	padding: 0 0 10px 0;
}

#head {
	background-color: #DDDDDD;
	height: 100px;
}

#head h1 {
	width: 600px;
	height: 0px;
	overflow: hidden;
	padding-top: 100px;
	margin: 0 auto;
	background: url(images/amigofil.png) no-repeat top left;
}

#menu h2 {
	margin: 0;
	padding: 25px 0 0 0;
	background: url(images/producti.png) no-repeat top left;
	font-weight: normal;
	color: #AAAAAA;
	width:210px;
	float: left;
	font-size: 100%;
}

#menu {
	width: 600px;
	height: 100px;
	overflow: hidden;
	margin: 0 auto 0 auto;
        padding:10px;
}


/* any menu is formated without bullets. We reset margin and padding
   to be empty. */
#menu ul {
        display: inline;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

/* All menu items have this default configuration. Aadditionaly we
   add some settings which are only correct for the menubar.
   Theese are overridden by the next definition */
#menu li  {
	color:#0000FF;
	margin: 0 5px 0 0;
	width: 85px;
	float: right;
	padding-bottom: 5px;
}

/* Override the values to be correct for the pulldown's */
#menu li li {
	margin: 0;
        width: 83px; /* make room for the menu border */
	float: none;
	padding-bottom: 0;
}

#menu li li li {
        width: 110px;
}

/* Und so werden alle links level 1 formatiert. Zusätzlich einige Infos für
   die links der ersten Ebene. Die werden weiter unten überschrieben. */
#menu a {
	text-decoration: none;
        text-align: center;
	display: block;
	color: #9C9A9A;
	padding: 0px 2px;
        font-size: 10px;
        font-family: sans-serif;
	background-color: #FFFFFF;
	border: 1px solid #9C9A9A;
}

/* Und so werden alle links level 2 formatiert. Zusätzlich einige Infos für
   die links der ersten Ebene. Die werden weiter unten überschrieben. */
#menu li li a {
	background-color: #FFFFFF;
        color: #9C9A9A;
        text-align: left;
}

#menu a:hover {
	text-decoration: none;
        color: #FFFFFF;
        background-color: #FC7216;
        border: 1px solid #FC7216;
}

#menu li li a:hover {
	text-decoration: none;
        color: #FC7216;
        background-color: #FFFFFF;
        border: none;
}

/* Dieser Selektor wählt nun alle Aufklappmenüs aus und blendet sie
   aus. Es werden auch die Standardwerte gesetzt. Diese werden für
   alle weiteren Ebenen dann im folgendne überschrieben.

   IE note: Hier keinen Child selektor verwenden da der IE sonst den
   ganzen Kladderadatsch einblendet bis das IE7 zeugs geladen wird ...
   sieht dann ziemlich doof aus */
#menu li ul {
	display: none;
	/*z-index:1;*/
        width: 83px;
	margin: 5px 0 0 0;
}

#menu li ul ul{
	border: 1px solid #9C9A9A;
}

/* Dieser Selektor gild für alle Untermenüs */
#menu li li ul {
	/*margin: -15px 0 0 93px;*/
        margin: -15px 0 0 50px;
        width: 110px;
}

/* Dieser Selektor betrifft alle aktiven untermenüs */
#menu li:hover>ul {
	visibility: visible;
	display: block;
	position:absolute;
}

/* Dieser selektor gilt für aktive links level 1 */
#menu li:hover a {
	background-color: #FC7216;
        color: #FFFFFF;
        border: solid 1px #FC7216;
}

/* Dieser selektor gilt für aktive links level 2 */
#menu li:hover li a {
	background-color: #FFFFFF;
        color: #9C9A9A;
        border: none;
}

/* Dieser selektor gilt für aktive links level 2, wenn es zusätzlich ein hover in level 2 gibt*/
#menu li:hover li a:hover {
	background-color: #FFFFFF;
        color: #FC7216;
        border: none;
}

/* Hier werden die Menüpfeile eingefügt */
#menu li li a:not(:last-child) {
	/* Hier *nicht* zu 'background' zusammenfassen,
           sonst wirkt das background-color im vorigen
           selektor nicht merh !! */
        background-image: url(images/pfeil.jpg);
	background-position: 76px center;
	background-repeat: no-repeat;
}

#content {
        clear: both;
	width: 540px;
	margin: 0 auto;
	padding: 10px 20px 20px 40px;
	border: #CCCCCC solid 1px;
	font-size: 12px;
        color: #AAAAAA;
        text-align:justify;
        /*overflow: auto;*/
}

#content h1 {
	color: #FF7518;
	font-weight: normal;
	width: 520px; /* Für IE wegen resize und horz Scrollbalken */
}

#content p {
	width: 520px; /* für IE wegen resize und horz Scrollbalken */
}

#link a {
        color: #AAAAAA;
        text-decoration: none;
}

#link a:hover {
        color: #FC7216;
        text-decoration: none;
}