/**
 * @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 */
    border:0px solid #000;
    background: #fff;
}

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

.item:hover{background: #fff;}
.padding{padding-top: 5px;}
.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-color:#fff;
    padding:2px;
    border:1px solid #ccc;
}
/*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;
}
/*Basic Horizontal Style*/
.basic_h .items .pane {float:left;}
.basic_h .pane .item{float: left;}

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

/* 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*/
   

/* position and dimensions of the navigator */
.navi { margin-left:328px; width:200px; height:20px; }
/* items inside navigator */
.navi a { width:8px; height:8px; float:left; margin:3px; background:url(../img/navigator.png) 0 0 no-repeat; display:block; font-size:1px;}
/* mouseover state */
.navi a:hover {background-position:0 -8px;}
/* active state (current page state) */
.navi a.active {background-position:0 -16px;}