/*
	CSS       : ScrollView.css
	Javascript: PWScrollView.js
	Test      : ScrollView.html

	-----------------------------------------------------------------------------------------
	
	Example:

	<!-- A scrollview consists of a main content area, an optional horizontal ruler and an optional vertical ruler.
	     If it has a vertical ruler, it must have a corner view too. The scroll positions between ruler and main content 
	     can be synced (see PWScrollView.js for more information). -->
	
	<div class="scrollview"> 
		
		<!-- This is the vertical ruler -->
		<div class="vertical ruler">

			<!-- If you have also a horizontal ruler, make sure to include this corner element.
				 This is the top left area in the scroll view, where the two rulers meet. -->
			<div class="corner"></div>

			<!-- "content" contains the content of the ruler -->
			<div class="content">

				...

			</div>		
		</div>

		<!-- This is the horizontal ruler. It has no content part, because it also has no corner part. -->
		<div class="horizontal ruler">
			<div>

				...

			</div>		
		</div>
		
		<!-- "main content" contains the main content -->
		<div class="main content">

			...

		</div>
	</div>

*/


.scrollview {
    height: 100%;
    position: relative;
    width: 100%;
}


.scrollview .horizontal.ruler {
    overflow: hidden;	/* Don't show scrollbars in rulers */
}

.scrollview .vertical.ruler {
    float: left;
    height: 100%;
    overflow: hidden; 	/* Don't show scrollbars in rulers */
    position: relative;
    width: 150px;		/* This is a default value. Can be overwritten in element style. */
}

.scrollview .vertical.ruler .content{
    overflow: hidden;   /* Don't show scrollbars in ruler content */ 
}

.scrollview .vertical.ruler .corner{
	position:  relative;
    height: 20px;			 
    width: 100%;
}

.scrollview .vertical.ruler .splitterHandle{
	position:absolute;
    top:0px;
    bottom:0px;
    right:0px;
    width:5px;
    cursor: col-resize;
    z-index:100000;
/*    background-color:rgba(255,0,0,0.25); */
}

.scrollview .verticalRulerSplitterHandle{
	position:absolute;
    top:0px;
    height:100%;
    left:0px;
    width:5px;
    cursor: col-resize;
    z-index:100000;
/*    background-color:rgba(255,0,0,0.25); */
}

.scrollview .main.content {
    overflow-y: auto;	/* By default show scrollers if needed */
    position: relative;
}

.scrollview .contentIFrame {
    overflow-y: auto;	/* By default show scrollers if needed */
    position: relative;
    width:100%;
    height:100%;
}

.scrollview .iFrameWrapper {
    overflow-x: hidden;
}