﻿/*
    anythingSlider v1.0
    
    By Chris Coyier: http://css-tricks.com
    with major improvements by Doug Neiner: http://pixelgraphics.us/
    based on work by Remy Sharp: http://jqueryfordesigners.com/

orig code:

.anythingSlider                         { width: 760px; height: 360px; position: relative; margin: 0 auto 15px; }
.anythingSlider .wrapper                { width: 680px; overflow: auto; height: 341px; margin: 0 40px; position: absolute; top: 0; left: 0; }
.anythingSlider .wrapper ul             { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; border-top: 3px solid #e0a213; border-bottom: 3px solid #e0a213; margin: 0; padding: 0; }
.anythingSlider ul li                   { display: block; float: left; padding: 0 10px; height: 317px; width: 660px; margin: 0; }
.anythingSlider .arrow                  { display: block; height: 200px; width: 67px; background: url(../images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 65px; cursor: pointer; }
.anythingSlider .forward                { background-position: 0 0; right: -20px; }
.anythingSlider .back                   { background-position: -67px 0; left: -20px; }
.anythingSlider .forward:hover          { background-position: 0 -200px; }
.anythingSlider .back:hover             { background-position: -67px -200px; }


SIZE!

	For example, if you wanted to make the slides 580px wide instead of 680px wide, you just need to change some CSS. 
	Change the width of .anythingSlider ul li to 580px, 
	change the width of .anythingSlider .wrapper to 580px, and reduce the width of .anythingSlider 100px to 660px.


900
675


*/
.anythingSlider                         {
	width: 910px;
	height: 680px;
	position: relative;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
.anythingSlider .wrapper                {
	width: 910px;
	overflow: auto;
	height: 680px;
	position: absolute;
	top: 0;
	left: 0;
	margin-top: 0;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 0px;
}

/* .anythingSlider .wrapper                { width: 910px; overflow: auto; height: 675px; margin: 0 40px; position: absolute; top: 0; left: 0; } */

.anythingSlider .wrapper ul             { width: 32700px; list-style: none; position: absolute; top: 0; left: 0; border-top: 0px solid #e0a213; border-bottom: 0px solid #e0a213; margin: 0; padding: 0; }
.anythingSlider ul li                   { display: block; float: left; padding: 0 10px; height: 680px; width: 910px; margin: 0; }
.anythingSlider .arrow                  { display: block; height: 200px; width: 67px; background: url(../images/arrows.png) no-repeat 0 0; text-indent: -9999px; position: absolute; top: 65px; cursor: pointer; }

.anythingSlider .back                   {
	background-position: -67px 0;
	left: -50px;
	margin-top: 80px;
}
.anythingSlider .back:hover             { background-position: -67px -200px; }
.anythingSlider .forward                { background-position: 0 0; right: -30px; 	margin-top: 80px;}
.anythingSlider .forward:hover          { background-position: 0 -200px; }


#thumbNav                               { position: relative; top: 323px; text-align: center; }
#thumbNav a                             { color: black; font: 11px/18px Georgia, Serif; display: inline-block; padding: 2px 8px; height: 18px; margin: 0 5px 0 0; background: #c58b04 url(../images/cellshade.png) repeat-x; text-align: center; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
#thumbNav a:hover                       { background-image: none; }
#thumbNav a.cur                         { background: #e0a213; }

#start-stop                             { background: green; background-image: url(../images/cellshade.png); background-repeat: repeat-x; color: white; padding: 2px 5px; width: 40px; text-align: center; position: absolute; right: 45px; top: 323px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; }
#start-stop.playing                     { background-color: red; }
#start-stop:hover                       { background-image: none; }

/*
  Prevents
*/
.anythingSlider .wrapper ul ul          { position: static; margin: 0; background: none; overflow: visible; width: auto; border: 0; }
.anythingSlider .wrapper ul ul li       { float: none; height: auto; width: auto; background: none; }