/* root element for tabs */
#flowtabs {
	float:left;
	border-top:1px solid #888888;
}
		#flowtabs a {
			display:block;
			background-color:#999999;
			color:#ffffff;
			text-decoration:none;
			padding:8px 19px 8px 8px;
			width:185px;
			border-bottom:1px solid #888888;
			border-left:1px solid #888888;
			overflow:hidden;
		}
				#flowtabs a:hover {
					background-color:#888888;
				}
				#flowtabs a img {
					float:left;
					margin-right:5px;
				}
				#flowtabs a div {
					height:34px;
					overflow:hidden;
					color:#ffffff;
				}

/* panes */
#flowpanes {
	position:relative;
	overflow:hidden;
	width:450px;
	height:308px;
	float:left;
}

		/* single pane */
		#flowpanes div.item {
			display:block;
			color:#fff;	
			float:left;
			padding:8px;
			width:432px;
			height:288px;
			cursor:pointer;
			font-size:14px;
			border:1px solid #888888;
			background-color:#999999;
			position:relative;
		}
				.scrollable_items_img {
					position:absolute;
					left:8px;
					top:8px;
					z-index:1;
				}
				.scrollable_items_bg {
					position:absolute;
					left:8px;
					bottom:8px;
					height:90px;
					width:432px;
					z-index:2;
          opacity: 0.5;
          -moz-opacity:0.5;
          filter:alpha(opacity=50);
				}
				.scrollable_items_text {
					position:absolute;
					left:18px;
					bottom:18px;
					height:67px;
					width:412px;
					overflow:hidden;
					z-index:3;
				}
						.scrollable_items_text a {
							font:11px Arial, Helvetica, sans-serif;
							text-decoration:none;
							color:#ffffff !important;
						}
								.scrollable_items_text div.subtitle {
									margin:5px 0;
									font:10px Arial, Helvetica, sans-serif;
									color:#ffffff !important;
								}
								.scrollable_items_text div.resumen {
									font:10px Arial, Helvetica, sans-serif;
									color:#cccccc !important;
								}

		/* some decorations for elements inside single pane */
		#flowpanes a {
			color:#cc9;		
			font-size:14px;
		}
		
		#flowpanes p, #flowpanes samp {
			color:#ccc;		
		}
		
		#flowpanes div.narrow {
			padding-right:160px;		
		}
		
		/* our additional wrapper element for the items */
		#flowpanes .items {
			width:20000em;
			position:absolute;
			clear:both;
			margin:0;
			padding:0;
		}
		
		#flowpanes .less, #flowpanes .less a {
			color:#999 !important;
			font-size:11px;
		}


.holder {
	float: left;
}

/******************** barra de scroll *********************/
.scroll-pane {
	width: 210px;
	height: 270px;
	overflow: auto;
	float: left;
}

.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.jScrollPaneTrack {
	position: absolute;
	cursor: pointer;
	right: 0;
	top: 0;
	height: 100%;
	background: #aaa;
}
.jScrollPaneDrag {
	position: absolute;
	background: #666;
	cursor: pointer;
	overflow: hidden;
}
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
}

/***************** flechas del scroller *********************/
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	background: url(/imagenes/basic_arrow_up.gif) 0 0 no-repeat;
	width:11px;
	height:11px;
}
a.jScrollArrowUp:hover {
	background-position: 0 -15px;
}
a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	background: url(/imagenes/basic_arrow_down.gif) 0 0 no-repeat;
	width:11px;
	height:11px;
}
a.jScrollArrowDown:hover {
	background-position: 0 -15px;
}
a.jScrollActiveArrowButton,
a.jScrollActiveArrowButton:hover {
	background-position: 0 -30px;
}