/* CSS Document 
xxxxx Groups together all Patrice site style info - last changed 11/30/08 xxxxxx
*/
@import url( browserDefaultZero.css); /* This is to "Zero Out" various default settings used by some browsers */
@import url( pnavStyles.css); /* Imports the navbar styles css document */
@import url( pcontentStyles.css); /* Imports content divs display css document */
@import url( pthumbStyles.css); /* Imports thumbnail display css document */
@import url( pmainPicStyles.css); /* Imports MainPic display css document */

a img {
border:none; /* stops annoying borders around linked images */
text-decoration:none;  /* stops annoying underlines on links */
}

body {
    margin: 0 auto;
    padding: 0;
    background: #000000;
    color: #CC9900;
    text-align: center;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
		text-decoration:none;
}

body p a, body a p, body a:link, body a:visited, body a:active, body a:hover { text-decoration:none;
} /* Should eliminate all href link blue highlights */

body a img {
border:none; /*gets rid of border in all linked images */
}
/* xxxxxxxxxx This Link Section makes the Links stay our Gold color  xxxxxxxxxx */
a:link {
text-decoration:none;
color:#CC9900;
}
a:active {
text-decoration:none;
color:#CC9900;
}
a:hover {
text-decoration:none;
color:#CC9900;
}
a:visited {
text-decoration:none;
color:#CC9900;
}
/* xxxxxxxxxx END Link Section  xxxxxxxxxx */
h1 {
    margin: 0 0 10px 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 140%;
    color: #CC9900;
}

h2 {
    margin: 0 0 10px 0;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 100%;
		color: #CC9900;
}

#wrapper {
    float:left;
		top:	2px;
		left: 2px;
		width:1000px; /* this width ensures whole page layout does not collapse*/
		clear:both;
}

#navbar {
		position:relative;
		top:1px;
		left:0px;
		text-decoration:none;
}
#navbar a:link, #navbar a:visited, #navbar a:active, #navbar a:hover {
text-decoration:none; /* gets rid of blue lines in all links */
}
#navbar a img {
border:none; /*gets rid of border in all linked images */
} 

p {
    margin: 0 auto 1em 0;
    padding: 0 20px;
    font-size: 85%;
    line-height: 1.4;
}

#pictureWrapper {
    position: relative;
		left: 5px;
		top: 5px;
    margin: 0 2px 0 2px;
}

.picBorder {
    background-color: #fff;
    padding: 2px;
    border: #00425E solid 2px;
}

p#caption {
    margin: 0;
    padding: 3px 4px;
    font-weight: bold;
    text-align: center;
}

#mainContent {
float:left;
min-height:600px; /* This setting stops the mainContent div from collapsing
                      and letting the footer flow into bottom content */
}

#mainContent a:link, #mainContent a:visited, #mainContent a:active, #mainContent a:hover {
text-decoration:none; /* gets rid of blue lines in all links */
}
#mainContent a img {
border:none; /*gets rid of border in all linked images */
}


#footer {
  	float:left;
		padding-top:12px;
		margin-left: 40px;
    font-size: 85%;
}

/*  xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx  */

/*xxxxxxxxxxxxxxxx INTRO DIVS xxxxxxxxxxxxxxxx*/
    /*--xxxxxxxx INTRO THEMES SECTION xxxxxxxx*/
#introLeftThemeContent {
		float:left;
		width:55%;
		min-width:400px;
		margin-right:6px;
}
#introRightThemeContent {
		position:relative; /*This setting, along with a left value keeps left and right divs separate - they would overlap as browser window was shrunk when both were floated */ left:560px;
		width:42%;
		min-width:360px;
		min-height:540px;
		margin-right:5px;
}
#introEarImage {
    position:absolute;
		top:120px;
		left:85px;
}
#introRingImage {
    position:absolute;
		top:90px;
		left:360px;
}
#introBraceletImage {
    position:absolute;
		left:8px;
		top:490px;
}
#introCuffImage {
    position:absolute;
		left:100px;
		top:280px;
}
#introPinImage {
    position:absolute;
		left:380px;
		top:140px;
}
#introNeckImage {
    position:absolute;
		left:10px;
}
#introLinkNeckImage {
    position:absolute;
    top:410px;
		left:40px;
}
    /*xxxxxxxx END OF INTRO THEMES SECTION xxxxxxxx*/

    /*xxxxxxxx REGULAR INTRO SECTION xxxxxxxx*/
		
#introLeftContent {
    position:relative;
		top:0px;
		width:585px;
		min-width:580px;
		margin: 0 0 2px 2px;
}
#introRightContent {
    position:absolute; /* a combo of position:absolute and left:590px keeps the left edge of the div 590px from the left edge of the browser window - this stops the divs from overlapping when window is resized  */
		left:590px;
		top:20px;
	  width:320px;
		min-width:314px;
		min-height:580px;
		margin: 0 0 2px 5px;
}
		
#introRow1, #introRow2, #introRow3 { /* These divs each hold a row of intro pics in the introLeft div  */
float:left;
width:580px;
left:5px;
height:185px;
overflow:hidden;
clear:both; /* clear is needed to keep rows stacked one on top of another */
}

#introRowRight { /* These divs each hold a row of intro pics in the introLeft div  */
width:310px;
left:5px;
overflow:hidden;
}
		
/*xxxxxxxx INTRO NECKS SECTION xxxxxxxx*/
		
		#rowFix1, #rowFix2, #rowFix3 { /* I came up with this to keep introRows from collapsing - each holds a 1 pixel image - this keeps rows of introNecks displaying properly  */
		float:left;
		}
		#rowFixRight  { /* I came up with this to keep introRows from collapsing - each holds a 1 pixel image - this keeps rows of introNecks displaying properly  */
		position:relative;
		}

#introRound, #introOval, #introDiamond, #introSquare, #introRectangle, #introDrop, #introOther, #introLariats, #introAnimalThemes, #introInsectThemes, #introSealifeThemes, #introAll {
		float:left;
		width:142px;
		height:195px;
		overflow:hidden;
		text-align:center;
		}
		
#introLink, #introWide {
		height:240px;
		overflow:hidden;
		text-align:center;
		}	
		
/*xxxxxxxx END OF INTRO NECKS SECTION xxxxxxxx*/

/*xxxxxxxxx*/

/*xxxxxxxx INTRO PINS SECTION xxxxxxxx*/

#introPinsRow1, #introPinsRow2 { /* These divs each hold a row of intro pics in the introLeft div  */
float:left;
width:940px;
left:5px;
height:210px;
overflow:hidden;
padding-top:5px;
clear:both; /* clear is needed to keep rows stacked one on top of another */
}

#introPinsAll, #introPinsAnimalThemes, #introPinsInsectThemes, #introPinsSealifeThemes {
		float:left;
		width:400px;
		height:200px;
		overflow:hidden;
		text-align:center;
}

/*xxxxxxxx END OF INTRO PINS SECTION xxxxxxxx*/

/*xxxxxxxxx*/

/*xxxxxxxx INTRO EARS SECTION xxxxxxxx*/

#introEarLeftContent {
    position:relative;
		top:6px;
		width:960px;
		min-width:950px;
		height:480px;
		margin: 0 0 2px 2px;
}
#introEarsRow1, #introEarsRow2 { /* These divs each hold a row of intro pics in the introLeft div  */
float:left;
width:940px;
left:5px;
height:135px;
overflow:hidden;
padding-top:5px;
clear:both; /* clear is needed to keep rows stacked one on top of another */
}
#introEarsRow3 { /* This div holds drop ears row of intro pics in the introLeft div  */
float:left;
width:940px;
left:5px;
height:180px;
overflow:hidden;
padding-top:5px;
clear:both; /* clear is needed to keep rows stacked one on top of another */
}
#introEarAll, #introEarDiamond, #introEarOctRectangle, #introEarOval, #introEarRound,  #introEarSquare, #introEarAnimalThemes, #introEarInsectThemes, #introEarSealifeThemes, #introEarDropAll, #introEarDropDiamond, #introEarDropOval, #introEarDropOther, #introEarDropRound {
		float:left;
		width:175px;
		height:176px;
		overflow:hidden;
		text-align:center;
}


/*xxxxxxxx END OF INTRO EARS SECTION xxxxxxxx*/

/*xxxxxxxxx*/

/*xxxxxxxx INTRO BRACE_CUFFS SECTION xxxxxxxx*/
#introBeadedBracelets, #introLinkBracelets, #introSealifeLinkBracelets, #introCuffs { /*for first 2 rows*/
		float:left;
		width:270px;
		height:150px;
		overflow:hidden;
		text-align:center;
		}
#introAnimalCuffs, #introSealifeCuffs, #introInsectCuffs { /* bottom row - different width*/
		float:left;
		width:180px;
		height:150px;
		overflow:hidden;
		text-align:center;
		}

/*xxxxxxxx END OF INTRO BRACE_CUFFS SECTION xxxxxxxx*/
		
/*xxxxxxxxxxxxxxxxx END OF INTRO DIVS xxxxxxxxxxxxxxxxxxx*/

#leftContent {
		float:left;
		width:55%;
		min-width:550px;
		margin-right:6px;
		}

#rightContent {
		position:relative; /*This setting, along with a left value keeps left and right divs separate - they would overlap as browser window was shrunk if both were floated */ 
		left:560px;
		min-width:420px;
		max-width:480px;
		min-height:600px;
		margin-right:5px;}
		
/*xxxxxxxxxx Content Variations xxxxxxxxxx*/

#leftNeckPinContent {
		float:left;
		width:580px;
		min-width:560px;
		margin-right:6px;
		}

#rightNeckPinContent {
    /*float:left;*/
    position:absolute;
		/*position:relative;*/ /*This setting, along with a left value keeps left and right divs separate - they would overlap as browser window was shrunk when both were floated */
		left:575px; /*##### FOR OPERA & WINDOWS ##### */
		top: 45px;/*##### FOR OPERA & WINDOWS ##### */
		/*left:10px;*/
		min-width:420px;
		max-width:480px;
		min-height:650px;
		margin-right:5px;
		}
		
#leftCuffPinContent {
		float:left;
		width:580px;
		min-width:560px;
		margin-right:6px;
		}

#rightCuffPinContent {
		position:relative; /*This setting, along with a left value keeps left and right divs separate - they would overlap as browser window was shrunk when both were floated */ left:590px;
		min-width:420px;
		max-width:480px;
		min-height:560px;
		margin-right:5px;
		}
		
#leftEarContent {
		float:left;
		width:670px;
		min-width:664px;
		margin-right:6px;
		}
#rightEarContent {
		position:relative; /*This setting, along with a left value keeps left and right divs separate - they would overlap as browser window was shrunk when both were floated */ 
		left:680px;
		min-width:260px;
		max-width:280px;
		min-height:560px;
		margin-right:5px;}

#multiRightContent {
		float:right;
		min-width:550px;
		min-height:600px;
}

#topWideContent {
		position:relative;
		top:-15px;
		left:2px;
		width:900px;
		height:210px;
}

#bottomWideContent {
		position:relative;
		top:-35px;
		left:2px;
		width:820px;
		min-height:300px;
}

#gallery {
 position:absolute;
 		 left: 2px;
      top: 60px;
    width: 470px;
/*    width: 570px;*/
		font-size:16px;
		color:#CC9900;
		font-weight:bold;
}

#picCountWrapper {
  /*position:absolute;*/
	/*right:5px;*/
	/*top:100px;*/
}

#picCount {
  position:absolute;
	top: 5px;
	left: 120px;
  color:#CC9900;
	font-size:18px;
  font-weight:bold;
  }
	
#picCountWrapper p {
text-decoration:none; /* gets rid of blue lines in all links */
}

#picCount2 {
  position:absolute;
	top: 68px;
	left: 230px;
  color:#CC9900;
	font-size:16px;
  font-weight:bold;
}
#picCount2 a:link, #picCount2 a:visited, #picCount2 a:active, #picCount2 a:hover {
text-decoration:none; /* gets rid of blue lines in all links */
}
	
	#thumbsWrapper {
	position:absolute;
	top: 90px;
	left: 5px;
	width: 500px;
	margin-top: 2px;
	overflow: hidden;
	z-index: 10;
}

#thumbsNeckPinWrapper {
	position:absolute;
	top: 90px;
	left: 2px;
	width: 580px;
	margin-top: 2px;
	overflow: hidden;
	z-index: 10;
}
#thumbsCuffPinWrapper {
	position:absolute;
	top: 40px;
	left: 2px;
	width: 580px;
	margin-top: 2px;
	overflow: hidden;
	z-index: 10;
}
#thumbsEarWrapper {
	position:absolute;
	top: 0px;
	left: -20px;
	width: 662px;
	margin-top: 2px;
	overflow: hidden;
	z-index: 10;
}
#thumbsDropEarWrapper {
	position:absolute;
	top: -30px;
	left: -20px;
	width: 662px;
	margin-top: 2px;
	overflow: hidden;
	z-index: 10;
}

#thumbs {
	position:absolute;
	top: 60px;
	left: 0px;
	width: 500px;
	margin-top: 2px;
	overflow: hidden;
	height: 180px;
	z-index: 10;
	
}
#thumbs td, #pCuffPin_thumbs td {
    text-align: center;
  	color:#CC9900;
		width:25%;
		font-size:14px;
  	font-weight:bold;
		height: 180px;
}
#pCuffPin_thumbs {
  position:relative;
	top:20px;
	left:10px;
	width: 570px;
	margin-top: 2px;
	overflow: hidden;
	z-index: 10;	
}
#pear_thumbs, #pdropEar_thumbs {
  position:relative;
	top:20px;
	left:10px;
	width: 660px;
	margin-top: 2px;
	overflow: hidden;
	z-index: 10;	
}
#pear_thumbs td, #pdropEar_thumbs td, #pCuffPin_thumbs td {
    text-align: center;
  	color:#CC9900;
		font-size:14px;
/*  	font-weight:bold;*/
		width:115px;
		height: 110px;
		padding-bottom:5px;
}
#pear_nav td {
		height:30px;
}

#thumbs2 a:link, #thumbs2 a:visited, #thumbs2 a:active, #thumbs2 a:hover {
text-decoration:none;  /*gets rid of blue lines in all links*/
}
#thumbs2 td {
    text-align: center;
  	color:#CC9900;
		width:25%;
		font-size:16px;
  	font-weight:bold;
		text-decoration:none;
		padding-top:4px;
		padding-bottom:4px;
}
#thumbs2 td a:link, #thumbs2 td a:visited, #thumbs2 td a:active, #thumbs2 td a:hover {
text-decoration:none;  /*gets rid of blue lines in all links*/
}
#thumbs2 img {
		text-decoration:none;
}

#thumbs_lariat {
	position:absolute;
	top: 60px;
	left: 0px;
	width: 400px;
	margin-top: 2px;
	overflow: hidden;
	height: 180px;
	z-index: 10;
	
}
#thumbs_lariat td {
    text-align: center;
  	color:#CC9900;
		width:25%;
		font-size:16px;
  	font-weight:bold;
}

#ear_thumbs {
	position:absolute;
	top: 30px;
	left: 0px;
	width: 460px;
	margin-top: 2px;
	overflow: hidden;
	height: 170px;
	z-index: 10;
	
}

#ear_thumbs td {
    text-align: center;
  	color:#CC9900;
		width:25%;
		font-size:16px;
  	font-weight:bold;
}

#thumbs img {
    border: none;
}

#thumbs a:link, #thumbs a:visited, #thumbs a:hover, #thumbs a:active {
    border: none;
    padding: 0;
		color:#CC9900;
		font-size:18px;
  	font-weight:bold;
}

#brace_thumbs {
	position:absolute;
	top: 0px;
	left: 0px;
	width: 800px;
	margin-top: 2px;
	overflow: hidden;
	height: 100px;
	z-index: 10;
	
}

#brace_thumbs td {
    text-align: center;
  	color:#CC9900;
		width:25%;
		font-size:16px;
  	font-weight:bold;
}

#wide_thumbs {
	position:absolute;
	top: -5px;
	left: 0px;
	width: 860px;
	margin-top: 2px;
	overflow: hidden;
	height: 150px;
	z-index: 10;
	
}

#wide_thumbs td {
    text-align: center;
  	color:#CC9900;
		width:25%;
		font-size:16px;
  	font-weight:bold;
}

#wide_thumbs img {
		max-width:80%;
    border: none;
}

#wide_thumbs a:link, #wide_thumbs a:visited, #wide_thumbs a:hover, #wide_thumbs a:active {
    border: none;
    padding: 0;
		color:#CC9900;
		font-size:18px;
  	font-weight:bold;
}


/* xxxxxxxxxxxxx mainPicText div info xxxxxxxxxxxxxxxxx */

#mainPicTextNecks {
		position:absolute;
		top:585px;
		left:10px;
		border-top:double #FF6600;
		padding:4px;
}
#mainStyleNumber {
    position:relative;
		top:-20px;
		left:200px;
}
/*#mainWideStyleNumber {
    position:relative;
		top:-20px;
		left:-5px;
}*/
#mainName, #materials, #size {
    color:#CC9900;
    font-weight: bold;
		font-size: 14px;
		position:relative;
		top:3px;
		width:550px;
		text-align:right;
    margin: 0;
    padding: 2px;
}

#materialsWideNecks, #sizeWideNecks {
    color:#CC9900;
    font-weight: bold;
		font-size: 14px;
		position:relative;
		top:3px;
		width:420px;
		text-align:right;
    margin: 0;
    padding: 2px;
		padding-bottom:6px;
		
}


/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */

#mainNeckMatchesButton {
		position:Absolute;
		top:25px;
		left:6px;
    margin: 0;
    padding: 2px;
}

#mainNeckStyleNumber {
    color:#CC9900;
    font-weight: bold;
		font-size: 14px;
		position:Absolute;
		top:3px;
		left:4px;
    margin: 0;
    padding: 2px;
}

#mainNeckName {
    color:#CC9900;
    font-weight: bold;
		font-size: 14px;
		position:Absolute;
		top:4px;
		left:148px;
    margin: 0;
    padding: 2px;
}
/* ########### */
#mainWideNeckMatchesButton {
		position:Absolute;
		top:25px;
		left:6px;
    margin: 0;
    padding: 2px;
}

#mainWideNeckStyleNumber {
    color:#CC9900;
    font-weight: bold;
		font-size: 14px;
		position:Absolute;
		top:3px;
		left:4px;
    margin: 0;
    padding: 2px;
}
#mainWideNeckName {
    color:#CC9900;
    font-weight: bold;
		font-size: 14px;
		position:Absolute;
		top:4px;
		left:148px;
    margin: 0;
    padding: 2px;
}

/* xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx */ 

#captionEars {
    color:#CC9900;
    font-weight: bold;
		font-size: 16px;
		position:relative;
		left:-48px;
    margin: 0;
    padding: 2px;
}
#mainEarsStyleNumber {
    position:relative;
		top:0px;
		left:-5px;
}
#mainNameEars, #materialsEars, #sizeEars {
    color:#CC9900;
    font-weight: bold;
		font-size: 14px;
		position:relative;
	/*	top:0px;*/
    margin: 0;
    padding: 2px;
}

#main_image {
	Position:relative;
	top:-15px;
	left:0px;
	margin-right:5px;
	min-width: 420px;
	max-width: 450px;
	min-height:620px;
	max-height:720px;
	vertical-align:baseline;
	overflow:hidden;
	border:2px solid #FF6600;
	padding: 3px;
	z-index: 1;
	
}
/*#main_image h2 {
  font-style:normal;
  font-size:14px;
	text-align:center;
}
#main_image p {
  font-size:13px;
}*/
	
#wide_pendant_image {
	Position:relative;
	left:40px;
	top:-50px;
	width: 550px;
	overflow:hidden;
	border:2px solid #FF6600;
	padding: 2px;
	z-index: 1;
	
}

#wide_main_image {
	Position:relative;
	float:left;
	top:-15px;
	margin-top:5px;
	margin-left:10px;
	padding-left:10px;
	padding-bottom:10px;
	width: 814px;
	border:2px solid #FF6600;
	z-index: 1;
	
}

#main_lariat_image {
	Position:relative;
	left:-50px;
	top:0px;
	width:550px;
	overflow:hidden;
	border:2px solid #FF6600;
	padding: 2px;
	z-index: 1;
	
}

#pin_image {
	Position:relative;
	left:0px;
	top:20px;
	width: 425px;
	overflow:hidden;
	border:2px solid #FF6600;
	padding-top:20px;
	padding-left:5px;
	padding-bottom:5px;
	z-index: 1;
}

#cuff_pin_image {
	Position:relative;
	left:0px;
	top:20px;
	width: 425px;
	height:480px;
	overflow:hidden;
	border:2px solid #FF6600;
	padding-top:15px;
	padding-left:5px;
	padding-bottom:5px;
	z-index: 1;
}

#ear_image {
	Position:relative;
	top: -10px;
	left:0px;
	vertical-align:middle;
	float:right;
	width:260px;
	min-height:350px;
	margin-top:10px;
	margin-left:10px;
	padding-top:50px;
	padding-left:16px;
	padding-right:12px;
	border:2px solid #FF6600;
	z-index: 1;
}

/*#brace_image {
	Position:relative;
	top: -20px;
	float:left;
	margin-top:30px;
	margin-left:20px;
	padding-left:10px;
	padding-bottom:8px;
	width: 800px;
	border:2px solid #FF6600;
	z-index: 1;
}*/

#link_neck_image {
	Position:relative;
	top: -20px;
	float:left;
	margin-top:30px;
	margin-left:20px;
	padding-left:10px;
	padding-bottom:8px;
	width: 800px;
	border:2px solid #FF6600;
	z-index: 1;
}


/*#caption {
    color:#CC9900;
    font-weight: bold;
		font-size: 16px;
		position:relative;
		left:-180px;
    margin: 0;
    padding: 2px;
}

#caption_wide {
    color:#CC9900;
    font-weight: bold;
		font-size: 16px;
		position:relative;
		left:20px;
    margin: 0;
    padding: 2px;
}*/


#captionMatches{
   font-size:36px;
	 color:#EE0000;
}

#matchesWrapper{
		padding-top:20px;
		padding-left:40px;
		text-align:left;
		font-size:16px;
}
#matchesWrapper h1{
font-size:20px;
color:#CC9900;
}

br.clear{
		clear: both;
}
/*Next 3 entries are for Tony Aslett's "easy clearing method" for floated divs */
/*Simply add class="clear" to the div CONTAINING the floated div tag(s) */
.clear:after{			/* Step 1 */
		content:".";
		display:block;
		height:0;
		font-size:0;
		clear:both;
		visibility:hidden;
}
.clear {					/* Step 2 */
		min-height:1px;
}									/* Step 3 */
* html .clear {
		height:1px;
}/*end of"easy clearing method"*/

.spacerGif {
border:none;
} /* gets rid of borders around pics with class="spacerGif" */

a * {
   border:0;
	 text-decoration:none;
}
a img {
   border:0;
	 text-decoration:none;
}