@charset "UTF-8";
/*

PETRA CLASS JEWELRY
Global CSS Style Sheet
Version: 2.0

Author: futurepruf.com

COLORS:
body: #030303

Wrapper Width: 822px

*/


/*================ GLOBAL ================*/

html {
	height: 100%;
	overflow: hidden;
	width: 100%;
}

body {
	height: 100%;
	overflow: hidden;
	width: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: Helvetica, Arial, sans-serif, "Bitstream Vera Sans";
	font-size: 14px;
	color: #666;
}

h2 {
	margin: 0;
	font-weight: normal;
}

h3 {
	margin: 0;
	font-weight: normal;	
}

a {
	color: #666;
	text-decoration: none;
}

a:hover { color: #FFF; }

a:active { outline: none; }
:focus { -moz-outline-style: none; }

a img {
	border: none;
}

address {
	margin: 10px 10px 0 0;
	width: 220px;
	font-style: inherit;
}

#wrapper {
	z-index: 100;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 0;
	overflow: auto;
}

#candy {
	width: 822px;
	height: 100%;
	margin: 0 auto;
	position: relative;
}


/*==================== BACKGROUNDS ====================*/

#background {
	position: absolute;
	width: 200%;
	height: 200%;
	top: -50%;
	left: -50%;
}

#background table, #background td {
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

#background td {
		vertical-align: middle;
		text-align: center;
	}

#background img{
		min-height: 50%;
		min-width: 50%;
		margin: auto;
		display: block;
	}
	

/*================ HEADER ================*/

#header {
	margin: 20px 0 0 0;
	padding: 0;
	float: left;
	width: 822px;
}

	#header h1 {
		margin: 0;
		padding: 0;
		height: 36px;
		width: 186px;
		text-indent: -9999px;
		display: block;
		background-image: url(../images/global/petra_class_logo.png);
	}
	
		#header h1 a {
			height: 36px;
			width: 186px;
			display: block;
		}

/*================ NAVIGATION MAIN ================*/

#navigation_main {
	margin: 12px 0 0 2px;
	padding: 0;
	float: left;
	width: 822px;
}

	#navigation_main ul {
		margin: 0;
		padding: 0;
		font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif;
		font-size: 10px;
		text-transform: uppercase;
		list-style: none;
	}

		#navigation_main ul li {
			margin: 0 20px 0 0;
			padding: 0;
			float: left;
		}
			
			#navigation_main ul li a {
				color: #666;
				display: block;
			}
			
				#navigation_main ul li a:hover { color: #FFF; }
				
				#navigation_main ul li a.active { color: #FFF; }


/*================ NAVIGATION JEWELRY ================*/

#navigation_jewelry {
	margin: 8px 0 0 2px;
	padding: 0;
	width: 822px;
	float: left;
}

	#navigation_jewelry ul {
		margin: 0;
		padding: 0;
		font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Helvetica, Arial, sans-serif;
		font-size: 10px;
		text-transform: uppercase;
		list-style: none;
	}

		#navigation_jewelry ul li {
			margin: 0 20px 0 0;
			padding: 0;
			float: left;
		}
			#navigation_jewelry ul li a {
				display: block;
				color: #444;
			}
			
			/*
			#navigation_jewelry ul li.diamonds a {
				color: #FFF;
			}
			
			#navigation_jewelry ul li.colors a {
				color:;
			}
			#navigation_jewelry ul li.greens a {
				color:;
			}
			#navigation_jewelry ul li.yellows a {
				color:;
			}
			#navigation_jewelry ul li.reds a {
				color: #8c0016;
			}
			#navigation_jewelry ul li.blues a {
				color: #008fb4;
			}
			*/
			
				#navigation_jewelry ul li a:hover { color: #FFF; }
				
				#navigation_jewelry ul li.active a { color: #FFF; }


/*================ CONTENT ================*/

#content {
	margin: 24px 0 30px 0;
	padding: 0;
	float: left;
	width: 822px;
	color: #666;
}

	.module_text {
		float: left;
		margin: 12px 0 0 0;
		padding: 0;
		width: 520px;
	}
	
	.module_text_wide {
		width: 520px;
		float: left;
		margin: 12px 0 0 0;
		padding: 0;
	}
 
		#content .module_text h2,
		#content .module_text_wide h2 {
			color: #444;
			text-transform: uppercase;
			font-size: 14px;
		}
		
		#content .module_text h3,
		#content .module_text_wide h3 {
			font-size: 13px;
		}
		
		#content .module_text p,
		#content .module_text li,
		#content .module_text td,
		#content .module_text_wide p,
		#content .module_text_wide li,
		#content .module_text_wide td {
			font-size: 12px;
			line-height: 16px;
		}
		
		#content .module_text ul,
		#content .module_text_wide ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		
		#content .module_text table,
		#content .module_text_wide table {
			padding: 0;
		}
		
.pdf_download {
	position: absolute;
	right: 20px;
	top: 24px;
}

.module_image {
	float: left;
	margin: 12px 0 0 12px;
	padding: 0;
	width: 274px;
	height: auto;
}

	.module_image img {
		display: block;
		margin-bottom: 12px;
	}

/*================ CONTENT INDEX ================*/

#content.index h3 {
	color: #444;
	float: left;
	width: 100%;
	margin: 0 0 24px 0;
	font-weight: normal;
}

#content.index .index_text {
	float: left;
	width: 228px;
	font-size: 12px;
	line-height: 16px;
	margin: 0 24px 0 0;
}

	#content.index .index_text :first-child {
		margin-top: 0;
	}
	
	#content.index .index_text a {
		color: #FFF;
	}

#content.index img {
	margin: 5px 0 0 0;
	float: left;
}


/*================ CONTENT JEWELRY ================*/

#content.jewelry {
	position: relative;
}

.galleria {
	position: absolute;
	top: 0;
	left: 0;
	list-style: none;
	width: 200px;
	padding: 0;
	margin: 0;
}

	.galleria li {
		display: block;
		width: 50px;
		height: 50px;
		overflow: hidden;
		float: left;
		margin: 0 10px 10px 0;
	}
	
	.galleria li.active {
		outline: solid 1px #FFF;
	}
	
		.galleria li a { display: none; }
	
		.galleria li div {
			position: absolute;
			display: none;
			top: 0;
			left: 180px;
		}
	
		.galleria li div img { cursor: pointer; }
	
		.galleria li.active div img,
		.galleria li.active div { display: block; }
	
		.galleria li img.thumb {
			cursor: pointer;
			top: auto;
			left: auto;
			display: block;
			width: auto;
			height: auto;
		}
	
		.galleria li .caption{
			display:block;
			padding-top:.5em;
		}
	
* html .galleria li div span{width:400px} /* MSIE bug */

	.galleria_container {
		float: right;
		width: 600px;
	}


/*================ CONTENT ARTIST'S STATEMENT ================*/

#wrapper.statement .module_text {
	width: auto;
}

#artist_statement_column_1,
#artist_statement_column_2 {
	float: left;
	width: 214px;
}

#artist_statement_column_1 { margin-right: 20px; }

/*================ FOOTER ================*/

#footer {
	margin: 0;
	padding: 0;
	float: left;
	width: 822px;
	min-height: 80px;
}

/*================ ROUNDED CORNERS ================*/

.dialog {
	position: relative;
	margin: 0px auto;
	min-width: 8em;
	/* color: #FFF; */
	z-index: 1;
	margin-left: 12px; /* default, width of left corner */
	margin-bottom: 0.5em; /* spacing under dialog */
}

.dialog .content,
.dialog .t,
.dialog .b,
.dialog .b div {
	background: transparent url(../images/global/background_content.png) no-repeat top right;
}

.dialog .content {
	position: relative;
	padding: 10px 20px 20px 10px;
}

.dialog .t {
	/* top+left vertical slice */
	position: absolute;
	left: 0px;
	top: 0px;
	width: 12px; /* top slice width */
	margin-left: -12px;
	height: 100%;
	background-position: top left;
}

.dialog .b {
	/* bottom */
	position: relative;
	width: 100%;
}

.dialog .b,
.dialog .b div {
	height: 30px; /* height of bottom cap/shade */
	font-size: 1px;
}

.dialog .b { background-position: bottom right; }

.dialog .b div {
	position: relative;
	width: 12px; /* bottom corner width */
	margin-left: -12px;
	background-position: bottom left;
}

.dialog .hd,
.dialog .bd,
.dialog .ft {
	position: relative;
}

.dialog .wrapper {
	/* extra content protector - preventing vertical overflow (past background) */
	position: static;
	max-height: 1000px;
	 /* overflow:auto; note that overflow:auto causes a rather annoying redraw "lag" in Firefox 2, and may degrade performance. Might be worth trying without if you aren't worried about height/overflow issues. */
}

.dialog h2,
.dialog h3,
.dialog p {
	margin: 0px; /* margins will blow out backgrounds, leaving whitespace. */
	padding: 1em 0px;
}

/*================ CLASSES ================*/

.clear { clear: both; }
.year { width: 60px; }
.title { color: #444; text-transform: uppercase; }