/*
 * simplyScroll 2 - a scroll-tastic jQuery plugin
 *
 * http://logicbox.net/jquery/simplyscroll
 *
 * Copyright (c) 2009-2012 Will Kelly - http://logicbox.net
 *
 * Dual licensed under the MIT and GPL licenses.
 *
 * Last revised: 31/01/2012
 *
 */

/* Default/Master classes 

Example markup format (for horizontal scroller)
Note all DIVs are generated and should not be hard-coded

<div class="your-custom-class simply-scroll-container">
	<div class="simply-scroll-btn simply-scroll-btn-left"></div>
	<div class="simply-scroll-btn simply-scroll-btn-right"></div>
	<div class="simply-scroll-clip">
		<ul class="simply-scroll-list">
			<li>...</li>
			...
		</ul>
	</div>
</div>


*/

.simply-scroll-container { /* Container DIV - automatically generated */
	position: relative;
}

	.simply-scroll-clip { /* Clip DIV - automatically generated */
		position: relative;
		overflow: hidden;
	}

	.simply-scroll-list { /* UL/OL/DIV - the element that simplyScroll is inited on */
		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;
		}
	
	.simply-scroll-btn {
		position: absolute;
		background-image: url(buttons.png);
		width: 42px;
		height: 44px;
		z-index:3;
		cursor: pointer;
	}
	
	.simply-scroll-btn-left {
		left: 6px;
		bottom: 6px;
		background-position: 0 -44px;
	}
	.simply-scroll-btn-left.disabled {
		background-position: 0 0 !important;
	}
	.simply-scroll-btn-left:hover, .simply-scroll-btn-left:focus {
		background-position: 0 -88px;
	}
	
	.simply-scroll-btn-right {
		right: 6px;
		bottom: 6px;
		background-position: -84px -44px;
	}
	.simply-scroll-btn-right.disabled {
		background-position: -84px 0 !important;
	}
	.simply-scroll-btn-right:hover, .simply-scroll-btn-right:focus {
		background-position: -84px -88px;
	}
	
	.simply-scroll-btn-up {
		right: 6px;
		top: 6px;
		background-position: -126px -44px;
	}
	.simply-scroll-btn-up.disabled {
		background-position: -126px 0 !important;
	}
	.simply-scroll-btn-up:hover, .simply-scroll-btn-up:focus {
		background-position: -126px -88px;
	}
	
	.simply-scroll-btn-down {
		right: 6px;
		bottom: 6px;
		background-position: -42px -44px;
	}
	.simply-scroll-btn-down.disabled {
		background-position: -42px 0 !important;
	}
	.simply-scroll-btn-down:hover, .simply-scroll-btn-down:focus {
		background-position: -42px -88px;
	}
	
	.simply-scroll-btn-pause {
		right: 6px;
		bottom: 6px;
		background-position: -168px -44px;
	}
	.simply-scroll-btn-pause:hover, .simply-scroll-btn-pause:focus {
		background-position: -168px -88px;
	}
	
	.simply-scroll-btn-pause.active {
		background-position: -84px -44px;
	}
	.simply-scroll-btn-pause.active:hover, .simply-scroll-btn-pause.active:focus {
		background-position: -84px -88px;
	}

/* Custom class modifications - override classees

.simply-scroll is default

*/

.simply-scroll { /* Customisable base class for style override DIV */
	width: 576px;
	height: 200px;
	margin-bottom: 1em;
}

	.simply-scroll .simply-scroll-clip {
		width: 576px;
		height: 200px;
	}
	
		.simply-scroll .simply-scroll-list {}
		
		.simply-scroll .simply-scroll-list li {
			float: left;
			width: 290px;
			height: 200px;
		}
		.simply-scroll .simply-scroll-list li img {}
	
	.simply-scroll .simply-scroll-btn {}
	
	.simply-scroll .simply-scroll-btn-left {}
	.simply-scroll .simply-scroll-btn-left.disabled {}
	.simply-scroll .simply-scroll-btn-left:hover {}
	
	.simply-scroll .simply-scroll-btn-right {}
	.simply-scroll .simply-scroll-btn-right.disabled {}
	.simply-scroll .simply-scroll-btn-right:hover {}
	
	.simply-scroll .simply-scroll-btn-up {}
	.simply-scroll .simply-scroll-btn-up.disabled {}
	.simply-scroll .simply-scroll-btn-up:hover {}
	
	.simply-scroll .simply-scroll-btn-down {}
	.simply-scroll .simply-scroll-btn-down.disabled {}
	.simply-scroll .simply-scroll-btn-down:hover {}
.hori { /* Customisable base class for style override DIV */
	width: 100%;
	height: 190px;
}

	.hori .simply-scroll-clip {
		width: 100%;
		height: 190px;
	}
	
		.hori .simply-scroll-list {}
		
		.hori .simply-scroll-list li {
			float: left;
			height: 190px;
			float: left;
			margin-right: 10px;
		}
		.hori .simply-scroll-list li img {
			float: left;
			height: 190px;
			float: left;
		}
	

.hold { /* Customisable base class for style override DIV */
	width: 100%;
	height: 310px;
}

	.hold .simply-scroll-clip {
		width: 100%;
		height: 310px;
	}
	
		.hold .simply-scroll-list {}
		
		.hold .simply-scroll-list li {
			float: left;
			width: 100%;
		}
		.hold .simply-scroll-list li img {
		}

/* Vertical scroller example */

.vert .simply-scroll-list li a{
       font-size: 13px;
    font-family: RobotoBold;
    color: #000;
    display: block;
    height: 35px;
    overflow: hidden;
    margin-bottom: 5px;
}
.vert .simply-scroll-list li p{
    font-family: roboto_r;
    font-style: italic;
    font-size: 13px;
}
.vert { /* wider than clip to position buttons to side */
	width: 100%;
	height: 400px;
	margin-top: 1.2em;
	margin-bottom: 1.2em;
}

	.vert .simply-scroll-clip {
		width: 100%;
		height: 400px;
	}
	
		.vert .simply-scroll-list {}
		
		.vert .simply-scroll-list li {
			
		}
		.vert .simply-scroll-list li {
		float: left;
    width: 100%;
    height: auto;
    margin-bottom: 10px;
    box-sizing: border-box;
    border-bottom: 1px dashed #ccc;
    font-size: 13px;
    font-family: roboto_r;
		}
        .vert .simply-scroll-list li span{
            display: block;
            margin-bottom: 6px;
        }
		.vert .simply-scroll-list li img {

   float: left;
    box-sizing: border-box;
    margin-bottom: 10px;
    margin-right: 10px;
		}
      .vert .simply-scroll-list h3{font-size: 15px;
    text-align: center;color: #000;}
    
		.vert .simply-scroll-list li img {}
	
	.vert .simply-scroll-btn {}

	.vert .simply-scroll-btn-up { /* modified btn pos */
		right: 0;
		top: 0;
	}
	.vert .simply-scroll-btn-up.disabled {}
	.vert .simply-scroll-btn-up:hover {}
	
	.vert .simply-scroll-btn-down { /* modified btn pos */
		right: 0;
		top: 52px;
	}
	.vert .simply-scroll-btn-down.disabled {}
	.vert .simply-scroll-btn-down:hover {}
	
	/* NOTE left-right classes wouldn't be needed on vertical scroller */
.vert_tintuc { /* wider than clip to position buttons to side */
	width: 100%;
	height: 420px;
	overflow: hidden;
	margin: 0px auto;
}

	.vert_tintuc .simply-scroll-clip {
		width: 100%;
		height: 420px;
	}
	
		.vert_tintuc .simply-scroll-list {}
		
		.vert_tintuc .simply-scroll-list li {
			width: 93%;
			height: 70px;
			padding: 10px;
			border-bottom: 1px solid #CCC;
			float: left;
			overflow: hidden;
		}
		.vert_tintuc .simply-scroll-list li img {
			width: 100px;
			height: 72px;
			float: left;
			margin-right: 10px;
		}
		.vert_tintuc .simply-scroll-list li h3{
				font-family: Arial;
				font-size: 13px;
				font-weight: bold;
				color: #333333;
				height: 30px; overflow: hidden;
		}
		.vert_tintuc .simply-scroll-list li h3 a{
			color: #333333;
		}
		.vert_tintuc .simply-scroll-list li p{
			font-family: Arial;
			font-size: 12px;
			text-align: justify;
			color: #333333;
		}
.vert_doitac { /* wider than clip to position buttons to side */
	width: 100%;
	height: 304px;
}

	.vert_doitac .simply-scroll-clip {
		width: 100%;
		height: 304px;
	}
	
		.vert_doitac .simply-scroll-list {}
		
		.vert_doitac .simply-scroll-list li {
			width: 282px;
			height: 100px;
			margin-bottom: 2px;	
			float: left;
		}
		.vert_doitac .simply-scroll-list li img {
			width: 282px;
			height: 100px;
		}

.verti { /* wider than clip to position buttons to side */
	width: 100%;
	height: 284px;
	/*margin-top: 1em;
	margin-bottom: 1em;*/
}

	.verti .simply-scroll-clip {
		width: 100%;
		height: 284px;
	}
	
		.verti .simply-scroll-list {}
		
		.verti .simply-scroll-list li {
			
		}
		.verti .simply-scroll-list li img {}


.vert-img { /* wider than clip to position buttons to side */
	width: 100%;
	height: 140px;
	margin-top: 1.2em;
	margin-bottom: 1.2em;
}

	.vert-img .simply-scroll-clip {
		width: 100%;
		height: 140px;
	}
	
		.vert-img .simply-scroll-list {}
		
		.vert-img .simply-scroll-list li {
			
		}
		.vert-img .simply-scroll-list li {
			float: left;
			width: 100%;
			height: auto;
			margin-bottom: 15px;
			border: 1px solid #000000;
			box-sizing: border-box;
		}
		.vert-img .simply-scroll-list li img {
			width: 100%;
			float: left;
			box-sizing: border-box;
			border: 5px solid transparent;
		}
		.vert-img .simply-scroll-list li img {}