html{
    background:#ffffff;
}
body{
    font-family:
        "Lucida Grande",
        sans-serif;
    margin:0;
    background:
        linear-gradient(
            to bottom,
            #ffffff 0px,
            #fafafa 400px,
            #dedede 800px
        );
    background-repeat:no-repeat;
}

.apple-nav {
    width:980px;
    height:36px;
    margin:20px auto;
    border-radius:5px;
    background:
    linear-gradient(
        to bottom,
        #5c5c5c 0%,
        #757575 10%,
        #5e5e5e 45%,
        #6f6f6f 50%,
        #8f8f8f 90%,
        #4d4d4d 100%
    );
    box-shadow:
        0 1px 3px rgba(0,0,0,.8),
        inset 0 1px 0 rgba(255,255,255,.35),
        inset 0 -1px 0 rgba(0,0,0,.8);
    overflow:hidden;
}

.nav-inner {
    display:flex;
    height:36px;
    align-items:center;
}
.nav-inner a {
    height:36px;
    width:112px;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#f5f5f5;
    font-size:14px;
    text-decoration:none;
    text-shadow:
        0 -1px 1px #000;
    box-sizing:border-box;
    transition:.15s ease;
}

.apple-logo {
    width:70px;
    font-size:18px;
    line-height:1;
}

.nav-inner a:hover {
    background:
    linear-gradient(
        to bottom,
        #2e2e2e 0%,
        #3b3b3b 10%,
        #2f2f2f 45%,
        #383838 50%,
        #484848 90%,
        #272727 100%
    );
    box-shadow:
    inset 0 0 15px rgba(255,255,255,.25);
}
.nav-inner a:active {
    background:
    linear-gradient(
        to bottom,
        #252525 0%,
        #2f2f2f 10%,
        #262626 45%,
        #2c2c2c 50%,
        #393939 90%,
        #1f1f1f 100%
    );
}

.search-box{
    margin-left:auto;
    height:22px;
    display:flex;
    align-items:center;
    position:relative;
    padding-left:8px;
    padding-right:8px;
}
.search-box input{
    width:80px;
    height:18px;
    border-radius:11px;
    border:1px solid #555;
    background:
    linear-gradient(
    to bottom,
        #5c5c5c 0%,
        #757575 10%,
        #5e5e5e 45%,
        #6f6f6f 50%,
        #8f8f8f 90%,
        #4d4d4d 100%
    );
    box-shadow:
    inset 0 1px 2px rgba(0,0,0,.6),
    0 1px 0 rgba(255,255,255,.25);
    color:white;
    padding-left:26px;
    padding-right:12px;
    font-size:12px;
    outline:none;
    transition:
        width .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        filter .25s ease;
}
.search-box input:focus{
    width:190px;
    background:
    linear-gradient(
        to bottom,
        #fff 0%,
        #ddd 100%
    );
    color:#333;
    border-color:#999;
    box-shadow:
        0 0 3px rgba(0,120,255,.7),
        inset 0 1px 2px rgba(0,0,0,.2);
    filter:
        brightness(1.05);
}

.magnify{
    position:absolute;
    left:13px;
    top:4px;
    width:7px;
    height:7px;
    border:2px solid #aaa;
    border-radius:50%;
    z-index:2;
    pointer-events:none;
    flex-shrink:0;
}
.magnify:after{
    content:"";
    position:absolute;
    width:6px;
    height:2px;
    background:#aaa;
    right:-5px;
    bottom:-2px;
    transform:rotate(45deg);
    transform-origin:left center;
}