/*CSS for phone book*/ 
#container {
    position: relative;
    width: auto;
    height: auto;
}

.searchbar {
    float: left;
    width: 360px;
    position: fixed;
    top: 300px;
    background-color: #0C234B;
    padding-bottom: 100px;       
    }

    .highlight{
        color: royalblue;

    }
     .results {
        float: left ;
         width: 900px ;
         position:relative;
         top:0px;
         margin-left:360px;
    }     
            .resultsShop {
        float: right ;
         width: 100px;
         position:fixed;
         top: auto;
         margin-left:990px;
         white-space: nowrap;
    }

     #byName {
        padding: 10px;
        color: white;
    }
     #byShop {
        padding: 10px;
        color: white;
    }
     #byPhone {
        padding: 10px;
        color: white;
    }
     #card {
        position: relative;
        padding: 20px;
        margin-left: 80px;
        margin-bottom: 20px;
        width: 550px;
        border: 20px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
        top: 25px;
    }

    #card5 {
        position: absolute;
        top: 0px;
        left: 580px;
        right: 0;
        padding: 20px;
        width: 240px;
        height: 300px;
        border: 5px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    #card4 {
        position: relative;
        padding: 20px;
        margin-left: 10px;
        margin-bottom: 20px;
        width: 550px;
        border: 20px;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
        0 6px 20px 0 rgba(0, 0, 0, 0.19);
        top: auto;
        white-space: nowrap;
    }
    #listOfEmpsFromAShop {
        margin-left: 60px;
        margin-top: -10px;
        position: absolute;
        width: 650px;
    }
    
    @media only screen and (max-device-width:480px) {
        .searchbar {
            float: left;
            width: 360px;
            position: relative;
            top: 10px;
            background-color: #0C234B;
         padding-bottom: 10px;     
    }
         .results {
        float: left ;
         width: 640px ;
         position:relative;
         top: 10px;
         margin-left:10px;
    } 
            .resultsShop {
        float: right ;
         width: 100px;
         position:absolute;
         top: auto;
         margin-left:990px;
         white-space: nowrap;
    }
            #card {
                position: relative;
                padding: 20px;
                margin-left: 10px;
                margin-bottom: 20px;
                width: 500px;
                border: 10px;
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
                top: 10px;
            }
            #card4 {
                position: relative;
                padding: 20px;
                margin-left: 10px;
                margin-bottom: 20px;
                width: 500px;
                border: 20px;
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
                top: auto;
                white-space: nowrap;
            }
            #card5 {
                position: absolute;
                top: 0px;
                left: 580px;
                right: 0;
                padding: 20px;
                width: 240px;
                height: 300px;
                border: 5px;
                box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2),
                0 6px 20px 0 rgba(0, 0, 0, 0.19);
            }
            #listOfEmpsFromAShop {
                margin-left: 10px;
                margin-top: -10px;
                position: absolute;
                width: 600px;
            }

        }