/**
 * Extended stylesheet for VelopA CityStyle webshop
 */

/* products overview and productfinder */
.menu-products { margin: 0 1em 0 260px; text-align: justify; }

#productfinder { margin: 0 1em 0 0; }
    #productfinder #resultsinfo { font-weight: bold; color: #68659a; }

.products { }
    .products .product, #productfinder .product { float: left; width: 85px; margin: 1em 1em 0 0; }
        .products .product .imgbox, #productfinder .product .imgbox { float: none !important; margin: 0; }
        .products .product p, #productfinder .product p { border: 1px solid #fcb64a; border-width: 1px 0; text-align: center; margin: 0; padding: 0; }
            .products .product p a, #productfinder .product p a { display: block; font-weight: bold; color: #68659a; text-decoration: none; }
                .products .product p a:hover, #productfinder .product p a:hover { color: #cd8c4d; }

#assemblyvisuals { margin-left: 145px; }
#pagevisual img { margin-bottom: 1em; }
.productvisual { float: left; width: 70px; line-height: 1em; }

.adobe-reader { display: block; width: 88px; height: 31px; background: transparent url(/images/adobereader.gif) no-repeat left top; }
    .adobe-reader span { visibility: hidden; }
    .adobe-reader:hover { text-decoration: none; }

/* linkbox (next to pagevisual) */
.linkbox-tabs { position: absolute; left: 0; top: 0px; margin: 0; padding: 0; list-style-type: none; width: 125px; background-color: #fdedcc; }
    .linkbox-tabs li { }
        .linkbox-tabs li a { display: block; padding: .2em 0 .5em 20px; line-height: 1.4em; font-size: .9em; color: #68659a; background: url(/images/omniplay/sun.gif) 5px 50% no-repeat; }
            .linkbox-tabs li:hover, .linkbox-tabs li.active { background-color: #fffae7; }
                .linkbox-tabs li:hover a, .linkbox-tabs li.active a { background-image: url(/images/omniplay/sun_over.gif); }
            .linkbox-tabs a:hover { color: #fcb64a; text-decoration: none; }

.orderbutton { clear: both; margin-top: 2em; text-align: right; }

/* articlefinder */
#articlefinder { margin-top: 1em; }
    #articlefinder p { margin-bottom: .5em; }
    #articlefinder label { float: left; width: 75px; }
    #articlefinder select { width: 248px; }
        #articlefinder .articlefinder-submit { position: relative; padding: 0; }
            #articlefinder .articlefinder-submit .button { position: absolute; top: 0; }
            #articlefinder .articlefinder-submit input { left: 75px; }
            #articlefinder .articlefinder-submit a.button { left: 175px; }

    #articlefinder-results { clear: both; margin-top: 4em; width: 100%; }
        #articlefinder-results th, #articlefinder-results td { padding-left: 0; }
        #articlefinder-results .button { float: right; padding-left: 30px; padding-right: 30px; }
        #articlefinder-results .order-row td { padding-bottom: 2em; }

/* form for ordering article */
#articleform { float: left; width: 100%; }
    .articleheader { margin: 1em 0 0 0; padding: 0; color: #68659a; }
    .articlebody p { margin-top: 0; }
    #articleform dt.quantity { width: 50%; }
    #articleform dd.quantity { width: 45%; }

/* cart view */
#cart { margin-left: 0px; }
    #cart p { margin: 0 0 .1em 0; }
    .articles { margin-top: 2em; line-height: 1.1em; }
    .articles th, .articles td { vertical-align: top; padding: .2em 1em; }
        .articles th img { margin-top: .4em; }
    .articles tbody th, .articles tbody td { padding-bottom: 1em; }
    .articles tbody th { text-align: right; padding-right: 1em; }
    .articles tbody th.deliverydate { font-weight: normal; }
    .articles .cart-amount tr th, .articles .cart-amount tr td { border-top: 1px solid #6865a8; }
        .articles .cart-amount .no-border th, .articles .cart-amount .no-border td { border: 0; }
    .articles .cart-amount { border: 1px solid #6865a8; border-width: 1px 0; }
    .articles .total-amount td { font-weight: bold; }
    .articles .article-title { margin: 0; padding: 0; font-weight: bold; }
    .articles .color-row th, .articles .color-row td { padding-bottom: 2em; }
    .cartview-options { margin-top: 1em; padding: .5em 0 1em 0; list-style-type: none; position: relative; }
        .cartview-options .button { margin: 0 1em 0 0 !important; vertical-align: middle; }
        .cartview-options .proceed { position: absolute; top: .5em; right: 0; }

    .colorscheme { margin-left: 1em; padding-left: 10px; font-weight: bold; color: #68659a; background: url(/images/omniplay/sun_over.gif) left center no-repeat; }
        .colorscheme:hover { background-image: url(/images/omniplay/sun.gif); }

    .price-column { text-align: right; white-space: nowrap; }

/* relations */
#relations { margin-left: 145px; }
    #relations h3 { color: black; }

ul.relations { list-style: none; margin: 1em 0; padding: 0; }
    ul.relations li { }
        ul.relations li a { padding-left: 15px; color: #68659a; font-weight: bold; background: transparent url(/images/omniplay/sun_over.gif) no-repeat left center; }
            ul.relations li a:hover { color: #fcb64a; background-image: url(/images/omniplay/sun.gif); }

/* checkout */
#checkout, #account { padding-top: 1em; margin-left: 0px; }
    #checkout p { margin-top: 0; margin-bottom: 0; }
    #checkout .formaction { margin-bottom: 1em; }
    .shopform { float: left; margin: 1em 0; width: 60%; }
        .shopform div { clear: both; margin-bottom: .4em; text-align: left; }
        .shopform label { font-weight: bold; float: left; width: 30%; text-align: left; }
        .shopform input, .shopform select { margin-left: 2.5em; width: 60%; }
        html>body .shopform input, html>body .shopform select { margin-left: 2em; }
            .shopform input.radio, .shopform input.checkbox { width: auto; }
        .shopform .input-submit { margin-right: 10px; padding-top: .5em; text-align: right; }
        .shopform .submit { float: none; margin-right: 0; }
        .shopform .group { float: right; clear: none; width: 60%; margin-bottom: .7em; }
            .shopform .group label { font-weight: normal; width: auto; float: none; margin-left: 0 !important; }
            .shopform .group div { margin-bottom: .2em; text-align: left; }
            .shopform .group p { padding-top: .1em; }
        .shopform .static { padding-bottom: 0 !important; }
            .shopform .static p { float: left; width: 30%; text-align: left; }
            .shopform .static div { float: right; clear: none; width: 60%; margin-bottom: 0em; text-align: left;  }
            .shopform .static label { cursor: text; margin-bottom: 0 !important; min-height: 1em;  }
        .shopform .html { text-align: left; }

        #account form { width: auto; margin-right: 74px; }
            #account h3 { clear: both; margin: 0; }
                #account h3.billing { margin: 3em 0 0 0; padding: 5px 0 0 0; border-top: 1px solid #fcb64a; }
            #account p { margin: 0 0 0 20px; }
            #account form label { width: 20%; text-align: left; margin: 0 3em 5px 0; padding: 0; }
            #account form div { text-align: left; margin: 0; padding: 0; }
            #account form input, #account form select, #account form .static div { float: left; width: 30%; }
            #account form .group { float: left; width: 30%; }
            #account form .input-submit { margin-top: 3em; padding-top: .5em; border-top: 1px solid #fbc773; }
                #account form .input-submit .button { float: right; margin-right: 30px; }
            #account form .anchor-button { color: #6865a8; font-weight: bold; text-align: left; width: auto; margin: .5em 0 .5em 0; padding-left: 15px; border: 0; background: transparent url(/images/omniplay/sun_over.gif) no-repeat left center; }
                #account form .anchor-button:hover { cursor: pointer; color: #fcb64a; background-image: url(/images/omniplay/sun.gif); }

    #accountconfirm, #address_edit { width: 100% !important; }

    .confirm-checkout { }
        .confirm-checkout form { width: auto; padding-top: 1em; }
            .confirm-checkout form label { width: 10%; text-align: right; margin-right: 2em; }
            .confirm-checkout form div { text-align: left; }
            .confirm-checkout form input, .confirm-checkout form .static div { float: left; width: 30%; }
            .confirm-checkout form div textarea { width: 50%; }
            .confirm-checkout form .group { float: left; width: 80%; }
            .confirm-checkout form .input-submit { border-top: 1px solid #fcb64a; }

    .checkout-options { clear: both; margin: 3em 0; padding: .5em 0 0 0; border-top: 1px solid #fcb64a; text-align: right; }

        .forgot-pass form { width: 100%; }
        .forgot-pass form div { width: 60%; float: left; }
        .forgot-pass form .input-submit { width: 30%; clear: none; margin-left: 1em; padding: 1px 0 0 0; text-align: left; }
        .forgot-pass form p { clear: both; }

.formaction { clear: both; margin-bottom: 1em; border-bottom: 1px solid #fcb64a; }
    .formaction a { padding-left: 15px; font-weight: bold; color: #68659a; background: url(/images/omniplay/sun.gif) left center no-repeat; }
        .formaction a:hover { background-image: url(/images/omniplay/sun_over.gif); }

#error { margin-left: 125px; }

/* myvelopa */
#myvelopa { margin-left: 260px; }
    #myvelopa .shopform { margin: 1em 0; width: 80%; }
    #myvelopa .formaction { border-bottom: 0; }
        #myvelopa .formaction input { font-weight: bold; color: white; width: auto; padding-left: 10px; border: 0; background: url(/images/omniplay/sun.gif) left center no-repeat; }
            #myvelopa .formaction input:hover { cursor: pointer; color: #9f1d38; background-image: url(/images/omniplay/sun_over.gif); }

#myvelopa_orderview { margin-left: 0; }
    .order-items { width: 89%; margin-top: 1em; line-height: 1.1em; border-width: 1px 0; border-style: solid; border-color: #b1a8d3; }
    .order-items th, .order-items td { vertical-align: top; padding: .2em 1em .2em 0; }
        .order-items th img { margin-top: .4em; }
    .order-items tbody th, .order-items tbody td { padding-bottom: .5em; }
    .order-items tbody th { text-align: left; padding-right: 1em; }
    .order-items .article-title { margin: 0; padding: 0; font-weight: bold; }
    .order-items .orderline th, .order-items .orderline td { border-top: 1px solid #fffae7; padding-top: 1em; }
    .order-items tfoot tr:first-child th, .order-items tfoot tr:first-child td { border-top: 1px solid #fffae7; padding-top: 1em; }
    .contactinfo { margin: 1em 0 0 0; padding: 0; list-style-type: none; }

/* progress-bar */
#progress-bar { position: absolute; top: 160px; right: 0; width: 631px; }
    #progress-bar ol { float: right; margin: 0; padding: 0; list-style-type: none; }
        #progress-bar ol li { float: left; margin: 0; padding: 35px 0 0 0; width: 60px; text-align: center; }
            #progress-bar ol li.step { color: #68659a; font-weight: bold; background: transparent no-repeat center top; }
                #progress-bar ol li.selected { color: #cd8c4d; }
            #progress-bar ol li#step-1 { background-image: url(/images/omniplay/order010.gif); }
                #progress-bar ol li#step-1.selected { background-image: url(/images/omniplay/order011.gif); }
            #progress-bar ol li#step-2 { background-image: url(/images/omniplay/order020.gif); }
                #progress-bar ol li#step-2.selected { background-image: url(/images/omniplay/order021.gif); }
            #progress-bar ol li#step-3 { background-image: url(/images/omniplay/order030.gif); }
                #progress-bar ol li#step-3.selected { background-image: url(/images/omniplay/order031.gif); }
            #progress-bar ol li#step-4 { background-image: url(/images/omniplay/order040.gif); }
                #progress-bar ol li#step-4.selected { background-image: url(/images/omniplay/order041.gif); }