/* @override 
	http://ulivecam.com/cnyc2013/scroll/scrollable-horizontal.css
	http://www.cnyclive.com/scroll/scrollable-horizontal.css
	http://www.cnyclive.com/scroll/scrollable-horizontal2.css
*/

/*
  root element for the scrollable.
  when scrolling occurs this element stays still.
  */
.scrollable {

    /* required settings */
    position:relative;
    overflow:hidden;

    /* custom decorations */
   	height: 230px;
	width: 620px;
}

/*
   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;
	background-color: transparent;
}

.items div {
     border:1px solid #ccc;
    

	display: inline-block;
	float: left;
	text-align: center;
	background: #fff url(http://www.cnyclive.com/h300.png) repeat-x;
}
/* single scrollable item */
#item {
	 -moz-border-radius:8px;
    -webkit-border-radius:8px;
	border: 1px solid #c3c3c3;
	color: black;
	padding-right: 0;
	height: 200px;
	width: 190px;
	padding: 0;
	font-size: 12px;
	line-height: 12px;
	margin: 0 10px 0 5px;
	background: #fff url(http://www.cnyclive.com/h300.png) repeat-x;
}
#item img {
    background-color:#fff;
    border:1px solid #ccc;
    width: 153px;
    height: 120px;

    -moz-border-radius:4px;
    -webkit-border-radius:8px;
	padding: 5px;
	display: inline-block;
	position: relative;
	top: -8px;
	margin: 0 auto;
}
#descr{
	font-size: 12px;
	display: block;
	position: relative;
	border-style: none;
	text-align: center;
	width: 100%;
	background-color: transparent;
}
 
/* single scrollable item */
.scrollable img {
    float:left;
    margin:20px 5px 20px 21px;
    background-color:#fff;
    padding:2px;
    border:1px solid #ccc;
    width:100px;
    height:75px;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
}

/* active item */
.scrollable .active {
    border:2px solid #000;
    position:relative;
    cursor:default;
}