/* CSS Document */
/* For LoopedSlider jQuery plugin */

#newsSlider {
	float: left;
	display: inline;
	width: 650px;
}

#newsSlider .container {
	width: 650px; 
	height: 88px;
	overflow: hidden;
	position: relative;
	top: 0px;
	left: 0px;
	cursor: pointer;
	color: black;
}

div.slides {
	position: absolute;
	top: 0px;
	left: 0px;
}

ul.slides {
	position: absolute;
	top: 0px;
	left: 0px;
	list-style: none;
	padding: 0;
	margin: 0;
}

div.slides div, ul.slides li {
	position: absolute;
	top: 0px;
	left:0px;
	width: 650px;
	display: none;
	padding: 0;
	margin: 0;
}

.slidePrev {
	position: absolute;
	top: 160px;
	left: 14px;
	width: 25px;
	height: 36px;
}

.slideNext {
	position: absolute;
	top: 4px;
	right: 13px;
	width: 25px;
	height: 36px;
}

.slideImg {
	float: left;
	display: inline;
	margin: 0px 8px;
}

ul.pagination {
	position: absolute;
	top: 203px;
	left: 1px;	
	list-style:none;
	padding: 0;
	margin: 0;
}

ul.pagination li {
	float: left;
	margin-left: -9px;
}

ul.pagination li a {
	padding: 0px;
}

ul.pagination li.active a {
	border-bottom: 2px solid #f2dc9d;
}

/**** Homepage Sliders ****/

#rotation { position:relative; width:550px; margin: 0 auto; }
#rotation .container { width:550px; height:550px; margin:0 auto; overflow:hidden; position:relative; top:16px; }
#rotation .slides { position:absolute; top:0px; left:0px; width:525px; margin: 0 auto; line-height:1.8em; }
#rotation .slides div {
	width: 550px;
	padding-top:12px;
}
#rotation a.previous, #rotation a.next { 
	position:absolute; 
	top:125px; 
	left:-20px; 
	padding:13px;
	background: url(/images/slide-arrow-left.gif) no-repeat left top; }
#rotation a.next { left:545px; background: url(/images/slide-arrow-right.gif) no-repeat right top; }

#rotation a.previous:hover { left:-19px; top:126px; }
#rotation a.next:hover { left:546px; top:126px; }

#rotation ul.pagination { position:absolute; top:-24px; right:12px; list-style:none; padding:0; margin:0; }
#rotation ul.pagination li  { float:left; }
#rotation ul.pagination li a { background:#bfb3a1; padding:0px 7px; margin:0px 2px; }
#rotation ul.pagination li.active a { background:red; color:white; }

.clearBoth { clear: both; }


/**** Uses Slider ****/

#usesSlider {
	position: relative;
	width: 354px;
	height: 394px;
	margin: 0px auto;
	padding: 13px 0px 0px 14px;	
	background: url(/images/sliders/uses-bground.jpg) no-repeat;
}

#usesSlider .container {
	position: relative;
	width: 340px; 
	height: 381px;
	overflow: hidden;
	cursor: pointer;
}

#usesSlider div.slides {
	position: absolute;
	top: 0;
	left: 0;
	list-style: none;
	padding: 0;
	margin: 0;
}

#usesSlider div.slides div {
	position: absolute;
	top: 0;
	width: 340px;
	display: none;
	padding: 0;
	margin: 0;
}

#usesSlider div.slides div img {
	margin-bottom: 3px;
	border: 1px dotted #333;
}

#usesSlider .slidePrev {
	position: absolute;
	top: 190px;
	left: -16px;
	width: 35px;
	height: 35px;
}

#usesSlider .slideNext {
	position: absolute;
	top: 190px;
	right: -16px;
	width: 35px;
	height: 35px;
}


/**** Image-only Slider ****/

#loopedSlider {
	position: relative;
	float: left;
	display: inline;
	width: 250px;
	height: 300px;
	margin: 12px;
}

#loopedSlider .container {
	position: relative;
	width: 250px; 
	height: 300px;
	overflow: hidden;
	cursor: pointer;
}

#loopedSlider ul.slides {
	position: absolute;
	top: 0;
	left: 0;
	list-style: none;
	padding: 0;
	margin: 0;
}

#loopedSlider div.slides div, #loopedSlider ul.slides li {
	position: absolute;
	top: 0;
	width: 250px;
	display: none;
	padding: 0;
	margin: 0;
}