
BODY {
    color: #000;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5em;
    background: #fff;
    padding: 0 20px;
    margin: 0;
}

A {
    color: #333399;
    text-decoration: none;
}

#layout {
    background: #f3f3f4;
    margin: 0 auto;
    width: 960px;
}

/* ===[ header ]============================================================= */

#header {
    overflow: hidden;
    width: 100%;
    height: 90px;
}

#header .logo {
    text-indent: -9999px;
    background: url(/images/logo.png) center left no-repeat;
    margin-left: 50px;
    width: 200px;
    height: 90px;
    float: left;
}

#header .logo-twebid {
    text-indent: -9999px;
    background: url(/images/logo-twebid.png) top left no-repeat;
    margin: 25px 0 0 55px;
    width: 146px;
    height: 36px;
    float: left;
}

/* ===[ main-menu ]========================================================== */

#main-menu {
    border: 1px solid #3853a4;
    background: #3853a3 url(/images/main-menu-bg.gif) top repeat-x;
    height: 30px;
}

#main-menu A {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    line-height: 30px;
    padding: 0 8px;
    margin-left: 50px;
    height: 30px;
    float: left;
}

#main-menu A:hover,
#main-menu A.active {
    background: #5564ae url(/images/main-menu-active-bg.gif) top repeat-x;
}

/* ===[ content ]============================================================ */

#content {
    margin: 45px 50px;
    overflow: hidden;
    width: 860px;
    position: relative;
    overflow: visible;
}

H1 {
    color: #333399;
    font-size: 23px;
    line-height: 1.25em;
    border-bottom: 1px solid #e0e0e2;
    padding-bottom: .2em;
    margin-bottom: .2em;
    position: relative;
    overflow: visible;
}

#content.home H1 {
    border: none;
}

H1 .free100 {
    color: #ff6633;
    font-weight: bold;
}

P {
    margin: 1em 0;
}

P.preface {
    font-size: 18px;
    margin: .5em 0;
}

A.alter-link {
    font-size: 12px;
    text-decoration: none;
    line-height: 12px;
    vertical-align: bottom;
    padding-left: 10px;
}

/* introduction */

UL.introduction {
    margin: 1.5em 0;
    width: 100%;
    overflow: hidden;
}

UL.introduction LI {
    color: #fff;
    font-family: "Century Gothic";
    font-size: 22px;
    line-height: 1.2em;
    background: url(/images/intro-bg.gif) top repeat-x;
    padding: 13px 0 0 90px;
    margin-right: 2px;
    width: 194px;
    height: 192px;
    float: left;
    position: relative;
}

UL.introduction LI LABEL {
    color: #fff;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 60px;
    font-weight: bold;
    line-height: 1em;
    position: absolute;
    top: 10px;
    left: 25px;
    width: 70px;
    height: 70px;
}

P.want-in {
    text-align: center;
    margin: 2em 0;
}

DIV.divider {
    border-top: 1px solid #e0e0e2;
    height: 1px;
}

/* sign-in-pane */

.sign-in-pane {
    margin: 1.5em 0;
    width: 100%;
    overflow: hidden;
}

.sign-in-pane H2 {
    color: #333399;
    font-size: 18px;
    margin: 1.2em 0;
}

/* sign-in */

.sign-in {
    margin-left: 50px;
    float: left;
}
.sign-in-center {
    margin: 25px 340px;
}
.sign-in-center H2, .sign-in H2 {
    margin-bottom: .4em;
}

.sign-in-center .twitter, .sign-in .twitter {
    border-bottom: 1px solid #e0e0e2;
    padding-bottom: 3px;
    margin: 0;
}

.sign-in-center P, .sign-in P {
    font-size: 12px;
    margin: 1.4em 0;
}

.sign-in-center SPAN.gray,
.sign-in SPAN.gray {
    font-size: 12px;
    color: #818285;
}

.sign-in-center P SPAN.small,
.sign-in P SPAN.small {
    font-size: 10px;
}

.sign-in-center .input-text,
.sign-in .input-text {
    width: 280px;
}

.sign-in-center .button-black,
.sign-in .button-black {
    vertical-align: bottom;
}

.sign-in-center A.forgotten,
.sign-in A.forgotten {
    font-size: 12px;
    text-decoration: none;
    padding-left: 10px;
}
.forgot-password .dialogue {
    border: 1px solid #c3c4c5;
    background: #d1d2d4;
    padding: 0 10px;
    margin: 1em 0;
    width: 550px;
}
.dialogue .input-text {
    width: 538px;
}

/* more-sales */

.more-sales {
    margin-left: 115px;
    float: left;
}

.more-sales INPUT {
    font-size: 14px !important;
}

/* top-bid */

.top-bids {
    margin: 3em auto;
    width: 670px;
}

/* bids */

.bids {
    margin: 2em 0 0;
    width: 670px;
}

/* capsule */

.capsule {
    width: 100%;
    overflow: hidden;
}

.capsule .thumbnail {
    text-align: center;
    border: 1px solid #d8d8da;
    background: #fff;
    padding: 5px 10px;
    margin-right: 12px;;
    width: 90px;
    float: left;
}

.capsule .thumbnail .divider {
    margin: 10px 0;
}

.capsule .from {
    font-size: 12px;
    text-align: right;
    margin: 0 40px 0 0;
}

.capsule .bid-boxes {
    float: left;
}

/* bid-box */

.bid-box {
    padding-bottom: 5px;
    margin-bottom: 10px;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.bid-box .layout {
    border: 4px solid #bdbec0;
    background: #fff;
    margin: 0 20px 20px 0;
    overflow: hidden;
}

.overstate .bid-box .layout:hover {
    border: 4px solid #fff;
    background: #e7e8e9;
}

.bid-box .layout H2 {
    color: #fff;
    font-size: 15px;
    font-weight: normal;
    line-height: 30px;
    background: #939598;
    padding-left: 15px;
/*    height: 32px; */
}

.bid-box .layout H2 STRONG A{
    color: #000;
}
.bid-box .layout H2 A{
    color: #fff;
}

.overstate .bid-box .layout:hover H2 {
    color: #f3f3f4;
}

.bid-box .layout H2 STRONG {
    color: #000;
    font-size: 18px;
    font-weight: bold;
}

.bid-box .layout P {
    padding-bottom: .5em;
    margin: .5em 15px .5em;
}

.bid-box .layout P.info {
    font-size: 18px;
}

.bid-box .layout P.info A{
    font-size: 18px;
    text-decoration: none;
}

.bid-box .layout P.promotion {
    border: none;
}

.bid-box .layout P.promotion A{
    font-size: 12px;
    text-decoration: none;
}

.bid-box .layout P.actions {
    text-align: right;
    border: none;
}

.bid-box .layout P.actions INPUT {
    margin-left: 5px;
}

.bid-box P {
    font-size: 12px;
    line-height: 1.3em;
    border-bottom: 1px solid #dfe0e0;
    padding-bottom: 6px;
    margin: 8px 0;
}

.bid-box .layout .head STRONG { color: #000; font-weight: bold; }
.bid-box .layout .head EM { font-style: italic; }

.bid-box .tr { background: url(/images/bid-shadow-tr.png) bottom left no-repeat; position: absolute; top: 0px; right: 0px; width: 20px; height: 20px; }
.bid-box .mr { background: url(/images/bid-shadow-mr.png) left repeat-y; position: absolute; top: 20px; right: 0px; width: 20px; bottom: 25px; }
.bid-box .br { background: url(/images/bid-shadow-br.png) top left no-repeat; position: absolute; right: 0px; width: 20px; height: 20px; bottom: 5px; }
.bid-box .bc { background: url(/images/bid-shadow-bc.png) top repeat-x; position: absolute; height: 20px; left: 20px; right: 20px; bottom: 5px; }
.bid-box .bl { background: url(/images/bid-shadow-bl.png) top right no-repeat; position: absolute; height: 20px; left: 0px; width: 20px; bottom: 5px; }

.bid-box .from {
    font-size: 12px;
    text-align: right;
    line-height: 20px;
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 300px;
    height: 20px;
}

.bid-box .from A {
    text-decoration: none;
}

/* help-topic */

H1 .help-topic {
    background: url(/images/button-help.gif) top right no-repeat;
    position: absolute;
    top: 40px;
    right: 0px;
    width: 59px;
    height: 38px;
    cursor: pointer;
    cursor: hand;
}

H1 .help-topic:hover {
    background: url(/images/button-help-hover.gif) top right no-repeat;
}

H1 .help-topic .content {
    display: none;
}

H1 .help-topic:hover .content {
    color: #000;
    font-size: 11px;
    line-height: 1.2em;
    padding: .7em;
    border: 1px solid #e4e4e5;
    background: #fff;
    display: block;
    position: absolute;
    top: 56px;
    right: 0px;
}

H1 .help-topic:hover .arrow {
    background: url(/images/help-topic-arrow.gif) top left no-repeat;
    position: absolute;
    top: 44px;
    right: 10px;
    width: 19px;
    height: 13px;
}

/* dealeconomix */

.dealeconomix {
    border: 1px solid #e9e9ea;
    background: #fff;
    padding: 18px;
    margin: 2.25em 0 3em 100px;
    width: 584px;
    overflow: hidden;
}

.dealeconomix .block {
    width: 290px;
    float: left;
}

.dealeconomix .block.left {
    border-right: 1px solid #7f7f7f;
}

.dealeconomix .block.top,
.dealeconomix .block.middle {
    border-bottom: 1px solid #7f7f7f;
}

.dealeconomix .block.middle,
.dealeconomix .block.bottom {
    padding-top: 10px;
}

.dealeconomix .block.right {
    text-align: right;
}

.dealeconomix .block.left H2 {
    width: 235px;
}

.dealeconomix .block.right H2 {
    width: 235px;
    margin-left: 55px;
}

.dealeconomix .block H2 {
    font-size: 18px;
    text-align: center;
}

.dealeconomix .block H2 SPAN {
    font-size: 12px;
    text-align: center;
    display: block;
}

.dealeconomix INPUT,
.dealeconomix BUTTON {
    font-size: 14px !important;
    width: 240px;
}

.dealeconomix BUTTON DIV {
    font-size: 12px !important;
    line-height: 1.1em;
}

/* side-ctrls */

.fixed-side-ctrls {
    position: absolute;
    top: 100px;
    right: 0px;
    width: 170px;
}

.fixed-side-ctrls UL {
    position: fixed;
}

.fixed-side-ctrls UL LI {
    margin-bottom: 10px;
}

/* ===[ footer ]============================================================ */

#footer {
    border: 1px solid #3853a4;
    background: #3853a4 url(/images/main-menu-bg.gif) top repeat-x;
    margin-bottom: 20px;
    height: 30px;
    overflow: hidden;
}

#footer .copyright {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    line-height: 28px;
    margin-left: 25px;
    float: left;
}

#footer .links {
    margin-right: 25px;
    float: right;
}

#footer .links A {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
    line-height: 28px;
    margin-left: 25px;
}

#tail {
}

/* ===[ common ]============================================================= */

/* common classes */

.fc-red { color: red; }
.fc-darkred { color: darkred; }
.f12 { font-size: 12px !important; }
.f14 { font-size: 14px !important; }
/* .ta-center { text-align: center; } */
.ta-center { text-align: left; }

.nosp { margin: 0 !important; }
.sph-top { margin-top: .5em !important; }
.sp1-top { margin-top: 1em !important; }
.sp2-top { margin-top: 2em !important; }

.w115 { width: 115px; }
.w130 { width: 130px; }
.w150 { width: 150px; }
.w170 { width: 170px; }
.w200 { width: 200px; }
.w220 { width: 220px; }
.w235 { width: 235px; }
.w250 { width: 260px; }
.w260 { width: 260px; }
.w300 { width: 300px; }
.w490 { width: 490px; }
.w540 { width: 540px; }
.w560 { width: 560px; }
.w620 { width: 560px; }
.w670 { width: 700px; }

.h80  { height:  80px; }
.h130 { height: 130px; }

/* forms formatting */

FORM {
    padding: 0;
    margin: 0;
}

.input-text {
    color: #333;
    font-size: 14px;
    border: 1px solid #bbb;
    padding: 6px 3px 3px;
    height: 21px;
}

INPUT.button-black, INPUT.button-blue, INPUT.button-orange,
INPUT.button-black-heavy, INPUT.button-gray {
    color: #fff;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
    overflow:visible;
    cursor: pointer;
    display: inline-block;
}

A.button-black, A.button-blue, A.button-orange,
A.button-black-heavy, A.button-gray {
    color: #fff;
    line-height: 1.8em;
    text-align: center;
    text-decoration: none;
    display: inline-block;
/*    width: 235px; */
    height: 19px;
}

A.button-black {
    border: 1px solid #444;
    background: #000 url(/images/button-black-bg.gif) top repeat-x;
    padding: 5px 12px 6px;
}
A.button-black:hover {
    background: #000 url(/images/button-black-hover-bg.gif) bottom repeat-x;
}
A.button-blue {
    border: 1px solid #2d4096;
    background: #f26722 url(/images/button-blue-bg.gif) top repeat-x;
    padding: 6px 0 7px;
}
A.button-blue:hover {
    background: #f26722 url(/images/button-blue-hover-bg.gif) bottom repeat-x;
}
A.button-orange {
    border: 1px solid #cb312b;
    background: #f26722 url(/images/button-orange-bg.gif) top repeat-x;
    padding: 6px 0 7px;
}
A.button-orange:hover {
    background: #f26722 url(/images/button-orange-hover-bg.gif) bottom repeat-x;
}
A.button-black-heavy {
    border: 1px solid #444;
    background: #000 url(/images/button-black-bg.gif) top repeat-x;
    padding: 6px 0 7px;
}
A.button-black-heavy:hover {
    background: #000 url(/images/button-black-hover-bg.gif) bottom repeat-x;
}
A.button-gray {
    color: #000;
    border: 1px solid DarkGray;
    background: #97999c url(/images/button-gray-bg.gif) top repeat-x;
    padding: 6px 0 7px;
/*    width: 200px; */
}
A.button-gray:hover {
    background: #97999c url(/images/button-gray-hover-bg.gif) bottom repeat-x;
}

INPUT.button-black {
    border: 1px solid #444;
    background: #000 url(/images/button-black-bg.gif) top repeat-x;
    padding: 5px 12px 6px;
}

INPUT.button-black:hover {
    background: #000 url(/images/button-black-hover-bg.gif) bottom repeat-x;
}

INPUT.button-blue {
    border: 1px solid #2d4096;
    background: #3a53a4 url(/images/button-blue-bg.gif) top repeat-x;
    padding: 6px 0 7px;
    height: 34px;
}

INPUT.button-blue:hover {
    background: #3a53a4 url(/images/button-blue-hover-bg.gif) bottom repeat-x;
}

INPUT.button-orange {
    border: 1px solid #cb312b;
    background: #f26722 url(/images/button-orange-bg.gif) top repeat-x;
    padding: 6px 0 7px;
    height: 34px;
}

INPUT.button-orange:hover {
    background: #f26722 url(/images/button-orange-hover-bg.gif) bottom repeat-x;
}

INPUT.button-black-heavy {
    border: 1px solid #444;
    background: #000 url(/images/button-black-bg.gif) top repeat-x;
    padding: 6px 0 7px;
    height: 34px;
}

INPUT.button-black-heavy:hover {
    background: #000 url(/images/button-black-hover-bg.gif) bottom repeat-x;
}

INPUT.button-gray {
    color: #000;
    border: 1px solid DarkGray;
    background: #97999c url(/images/button-gray-bg.gif) top repeat-x;
    padding: 6px 0 7px;
    height: 34px;
}

INPUT.button-gray:hover {
    background: #97999c url(/images/button-gray-hover-bg.gif) bottom repeat-x;
}

BUTTON.button-orange,
BUTTON.button-blue {
    color: #fff;
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 12px;
    text-align: center;
    overflow:visible;
    cursor: pointer;
    display: inline-block;
}

BUTTON.button-blue {
    border: 1px solid #2d4096;
    background: #3a53a4 url(/images/button-wide-blue-bg.gif) top repeat-x;
    padding: 3px 0 7px;
    height: 46px;
}

BUTTON.button-blue:hover {
    background: #3a53a4 url(/images/button-wide-blue-hover-bg.gif) bottom repeat-x;
}

BUTTON.button-orange {
    border: 1px solid #cb312b;
    background: #f26722 url(/images/button-wide-orange-bg.gif) top repeat-x;
    padding: 3px 0 7px;
    height: 46px;
}

BUTTON.button-orange:hover {
    background: #f26722 url(/images/button-wide-orange-hover-bg.gif) bottom repeat-x;
}

TEXTAREA {
    font-family: Verdana, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 1.5em;
    border: 1px solid #cfcfd0;
    background: #fff;
    padding: 10px;
}
/* invite-panel */

.invite-panel {
    border: 1px solid #b6b6b7;
    margin: 30px 0;
    width: 620px;
}

.invite-panel .tabs {
    padding-bottom: 1px;
    width: 100%;
    overflow: hidden;
}

.invite-panel .tabs A {
    text-decoration: none;
    padding: 3px 25px 5px 25px;
    float: left;
}

.invite-panel .tabs A.active {
    color: #fff;
    background: #3853a4;
}

.invite-panel .status {
    background: #3853a4;
    padding: 5px;
    overflow: hidden;
}

.invite-panel .status .item {
    color: #fff;
    padding: 0 7px 1px 7px;
    margin-left: 13px;
    float: left;
}

.invite-panel .status .item.highlighted {
    border: 1px solid #fff;
}

.invite-panel UL.friends {
    width: 100%;
    overflow: hidden;
}

.invite-panel UL.friends LI {
    font-size: 12px;
    white-space: nowrap;
    padding: 11px 8px 11px 8px;
    margin: 5px 2px 5px 2px;
    width: 180px;
    height: 52px;
    float: left;
}
.invite-panel UL.friends LI.friend_selected {
    background-color: #ECE9D8;
    font-size: 12px;
    white-space: nowrap;
    padding: 10px 6px 10px 6px;
    margin: 5px 2px 5px 2px;
    width: 180px;
    height: 52px;
    float: left;
    border: thin solid;
}
.invite-panel UL.friends LI IMG {
    border: 1px solid #93969a;
    margin-right: 10px;
    width: 52px;
    height: 52px;
    float: left;
}

.invite-panel UL.friends LI SPAN {
    padding-top: 17px;
    width: 116px;
    height: 52px;
    float: left;
}

.invite-panel .actions {
    background: #3853a4;
    padding: 3px 10px;
}
