/* Most box-side values (margin, padding, border) are set with

four values, read as a clock. Top, then Right, then Bottom, then Left.

Cases where all sides are equal are given as a single value. If a value

is zero, no unit is needed, just "0". */



html, body, dl, dt, dd, img, form, hr, h1, h2, h3 {

	margin: 0;

	padding: 0;

	border: 0;

	list-style: none;

	}     /* the above rule zeroes most of the browser defaults that

	cause trouble (last selector must NOT have a comma following it!) */



body {

	color: #000;     /* global text color */

	background: #fff;     /* global background color */

	font-size: 100%;     /* IE needs a percentage value here to avoid text resizing bug */

	text-align: center;     /* IE5.5 needs this to center primary block elements, sigh... */

	font-family: georgia, serif;

	margin: 5px 0 10px 0;     /* sets top and bottom page spacing */

	}

a.general:link{color:#990033;text-decoration:none; font-size: 10pt; font-weight:bold;}
a.general:hover{color:#CC3300;text-decoration:none;font-weight:bold; font-size: 10pt; }
a.general:visited{color:#990033;text-decoration:none; font-weight:bold; font-size: 10pt; }
a.general:visited:hover{color:#CC3300;text-decoration:none;font-weight:bold; font-size: 10pt; }

a.gensml:link{color:#990033;text-decoration:none; font-weight:bold;}
a.gensml:hover{color:#CC3300;text-decoration:none;font-weight:bold;}
a.gensml:visited{color:#990033;text-decoration:none; font-weight:bold;}
a.gensml:visited:hover{color:#CC3300;text-decoration:none;font-weight:bold;}


h1 {

	height: 58px;     /* must match height of header image */

	}



h1 img {

	display: block;     /* IE is less buggy if image is blocked */

	margin: 0 auto;     /* centers blocked image; IE5.5 doesn't obey this centering */

	}



h1 span {

	position: absolute;

	left: -3000px;

	}     /* this hides the real h1 text, but lets screen readers and search engines see it */





/*XXXXXXXXXXXXXXXXXXX Mainnav rules XXXXXXXXXXXXXXXXXX*/



.mainnav {

	margin: 5px auto 2px auto;     /* set vertical spacing of nav here */

	}



.mainnav a {

	display: block;

	padding: 5px 10px;     /* set button size and horizontal spacing between buttons */

	font-size: 1em;

	text-decoration: none;

	color: #000;

	}



.mainnav a span {

	position: absolute;

	left: -3000px;

	}     /* this hides the real link text, but lets screen readers and search engines see it */



.mainnav a:hover {

	text-decoration: underline

	}







/*XXXXXXXXXXXXXXXXX Page structure rules XXXXXXXXXXXXXXXX*/



.wrapper {

	max-width: 2000px; /* constrains all content within to a minimum width, causes scroll below that width (not supported in IE6) */

	}



.maincontent {

	position: relative;      /* needed for absolute child positioning in page */

	}



.displaybox {

	position: relative;      /* needed for absolute child positioning in page */

	background: #990100;     /* sets red display box BG color */

	height: 385px;     /* must match height of prepared product display images */

	}



.centerimage {

	position: absolute;

	height: 385px;     /* must match product display image heights */

	width: 480px;     /* must match product display image widths */

	top: 0;

	left: 50%;     /* puts left edge of image at page center */

	margin-left: -240px;     /* must be one-half of product display image width; completes centering of .centerimage */

	}     /* This div positions the starting center image, to be exactly covered when a thumbnail is hover-activated. */



.triptych {

	position: absolute;

	height: 385px;     /* must match contained image height */

	width: 830px;     /* must match contained image width */

	top: 0;

	left: 50%;     /* puts left edge of image at page center */

	margin-left: -415px;     /* must be one-half of contained image width; completes centering of .triptych */

	}      /* This div positions the three-part image at page center; blank center section sized to match product images. */



.hatbox {

	position: relative;      /* needed for absolute child positioning in page */

	background: #FFF;     /* sets red display box BG color */

	height: 490px;     /* must match height of prepared product display images */

	z-index: 10;

	font-family: Georgia, "Times New Roman", Times, serif;

	font-size: 16px;

	color: #990000;

	font-weight: bold;

	text-align: justify;

	}	

	

.catalogbox {

	position: relative;      /* needed for absolute child positioning in page */

	background: #990100;     /* sets red display box BG color */

	height: 490px;     /* must match height of prepared product display images */

	z-index: 5;

	}	



.thumbnailsbox {

	margin: 20px auto 0 auto;     /* sets space between .displaybox and thumbnails */

	}



.thumbnailsbox div {

	width: 113px;     /* set width is greater than image width; allows visual spacing between thumbnails */

	height: 100px;

	}



.thumbnailsbox div a {

	display: block;

	width: 113px;     /* must match width above */

	height: 100px;

	text-decoration: none;

	background: url(../images/screen.gif) 4px -25px no-repeat;

	}     /* The "left" BG offset value should be half of excess div width set above (8px/2=4px in this case).

	The -25px "top" value on the BG lifts screen.gif up so it doesn't cover the thumbs' imaged text. */



.thumbnailsbox div a:hover {

	background-position: 200px 0;      /* hides screen.gif during hover; could be reversed to show during hover if desired */

	}



.thumbnailsbox div a span {

	position: absolute;

	top: 0;

	left: -3000px;

	width: 480px;     /* must match product display image widths */

	height: 385px;     /* must match product display image heights */

	margin-left: -250px;     /* must be one-half of product display image width */

	}     /* This rule prepares the spans to show at page center; temporarily hidden via large negative left value. */



.thumbnailsbox div a:hover span {

	left: 50%;     /* on hover the AP span is shown at page center, covering .centerimage exactly */

	}



.thumbnailsbox div a img {

	height: 385px;     /* must conform to overall design */

	width: 480px;     /* must conform to overall design */

	position: relative;     /* IE bugfix */

	}







/* as new thumbs are added, the listing below will need to include them too */



.thumb-1 {background: url(../images/hats/audrey_20.jpg) 4px 0 no-repeat;}

.thumb-2 {background: url(../images/hats/dahlia_20.jpg) 4px 0 no-repeat;}

.thumb-3 {background: url(../images/hats/erin_20.jpg) 4px 0 no-repeat;}

.thumb-4 {background: url(../images/hats/lady-faire_20.jpg) 4px 0 no-repeat;}

.thumb-5 {background: url(../images/hats/ladygatsby_20.jpg) 4px 0 no-repeat;}

.thumb-6 {background: url(../images/hats/priscilla_20.jpg) 4px 0 no-repeat;}

.thumb-7 {background: url(../images/hats/sultana_20.jpg) 4px 0 no-repeat;}

.thumb-8 {background: url(../images/hats/tiffany_20.jpg) 4px 0 no-repeat;}



/* The 4px left offset on the BG's above must be half of desired spacing

between thumbnails, (8px/2=4px in this case). */











.Paulina_catalog_text {

	font-family: Georgia, "Times New Roman", Times, serif;

	font-size: 14px;

	font-style: normal;

	font-weight: normal;

	color: #990100;

}

.Paulina_body_text {

	font-family: Georgia, "Times New Roman", Times, serif;

	font-size: 18px;

	font-style: normal;

	font-weight: normal;

	color: #990100;

}



.Paulina_medium_body_text {

	font-family: Georgia, "Times New Roman", Times, serif;

	font-size: 16px;

	font-style: normal;

	font-weight: normal;

	color: #000;

}

.Paulina_link_text {

	font-family: Georgia, "Times New Roman", Times, serif;

	font-size: 16px;

	font-style: italic;

	font-weight: bold;

	color: #FFCC00;

	text-decoration: underline;

}

.Paulina_banner_head {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 24px;

	font-style: italic;

	font-weight: normal;

	color: #FFCC00;

}

.Paulina_body_text_small {

	font-family: Georgia, "Times New Roman", Times, serif;

	font-size: 14px;

	font-style: italic;

	font-weight: normal;

	color: #000;

}















/*XXXXXXXXXXXXXXXXXXX Footer rules XXXXXXXXXXXXXXXXXX*/



.footer {

	text-align: center;

	padding: 10px 0 0 0;     /* sets space above footer */

	font-size: .9em;

	}



.footer p {

	margin: 0;

	}





/*XXXXXXXXXXXXXXXX Preloader XXXXXXXXXXXXXXXXXXXXXX

This element can hold IMG tags which will call (and cache) image files

that are meant for other pages. .preloader is always kept offscreen so

the content images are never seen in this context. Helps speed image

loading on subsequent product display pages. */



.preloader {

	position: absolute;

	left: -3000px;

	top: 0;

	width: 1000px;

	}



.preloader img {

	position: absolute;

	}

.textbox {



	position: relative;      /* needed for absolute child positioning in page */

	background: #FFF;     /* sets red display box BG color */

	height: 490px;     /* must match height of prepared product display images */

	z-index: 40;

	font-family: Georgia, "Times New Roman", Times, serif;

	font-size: 16px;

	color: #990000;

	font-weight: bold;

	padding: 1;

	padding-left: 0.5em;

	text-align: justify;

}