/* Demoflow
   -------------------------------- */

div.demoflow-button-left {
	/*position: absolute;*/
	left: -3px;
	top: 50%;
	background: url('arrows.jpg') no-repeat left top;
	width: 52px;
	height: 45px;
	cursor: pointer; cursor: hand;
	z-index: 999;
}

div.demoflow-button-left .bg {
	background: url('arrows.jpg') no-repeat left bottom;
	width: 52px;
	height: 45px;
	/*position: absolute;*/
	top: 0;
	left: 0;
}

div.demoflow-button-right {
	/*position: absolute;*/
	right: -4px;
	top: 50%;
	background: url('arrows.jpg') no-repeat right top;
	width: 52px;
	height: 45px;
	cursor: pointer; cursor: hand;
	z-index: 999;
}

div.demoflow-button-right .bg {
	/*position: absolute;*/
	left: 0;
	top: 0;
	background: url('arrows.jpg') no-repeat right bottom;
	width: 52px;
	height: 45px;
}

.demoflow {
	position: relative;
	top: 22px;
	left: 0;
	width: 500px;
	height: 250px;
	background:transparent url('back_shadow.jpg') no-repeat scroll center -35px;
}

.demoflow div {
	float: left;
	height: 100px;
	width: 75px;
	cursor: pointer; cursor: hand;
}

.ie .demoflow div {
	zoom: 1;
}

.demoflow div {
	border: 1px solid #666;
}


.demoflow div:hover {
	border: 1px solid #666;
	/*opacity: 1 !important;*/
}

.demoflow div img {
	height: 100%;
	width: 100%;
}

.demoflow div.shadow {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: white;
}

.ie .demoflow div.shadow {
	display: none;
}

/* Functional Demos */

#links {
	float:left;
	width:155px;
	font-size: 13px;
}

#functional ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

#functional #links ul {
  margin-top:10px;
  line-height:1.2em;
}

#functional #links ul li a{
	border-bottom: 1px solid #F4F4F4;
	display:block;
	padding: 3px 3px 3px 12px;
	font-size: 95%;
	text-decoration: none;
	color: #000;
	height: 15px;
}

#functional #links ul li a:hover,
#functional #links ul li a:focus {
	background: #EAEAEA;
	border-color: #BBBBBB;
}