@charset "utf-8";
/* CSS Document */

#headbox
{
	background-color: #FFF;
	display: block;
	height: 90px;
	width: 100%;
	margin: 0px;
	}

.menu {
	display: block;
	height: 90px;
	width: 1000px;
	list-style-type: none;
	position:relative;
	}
	
	
.menu li{
	float:left;
	width:120px;
	height:90px;
	margin-right:0px;
	position:relative;
		
	}
.menu li a{
	display:block;
	overflow:hidden;
	text-align:center;
	height:100%;
	width:100%;
	position:relative;
	
		
	}
.menu li.home a:hover{
		background:#FFF;
	}
.menu li.about a:hover{
		background:#FFF;
	}
.menu li.gift a:hover{
		background:#FFF;
	}
.menu li.contact a:hover{
		background:#FFF;
	}
.menu li a h2{
		color:#E8758C;
		font-size:15px;
		font-weight:bold;
		text-transform:uppercase;
		position:absolute;
		padding-top:10px;
		width:120px;
		top:50px;
		left:0px;
		
	}
.menu li a span{
		width:120px;
		height:90px;
		position:absolute;
		background-position:top center;
		background-repeat:no-repeat;
		background-color:transparent;
		left:0px;
		top:0px;
	}
.home a span{
		background-image:url(../images/home-icon.png);
		
	}
.about a span{
		background-image:url(../images/about-icon.png);
	}
.gift a span{
		background-image:url(../images/gift-icon.png);
		
	}
.mycart a span{
		background-image:url(../images/cart-icon.png);
		
	}
.offers a span{
		background-image:url(../images/offer-icon.png);
		
	}

.contact a span{
		background-image:url(../images/contact-icon.png);
	}
	
li:hover h2{
		-moz-animation:animation1 .30s linear;/* firefox */
		-webkit-animation:animation1 .30s linear;/* Safari and Chrome */
	}
li:hover span{
		-moz-animation:animation2 .60s linear;/* firefox */
		-webkit-animation:animation2 .60s linear;/* Safari and Chrome */
	}
@keyframes animation1 {
		0%  {margin-top:-180px;}
		100%{  margin-top:0px; }		
	}
@keyframes animation2 {
		0%  {margin-top:-180px;}
		50%  {margin-top:10px;}
		75%  {margin-top:-15px;}
		100%{  margin-top:0px; }	
	}
	/* firefox */
@-moz-keyframes animation1 {
		0%  {margin-top:-180px;}
		100%{  margin-top:0px; }		
	}
@-moz-keyframes animation2 {
		0%  {margin-top:-180px;}
		50%  {margin-top:10px;}
		75%  {margin-top:-15px;}
		100%{  margin-top:0px; }	
	}
	/* Safari and Chrome */
@-webkit-keyframes animation1 {
		0%  {margin-top:-180px;}
		100%{  margin-top:0px; }		
	}
@-webkit-keyframes animation2 {
		0%  {margin-top:-180px;}
		50%  {margin-top:10px;}
		75%  {margin-top:-15px;}
		100%{  margin-top:0px; }	
	}
	
.blankbox {
	width: 47px;
	height: 90px;
	margin: 0px;
	float: left;
}

#headbox .navright {
	display: block;
	height: 90px;
	width: 407px;
	float: left;
}
.menu .Logo a{
	display: block;
	height: 180px;
	width: 186px;
	float: left; 
	position: relative;
	z-index: 1000;
	 -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}

.menu .Logo a:hover  {
	
	-webkit-transform: scale(1.1);  
    -moz-transform: scale(1.1);  
    -ms-transform: scale(1.1);   
    -o-transform: scale(1.1);   
    transform: scale(1.1);  
}
.menu ul {
	position: absolute;
	top: 90px;
	list-style:none;
	right:-20px;
	width:160px;
	opacity: 0;
	font-size:12px;
	z-index:2000;
	text-align:center;
	background: #FFF;
	-webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;

	-webkit-transition: opacity .25s ease .1s;
	-moz-transition: opacity .25s ease .1s;
	-o-transition: opacity .25s ease .1s;
	-ms-transition: opacity .25s ease .1s;
	transition: opacity .25s ease .1s;
}

.menu li:hover > ul { opacity: 1; 
				}

.menu ul li {
	height: 0;
	overflow: hidden;
	padding: 0;
	width:150px;
	text-align:center;
	-webkit-transition: height .25s ease .1s;
	-moz-transition: height .25s ease .1s;
	-o-transition: height .25s ease .1s;
	-ms-transition: height .25s ease .1s;
	transition: height .25s ease .1s;
}

.menu li:hover > ul li {
	height: 36px;
	width: 150px;
	overflow: visible;
	padding: 0;

	
}

.menu ul li a {
	width: 140px;
	padding: 0px 10px 0px 10px;;
	margin: 0;
	line-height:40px;
	text-align:center;
	color:#E6647D;
	
	border-radius: 0 0 5px 5px;
}
.menu ul li a:hover {
	height: 36px;
	border: none;
	color:#B50739;

		
}

.menu ul li:last-child a { border: none; }