@media (min-width: 768px){
/*  <<  root element for the scrollable.
  when scrolling occurs this element stays still.
    >>
  */
.scrollable {

    /* required settings */
    position:relative;
    overflow:hidden;
    width: 830px;
    height:170px;
}

/*
   root element for scrollable items. Must be absolutely positioned
   and it should have a extremely large width to accomodate scrollable
   items.  it's enough that you set the width and height for the root
   element and not for this element.
*/
.scrollable .items {
    /* this cannot be too large */
    width:20000em;
    position:absolute;
    clear:both;
}

.items div {
    float:left;
    width:744px;
}
.scrollable-container {width:100%; position:relative; clear:both;}
    .scrollable-container h3 {font-size:21px; margin:10px 0}
        .scrollable-container h3 a {color:#222;}
/* single scrollable item */
.scrollable .s_item {
    position:relative;
    display:block;
    float:left;
    padding:0 8px 10px 0;
    width:240px;
    height:134px;
    font-weight:bold;
text-decoration: none;
overflow:hidden;
}
.scrollable .last{
    border-right:none;
}
    .scrollable .s_item img {
    width:240px;
    height:auto;
    }
    .scrollable .s_item h4 {
        color:#808080;
     line-height:1.85em;
    }
    .scrollable .s_item p {
        left:0;
		color: #fff;
		font-size: 1em;
		margin-top: 2px;
		line-height: 1.4em;
        position:absolute;
        bottom:0;
        width:232px;
        padding:4px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+1,000000+100&0+1,0.65+99 */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 1%, rgba(0,0,0,0.65) 99%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 1%,rgba(0,0,0,0.65) 99%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */

    display : inline-block; 
      overflow : hidden;
      text-overflow : ellipsis;
      white-space : nowrap;
    }
    .scrollable .s_item:hover p
    {
    	background: -moz-linear-gradient(top,  rgba(0,0,0,0) 1%, rgba(0,0,0,0.50) 60%, rgba(0,0,0,0.65) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 1%,rgba(0,0,0,0.50) 60%,rgba(0,0,0,0.65) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 1%,rgba(0,0,0,0.50) 60%,rgba(0,0,0,0.65) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
    	}
/* active item */
.scrollable .active {
    border:2px solid #000;
    position:relative;
    cursor:default;
}



/* <<  Button  >>  */
.scrollable {
    float:left;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
    background:url(/asset/image/scrollabl/hori_large-2.png) no-repeat;
    display:block;
    width:33px;
    height:66px;
    cursor:pointer;
    font-size:1px;
    position:absolute;
    z-index:20;
    top:55px;
}

/* right */
a.right {
    position: absolute;
    right: 0;
    background-position: 0 -66px;
    clear: right;
}
a.right:hover { background-position:-33px -66px;}
a.right:active { background-position:-33px -66px;}


/* left */
a.left:hover  { background-position:-33px 0; }
a.left:active { background-position:-33px 0; }

/* up and down */
a.up, a.down  {
    background:url(./../img/scrollabl/vert_large.png) no-repeat;
    float: none;
    margin: 10px 50px;
}

/* up */
a.up:hover { background-position:-66px 0; }
a.up:active { background-position:-132px 0; }

/* down */
a.down { background-position: 0 -66px; }
a.down:hover { background-position:-66px -66px; }
a.down:active { background-position:-132px -66px; }


/* disabled navigational button */
a.disabled {
   
}

.navi a {
width: 10px;
height: 10px;
float: left;
margin: 3px;
background: url(/asset/image/scrollabl/navigatorBig.jpg) 0 -10px no-repeat;
display: block;
font-size: 1px;
}

/* mouseover state */
.navi a:hover
{
	background-position: 0 0;
}

/* active state (current page state) */
.navi a.active
{
	background-position: 0 -20px;
}


.scroll_navi {

   position:relative;
   z-index:100;
   margin-top:-20px;
   float:right;
   margin-right:20px;
}
}