/*---------Scroll area code----------*/

#wrapper {
	height:270px;		/* Of course you need to specify the object height */
	position:relative;	/* On older OS versions "position" and "z-index" must be defined (absolute | relative), */
	z-index:1;			/* it seems that recent webkit is less picky and works anyway. */
	width:100%;
	/*background:#fff;*/
	overflow:hidden;
}

#scroller {
/*	-webkit-touch-callout:none;*/
	-webkit-tap-highlight-color:#393B8F;
	float:left;
	width:100%;
	padding:0;
/*	-webkit-box-shadow:0 0 8px #555;	/* Don't use box shadows, they slow down drastically CSS animations */
}

ul {
	list-style:none;
	padding:0;
	margin:0;
	width:100%;
	text-align:left;
}

li {
	margin:5px 0;
	padding:3px 7px 7px 7px;
	border-bottom:1px solid #ddd;
	list-style-type:none;
	font-size:15px;
	font-weight:bold;
	margin-right:5px;
}

a:link, a:visited {
	text-decoration:none;
	color:#000;
	font-weight:bold;
}

/*
#scroller .letterheader {
	padding:6px 0 6px 7px;
	height:16px;
	font-weight:bold;
	color:#262B85;
	width:100%;
}

*/
.btnTwoLeft {
	height:23px;
	width:150px;
	background:url(images/btn-two-left.png) no-repeat;
	float:left;
	text-align:center;
	font-size:14px;
	font-weight:200!important;
	color:#fff!important;
	font:Georgia, "Times New Roman", Times, serif;
	padding:7px 0 0 0;
	margin:2px 0;
}

.btnTwoLeftSelected {
	height:23px;
	width:150px;
	background:url(images/btn-two-left-selected.png) no-repeat;
	float:left;
	text-align:center;
	font-size:14px;
	font-weight:200!important;
	color:#fff!important;
	font:Georgia, "Times New Roman", Times, serif;
	padding:7px 0 0 0;
	margin:2px 0;
}

.btnTwoRight {
	height:23px;
	width:150px;
	background:url(images/btn-two-right.png) no-repeat;
	float:left;
	text-align:center;
	font-size:14px;
	font-weight:200!important;
	color:#fff!important;
	font:Georgia, "Times New Roman", Times, serif;
	padding:7px 0 0 0;
	margin:2px 0;
}

.btnTwoRightSelected {
	height:23px;
	width:150px;
	background:url(images/btn-two-right-selected.png) no-repeat;
	float:left;
	text-align:center;
	font-size:14px;
	font-weight:200!important;
	color:#fff!important;
	font:Georgia, "Times New Roman", Times, serif;
	padding:7px 0 0 0;
	margin:2px 0;
}


/**
 *
 * Styles specific to the pull down/up element
 *
 */
.iScrollPullDown,
.iScrollPullUp {
	background:#fff;
	border-bottom:1px solid #aaa;
	height:40px;
	line-height:40px;
	padding:5px 10px;
	font-size:14px;
	color:#999;
	font-weight:bold;
	-webkit-transform:translate3d(0,0,0);	/* Put the element in the HW accelerated layer */
}

.iScrollPullDownIcon,
.iScrollPullUpIcon {
	display:block; float:left;
	width:40px; height:40px;
	background:url(pull-icon.png) 0 0 no-repeat;
	background-size:40px 80px;
	margin-right:5px;
	-webkit-transition-property:-webkit-transform;
	-webkit-transition-duration:250ms;
	-webkit-transform:rotate(0);
}

.iScrollPullDown.flip .iScrollPullDownIcon {
	-webkit-transform:rotate(-180deg);
}

.iScrollPullDown.loading .iScrollPullDownIcon,
.iScrollPullUp.loading .iScrollPullUpIcon {
	background-position:0 100%;
	-webkit-animation-name:loading;
	-webkit-animation-duration:1.5s;
	-webkit-animation-iteration-count:infinite;
	-webkit-animation-timing-function:linear;
}

.iScrollPullUp {
	border-bottom:0;
}

.iScrollPullUpIcon {
	-webkit-transform:rotate(-180deg);
}

.iScrollPullUp.flip .iScrollPullUpIcon {
	-webkit-transform:rotate(0);
}

@-webkit-keyframes loading {
	from { -webkit-transform:rotate(0deg); }
	to { -webkit-transform:rotate(360deg); }
}

@media screen and (-webkit-min-device-pixel-ratio:2) {
	.iScrollPullDownIcon,
	.iScrollPullUpIcon {
		background-image:url(pull-icon@2x.png);
	}
}