/* // search bar // */

@media screen and (min-width: 320px) and (max-width: 767px) {
    
    #indexSearchContainer {
        width: 100%;
        margin: 30px 0 300px 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .indexSearchTitle {
        color: #888;
        font-size: 22px;
    } 
    .indexPageSearch { /* form */
        position: relative;
        z-index: 6;
        width: 300px;
        margin: 20px 0 0 0;
        padding: 0 10px 0 10px;
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px)  {
    
    #indexSearchContainer {
        display: flex;
        width: 100%;
        margin: 80px 0 300px 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }   
    .indexSearchTitle {
        color: #888;
        font-size: 30px;
    }      
    .indexPageSearch { /* form */
        position: relative;
        z-index: 6;        
        width: 500px;
        margin: 20px 0 0 0;
        padding: 0;
    }
}
@media screen and (min-width: 1025px) {
    
    #indexSearchContainer {
        display: flex;
        width: 100%;
        margin: 80px 0 300px 0;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }   
    .indexSearchTitle {
        color: #888;
        font-size: 36px;
    }      
    .indexPageSearch { /* form */
        position: relative;
        z-index: 6;        
        width: 500px;
        margin: 20px 0 0 0;
        padding: 0;
    }
}

/* //// Drop down Indexed Search Bar //// */

#indexAddonHolder {
    margin-top: 0;
    padding: 0;
    border-radius: 12px;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b; 
}
#indexSearchInput {
    display: block;
    resize: none;
    height: 46px;
    width: 100%;
    padding: 10px 10px 10px 10px;
    color: #999;
    font-size: 16px;
    line-height: 1.4;
    vertical-align: middle;
    transition: all 0.3s linear;
}
#indexSearchInput:hover {
    cursor: text;
}
#indexSearchAddon {
    height: 46px;    
    margin: 0;    
    padding: 2px 6px 0 10px;
    color: #999;
    transition: all 0.3s linear;
}
#indexviewBox {
    margin-top: 0;
    margin-right: 0;
}

@media screen and (min-width: 320px) and (max-width: 1024px) {

    #indexSearchInput {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
        border-top: 2px solid #222;
        border-left: 2px solid #222;
        border-bottom: 2px solid #222;
        border-right: none;
        background-color: #0d0d0d;
    }
    #indexSearchAddon {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        border-top: 2px solid #222;
        border-right: 2px solid #222;
        border-bottom: 2px solid #222;
        border-left: none;
        background-color: #0d0d0d;
    }
    #indexviewBox {
        stroke: #222222;
    }
    .indexBottomSpacer { 
        height: 200px;
    }
}
@media screen and (min-width: 1025px) {

    #indexSearchInput {
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
        border-top: 2px solid #333;
        border-left: 2px solid #333;
        border-bottom: 2px solid #333;
        border-right: none;
        background-color: #111;
    }
    #indexSearchAddon {
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
        border-top: 2px solid #333;
        border-right: 2px solid #333;
        border-bottom: 2px solid #333;
        border-left: none;
        background-color: #111;
    }
    #indexviewBox {
        stroke: #333333;
    }
    .indexBottomSpacer {
        height: 600px;
    }
}
.indexDisplayHolder {
    height: 0;
    width: 100%;
    margin: 3px 0 0 0;
    padding: 0;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;    
}
#indexDisplay {
    position: relative;
    height: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    z-index: 10000;
    box-shadow: 5px 5px 10px #000000, 
                -1px -1px 10px #1b1b1b;    
}