/**************************************************   Chilli Source CSS Styles     */

span, b, li, ul, ol, form, input, p, a, h1, h2, img { margin: 0px; padding:0px;}
img, .border			{ border-style: none;}
p 						{ font: 11px Arial; color: #999; line-height: 18px;}
a  						{ text-decoration: none; font: bold 12px Arial; color: #6189a1;}
b						{ font: bold 11px Arial; color: #666; line-height: 18px;}
em						{ font: italic bold 11px Arial; color: #666; line-height: 18px;}
h1 						{ font: bold 14px Arial; color: #005072; clear: both;}
h2 						{ font: bold 12px Arial; color: #6189a1; line-height: 20px;}
li						{ font: bold 11px Arial; color: #70abc8; line-height: 18px;}
ul 						{ margin-left: 30px;}
input, textarea,select			{ padding: 2px; color: #999; font: 11px monospace; border: 1px solid #70abc8;}
#viewing a				{ font: 10px Arial; color: #b6b6b6;}
p#viewing 				{ font: 10px Arial; color: #999;}
#viewing a:hover		{ text-decoration: underline;}

/**************************************************   Layout  */

body { 
	background: url(/images/background.png) no-repeat;
	background-position:top;
	background-color: #e6e6e6;
	width: 965px;
	margin: 0px auto;}

#main {	
	width: 965px;
	position: absolute;
	margin-top: 134px;
	float: left;}
	
#content-wrapper {
	background: url(/images/wrapper-bg.gif);
	float: left;
	width: 952px;
	padding: 0px 5px 0px 8px;}
	
#leftbar {
	width: 131px;
	height: 100%;
	float: left;
	background: url(/images/extras-bg.gif) repeat-y;
	margin-bottom: 0px;}
	
#content { float: right; width: 813px; font-weight:bold; }

/************************************************  General Styles  */
.error { color: red; }

/**************************************************   Content  */

#viewing		{ margin-bottom: 5px;}
		
.block          { width: 772px; float: left; padding: 5px 20px 20px 20px;}
.blockLeft      { width: 490px; float: left; padding: 5px 0px 0px 6px;}
.blockRight     { width: 306px; float: left; padding: 20px;}
.blockRightCats { width: 300px; float: right; padding: 0px 4px 0px 0px;}
.block50Left    { width: 371px; float: left; padding: 10px 15px 10px 20px;}
.block50Right   { width: 371px; float: left; padding: 10px 20px 10px 15px;}

/**************************************************   Carousel*/

#carousel {
	width: 490px;
	height: 333px;
	font: normal 12px Arial; color: #005072; line-height: 16px;}

/**************************************************   Content  Catagories*/	

.cat 	{ float: left;}
.one	{ width: 301px; height: 68px; background: url(/images/cat-1.png); margin: 4px 0px 14px 0px;}
.two	{ width: 145px; height: 150px; background: url(/images/cat-2a.png); margin-bottom: 14px;}
.three	{ width: 145px; height: 150px; background: url(/images/cat-3a.png); margin-bottom: 14px;}
.four	{ width: 145px; height: 150px; background: url(/images/cat-4a.png); margin-bottom: 14px;}
.five	{ width: 145px; height: 150px; background: url(/images/cat-5a.png); margin-bottom: 14px;}
.six	{ width: 145px; height: 150px; background: url(/images/cat-6a.png); margin-bottom: 14px;}
.seven	{ width: 145px; height: 150px; background: url(/images/cat-7a.png); margin-bottom: 14px;}

/************************************************************* Artwork Pages */

.blockPrint { width: 772px; float: left; padding: 20px; margin-bottom: 10px;}
.blockPrint p, .blockPrint h2 { margin-left: 170px;}

.whiteText { font: 9px Arial; color: #FFF; padding: 3px 0px 3px 3px;}
.blackText { font: 9px Arial; color: #000; padding: 3px 0px 3px 3px;}

.printImg 		{ float: left;}
.file_type 		{ float: right; width: 550px;}	
.artImage 		{ width: 111px; height: 191px; float: left; margin-right: 5px;}

.print 		{ background: url(/images/artwork_dept/print.jpg);}
.file 		{ background: url(/images/artwork_dept/file.jpg);}
.fonts 		{ background: url(/images/artwork_dept/fonts.jpg);}
.pantone 	{ background: url(/images/artwork_dept/pantone.jpg);}

/************************************************************* Products Page */

.prodColumns { width: 20%;  float: left;}	
.prodColumns a { font: 11px Arial; width: 100%; margin: 3px 0px; float: left;}
.prodColumns a:hover { text-decoration: underline;}

/******************************************************************* Search Results ****************************************************/
	
.resultsItem {
	width: 21%; 
	float: left; 
	margin: 5px 0px 5px 3%; 
	height: 160px;
	text-align: center;}
	
.resultsInfo {
	width: 98%; 
	text-align: center; 
	padding: 5% 0%; 
	margin-bottom: 5px; 
	border: 1px dotted #999;}
	
.showing {
	width: 100%;
	text-align: center;
	margin-bottom: 10px;}

.info { float: left;}

/********************************************************************************************** ITEM PAGE */

#itemImage { float: left; clear: both; margin: 0px 0px 10px 40px;}
.itemThumb { margin: 3px; float: left;}
#downloadbtn { position: relative; top: -2px;}

.altProducts {
	width: 42%;
	margin: 1%;
	padding: 1%;
	float: left;
	border: 1px dotted #CCC;
	text-align: center;
	height: 150px;}

/*********************************************************************************************** CONTACT */

#contactPanelLeft 		{ width: 31%; margin-right: 3%; float: left;}
#contactPanelRight 		{ width: 66%; float: left;}
.contactBlock { float:left; padding: 6px; width:96%; height: 452px; border: 1px dotted #CCC; }
#contactBox div.fieldBlock		{ float: left; padding: 12px; width: 220px; }	
#contactBox input 	{ margin: 0px 5px 10px 0px;}
#contactBox select { width: 170px }

#submit { float: right; margin-left: 180px; border: 0px;}

#address { float: right; width: 25%; padding-right: 1%;}

.popCalendar {
	visibility: visible;
	z-index: 999;
	position: absolute;
	left: -500px;
	top: 0px;
	width: 174px;
	height: 189px;
	border-style: none;}
	
/**************************************************   Lightbox  */
	
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 100%; background-color: #000; }

/**************************************************   Maskhead  */
	
#maskhead {
	background: url(/images/maskhead-bg.png);
	height: 134px;
	width: 965px;
	position: absolute;
	margin-top: 0px;
	float: left;}
	
#maskheadRight 			{ width: 355px; float: right;}	
#maskheadRight a 		{ color: #FFF; font: bold 14px Arial;}
#maskheadRight a:hover 	{ color: #2eb135;}	
	
#maskheadContact {
	width: 330px;
	float: right;
	height: 66px;
	text-align: right;
	padding: 15px 16px 0px 0px;}
		
/**************************************************   Search  */
	
#search {
	float: left;
	width: 220px;
	height: 29px;
	padding: 10px 0px 0px 55px;}
	
#search a {
	color: #999;}
		
#search input { 
	background: #FFF url(/images/input-bg.gif) repeat-x; 
	margin-right: 15px; 
	border: 1px solid #999;}
		
/************************************************************* Quick Quote ****************************************************/
	
#QQ            		{ width: 316px; height: 177px; background: url(/images/QQ-bg.gif) no-repeat; float: left; padding: 40px 10px 10px 20px; margin-bottom: 20px;}	
#QQ p		        { color: #FFF;}
#QQleft				{ float: left; width: 150px;}
#QQright			{ float: right; width: 150px;}			 
#QQsubmit 			{ margin-left: 80px; border-style: none;}
#QQ input 			{ margin-bottom: 3px;}

/******************************************************************* Price Matrix Styles ****************************************************/

.price_matrix 				{ width: 100%; float:left; margin: 12px 0px;}
.matrix_box                 { float: left; width: 70px; margin: 1px;}
.matrix_quantity			{ text-align: center; background: #F2F3F4; width: 64px; margin-bottom: 1px; padding: 3px;}
.matrix_price 				{ text-align: center; background: #F2F3F4; width: 64px; padding: 3px;}
.matrix_header 				{ width: 100%; float: left; padding: 3px;}

/**************************************************   Login  */
		
#login {
	float: left;
	width: 66px;
	height: 30px;
	padding: 18px 0px 0px 0px;
	text-align: center;}
	
#loginBox {
	width: 216px; 
	height: 97px; 
	background: url(/images/login-bg.gif) no-repeat; 
	padding: 26px 10px 10px; 
	margin: 20px 0px 20px 30px;}
	
#loginBox input { margin: 0px 0px 6px 0px;}
	
#reminderBox {
	width: 216px; 
	height: 26px; 
	background: url(/images/reminder-bg.gif) no-repeat; 
	padding: 37px 10px 10px; 
	text-align: right;
	margin: 20px 0px 20px 30px;}	

#reminderBox a, #loginBox a { color: #70abc8; font: bold 16px Arial; margin-left:10px;}
	
/**************************************************   Nav  */
	
#nav {
	background: url(/images/nav-bk.png) no-repeat;
	width: 131px;
	height: 145px;
	float: left;
	text-align: left;
	padding: 0px 0px 8px 0px;}
	
#nav a {
	width: 114px;
	display: block;
	color: #ffffff;
	font: bold 12px Arial;
	line-height: 22px;
	padding: 0px 0px 0px 23px;}
	
#nav a:hover,
.sectionIndex #index,
.sectionAbout #about,
.sectionProducts #products,
.sectionDownloads #downloads,
.sectionArtwork #artwork,
.sectionContact #contact,
.sectionTerms #terms,
.sectionUsers #users,
.sectionAccount #account { color: #FFF; text-decoration: underline;}
		
/**************************************************   Extras  */
	
#extras { float: left;}
			
#extras-foot {
	width: 130px;
	height: 9px;
	float: left;}			
			
/**************************************************   Footer  */
	
#foot {
	background: url(/images/foot-bg.png);
	height: 40px;
	width: 925px;
	clear: both;
	float: left;
	padding: 8px 20px 0px 20px;}
	
#foot p, #foot a { color: #FFF; font-weight:normal;}
#foot a:hover { text-decoration: underline; color: #FFF;}

#smlPrint p { 
	font-size:9px;
	color: #005781;}
	
/**************************************************   Images  */
	
#logo       { margin: 4px 0px 0px 12px; float: left;}
.side_btn	{ margin: 0px 0px 3px 8px;}