/*
******************************************************

       pixpal.com CSS

       handcoded by Francis Booth
       June 2006

******************************************************
       */



/* layout */

	body { background-color:#fff; margin:0; padding:0; overflow: hidden; }
	#pixPal {
		background:#fff  url('../images/bgHolidayPhotos.jpg') no-repeat;
		width:680px; height:500px;
		position:absolute; top:50%; left:50%;
		margin:-250px 0 0 -340px;
	}
	#content {
		width:415px; height:300px;
		position:absolute; left:166px; top:153px;
	}

	#example, #description { height:250px; top:35px; position:absolute; }
	#example { width:200px; left:-20px; border:3px gray solid; }
	#contact #example, #newsletter #example { border:none; }
	#description { width:215px; right:0px; z-index:50; }
	#about #description { width:292px; }
	#footer, #w3love { position:absolute; bottom:4px; font-size:9px; }
	#footer { left:50%; width:100px; margin-left:-25px; }
	#w3love { right:6px; color:#aaa; }
	#w3love a { color:#aaa; border-bottom:1px dotted #aaa;}
	#w3love a:hover { color:#900; border-bottom:2px solid #900; }

	#giftLink, #corporateLink { left:10px; height:200px; top:50px; position:absolute; width:160px; border:3px gray solid; }
	#corporateLink { left:220px; }
	#giftLink:hover, #corporateLink:hover { border:3px #900 solid; }


/* links */

	a { color:#900; text-decoration:none; border-bottom:1px dotted #900; margin-bottom:1px; }
	a:hover { border-bottom:2px solid #900; color:#900; cursor:pointer; }
	a img { border:none; } /* sorts ie */


/* typography */

	body { /* top cascading body-copy style */
		font:11px/15px 'Lucida Grande', 'Lucida Sans Unicode', verdana, arial, sans-serif;
		color:#424242;
	}
	h1, h2, h3, h4, h5, h6, p, blockquote, ol, ul, li, dl, dt, dd { margin:0; padding:0; }
	h1, h2, h3, h4, h5, h6, p { padding-bottom:7px; }
	a { color:#900; text-decoration:none; border-bottom:1px dotted #900; margin-bottom:1px; }
	a:hover { border-bottom:2px solid #900; color:#900; cursor:pointer; margin-bottom:0; }
	a img { border:none; } /* sorts ie */
	
	#description ul { padding-left:16px; padding-bottom:3px; }
	
	#content h1 {
		position:absolute; text-indent:-9999px; width:430px; height:40px;
		background-repeat:no-repeat;
	}
	#home #content h1 { background-image:url('../images/titles/welcome.gif'); }
	#corporate #content h1 { background-image:url('../images/titles/corporate.gif'); }
	#gift #content h1 { background-image:url('../images/titles/gift.gif'); }
	#about #content h1 { background-image:url('../images/titles/about.gif'); }
	#about #content.background h1 { background-image:url('../images/titles/aboutBackground.gif'); }
	#about #content.reviews h1 { background-image:url('../images/titles/aboutReviews.gif'); }
	#about #content.karma h1 { background-image:url('../images/titles/aboutKarma.gif'); }
	#contact #content h1 { background-image:url('../images/titles/contact.gif'); }
	#newsletter #content h1 { background-image:url('../images/titles/newsletter.gif'); }
	#corporate #example, #corporate #description { /* overrides for areas with double line titles */
		height:235px; top:50px; position:absolute;
	}

	a.order {
		background:transparent url('../images/buttons/orderPixpalButton.gif') no-repeat;
		display:block; width:99px; height:22px; text-indent:-9999px;
		border:none;
	}
	a.quote {
	/*	position:absolute; left:137px; top:-68px; z-index:5; */
		position:absolute; right:-30px; top:-18px; z-index:5; 
		background:transparent url('../images/buttons/clickForQuote.gif') no-repeat;
		display:block; width:107px; height:80px; text-indent:-9999px;
		border:none;
	}
	a.quote:hover { background-position:bottom; border:none; }
	

/* forms */
	input, textarea { 
		width:200px;
		font:11px/15px 'Lucida Grande', 'Lucida Sans Unicode', verdana, arial, sans-serif;
		color:#424242;
	}
	textarea { height:140px; }

/* js divscroller positioning */
	#scrollUp, #scrollDown { width:20px; height:20px; background-color:red; position:absolute; left:-30px; z-index:50; cursor:pointer; }
	#scrollUp { top:205px; background:transparent url('../images/buttons/scrollArrowUp.gif') no-repeat; }
	#scrollDown { top:235px; background:transparent url('../images/buttons/scrollArrowDown.gif') no-repeat; }
	#scrollUp:hover, #scrollDown:hover { background-position:bottom; }
	#scrollTrack, #scrollDrag { display:none; }
	#scrollContentMask { position:absolute; left:0px; top:0px; width:300px; height:255px; clip:rect(0,300px,255px,0); overflow:hidden; z-index:6; }
	#scrollContent { position:absolute; left:0; top:0; width:300px; border:none; }


/* ...extraneous */

	#testtesttesttest {
		border:1px red solid;
	}