/* CSS Document */

* { margin: 0; padding: 0; border: 0 none; outline: 0 none; line-height: 1em; }

body { background: #ccc; text-align: center; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }

#wrap { margin: auto; text-align: left; width: 958px; padding: 0 15px; background: #fff url(../img/bg.gif) repeat-y; }

/* header */
#header { height: 110px; margin: 0 10px 10px 10px; border-bottom: 2px solid #F2CD24; background: url(../img/girl.gif) no-repeat right bottom; position: relative; }
#header h2 { float: left; margin: 20px 0 0 5px; width: 235px; height: 72px; background: url(../img/logo.gif) no-repeat; text-indent: -99999px; }
#header h3 { float: right; margin: 20px 70px 0 0; display: inline; /* ie6 double margin */ text-align: right; color: #aaa; font-size: 18px; font-weight: normal; letter-spacing: -1px; line-height: 20px; }
#header h3 span { display: block; color: #F2CD24; }

/* navigation */
#header ul { list-style: none; position: absolute; bottom: 0; right: 70px; }
#header ul li, #header ul li a { float: left; } /* ie6 fix staircase */
#header ul li a { padding: 10px 15px; color: #000; text-decoration: none; font-weight: bold; }
#header ul li a:hover { background: #F2CD24; color: #fff; text-shadow: #D2B113 -1px -1px 0; }

/* primary content */
#primary { width: 938px; min-height: 250px; height: auto !important; height: 250px; /* ie6 min-height hack */ float: left; display: inline; margin: 0 10px 10px 10px; padding-bottom: 10px; background: url(../img/primary.gif) no-repeat; position: relative; z-index: 0; }
#primary.fixed { min-height: 400px; height: auto !important; height: 400px; /* ie6 min-height hack */ }
#primary h1 { float: left; font-size: 36px; font-weight: normal; color: #fff; margin: 10px 0 0 30px; display: inline; padding-bottom: 7px; text-shadow: #D2B113 -1px -1px 0; }
#primary h2 { font-size: 30px; font-weight: normal; color: #333; letter-spacing: -1px; margin-bottom: 15px; }
#primary #address h2 { font-size: 20px; }
#primary .primary-box { width: 427px; padding: 10px 15px; float: left; clear: left; display: inline; margin: 15px 0 0 30px; position: relative; z-index: 2; }
#primary .primary-box.fix { height: 280px; }
#primary .primary-box p { line-height: 16px; }
#primary .primary-box ol { padding-left: 20px; }
#primary .primary-box ol li { font-weight: bold; font-style: italic; }
#primary .primary-box ol.normal { margin-bottom: 15px; }
#primary .primary-box ol.normal li { font-weight: normal; font-style: normal; margin-bottom: 5px; }
#primary .primary-box ol li p { font-weight: normal; font-style: normal; margin-bottom: 5px; }
#primary #basket { position: absolute; top: 0; right: 0; text-align: right; padding: 10px 10px 10px 35px; margin-bottom: 5px; background: url(../img/cart.gif) no-repeat 0 10px; }
#primary .primary-box ol li.active-step p { font-weight: bold; }
#primary .primary-box ol li.completed-step p { font-weight: normal; color: #cdcdcd; }
#primary .primary-box p a { color: #000; text-decoration: none; font-weight: bold; }
#primary .primary-box p a:hover { text-decoration: underline; }
#primary #basket a { color: #000; font-weight: bold; text-decoration: none; display: block; margin-bottom: 5px; }
#primary #basket a:hover { text-decoration: underline; }
#primary #flash { position: absolute; top: 53px; right: 0; margin-right: 10px; }
#primary #flash img { float: left; border: 1px solid #fff; margin-left: 10px; display: inline; }
#primary img#usbstick { position: absolute; top: 140px; right: 0; z-index: 1; }
#primary #address { position: absolute; top: 180px; right: 230px; }
#primary .question { position: absolute; bottom: 0; right: 50px; }
#primary .btn { position: absolute; bottom: 0; right: 10px; z-index: 4; }

/* secondary content */
#secondary { width: 568px; float: left; margin: 20px 0 0 40px; display: inline; }
#secondary.fullwidth { width: 878px; margin: 0 40px; }

#secondary h2, #basket-table th { font-size: 20px; padding-bottom: 7px; border-bottom: 2px solid #F2CD24; margin-bottom: 7px; }
#secondary h3 { font-size: 11px; font-weight: normal; margin-bottom: 20px; }
#primary p, #primary p strong, #secondary p, #secondary p strong, #tertiary p, #tertiary p strong { font-size: 11px; margin-bottom: 15px; line-height: 18px; }
#secondary small { font-size: 10px; line-height: 14px; }
#secondary ul,#secondary ol { padding-left: 25px; margin-bottom: 15px; }
#secondary ul li,#secondary ol li { margin-bottom: 5px; font-size: 11px; line-height: 18px; margin-left: 10px; }

/* tertiary content */
#tertiary { width: 878px; clear: both; margin: 0 40px; }

/* sidebar */
#sidebar { width: 310px; float: left; }
#sidebar img#girl { margin-top: 20px; }

/* checklist */
.checklist { list-style: none; }
.checklist li { background: url(../img/checklist.gif) no-repeat left center; padding: 7px 0 5px 25px; margin-bottom: 3px; height: 1%; }

/* more button */
a.more-btn { display: block; width: 121px; height: 114px; background: url(../img/more.png) no-repeat; text-indent: -99999px; }
#primary .primary-box a.more-btn { position: absolute; top: 130px; right: -50px; z-index: 3; }

/* generic button */
.btn { display: block; width: 147px; height: 27px; padding-top: 8px; color: #fff; background: #000 url(../img/btn.gif) no-repeat; font-size: 16px; font-weight: bold; text-decoration: none; text-align: center; text-shadow: #000 -1px -1px 0; }
.btn:hover { color: #ccc; }
.btn:active { height: 26px; padding-top: 9px; }
input.btn, input.btn:active { cursor: pointer; height: 32px; padding-top: 0; outline: none; }

/* question box */
.question { width: 180px; height: 100px; padding: 20px 20px 0 108px; background: url(../img/question.jpg) no-repeat; position: relative; }
.question a, #primary .question a { color: #333; font-size: 14px; font-weight: bold; text-decoration: none; position: absolute; bottom: 0; right: 0; }
.question h2, #primary .question h2 { font-size: 18px; margin-bottom: 7px; }
.question a span, #primary .question a span { color: #F2CD24; }
.question h2 span, #primary .question h2 span { color: #fff; }
.question p, #primary .question p { font-size: 11px; letter-spacing: -1px; line-height: 1em; }

/* products list */
#product-list, #product-list ul { list-style: none; height: 1%; float: left; }
#product-list li { min-height: 75px; height: auto !important; height: 75px; /* ie6 min-height hack */ margin-bottom: 20px; padding: 20px 0 0 90px; clear: left; }
#product-list li h3 { text-transform: uppercase; border-bottom: 1px solid #979797; margin-bottom: 10px; padding-bottom: 10px; font-size: 14px; }
#product-list li img {float: right; margin: 0 100px; }
#product-list li ul { padding: 10px 0; float: left; }
#product-list li ul li { margin: 0; padding: 10px 0 10px 10px; width: 373px; float: left; clear: none; border-bottom: 1px solid #ddd; }
#product-list li ul li h4 { text-transform: uppercase; font-size: 12px; line-height: 18px; }
#product-list li ul li h4 span { text-transform: none; font-weight: normal; font-size: 10px; }
#product-list li ul li p strong { color: red; }
#product-list li ul li.li-left { padding-left: 0; padding-right: 10px; }
#product-list li ul li.li-bottom { border-bottom: 0; padding-bottom: 0; padding-top: 10px; }

/* shopping basket table */
#basket-table td, #basket-table th { margin: 0; padding: 10px 0; line-height: 16px; }
#basket-table th { font-size: 14px; }
#basket-table td strong { text-transform: uppercase; display: block; }
#basket-table td input.quantity { padding: 3px; border: 1px solid #ddd; width: 50px; }
#basket-table td.total { color: #1075B9; font-weight: bold; text-align: right; padding-right: 10px; }

#checkout-links { float: right; margin: 30px 90px 0 0; display: inline; }
#checkout-links a { float: left; margin-right: 10px; }

/* checkout forms */
form.checkout { width: 500px; margin: 0 auto; }
form.checkout label { float: left; clear: left; display: block; width: 190px; margin-right: 10px; line-height: 16px; }
form.checkout input, form.checkout select, form.checkout textarea { float: left; width: 270px; padding: 3px; border: 1px solid #ddd; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; margin-bottom: 10px; }
form.checkout textarea { height: 75px; }
form.checkout .comments { clear: both; width: 95%; }
form.checkout label.comments { margin-bottom: 10px; }
form.checkout select option { padding: 3px; }
form.checkout label.checkbox { width: 100%; margin-right: -3px; margin-top: 10px; }
form.checkout label.checkbox input { width: 30px; border: 0 none; float: none; }
form.checkout select.date { width: 70px; margin-right: 10px; }
form.checkout input.btn { float: right; clear: both; border: 0 none; padding: 0; width: 147px; font-size: 16px; }
form.checkout label a { color: #000; font-weight: bold; text-decoration: none; }
form.checkout label a:hover { text-decoration: underline; }

/* contact form */
#contact-form { width: 300px; margin: 0 auto 40px auto; }
#contact-form input, #contact-form textarea { display: block; width: 100%; margin: 10px 0; padding: 3px; border: 1px solid #ddd; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; }
#contact-form textarea { height: 50px; }
#contact-form input.btn { border: 0; padding: 0; width: 147px; font-size: 16px; }

/* faq list */
#primary .primary-box #faq-list li { font-weight: normal; font-style: normal; font-size: 11px; margin-bottom: 7px; }
#primary .primary-box #faq-list li a { text-decoration: none; color: #000; }
#primary .primary-box #faq-list li a:hover { text-decoration: underline; }
#answer-list { margin-top: 10px; list-style-position: inside; font-weight: bold; }
#answer-list li { border-bottom: 1px solid #ddd; margin-bottom: 15px; }
#answer-list p { font-weight: normal; margin-top: 10px; }
#answer-list h3 { display: inline; }

/* footer */
#footer { clear: both; padding: 40px 10px 0 10px; background: #ccc url(../img/footer.jpg) repeat-x 0 top; font-size: 10px; }
#footer div { border-top: 2px solid #F2CD24; padding: 10px; height: 20px; }
#footer p { float: left; }
#footer ul { list-style: none; float: right; }
#footer ul li { display: inline; margin-left: 10px; padding-left: 10px; border-left: 1px solid #000; }
#footer ul li.first { border-left: 0 none; }
#footer ul li, #footer ul li a { float: left; }
#footer a { color: #000; text-decoration: none; }
#footer a:hover { text-decoration: underline; }

/* misc */
.left { float: left; }
.right { float: right; }
.clear { clear: both; }
.hidden { display: none; }

/* icons */
#product-list li#product-office { background: url(../img/icon-office.gif) no-repeat; }
#product-list li#product-multimedia { background: url(../img/icon-multimedia.gif) no-repeat; }
#product-list li#product-photo { background: url(../img/icon-photo.gif) no-repeat; }
#product-list li#product-it { background: url(../img/icon-it.gif) no-repeat; }