/* --HEADER-SHOP-CSS-- --FOC2009 (C) BRIAN GARRET-- */

#no-java-menu {display:block;width:947px;height:24px;margin:8px 0 5px 17px;float: left;}

#header-foc {font-family:Helvetica,Arial,sans;font-size:75%;line-height:150%;height:25px;margin:0 0 0 200px;padding:15px 0;position:relative;right:0;text-align:right;top:0;width:775px;}
	
#header-foc a{color: #777777;text-decoration: none;}	

#foc-logo{position: relative;width:250px;height: 85px;padding: 15px 0 0 21px;float: left;}
	
#foc-logo1{	background:url("http://www.freedomofcreation.com/wp-content/themes/FOC09/images/FreedomOfCreation-Logo.gif") no-repeat scroll 0 0 transparent; display:block; height:80px; width:250px;;}
	
#banner_wrapper{height: 250px;margin:0;float: left; background-color: #FFFFFF;z-index:1}

#banner_wrapper IMG{border-top-left-radius: 5px;border-top-right-radius: 5px;}

.no-java-item{opacity:0.55;height:25px;display:block;float:left;background-repeat:no-repeat;}

.footer-list-foc{float:left;width: 160px;padding: 0 0 0 35px;text-align: left;font-size: 90%;color:#888;list-style: none;}
	
#footer-wrapper-foc{float:left;}

#footer-foc{background-color:#E4E4E4;clear:both;color:#666666;float:none;height:auto;margin:20px auto 0;overflow:hidden;padding:5px 0 0;text-align:center;}

.page_item {list-style-image:none;list-style-position:outside;list-style-type:none;}

.page_item a{color: #333333;font-size: 85%;line-height: 150%;}

#nav-new { margin:10px 0 0 0; list-style:none; padding-left:0;

    /* 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.1px; font-size:13px;
    
    /* 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;
}	

#nav-new li a{
    /* Apply a subtle text-shadow to the text */
    text-shadow: 0 -1px 3px #202020;
	color:white; text-decoration:none; text-align:center; display:block; line-height:34px; outline:none;}

#nav-new li{
	margin-left: -1px;
	display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:105px; height:34px; 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, #141414), color-stop(0.5, #4E4E4E), color-stop(0.51, #5F5F5F), color-stop(1, #757575));
    background-image: -moz-linear-gradient(center bottom , #141414 0%, #4E4E4E 50%, #5F5F5F 51%, #757575 100%);
    background-color:#3f3f3f; /* Fallback */
	}
	
/* Set the states when hovering, except for the last item in the list (the search bar), since it doesn't need to change */
#nav-new 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;
}
	
/* When the user clicks the button, we simply change the box inset (compared to the "hover") */
#nav-new 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;
}	
	
/* Styling of the search field */
#nav-new form input { width:76px; height:20px; margin-left:12px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; padding-top:0px; padding-bottom:0px; 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("http://www.freedomofcreation.com/wp-content/uploads/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("http://www.freedomofcreation.com/wp-content/uploads/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;
}	
	
	
/* The first child image - the logo - has to be centered. Because of the image dimensions, we manually need to shift it a bit. */
#nav-new li:first-child a img {
   vertical-align:middle; margin-top:-2px;
}


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

#nav-new {
     -webkit-animation: showMenu 1s; position:relative; padding-left:0;
}