/*
 *
 *	Variables
 *
 */

// Colors

@gold: #f9d7a7;
@white: #fff;
@grey: #585757;
@grey_on_black: #c3bebc;

@menu: #656565;

// Fonts
@default_font: "Quattrocento Sans";

/*
 *
 *	Setup
 *
 */

html, body
{
	height: 100%;
	overflow: hidden;
		
	body
	{
		margin: 0;
		height: 100%;
	}
}

a img
{
	border: 0;
}

p
{
	a
	{
		color: #4ebaa2;
		text-decoration: none;
	}
	
	a:hover
	{
		color: #398776;
	}
}

#footer
{
	bottom: 0;
	width: 100%;
	height: 75px;
	z-index: 101;
	background: url(../images/menu_bg.png) repeat-x;
	position: fixed;
	
	#social
	{
		float: left;
		position: absolute;
		top: 21px;
		left: 25px;
		color: #fff;
		text-shadow: 1px 1px 2px #000;
		font: normal 11px @default_font;
		
		a
		{
			margin-right: 5px;
			text-decoration: none;
		}
	}
	
	#menu
	{
		 a:hover
                        {
                                text-shadow: 0 0 3px #fff;
                        }
		left: 50%;
		position: absolute;			
		
		>div>ul>li.expanded>a>span, >div>ul>li.marked>a>span, >div>ul>li.active>a>span
		{
			text-shadow: 0 0 3px #fff;
		}
		
		ul
		{
			margin: 0;
			padding: 0;
			position: relative;
			width: 800px !important;
			
			li
			{
				float: left;
				padding: 21px 0 0;
				list-style-type: none;
				position: relative;
				
				#logo
				{
					display: block;
					width: 118px;
					height: 25px;
					background: url(../images/logo.png) no-repeat 50% 50%;
				}
				
				&.active
				{
					>div
					{
						display: block;
					}
				}
				
				&.active, &.marked, &.expanded
				{
				}
				
				a, div>span
				{
					display: block;
					padding: 10px 10px 0;
					height: 23px;
					color: #fff;
					font: normal 12px @default_font;
					text-decoration: none;
					text-transform: uppercase;
					text-shadow: #333 1px 1px 1px;
				}
			
				>div
				{
					left: 50%;
					bottom: 54px;
					position: absolute;
					display: none;
					width: 166px;
					margin-left: -98px;
					padding: 14px 14px 0px;
					background: url(../images/menu_dropout_bg.png) no-repeat 50% 100%;
					-moz-box-shadow: 0 0 5px #888;
					-webkit-box-shadow: 0 0 5px #333;
					box-shadow: 0 0 5px #000;
					
					>a
					{
						display: block;
						text-align: center;
						padding: 32px 0 17px 3px;
					}
					
					ul
					{
						margin: 0;
						padding: 0 0 15px;
						
						li
						{
							float: none;
							padding: 0;
							
							&.active, &.marked, &.expanded
							{							
								background-image: url(../images/menu_bg_hover_blk.png);
							}
							
							a
							{
								height: auto;
								padding: 0;
								
								span
								{
									display: block;
									padding: 6px 6px 4px;
									text-transform: none;
								}
							}
						}
					}				
				}
			}
		}
	}
	
	#options
	{
		float: right;
		
		a
		{
			color: #fff;
			text-decoration: none;
			font: normal 11px @default_font;
			text-shadow: 1px 1px 2px #000;
			
			&:hover
			{
				text-shadow: 0 0 3px #fff;
			}
		}
		
		.lang
		{	
			position: relative;
			padding: 23px 35px 0;
			
			>div
			{
				display: none;
			}
			&.active>div
			{
				display: block;
			}
			
			a
			{
				display: block;			
			}
			
			>a
			{
				float: right;
			}
			
			.langs
			{
				width: 95px;
				bottom: 23px;
				right: 13px;
				position: absolute;
				display: none;
				width: 51px;
				padding: 12px 22px;
				background: url(../images/menu_dropout_bg.png) no-repeat 50% 100%;
				-moz-box-shadow: 0 0 5px #888;
				-webkit-box-shadow: 0 0 5px #333;
				box-shadow: 0 0 5px #000;
				
				a
				{				
					padding: 7px 0;
				}
			}
		}
		
		.links
		{
		
			clear: both;
			padding-right: 35px;
			
			a
			{			
				color: #fff;
				text-shadow: 1px 1px 2px #000;
				font: normal 11px @default_font;
				text-decoration: none;
				margin-left: 7px;
			}
		}
	}
}

#container
{

	height: 100%;
	margin-bottom: 75px;
	position: relative;
	
	/*
	 *
	 *	collection
	 *
	 */
	#collection
	{
		width: 826px;
		height: 204px;
		margin: -138px 0 0 -413px;
		position: absolute;
		top: 50%;
		left: 50%;
		
		.nav
		{
			width: 154px;
			height: 204px;
			position: relative;
			cursor: pointer;
			
			a.btn
			{
				top: 0;
				left: 0;
				position: absolute;
				width: 154px;
				height: 204px;
				
				&.left
				{
					background: url(../images/arrow_left.png) no-repeat 50% 0;
				}
				&.right
				{
					background: url(../images/arrow_right.png) no-repeat 50% 0;
				}
			}
			
			.bg
			{
				width: 100%;
				height: 100%;
				background: #fff;
				display: none;
			}
			
			&.prev
			{
				float: left;
			}
			&.next
			{
				float: right;
			}
		}
		
		.pcontent
		{
			float: left;
			width: 516px;
			height: 204px;
			margin: 0 1px;
			left: 154px;
			position: absolute;

			background: url(../images/bg_product_news.jpg) repeat-x 50% 0;
		
			.product
			{
				float: left;
				width: 190px;
				height: 100%;
				position: relative;
				
				>div
				{
					width: 190px;
					position: absolute;
					left: 100px;
	
					img
					{
						z-index: 2;
						position: absolute;
					}
				}
			}
			
			.info
			{
				float: left;
				width: 290px;
				height: 100%;
				z-index: 1;
				position: relative;
				font-family: @default_font;	
				text-shadow: 1px 1px 2px #111;
				
				h3
				{
					font: normal 18px @default_font;
					font-weight: lighter;
					margin: 30px 0 0;
				}
				h4
				{
					color: @white;
					font: normal 18px @default_font;
					font-weight: lighter;
					margin: 0;
				}			
				div.ptext
				{
					left: 0;
					bottom: 64px;
					position: absolute;
					
					p
					{
						color: @grey_on_black;
						font-size: 14px;
						margin-bottom: 0;
					}
				}
				
				.zoom
				{
					float: left;
					position: absolute;
					bottom: 25px;
					left: 0;
					display: block;
					height: 26px;
					background: url(../images/zoom_bg.png) repeat;
					padding-right: 11px;
					text-decoration: none;
					
					*
					{
						float: left;
						color: #c3bebc;
						font-size: 12px;
					}
					
					span
					{					
						display: block;
						padding-top: 7px;
					}
					
					&:hover span
					{
						color: #fff;
					}
				}
			}
		}
		
		.moreinfo
		{
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			position: fixed;
			
			.image
			{
				margin: 70px 0 70px 25%;
				position: relative;
				
				.loader
				{
					position: absolute;
					top: 50%;
					left: 50%;
				}
				
				img
				{
					position: absolute;
					z-index: 90;
					cursor: move;
				}
			}
		}
	}
	
	/*
	 *
	 *	keyingredients
	 *
	 */
	#keyingredients
	{
			
		.images
		{	
			div
			{		
				top: 0;
				left: 0;
				position: absolute;
			}
		}
		
		width: 826px;
		height: 204px;
		margin: -138px 0 0 -413px;
		position: absolute;
		top: 50%;
		left: 50%;
		
		.nav
		{
			width: 154px;
			height: 204px;
			position: relative;
			cursor: pointer;
			
			a.btn
			{
				top: 0;
				left: 0;
				position: absolute;
				z-index: 10;
				width: 154px;
				height: 204px;
				
				&.left
				{
					background: url(../images/arrow_left.png) no-repeat 50% 0;
				}
				&.right
				{
					background: url(../images/arrow_right.png) no-repeat 50% 0;
				}
			}
			
			.bg
			{
				width: 100%;
				height: 100%;
				background: url(../images/keyingredients_btn_bg.png) repeat;
				display: none;
			}
			
			&.prev
			{
				float: left;
			}
			&.next
			{
				float: right;
			}
		}
		
		.content
		{
			width: 516px;
			height: 204px;
			margin: 0 1px;
			float: left;
			
			.info
			{
				width: 300px;
				margin-left: 110px;
				position: absolute;
				font-family: @default_font;
				
				h3
				{
					font: normal 18px @default_font;
					font-weight: lighter;
					margin: 30px 0 0;
				}
				h4
				{
					color: @grey;
					font: normal 18px @default_font;
					font-weight: lighter;
					margin: 0;
				}			
				p
				{
					color: @grey;
					font-size: 14px;
				}
			}
		}
	}
	
	/*
	 *
	 *	News
	 *
	 */
	#news
	{
		width: 826px;
		height: 204px;
		margin: -138px -413px;
		position: absolute;
		top: 50%;
		left: 50%;
		
		.nav
		{
			width: 154px;
			height: 204px;
			position: relative;
			cursor: pointer;
			
			a.btn
			{
				top: 0;
				left: 0;
				position: absolute;
				width: 154px;
				height: 204px;
				
				&.left
				{
					background: url(../images/arrow_left.png) no-repeat 50% 0;
				}
				&.right
				{
					background: url(../images/arrow_right.png) no-repeat 50% 0;
				}
			}
			
			.bg
			{
				width: 100%;
				height: 100%;
				background: #fff;
				display: none;
			}
			
			&.prev
			{
				float: left;
			}
			&.next
			{
				float: right;
			}
		}
		
		.pcontent
		{
			float: left;
			width: 516px;
			height: 204px;
			margin: 0 1px;
			position: relative;
			background: url(../images/bg_product_news.jpg) repeat-x;		
		
			.news
			{
				float: left;
				width: 280px;
				height: 100%;
				
				>div
				{
					width: 233px;
					border: 10px solid #fff;
					background: @white;
					height: 0px;
					overflow-y: hidden;
					position: relative;
					box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.15);
					
					img
					{
						top: 50%;
						position: absolute;
					}
				}
			}
			
			.info
			{
				float: left;
				width: 220px;
				height: 100%;
				font-family: @default_font;	
				text-shadow: 1px 1px 2px #111;
				position: relative;
				
				h4
				{
					color: @gold;
					font: normal 12px @default_font;
					font-weight: lighter;
					margin: 30px 0 0;
				}	
				h3
				{
					color: @white;
					font: normal 18px @default_font;
					font-weight: lighter;
					margin: 0;
				}		
				p
				{
					color: @grey_on_black;
					font-size: 14px;
					margin: 0;
				}
				
				.zoom
				{
					float: left;
					position: absolute;
					bottom: 25px;
					left: 0;
					display: block;
					height: 26px;
					background: url(../images/zoom_bg.png) repeat;
					padding-right: 11px;
					text-decoration: none;
					
					*
					{
						float: left;
						color: #c3bebc;
						font-size: 12px;
					}
					
					span
					{					
						display: block;
						padding-top: 7px;
					}
					
					&:hover span
					{
						color: #fff;
					}
				}
			}
		}
	}
		
	.moreinfo
	{
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		position: fixed;
		
		.image
		{
			margin: 70px 0 70px 25%;
			position: relative;
			
			.loader
			{
				position: absolute;
				top: 50%;
				left: 50%;
			}
			
			img
			{
				margin-left: -100px;
				position: absolute;
				z-index: 90;
				cursor: move;
			}
		}
	}
}

div.text
{
	top: 50%;
	left: 50%;
	margin: 70px 70px 145px 50px;
	position: absolute;
	
	>div
	{
		position: relative;
	
		.date
		{
			color: @grey;
			font: normal 15px @default_font;
		}
	
		h1, h2
		{
			margin: 0;
			color: @grey;
			font: normal 36px @default_font;
			font-weight: lighter;
		}
		
		div p
		{
			color: @grey;
			font: normal 14px @default_font;
		}
		
		.close
		{
			display: block;
			width: 34px;
			height: 34px;
			background: url(../images/info_close.png) no-repeat;
			position: absolute;
			top: -52px;
			right: 0;
			
		}
	}
}

#initLoader
{
	margin-top: -37px;
}

.loader
{
	width: 79px;
	height: 79px;
	position: absolute;
	background-repeat: no-repeat;
	left: 50%;
	top: 50%;
	margin-left: -40px;
	margin-top: -40px;
}
.loader.blk
{
	background-image: url(../images/loader_blk.png);
}
.loader.wht
{
	background-image: url(../images/loader_wht.png);
}
.loader.info
{
	left: 25%;
	position: fixed;
	margin-top: -77px;
}

.scroll
{
	background: url(../images/bgfill.gif) repeat;
}

/*
 *
 *	Settings
 *
 */

// Smooth image settings IE7
img 
{
    -ms-interpolation-mode : bicubic;
}
a
{
	outline: none;
}

#console
{
	z-index: 1000;
	position: absolute;
	top: 0;
	left: 0;
	width: 200px;
	margin: 20px;
	
	p
	{
		font: 12px "Courier";
		margin: 0;
	}
}