/* Main menu styles for desktops and laptops with hovering capabilities */
/* @media only screen and (max-resolution: 120dpi) { -- commented out because of Safari*/
@media all { /* Applies for everything, and might get overriden by settings from mainMenuNoHovering.css - if the @media detection condition holds */
    .main_menu {
        position: relative;
        white-space: nowrap;
        top: 33px; /* 70 - 37 */
        left: 83px; /* 83 to align left edge with logo; 470 to align right edge of the menu with right edge of soc. buttons */
        width: 700px; /* should be <= 1000 - 83; not needed if header's position fixed */
        margin-left: auto;
        margin-right: auto;
    }

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

    .nav {
        position: relative;
    }

        .nav ul {
            position: absolute;
            height: 0;
            overflow: hidden;
        }

        .nav li { /* makes top menus be placed horizontally. */
            float: left;
            position: relative;
        }

            .nav li a { /* transition - switch top menu from white to black in 0.5s*/
                transition: 0.5s;
                -moz-transition: 0.5s;
                -o-transition: 0.5s;
                -webkit-transition: 0.5s;
                background-color: #ffffff;
                /*border: 0px solid #eee;*/
                color: #000;
                display: block;
                font-size: 16px;
                line-height: 25px; /* affects height of top menu items (and submenus). Decrease for handheld? */
                padding: 6px 15px; /* 6px affects height of top menu items; 15px - spacing between them: if 18px or more - wraps on MAC and Linux */
                text-decoration: none;
            }

            .nav li:hover > a { /*makes top menus black when rolling over*/
                background: #828282;
                /*border-color: #eee;*/
                color: #fff;
            }

            .nav li.current > a {
                background: #000000;
                /*border-color: #eee;*/
                color: #fff;
            }

            .nav li:hover ul.subs { /* when rolling over, makes drop-down menu to drop down, albeit invisibly */
                height: auto;
            }

        .nav ul li { /* transition - make drop-down menu opaque in 0.5s*/
            transition: 0.5s;
            -moz-transition: 0.5s; /*was 0.5s*/
            -o-transition: 0.5s;
            -webkit-transition: 0.5s;
            width: 100%;
            opacity: 0; /* before transition */
        }

        .nav li:hover ul li {
            opacity: 1; /* after transition */
        }

        /* transition - make drop-down menu to change line height in 0.5s; also to change color of the hovered-upon link in 0.5s */
        .nav ul li a {
            background: #000; /* color of dropdown menu */
            /*border-color: #4a4a4a;*/
            color: #828282; /* color of inactive links */
            line-height: 1px; /* initial line height (before transition) */
            transition: 0.5s;
            -moz-transition: 0.5s;
            -o-transition: 0.5s;
            -webkit-transition: 0.5s;
        }

        .nav li:hover ul li a {
            line-height: 25px; /* final line height (after transition) */
        }

        .nav ul li a:hover {
            background: #828282; /* light-grey bg color of hovered submenu item */
        }
}