/**
 * @package XpertScroller
 * @version 2.1
 * @author ThemeXpert http://www.themexpert.com
 * @copyright Copyright (C) 2009 - 2011 ThemeXpert
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 only
 *
 */
/*
    root element for the scrollable.
    when scrolling occurs this element stays still.
*/
.scroller {
    /* required settings */
    position:relative;
    overflow:hidden;
    /* custom decorations */
}

.scroller .items {
    /* this cannot be too large */
    position:absolute;
    clear:both;
    width: 100%;
}

.item:hover{}
.padding{padding: 10px;}
.scroller .item{padding:0}
.item h4{font-size: 15px; margin: 5px 0;}
.item h4 a{text-decoration: none;}

.xs_intro{font-size: 12px;}

/* single scrollable item */
.scroller img {
    background: #ffffff;
    border: 1px solid #ccc;
    padding:2px;
}
/*Image postion left*/
img.left{float: left; margin-right: 15px;}
/*Image postion right*/
img.right{float: right; margin-left: 15px;}

/* active item */
.scroller .active {
    border:2px solid #000;
    position:relative;
    cursor:default;
}
/*Navigation Button common class*/
a.browse {
    display:block;
    width:30px;
    height:30px;
    float:left;
    cursor:pointer;
    font-size:1px;
}

/************** Basic Horizontal Style **********
***************************************************/
.basic_h .items .pane {float:left;}
.basic_h .pane .item{float: left;}
.basic_h .scroller .item img{background: none;padding: 0;border: none}
/* Navigation Button */
.basic_h .browse{
    position: absolute;
    top:35%;
    z-index: 9999;
    background: url(../images/scroller_arrow.png) no-repeat;
    width: 51px;
    height: 50px;
    visibility: hidden;
}
.basic_h:hover .browse {visibility: visible;}
.basic_h a.prev{left:20px;}
    .basic_h a.next{right:20px; background-position: 0 -51px !important;}
    .basic_h a.prev:hover{background-position: -51px 0 !important;}
    .basic_h a.prev:active{background-position: -102px 0 !important;}
    .basic_h a.next:hover{background-position: -51px -51px !important;}
    .basic_h a.next:active{background-position: -102px -51px !important;}

/* this makes it possible to add next button beside scrollable */
.basic_h .scroller {float:left;margin-bottom: 15px;}

/* right */
.basic_h a.next            { background-position: 0 -30px; clear:right; margin-right: 0px;}
.basic_h a.next:hover      { background-position:-30px -30px; }
.basic_h a.next:active     { background-position:-60px -30px; } 

/* left */
.basic_h a.prev            { margin-left: 0px; } 
.basic_h a.prev:hover      { background-position:-30px 0; }
.basic_h a.prev:active     { background-position:-60px 0; }

/********* Basic Vertical Style *************
********************************************/
/* prev, next, prevPage and nextPage buttons */
.basic_v a.browse{margin: 5px auto;}
.basic_v .scroller{margin: 0 auto;}

/* up and down */
.basic_v a.next, .basic_v a.prev        { 
    background:url(../img/vert_large.png) no-repeat; 
    float: none;
}

/* up */
.basic_v a.prev:hover      { background-position:-30px 0; }
.basic_v a.prev:active     { background-position:-60px 0; }

/* down */
.basic_v a.next            { background-position: 0 -30px; }
.basic_v a.next:hover      { background-position:-30px -30px; }
.basic_v a.next:active     { background-position:-60px -30px; } 


/* disabled navigational button */
a.disabled                 {/*visibility:hidden !important;*/}     

/* position and dimensions of the navigator */
.basic_h .navi{
    padding: 10px 0 0 0;text-align: center;margin: 0; position: absolute;left: 50px;bottom: 20%;
    width:200px; height:20px;z-index: 10;
}
/* items inside navigator */
.navi a { float:left; margin:3px; background:url(../img/navigator.png) 0 0 no-repeat; display:block; font-size:1px;cursor: pointer;}
.basic_h .navi a{
    width: 15px;
    height: 15px;
    display:inline-block;
    margin-right: 5px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px;
}
/* mouseover state */
.navi a:hover {background-position:0 -8px;}
.basic_h .navi a:hover{background:#ffdd47 !important;}
/* active state (current page state) */
.navi a.active {background-position:0 -16px;}
.basic_h .navi a.active{background:#ffdd47 !important;box-shadow: 1px 1px 1px rgba(39,39,39,0.5);-moz-box-shadow: 1px 1px 1px rgba(39,39,39,0.5);-webkit-box-shadow: 1px 1px 1px rgba(39,39,39,0.5);}

/***** Zebra List Styling ***/
.zebra-list .item:nth-child(2n+1){background: #f5f5f5;border: 1px solid #ddd}
.zebra-list .item img{float:left;margin-right: 15px;}
.zebra-list a.browse{display: none}
.zebra-list .navi{position: absolute; top:10px;right: 10px;margin: 0;width:auto}
.zebra-list .navi a{
    height: 8px;
    width: 8px;
    background: #f5f5f5;
    -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.25),0 1px 1px rgba(255,255,255,.5);
    -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.25),0 1px 1px rgba(255,255,255,.5);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.25),0 1px 1px rgba(255,255,255,.5);
    -moz-border-radius:20px;
    -webkit-border-radius:20x;
    border-radius:20px;
}
.zebra-list .navi a.active{background: #ddd}