/* ---------------------------------------------------- */
/* SLIDESHOW
/* ---------------------------------------------------- */

/*  main container */
#slideshow { position: relative; margin-bottom: 4em; }

/* contextual header to announce slideshow and hide for visual users */
#slideshow h2 { display: block!important; position: absolute; left: -9000px; width: 1px; height: 1px; overflow: hidden; }

/* universal <ul> resetting, adding a clearfix */
#slideshow ul { margin: 0; padding: 0; list-style-type: none; height: 1%; /* IE fix */ }
#slideshow ul:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; }       


/* ---------------------------------------------------- */
/* SLIDESHOW > SLIDES
/* ---------------------------------------------------- */

/* container div for the <ul> that holds the slides */
#slideshow .slides { width: 100%; }
#slideshow .slides ul { list-style: none; }
#slideshow .slides li { position: absolute; top: 0; left: 0; width: 100%; padding: 0; margin: 0; list-style-type: none; line-height: 0%; min-height: 235px; }

#slideshow .description { width: 53%; line-height: 1.3; margin: .5em; height: 212px; text-shadow: 0 1px 0 rgba(255,255,255,.6); padding: .5em 1em 0 1em;  border: 2px solid #fff; box-shadow: inset 0 0 1px #666; background: #fff; background: rgba(255,255,255,.9); }
#slideshow h3 { margin: 0 0 .3em 0; padding: 0; font-size: 1.45em; border-bottom: 1px dotted #bbb; }
#slideshow h3 a { color: #444; text-decoration: none; }
#slideshow h3 a:hover, #slideshow h3 a:focus { color: #00806F; }
.description p { font-size: 1.1em; color: #222; }
#slideshow .description .slideList { list-style: outside; height: auto; margin: .5em 0; }
#slideshow .description .slideList li { position: static; width: auto; min-height: 0; list-style-image: url("../i/bullet.gif"); margin-left: 1.5em; line-height: 1.3; font-size: 1.1em; }
#slideshow .more { display: inline-block; background: #d84000 url("/i/btn_grad.png") bottom repeat-x; padding: .35em 2em; border: 1px solid #962c00; border-radius: 4px; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 1px 0 rgba(255,255,255,.5); margin: .5em 0 0 0; text-decoration: none; font-size: 90%; }
#slideshow .more:hover, #slideshow .more:focus { background: #ce3d00; }

/* events slide */
.eventSlide .item { margin-top: .6em; padding-bottom: .6em; border-bottom: 1px dotted #ccc; }
.eventSlide .item strong { width: 19%; display: block; float: left; text-align: center; border-radius: 3px; background: #f6f5f5; margin-right: 8px; border: 1px solid #ddd; }
.eventSlide .item span { display: block; float: left; width: 76%; }

/* Causes the first slide to display and hides the controls if JS is turned off */
#slideshow .slides li#slide-one { z-index: 200; }
li#slide-one, li#slide-two, li#slide-three { width: 100%!important; height: auto!important; }

/* hidden accessible link that takes users to a page with all the sides, first content in first slide (<li>)*/
#slideshow #showallslides { position: absolute; bottom: 0; padding: 20px 320px 20px 20px; height: 195px; width: 320px; left: 0; line-height: 1.6; background: url("../i/slide1.jpg") center no-repeat; } /* show link to other slides if no JS */
.js #slideshow #showallslides { left: -9999px; } /* if JS, hide link to all slides from visual users */


/* ---------------------------------------------------- */
/* SLIDESHOW > NAVIGATION
/* ---------------------------------------------------- */

/* the <ul> that holds the thumbnails */
#slideshow .slides-nav { margin-top: 240px; } /* top margin is the aspect ratio height 250/720 of the slide image + gutter */

/* thumbnail container */
#slideshow .slides-nav li { display: none; } /* hide controls if there isn't JS */
.js #slideshow .slides-nav li { display: block; float: left; margin: 0; padding: 0; width: 33%; font-size: 1.1em; } /* if there is JS, show controls */
#slideshow .slides-nav li.middle { margin: 0 .5%; }

/* the content of the thumbnail, link to slide */
#slideshow .slides-nav li a { display: block; position: relative; text-decoration: none; }
#slideshow .slides-nav li a .th { opacity: .5; width: 100%; }
#slideshow .slides-nav li a span { border-bottom: 2px solid #5ea0a3; width: 100%; position: absolute; bottom: -1em; left: 0; color: #fff; background: #065b5d url("../i/btn_grad.png") bottom repeat-x; padding: .2em 0; box-shadow: 0 -1px 0 rgba(255,255,255,.5); transition: padding .1s ease-in-out; }
#slideshow .slides-nav li a:hover span, #slideshow .slides-nav li a:focus span { background: #044b4d url("../i/btn_grad.png") bottom repeat-x; padding: .1em 0 .4em 0; transition: padding .1s ease-in-out; }
#slideshow .slides-nav li a:hover .th, #slideshow .slides-nav li a:focus .th { opacity: 1; }
#slideshow .slides-nav li a em { font-style: normal; padding-left: .5em; }
#slideshow .slides-nav li a strong { position: absolute; top: 0; left: 0; display: none; }

/* if the slideshow is active, show active thumb */
.js #slideshow .slides-nav li.on a .th { opacity: 1; }
.js #slideshow .slides-nav li.on a span { border-bottom: 2px solid #f26e45; }
.js #slideshow .slides-nav li.on a strong { display: block; }

@media (max-width: 47.99em) {
	.js #slideshow .slides-nav li { font-size: .85em; }
	#slideshow h3 { font-size: 1.2em; }
	#slideshow .description .slideList { margin: .25em 0; }
}

@media (max-width: 34.99em) {
	#slideshow .description { width: auto; }
	#slideshow h3 { font-size: 1.3em; }
}

/* 479px and lower */
@media (max-width: 29.99em) {
	#slideshow { margin: 1em 0 0 0!important; }
	#slideshow h2 { position: relative; left: 0; width: auto; height: auto; overflow: auto; margin-bottom: .5em; }
	#slideshow .description { height: 225px; margin: 0; }
	#slideshow .slides-nav { margin-top: 226px; }
	.js #slideshow .slides-nav li { float: none; margin: 0 0 .2em; padding: 0; width: auto; font-size: 100%; }
	#slideshow .slides-nav li a .th { display: none; }
	#slideshow .slides-nav li a span { display: block; position: inherit; padding: .5em 0 .5em 2em; width: auto; }
	#slideshow .slides-nav li a:hover span, #slideshow .slides-nav li a:focus span { padding: .5em 0 .5em 2em; }
	#slideshow .slides-nav li a strong { top: 12px; z-index: 40; }
}