/* Form styles:
 *  formBox is placed around formPanel so that formPanel will center.
 *  formError appears at the top of the form.
 *
 * */

/* Paragraph title */
.paraTitle {
    text-align: left;
    font-weight: bold;
    font-size: 26px;
    margin: 28px 40px 0 40px;
}

/* paragraph */


/* innerPage has a max width and is centered in the browser window. It keeps the content bound to a comfortable page width
 even if the browser window is very wide. There is a top and bottom margin so the content doesn't get too close to the
 edges. Overflow is auto so floating images always appear within the page region. There is left and right padding which act as margins.
Min height of 450 helps reduce vertical jittering on iphones.
 */
.innerPage {
    margin-top: 46px;
    min-height: 450px;

    font-family: arial;
    font-size: 18px;
    line-height: 27px;
    border: 0px solid green;
    background-color: white;

    padding: 10px 0px 20px 0;
    max-width: 900px;
    margin: 0px auto;
    overflow: auto;
    box-shadow: 0 0  10px darkgray;

}

/* Images have the same margins as text for large screens */

.imageRight {
    border: 0px solid blue;
    display: inline-block;
    float : right;
    width: 45%;
    margin: 5px 40px 5px 20px;
}

.imageLeft {
    border: 0px solid blue;
    display: inline-block;
    float : left;
    width: 45%;
    margin: 5px 20px 5px 40px;
}



.requiredFootnote {
    font-family: arial;
    font-size: 20px;
    color: #999;
    float: right;
    margin: 10px 0 10px 0;
}
.inputLabel {
    color: #444;
    display: inline-block;
    margin: 10px 0 0 0;
    width: 100%;
    border: 0px solid red;
    
}

.errorLabel {
    margin: 10px 0 0 0;
    color: red;
    font-size: 18px;
    font-family: arial;
    display: none;
}
.inputInnerBox {
    padding: 35px 30px 10px 30px;
    border: 0px solid blue;
    width: 400px;
    display: inline-block;
    margin: 0 30px;
    text-align: left;
}

.inputError {
    display: inline-block;
    color: red;
}

.formBox {
    margin: 0;
    border: 0px solid blue;
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 0;
}

.formError {
    font-family: arial;
    font-size: 18px;
    color: red;
    font-weight: bold;
    display: none;
    margin: 0 auto 20px auto;
}

.formPanel {
    display: inline-block;
    padding: 0 0 35px 0;
    box-shadow: 5px 5px 10px #999;
    margin: 50px auto 70px auto;
    border-radius: 8px;
    border: 1px solid #888;
    background-color: white;
}

/*
 * form is used for all basic forms.
 * formLabelCol is used for the column of labels to the left of the form input controls.
 * formInputCol is used for the column of input controls to the right of the labels.
 */

.form {
    display: inline-block;
    margin: 0 auto;
    border: 0px solid green;
}

.formLabelCol {
    text-align: right;
    font-family: arial;
}

.formInputCol {
    font-family: arial;
    text-align:left;
}

/*
 * Form input styles */

.input {
    margin: 3px 0px;
    font-family: arial;
    font-weight: normal;
    border: 1px solid darkgray;
    border-radius: 3px;
    font-size: 20px;
    width: 100%;
    
    height: 45px;
}

.input[type=submit], .input[type=button] {
    margin: 5px 0px;
    font-family: arial;
    font-size: 20px;
    font-weight: normal;
    border: 1px solid gray;
    border-radius: 3px;
    width: 100%;
    color: white;
    background-color: #52a856;
    height: 45px;
}

.input[type=password] {
        margin: 3px 0px;
    width: 100%;
    font-size: 20px;
    height: 45px;
    border-radius: 3px;
}

.formTitle {
    display: block;
    margin: 0 0 10px 0;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
    line-height: 26px;
    font-family: arial;
    color: white;
    padding: 20px;
    background-color: #36773a;
    
    border-radius: 6px 6px 0 0;
    
}



 
.center {
    text-align: center;
}
.blueBack {
    background-color: #99f;
}

html {
    -webkit-text-size-adjust: 100%;
}
.login_box {
    float: right;
    height: 50px;
    line-height: 50px;
    display: inline-block;
    vertical-align: top;
    font-size: 0px;
    border: 0px solid red;
    width: 200px;
    text-align: right;
}

.login_image {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: auto;
    border: 0px solid orange;
}

.login_text {
    margin-right: 30px;
    border: 0px solid white;
    vertical-align: middle;
    font-size: 18px;
    line-height: 20px;
    font-family: arial;
    display: inline-block;
    color: white;
}


/* PayPal form styles */

.inputQuantity {
    width: 100px;
}

.labelText {
    display: inline-block;
    font-size: 24px;
    font-family: arial;
}

.rbText {
    font-size: 24px;
    display: inline-block;
}

.addr {
    margin: auto;
    display: inline-block;
    vertical-align: middle;
    border: 0px solid red;
}

.rbTable {
    margin: auto;
}

.rbTable td {
    padding: 10px;
}

.indent {
    text-indent: 30px;
}

.productCategory {
    display: inline-block;
    font-size: 24px;
}

.productName {
    font-size: 24px;
    display: inline-block;
}

.pageText {
    font-size: 20px;
    font-family: arial;
    padding: 0 20px 0 20px;
}

/*
 .padding1 {
 display: inline-block;
 width: 0px;
 }
 
 .padding2 {
 display: inline-block;
 width: 0px;
 }
 */

.textTitle {
    margin: 10px;
    text-align: center;
    font-family: arial;
    font-size: 22px;
    font-weight: bold;
    color: #444;
}

.rb {
    vertical-align: top;
    border: 1px solid green;
}



.col1 {
    text-align: right;
    vertical-align: top;
}

.col2 {
    text-align: left;
    vertical-align: bottom;
}

table,
tr,
td {
    border: 0px solid #999;
}

body {
    position: relative;
    margin: 0;
    background-color: black;
}

/*
 .buyBar1 {
 width: 100%;
 text-align: center;
 
 display: inline-block;
 border: 0px solid red;
 
 
 line-height: 0px;
 font-size: 0;
 
 }
 */

.buyBar {
    margin: auto;
    display: inline-block;
    border: 1px solid #ccc;
    padding: 0;
    border-radius: 10px;
    box-shadow: 5px 5px 10px #ccc;
    font-size: 0;
}

.formLeft {
    text-align: center;
    margin: 10px;
    font-family: arial;
    font-size: 18px;
    vertical-align: top;
    display: inline-block;
    border: 0px solid #aaa;
    border-radius: 10px;
    line-height: 18px;
    font-size: 16px;
    font-family: arial;
    border: 0px solid green;
}

.formRight {
    margin: 20px;
    vertical-align: middle;
    display: inline-block;
    border: 0px solid red;
    line-height: 18px;
    font-size: 16px;
    font-family: arial;
    border: 0px solid red;
}

.inputBox {
    vertical-align: top;
    border: 0px solid green;
}

.backpage {
    z-index: -1;
    display: inline-block;
    position: absolute;
    margin: auto;
    background-color: white;
    width: 800px;
    height: 500px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.page {
    font-family: arial;
    font-size: 16px;
    box-sizing: border-box;
    padding: 20px;
    margin: auto;
    max-width: 900px;
    min-height: 800px;
    background-color: white;
    border-left: 0px solid gray;
    border-right: 0px solid gray;
    color: #444;
}

.bannerCenter {
    margin: 0px;
    padding: 0px;
    border: 0px solid red;
    text-align: left;
    display: inline-block;
    margin: auto;
    
}

.logo {
    border: 0px solid white;
    padding: 0px;
    margin: 0px;
    vertical-align: middle;
    height: 80px;
    width: 80px;
}

.banner {
    margin: 0px;
    padding: 0px;
    text-align: center;
    background-color: rgb(1, 93, 167);
    background-color: rgb(132, 118, 64);
    background-color: rgb(30, 60, 100);
    background-color: rgb(50, 100, 0);
    background-color: #444;
    height: 100px;
    line-height: 100px;
    font-size: 0;
    border: 0px solid red;
    
}

.title {
    margin: 0 0 0 20px;
    vertical-align: middle;
    display: inline-block;
    font-family: arial;
    font-size: 50px;
    line-height: 46px;
    color: #fff;
    border: 0px solid white;
}

.bartext,
.bartext a {
    margin-left: 20px;
    display: inline-block;
    font-family: arial;
    font-size: 16px;
    line-height: 18px;
    color: #ddd;
}

.subtitle {
    margin: 0 0 0 20px;
    display: inline-block;
    font-family: arial;
    font-size: 30px;
    line-height: 30px;
    color: #7bf;
}

.bg_frame {
    z-index: -1;
    position: fixed;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: lightgray;
    text-align: center;
}

.bg_center {
    box-sizing: border-box;
    display: inline-block;
    width: 900px;
    height: 100%;
    background-color: white;
    border-left: 1px solid gray;
    border-right: 1px solid gray;
    box-shadow: 5px 0 10px gray;
}



@media screen and (max-width: 10000px) {
    
    .bannerCenter {
        margin: 0;
        min-width: 900px;
    }
    
    .input {
        font-size: 20px;
    }
    
    .rbTable td {
        padding: 1px;
    }
    
    .textTitle {
        margin: 10px 10px 25px 10px;
        text-align: left;
    }
    
    .productCategory {
        font-size: 18px;
    }
    
    .productName {
        font-size: 18px;
    }
    
    .pageText {
        font-size: 16px;
        box-sizing: border-box;
        padding: 0;
    }
    
    .labelText {
        font-size: 16px;
    }
    
    .rbText {
        font-size: 16px;
    }
    
    .logo {
        margin: 0px
    }
    
    .title {
        margin: 0 20px 0 5px;
        font-size: 46px;
    }
    
    .page {
        padding: 20px;
        margin: auto;
        min-height: 750px;
    }
    
    .subtitle {
        margin: 0 0 0 20px;
        display: inline-block;
    }

    .buyBar {
        margin: auto;
        display: inline-block;
        border: 0px solid #ccc;
        padding: 0px;
        border-radius: 10px;
        box-shadow: 0px 0px 0px #fff;
        font-size: 0;
    }
    
    .formRight {
        vertical-align: bottom;
        margin: 0 0 0 20px;
    }
    
    .formLeft {
        vertical-align: top;
    }
}

@media screen and (max-width: 900px) {
    
    
    
    .bannerCenter {
        margin: 0;
        min-width: 1px;
    }
    
    .backpage {
        width: 100%;
    }
    
    bg_center {
        width: 100%;
    }
    

    
    .textTitle {
        margin: 20px;
        
    }
    
    .title {
        
        font-size: 46px;
    }
    
    .pageText {
        font-size: 16px;
        
    }
    
    .labelText {
        font-size: 20px;
    }
    
    .rbText {
        font-size: 20px;
    }
    
    .productCategory {
        font-size: 24px;
    }
    
    .productName {
        font-size: 24px;
    }
    
    .input {
        font-size: 20px;
    }
    
    .rbTable td {
        padding: 6px;
    }
    
    .formRight {
        margin: 20px;
        
    }
}

@media screen and (max-width: 768px) {
    
    
    .banner {
        text-align: center;
    }
    
    .bannerCenter {
        margin: auto;
        min-width: 100px;
    }
    
    .logo {
        margin: 0px;
    }
    
    .title {
        margin: 0 20px 0 5px;
        font-size: 46px;
    }
    
    .subtitle {
        display: block;
        margin-left: 0;
    }
    
    .pageText {
        font-size: 20px;
        
    }
    
}

@media screen and (max-width: 600px) {
    .innerPage {
        padding: 10px 0px 20px 0;
    }
    /* Images should touch the edges for small screens */
    .imageLeft, .imageRight {
        float : none;
        width: 100%;
        margin: 0px 0px 0px 0px;
    }
    
    /* paragraph */

    
    /* Paragraph titles */
    .paraTitle {
        margin: 24px 20px 0 20px;
    }
    
    .form {
        display: inline-block;
        border: 0px solid red;
        padding: 0;
        margin: 0;
        width: 100%;
    }
    
    .formPanel {
        display: inline-block;
        padding: 0 0 15px 0;
        box-shadow: 0px 0px 0px #ccc;
        margin: 0px 0 0px 0;
        border-radius: 0px;
        border: 0px solid orange;
        background-color: white;
        width: 100%;
    }
    .formTitle {
        margin: 0px 0 0px 0;
        color: black;
        background-color: white;
    }
    .inputInnerBox {
        padding: 0;
        border: 0px solid green;
        width: 90%;
        display: inline-block;
        margin: 0;
        text-align: left;
    }
    
    
    
    .banner {
        text-align: center;
    }
    
    .textTitle {
        font-size: 20px;
        margin: 20px;
        text-align: center;
    }
    
    .bannerCenter {
        margin: auto;
        min-width: 100px;
    }
    
    .logo {
        margin: 0px;
    }
    
    .title {
        margin: 0 20px 0 5px;
        font-size: 46px;
    }
    
    .page {
        padding: 0px;
        margin: 0px;
    }
    
    .pageText {
        font-size: 20px;
        box-sizing: border-box;
        padding: 0 20px;
    }
    
    .labelText {
        font-size: 20px;
    }
    
    .rbText {
        font-size: 20px;
    }
    
    .subtitle {
        display: block;
        margin-left: 0;
    }
    

    
    .buyBar {
        margin: auto;
        display: inline-block;
        border: 0px solid #ccc;
        padding: 0px;
        border-radius: 10px;
        box-shadow: 0px 0px 0px #fff;
        font-size: 0;
    }
    
    .productCategory {
        font-size: 24px;
    }
    
    .productName {
        font-size: 24px;
    }
    
    .input {
        font-size: 20px;
    }
    
    .rbTable td {
        padding: 6px;
    }
    
    .formRight {
        margin: 20px;
        vertical-align: none;
    }
    
    .formLeft {
        vertical-align: none;
    }
    
}

@media screen and (max-width: 400px) {
    
}

body {
    margin: 0;
    /*
     text-align: center;
     */
    background-color: #ddd;
}

.pagination_box {
    user-select: none;
    margin: 0;
    border: 0px solid green;
    display: block;
    text-align: center;
    width: 100%;
}


.content {
    min-height: 400px;
    display: inline-block;
    text-align: left;
    width: 100%;
    background-color: white;
}
/*
 .page {
 padding: 40px;
 text-align: left;
 margin: auto;
 max-width: 800px;
 background-color: white;
 min-height: 800px;
 }
 */
.image_box {
    width: 100%;
    display: inline-block;
    text-align: center;
}

.image {
    height: auto;
    width: 60%;
    margin: auto;
}

.image_wide {
    height: auto;
    width: 90%;
    margin: auto;
}

.pagination {
    user-select: none;
    border: 0px solid red;
    display: block;
    text-align: center;
    margin: auto;
}

.pagination a {
    color: black;
    
    padding: 6px 8px;
    text-decoration: none;

    border-radius: 5px;
    margin: 0 auto;
}

.pagination a.active {
    background-color: #4CAF50;
    color: white;
    border-radius: 5px;
}

.pagination a:hover:not(.active) {
    background-color: #ccc;
}