/*
 * NEW NEW NEW
 * Navigation menu
 */
.nav-menu {
    font-weight: normal;
    /*height: 45px;*/ /*TODO fix when overflow: hidden is removed from .nav-menu ul*/
     /*TODO display: inline-block instead of inline solved the low heighet. But nav menu is not as wide as the screen. Moved to ul solved the problem.*/
    /*padding: 0.2em 0.3em 0.03em 0.3em;*/
    /*
    padding: 6px 5px 6px 5px;
   border: 1px solid #000;
    border-radius: 10px;
    box-shadow: 4px 4px 3px #000;
    */
    /*
    border-color: #8C6C44;
    */
   /*
    border-width: 2px;
    border-style: outset;
*/
   /*
   background: -webkit-gradient(linear, left top, left bottom, from(#D7B589), to(#8C6C44));
   background: -webkit-linear-gradient(top, #D7B589, #8C6C44);
   background: -moz-linear-gradient(top, #D7B589, #8C6C44);
   background: -ms-linear-gradient(top, #D7B589, #8C6C44);
   background: -o-linear-gradient(top, #D7B589 #8C6C44);
*/
}
.nav-menu--sub {
    font-weight: 500;
}
.nav-menu ul,
.nav-menu--sub ul {

    display: inline-block;
    list-style-type: none;
    /*overflow: hidden;*//*TODO hides sub menu, problem floated elements*/

    padding-left: 0;
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}
/*
.nav-menu--dropdown ul {
    overflow:visible;
}*/
.nav-menu li {

    margin: 0;
    margin-right: 4px;
    padding: 0;
    position: relative; /* New - to place the drop-down menu correctly, makes it vertical instead of horizontal */
}
.nav-menu a,
.nav-menu .button  {
    white-space: nowrap; /* New - to make the drop-down menu items stay on one row */
}

.nav-menu a,
.button,
.form input[type=radio] + label,
.form input[type=checkbox] + label {
    background: #B5A9F0;
    background: #e1e1ff;

    background: transparent;

    padding: 0.3em 0.3em 0.3em 0.3em;
/*
    font-family: Great Vibes, Tahoma, Geneva, sans-serif;
    font-size: 22px;
*/
    text-decoration:none;

    /*
    border: 1px solid #D7B589;
    */


    /*to make it look nice*/
   /*
   border: 1px;

   border-color: #B5A9F0;

   border-style: outset;

   background: -webkit-gradient(linear, left top, left bottom, from(#B5A9F0), to(#8579C0));
   background: -webkit-linear-gradient(top, #B5A9F0, #8579C0);
   background: -moz-linear-gradient(top, #B5A9F0, #8579C0);
   background: -ms-linear-gradient(top, #B5A9F0, #8579C0);
   background: -o-linear-gradient(top, #B5A9F0 #8579C0);

   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   */
   border-radius: 2px;

   color: #000;


}
.nav-menu--sub a,
.form input[type=radio] + label,
.form input[type=checkbox] + label{
    padding: 0.15em 0.3em 0.15em 0.3em;

}
.nav-menu a:link,
.nav-menu a:visited {
    color: #000;

}
.nav-menu a:focus,
.nav-menu a:hover,
.button:focus,
.button:hover,
input,
option,
select,
textarea,
.form input[type=radio]:hover + label,
.form input[type=checkbox]:hover + label
{
  /*
   border-style: inset;
   background: -webkit-gradient(linear, left top, left bottom, from(#B5A9F0), to(#8579C0));
   background: -webkit-linear-gradient(bottom, #B5A9F0, #8579C0);
   background: -moz-linear-gradient(bottom, #B5A9F0, #8579C0);
   background: -ms-linear-gradient(bottom, #B5A9F0, #8579C0);
   background: -o-linear-gradient(bottom, #B5A9F0 #8579C0);
   */
   background: #E4DFFD;
  background: #fafaff;


}
.main .nav-menu a:focus,
.main .nav-menu a:hover,
.main .button:focus,
.main .button:hover {
  background: #e1e1ff;
}
/*
selected menu item
*/
.nav-menu .is-selected,
.button .is-selected
 {
    background: #B5A9F0;
    background: #fafaff;
    /*
    background: transparent;
    border: 1px solid #fff;
    box-shadow: inset 0 0 6px #fff;
    */

}
.main .nav-menu .is-selected,
.main .button .is-selected,
.form input[type=radio]:checked + label,
.form input[type=checkbox]:checked + label {
  background: #e1e1ff;
}


.navmenu a:active  { }
/* Vertical navigation menu */
.nav-menu--vertical li {
    padding: 5px;
    margin: 5px;
    margin-left: 0;
}
.nav-menu--vertical a {
}
/* Horizontal navigation menu */
.nav-menu--horizontal li {
    float: left; /* alt 1 to make it horizontal */
    /*display: inline;*/ /* alt 2* to make it horizontal*/
}
.nav-menu--horizontal a {
    display: block; /* alt 1* to make it horizontal*/
    /*margin: 5px;*/
}
.nav-menu--sub a {
    margin-right: 2px;
}
/*
 * Drop down menu
 */
/* New - to style the submenu, start by hiding it using absolute positioning */
.nav-menu--dropdown{
  padding: 6px;
  position: absolute;
  left: -10000px;
  z-index: 2;


}
/* Display the submenu when hovering the list element, absolute positioning */
.nav-menu li:hover .nav-menu--dropdown {
  left: 0;
}

/* New - style items of the submenu when hovering and selected */
.nav-menu--dropdown li a:hover,
.nav-menu--dropdown li a.is-selected {

}