/*  slider CSS stuff starts here */
#container { position: relative; width:691px; height:191px;}
#controls {display: block;}
.item { display:block; width:691px; height:191px; }

#num_nav {position:relative; text-align:left;}
#num_nav ul li { text-align:left; list-style-type:none; padding-top:20px; }
#num_nav ul li a {color:#fff; background:url(../images/pub_num.jpg) no-repeat; padding:10px; text-align:left;}
#num_nav ul li a.active, #num_nav ul li a:hover { color:#fff; background:url(../images/pub_num.jpg) no-repeat; text-align:left;}

ul.nums li {
	border:1px solid #333333;
	float:left;
	font-weight:bold;
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0 5px 0 0;
	text-align:center;
}
ul.nums span {
	float:left;
	font-weight:bold;
	line-height:25px;
	margin:0 5px 0 0;
}
ul.nums li a {
	color:#666666;
	display:block;
	padding:3px;
	text-decoration:none;
	width:15px;
}
ul.nums li a:hover {
	background-color:#DDDDDD;
}
ul.nums li.current {
	background-color:#B2A384;
}
ul.nums li.current a {
	color:#FFFFFF;
}
ul.nums li.current a:hover {
	background-color:#B2A384;
}
#mask {
	width:691px;
	height:191px;
	overflow:hidden;
	position:relative;
}
#folio {
	position:absolute;
	top:0;
	left:0;
	width:5000px;
	float:left;
}
.col {
	display:block;
	width:691px;
	height:191px;
	float:left;
}

/*

<div id="mask">
  <div id="folio">
    <div class="col"><img src="sources/images/photos/oconnor/photo1.jpg" /></div>
    <div class="col"><img src="sources/images/photos/oconnor/photo1.jpg" /></div>
    <div class="col"><img src="sources/images/photos/oconnor/photo1.jpg" /></div>
    <div class="col"><img src="sources/images/photos/oconnor/photo1.jpg" /></div>
    <div class="col"><img src="sources/images/photos/oconnor/photo1.jpg" /></div>
  </div>
</div> */