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

body {
    margin: 5px;
    /* allow room for nav strip at top 
    margin-top: 55; 
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
    */
}

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

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: #00FFFF;
}

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

/* navigation bar end */


/* begin login page css */
input[type=text], input[type=password] {
    width: 200px;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 140px;
    background-color: #6495ED;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #00FFFF;
}

/* end login page css */



*{ 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%;
        background-color: #FFFAF0;
    }
    .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;
}

table.shoppingCartTable th, td {
    border: 1px solid #ddd;
    padding: 8px;    
    padding-left: 20px;
    padding-right: 20px;
    
}

table.shoppingCartTable tr:hover {
    
    background-color: #ddd;
    
}

table.shoppingCartTable tr:nth-child(even){
    /*
    background-color: #f2f2f2;
    */
}

table.shoppingCartTable th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4682B4;
    color: white;
}