/* Tiny Scrollbar */

.upcomingHead{background:#151515 url(../images/upcoming_icon.png) no-repeat 5% 100%; 
font-size:16px; padding:10px 5px 10px 60px; margin-bottom:10px; color:#FFF; }

.cityHead{background:#151515 url(../images/city_icon.png) no-repeat 5% 100%; 
font-size:16px; padding:10px 5px 10px 60px; margin-bottom:10px; color:#FFF; }



#scrollbar1 { width: 100%; border:thin solid #dcdcdc; background:#f7f6f6;}
#scrollbar1 .viewport { width: 100%; overflow: hidden; position: relative;  }
#scrollbar1 .overview { list-style: none; position: absolute;top: 9px;padding: 0;margin: 0;width: 100%;}

#scrollbar1 .scrollbar{ background: transparent url(../images/bg-scrollbar-track-y.png) no-repeat 0 0; position: absolute; 
background-position: 0 0; right:0; width: 14px; box-sha dow: -1px 1px 1px #999999; z-index:999}

#scrollbar1 .track {/* background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%;*/ 
height: 100%; width:15px; position: relative; padding: 0 0px; }

#scrollbar1 .thumb { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; 
width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px;}

#scrollbar1 .thumb .end { background: transparent url(../images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: 
hidden; height: 5px; width: 25px; }
#scrollbar1 .disable { display: none;}

/*--pitch scroler--*/
.pitchScroler{ width: 100%; background:#151515;}
.pitchScroler .viewport { width: 100%; overflow: hidden; position: relative;  }
.pitchScroler .overview { list-style: none; position: absolute;top: 9px;padding: 0;margin: 0;width: 100%;}

.pitchScroler .scrollbar{ background: transparent url(../images/bg-pitch-track-y.png) no-repeat 0 0; position: absolute; 
background-position: 0 0; right:0; width: 14px;  z-index:999}

.pitchScroler .track {/* background: transparent url(../images/bg-scrollbar-trackend-y.png) no-repeat 0 100%;*/ 
height: 100%; width:15px; position: relative; padding: 0 0px; }

.pitchScroler .thumb { background: transparent url(../images/bg-pitch-thumb-y.png) no-repeat 50% 100%; height: 20px; 
width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px;}

.pitchScroler .thumb .end { background: transparent url(../images/bg-scrollbar-th umb-y.png) no-repeat 50% 0; overflow: 
hidden; height: 5px; width: 25px; }
.pitchScroler .disable { display: none;}


.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }


ul.upcomingEvent{ width:100%; margin:0; padding:0}
ul.upcomingEvent li{width:100%; padding:10px 0 5px 30px; background:url(../images/upcoming_arrow.png) no-repeat 10px 15px; border-bottom:thin dotted #333333;
list-style:none}
ul.upcomingEvent li span{ }
ul.upcomingEvent li span:nth-child(1){font-size:16px; width:100%; display:block;}
ul.upcomingEvent li span:nth-child(2){font-size:13px; color:#FF8400; width:100%; display:block;}
ul.upcomingEvent li span:nth-child(3){font-size:13px; }
ul.upcomingEvent li span:nth-child(4){font-size:13px;}

/*--calendar page--*/
.upcomingHead2{background:#151515;
font-size:16px; padding:10px 5px 10px 10px; margin-bottom:10px; color:#FFF; }

ul.upcomingEventCal{ width:100%; margin:0; padding:0}
ul.upcomingEventCal li{width:100%; padding:10px 0 5px 22px; background:url(../images/upcoming_arrow.png) no-repeat 5px 15px; border-bottom:thin dotted #333333;
list-style:none; }
ul.upcomingEventCal li span{}
ul.upcomingEventCal li span:nth-child(1){font-size:16px; width:100%; display:block;}
ul.upcomingEventCal li span:nth-child(2){font-size:13px; color:#FF8400; width:100%; display:block;}
ul.upcomingEventCal li span:nth-child(3){font-size:13px; }
ul.upcomingEventCal li span:nth-child(4){font-size:13px;}


.scrollHeight{height:267px;}

ul.cityscroler{ width:100%;}
ul.cityscroler li{width:100%; padding:10px 0 5px 25px; background:url(../images/bulet_gray.png) no-repeat 10px 17px; border-bottom:thin dotted #333333}
ul.cityscroler li a:hover{color:#FF8400}

@media only screen and (max-width: 969px) {
	.scrollHeight{height:207px;}
	
}
	
	
@media only screen and (max-width: 768px) {
	ul.cityscroler li{padding:10px 0 5px 35px;}
	ul.upcomingEvent li{padding:10px 0 5px 40px;}
	
	.cityHead{ padding:10px 5px 10px 70px;}
	
	.upcomingHead{padding:10px 5px 10px 70px;  }
	
}

@media only screen and (max-width: 479px) {
	
	ul.cityscroler li{padding:10px 0 5px 25px; }
	ul.upcomingEvent li{padding:10px 0 5px 30px;}
	
	.cityHead{ padding:10px 5px 10px 60px;}
	.upcomingHead{padding:10px 5px 10px 60px;  }
	
	
	
	
}