@import "compass";
@import "compass/reset";

// Fixes image path for icons from sass-bootstrap
$iconSpritePath: generated-image-url("glyphicons-halflings.png");
$iconWhiteSpritePath: generated-image-url("glyphicons-halflings-white.png");

@import "bootstrap";
@import "bootstrap-responsive";

body {

    #header {
    }

    #customer {
        ul {
            @include inline-block-list;

            li {
                padding-right: 10px;
                padding-top: 10px;
                text-align: center;
                width: 79px;

                &:hover {
                    background-color: #dddddd;
                    cursor: pointer;
                }
                &.marked {
                    color: #468847;
                    background-color: #DFF0D8;
                }
                .name {
                    font-weight: bold;
                }
            }
        }
    }

    #register {
        #products {
            ul {
                @include inline-block-list;
                
                li {
                    padding-top: 10px;
                    padding-left: 20px;
                    padding-right: 20px;
                    text-align: center;

                    &:hover {
                        background-color: #dddddd;
                        cursor: pointer;
                    }
                    &.marked {
                        color: #468847;
                        background-color: #DFF0D8;
                    }
                    .qty {
                        font-size: 1.7em;
                        font-weight: bold;
                    }
                    .name {
                        font-weight: bold;
                    }
                }
            }
        }
        
        #total {
            div {
                color: #ffffff;
                background-color: #222;
                padding: 10px;
                min-width:115px;
                h2 {
                    color: #ffffff;
                }
            }
        }
        h2 {
            display: inline-block;
        }
        input[name=customer_name] {
            display: block;
        }
        button {
            margin-top:10px;
        }
    }
    #log {
        h2 {
            display:inline-block;
        }
        table {
            tr{
                text-align: middle;
            }
            .amount {
                font-size: 2em;
                font-weight: bold;
            }
        }
    }
    section {
        margin-bottom:2em;
    }
}