/**********************************************/
/** CLAIRE ID / www.claireid.com / 2006 v1.0 **/
/** replaces claireid.css 					 **/
/**********************************************/

html { overflow-y: scroll; }

body {
	background: #ffffff url(/images/bg-body.gif) no-repeat center top;
	font-family:  verdana, arial, "Bitstream Vera Sans", geneva, helvetica, helve, sans-serif;
	font-size: 13px;
	margin: 0;
	padding: 0;
}

	* html body {
		font-family:  verdana, arial, "Bitstream Vera Sans", geneva, helvetica, helve, sans-serif;
		font-size: x-small;
}

#skiptomain {
	display: none;
}

#wrapper {
	width: 772px;
	margin-left: -386px;
	margin-top: 0;
	padding: 0;
	position: absolute;
		left: 50%;
	text-align: center;
}

#site-header {
	width: 750px;
	height: 103px;
	background: #231f20 url(/images/bg-site-header.gif) no-repeat left top;
	margin: 0;
	padding: 32px 11px 0 11px;
	position: relative;
	z-index: 1;
}

	#site-header-lft {
		width: 260px;
		height: 103px;
		float: left;
		z-index: 2;
	}

	#site-header-rgt {
		width: 228px;
		height: 53px;
		float: right;
		padding: 50px 0 0 0;
		z-index: 2;
	}

	#site-header-contact {
		width: 398px;
		height: 24px;
		position: absolute;
		bottom: 0;
		left: 115px
	}

#pagecontainer {
	width: 750px;
	background: transparent url(/images/bg-wrapper.gif) repeat-y left top;
	color: #000;
	font-family: verdana, arial, "Bitstream Vera Sans", geneva, helvetica, helve, sans-serif;
	font-size: 11px;
	margin: 0;
	padding: 0 11px;
	text-align: left;
	border-top: 1px solid #231f20; /* solves float issue */
}

#pagecontainer.default {
    background: none;
    width: 772px;
    height: 704px;
    position: relative;
    padding: 0 0px;
    margin: 0px 0px 0px 0px;
}

#site-footer {
	width: 750px;
	height: 110px;
	background: #000 url(/images/bg-site-footer.gif) no-repeat left top;
	color: #fff;
	padding: 15px 11px 10px 11px;
}

/******************************
 MISC
******************************/

br.breaker { clear: both; }
br.lbreaker { clear: left; }
br.rbreaker { clear: right; }

img { border: 0; }

form.inline { display: inline; }

p.fivespace { margin: 5px 0px 0px 0px; }
p.tennspace { margin: 10px 0px 0px 0px; }

/*********************************
 BODY CONTENT
*********************************/

#bodycontent {
	width: 750px;
	padding: 0;
	margin: 10px 0px 0px 0px;
}

#pagecontainer.default #bodycontent {
    margin: 0px;
    padding: 0px;
}   

	/*****************
	 LHS NAV
	*****************/

	#lhsnav {
	    font-family:  "Trebuchet MS", arial, sans-serif;	
		width: 180px;
		float: left;
		margin: 0;
		text-align: left;
		font-size: 1.0em;
	}
	
	    #pagecontainer.default #lhsnav {
	        position: absolute;   
	        left: 10px;
	        top: 10px;
	    }
	
	    #lhsnav h3 {
	        color: #BF9F2B;
	        font-weight: bold;
	        font-size: 1.2em;
	        letter-spacing: 0px;
			padding: 0px 0px 0px 5px;
			margin: 10px 0px 5px 0px;
	    }

		#lhsnav ul {
			margin: 0px 0px 20px 0px;
			padding: 0px 0px 0px 18px;
			list-style-type: disc;
		}

		#lhsnav ul li {
			font-size: 11px;
			line-height: 10px;
			font-weight: bold;
			padding: 3px 0 2px 0px;
		}

			#lhsnav ul li.lhsnavspacer {
				border: 0;
			}

        #lhsnav ul li a {
			        display: block;
			        line-height: 16px;
        }

		#lhsnav ul li a:link, #lhsnav ul li a:visited {
			color: #000;
			text-decoration: none;
		}

		#lhsnav ul li a:hover {
			color: #000;
			text-decoration: underline;
		}

			#lhsnav ul li.lhsnavactive a:link, #lhsnav ul li.lhsnavactive a:visited {
				font-weight: bold;
				color: #BF9F2B;
			}


	#secnav {
		margin: 10px 0px 0px 17px;
	}

	#secnavshopsafe {
		margin-left: 10px;
	}


	/*****************
	 MAIN CONTENT
	*****************/

	#maincontent {
		width: 565px;
		float: right;
		margin: 0;
		padding: 0;
		font-size: 11px;
		color: #000000;
		text-align: left;
	}

		/* maincontent a:link classes removed due to chaos */
		/* replaced with following */

		.custserv a:link, .custserv a:visited {
			color: #000;
			text-decoration: none;
		}

		.custserv a:hover {
			color: #000;
			text-decoration: none;
		}

		/* end replacing */

		#maincontent ul {
			margin: 0px 0px 0px 10px;
			padding: 0px 0px 0px 30px;
			list-style: none;
		}

		#maincontent ul li {
			background: #ffffff url(/images/bulletcustnav.gif) no-repeat left center;
			line-height: 23px;
			font-family:  verdana, arial,"Bitstream Vera Sans", geneva, helvetica, helve, sans-serif;
			font-size: 11px;
			padding: 0px 0px 0px 10px;
			font-weight: normal;
		}

		#maincontent ul li a:link, #maincontent ul li a:visited {
			color: #BF9F2B;
			text-decoration: underline;
		}

		#maincontent ul li a:hover {
			color: #636;
			text-decoration: underline;
		}


		#maincontent a:link, #maincontent a:visited {
			color: #BF9F2B;
			text-decoration: underline;
		}

		#maincontent a:hover {
			color: #636;
			text-decoration: underline;
		}

		#maincontent h1 {
			color: #636;
			font-size: 14px;
			font-weight: bold;
			margin-bottom: 12px;
		}
		
		#maincontent h2 {
			color: #BF9F2B;
			font-size: 14px;
			font-weight: bold;
			margin-bottom: 8px;
		}
		
		#maincontent p {
				line-height: 18px;
		}

		h1#silver {
			color: #666666;
		}
        
        #maincontent div.proddesc ul {
			margin: 0px;
			padding: 0px;
			list-style: none;
        }
        
        #maincontent div.proddesc ul li {
			background: #ffffff url(/images/bulletcustnav.gif) no-repeat left 8px;
			line-height: 23px;
			font-family:  verdana, arial,"Bitstream Vera Sans", geneva, helvetica, helve, sans-serif;
			font-size: 11px;
			padding: 0px 0px 0px 10px;
			font-weight: normal;
		}

		/*****************
		 PROD PAGE LEFT
		*****************/

		#ppleft {
			width: 290px;
			float: left;
			margin: 0;
			padding: 0;
			text-align: left;
		}

			#ppenlgnotes {
				width: 290px;
				margin: 0;
				padding: 15px 0px 0px 0px;
			}

				#ppenlgnotes a:link, #ppenlgnotes a:visited {
					color: #666;
					text-decoration: underline;
				}

				#ppenlgnotes a:hover {
					color: #636;
				}

				#ppenlg {
					width: 130px;
					float: left;
					text-align: left;
					margin: 0;
					padding: 0;
				}

				#ppnotes {
					width: 130px;
					float: right;
					text-align: right;
					margin: 0;
					padding: 0;
				}

			#ppnextprev {
				clear: both;
				width: 290px;
				margin: 0;
				padding: 0;
				text-align: left;
			}
						
			    #ppnextprev p {
			        display: block;
			        font-weight: bold;
			        border-bottom: 1px solid #000;
			    }
			    
			    #ppnextprev .left,  #ppnextprev .right {
			        width: 50%;
			        color: #CCC;
			    }
			    
			    #ppnextprev .left {
			        text-align: left; 
			        float: left;  
			    }
			    
			    #ppnextprev .right {
			        text-align: right;  
			        float: right; 
			    }
			    
			    #ppnextprev .left a, #ppnextprev .right a {
			        text-decoration: none;   
			        color :#000;
			    }
			    
			    #ppnextprev .left a:hover, #ppnextprev .right a:hover {
			        text-decoration: none;   
			        color :#BF9F2B;
			    }
			    
			    #ppnextprev .left img, #ppnextprev .right img {
			        vertical-align: middle;
			        margin: 0px 5px 4px 5px;
			    }
			
				#ppnpcont {
					width: 190px;
					margin: 0px 0px 0px 50px;
					padding: 30px 0px 0px 0px;
					color: #e0e0e0;
					font-size: 11px;
				}

				* html #ppnpcont {
					margin: 0;
				}

					#ppprevimg {
						float: left;
						width: 90px;
						text-align: left;
					}

					#ppnextimg {
						float: right;
						width: 90px;
						text-align: right;
					}

					#ppnpcont p {
						margin: 10px 0px 0px 0px;
					}

					#ppnpcont a:link, #ppnpcont a:visited {
						color: #636;
					}

					#ppnpcont a:hover {
						color: #000;
					}

		/*****************
		 PROD PAGE RIGHT
		*****************/

		#ppright {
			width: 255px;
			float: right;
			margin: 0;
			padding: 15px 0px 0px 0px;
			text-align: left;
			font-family:  verdana, arial,"Bitstream Vera Sans", geneva, helvetica, helve, sans-serif;
			font-size: 11px;
			color: #2b2b2b;
		}

			#ppright h1 {
				color: #636;
				font-size: 14px;
				font-weight: bold;
				margin-bottom: 12px;
			}

			.prodprice {
				margin: 10px 0px;
				color: #BF9F2B;
				font-family: arial,  verdana, "Bitstream Vera Sans", geneva, helvetica, helve, sans-serif;
				font-size: 14px;
				font-weight: bold;
			}

			.proddesc {
				margin: 4px 0px 0px 0px;
				line-height: 18px;
			}

			#ppchoicecol {
				padding-top: 12px;
			}

			#ppchoicesiz {
				padding-top: 12px;
			}

			#ppright h2 {
				color: #7f7f7f;
				font-size: 12px;
				font-weight: bold;
				display: inline;
				margin: 0px 0px 5px 0px;
				padding: 0px 0px 5px 0px;
			}

			#ppaddbutt {
				padding-top: 12px;
			}

/**************************
 FOOTER
**************************/

#footer {
	clear: both;
	margin: 25px 0px 0px 0px;
	padding: 0;
	/* border-top: 1px solid #e0e0e0; */
	color: #666;
	font-size: 11px;
	line-height: 16px;
	text-align: right;
}

	#footer a:link, #footer a:visited {
		color: #666;
		text-decoration: none;
	}

	#footer a:hover {
		color: #636;
		text-decoration: underline;
	}


/**************
CONTACT FORM
***************/

label {
	float: left;
	width: 75px;
}

input.textinput { border: 1px solid #663366; background-color: #ffffff; font-family: "Verdana", "Helvetica", "Arial", "MS Sans Serif"; font-size: 11px; color: #000000; }
textarea.textareainput { border: 1px solid #663366; background-color: #ffffff; font-family: "Verdana", "Helvetica", "Arial", "MS Sans Serif"; overflow: auto; font-size: 11px; color: #000000; }
select.textselect { border: 1px solid #663366; background-color: #ffffff; font-family: "Verdana", "Helvetica", "Arial", "MS Sans Serif"; font-size: 11px; color: #000000; }
input.submit { background-color: #663366; font-family: "Verdana", "Helvetica", "Arial", "MS Sans Serif"; font-size: 11px; color: #ffffff; }

/*****************
 IMAGE FLOATS
 *****************/

.floatleft {
    float: left;   
}

img.floatleft {
	float: left;
	margin: 0px 10px 0px 0px;
}

img.floatright {
	float: right;
	margin: 0px 0px 10px 0px;
}

/***************************************/
/****** SCROLLER ***********************/
/***************************************/

#scroller-outer {
	width: 710px;
	height: 91px;
	margin: 10px 0 0 20px;
	overflow: hidden;
}

	ul#scroller  {
		list-style-type: none;
		width: 1100px;
	}

		ul#scroller li {
			display: inline;
			float: left;
		}

			.simply-scroll-container { /* Container DIV - automatically generated */
				position: relative;
			}

				.simply-scroll-clip { /* Clip DIV - automatically generated */
					position: relative;
					overflow: hidden;
					z-index: 2;
				}

				.simply-scroll-list { /* UL/OL/DIV - the element that simplyScroll is inited on */
					position: absolute;
					top: 0;
					left: 0;
					z-index: 1;
					overflow: hidden;
					margin: 0;
					padding: 0;
					list-style: none;
				}

					.simply-scroll-list li {
						padding: 0;
						margin: 0;
						list-style: none;
					}

					.simply-scroll-list li img {
						border: none;
						display: block;
					}

				.simply-scroll-btn {
					position: absolute;
					background-image: url(buttons.png);
					width: 42px;
					height: 44px;
					z-index:3;
					cursor: pointer;
				}

				.simply-scroll-btn-left {
					left: 6px;
					bottom: 6px;
					background-position: 0 -44px;
				}
				.simply-scroll-btn-left.disabled {
					background-position: 0 0 !important;
				}
				.simply-scroll-btn-left:hover {
					background-position: 0 -88px;
				}

				.simply-scroll-btn-right {
					right: 6px;
					bottom: 6px;
					background-position: 84px -44px;
				}
				.simply-scroll-btn-right.disabled {
					background-position: 84px 0 !important;
				}
				.simply-scroll-btn-right:hover {
					background-position: 84px -88px;
				}

				.simply-scroll-btn-up {
					right: 6px;
					top: 6px;
					background-position: -126px -44px;
				}
				.simply-scroll-btn-up.disabled {
					background-position: -126px 0 !important;
				}
				.simply-scroll-btn-up:hover {
					background-position: -126px -88px;
				}

				.simply-scroll-btn-down {
					right: 6px;
					bottom: 6px;
					background-position: -42px -44px;
				}
				.simply-scroll-btn-down.disabled {
					background-position: -42px 0 !important;
				}
				.simply-scroll-btn-down:hover {
					background-position: -42px -88px;
				}

/* Custom class modifications - override classees - .simply-scroll is default */

			.simply-scroll { /* Customisable base class for style override DIV */
				width: 710px;
				height: 91px;
				clear: both;
				margin: 0;
				padding: 0;
			}

				.simply-scroll .simply-scroll-clip {
					width: 710px;
					height: 91px;
				}

					.simply-scroll .simply-scroll-list {}

					.simply-scroll .simply-scroll-list li {
						float: left;
						width: 75px;
						height: 91px;
						margin: 0 20px 0 0;
					}
					.simply-scroll .simply-scroll-list li img {}

				.simply-scroll .simply-scroll-btn {}

				.simply-scroll .simply-scroll-btn-left {}
				.simply-scroll .simply-scroll-btn-left.disabled {}
				.simply-scroll .simply-scroll-btn-left:hover {}

				.simply-scroll .simply-scroll-btn-right {}
				.simply-scroll .simply-scroll-btn-right.disabled {}
				.simply-scroll .simply-scroll-btn-right:hover {}

				.simply-scroll .simply-scroll-btn-up {}
				.simply-scroll .simply-scroll-btn-up.disabled {}
				.simply-scroll .simply-scroll-btn-up:hover {}

				.simply-scroll .simply-scroll-btn-down {}
				.simply-scroll .simply-scroll-btn-down.disabled {}
				.simply-scroll .simply-scroll-btn-down:hover {}
				
				
.sort {
    float: right;  
    line-height: 18px;
    margin: 0px;
}

    .sort label {
        width: auto;    
        margin-right: 10px;
    }   
    
    .sort input.st {
        height: 12px;   
        font-size: 12px;
    }
    
    .sort input.ss {
        height: 18px;   
        background: #000;
        color: #FFF;
        font-size: 12px;
        border: 1px solid #333;
    }


#sizecontainer {
    background: #fff;
    color: #000;   
    font-size: 12px;
    text-align: left;
    margin: 0px;
    padding: 10px 0px 0px 10px;
}

    #sizecontainer table {
        font-size: 11px;
        margin: 10px 0px 0px 0px;
        border-collapse: collapse;
    }
    
    #sizecontainer table th , #sizecontainer table td {
        text-align: left;
        padding: 3px 8px 3px 4px;
        border: 1px solid #CCC;
    }   
    
    
    
    
    
/**********************
	 START SIFR HEADER CODE
	***********************/
	
	/* These are standard sIFR styles... do not modify */
	
	.sIFR-flash {
		visibility: visible !important;
		margin: 0;
	}
	
	.sIFR-replaced {
		visibility: visible !important;
	}
	
	span.sIFR-alternate {
		position: absolute;
		left: 0;
		top: 0;
		width: 0;
		height: 0;
		display: block;
		overflow: hidden;
	}
	
	/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
	.sIFR-flash + div[adblocktab=true] {
	  display: none !important;
	}
	
	/* These "decoy" styles are used to hide the browser text before it is replaced... the negative-letter spacing in this case is used to make the browser text metrics match up with the sIFR text metrics since the sIFR text in this example is so much narrower... your own settings may vary... any weird sizing issues you may run into are usually fixed by tweaking these decoy styles */
	
	.sIFR-hasFlash h3 {
		visibility: hidden;
	}
	
	/**********************
	 END SIFR HEADER CODE
	***********************/
	
	
#colourchart {
    text-align: left;
    width: 350px;
    margin: 0px auto;
    line-height: 20px;  
    font-size: 0.9em; 
}
    #colourchart .colourchart-half {
        float: left;
        width: 50%;
    }

    #colourchart .colourchart-half .colourbox {
        float: left;
        width: 40px;
        height: 20px;
        margin: 0px 5px 5px 0px;
    }
    
    
#basetext {
    background: #000;   
    color: #FFF;
    font-size: 11px;
    padding: 10px 0px;
}