/* 
    Created on : Mar 2, 2018, 7:30:18 AM
    Author     : johnbc
*/

body {margin:0;}

/* navigation bar begin */
ul.nav {
    
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #008000;
    position: fixed;
    top: 0;
    width: 100%;    
}

li.nav {
    float: left;
    border-right:1px solid #bbb;
}

li.nav:last-child {
    border-right: none;
}

li.nav a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li.nav a:hover {
    background-color: #7CFC00;
}

.active {
    background-color: #4CAF50;
}

/* navigation bar end */


*{ box-sizing:border-box; }
    .product{
        float: left;
        width:40%;
        border:solid black 1px;
        border-radius: 0px 15px 15px 15px;
        margin-left:5%;
        margin-top: 5%;
    }
    .product ul{
        list-style-type:none;
        float:right;
        border:solid green 1px;
        width:70%;
    }
    .product img {
        float:left;
        height: 50px;
        width: 50px;
        border:solid red 1px;
    }
    .product img.ico {
        float:left;
        height: 15px;
        width:15px;
    }
    .product div p{
        border:solid blue 1px;
    }
    .clear{
        clear:both;
    }
    .red {
        color:red;
    }
   
    .horiRule{
        /*
        float: left;
        width:90%;
        */
        /*
        margin-left:5%;
        margin-top: 5%;
        */
    } 
    
    
 .footer {
    background-color: #008000;
    overflow: hidden;
    position: fixed;
    bottom: 0;
    width: 100%;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    
}

form.quantitySpinner {
    clear:right;
    clear:left;
    float:left;
}

input[type=number]{
    width: 40px;
}