/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML ELEMENTS */
h1 { font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; text-align: center; color: #000; font-size:60px; letter-spacing:-1px; }
h1 small{ font-size: 24px; display: block; color: #636363; }

/* COMMON CLASSES */
.break { clear:both; }


/* APPLE STYLE NAVIGATION MENU */
#appleNav { margin:10px 0; list-style:none;

    /* Lucinda Grande is the font used on the website from Apple. */
    font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.5px; font-size:14px;
    
    /* Apply a subtle text-shadow to the text */
    text-shadow: 0 1px 2px #202020;

    /* We want to add the shadow to the complete navigation menu. In order to do that, we'll need to set
    the correct width and height, and also the correct borders, in order to create the perfect drop shadow */
    width:980px; height:34px;
    
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    
    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
}

/*normal button colors*/
#appleNav li { display:block; float:left; border-right:1px solid #CCC; border-left:1px solid #CCC; width:105px; height:34px; border-bottom:1px solid #f8a0ba; border-top:1px solid #f8a0ba;

    /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #f8a0ba), color-stop(0.5, #f8a0ba), color-stop(0.51, #f8a0ba), color-stop(1, #f8a0ba));
    background-image: -moz-linear-gradient(center bottom, #f8a0ba 0%, #f8a0ba 50%, #f8a0ba 51%, #f8a0ba 100%);
    background-color:#f8a0ba; /* E9E9E9F f599b4 allback */
}

/* Set the states when hovering, except for the last item in the list (the search bar), since it doesn't need to change */
#appleNav li:not(:last-child):hover {/*button colors when hover*/
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #F39), color-stop(0.5, #F39), color-stop(0.51, #F39), color-stop(1, #F39));
    background-image: -moz-linear-gradient(center bottom, #F39 0%, #F39 50%, #F39 51%, #F39 100% );
    background-color:#F39; /*383838 FAD1F3 fd7ba1Fallback */
    
    /* We use the inset of the box shadow to create a subtle inner glow when hovering */
    -moz-box-shadow: inset 0 0 5px 5px #F39;
    -webkit-box-shadow: inset 0 0 5px 5px #F39;
    box-shadow: inset 0 0 5px 5px #F39;
}

.active li{
	    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #F39), color-stop(0.5, #F39), color-stop(0.51, #F39), color-stop(1, #F39));
    background-image: -moz-linear-gradient(center bottom, #F39 0%, #F39 50%, #F39 51%, #F39 100% );
    background-color:#F39; /*383838 FAD1F3 fd7ba1Fallback */
    
    /* We use the inset of the box shadow to create a subtle inner glow when hovering */
    -moz-box-shadow: inset 0 0 5px 5px #F39;
    -webkit-box-shadow: inset 0 0 5px 5px #F39;
    box-shadow: inset 0 0 5px 5px #F39;
	
}
/* When the user clicks the button, we simply change the box inset (compared to the "hover") */
#appleNav li:not(:last-child):active {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838; /* Fallback */
    
    -moz-box-shadow: inset 0 1px 2px 2px #000;
    -webkit-box-shadow: inset 0 1px 2px 2px #000;
    box-shadow: inset 0 1px 2px 2px #000;
}

#appleNav li a { color:#FFF; text-decoration:none; text-align:center; display:block; line-height:34px; outline:none; }/*font color of the menu*/

/* Styling of the search field */
#appleNav form input { width:81px; height:20px; margin-left:4px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#FFF; font-weight:bold;

    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;

    /* We use the CSS3 multiple backgrounds for the input field: The magnifier image and the gradient background */    
    background-image: url("../images/magnifier.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #747474), color-stop(0.5, #6E6E6E), color-stop(0.51, #7E7E7E), color-stop(1, #8D8D8D));
    background-image: url("../images/magnifier.png"), -moz-linear-gradient(center bottom, #fd7ba1 0%, #fd7ba1 50%, #fd7ba1 51%, #fd7ba1 100%);
    background-repeat: no-repeat;
    
    background-color:#999; /* FFF Fallback */
    
    -moz-box-shadow: inset 0 1px 1px 2px #363636;
    -webkit-box-shadow: inset 0 1px 2px 1px #363636;
    box-shadow: inset 0 1px 2px 1px #363636;
}

/* Rounded corner for the first in last item. Shorthand: Top left, Top right, Bottom right, Bottom left.
We also remove the borders, since they don't need them. */
#appleNav li:first-child {
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px 0 0 4px;
    border-radius:4px 0 0 4px;
    
    border-left:none;
}

/* The first child image - the logo - has to be centered. Because of the image dimensions, we manually need to shift it a bit. */
#appleNav li:first-child a img {
   vertical-align:middle; margin-top:-2px;
}

#appleNav li:last-child {
    -moz-border-radius:0 4px 4px 0;
    -webkit-border-radius:0 4px 4px 0;
    border-radius:0 4px 4px 0;
    
    border-right:none;
    
    /* The width of the last menu item (search bar) is bigger than the others */
    width:124px;
}

/* Fade in animation (Webkit only) */
@-webkit-keyframes showMenu {
    from { opacity: 0; top:-20px; }
    to   { opacity: 1; }
}

#appleNav {
     -webkit-animation: showMenu 1s; position:relative;
}