/*Horizontal Orientation CSS*/

.jscarousal-horizontal {
    width: 740px;
    height: 118px;
    background-color: #121212;
    border: solid 1px #7A7677;
    margin: 0;
    padding: 0;
    padding: 22px 8px 22px 8px;
    position: relative; /*overflow: hidden;*/
}

.jscarousal-horizontal-back, .jscarousal-horizontal-forward {
    float: left;
    width: 23px;
    height: 98px;
    background-color: #121212;
    color: White;
    position: relative;
    top: 6px;
    cursor: pointer;
}

.jscarousal-horizontal-back {
    background-image: url(left_arrow.jpg);
    background-repeat: no-repeat;
    background-position: left;
}

.jscarousal-horizontal-forward {
    background-image: url(right_arrow.jpg);
    background-repeat: no-repeat;
    background-position: right;
}

.jscarousal-contents-horizontal {
    width: 690px;
    height: 124px;
    float: left;
    position: relative;
    overflow: hidden;
}

    .jscarousal-contents-horizontal > div {
        position: absolute;
        width: 100%;
        height: 124px;
    }

        .jscarousal-contents-horizontal > div > div {
            float: left;
            margin-left: 8px;
            margin-right: 8px;
        }

    .jscarousal-contents-horizontal img {
        width: 120px;
        height: 94px;
        border: solid 1px #7A7677;
    }

/*Horizontal Orientation CSS Ends*/



/*Vertical Orientation CSS Starts*/

.jscarousal-vertical {
    width: /*140px;*/ 193px;
    height: /*460px;*/ 310px;
    /*background-color: #121212;*/
    /*border: solid 1px #7A7677;*/
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;

    left: 1255px;
    top: 122px;
}

.jscarousal-vertical-back, .jscarousal-vertical-forward {
    width: 100%;
    height: /*30px;*/ 0px;
    background-color: #121212;
    color: White;
    position: relative;
    cursor: pointer;
    z-index: 100;
}

.jscarousal-vertical-back {
    /*background-image: url(top_arrow.jpg);*/
    background-repeat: no-repeat;
    background-position: bottom;
}

.jscarousal-vertical-forward {
    /*background-image: url(bottom_arrow.jpg);*/
    background-repeat: no-repeat;
    background-position: top;
}

.jscarousal-contents-vertical {
    overflow: hidden;
    width: 162px;
    height: /*410px;*/ 240px;
}

    .jscarousal-contents-vertical > div {
        position: absolute !important;
        top: 20px;
        width: 100%;
        height: /*820px;*/ 310px;
        overflow: hidden;

            z-index: 100;
    }

        .jscarousal-contents-vertical > div > div {
            width: /*140px;*/ 191px;
            height: 110px;
            margin: 8px;
            margin-left: 0px !important;
            margin-top:0px;
        }

            .jscarousal-contents-vertical > div > div span {
                display: /*block;*/ none;
                width: 70%;
                text-align: center;
            }

    .jscarousal-contents-vertical img {
        width: 110px;
        height: 80px;
        border: solid 0px #7A7677;

        margin-left:34px;
    }

/*Vertical Orientation CSS Ends*/



/*Common*/

.hidden {
    display: none;
}

.visible {
    display: block;
}

.thumbnail-active {
    filter: alpha(opacity=100);
    opacity: 1.0;
    cursor: pointer;
}

.thumbnail-inactive {
    filter: alpha(opacity=20);
    opacity: 0.2;
    cursor: pointer;
}

.thumbnail-text {
    color: #7A7677;
    font-weight: bold;
    text-align: left;
    display: block;
    padding: 10px 2px 2px 0px;
}