/* ************** */
/* general        */
/* ************** */
:root {
    --nav-height:60px;
    --scale-factor: 0.4;
    --nav-padding: 8px;

    /* --- primary colors */
    --colorA: white;
    --colorB: #fa5; /* orange */
    --colorC: black;
    /* --- complementary colors */
    --colorD: #ccc;
    --colorE: #003366; /* navy */
    --colorF: gold;
    --colorG: teal;
    /* accent colors */
    --colorH: #fc9; /* light orange  */
    --colorI: #b71c1c; /* deep red */
    --colorJ: #98ff98; /* mint green */
}

@media only screen and (max-width: 599px) { 
    :root {
        --nav-height:60px;
        --scale-factor: 0.4;
        --nav-padding: 8px;

        /* --- primary colors */
        --colorA: yellow;
        --colorB: #fa5; /* orange */
        --colorC: black;
        /* --- complementary colors */
        --colorD: #F5F5F5;
        --colorE: #003366; /* navy */
        --colorF: gold;
        --colorG: teal;
        /* accent colors */
        --colorH: #fc9; /* light orange  */
        --colorI: #b71c1c; /* deep red */
        --colorJ: #98ff98; /* mint green */
    }
}

* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
a {
    display:inline-block;
    text-decoration:none;
    font-weight: bold;
    font-size: 1em;
    color: var( --colorE );
}
a:hover {
    color: var( --colorG );
    text-decoration:underline;
}
a.active {
    background-color: var( --colorG ); 
    color: var( --colorA );
}
a.active::before {
   content: ' > ';
   padding-left:10px;
}
body {
    background-color: var( --colorA );
    color: var( --colorC );
    font-family: Verdana, sans-serif;
    font-size: 12px;
}
.bold {
    font-weight: bold;
}
input, textarea, select {
    background-color:var( --colorH );
    border: 1px solid #ccc;
    border-radius: 0px;
    color: var( --colorC );
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    height:40px;
    margin: 0px; 
    max-width:300px;
    padding: 12px;
    width:80%;
    font-size: 16px;
    line-height: 1.5;
}
button {
    background-color:var( --colorB );
    border: 2px solid #ccc;
    border-radius: 5px;
    color: var( --colorC );
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    height:40px;
    margin: 0px; 
    padding: 0.5em;
    margin: 0.5em 0.5em 0.5em 0em;
    font-size: 16px;
    line-height: 1.5;

}
button:hover {
    background-color:var( --colorF );
    
}
.buttonSearch {
    display: inline-block;
    width:40px;
}                         
#nowBid {
    text-align:right;
    width: 200px;
}
div.error { color: red; }
h1, h2, h3 {
    font-weight: bold;
}
img {
    max-height:100px;
}
h1 { font-size: 1.8em; padding:3px; }
h2 { font-size: 1.4em; padding:2px; }
h3 { font-size: 1.2em; padding:1px; }
section.main, .itemForm {
    background-color: var( --colorA );
    border:0;
    border-left: 2px var(--colorD ) solid;
    border-right: 2px var(--colorD ) solid;
    margin: auto;
    max-width: 600px;
    padding: 20px;
    width: 100%;
}
table {
    width:100%;
}
table th {
    text-align: left;
}
/* end general */

/* ************************ */
/* header.php               */
/* ************************ */
nav {
    background-color: var(--colorB );
    height: var(--nav-height);
    margin:0;
    padding: var(--nav-padding);
}
nav a, nav div {
    background-color: transparent;
    border: 0px red solid;
    color:white;
    cursor: pointer;
    display:inline-block;
    height: 92%;
    text-decoration:none;
    vertical-align: middle; /* div and a align differently by default */
}
nav a svg, nav div svg {
    background-color:none;
    margin:2px;
    padding:0;
}
.home, .user {
    margin-left:8px;
    text-align:center;
}
#dropBtn {
    display: block;
}
.dropContent {
    border: 0px black solid;
    background-color: var( --colorB ); 
    color: var( --colorC );
    display: none;
    height: auto; 
    left:0px;
    min-width: 200px; 
    padding-left:6px;
    position: absolute; 
    top: calc( var(--nav-height) );
    z-index: 1;
}
.dropContent a {
    color: var( --colorC );
    padding: 8px 16px; 
    height:30px;
    text-decoration: none;
    display: block; 
    text-align: left;
    border-bottom:1px dashed black;
}
.dropContent.show {
    display: block;
}
.adPlus, .user {
    float:right;
}
.user {
    height: calc( var(--nav-height) * var(--scale-factor) ); 
    color: var( --colorC );
    font-size: 1em;
    font-weight: bold;
    font-color: var( --colorB );
}
/* ***** end header */

/* *********************** */
/* footer.php              */
/* *********************** */
footer {
    background-color: var( --colorB );
    color: var( --colorC );
    padding: 10px;
    text-align: center;
}
.center {
    margin: 0 auto;
    max-width:600px;
    border:0px red dashed;
    padding:10px;
}
/* end footer.php */

/* ***************************** */
/* index.php                     */
/* ***************************** */
.searchItem {
    background-color: var( --colorA ); 
    cursor: pointer;
    display:inline-block;
    margin: 0.2em;
    min-width: 150px;
    padding: 0.2em;
}

.searchItem img {
    max-height: 100px;
}

/* **************************************************** */
/* itemViewActive.php         itemViewActiveOwner.php   */
/* **************************************************** */
.seller, .buyer {
    text-transform: uppercase;
}
#maxBid {
    width: 200px;
    text-align:right;
}
#nowBid {
    min-width: 200px;
}
#setMaxBid {
    width: 100px;
}
#bidHolder {
    display: inline-block;
}
.bidHistory {
    position: fixed;
    top: 0;
    left:0;
    right:0;
    bottom:0;
    z-index: 1;
    overflow: auto;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: #00000080;
    display: none;
}
.bidHistoryCnt {
    margin:auto;
    background-color: white;
    min-width: 800px;
    padding:1em;
}
.bidHistoryTable tr td {
    border-bottom: 1px gray dashed;
}

/* userLogin, userAdd */
.userForm, .itemForm {
    display:         flex;
    flex-direction:  column;
    align-items:     center; 
    justify-content: center; 
    border:          0px red solid;
    margin:          auto;
}
.itemForm {
    align-items: start;
}
#uname, #umail, #upass, #submit, .userForm p, .userForm h2  {
    margin: 10px 0px; 
    width:100%;
    max-width: 300px;
}

/* itemViewCreate */
.itemForm label, .itemForm h1 {
    display: block;
    text-align: left;
    width: 100%;
    max-width: 300px;
}
.itemForm label, .itemForm input, .itemForm button, .itemForm a, .itemForm h3, .itemForm button, .itemForm h2 {
    width: 100%;
    max-width: 300px;
}
.itemForm h3, .itemForm h2, .itemForm h1, .itemForm label {
    margin-top:15px;
    text-align: left;
    font-weight:bold;
}
.itemForm h1 {
    margin-bottom:15px;
}
.checkbox {
    border: 1px solid var(--colorD );
    background-color: var(--colorH );
    width:36px;
    height: 36px;
    font-size: 26px;
    font-weight: bold;
    display: inline-block;
    padding:0;
    padding-left:7px;
}
.checkbox:hover, .checkbox.checked:hover {
    background-color: var( --colorJ );
}
.checkbox.checked {
    background-color: var(--colorG );
    color: var(--colorA);
}
#icountlabel {
    display:none;
}
#ipricelabel {
    display:inline-block;
}
#idesc {
    min-height:100px;
    width:300px !important;
}


/* mail.php */
.mailForm {
    display:         flex;
    flex-direction:  column;
    align-items:     center; 
    justify-content: center; 
    border:          0px red solid;
    margin:          auto;
}
.mailForm label, .mailForm input, .mailForm button, .mailForm h3, .mailForm button, .mailForm h2, .mailForm div {
    width: 100%;
    max-width: 300px;
    margin: 10px 0px; 
}
.mailForm a {
    width: 100%;
    max-width: 300px;
    margin: 0px 0px;
    padding: 5px 0px;
}
.mailForm h3, .mailForm h2, .mailForm h1, .mailForm label, .mailForm div {
    margin-top:15px;
    text-align: left;
}