@charset "utf-8";

/** 
 * .banner-rotator-container 
 *
 * The class used to identify all banners on a page. Specify 
 * global properties for all banners on a page here. If you need to specify different 
 * attributes for specific banners, then target that banner by its id
 *
 * @param 	width 			this is the overall width of the rotator, set at your discretion
 * @param 	background		color and / or image of your background to the rotator, make sure 
 *									to set the repeat properly [no-repeat, repeat, repeat-x, repeat-y]
 */
.banner-rotator-container { background:#181818 none /*url('/path/to/my/rotator/background/image.ext')*/ scroll top left repeat; padding:10px; width:525px; position:relative; top:0px; left:0px; margin:0; height:150px; }



/**
 * .banner-rotator-header
 * 
 * The header of the banner. This area contains the numbered link navigation for easy slide
 * access. To change the style of a particular banner's header, use its id.
 *
 * Remember to take into account the size of the borders when calculating the width and 
 * height of this div.
 */
.banner-rotator-header { height:31px; line-height:31px; padding:0 10px; background:#878787 none /*url('/path/to/my/rotator/header/image.ext')*/ scroll top left repeat; border-bottom:4px #e8a900 solid; width:auto; }



/**
 * The actual text within the header.
 */
.banner-rotator-header h3 { width:auto; float:left; display:block; color:#fff; font-family:Georgia, "Times New Roman", Times, serif; font-size:1.25em; line-height:1.5em; font-weight:bold; margin:0; padding:0;}



/**
 * Entire rotator banner body (contains all slides )
 */
.banner-rotator-slides { overflow:scroll; height:115px; width:100%; padding:0; margin:0; }



/**
 * Styles for the slides 
 */
.slide { width:100%; height:120%; overflow:hidden; }

.slide .padme { padding:5px 10px; margin:0 0 10px 0; }


/**
 * Layout styles for the numbered navigation in the header
 */
.nav { float:right; width:auto;}

.nav a,
.nav a:link,
.nav a:visited { line-height:31px; padding:0 5px; font-family:Verdana, Arial, Helvetica, sans-serif; text-decoration:none; font-size:0.8em; color:#FFF; font-weight:normal; }
	
.nav a:hover { text-decoration:underline; }

.nav a.activeSlide { background: #c3c3c3; color: #000; }

.nav a,
.nav a.activeSlide:focus { outline:none; }