/* Main menu styles for handheld devices with NO hovering capabilities */
/*@media only screen and (max-resolution: 190dpi) {*/
/*  did not work:
@media only screen and (min-resolution: 190dpi) {
@media (min-resolution: 190dpi) {
only screen and (                min-resolution: 2dppx) {
    
     
 worked for my samsung, but not for iPad/Safari:
@media (-webkit-min-device-pixel-ratio: 1.5),  -- for all things webkit (Chrome, Safari, iOS and Android)
        (min-resolution: 144dpi) { --or those browsers that understand it (Firefox, IE9+, Opera)

@media (-webkit-min-device-pixel-ratio: 1.05), <-- still did not work for iPad/Safari
        (min-resolution: 100dpi) {

@media (-webkit-min-device-pixel-ratio: 1) and (max-width: 800px), ---  did not work for sumsung
*/

/*Note: the syntax below does not work for Firefox. Message: Expected media feature name but found '-webkit-min-device-pixel-ratio'.*/
@media (-webkit-min-device-pixel-ratio: 1) and (max-width: 1000px), /* for Safari 1 - standard display, 2 - retina display; but width is always 768*/
        (min-resolution: 144dpi) {
   .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 */
    }

    .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:active > a { /* makes top menus black when user clicks */
                background: #000;
                border-color: #eee;
                color: #fff;
            }

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

            .nav li:active ul.subs { /* when user clicks, 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%;
            max-width: 200pt; /* I would like to make width smaller,  but this causes menu items spread horizontally. */
        }



            .nav ul li a {
                background: #000; /* color of dropdown menu */
                /*border-color: #4a4a4a;*/
                color: #aaa; /* color of inactive links */
                line-height: 25px;
            }

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