.scrollable_small { width: 430px; position: relative; overflow: hidden; }
.scrollable_small { height: 100px; margin-right: 50px; }
.scrollable_small { border: 1px solid #ccc; background: transparent url('images/h300.png') repeat-x; }

	.scrollable_small .items { width: 20000em; height: 20000em; position: absolute; clear: both; }

	/* single scrollable item */
	.scrollable_small .items div { margin: 20px 1px 20px 21px; }
	.scrollable_small .items div { /*border:1px solid #ccc; background-color:#fff;*/ }
	.scrollable_small .items div { cursor: pointer; width: 200px; height: 155px; }
	.scrollable_small .items div { display: inline-block; float: left; }

		/* some custom block and decoration items for the small scroller */
		.scrollable_small .items div strong { display: block; clear: both; color: darkgreen; }
		.scrollable_small .items div strong { font-weight: bold; font-size: 120%; }
		.scrollable_small .items div span { display: block; clear: both; color: #000; }
		.scrollable_small .items div span { text-decoration: italic; padding-left: 15px; }

	/* active item */
	.scrollable_small .active { z-index: 9999; position: relative; }










/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
#actions { width: 100px; }

/* required settings */
.scrollable { position: relative; overflow: hidden; }
.scrollable { width: 850px; height: 100px; margin-right: 50px; }
/* custom decorations */
.scrollable { border: 1px solid #ccc; background: url('images/h300.png') repeat-x; }


	/*
		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 { width:20000em; height:20000em; position:absolute; clear:both; }

		/* single scrollable item */
		.scrollable .items div { margin:20px 5px 20px 21px; cursor:pointer; /*background-color:#fff;*/ }
		.scrollable .items div { padding:2px; height:155px; width:200px; /*border:1px solid #ccc;*/ }
		.scrollable .items div { display: inline-block; float: left; -moz-border-radius:4px; -webkit-border-radius:4px; }

	/* active item */
	.scrollable .active { border: 2px solid #000; z-index: 9999; position: relative; }











/* right scroller image */
a.right { display: inline-block; width: 30px; height: 18px; float: right; }
a.right { background: transparent url('images/right.png'); margin-top: -50px; }
a.right { background-position: 0 -18px; background-repeat: no-repeat; }
	a.right:hover { background-position: 0 0; cursor: hand; }



/* left scroller image */
a.left { display: inline-block; width: 30px; height: 18px; float: left; }
a.left { background: transparent url('images/left.png'); margin-top: 50px; }
a.left { background-position: 0 -18px; background-repeat: no-repeat; }
	a.left:hover { background-position: 0 0; cursor: hand; }




/* up and down */
a.up, a.down { background:url('images/vert_large.png') no-repeat; float: none; margin: 10px 50px; }
	/* up */
	a.up:hover { background-position:-30px 0; }
	a.up:active { background-position:-60px 0; }

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


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























/* root element for tabs  */
ul.tabs {list-style:none; margin:0 !important; padding:0;  }
ul.tabs { border-bottom:1px solid #666; height:30px; min-width: 900px; }

/* single tab */
ul.tabs li { float:left; text-indent:0; padding:0; margin:0 !important; }
ul.tabs li { list-style-image:none !important; display: inline-block; }

/* link inside the tab. uses a background image */
ul.tabs a { background: url(images/green.png) no-repeat -420px 0; }
ul.tabs a { display:block; height: 30px; line-height: 30px; width: 134px; }
ul.tabs a { text-align: center; text-decoration: none; color: #333; }
ul.tabs a {	padding: 0px;margin: 0px; position: relative; top: 1px; }

ul.tabs a:active { outline:none; }

/* when mouse enters the tab move the background image */
ul.tabs a:hover {b background-position: -420px -31px; color:#fff; }

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a { background-position: -420px -62px; cursor:default !important; color:#000 !important; }


/* initially all panes are hidden */
div.panes div.pane { display:none; }

/* initially all panes are hidden */
div.panes, div.panes table td { padding:15px 10px; border-top:0; color: white; }



/* initially all panes are hidden */
div.tpanes div.tpane { display:none; }

/* initially all panes are hidden */
div.tpanes, div.tpanes table td { padding:15px 10px; border-top:0; color: white; }















/* root element for accordion. decorated with rounded borders and gradient background image */
#accordion { width: 300px; border-right: 1px dashed #ccc; display: block; }

/* accordion header */
#accordion h2 { color: green; size: 110%; font-weight: bold; }
#accordion h2 { font-size: 14px; font-weight: normal; cursor: hand; }
#accordion h2 { height: 18px; padding-left: 20px; margin: 2px; }

#accordion h2 { background: #ccc url('images/right.png'); }
#accordion h2 { background-position: 0 -18px; background-repeat: no-repeat; }

/* currently active header */
#accordion h2.current { cursor: pointer; color: black; size: 110%; font-weight: bold; }



/* accordion pane */
#accordion div.accordion_pane { display: none; height: 300px; padding: 15px; font-size: 12px; }
#accordion div.accordion_pane { border-bottom: 1px dashed #ccc; overflow: auto; }

	#accordion div.accordion_pane a,
	#accordion div.accordion_pane a:link,
	#accordion div.accordion_pane a:visited,
	#accordion div.accordion_pane a:active { text-decoration: none; margin-left: 25px; }

		#accordion div.accordion_pane a:hover { color: black; font-weight: bold; }








































/* tooltip styling */
.tooltip { display: none; height: 163px; padding: 40px 30px 10px 30px; }
.tooltip { width: 310px; font-size: 11px; color: #fff; }
.tooltip { background: transparent url('images/black_arrow_big.png'); }

/* a .label element inside tooltip */

.tooltip .label { color: yellow; width: 35px; }
.tooltip a { color: #ad4; font-size: 11px; font-weight: bold; }