/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 3.0.0
build: 1549
*/
html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{*font-size:100%;}legend{color:#000;}

header,
section,
article,
nav,
aside {
	display: block;
}

a {
	outline: 0 none;
}

html, body {
	background: #000;
	color: #607077;
	font-family: Georgia, "Times New Roman";
}

body {
	font-size: 62.5%;
	overflow-x: hidden;
}

h1 {
	color: #8b9caa;
}

h1 small,
h2 {
	color: #8b9caa;
}

#main-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-width: 1000px;
	background: #fff;
	padding: 90px 0 20px 40px;
	z-index: 3;
}
	
	#main-header nav {
		padding-top: 32px;
	}
		#main-header nav .white-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			height: 130px;
			width: 100%;
			background: #fff;
			z-index: 5;
			opacity: .85;
		}
		
		#main-header nav #menu,
		#main-header nav #languages {
			position: absolute;
			z-index: 15;
			bottom: 20px;
			left: 40px;
		}
		
		#main-header nav #languages {
			right: 60px;
			left: auto;
			/* To show the languages menu again, you need to fix something in main.js:
			   - Uncomment element in $.globals.menufadeelements where element should be added
			   - Make languages available in frontend/config/app.yml */
			display: none;
		}
		
		#main-header nav ul,
		#main-header nav #languages li,
		#main-header nav #menu li {
			float: left;
		}
			#main-header nav .arrow {
				position: absolute;
				left: 20px;
				bottom: 0;
				width: 11px;
				height: 6px;
				background: url(images/menu-arrow.png);
				display: block;
				z-index: 10;
			}
			
			#main-header nav #menu .home a {
				display: block;
				background: url(images/logo.png);
				width: 194px;
				height: 66px;
				text-indent: -999px;
				padding: 0;
				margin-right: 140px;
				margin-top: 0;
			}
			
			#main-header nav li a {
				display: block;
				color: #b7b7b7;
				text-decoration: none;
				font-size: 2em;
				padding: 0 4px;
				margin-top: 42px;
			}
				#main-header nav li a:hover,
				#main-header nav li a.active {
					color: #5e5e5e;
				}
			
			#main-header nav #languages {			
				margin-top: 50px;
				margin-left: 10px;
			}
			
				#main-header nav #languages li a {
					margin-top: 4px;
					font-size: 1.2em;
					padding: 2px 4px;
					text-transform: lowercase;
				}
					#main-header nav #languages li a:hover {
					}
					
					#main-header nav #languages li.selected a {
						background: #ddd;
						-webkit-border-radius: 5px;
						-moz-border-radius: 5px;
						color: #666;
						text-decoration: none;
					}

#backgrounds {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
}

#backgrounds img {
	position: absolute;
	top: 125px;
	z-index: 1;
}
	#backgrounds .bg-1 {
		left: -100px;
	}
	
	#backgrounds .bg-2 {
		left: 950px;
	}
	
	#backgrounds .bg-3 {
		left: 2360px;
	}
	
	#backgrounds .bg-4 {
		left: 4120px;
	}
	
	#backgrounds .bg-5 {
		left: 5620px;
	}
	
	#backgrounds .bg-6 {
		left: 4900px;
		top: 250px;
	}


#sections {
	position: absolute;
 	top: 0;
 	left: 0;
	width: 9000px;
	z-index: 2;
}
	#sections .section {
		border: 0px red solid;
		margin-left: 380px;
		float: left;
	}
		#sections .section .slideshow {
			margin-bottom: 20px;
			cursor: pointer;
		}
			#sections .section .slideshow .imageframe {
				position: relative;
				overflow: hidden;
				height: 210px;
				margin-bottom: 3px;
			}
			
				#sections .section .slideshow .images {
					position: absolute;
					width: 10000px;
				}
					#sections .section .slideshow .images img {
						float: left;
						display: block;
					}
			
			#sections .section .slideshow .info {
				background: #1c2228;
				font-size: 1.5em;
				line-height: 1.5em;
				font-weight: bold;
				font-style: italic;
				color: #8fa5b2;
				padding: 0 5px;
			}
		
		#sections .section article section {
			float: left;
			width: 300px;
			margin-right: 40px;
			padding-top: 40px;
		}
		
			#sections .section article section p,
			#sections .section article section ul {
				font-size: 1.3em;
				line-height: 1.4em;
				margin-bottom: 1.4em;
			}
			
				#sections .section article section p a {
					color: #607077;
				}
					#sections .section article section p a:hover {
						color: #86969d;
					}
			
			#sections .section article section ul {
				margin-left: 15px;
			}
				#sections .section article section ul li {
					list-style: disc outside none;
				}
		
		#sections .section article .intro {
			padding-top: 140px;
		}
		
			#sections .section article .intro p {
				font-size: 1.5em;
				line-height: 1.4em;
			}
		
		#sections .section h1 {
			font-size: 5em;
			line-height: 1.2em;
			margin-bottom: 15px;
			padding-bottom: 15px;
			background: url(images/header_hr.png) no-repeat bottom left;
			letter-spacing: -0.03em;
			white-space: nowrap;
		}
			#sections .section h1 small {
				display: block;
				font-size: 0.3em;
				line-height: 1.2em;
				letter-spacing: 0;
			}
		
		
		#sections .section h2,
		#sections .section h3 {
			background: url(images/header_hr.png) no-repeat bottom left;
			padding-bottom: 10px;
			margin-bottom: 10px;
		}
		
		#sections .section h2 {
			font-size: 3em;
			line-height: 1.2em;
			font-style: italic;
		}
		
		#sections .section h3 {
			font-size: 1.8em;
			font-style: italic;
		}
		
		
		#sections .home {
			padding: 126px 520px 60px 100px;
			width: 500px;
		}
		
			#sections .home .intro {
				width: 500px;
			}
				
				#sections .home .intro p {
					padding-right: 90px;
				}
		
		#sections .gemmology {
			padding: 126px 580px 60px 0;
		}
			#sections .gemmology .column-4 {
				padding-top: 90px;
			}
		
		#sections .workshop {
			padding: 50px 0 60px 0;
		}
			#sections .workshop .column-1 {
				padding-top: 245px;
				width: 640px;
			}
			
			#sections .workshop .slideshow {
				width: 640px;
			}
			
			#sections .workshop .slideshow .imageframe {
				height: 430px;
			}
		
		
		#sections .about {
			padding: 50px 100px 60px 0;
		}
		
		#sections .contact {
			padding: 50px 0 60px 0;
		}
	
	
	.section.products {
		min-width: 1000px;
		height: 0;
		padding: 0;
	}
		.section.products #product-viewer {
			display: none;
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			overflow: hidden;
			text-align: center;
		}
		
			.section.products #product-viewer a {
				margin: 0 auto;
				cursor: default;
			}
				.section.products #product-viewer a img {
					position: absolute;
					top: 50%;
					left: 50%;
				}
	
	.section.products .product-info-hit-area {
		position: absolute;
		left: 50%;
		top: 50%;
		z-index: 120;
		width: 500px;
		height: 400px;
		margin-left: -250px;
		margin-top: -200px;
		background: #ccc;
	}
	
	#product-info {
		display: none;
		position: absolute;
		top: 50%;
		left: 50%;
		width: 235px;
		margin-left: -117px;
		z-index: 12;
		background: #000;
		padding: 20px;
		font-size: 1.2em;
		line-height: 1.4em;
		font-style: italic;
		color: #a1a28e;
	}
	
	#product-categories {
		display: none;
		position: absolute;
		left: 380px;
		bottom: 65px;
		z-index: 16;
	}
		#product-categories ul {
			padding: 5px 0;
			border-left: 1px #d1d1d1 solid;
		}
			#product-categories ul li a {
				margin: 0;
				font-size: 1.3em;
				padding: 2px 10px;
			}
				#product-categories ul li a.selected {
					color: #5e5e5e;
				}



#arrows a {
	position: fixed;
	margin-top: -35px;
	top: 50%;
	left: 0;
	z-index: 4;
	background: url(images/arrows.png);
	width: 70px;
	height: 70px;
	text-indent: -999px;
}

#arrows .next {
	left: auto;
	right: 0;
	background-position: -70px 0;
	text-indent: 999px;
}

.has-js #no-js-message {
	display: none;
}

.no-js {
	overflow: auto;
}
	.no-js #backgrounds {
		display: none;
	}
	
	.no-js #main-header .arrow {
		display: none;
	}
	
	.no-js .products {
		display: none;
	}
	
	.no-js #sections {
		width: auto;
		padding-top: 200px;
		margin-left: 380px;
	}
	
	.fallback-message {
		position: fixed;
		top: 210px;
		left: 30px;
		width: 200px;
		font-size: 1.6em;
		color: #f96363;
		font-style: italic;
		padding: 10px;
		border: 3px #f96363 solid;
	}
		.fallback-message a {
			color: #fff;
		}
	
		.no-js #sections .section {
			padding: 0;
			float: none;
			margin: 0;
			width: 600px;
			margin-bottom: 100px;
		}
		
		.no-js .slideshow {
			display: none;
		}
		
		.no-js #sections .section article section {
			float: none;
			width: auto;
		}
			.no-js #sections .section article .intro {
				padding-top: 0;
			}
	
	.no-js #arrows {
		display: none;
	}