/* Body and basic style */
* { padding: 0; margin: 0; border: 0; }
body { color: #333; padding-bottom: 50px; background: #fff url(gfx/background.gif) top center repeat-y; }
ul { list-style: none; }
a { color: #0f3fcf; outline: none; text-decoration: none; }
a:hover { text-decoration: underline; }

textarea { font-family: inherit; }

/* -- -- -- -- -- -- -- -- -- -- */
/* ## TYPOGRAPHY ## */
/* -- -- -- -- -- -- -- -- -- -- */
body { font-size: 0.9em; font-family: arial, verdana; }
div#notice-box p { font-weight: bold; font-size: 80%; }
	div#notice-box strong { font-size: 230%; }

/* extra nav */
ul#extra-nav { font-size: 90%; }
ul.clist a { font-size: 110%; }

/* # content header */
h2 { font-size: 25px; }
div#extra-column-wrap h3 { font-size: 17px; }
h3 { font-size: 17px; }
h4 { font-size: 15px; }

/* # search-box */
form.search-box label { font-size: 28px; font-weight: bold; }
form.search-box input.search { font-weight: bold; }

/* # popular-cloud */
p.popular-cloud strong { font-size: 120%; }
p.popular-cloud a { font-weight: bold; }

/* # Reasons */
div.reasons strong { font-size: 110%; }

/* # Products */
div.prod-list span { font-weight: bold; font-size: 110%; }

/* # cart */
div.sh-wrap ul a.cart-item { font-size: 80%; }
div.sh-wrap p.total { font-family: serif; font-size: 170% }
div.sh-wrap p.total strong { font-family: arial,verdana; }

/* -- -- -- -- -- -- -- -- -- -- */
/* ## LINK COLORS ## */
/* -- -- -- -- -- -- -- -- -- -- */

ul.clist a { color: #000; }
ul.clist a:hover { color: #0099ff; }

/* # Main wrap */
div#main-wrap { width: 874px; margin: 0 auto; }

/* # shopping cart */
div.sh-wrap ul a { color: #333333; }
div.sh-wrap ul a:hover { text-decoration: underline; }

/* -- -- -- -- -- -- -- -- -- -- */
/* ## HEADER ## */
/* -- -- -- -- -- -- -- -- -- -- */

/* Header wrap */
div#header { height: 114px; }

/* Logo */
h1 { position: absolute; top: 10px; text-indent: -999em; width: 262px; height: 104px; background: url(gfx/logo.gif) 0 0 no-repeat; }
	h1 a { display: block; height: 104px; }

/* Order notice */
div#notice-box { background: #ff0000 url(gfx/notice-right.gif) 100% 100% no-repeat; position: absolute; top: 0; left: 50%; margin-left: -164px; width: 328px; }
	div#notice-box p { padding: 9px 12px 9px 43px; color: #fff; background: url(gfx/notice-left.gif) 0 100% no-repeat; }
	div#notice-box span { position: absolute; top: 10px; margin-left: 30px; }

/* Extra Navigation (Account - FAQ - Blog) */

ul#extra-nav { position: relative; padding: 26px 6px 0 0; text-align: right; }
	ul#extra-nav li { display: inline; padding-right: 15px; background: #fff url(gfx/seperator.gif) 100% 50% no-repeat; }
	ul#extra-nav li.extra-last { background: none; padding: 0; }

ul#extra-nav a { color: #0099ff; font-weight: bold; }
	ul#extra-nav a:hover { text-decoration: underline; }

/* Main navigation */

ul#nav { margin-top: 21px; width: 436px; height: 23px; float: right; }
	ul#nav li { float: left; height: 23px; margin-right: 10px; }
		ul#nav li a { text-indent: -999em; display: block; height: 23px; background: url(gfx/menu.gif) 0 0 no-repeat; }

	ul#nav li.nav-home	{ width: 53px; }
		ul#nav li.nav-home a	{ background-position: 0 0; }
			ul#nav li.nav-home a:hover	{ background-position: 0 -23px; }

	ul#nav li.nav-mylist	{ width: 74px; }
		ul#nav li.nav-mylist a	{ background-position: -63px 0; }
			ul#nav li.nav-mylist a:hover	{ background-position: -63px -23px; }

	ul#nav li.nav-uspy	{ width: 46px; }
		ul#nav li.nav-uspy a	{ background-position: -150px 0; }
			ul#nav li.nav-uspy a:hover	{ background-position: -150px -23px; }

	ul#nav li.nav-works	{ width: 116px; }
		ul#nav li.nav-works a	{ background-position: -208px 0; }
			ul#nav li.nav-works a:hover	{ background-position: -208px -23px; }

	ul#nav li.nav-who	{ width: 100px; margin-right: 0; }
		ul#nav li.nav-who a	{ background-position: -336px 0; }
			ul#nav li.nav-who a:hover	{ background-position: -336px -23px; }

/* -- -- -- -- -- -- -- -- -- -- */
/* ## Category Navigation ## */
/* -- -- -- -- -- -- -- -- -- -- */

div.category-nav { width: 170px; float: left; }

h3.ca { margin-bottom: 5px; display: block; text-indent: -999em; height: 40px; background: url(gfx/category.gif) 0 0 no-repeat; }
h3.random { height: 73px; }

ul.clist li { padding: 3px 15px; }
ul.clist li a { text-decoration: none; display: block; }

/* -- -- -- -- -- -- -- -- -- -- */
/* ## Main Content ## */
/* -- -- -- -- -- -- -- -- -- -- */

div.content-wrap { padding: 0 10px; width: 488px; position: absolute; margin-left: 187px; }
	h2 { color: #333333; font-weight: normal; text-align: center; }

.extra-attention { color: #ff3300; }

div.content-wrap p { line-height: 1.2em; text-align: center; }
div.content-wrap p.par { margin: 0 auto; width: 350px; }
div.content-wrap p.notice { padding: 10px 0; font-weight: bold; color: #0099ff; }
div.content-wrap p.message { padding: 10px 0; color: #b2b2b2; font-weight: bold; }
div.content-wrap p.message span a { color: #333; text-decoration: underline; }
div.content-wrap p.mlist { padding: 10px 0 3px 0; font-size: 80%; }

div.content-wrap p.information { font-size: 90%; font-weight: bold; background: url(gfx/dot.gif) 0 0 repeat-x; padding-top: 10px; }
	div.content-wrap p.information span { display: block; background: url(gfx/dot.gif) 100% 100% repeat-x; padding-bottom: 10px; }


/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */
/* ############### Front Page ## */
/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */

/* -- -- -- -- -- -- -- -- -- -- */
/* # Search box */
form.search-box { width: 385px; margin: 0 auto; }
	form.search-box label { vertical-align: middle; color: #0099ff; }
	form.search-box input { margin-left: 4px; vertical-align: middle; }
		form.search-box input.search { width: 200px; color: #666666; padding: 2px; border: 1px solid #ccc; }

/* -- -- -- -- -- -- -- -- -- -- */
/* # Popular cloud */
p.popular-cloud { width: 325px; margin: 0 auto 10px auto; text-align: center; }
	p.popular-cloud strong { display: block; float: left; height: 2em; color: #f9195f; }

p.popular-cloud a { color: #666666; }
p.popular-cloud a:hover { color: #0099ff; text-decoration: underline; }

/* -- -- -- -- -- -- -- -- -- -- */
/* # Flash Animation Holder */
div.flash-animation { z-index: 0; position: relative; width: 382px; margin: 0 auto; }

/* -- -- -- -- -- -- -- -- -- -- */
/* # Reasons */
div.reasons { margin: 20px auto;  width: 376px; }

/* -- -- -- -- -- -- -- -- -- -- */
/* # First Page Product List */
div.prod-list { background: url(gfx/dotted-border-top.gif) 0 0 no-repeat; margin: 20px auto; width: 435px; }
	div.prod-list div { background: url(gfx/dotted-border-bottom.gif) 100% 100% no-repeat; }
	head:first-child+body div.prod-list div { padding-bottom: 18px; }

div.prod-list dl { margin-top: 12px; background: url(gfx/dotted-border-top.gif) 0 -20px no-repeat; width: 139px; float: left; }
	div.prod-list dl.middle-part { margin-top: 2px; padding-top: 12px; width: 155px; }
	div.prod-list dl.last-part { margin-top: 4px; padding-top: 10px; width: 135px; }
	div.prod-list dl { text-align: center; }
		div.prod-list dl dt { height: 92px; }
			head:first-child+body div.prod-list dl { min-height: 92px; height: auto; }
		div.prod-list dl dd a { color: #fff; padding: 4px 22px 4px 0; background: url(gfx/add.gif) 100% 100% no-repeat; }
	div.prod-list span { color: #f92768; }


/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */
/* ############### Account page ## */
/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */

div.account-wrap { width: 451px; margin: 15px auto; background: url(gfx/account/wrap-middle.gif) 0 0 repeat-y; }
div.account-wrap div.ac-top { padding-top: 25px; background: url(gfx/account/wrap-top.gif) 0 0 no-repeat; }
div.account-wrap div.ac-bottom { padding-bottom: 15px; background: url(gfx/account/wrap-bottom.gif) 100% 100% no-repeat; }
div.account-wrap h2 { margin: 0 auto 10px auto; width: 188px; height: 50px; background: url(gfx/account/account.gif) 0 0 no-repeat; text-indent: -9999em; }

div.account-wrap p.info { color: #666666; margin-bottom: 20px; font-weight: bold; font-size: 110%; }

div.account-wrap div.part { width: 362px; padding: 10px 0 0 0; margin: 10px auto; border-top: 1px solid #ccc; }

div.information { color: #666666; font-size: 110%; font-weight: bold; text-align: center; }
div.information strong { color: #0099ff; display: block; }

div.settings { border-bottom: 1px solid #ccc; font-size: 110%; }
div.settings a.edit { color: #f9195f; font-size: 70%; vertical-align: top; }
div.content-wrap div.settings p { text-align: left; padding: 0 0 7px 0; }
div.settings strong { color: #0099ff; text-align: right; padding-right: 10px; display: block; float: left; width: 132px; }

/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */
/* ############### Contact page ## */
/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */

form#contact-form { padding-top: 25px; width: 453px; margin: 0 auto; background: url(gfx/contact/form-bottom.gif) 100% 100% no-repeat; }
form#contact-form fieldset { padding: 25px 0; background: url(gfx/contact/form-top.gif) 0 0 no-repeat; }
form#contact-form div { background: url(gfx/contact/form-middle.gif) 0 0 repeat-y; }
form#contact-form h2 { margin: 0 auto 20px auto; width: 254px; height: 59px; background: url(gfx/contact/contact.gif) 0 0 no-repeat; text-indent: -9999em; }

div.content-wrap form#contact-form p.msg { color: #787878; width: 370px; margin: 0 auto; }

div.content-wrap form#contact-form p.email { padding: 10px 0 20px 0; color: #999999; text-align: center; }
	div.content-wrap form#contact-form p.email a { color: #1111ff; text-decoration: underline; }

form#contact-form p.inp { padding-left: 15px; height: 2.2em; }
form#contact-form label { float: left; text-align: right; font-size: 120%; display: block; font-weight: bold; color: #666666; padding-right: 10px; width: 80px; }
form#contact-form .text { width: 242px; padding: 2px; float: left; border: 2px inset #ddd; }

form#contact-form p.text-a { padding-left: 15px; height: 170px; }
	form#contact-form p.text-a textarea { height: 170px; }

form#contact-form p.submit-contact { width: 250px; text-align: right; margin: 0 auto; clear: both; padding-top: 10px; }

/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */
/* ############### My/List page ## */
/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */

h2.mylist-header { margin: 0 auto; text-indent: -9999em; margin-bottom: 20px; width: 218px; height: 68px; background: url(gfx/mylist/mylist.gif) 0 0 no-repeat; }

.mylist { margin: 0 auto 10px auto; width: 304px; background: url(gfx/mylist/list.gif) 0 0 repeat-y; }
	.mylist div.ml-headers { text-align: right; padding: 5px 0; background: url(gfx/mylist/list-top.gif) 0 0 no-repeat; }
		.mylist div.ml-headers span { text-transform: lowercase; text-align: left; display: block; color: #ff3300; font-size: 17px; font-weight: bold; text-decoration: underline; }
		.mylist div.ml-headers span.ml-itemh { float: left; padding-left: 28px; width: 194px; }

	.mylist p { border-top: 2px solid #bfbfbf; margin-top: 5px; background: url(gfx/mylist/list-bottom.gif) 100% 100% no-repeat; }
	.mylist ul { padding-left: 16px; }
		.mylist ul li { height: 1.3em; padding: 5px 0; }

	.mylist a.ml-item { color: #454545; float: left; display: block; width: 200px; }
		.mylist a.ml-item:hover { color: #0099ff; }
	.mylist span.ml-price { font-size: 120%; font-weight: bold; color: #f9195f; float: left; display: block; width: 60px; }
	.mylist input.text { width: 18px; border: 1px solid #666666; }

	div.content-wrap .mylist p { padding: 0 11px; text-align: right; }
	.mylist p input#ml-delete { float: left; }

/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */
/* ############### On Campus page ## */
/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */

h2.usnacks-changing { margin: 0 auto 30px auto; width: 371px; height: 110px; background: url(gfx/oncampus/usnacks-changing.gif) 0 0 no-repeat; text-indent: -9999em; }
h2.why-usnacks { margin: 20px auto; width: 317px; height: 43px; background: url(gfx/oncampus/why-usnacks.gif) 0 0 no-repeat; text-indent: -9999em; }

ol.why-list { list-style-type: none; text-align: center; padding: 0 20px; font-size: 130%; }
/*ol.why-list span { margin-left: -8px; }*/
ol.why-list p { color: #666666; padding-bottom: 20px; font-size: 70%; }

div.interested-box { background: url(gfx/oncampus/interested-bottom.gif) 100% 100% no-repeat; width: 304px; margin: 10px auto 30px auto; }
div.interested-box h3 { text-indent: -999em; background: url(gfx/oncampus/interested.gif) 0 0 no-repeat; height: 30px; }
div.content-wrap div.interested-box p { font-weight: bold; padding: 10px 20px 20px 20px; }


/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */
/* ############### Who & Why page ## */
/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */

h2.whowhy { margin: 0 auto 30px auto; width: 292px; height: 67px; background: url(gfx/whowhy/whowhy.gif) 0 0 no-repeat; text-indent: -9999em; }

h3.usnacks-makes-simple { margin: 20px auto 0 auto; width: 429px; height: 52px; background: url(gfx/whowhy/usnacks-makes-simple.gif) 0 0 no-repeat; text-indent: -9999em; }
h3.real-people-make { padding-top: 35px; margin: 0 auto 20px; width: 429px; height: 52px; background: url(gfx/whowhy/real-people-make.gif) 100% 100% no-repeat; text-indent: -9999em; }

h3.tedious-hard { margin: 20px auto; width: 184px; height: 45px; background: url(gfx/whowhy/tedious-hard.gif) 0 0 no-repeat; text-indent: -9999em; }
h3.simple-easy { margin: 20px auto; width: 184px; height: 45px; background: url(gfx/whowhy/simple-easy.gif) 0 0 no-repeat; text-indent: -9999em; }

div.two-columns { text-align: center; float: left; width: 49%; }

div.two-columns ul { font-size: 120%; margin: 0 auto; width: 184px; }
	div.two-columns ul li { text-transform: lowercase; background: url(gfx/whowhy/dot.gif) 100% 100% repeat-x; padding: 5px 0; margin-bottom: 5px; }
	div.two-columns ul.easy li { background-image: url(gfx/whowhy/dot-easy.gif); }

dl.crew-list { width: 429px; margin: 0 auto; }
dl.crew-list dt { margin-top: 20px;  position: absolute; }
dl.crew-list dd { zheight: 8em; margin-top: 10px; border-top: 2px solid #d2d2d2; padding-top: 10px; position: relative; padding-left: 124px; }
dl.crew-list dd strong { margin-right: 5px;  float: left; width: auto; display: block; font-size: 13px; padding: 0 0 0 5px; background: #0099ff url(gfx/whowhy/nametag.gif) 0 0 no-repeat; }
	dl.crew-list dd strong span { color: #fff; padding: 2px 5px 2px 0; display: block; background: url(gfx/whowhy/nametag.gif) 100% 0 no-repeat; }

d.crew-list dd span { float: left; color: #0099ff; }

div.content-wrap dl.crew-list p { color: #0099ff; text-align: left; }

div.content-wrap dl.crew-list p.description { color: #333; font-size: 90%; padding: 3px 0; clear: both; }
div.content-wrap dl.crew-list p.description strong { float: none; display: inline; background: none; padding: 0; font-weight: normal; color: #f9195f; }

/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */
/* ############### Success page ## */
/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */

h2.success { margin: 0 auto 30px auto; width: 277px; height: 76px; background: url(gfx/success/success.gif) 0 0 no-repeat; text-indent: -9999em; }
div.order-information { font-size: 90%; padding-bottom: 10px; margin: 20px 0; border-bottom: 1px solid #40b3ff; border-top: 1px solid #40b3ff; }

div.order-information h4 { color: #0099ff; }

div.order-information div { font-weight: bold; text-align: center; float: left; width: 32%; }

/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */
/* ############### How it Works page ## */
/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */

h2.how-it-works { margin: 0 auto 30px auto; width: 330px; height: 68px; background: url(gfx/howitworks/howitworks.gif) 0 0 no-repeat; text-indent: -9999em; }

div.how-container { font-size: 80%; width: 381px; margin: 0 auto; }
	div.how-container h3 { display: none; }
	div.how-container strong { font-size: 105%; color: #f9195f; }

div.content-wrap p.how-select { height: 119px; width: 201px; padding: 27px 30px 0 160px; background: url(gfx/howitworks/select.gif) 0 0 no-repeat; }

div.content-wrap p.how-pay { height: 100px; width: 201px; padding: 30px 30px 0 155px; background: url(gfx/howitworks/pay.gif) 0 0 no-repeat; }

div.content-wrap p.how-pick-up { height: 53px; width: 221px; padding: 100px 20px 0 120px; background: url(gfx/howitworks/pick-up.gif) 61px 0 no-repeat; }

/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */
/* ############### uSpy page ## */
/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */

h2.uspy { margin: 0 auto 30px auto; width: 131px; height: 73px; background: url(gfx/uspy/uspy.gif) 0 0 no-repeat; text-indent: -9999em; }

div.uspy-wrap { width: 418px; margin: 0 auto; }

div.uspy-container { font-size: 12px; background: url(gfx/uspy/uspy-bottom.gif) 100% 100% no-repeat; float: left; width: 151px; padding-bottom: 12px; margin: 0 23px 30px 23px; text-align: center; }
div.uspy-container h3 { padding: 10px 0 2px 0; background: url(gfx/uspy/uspy-top.gif) 0 0 no-repeat; color: #0099ff; font-size: 16px; }

div.uspy-container ul { margin: 0 10px; }
div.uspy-container ul li { padding-bottom: 6px; margin-bottom: 6px; background: url(gfx/uspy/dot.gif) 100% 100% repeat-x; }

div.uspy-container a { color: #000; }
div.uspy-container a:hover { color: #0099ff; text-decoration: none; }


/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */
/* ############### Product Detail page ## */
/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */

div.pd-wrap { background: url(gfx/productd/middle.gif) 0 0 repeat-y; width: 447px; margin: 30px auto; }
div.pd-container { background: url(gfx/productd/top.gif) 0 0 no-repeat; }

div.pd-name { text-align: center; padding: 20px 0; }
	div.pd-name h2 { color: #f9195f; display: inline; }

/*
# backup version of the { } if the other one doesnt work in any browser. #
span.left { vertical-align: middle; color: #0099ff; line-height: 89px; font-size: 89px; }
span.right { vertical-align: middle;  color: #0099ff; line-height: 89px; font-size: 89px; }
*/

span.left { background: url(gfx/productd/left.gif) bottom center no-repeat; padding: 45px 15px; font-size: 1px; color: #fff; line-height: 90px; }
span.right { background: url(gfx/productd/right.gif) bottom center no-repeat; padding: 45px 15px; font-size: 1px; color: #fff; line-height: 90px; }

span.qty { margin-top: 65px; left: 0; position: absolute; display: block; width: 517px; text-align: center; }
	head:first-child+body span.qty { margin-top: 55px; }
	span.qty strong { font-weight: normal; line-height: 25px; font-size: 28px; color: #66ff33; }

div.pd { padding-bottom: 28px; margin: 0 10px 20px 10px; background: url(gfx/productd/dashed.gif) 50% 100% no-repeat; zborder-bottom: 2px dashed #80ccff; }
	div.content-wrap p.pd-image { text-align: left; width: 230px; }

div.pd-description { width: 201px; background: url(gfx/productd/desc-middle.gif) 0 0 repeat-y; position: absolute; margin-left: 230px; }
	div.pd-description h3 { font-size: 16px; color: #ff3300; text-align: center; padding-top: 10px; background: url(gfx/productd/desc-top.gif) 0 0 no-repeat; }
	div.pd-description p { padding: 5px 10px 10px 10px; background: url(gfx/productd/desc-bottom.gif) 100% 100% no-repeat; }

div.pd-more { padding: 0 20px 65px 20px; background: url(gfx/productd/bottom.gif) 100% 100% no-repeat;  }

div.content-wrap div.pd-more p { text-align: left; float: left; width: 48%; font-size: 25px; font-weight: bold; color: #ff3300; }
	div.content-wrap div.pd-more p strong { color: #f9195f; font-size: 30px; }

	div.content-wrap div.pd-more p span { color: #999999; font-size: 15px; }
		div.content-wrap div.pd-more p span span { display: none; }
		div.content-wrap div.pd-more p span strong { padding-left: 111px; background: url(gfx/productd/price-per-item.gif) 0 50% no-repeat; color: #333; line-height: 20px; font-size: 20px; }

div.pd-more ul { text-align: right; float: right; width: 48%; }
	div.pd-more ul li a {  display: block; }
		div.pd-more ul li a span { display: none; }

div.pd-more ul li.pd-cart a { height: 26px;  background: url(gfx/productd/add-to-cart.gif) 100% 0 no-repeat; }
	div.pd-more ul li.pd-cart a:hover { background-position: 100% -26px; }

div.pd-more ul li.pd-favorites { margin-top: 10px; }
	div.pd-more ul li.pd-favorites a { height: 21px;  background: url(gfx/productd/add-to-favorites.gif) 100% 0 no-repeat; }
		div.pd-more ul li.pd-favorites a:hover { background-position: 100% -21px; }



/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */
/* ############### Main Gift Certificate page ## */
/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */

h2.gift-certificate-header { margin: 0 auto 15px auto; width: 450px; height: 99px; background: #fff url(gfx/giftcertificate/gift-certificate-header.gif) 100% 100% no-repeat; text-indent: -9999em; }

div.gift-wrapper { background: url(gfx/giftcertificate/main-middle.gif) 0 0 repeat-y; width: 450px; margin: 0 auto; }
div.content-wrap div.gift-wrapper p { margin: 10px auto 15px auto; }

p.res { width: 398px; height: 36px; text-indent: -999em; }

p.hip { background: url(gfx/giftcertificate/reasons/hip.gif); }
p.swell { background: url(gfx/giftcertificate/reasons/swell.gif); }
p.keen { background: url(gfx/giftcertificate/reasons/keen.gif); }
p.stellar { background: url(gfx/giftcertificate/reasons/stellar.gif); }
p.gift { background: url(gfx/giftcertificate/reasons/gift.gif); }

div.gift-wrapper form { margin: 0 auto; width: 334px; padding-top: 19px; background: url(gfx/giftcertificate/form-top.gif) 0 0 no-repeat; }
div.gift-wrapper fieldset { padding-bottom: 19px; background: url(gfx/giftcertificate/form-bottom.gif) 100% 100% no-repeat; }

div.gift-wrapper div.gc-form-wrap { padding-bottom: 19px; background: url(gfx/giftcertificate/main-bottom.gif) 100% 100% no-repeat; }

div.content-wrap div.gift-wrapper form p { height: 1.8em; text-align: left; margin: 0; padding: 10px 0; background: url(gfx/giftcertificate/form-middle.gif) 0 0 repeat-y; }
	div.content-wrap div.gift-wrapper form p.next-button { height: auto; text-align: right; background: none; }
	div.content-wrap div.gift-wrapper form p.textarea { height: auto; padding: 10px; }


div.gift-wrapper form label { text-align: right; color: #666666; padding-right: 5px; width: 130px; display: block; float: left; }
div.content-wrap div.gift-wrapper form p.textarea label { display: inline; text-align: left; float: none; }

div.content-wrap div.gift-wrapper form .text { width: 160px; border: 1px solid #999; }
div.content-wrap div.gift-wrapper form textarea.text { width: 310px; }

/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */
/* ############### Gift Certificate Checkout ## */
/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */

h2.gift-checkout { text-align: left; font-size: 18px; color: #fff; padding: 2px 5px; display: block; width: 440px; background: #0099ff url(gfx/giftcertificate/checkout/main-top.gif) 0 0 no-repeat; }


div.content-wrap div.gift-checkout-wrap-billing-part p { text-align: center; }
div.gift-checkout-wrap-billing-part label.card { text-align: right; padding-right: 5px; float: left; display: block; width: 120px; }
div.gift-checkout-wrap-billing-part .text { width: 160px; border: 1px solid #999; }
	div.gift-checkout-wrap-billing-part textarea.text { width: 310px; }
		div.gift-checkout-wrap-billing-part .small-wrap input { border: 1px solid #999; width: 30px; } 
		div.gift-checkout-wrap-billing-part .small-wrap input.att { width: 50px; } 
	div.content-wrap div.gift-checkout-wrap-billing-part p.add-card-button { clear: both; padding: 20px 20px 0 20px; text-align: right; }
		div.content-wrap div.gift-checkout-wrap-billing-part p.add-card-button a { height: 22px; zwidth: 70px; display: block; background: url(gfx/checkout/add-card.gif) 100% 0 no-repeat; }
			div.content-wrap div.gift-checkout-wrap-billing-part p.add-card-button a span { display: none; }
div.gift-checkout-wrap-billing-part ul { padding: 10px 20px 0 20px; }
	div.gift-checkout-wrap-billing-part ul li { width: 48%; float: left; }
		div.gift-checkout-wrap-billing-part ul li p { font-size: 90%; float: left; }
			div.gift-checkout-wrap-billing-part ul li p input,
			div.gift-checkout-wrap-billing-part ul li p img { vertical-align: middle; }
div.gift-checkout-wrap-billing-part ul label { padding: 0; text-align: auto; float: none; display: inline; }


div.content-wrap div.gift-checkout-wrap-billing-part p { padding: 5px; text-align: left; height: 2em; }

div.gift-checkout-wrap { margin: 30px 0 10px 0; width: 450px; background: url(gfx/giftcertificate/checkout/main-bottom.gif) 100% 100% no-repeat; } 

div.gift-checkout-wrap-billing-part { margin: 30px 0 10px 0; width: 450px; background: url(gfx/checkout/main-bottom.gif) 100% 100% no-repeat; } 

div.gift-checkout-wrap-billing-part em { color: #4c4c4c; padding-left: 40px; font-size: 80%; }


div.gift-checkout-wrap ul.info { padding-top: 10px; text-align: center; width: 49%; border-right: 2px solid #31adff;  float: left; }
	div.gift-checkout-wrap ul.info li { padding-bottom: 10px; }

div.gift-checkout-wrap div { text-align: center; width: 49%; float: left; }
	div.content-wrap div.gift-checkout-wrap div p { padding-top: 10px; }
	div.gift-checkout-wrap div span.gcp-price { color: #f9195f; font-size: 25px; font-weight: bold; }
	div.gift-checkout-wrap div h2 { color: #0099ff; margin-top: 20px; }

/*a.send-gift { background: url(gfx/giftcertificate/checkout/send.gif) 0 0 no-repeat; width: 102px; height: 39px; display: block; margin: 20px auto; text-indent: -999em; }
*/

input.send-gift { margin-top: 20px; }



/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */
/* ############### Checkout page ## */
/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */

h2.checkout { margin: 0 auto 10px auto; width: 233px; height: 52px; background: url(gfx/checkout/checkout.gif) 0 0 no-repeat; text-indent: -9999em; }

form#checkout-form { width: 450px; margin: 0 auto; }
	form#checkout-form fieldset.general,
	form#checkout-form fieldset.billing,
	form#checkout-form fieldset.confirmation { margin-bottom: 15px; background: url(gfx/checkout/main-bottom.gif) 100% 100% no-repeat; }
	form#checkout-form h3 { margin-bottom: 10px; color: #fff; padding: 2px 5px; display: block; width: 440px; background: #0099ff url(gfx/checkout/main-top.gif) 0 0 no-repeat; }

div.content-wrap form#checkout-form p { padding: 5px; text-align: left; height: 2em; }

form#checkout-form label { text-align: right; padding-right: 5px; float: left; display: block; }
	form#checkout-form fieldset.general label { width: 100px; }

form#checkout-form fieldset.billing label.card { width: 120px; }

form#checkout-form .text { width: 160px; border: 1px solid #999; }
	form#checkout-form textarea.text { width: 310px; }

	form#checkout-form .small-wrap {  }
		form#checkout-form .small-wrap input { border: 1px solid #999; width: 30px; } 
		form#checkout-form .small-wrap input.att { width: 50px; } 


div#add-card { height: 0; overflow: hidden; }
	div.content-wrap form#checkout-form p.add-card-button { clear: both; padding: 20px 20px 0 20px; text-align: right; }
		div.content-wrap form#checkout-form p.add-card-button a { height: 22px; zwidth: 70px; display: block; background: url(gfx/checkout/add-card.gif) 100% 0 no-repeat; }
			div.content-wrap form#checkout-form p.add-card-button a span { display: none; }

form#checkout-form em { color: #4c4c4c; padding-left: 40px; font-size: 80%; }

fieldset.billing ul { padding: 0 20px; }
	fieldset.billing ul li { width: 48%; float: left; }
		fieldset.billing ul li p { font-size: 90%; float: left; }
			fieldset.billing ul li p input,
			fieldset.billing ul li p img { vertical-align: middle; }

form#checkout-form fieldset.billing ul label { padding: 0; text-align: auto; float: none; display: inline; }

div.content-wrap form#checkout-form div.information-preview p { float: left; text-align: center; height: auto; width: 140px; }
	div.content-wrap form#checkout-form div.information-preview p strong { font-size: 110%; }
	div.content-wrap form#checkout-form div.information-preview p.cc-info { padding-top: 10px; font-size: 90%; width: 100px; }

div.content-wrap form#checkout-form p.pay-button { height: auto; padding-right: 10px; text-align: right; }


div#pc-wrap { width: 402px; margin: 0 auto; }

div.pc-headers { font-size: 90%; height: 1.6em; border-bottom: 2px solid #cfcfcf; background: url(gfx/checkout/tp-top.gif) 0 0 no-repeat; }
	div.pc-headers span { padding-top: 0.2em; height: 1.5em; text-align: center; display: block; float: left; border-right: 1px solid #ccc; }
		div.pc-headers span.pch-products { padding-left: 5px; text-align: left; width: 205px; }
		div.pc-headers span.pch-price { width: 67px; }
		div.pc-headers span.pch-qty { width: 45px; }
		div.pc-headers span.pch-subtotal { width: 70px; border: 0; }

ul.pc-list { padding: 0 2px; background: url(gfx/checkout/tp-bottom.gif) 100% 100% no-repeat; }
ul.pc-list li { height: 1.8em; }
ul.pc-list li span { text-align: center; padding-top: 0.2em; height: 1.5em; text-align: center; display: block; float: left; }

ul.pc-list li span.pc-products { padding-left: 5px; text-align: left; width: 205px; }
ul.pc-list li span.pc-price { width: 67px; }
ul.pc-list li span.pc-qty { width: 45px; }
ul.pc-list li span.pc-subtotal { width: 70px; border: 0; }



/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */
/* ############### Search Results page ## */
/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */


div.search-header { background: url(gfx/searchresult/header-background.gif) 100% 100% no-repeat; padding-bottom: 10px; margin: 20px auto; width: 442px; text-align: right; }
	div.search-header h2 { float: left; font-weight: bold; font-size: 17px; }
		div.search-header h2 span { color: #0099ff; }
	div.search-header h3 { font-size: 17px; }
		div.search-header h3 span { color: #999999; }


ul.search-product { width: 442px; margin: 0 auto; min-height: 110px; }
	ul.search-product li { float: left; }
		ul.search-product li.sp-img { width: 118px; }

		ul.search-product li.sp-name { height: 90px; background: url(gfx/searchresult/name-background.gif) top center no-repeat; width: 174px; }
			ul.search-product li.sp-name h4 { padding: 7px 0; font-weight: normal; text-align: center; font-size: 20px; color: #333; text-align: center; }
				ul.search-product li.sp-name h4 a { color: #333; }
				ul.search-product li.sp-name h4 a.short { font-weight: bold; font-size: 70%; }
			div.content-wrap ul.search-product li.sp-name p { font-size: 120%; padding-top: 6px; }
				div.content-wrap ul.search-product li.sp-name p strong { color: #66ff33; font-size: 28px; }

		ul.search-product li.sp-info { height: 92px; background: url(gfx/searchresult/info-background.gif) top center no-repeat; width: 145px; }
			div.content-wrap ul.search-product li.sp-info p { font-weight: bold; color: #ff4c1f; padding-top: 25px; height: 25px; }
			div.content-wrap ul.search-product li.sp-info p.sp-add-cart { height: auto; padding-top: 8px; }
				div.content-wrap ul.search-product li.sp-info p strong { display: block; padding-left: 40px; background: url(gfx/searchresult/price.gif) 10% 50% no-repeat; text-align: center; vertical-align: middle; color: #f9195f; font-size: 28px; }

				div.content-wrap ul.search-product li.sp-info p span { margin: 2px 5px 0 10px; float: left; display: block; display: none; width: 34px; height: 15px; background: url(gfx/searchresult/price.gif) 50% 0 no-repeat; text-indent: -999em; }

			ul.search-product li.sp-info p.sp-add-cart a { text-indent: -999em; margin: 0 auto; display: block; width: 123px; height: 22px; background: url(gfx/searchresult/add-to-cart.gif) 0 0 no-repeat; }
				ul.search-product li.sp-info p.sp-add-cart a:hover { background-position: 0 -22px; }

/* # hovers */

ul.search-product:hover > li.sp-name { zcolor: #000; background-position: 4px -184px; }
div.content-wrap ul.search-product:hover > li.sp-name p strong { color: #0099ff; }
ul.search-product:hover > li.sp-info { background-position: 0 -92px; }
/*ul.search-product:hover > li.sp-info p.sp-add-cart a { background-position: 0 -22px; }*/
ul.search-product:hover > li.sp-name h4 a { color: #f9195f; }

div.search-nav { background: url(gfx/searchresult/header-background.gif) 0 0 no-repeat; padding-top: 10px; margin: 5px auto; width: 442px; text-align: right; }
	div.search-nav li span { display: none; }
	div.search-nav li.sn-next { float: right; }
		div.search-nav li.sn-next a { display: block; width: 76px; height: 22px; background: url(gfx/searchresult/next.gif) 0 0 no-repeat; }
	div.search-nav li.sn-back { float: left; }
		div.search-nav li.sn-back a { display: block; width: 76px; height: 22px; background: url(gfx/searchresult/back.gif) 0 0 no-repeat; }
	
	div.search-nav li a:hover { background-position: 0 -22px; }


/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */
/* ############### 404 (Oops) page ## */
/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */

h2.oops { margin: 0 auto 30px auto; width: 217px; height: 106px; background: url(gfx/404/oops.gif) 0 0 no-repeat; text-indent: -9999em; }

/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */
/* ############### Thanks page ## */
/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */

h2.thanks { margin: 0 auto 30px auto; width: 242px; height: 84px; background: url(gfx/thanks/thanks.gif) 0 0 no-repeat; text-indent: -9999em; }

/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */
/* ############### FAQ page ## */
/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */

h2.faq { margin: 0 auto 30px auto; width: 139px; height: 66px; background: url(gfx/faq/faq.gif) 0 0 no-repeat; text-indent: -9999em; }

div.content-wrap p.faq-p { margin-bottom: 25px; width: 528px; text-align: left; }
div.content-wrap p.faq-p strong { font-size: 110%; color: #0099ff; }

div.content-wrap p.faq-confused { font-size: 90%; padding: 15px 0; width: 528px; color: #fff; background: #666666; }
div.content-wrap p.faq-confused strong { font-size: 130%; }
div.content-wrap p.faq-confused a { color: #fff; text-decoration: underline; }

/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */
/* ############### Extra content ## */
/* -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- ## -- */

/* -- -- -- -- -- -- -- -- -- -- */
/* ## Extra column ## */
/* -- -- -- -- -- -- -- -- -- -- */

div#extra-column-wrap { float: right; width: 195px; }
	div#extra-column-wrap h3 { text-align: center; }
	div#extra-column-wrap h3 a { color: #f9195f; margin-bottom: 2px; }
	div#extra-column-wrap h3 a:hover { text-decoration: underline; }

/* -- -- -- -- -- -- -- -- -- -- */
/* # Shopping Cart */

h2.shopping-cart { text-indent: -9999em; margin-top: 10px; background: url(gfx/shopping/shopping-cart.gif) 0 0 no-repeat; width: 195px; height: 53px; }
div.sh-wrap { width: 179px; padding-bottom: 15px; margin: 0 auto; background: url(gfx/shopping/cart-bottom.gif) 100% 100% no-repeat; }
div.sh-header { padding: 0 0 0 22px; background: url(gfx/shopping/cart-top.gif) 0 0 no-repeat; }
div.sh-header span { color: #ff3300; font-weight: bold; text-decoration: underline; }

div.sh-header span.sh-price { padding-left: 34px; }
div.sh-header span.sh-qty { padding-left: 14px; }

div.sh-wrap ul,
div.sh-wrap p { padding-top: 5px; background: url(gfx/shopping/cart.gif) 0 0 repeat-y; }

div.sh-wrap p { text-align: center; }
div.sh-wrap p.total { background: url(gfx/shopping/cart-total.gif) 100% 100% no-repeat; }
div.sh-wrap p.total strong { color: #0099ff; }

div.sh-wrap ul span { float: left; display: block; }
div.sh-wrap ul a.cart-item { float: left; display: block; padding-left: 7px; width: 75px; }
div.sh-wrap ul span.cart-price { font-weight: bold; color: #f9195f; width: 57px; }
div.sh-wrap ul span.cart-qty a { color: #000; font-weight: bold; }
	div.sh-wrap ul span.cart-qty a:hover { color: #f9195f; text-decoration: none; }

div.sh-wrap ul li { height: 1.5em; }

div.sh-wrap input.text { width: 18px; border: 1px solid #666666; }

/* -- -- -- -- -- -- -- -- -- -- */
/* # Gift Certificate */

h3.gift-certificate { margin: 0 auto; text-indent: -999em; background: url(gfx/gift-certificates.gif) 0 0 no-repeat; width: 177px; height: 158px; margin-top: 20px; }
	h3.gift-certificate a { display: block; height: 158px; }

/* -- -- -- -- -- -- -- -- -- -- */
/* # A little confused */

h3.little-confused { margin: 0 auto; text-indent: -999em; background: url(gfx/little-confused.gif) 0 0 no-repeat; width: 177px; height: 158px; margin-top: 20px; }
	h3.little-confused a { display: block; height: 158px; }


/* -- -- -- -- -- -- -- -- -- -- */
/* ## Login Box ## */
/* -- -- -- -- -- -- -- -- -- -- */

div#popup h2 { color: #f9195f; }
div#popup h2 a { display: block; padding-top: 5px; font-size: 11px; text-decoration: underline; }

form#login-form p,
form#signup-form p { height: 2.2em; }

form#login-form label,
form#signup-form label { float: left; text-align: right; font-size: 120%; display: block; font-weight: bold; color: #666666; padding-right: 10px; width: 80px; }


form#login-form input.text,
form#signup-form input.text { width: 200px; padding: 2px; float: left; border: 2px inset #ddd; }

form#login-form select,
form#signup-form select { width: 200px; padding: 2px; float: left; border: 2px inset #ddd; }

form#login-form p.submit,
form#signup-form p.submit { padding-right: 55px; text-align: right; }

div.sign-up-btn { font-size: 90%; width: 220px; margin: 20px auto 0 auto; color: #666666; text-align: center; }
div.sign-up-btn img { margin: 4px 0; }

/* -- -- -- -- -- -- -- -- -- -- */
/* ## Clear Floats ## */
/* -- -- -- -- -- -- -- -- -- -- */

.clear { border: 0; color: #fff; height: 0; clear: both; }

/* -- -- -- -- -- -- -- -- -- -- */
/* ## Hide this ## */
/* -- -- -- -- -- -- -- -- -- -- */

.hide { display: none; }