/*Uncomment this if you wan't to only have 1 visible slide before the javascript kicks in.     #slider li {
	display: none;
}
#slider li:first-child {
	display: block;
}
*/
#slider {
	margin-top: 100px;
	position: relative;
	height: 330px;
	width: 730px;
	left: 50%;
	margin-left: -365px;
	text-align: center;
	border-style: solid;
	border-width: 5px;
	border-color: #e2e2e2;
	display: block;
	position: relative;
	overflow: hidden;
	z-index: -100;
}
#slider img {
	border: none;
}
#slider ul, #slider li {
	margin: 0;
	padding: 0;
	list-style: none;
	display: block;
	position: relative;
	width: 730px;
}
#slider li {
	width: 730px;
	height: 330px;
	overflow: hidden;
	z-index: -100;
}
/* Numeric Navigation */
ol {
	margin: 1em 0;
	padding: 0;
	height: 28px;
	margin-left: 290px
}
ol li {
	margin: 0 10px 0 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 28px;
	line-height: 28px;
}
ol li a {
	float: left;
	height: 28px;
	line-height: 28px;
	border: 1px solid #ccc;
	background: #DAF3F8;
	color: #555;
	padding: 0 10px;
	text-decoration: none;
}
ol li.current a {
	background: #5DC9E1;
	color: #fff;
}
ol li a:focus, .prevBtn a:focus, .nextBtn a:focus {
	outline: none;
}
.blackLeft, .blackRight {
	background: black;
	height: 700px;
	width: 100px;
	z-index: 1000;
	position: absolute;
	top: 0;
}
.blackRight {
	right: 0;
}