/* To find a well-explained answer, a translation of the meaning of the rule, and
   also get a list of any possible errors, go to this site:
   http://gallery.theopalgroup.com/selectoracle/ 
*/

/* @import url(http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold); */
/* @import url(http://fonts.googleapis.com/css?family=Nobile); */
/* @import url(http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light); */

/* Global Resetting */
html{	
	width: 100%;
	height: 100%;
	background: #D5D2DF url(../images/region-background.png) repeat-x scroll left top;
}
body {
	width: 100%;
	height: 100%;
	font-size: 62.5%;		/* reset font-sizes to 1em == 10px */
}
* {
	font-size: 1em;			/* reset font-sizes to 1em == 10px */
/*	font-family: Helvetica,Arial,sans-serif; */
/*	font-family:Verdana,Helvetica,sans-serif; */
	font-family: "Helvetica Neue", Helvetica, Arial, "Nimbus Sans L", sans-serif;
/*	font-family: Nobile,Helvetica,Verdana,sans-serif;	*/
/*	font-family: 'Josefin Sans Std Light',Helvetica,Verdana,sans-serif; */
/*	letter-spacing: 0.00em; */
	list-style:none;
}

/* So that prettyPhoto doesn't overlay the bar */
#SilverStripeNavigator {
	z-index: 10000;
}

p {
	font-size: 1.5em;
}

/* This mirrors the p selector above */
/* Need this for the login form so that the email & password labels are the same size as everything else */
div > label {
	font-size: 1.5em;
}

pre {
	font-family: "Courier 10 Pitch", Courier, monospace;
}
code {
	font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}


/* Create my own un-resetted selectors */

strong, b {
	font-weight: bolder;
}

em, i {
	font-style: italic;
}

del {
	text-decoration: line-through;
}

/* http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postId=5341&productId=1 */
/* Note that before version 7, IE treated vertical-align uniquely among other browsers. Using this approach, I need the underscore hack for IE 6 and below. */
sup,
sub {
	height: 0;
	line-height: 1;
	 vertical-align: baseline;
	_vertical-align: bottom;
	position: relative;
}

sup { bottom:  1ex; }
sub { top   : .5ex; }

/* Universal classes */

.clear { clear: both; }
.center { margin: 0 auto; }
.left { float: left; }
.right { float: right; }

/* Layout CSS */
#Main {
	margin:0 auto;
	width:960px;
}
#Header {
	height: 91px;
	padding: 20px 60px 0 0;
	background:#8EBED5 url(../images/region-header.jpg) no-repeat scroll top left;
}
	#Header h1 {
		display: none;
	}
	#Header h2 {
		border-color: #ffffff;
		color: #d4d2d4;
		letter-spacing: 1.2px;
		text-transform: none;
		font-variant: small-caps;
		font-weight: bold;
		font-size: 1.5em;
		font-family: Georgia,"Times New Roman", Times,serif;
		float: right;
		width: 50%;
		text-align: right;
	}
	#Header h2 + h2 {
		clear: right;
	}
	
#Menu {
	color: #22223D;
	background: #8EBED5 url(../images/region-menu.jpg) no-repeat scroll top left;
	height: 31px;
}

	#Menu ul {
		padding: 0 0 0 155px;
		height: 100%;
		font-size: 1.5em;
		font-weight: bold;
	}

		#Menu ul li {
		/*	display: inline; */
			float: left;
			height: 100%;
			padding: 0 10px;
		}

			#Menu ul li a {
				font-family: Helvetica,Verdana,sans-serif;
				color: #3F575E;
				text-decoration: none;
				position: relative;
				bottom: -6px;
			}
	
				#Menu ul li.current {
					background: #CFD4E7 url(../images/region-menu-current.jpg) no-repeat scroll top left;
				}

				#Menu ul li.current a {
					color: #E0FFFF;
				/*	border-bottom: 1px dotted #E0FFFF; */
					text-shadow: 0 0 10px #444, 0 0 4px #333, 1px 1px 2px #141430;
				}

				#Menu ul li:hover {
					background: #CFD4E7 url(../images/region-menu-current.jpg) no-repeat scroll top left;
				}

				#Menu ul li a:hover {
					color: #E0FFFF;
					/*	border-bottom: 1px dotted #E0FFFF;	*/
					text-shadow: 0 0 10px #444, 0 0 4px #333, 1px 1px 2px #141430;
				}


#ContentContainer {
	background:#CFD0E4 url(../images/region-body.jpg) no-repeat scroll top left;
	min-height: 385px;
	padding:25px 60px 5px 60px;
}

#Content {
	margin: 0 40px 0 40px;
}

div.breadcrumbs {
	margin-bottom:10px;
	font-size:1em;
	color:#666;
}
div.breadcrumbs a {
	text-decoration:none;
}

#Footer {
	font-size: 75%;
	background:#CFD0E4 url(../images/region-footer.jpg) no-repeat scroll bottom left;
	height: 82px;
}

	#Footer p {
		padding: 30px 0 0 0;
	}

	#Footer a {
		color:#CFD0E4;
	}
		#Footer a:hover {
			text-decoration:none;
		}

/* Jewelry styling */

#jewelry-rotator-container {
	margin: 0 0 30px 50px;
	/*	float: right;
	 *	width: 250px;
	 *	padding: 0 0 2em 20px;
	 */
}

.typography .jewelry-item {
	list-style-type:none;
	margin: 0;
	padding: 0;
	background: transparent none;
}

.jewelry-item-thumbnail img {
/*	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	 border-radius: 20px;
*/	border: 1px solid #aaa;
	background-color: white;
	padding: 4px;
}

.jewelry-item-sold {
	color: #900;
	font-weight: bold;
}

.jewelry-sale-text {
	color: #006633;
	font-weight: bold;
	font-style: italic;
}

.jewelry-item-caption {
	font-size: 95%;
}

/* Jewelry Item Page */

.jewelry-page-image-primary {
	float: left;
	width: 370;
	padding: 0 20px 1.5em 0;
}

/* --- */

/* http://www.twinhelix.com/css/iepngfix/ -- uses files blank.gif & iepngfix.htc */
img, div { behavior: url(http://www.lesleyslair.com/themes/Lesleys-Lair/css/iepngfix.htc) }