﻿

/* Container DIV - automatically generated */
.simply-scroll-container { position: relative;}

/* Clip DIV - automatically generated */
.simply-scroll-clip { position: relative;overflow: hidden;z-index: 2;}

/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list { position: absolute;top: 0;left: 0;z-index: 1;overflow: hidden;margin: 0;padding: 0;list-style: none;}	
.simply-scroll-list li {padding: 0;	margin: 0;list-style: none;}	
.simply-scroll-list li img {border: none;display: block; width:125px}

.simply-scroll-list1 { position: absolute;top: 0;left: 0;z-index: 1;overflow: hidden;margin: 0;padding: 0;list-style: none;}	
.simply-scroll-list1 li {padding: 0;	margin: 0;list-style: none;}	
.simply-scroll-list1 li img {border: none;display: block;  }
/* Custom class modifications - adds to / overrides above
.simply-scroll is default base class */
/* Container DIV */
.simply-scroll { width: 100%;height: 80px;}
/* Clip DIV */
.simply-scroll .simply-scroll-clip {width: 100%;height: 80px;}
	
/* Explicitly set height/width of each list item */	
.simply-scroll .simply-scroll-list li {	float: left; /* Horizontal scroll only */width: 125px;height:80px;}


.eventscroller .simply-scroll-list li img {border: none;display: block; width:340px; height:200px; border:3px solid #000; padding:5px;}
.eventscroller .simply-scroll { width: 100%;}
.eventscroller .simply-scroll .simply-scroll-clip {width: 100%;height: 220px; }
.eventscroller .simply-scroll .simply-scroll-list li {	float: left; /* Horizontal scroll only */width: 350px;height:300px; margin-left:10px}

.scroller4 .simply-scroll-list li {	float: left; /* Horizontal scroll only */width: 205px;height:150px;}
.scroller4 .simply-scroll .simply-scroll-clip {width: 100%;height: 150px; }
.scroller4 .simply-scroll-list li img {border: none;display: block; width:205px; height:150px; padding:5px;}
.scroller4 .simply-scroll .simply-scroll-list li {	float: left; /* Horizontal scroll only */width:205px;height:300px; margin-left:10px}

.scroller{ margin:0px; padding:0px}
.scroller li{ float:left;  line-height:0px ; list-style:none}
.scroller li a{  padding:5px; display:inline-block; margin:3px}
.scroller li a:hover{ }
.scrTitle { margin:15px 0 10px 0 ; text-align:center; clear:both; }


/*.scroller img {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
    filter: gray; 
    -webkit-filter: grayscale(100%); 
    -webkit-backface-visibility: hidden; 
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
}

.scroller img:hover {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\' filterRes=\'800\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
    -webkit-filter: grayscale(0%);
}
*/