/* Timo's float-drop CSS-only dropdown menu - simplified

Proudly fetched from:
thinkhtml[dot]blogspot[dotde/2009/09/timos-float-drop-css-only-dropdown-menu.html 
NameD timos-nonjs-navbar.css.

Timo's Terms of use (site online on 2017-11-03):
"The software referenced within this license is distributed free of 
charge and free from any warranty. It may be used freely for any 
purpose whatsoever. The author created and released this work because 
he is genuinely a Nice Person!

Users are encouraged to use, modify, distribute, improve and otherwise 
manipulate the code. After all, it’s free.

The author sincerely hopes that end users enjoy and appreciate the 
hard work that went into creating it, and would appreciate being 
referenced in future modifications of the code since it was based 
on the author’s original concept and work.

Users are nonetheless encouraged to provide reciprocity whenever 
possible as it provides positive reinforcement and encouragement 
to the author. Furthermore, the minimum reciprocation I ask is 
to leave a ‘thank you’."


Comments on this stylesheets:

boders and margins
------------------
"add the border to the links, you can use them as you would normally use them, 
just make sure to compensate for the border added width.

recap on how it all works:
1. a width is specified for the links.
2. the width is removed "almost" completely from the links using negative margin-right.
3. on hover the negative margin-right is removed.

in the above example the link is 300px wide
so it has a negative margin of 299px leaving 1px

this way you can edit the width, by changing the negative margin too.
if you add a border to the links, then the border counts as additional width.

to nudge the links use padding on the links.

if you wish to support IE5, then add some box model fixes."


em or px??
-----------
"Any way a variable sizing unit (like em) could be used for some or all 
of the sizing instead of px. I note that doing a text-only zoom 
causes the menu items to overlap."


Change the width:
-----------------
Change from 300 to 150px wide:

.nav .sub a {
    width:300px;
}
.nav a.main {
    margin-right:-299px;
}

to

.nav .sub a {
    width:150px;
}
.nav a.main {
    margin-right:-149px;
}



images and navbar problems
--------------------------
- Logo image above the navigation bar connot be clicked:

Set it's z-index to above the nav

for example:
#logo {
position:relative;
z-index:100;
}


- Drop down menus are jumping:
add display:inline to .nav .link {}
like so:
.nav .link {
display:inline;
}



/* !! IMPORTANT: Wenn ein Header-Bild auf der
Seite ist, muss in das HTML float:left;
Hier scheint es nicht zu funktionieren */


/* Navbar CSS with a lot of overflows
 _________________________________________________________ */
/* Override Skeleton's link style 
   and remove margins from the submenus. Otherwise
   this navbar will only work for the first link
   per submenu. */
.timos-nav .sub li {
  margin-bottom: 0; } 
/* END link fix */  
  
.timos-nav, .timos-nav ul {
    list-style-type:none;
    margin:0;
    padding:20;

}
.timos-nav a {
    text-decoration:none;
    text-transform: uppercase;
    font-size: 1.0em;
    font-weight: 600;
    letter-spacing: .2rem;    
    padding: .2rem .5rem;
}

/*IE5 list fix*/
.timos-nav .sub li {float:left;}
.timos-nav .sub > li {float:none;}
#navigation {
    position:relative;
    height:35px;
    background:#222;   /* #ebebeb beige */
    z-index:50;
}
.timos-nav {
    position:absolute;
    visibility:hidden;
}
.timos-nav .link {
    width:270px;
    margin-top:-10075px;
    margin-left: 1rem;
    float:left;
}
.timos-nav a {
    position:relative;
    display:block;
    height:20px;
    line-height:20px;
    font-size: 1em;
    text-transform: uppercase;
    font-weight: 800;
    text-decoration:none;
    text-align: center;
    color:#ebebeb;   /* ebebeb beige */
    z-index:1000;   /* Set as high as possible to keep the nav bar above the others */
    visibility:visible;
}
.timos-nav .sub a {
    background: rgba(76, 175, 80, 1.0);   /* rgba(76, 175, 80, 1.0); */
    font-size: em;
    margin:0 -1px 0 0;
    width:270px;
}
.timos-nav .sub {
    float:left;
    background:transparent;  /* #F90 - hide the second navbar with transparent*/
    padding-top:25px;
    margin-top:-25px;
}
.timos-nav a.main {
	/* border-left: solid .5px #ebebeb; */
    background: rgba(76, 175, 80, 0.7); /* Green background with 30% opacity */
	 position: relative;
    width:270px;    /* IMPORTANT!! keep it, otherwise the menu is not shown in very old browsers */
    height:25px;
    line-height:25px;
    margin-top:10075px;
    margin-right:-269px;    /* If .nav .sub a is 150px decrease with 1px to 149px and put a minus before */
    float:left;
}
.timos-nav a.main:hover, .timos-nav a.main:focus, .timos-nav a.main:active {
    margin-right:0;
    background:#000;
    color:#fff;
}
.timos-nav .sub a:hover, .timos-nav .sub a:focus, .timos-nav .sub a:active {
    margin:0 0 0 0;
    background:#555;   /* 555 orange */
    color:#fff;
}
/*empty rule to fix occassional IE6 tabbing bug, one of the weirdest bug's i have seen.*/
a, a:hover, a:active, a:focus {}
/*Opera fix*/
.sub:hover {
    clear:both;
}

/* Hide navbar on small devices */
@media (max-width: 750px) {
.nav-maxi-only {  
  visibility: hidden;
  }  
}



/* ******************************************* */
/* ******************************************* */
/*
/*          MANU BUTTON SMARTPHONE         
/*
/* ******************************************* */
/* MENU für kleine Screens */
/* Kopie von timos-nav -> timos-menu
/* navigation -> menu-button
.timos-nav .sub li {
  margin-bottom: 0; } 
/* END link fix */  
  

.timos-menu-button, .timos-menu-button ul {
    list-style-type:none;
    margin:0;
    padding:20;
}
.timos-menu-button a {
    text-decoration:none;
    text-transform: uppercase;
    font-size: 1.0em;
    font-weight: 600;
    letter-spacing: .2rem; 
    margin-bottom: -1rem;  
}

/*IE5 list fix*/
.timos-menu-button .sub li {float:left;}
.timos-menu-button .sub > li {float:none;}
#menu-button {
    position:relative;
    height:35px;
    background:#222;   /* #ebebeb beige */
    z-index:10;
}
.timos-menu-button {
    position:absolute;
    visibility:hidden;
}
.timos-menu-button .link {
    width:270px;          /* Change other width's also */
    margin-top:-10075px;
    margin-left: 1rem;
    float:left;
}
.timos-menu-button a {
    position:relative;
    display:block;
    height:20px;
    line-height:20px;
    font-size: 1em;
    text-transform: uppercase;
    font-weight: 800;
    text-decoration:none;
    text-align: center;
    vertical-align: middle;
    color:#ebebeb;   /* ebebeb beige */
    z-index:1000;   /* Set as high as possible to keep the nav bar above the others */
    visibility:visible;
}
.timos-menu-button .sub a {
    background: rgba(76, 175, 80, 0.7);   /* plum */
    font-size: em;
    margin:0 -1px 0 0;
    padding-bottom: .5rem;
    width:270px;          /* Change other width's also */
} 
.timos-menu-button .sub {
    float:left;
    background: rgba(76, 175, 80, 1.0);  /* #F90 */
    padding-top:25px;
    margin-top:-25px;
        margin-bottom: 10px; 
}
.timos-menu-button a.main {
	/* border-left: solid .5px #ebebeb; */
    background: rgba(76, 175, 80, 0.7); /* Green background with 30% opacity */
	 position: relative;
    width:270px;    /* IMPORTANT!! keep it, otherwise the menu is not shown in very old browsers */
    height:25px;
    line-height:25px;
    margin-top:10075px;
    margin-right:-269px;    /* If .nav .sub a is 150px decrease with 1px to 149px and put a minus before */
    float:left;
}
.timos-menu-button a.main:hover, .timos-menu-button a.main:focus, .timos-menu-button a.main:active {
    margin-right:0;
    background:#000;
    color:#fff;
}
.timos-menu-button .sub a:hover, .timos-menu-button .sub a:focus, .timos-menu-button .sub a:active {
    margin:0 0 0 0;
    background:#555;
    color:#fff;
}


/* Show navbar only on small devices */
@media (max-width: 750px) {
.nav-small-only {    /* show browser friendly navbar only on large devices */
  visibility:visible;
  }    
}






/* Remove the fixed height of the submenu 
/* Debugging... */
.nav .sub a {
	 height:auto;}