/*
 * NOTES:       Color Pallette
 *              NAME        HEX     R   G   B
 *              olive       3B3013  59  48  19
 *              tan         8F6031  143 96  49
 *              mustard     E88833  232 136 51
 *              blood       9C0C0A  156 12  10
 *              eggshell    FDF3C1  253 243 193
 *              greycard1   0A0A0A  10  10  10
 *              greycard2   1E1E1E  30  30  30
 *              greycard3   323232  50  50  50
 *              greycard4   464646  70  70  70
 *              greycard5   595959  89  89  89
 *     
 *
 */
 #carouselContainer {
    position: relative;
    width: 100%;
    height: 100px;
    /*background-color: #000000;*/
}
#carouselOuter {
    position: relative;
    /*background-color: #000000;*/
    width: 662px; /* width of the carousel with the arrows */
    left: 50%; 
    margin-left: -331px;
}
   
#carouselInner {
    float: left;
    width: 490px; /* this is the width of the visible carousel */
    overflow: hidden; /* anything outside of the carousel's limits will be hidden */
    position: relative; /* to fix bug in EI where overflow:hidden doesn't work */
    /*background: #000000;*/
}

.carouselUL {
    position: relative;
    list-style-type: none;
     /* left: -340px;allows "off-screen" area of carousel to have images loaded before animation */
    margin: 0px;
    padding: 0px;
    width: 8500px; 
    padding-bottom: 0px;
}

.carouselUL li{
    float: left; /* important for inline positioning of the list items */
    width: 70px; /* width of the thumbnails */
    padding: 0px;
    height: 95px;
    /*background: #000000;*/
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 5px;
    margin-right: 5px;
    text-align: center;
}

.carouselUL li img {
    cursor: pointer;
    border: 0px;
    vertical-align: middle;
}

#scrollLeft, #scrollRight {
    float: left;
    height: 95px;
    width: 60px;
    /*background: #C0C0C0;*/
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
}
#scrollLeft img {
    padding-top: 10px;
    padding-left: 25px;
    padding-right: 25px;
}

#scrollRight img {
    padding-top: 10px;
    padding-left: 25px;
    padding-right: 25px;
}

#carouselShade {
    display: none;
    background: #323232;
    position: fixed; 
    left: 0; 
    top: 0;
    width: 100%; 
    height: 100%;
    z-index: 100;
}
.photoModal {
    display: none;
    background: #FFFFFF;
    color: #000000;
    border: 20px solid #FFFFFF;
    float: left;
    font-size: 1.2em;
    position: fixed;
    width: auto;
    height: auto;
    top: 50%;
    left: 50%;
    z-index: 200;
}

img.closeX {
    float: right;
    margin: 0px;
    border: none;
}