/* Perl and Wine CSS Document */

body { margin: 0px;	background: #000 url(../imgs/logo/pbs_outline1.jpg) 50% 146px no-repeat; color: #ccc; }


/* :::::::::::::::::::::::::::::::::::::::: Layout ::::::::::::::::::::::::::::::::::::::::::::::: */

#container {
	position: relative;
	margin: 65px auto 10px auto;
	padding: 0;
	width: 800px;
/*	height: 400px; */
	background-color: #000;
	background: transparent;
}

#header {
	position: relative;
	margin: 0px;
	padding: 10px 0;
	height: 50px;
	background: transparent;
}
#header img { position: absolute; bottom: 0px; padding: 5px 0; left: 10px; border: none; margin: 0;  }

#menu-main {
	display: block;
	padding: 24px 0 0 0;
	margin: 0px;
	height: 26px;
	float: right;
}

#content {
	clear: both;
	margin: 0;
	padding: 10px;
	width: 780px;
	height: 400px;
	background-color: transparent;
	background: #000 url(../imgs/logo/pbs_outline_dark1.jpg) 50% 10px no-repeat;
	overflow: hidden;
	border-top: 1px solid #bbb;
	border-bottom: 1px solid #bbb;
	font-family: Arial, Helvetica, sans-serif;
}

#enter { position: relative; width: 200px; left: 300px; top: 160px; }
#copy { font: 11px Arial, Helvetica, sans-serif; color: #999; text-align: center; padding: 4px; }
#load { color: #ff7733; font: 14px "Trebuchet MS", Helvetica, Sans-Serif; }


/* :::::::::::::::::::::::::::::::::::::::: Links :::::::::::::::::::::::::::::::::::::::::::::::: */

a {	color: #fff; text-decoration: none;	outline: none;}
a:hover { color: #999; text-decoration: none;}

/* thanks to eric meyer for the following: */
a span {display: none;}

a:hover span {
	display: block;
	position: absolute;
	padding: 5px; margin: 10px; z-index: 100;
	background: transparent;
	text-align: left;
	border: none;
}

div#thumbnails a:hover span { top: 320px; left: 0px; width: 225px; }


/* :::::::::::::::::::::::::::::::::::: Other formatting ::::::::::::::::::::::::::::::::::::::::: */

#enter a { font-size: 18px; color: #fff; }
#enter a:hover { color: #fff; }

#menu-main li { display: inline; padding: 0px; margin: 0px; }
#menu-main a {
	display: block;
	float: left;
	margin-left: 10px;
	padding: 1px 2px;
	color: #878787;
	font-family: "Century Gothic", Arial, Helvetica, sans-serif;
	font-size: 11px;
	letter-spacing: 1px;
	text-decoration: none;
}
#menu-main a:hover { color: #cdcdcd; }
#menu-main a:active { color: #cdcdcd; }

h1, img.heirloom { font: 20px Zapfino, "Edwardian Script", "Apple Chancery", cursive, serif; font-weight: normal; line-height: 20px; color: #334; font-style: italic; margin: 50px 0 15px 40px; padding: 0; }
h2 { font: 18px "Century Gothic", Arial, Helvetica, sans-serif; font-weight: normal; font-style:italic; text-align: center; margin: 50px;}

.collection_desc { margin: 0px; padding: 40px 5px; font-style: italic; font: 12px Didot, Georgia, serif; color: #ccc; line-height: 1.8; letter-spacing: 1px; text-align: justify; }

.pearls { color: #fff; font-style: italic; font-family: "Gill sans light", "Century Gothic", Arial, Helvetica, sans-serif; }

.dropcap {
	float: left;
	color: #fff;
	padding: 10px 18px 20px 18px;
	margin: 0px 8px 0px 0;
	font-size: 450%;
	background: url(../imgs/ornament.gif) no-repeat;
	font-family: Georgia, Times;
	border: 1px #777 solid;
	height: 40px;

	/* IE seems to need the following line */
	line-height: 1em;
}


/* :::::::::::::::::::::::::::::::::::::::::: Product :::::::::::::::::::::::::::::::::::::::::::: */

#content1 { left: 62; top: 24;}
#content2 { left: 446px; top: 276px;}
#content3 { left: 720px; top: 10px;}
#content4 { left: 815px; top: 260px;}
#content5 { left: 603px; top: 196px;}
#content6 { left: 605px; top: 590px;}
#content7 { left: 242px; top: 444px;}
#content8 { left: 100px; top: 565px;}
#content9 { left: 35px; top: 290px;}
#content10 { left: 220px; top: 246px;}

ul#menu-left { float: left; width: 200px; list-style: none; border: thin red solid; }
ul#menu-left li { padding: 4px 0; font-size: 14px; }
ul#menu-left li a:link, ul#menu-left li a:visited { color: #cdcdcd; }
ul#menu-left li a:active, ul#menu-left li a:hover { color: #fff; }

#wrapper {
	margin: 0;
	padding: 0;
	overflow: hidden; 
	height: 400px;
	width: 300px;
	position: relative;	
}
 
#inner {
/*	width: 977px;
	height: 890px; */
	width: 1100px;
	height: 1000px;
	background: #282828 url(../imgs/product/product.jpg) no-repeat;
	position: relative;
}

.scrolling-content {
	background: transparent url(../imgs/bubble.png) top left no-repeat;
	width: 80px;
	height: 40px;
	text-align: center;
	position: absolute;
	padding: 0; margin: 0;
}
 
.scrolling-content h6 { color: #fff; padding: 12px 0; margin: 0; font-size: 12px; }


/* ::::::::::::::::::::::::::::::::::::::::::: Press ::::::::::::::::::::::::::::::::::::::::::::: */


#thumbnails { clear: both; padding: 0px; width: 228px; height: 300px; text-align: center; float: left; margin: 0 9px 0 0; }
#img-nav { list-style: none; margin: 0; padding: 0; width: inherit; }
#img-nav li { display: block; float: left; padding: 0; margin: 2px; width: 72px; height: 72px; }
ul#img-nav li a { display: block; padding: 3px; margin: 0; background: none; outline: none; height: 66px; }  /* img + border */
ul#img-nav li a:hover, ul#img-nav li a.active { background-color: #ccc; }
ul#img-nav img { border: #000 1px solid; padding: 0; margin: 0; }

#display { position: relative; display: block; height: 400px; width: 315px; float: right; text-align: center; color: #fff; border: margin: 0 8px}

#detail { position: relative; height: 400px; width: 200px; float: right; margin: 0 0 0 8px; }
#desc { font: 12px "Lucida Grande", sans-serif; }

#desc span { display:block; margin: 20px 10px; color: #dddddd; font-size: 10px; }

#loading { position: absolute; top: 50%; left: 45%; width: 40px; height: 40px; color: #000; visibility: hidden; z-index: 20; }
#loading img { border: none; }


/* ::::::::::::::::::::::::::::::::::::::::::: Video ::::::::::::::::::::::::::::::::::::::::::::: */

#vidplayer { height: 230px; width: 320px; margin: 80px auto; } 


/* :::::::::::::::::::::::::::::::::::::::::: Contact :::::::::::::::::::::::::::::::::::::::::::: */

ul#contact, div#prod { list-style: none; margin: 90px auto; width: 720px; padding: 0; }
ul#contact li { font: 14px "Lucida Grande", sans-serif; letter-spacing: 2px; padding: 3px 2px; text-align: center; }