/*
                                __      _ _                   _   
                               / _|    | (_)                 | |  
 _ __ ___   __ _ _ __ ___ ___ | |_ ___ | |_  ___   _ __   ___| |_ 
| '_ ` _ \ / _` | '__/ __/ _ \|  _/ _ \| | |/ _ \ | '_ \ / _ \ __|
| | | | | | (_| | | | (_| (_) | || (_) | | | (_) || | | |  __/ |_ 
|_| |_| |_|\__,_|_|  \___\___/|_| \___/|_|_|\___(_)_| |_|\___|\__|
                                                                  
*/

/* 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 */

/* CONTENT */
#content { margin-top:0px; }
#content p { font: 14px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; color:#333333; line-height:18px; margin:15px auto; width:800px; }
#content p a { color:#0088CC; text-decoration:none; }
#content p a:hover { text-decoration:underline; }

/* APPLE STYLE NAVIGATION MENU */
#appleNav { margin:0px 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:12px;
    
    /* Apply a subtle text-shadow to the text */
    text-shadow: 0 -1px 3px #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:24px;
    
    -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;
    behavior: url(PIE.php);
}

#appleNav li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:120px; height:24px; border-bottom:1px solid #575757; border-top:1px solid #797979;

    /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f; /* Fallback */
    behavior: url(PIE.php);
}

/* 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:hover {
    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 */
    
    /* We use the inset of the box shadow to create a subtle inner glow when hovering */
    -moz-box-shadow: inset 0 0 5px 5px #535353;
    -webkit-box-shadow: inset 0 0 5px 5px #535353;
    box-shadow: inset 0 0 5px 5px #535353;
    behavior: url(PIE.php);
}

/* When the user clicks the button, we simply change the box inset (compared to the "hover") */
#appleNav li: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;
    behavior: url(PIE.php);
}

#appleNav li a { color:white; text-decoration:none; text-align:center; display:block; line-height:24px; outline:none; }

/* Styling of the search field */
#appleNav form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;

    -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, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
    background-repeat: no-repeat;
    
    background-color:#6E6E6E; /* Fallback */
    
    -moz-box-shadow: inset 0 2px 1px 1px #363636;
    -webkit-box-shadow: inset 0 2px 1px 1px #363636;
    box-shadow: inset 0 2px 1px 1px #363636;
    behavior: url(PIE.php);
}

/* 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;
    behavior: url(PIE.php);
}

/* 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:-4px;
    behavior: url(PIE.php);
}

#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;
    behavior: url(PIE.php);
    
    /* The width of the last menu item (search bar) is bigger than the others */
    width:126px;
}

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

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

a img {border: none;}





/* TITLE BAR */
#appleNav.titlebar { margin:0px 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:12px;
    
    /* Apply a subtle text-shadow to the text */
    text-shadow: 0 -1px 3px #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:24px;
    
    -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;
    behavior: url(PIE.php);
}

#appleNav.titlebar li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:736px; height:24px; border-bottom:1px solid #575757; border-top:1px solid #797979;

    /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f; /* Fallback */
    behavior: url(PIE.php);
}



#appleNav.titlebar li a { color:white; text-decoration:none; text-align:center; display:block; line-height:24px; outline:none; }

/* Styling of the search field */
#appleNav.titlebar form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;

    -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, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
    background-repeat: no-repeat;
    
    background-color:#6E6E6E; /* Fallback */
    
    -moz-box-shadow: inset 0 2px 1px 1px #363636;
    -webkit-box-shadow: inset 0 2px 1px 1px #363636;
    box-shadow: inset 0 2px 1px 1px #363636;
    behavior: url(PIE.php);
}

/* 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.titlebar li:first-child {
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px 0 0 4px;
    border-radius:4px 0 0 4px;
    width:120px;
    border-left:none;
    behavior: url(PIE.php);
}

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

#appleNav.titlebar li:last-child {
    -moz-border-radius:4px 4px 4px 4px;
    -webkit-border-radius:4px 4px 4px 4px;
    border-radius:4px 4px 4px 4px;

    border-right:none;
    behavior: url(PIE.php);
    
    /* The width of the last menu item (search bar) is bigger than the others */
    width:980px;
}

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

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

/* Set the states when hovering, except for the last item in the list (the search bar), since it doesn't need to change */
#appleNav.titlebar li:hover {

    
    /* We use the inset of the box shadow to create a subtle inner glow when hovering */
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    behavior: url(PIE.php);

}

a img {border: none;}




/* TITLE BAR 3 */
#appleNav.titlebar3 { margin:0px 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:12px;
    
    /* Apply a subtle text-shadow to the text */
    text-shadow: 0 -1px 3px #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:24px;
    
    -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;
    behavior: url(PIE.php);
}

#appleNav.titlebar3 li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:600px; height:24px; border-bottom:1px solid #575757; border-top:1px solid #797979;

    /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f; /* Fallback */
    behavior: url(PIE.php);
}



#appleNav.titlebar3 li a { color:white; text-decoration:none; text-align:center; display:block; line-height:24px; outline:none; }

/* Styling of the search field */
#appleNav.titlebar3 form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;

    -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, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
    background-repeat: no-repeat;
    
    background-color:#6E6E6E; /* Fallback */
    
    -moz-box-shadow: inset 0 2px 1px 1px #363636;
    -webkit-box-shadow: inset 0 2px 1px 1px #363636;
    box-shadow: inset 0 2px 1px 1px #363636;
    behavior: url(PIE.php);
}

/* 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.titlebar3 li:first-child {
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px 0 0 4px;
    border-radius:4px 0 0 4px;
    width:188px;
    border-left:none;
    behavior: url(PIE.php);
}

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

#appleNav.titlebar3 li:last-child {
    -moz-border-radius:0px 4px 4px 0px;
    -webkit-border-radius:0px 4px 4px 0px;
    border-radius:0px 4px 4px 0px;

    border-right:none;
    behavior: url(PIE.php);
    
    /* The width of the last menu item (search bar) is bigger than the others */
    width:188px;
}

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

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

/* Set the states when hovering, except for the last item in the list (the search bar), since it doesn't need to change */
#appleNav.titlebar3 li:hover {

    
    /* We use the inset of the box shadow to create a subtle inner glow when hovering */
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    behavior: url(PIE.php);

}

/* When the user clicks the button, we simply change the box inset (compared to the "hover") */
#appleNav.titlebar3 li:not(:last-child):active { 

    /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f; /* Fallback */
    behavior: url(PIE.php);
}


/* TITLE BAR CENTER COLUMN*/
#appleNav.titlebarcc { margin:0px 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:12px;
    
    /* Apply a subtle text-shadow to the text */
    text-shadow: 0 -1px 3px #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:520px; height:24px;
    
    -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;
    behavior: url(PIE.php);
}

#appleNav.titlebarcc li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:736px; height:24px; border-bottom:1px solid #575757; border-top:1px solid #797979;

    /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f; /* Fallback */
    behavior: url(PIE.php);
}



#appleNav.titlebarcc li a { color:white; text-decoration:none; text-align:center; display:block; line-height:24px; outline:none; }

/* Styling of the search field */
#appleNav.titlebarcc form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;

    -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, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
    background-repeat: no-repeat;
    
    background-color:#6E6E6E; /* Fallback */
    
    -moz-box-shadow: inset 0 2px 1px 1px #363636;
    -webkit-box-shadow: inset 0 2px 1px 1px #363636;
    box-shadow: inset 0 2px 1px 1px #363636;
    behavior: url(PIE.php);
}

/* 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.titlebarcc li:first-child {
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px 0 0 4px;
    border-radius:4px 0 0 4px;
    width:120px;
    border-left:none;
    behavior: url(PIE.php);
}

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

#appleNav.titlebarcc li:last-child {
    -moz-border-radius:4px 4px 4px 4px;
    -webkit-border-radius:4px 4px 4px 4px;
    border-radius:4px 4px 4px 4px;

    border-right:none;
    behavior: url(PIE.php);
    
    /* The width of the last menu item (search bar) is bigger than the others */
    width:520px;
}

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

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

/* Set the states when hovering, except for the last item in the list (the search bar), since it doesn't need to change */
#appleNav.titlebarcc li:hover {

    
    /* We use the inset of the box shadow to create a subtle inner glow when hovering */
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    behavior: url(PIE.php);

}

a img {border: none;}


a img {border: none;}


/* APPLE STYLE NAVIGATION MENU REVERSED */
#appleNav.reversed { margin:0px 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:12px;
    
    /* Apply a subtle text-shadow to the text */
    text-shadow: 0 -1px 3px #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:24px;
    
    -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;
    behavior: url(PIE.php);
}

#appleNav.reversed li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:120px; height:24px; border-bottom:1px solid #575757; border-top:1px solid #797979;

    /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    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 */
    
    /* We use the inset of the box shadow to create a subtle inner glow when hovering */
    -moz-box-shadow: inset 0 0 5px 5px #535353;
    -webkit-box-shadow: inset 0 0 5px 5px #535353;
    box-shadow: inset 0 0 5px 5px #535353;
    behavior: url(PIE.php);
}

/* Set the states when hovering, except for the last item in the list (the search bar), since it doesn't need to change */
#appleNav.reversed li:hover {
    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 */
    
    /* We use the inset of the box shadow to create a subtle inner glow when hovering */
    -moz-box-shadow: inset 0 0 5px 5px #535353;
    -webkit-box-shadow: inset 0 0 5px 5px #535353;
    box-shadow: inset 0 0 5px 5px #535353;
    behavior: url(PIE.php);
}

/* When the user clicks the button, we simply change the box inset (compared to the "hover") */
#appleNav.reversed 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;
    behavior: url(PIE.php);
}

#appleNav.reversed li a { color:white; text-decoration:none; text-align:center; display:block; line-height:24px; outline:none; }

/* Styling of the search field */
#appleNav.reversed form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;

    -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, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
    background-repeat: no-repeat;
    
    background-color:#6E6E6E; /* Fallback */
    
    -moz-box-shadow: inset 0 2px 1px 1px #363636;
    -webkit-box-shadow: inset 0 2px 1px 1px #363636;
    box-shadow: inset 0 2px 1px 1px #363636;
    behavior: url(PIE.php);
}

/* 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.reversed 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;
    behavior: url(PIE.php);
}

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

#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;
    behavior: url(PIE.php);
    
    /* The width of the last menu item (search bar) is bigger than the others */
    width:126px;
}

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

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

a img {border: none;}



/* APPLE STYLE NAVIGATION MENU ACTIVE*/
#appleNav.activeimg { margin:0px 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:12px;
    
    /* Apply a subtle text-shadow to the text */
    text-shadow: 0 -1px 3px #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:24px;
    
    -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;
    behavior: url(PIE.php);
}

#appleNav.activeimg li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:120px; height:24px; border-bottom:1px solid #575757; border-top:1px solid #797979;

    /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    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;
    behavior: url(PIE.php);
}

/* Set the states when hovering, except for the last item in the list (the search bar), since it doesn't need to change */
#appleNav.activeimg li:hover {
    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 */
    
    /* We use the inset of the box shadow to create a subtle inner glow when hovering */
    -moz-box-shadow: inset 0 0 5px 5px #535353;
    -webkit-box-shadow: inset 0 0 5px 5px #535353;
    box-shadow: inset 0 0 5px 5px #535353;
    behavior: url(PIE.php);
}

/* When the user clicks the button, we simply change the box inset (compared to the "hover") */
#appleNav.activeimg 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;
    behavior: url(PIE.php);
}

#appleNav.reversed li a { color:white; text-decoration:none; text-align:center; display:block; line-height:24px; outline:none; }

/* Styling of the search field */
#appleNav.activeimg form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;

    -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, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
    background-repeat: no-repeat;
    
    background-color:#6E6E6E; /* Fallback */
    
    -moz-box-shadow: inset 0 2px 1px 1px #363636;
    -webkit-box-shadow: inset 0 2px 1px 1px #363636;
    box-shadow: inset 0 2px 1px 1px #363636;
    behavior: url(PIE.php);
}

/* 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.activeimg 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;
    behavior: url(PIE.php);
}

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

#appleNav.activeimg 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;
    behavior: url(PIE.php);
    
    /* The width of the last menu item (search bar) is bigger than the others */
    width:126px;
}

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

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

a img {border: none;}



/* TITLE BAR 2 */
#appleNav.titlebar2 { margin:0px 0; list-style:none;

    /* Lucinda Grande is the font used on the website from Apple. */
    font-family: "HelveticaNeueW01-65Medi", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.2px; font-size:12px;
    
    /* Apply a subtle text-shadow to the text */
    text-shadow: 0 -1px 3px #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:24px;
    
    -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;
    behavior: url(PIE.php);
}

#appleNav.titlebar2 li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:736px; height:24px; border-bottom:1px solid #575757; border-top:1px solid #797979;

    /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f; /* Fallback */
    behavior: url(PIE.php);
}



#appleNav.titlebar2 li a { color:white; text-decoration:none; text-align:center; display:block; line-height:24px; outline:none; }

/* Styling of the search field */
#appleNav.titlebar2 form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;

    -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, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
    background-repeat: no-repeat;
    
    background-color:#6E6E6E; /* Fallback */
    
    -moz-box-shadow: inset 0 2px 1px 1px #363636;
    -webkit-box-shadow: inset 0 2px 1px 1px #363636;
    box-shadow: inset 0 2px 1px 1px #363636;
    behavior: url(PIE.php);
}

/* 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.titlebar2 li:first-child {
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px 0 0 4px;
    border-radius:4px 0 0 4px;
    width:731px;
    border-left:none;
    behavior: url(PIE.php);
}

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

#appleNav.titlebar2 li:last-child {
    -moz-border-radius:0px 4px 4px 0px;
    -webkit-border-radius:0px 4px 4px 0px;
    border-radius:0px 4px 4px 0px;

    border-right:none;
    behavior: url(PIE.php);
    
    /* The width of the last menu item (search bar) is bigger than the others */
    width:247px;
}

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

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

/* Set the states when hovering, except for the last item in the list (the search bar), since it doesn't need to change */
#appleNav.titlebar2 li:hover {

    
    /* We use the inset of the box shadow to create a subtle inner glow when hovering */
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    behavior: url(PIE.php);

}

/* When the user clicks the button, we simply change the box inset (compared to the "hover") */
#appleNav.titlebar2 li:not(:last-child):active { 

    /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f; /* Fallback */
    behavior: url(PIE.php);
}






/* TITLE BAR 2 ORANGE*/
#appleNav.titlebar2o { margin:0px 0; list-style:none;

    /* Lucinda Grande is the font used on the website from Apple. */
    font-family: "HelveticaNeueW01-65Medi", "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.2px; font-size:12px;
    
    /* Apply a subtle text-shadow to the text */
    text-shadow: 0 -1px 3px #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:24px;
    
    -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;
    behavior: url(PIE.php);
}

#appleNav.titlebar2o li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:736px; height:24px; border-bottom:1px solid #575757; border-top:1px solid #797979;

    /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #747474 0%, #D1803E 50%, #D3843F 51%, #F09747 100%);
    background-color:#5f5f5f; /* Fallback */
    behavior: url(PIE.php);
}



#appleNav.titlebar2o li a { color:white; text-decoration:none; text-align:center; display:block; line-height:24px; outline:none; }

/* Styling of the search field */
#appleNav.titlebar2o form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;

    -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, #747474 0%, #D1803E 50%, #D3843F 51%, #F09747 100%);
    background-repeat: no-repeat;
    
    background-color:#6E6E6E; /* Fallback */
    
    -moz-box-shadow: inset 0 2px 1px 1px #363636;
    -webkit-box-shadow: inset 0 2px 1px 1px #363636;
    box-shadow: inset 0 2px 1px 1px #363636;
    behavior: url(PIE.php);
}

/* 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.titlebar2o li:first-child {
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px 0 0 4px;
    border-radius:4px 0 0 4px;
    width:731px;
    border-left:none;
    behavior: url(PIE.php);
}

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

#appleNav.titlebar2o li:last-child {
    -moz-border-radius:0px 4px 4px 0px;
    -webkit-border-radius:0px 4px 4px 0px;
    border-radius:0px 4px 4px 0px;

    border-right:none;
    behavior: url(PIE.php);
    
    /* The width of the last menu item (search bar) is bigger than the others */
    width:247px;
}

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

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

/* Set the states when hovering, except for the last item in the list (the search bar), since it doesn't need to change */
#appleNav.titlebar2o li:hover {

    
    /* We use the inset of the box shadow to create a subtle inner glow when hovering */
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    behavior: url(PIE.php);

}

/* When the user clicks the button, we simply change the box inset (compared to the "hover") */
#appleNav.titlebar2o li:not(:last-child):active { 

    /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f; /* Fallback */
    behavior: url(PIE.php);
}