/* CSS Document */ /* Paragraph classes (use sparingly - use tag globals whenever possible) */ p.caption {font-size:10px; color:#999999; line-height:normal;} strong.red {color:#CC0000;} em.red {color:#CC0000;} /* Category Main - preferences here need to be customized for your needs */ /* category structure:

- for secondary text, not used in example below

*/ div.category {border-bottom:#999999 1px dashed; position:relative; padding:15px; height:250px; width:163px; float:left;} div.category img {border:none; background:url(img/no-image.jpg) no-repeat; width:163px;} div.category h1 {position:absolute; left:15px; top:185px; width:163px; height:42px; line-height:14px; padding:4px 0; color:#666; font-weight:900; font-size:14px; overflow:hidden;} /* adjust div.category height if you use this: div.category h2 {position:absolute; left:15px; top:250px; width:163px; height:42px; line-height:14px; padding:4px 0; color:#ccc; font-weight:500; font-size:12px; overflow:hidden;} /* Products Main */ /* This is set up as 1-wide, set width and float left to make columns. */ /* product structure:

or
    needs "view" or "buy" button

*/ div.product {border-bottom:#999 1px dashed; position:relative; padding:15px 0; height:200px;} div.product img {border:none; background:url(img/no-image.jpg) no-repeat; width:100px;} div.product h1 {position:absolute; left:175px; top:15px; width:420px; height:14px; line-height:14px; padding:4px 0; color:#000; font-weight:900; font-size:14px; border-bottom:#ccc 1px dotted; overflow:hidden;} div.product h2, div.product ul {position:absolute; left:175px; top:45px; width:420px; height:120px; line-height:normal; padding:0; color:#ccc; font-weight:normal; font-size:11px; overflow:hidden;} div.product ul li {padding-bottom:5px;} div.product a.prodButton {position:absolute; left:488px; top:145px; background:url(img/view-button.jpg) no-repeat; display:block; height:30px; width:117px;} /* Products Details */ /* To be elaborated... */ div.detail img {width:300px; border:none;} div.detail {border-right:#999999 1px dashed; position:relative; width:300px; padding-right:14px;} div.detail label {display:block; height:auto; line-height:14px; padding:4px 0; color:#800000; font-weight:900; font-size:14px; border-bottom:#800000 1px solid; margin-bottom:15px;} div.detail p {line-height:normal; padding:0; color:#888; font-weight:normal; font-size:11px; overflow:hidden;} div.detail form {display:block; padding:0; margin:0; position:relative; height:90px;} div.detail input.submit {background:url(img/buy-now.jpg) no-repeat; display:block; height:30px; width:117px; position:absolute; top:45px; left:163px; border:none;} div.detail select.ddl, div.detail select.ddm, div.detail select.ddr {width:80px;position:absolute; top:16px;} div.detail label.ddl, div.detail label.ddm, div.detail label.ddr {width:90px;position:absolute; top:0; display:block; font-size:12px; height:12px;} /* Affiliated products */ /* use for related products on detail page */ #aff {float:right; width:265px; padding-right:15px;} div.aff img {height:75px; width:75px; border:none;} div.aff {border-bottom:#999999 1px dashed; position:relative; padding:15px 0; height:100px; margin:20px 0;} div.aff label {display:block; height:auto; line-height:12px; padding:4px 0; color:#800000; font-weight:900; font-size:12px; border-bottom:#800000 1px dotted; margin-bottom:10px;} #aff a {text-decoration:none; display:block; width:180px; height:14px; position:absolute; left:85px; top:107px; background:#FFFFFF url(img/view-more.jpg) no-repeat;} #aff h1 {height:14px; line-height:14px; padding:4px 0; color:#800000; font-weight:900; font-size:14px; border-bottom:#800000 1px solid; margin:0 0 10px 0;} div.aff p {position:absolute; left:85px; top:45px; width:180px; padding:0; margin:0; height:42px; line-height:14px; overflow:hidden;} /* FORMS */ #form, #form li {display:block; list-style:none; margin:0; padding:0; position:relative; background:none;} #form li label {display:block; width:200px; background:#E9E9E9; line-height:16px; padding:2px 5px; text-align:right;} #form li input, #form li textarea {position:relative; left:215px; width:380px; top:-21px;} /* Top H1 element */ h1#title {display:block; text-align:center; width:852px; margin:5px auto; border:none; font-size:10px; color:#666666; padding:0; text-transform:none;} /* Left Detail */ #leftContent * {color:#069;} #leftContent {width:239px;} #leftContent div {/* border-bottom:#CCCCCC dashed 1px; */} #leftContent div h1 {background-repeat:no-repeat; margin:0; padding:0; height:43px;} #leftContent div#order h1 {background-image:url(img/order-head.jpg);} #leftContent div#login h1 {background-image:url(img/login-head.jpg);} #leftContent div#specials h1 {background-image:url(img/specials-head.jpg);} #leftContent div#join h1 {background-image:url(img/join-head.jpg);} #leftContent div ul, #leftContent div li {margin:0; padding:0; list-style:none;} #leftContent div li {padding-left:12px;} #leftContent div li a {padding:0 0 2px 8px; background:url(img/bullet.jpg) no-repeat 0px 7px; list-style:none; display:block;} #leftContent div#order {position:relative;} #leftContent div#order ul {background:url(img/order-button.jpg) no-repeat 100% 3px; padding:0 0 7px 0; width:237px; position:relative; z-index:2;} #leftContent div#order a.printMenu {right:0; top:46px; display:block; height:41px; width:96px; position:absolute; text-decoration:none; text-indent:-999px; z-index:3; background:url(images/store/trans.gif)} #leftContent div#login a.newuser {display:block; padding-left:6px; font-size:10px; clear:both;} #leftContent div#login form {padding:0; margin:0;} #leftContent div#login ul {padding:0 0 0 6px;} #leftContent div#login li {float:left; width:87px; display:block; padding:0; margin:0;} #leftContent div#specials li {padding:0 0 0 12px; display:block; height:18px; overflow:hidden;} #leftContent div#specials li strong {display:block; width:100%; float:left;} #leftContent div#join {border-bottom:none;} /* Home Conditionals */ #home #leftContent {width:238px;} #home #right {width:100%; background:none;} #home #left {width:0%} #home #right #rightContent {width:610px; background:none;} #home #left #leftContent {position:absolute; top:195px; left:0; z-index:100px;} #home #left img.inner {display:none;} /* Four Column UL's */ div.fourCol * {font-size:11px;} div.fourCol ul {display:block; width:146px; float:left; margin:0; padding:0;} div.fourCol ul li {display:block; margin:0; padding:0 0 0 8px; background:url(img/bullet.jpg) no-repeat 0px 7px;} /* List Bullet */ ul.list li {display:block; margin:0; padding:0 0 4px 8px; background:url(img/bullet.jpg) no-repeat 0px 7px;} /* News for Index */ div#news {width:183px; position:absolute; top:611px; z-index:1000; left: 655px;} div#news ul {display:block; margin:0; padding:0 0 0 16px;} div#news ul li {display:block; margin:0; padding:6px 0px 6px 8px; background:url(img/bullet-lite.jpg) no-repeat 0px 11px; color:#fff; font-size:11px; line-height:13px; border-bottom:#FFFFCC 1px dashed;} div#news ul li strong {color:#fff; font-size:11px; line-height:13px;} /* Inner Styles */ #rightContent {padding:18px;} #leftContent {} /* Category Display */ .catDisplay { float:left; width:150px; height:240px; padding:5px 5px 15px 5px; text-align:center; } .catDisplay a { color:#000000; } .catDisplay div { height:150px; border:2px solid black; background-color:#FFFFFF; } .catDisplay a img { width:146px; border:none; } /* Product Display */ .prodDisplay { float:left; width:150px; height:250px; padding:5px 5px 15px 5px; color:#44090b; text-align:center; } .prodDisplay h1 { font-size:12px; margin:0; padding:0; height:55px; } .prodDisplay p { margin:0; padding:5px 0; height:30px; overflow:hidden; color:#000000; } .prodDisplay span { padding-bottom:2px; display:block; color:#000000; } .prodDisplay input { width:50px; margin-right:11px; } .prodDisplay a { color:#44090b; } .prodDisplay a img { border:2px solid #000000; width:150px; } /* Item Display */ .itemDisplay { color:#44090b; } .itemDisplay div { float:left; width:300px; heigth:350px; padding-right:20px; } .itemDisplay h1 { font-size:12px; margin:0; padding:0; } .itemDisplay p { margin:0; padding:5px 0; color:#000000; } .itemDisplay span { padding-top:10px; padding-bottom:2px; display:block; color:#000000; } .itemDisplay input { width:50px; margin-right:11px; } .itemDisplay a { color:#44090b; } .itemDisplay a img { border:2px solid #000000; width:300px; } /* Forms in two-column format where the label tag is first and input */ #userMod ul {display:block; padding:0; margin:0; width:545px;} #userMod ul li {display:block; height:30px; padding-bottom:0 0 3px 0; margin:0; list-style:none;} #userMod ul li label {display:block; width:49%; text-align:right; height:12px; line-height:12px; padding:5px; float:left;} #userMod ul li input, #userMod ul li select, #userMod ul li textarea {float:left; margin-left:5px;} /* Address Block in header */ #header #addy {position:absolute; top:18px; left:655px; width:180px; text-align:right; line-height:15px; color:#fff; font-size:12px;} #header #addy span, #header #addy span * {font-size:15px; color:#FFFFFF; line-height:15px;} #header #addy span strong, #header #addy span strong a {color:#FFF400;}