/* Navigation Stylesheet for Scheuerl.net */
/* peter@scheuerl.net */
/* Applies:  A L L  Browsers */

/* 
<!-- #bbinclude "filestat.pl" -->
                              Filename:     css_navigation.css
                              Filesize:     7904 Byte
                              Last update:  31-May-2010 14:06 +1200
<!-- end bbinclude -->
*/


/* Element to select language z-index 999 given here should be the highest used on the page */
#languages 
	{margin: 0; padding: 5px 5px 0 5px; height: 20px; position: absolute; right: -5px; top: -30px; z-index: 99;
	border-width: 5px 5px 0 5px; border-style: solid; border-color: #ede8e1;
	color: #c2b299; background: #fff; font-size: .9em;}

/* For making it work in Opera: display: inline-block would have to go away and activel floated right -> also change the order in html and test across all browsers */
#languages .activel 
	{padding-right: 13px; display: inline-block; position: relative;
	color: #000; background: url(arrow_orange_down_small.gif) right 2px  no-repeat;}

#languages .activel ul 
	{margin: 0; padding: 3px 0; display: none; position: absolute; right: 0; top: 0;
	background: #ede8e1; border: 1px solid #c2b299;}
	
#languages .activel:hover ul, #languages .activel:focus ul, #languages .activel ul:hover
	{display: block; opacity: .9;}


#languages li {margin: 0; padding: 0 1px; list-style: none; white-space: nowrap; text-align: right; font-size: 1.1em;}
#languages li a:link, #languages li a:visited {display: block; padding: 3px 5px; color: #55402c;}
#languages li a:hover, #languages li a:focus, #languages li a:active {background: #c2b299; color: #fff; text-decoration: none;}

/* Metanavigation */
#topmetanav {margin: 0; padding: 0; list-style: none;}
#topmetanav li {margin: 0 -2px 0 0; padding: 0; display: inline; white-space: nowrap; font-size: .95em; line-height: 2em;}
#topmetanav li a {margin: 0; padding: 0; display: inline-block; width: 8em; text-align: center; text-decoration: none; color: #5f5b53; background: #fff;}
#topmetanav li a:hover, #topmetanav li a:focus {background: #c2b299; color: #fff;}

/* Main Navigation */

#nav 
	{margin: 15px 5px 15px 5px; padding: 15px 5px 10px 15px; position: relative; border: none;
	font-size: 1.4em; background: #aabfd3; color: #fff;} /* This color defines the dots between the navigation items */

#nav ul.mainnav {margin: 0; padding: 0; list-style: none;}

#nav ul.mainnav li.first {margin-left: 0;}

#nav ul.mainnav li {float: left; margin: 0 2px 3px 0; padding: 0; white-space: nowrap;}

#nav ul.mainnav li a:link, #nav ul.mainnav li a:visited {margin: 0 2px 0 0; padding: 2px;}

/* In case there should be extra font colours in the navigation to highlight some items */
#nav .mainnav a.highlight1 {color: #5f5b53;}

#nav .mainnav a.highlight2 {color: #cc6600;}

/* Link colors */
#nav a:link, #nav a:visited  {color: #fff; background: transparent;}

#nav a.act:link, #nav a.act:visited, #nav a.act:hover, #nav a.act:focus, #nav a.act:active, 
#nav a:hover, #nav a:focus, #nav a:active, #nav li:hover a:link, #nav li:focus a:link, #nav li:hover a:visited 
	{background: #fff; color: #ff9c00; text-decoration: none;}

/* Subnav1 inactive */
#nav li:hover .subnav1 a:link, #nav li:hover .subnav1 a:visited,
#nav li:focus .subnav1 a:link, #nav li:focus .subnav1 a:visited 
	{margin: 0; padding: 4px 12px 4px 12px; display: block; color: #5f5b53; background: transparent;}

#nav li:hover .subnav1 a:hover, #nav li:hover .subnav1 a:focus, #nav li:hover .subnav1 a:active,
#nav li:focus .subnav1 a:hover, #nav li:focus .subnav1 a:focus, #nav li:focus .subnav1 a:active,
#nav li:hover .subnav1 li:hover a:link, #nav li:hover .subnav1 li:hover a:visited 
	{text-decoration: none; color: #000; background: transparent;}

/* elements with subnav image (eg arrow) showing up on hover */
#nav li:hover .subnav1 .hassub a:link, #nav li:hover .subnav1 .hassub a:visited 
	{background: transparent;}

#nav li:hover .subnav1 .hassub a:hover, #nav li:hover .subnav1 .hassub a:active,
#nav li:hover .subnav1 li.hassub:hover a:link, #nav li:hover .subnav1 li.hassub:hover a:visited 
	{background: transparent;}

/* background for highlight subnav li:hover NOT a:hover */
#nav li:hover .subnav1 li:hover {background: #faf9f7;}

/* subnav 2 */
#nav li:hover .subnav1 li:hover .subnav2 li:hover {background: #fff;}

#nav li:hover .subnav1 li:hover .subnav2 a:link, #nav li:hover .subnav1 li:hover .subnav2 a:visited 
	{color: #666; background: transparent; padding: 3px 12px 3px 25px;	border-top: 1px dashed #999;}

#nav li:hover .subnav1 li:hover .subnav2 a:hover, #nav li:hover .subnav1 li:hover .subnav2 a:active 
	{background: #c2b299; color: #fff; text-decoration: none;}

/* Make things only positioned relative on hover to get around IE 6 z-index bug */
#nav ul.mainnav li:hover, #nav ul.mainnav li:focus {position: relative;}

/* apparently for IE6 to have the links working on pngs, the background png has to have a certain dimension, 2h x 10w is a working one */
#nav ul.mainnav ul.subnav1 li, #nav ul.mainnav ul.subnav2 li 
	{margin: 0; padding: 0; float: none; width: 190px; white-space: normal; border: none;}
	/* if there should be a border around the subnav, ONLY border left and  right here, top and bottom are defines in ul.subnav1 and ul.subnav2  further down */
	

/* Background colour for the first subnav inactive elements */
#nav ul.mainnav ul.subnav1 li {background-color: #ede8e1; }/* design: faf9f7, but thats not enough contrast on LCD's */

/* Background colour for the second subnav inactive elements */
#nav ul.mainnav ul.subnav2 li {background-color: #ede8e1;}

#nav li:hover .subnav1 li.first a:link, #nav li:hover .subnav1 li.first a:visited,
#nav li:hover .subnav1 li:hover .subnav2 li.first a:link, #nav li:hover .subnav1 li:hover .subnav2 li.first a:visited 
	{border-top: none;}

ul.subnav1, ul.subnav2 
	{margin: 0; padding: 0; position: absolute; display: none; float: none; list-style: none;}

/* to define top and bottom border of dynamic subnav level 1, the side colors are defined above*/
ul.subnav1 {border-top: 1px solid #aabfd3; border-bottom: none;}

/* to define top and bottom border of dynamic subnav level 2 */
ul.subnav2 {border: none;}

ul.subnav1 {left: 0px; font-size: .8em;	z-index: 90;}

ul.subnav2 {
	left: 190px; /* depends on width of subnav1 AND borderwidth of subnav1 */
	top: 0px; /* depends on width of subnav1 upper border */
	z-index: 90;
	}

#nav li:hover ul.subnav1, #nav li:focus ul.subnav1,
#nav ul.subnav1 li:hover ul.subnav2, #nav ul.subnav1 li:focus ul.subnav2
{display: block;}

/* ##################    END TOP MAIN NAVIGATION   ################## */

/* ################## START SUB NAVIGATION ON SIDE ################## */

.themenav .level1 
	{float: none; list-style: none; margin: 0; padding: 10px 0; border-top: 2px solid #aabfd3; background: #fff;}

.themenav .level2 
	{float: none; list-style: none; margin: 0; padding: 0; background: #fff;}

/* the whole navigation can be in the sourcecode, as only the active level2 is shown */
.level2 {display: none;}

.act .level2 {display: block;}

.level1 a:link, .level1 a:visited {display: block; color: #55402c; margin: 0; padding: 4px 12px 4px 12px;}

.level1 a:hover, .level1 a:focus, .level1 a:active, 
.level1 li.act a:link, .level1 li.act  a:visited 
	{color: #ff9c00; text-decoration: none;}

.level1 .level2 li a:link, .level1 .level2 li a:visited 
	{display: block; color: #55402c; background: #fff; margin: 0; padding: 4px 12px 4px 20px;}

.level1 .level2 li.first a:link, .level1 .level2 li.first a:visited {border: none;}

.level2 li {background: #fff;}

.level2 li:hover, .level2 li.act {background: #fff; color: #ff9c00;}

.level1 .level2 li a:hover, .level1 .level2 li a:focus, .level1 .level2 a:active,
.level1 .level2 li.act a:link, .level1 .level2 li.act  a:visited 
	{color: #ff9c00; text-decoration: none;}