/* 'default.css' for the JumpStart directory
 * Controls text styles, margins, and padding; suitable for print
 * and screen.
 *
 * Copyright (c) 2007 Arsetta, Inc.
 *
 * Website design and development, including CSS, by Zenscope Studio,
 * LLC (www.zenscope.com)
 */


/* ------------------- GENERAL TYPOGRAPHY ------------------- */

body {
font-size: small; /* Cederholm's bulletproof text sizing */
font-family: Verdana, Geneva, "Helvetica Neue", Helvetica, "Bitstream Vera Sans", Arial, sans-serif;
}

/* Give some of the neutralized elements a vertical margin: */
h2, h3, h4, h5, h6, p, pre, blockquote,
li, dl, address, table, form {
margin: 0 0 1em;
}

h1 {
font-size: 200%;
font-weight: bold;
}

h2,
#packagedetail #content h2:first-child {
/* NOTE: first-child override for bidder pages (see next selector) */
font: 190% "Trebuchet MS", Verdana, Geneva, "Helvetica Neue", Helvetica, "Bitstream Vera Sans", Arial, sans-serif;
margin: 1.4em 0 0.4em;
color: #036;
}

/* First H2 in the content area has small negative margin for alignment */
#content h2:first-child {
margin-top: -0.26em;
}

/* bidder page H2 is special because it exists outside #content */
#packagedetail h2.main-title {
margin: 0;
padding: 23px 23px 0;
background: url("../images/36.gif") no-repeat left top;
}

h3 {
font: bold 112%/1.2 "Trebuchet MS", Verdana, Geneva, "Helvetica Neue", Helvetica, "Bitstream Vera Sans", Arial, sans-serif;
margin: 1.5em 0 0.25em; /* WAS: 1.65em 0 0.4em */
color: #006000;
}

/* Directory page H3s have bottom border */
#directory.howto h3 { border-bottom: 1px solid silver; }

/* H3s immediately following an H2 have smaller top margin */
h2 + h3 {
margin-top: 0.85em;
}

h4 {
font-family: "Trebuchet MS", Verdana, Geneva, "Helvetica Neue", Helvetica, "Bitstream Vera Sans", Arial, sans-serif;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 2px;
margin: 2em 0 0.4em;
}

/* H4s that directly follow an H3 have smaller top margin */
h3 + h4 {
margin-top: 0.7em;
}

p, ol, #content ul {
line-height: 1.5;
}

/* Apply left margin only to the few elements that need it: */
li, dd {
margin-left: 2em;
}

#content ul {
list-style: outside disc;
}

#content li ul {
list-style: outside circle;
}

ol,
ul li ol {
list-style: outside decimal;
}

ol li ol {
/* NOTE: lower-latin doesn't work in IE, so I changed to lower-roman. */
list-style: outside lower-roman;
margin-left: 0.75em;
}

ol.tight-list li,
ul.tight-list li {
/* lists with tighter spacing */
margin-bottom: 0.5em;
}

abbr,
acronym {
border-bottom: 1px dashed #666;
cursor: help;
}

blockquote {
margin-left: 2em;
}

b,
b *,
strong,
strong *,
form b,
form * b,
form strong,
form * strong {
font-weight: bold;
}

em, i,
em *, i *,
form i,
form * i,
form em,
form * em {
font-style: italic;
}

/* fake 'all small caps' */
#breadcrumbs strong,
p.package-prices em {
text-transform: uppercase;
font-size: 82%;
}

.highlight { background: #ffffc2 }

/* ------------------- /GENERAL TYPOGRAPHY ------------------- */


/* ------------------------- TEXT LINKS ------------------------- */

/* restore focus marker, which is mysteriously gone in FF */
a:focus {
outline: 1px dotted;
}

/* don't underline links */
a { text-decoration: none; }

/* general link rules */
#content a:link,
#footer a:link,
#breadcrumbs a:link,
#breadcrumbs a:visited,
#content p.notice-info a:link,
#content ul.notice-info a:link,
#content p.notice-info a:visited,
#content ul.notice-info a:visited {
color: #006000;
border-bottom: 1px solid #006000;
}

#content a:visited,
#footer a:visited {
color: #7BB87B;
border-bottom: 1px dotted #7BB87B;
}

#content a:hover,
#content a:focus,
#footer a:hover,
#footer a:focus,
#breadcrumbs a:hover,
#breadcrumbs a:focus,
#content p.notice-info a:hover,
#content p.notice-info a:focus,
#content ul.notice-info a:hover,
#content ul.notice-info a:focus {
color: #f79732;
border-bottom: 1px solid #f79732;
}

#content a:active,
#footer a:active,
#breadcrumbs a:active,
#content p.notice-info a:active,
#content ul.notice-info a:active {
color: #476fb3;
border-bottom: 1px solid #476fb3;
}

#content .highlight a:link,
#content .highlight a:visited {
color: #016e00;
border-bottom: 1px solid #016e00;
}

#content .highlight a:focus,
#content .highlight a:hover { background: #ffc85f; }

#content .highlight a:active {
color: #476fb3;
border-bottom: 1px solid #476fb3;
background: #ff9;
}

/* ------------------------- /TEXT LINKS ------------------------- */


/* -------------------------- MASTHEAD -------------------------- */

/* TODO: move this to a section for form styles */
#searchform label img { vertical-align: middle; }

#masthead ul {
background: transparent url("../images/8.png") repeat-x 0 0;
overflow: hidden;
}

#masthead li {
float: left;
margin: 0;
}

#masthead ul a {
display: block;
text-decoration: underline;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: bold;
padding: 14px 27px 18px 27px;
}

#masthead ul a:link,
#masthead ul a:visited { color: #000; }

#masthead ul a:hover,
#masthead ul a:focus {
background: transparent url("../images/8.png") repeat-x 0 -150px;
text-shadow: 0 0 0 #d69d52; /* prevent "fat" letters from OS X anti-aliasing */
color: #fff;
}

#masthead ul a:active { color: #1e6f30; }

#default #masthead li.home a,
#directory #masthead li.directory a,
#faq #masthead li.faq a,
#contact #masthead li.contact a {
background: transparent url("../images/8.png") repeat-x 0 -300px;
text-shadow: 0 0 0 #26527a; /* prevent "fat" letters from OS X anti-aliasing */
color: #fff;
}

#default #masthead li.home a:hover,
#directory #masthead li.directory a:hover,
#faq #masthead li.faq a:hover,
#contact #masthead li.contact a:hover {
background: transparent url("../images/8.png") repeat-x 0 -150px;
}

/* -------------------------- /MASTHEAD -------------------------- */


/* --------------------- SIDEBAR NAVIGATION --------------------- */

p#allcats-link {
font-weight: bold;
margin-top: 2.5em;
}

/* category lists for directory */
#directory #sidebar ul {
border-bottom: 1px solid #e0e0e0;
margin-top: 5em;
}

#directory #sidebar.subcat ul { margin: 0; }

#directory #sidebar ul ul {
border: none;
margin: 0;
}

#directory #sidebar ul li {
line-height: 1.2;
margin: 0;
}

#directory #sidebar li a {
display: block;
text-decoration: underline;
padding: 0.7em 0.25em 0.9em;
border-top: 1px solid #e0e0e0;
background: #eee;
color: #1d4f8f;
}

#directory #sidebar li.current a { background: #036; }

#directory #sidebar li.current a:link,
#directory #sidebar li.current a:visited { color: #fff; }

#directory #sidebar li li a,
#directory #sidebar li.current li a {
padding-left: 1.5em;
background: transparent;
}

#directory #sidebar li li a:link,
#directory #sidebar li.current li a:link { color: #476fb3; }

#directory #sidebar li li a:visited,
#directory #sidebar li.current li a:visited { color: #666; }

#directory #sidebar li a:hover,
#directory #sidebar li a:focus,
#directory #sidebar li.current a:hover,
#directory #sidebar li.current a:focus,
#directory #sidebar li li a:hover,
#directory #sidebar li li a:focus,
#directory #sidebar li.current li a:hover,
#directory #sidebar li.current li a:focus {
color: #000;
background: #f9bf6c;
}

#directory #sidebar li a:active,
#directory #sidebar li.current a:active { color: #060; }

#allcats-link a:link,
#allcats-link a:visited { color: #476fb3; }

#allcats-link a:hover,
#allcats-link a:focus { color: #f79732; }

#allcats-link a:active { color: #060; }

#allcats-link a:link span,
#allcats-link a:visited span { border-bottom: 1px solid #476fb3; }

#allcats-link a:hover span,
#allcats-link a:focus span { border-bottom: 1px solid #f79732; }

#allcats-link a:active span { border-bottom: 1px solid #060; }


/* sidebar thumbnail lists */
ul#package_thumblist li { margin: 0 0 1.4em; }

/* --------------------- /SIDEBAR NAVIGATION --------------------- */


/* ------------------------ BREADCRUMBS ------------------------ */

#breadcrumbs {
font-size: 85%;
margin: 0.7em 23px 0;
padding-left: 8.3636em;
text-indent: -8.3636em;
}

/* ------------------------ /BREADCRUMBS ------------------------ */


/* ----------------------- FORM CONTROLS ----------------------- */

form * {
font: 100% Verdana, Geneva, "Helvetica Neue", Helvetica, "Bitstream Vera Sans", Arial, sans-serif;
}

fieldset {
border: 1px solid #e0e0e0;
padding: 10px 15px 15px;
}

fieldset fieldset {
border-left: none;
border-right: none;
border-bottom: none;
padding: 0.5em 0 0 0;
}

legend {
background: #fff;
font-family: "Trebuchet MS", Verdana, Geneva, "Helvetica Neue", Helvetica, "Bitstream Vera Sans", Arial, sans-serif;
text-transform: uppercase;
letter-spacing: 2px;
padding: 0 0.3em;
margin-left: -0.3em;
}

fieldset fieldset legend {
font-weight: bold;
font-style: italic;
letter-spacing: normal;
text-transform: none;
margin: 0;
padding: 0 0.3em 0.3em 0;
}

/* Ordered list of fields & labels */
fieldset ol {
list-style: none;
}

/* NOTE: List items contain floated field/label pairs */
fieldset ol li {
margin-left: 0;
overflow: hidden;
}

/* required field markers */
span.zemRequired,
label.zemRequired,
#make_reservation label.zemRequired {
background: #ceddf8;
}
span.zemRequirederrorElement,
label.zemRequirederrorElement,
#make_reservation label.zemRequirederrorElement {
background: #ffcccc;
}

p.form-notes {
margin: 0 0 1em;
font-size: 90%;
line-height: 1.5;
}

/* Let people know form labels are clickable */
label { cursor: pointer; }

/* Pad form labels for better appearance */
#contact form.zemContactForm label { padding: 0 0 2px; }
#directory form.zemContactForm label { padding: 3px 0; }


#searchform input { vertical-align: middle; }

/* Align image used for search form label */
#searchform label img { vertical-align: middle; }

/* Search form label doesn't get finger cursor */
#searchform label { cursor: default; }

#searchbutton { font-weight: bold; }


/* NOTE: div#make_reservation contains res. form and its instructions */

/* reservation form's field and label widths */
#make_reservation label {
float: left;
width: 180px;
background: #ebebeb; /* stregthen visual association of labels w/ fields */
}
#make_reservation input.zemText,
#make_reservation select {
width: 180px;
}

#make_reservation form input.zemSubmit {
float: right;
clear: right;
}

#make_reservation form > fieldset { overflow: hidden; }


/* Divide up required and non-required contact info in contact form */
#contact div.contact-info-req{
float: left;
clear: left;
width: 290px;
}
#contact div.contact-info-nonreq {
float: right;
clear: right;
width: 290px;
}

#contact input.zemText { width: 283px; }
#contact div.contact-info-nonreq input.zemText { width: 285px; }

#contact form.zemContactForm textarea {
padding: 2px;
width: 584px;
}

/* ----------------------- /FORM CONTROLS ----------------------- */


/* --------------------- STEP-BY-STEP LISTS --------------------- */

/* These lists describe steps in the JumpStart process, and have special styles. */

#home_steplist li { margin-left: 23px; }

#reservation_steplist ol { list-style: none; }

#reservation_steplist ol li {
margin-left: 0;
padding-left: 26px;
}

#reservation_steplist li.first-step {
background: transparent url("../images/39.gif") no-repeat 0 2px;
}

#reservation_steplist li.second-step {
background: transparent url("../images/40.gif") no-repeat 0 2px;
}

#reservation_steplist li.third-step {
background: transparent url("../images/41.gif") no-repeat 0 2px;
}

#reservation_steplist h4 { margin-top: 0.22em; }

/* --------------------- /STEP-BY-STEP LISTS --------------------- */


/* ---------------------- SEARCH RESULTS ---------------------- */

#search strong { background: #ff9; }

#search ol li { margin-left: 23px; }

#search blockquote { margin-left: 0; }

/* ---------------------- /SEARCH RESULTS ---------------------- */


/* -------------------- PACKAGE LISTS BY CAT -------------------- */

ul#package_list { list-style: none; }

ul#package_list li { margin: 0; }

ul#package_list p {
font-style: italic;
margin: 0;
}

ul#package_list strong {
font-style: normal;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 82%;
color: #036;
}

/* No top margin for first package name */
ul#package_list h3.first { margin-top: 0; }

/* -------------------- /PACKAGE LISTS BY CAT -------------------- */


/* ----------------- PACKAGE DESCRIPTION PAGES ----------------- */

/* Package title on description page has no bottom margin */
body.package #content h2:first-child { margin-bottom: 0; }

h3#reserve_this {
color: #036;
font-size: 190%;
font-weight: normal;
}

p.package-subtitle {
font: italic 123%/1 "Trebuchet MS", Verdana, Geneva, "Helvetica Neue", Helvetica, "Bitstream Vera Sans", Arial, sans-serif;
margin: 0 0 1.3em;
color: #595959;
}

/* 'Add to My Auction' image button */
#content a.button-link { border-bottom: none; }
#content a.button-link img { vertical-align: middle; }

/* Package info inline headings */
p.package-prices em {
font-style: normal;
font-weight: normal;
}

/* Field data for entry into ReadySetAuction */
.howto-fielddata { background: #eee; }
p.howto-fielddata {
padding: 5px 5px 7px;
border: 1px solid #c7c7c7;
}

/* indentation of instructions */
#directory.howto ol.instructions li,
#directory.howto ul.instructions li,
#directory.howto p.instructions { margin-left: 4.3846em; }

/* ----------------- /PACKAGE DESCRIPTION PAGES ----------------- */


/* -------------------- NOTICES AND WARNINGS -------------------- */

p.notice-info,
p.notice-warning,
ul.notice-warning,
ul.notice-info,
ul.zemError {
clear: both;
padding: 5px 5px 7px 26px;
margin: 0 auto 1em auto;
}

ul.zemError,
ul.notice-warning { padding: 9px 5px 6px 26px; }

ul.notice-info { padding: 7px 5px 5px 26px; }

#make_reservation p.notice-info { width: 554px; }

#directory.howto p.notice-info,
#directory.howto ul.notice-info,
#directory.howto ul.notice-warning { width: 705px; margin-top: 1.47em; }

/* Notify the user of things that are important, but not critical */
p.notice-info,
ul.notice-info {
background: #ffffc2 url("../images/5.gif") no-repeat 5px 8px ;
border: 1px solid silver;
}

strong.notice { text-transform: uppercase; font-size: 85%; }

/* Notify the user of serious problems, such as un-filled form fields that are required. */
p.notice-warning,
ul.notice-warning,
ul.zemError {
background: #ffcccc url("../images/4.gif") no-repeat 5px 8px;
border: 1px solid #f28b8b;
}
#content p.notice-warning a:hover,
#content p.notice-warning a:focus,
#content ul.zemError a:hover,
#content ul.zemError a:focus,
#content ul.notice-warning a:hover,
#content ul.notice-warning a:focus {
color: #1CB362;
border-bottom: 1px solid #1CB362;
}
#content p.notice-warning a:active,
#content ul.notice-warning a:active,
#content ul.zemError a:active {
color: #476fb3;
border-bottom: 1px solid #476fb3;
}

/* Unordered lists in notice/error messages */
#content ul.zemError li,
#content ul.notice-info li,
#content ul.notice-warning li {
margin: 0 0 0.5em 1.2em;
}

/* -------------------- /NOTICES AND WARNINGS -------------------- */


/* --------------------------- FOOTER --------------------------- */

#footer {
font-size: 85%;
padding: 0.5em 0;
}

p#service_note {
padding-top: 5px;
border-top: 1px solid #333;
margin: 0 23px 0;
}

#footer p#copyright {
margin: 0 23px 23px;
}

/* --------------------------- /FOOTER --------------------------- */


/* --------------------- POSITIONED IMAGES --------------------- */

.imgcenter {
text-align: center;
}

.imgright {
margin: 0 0 10px 20px;
clear: right;
float: right;
}

.imgleft {
margin: 0 20px 10px 0;
clear: left;
float: left;
}

/* --------------------- /POSITIONED IMAGES --------------------- */