/**
Created by Rich
7/19/2010
**/
.jScrollPaneContainer {
	position: relative;
	overflow: hidden;
	z-index: 1;
}

/**
This is the style for the scrollbar's track.  the only thing you can change in this style
is the background color/image, which is commented below.
In order to change the width of the scrollbar, you MUST go into the script and do it manualy, then
reflect any changes in the images and css.
**/
.jScrollPaneTrack {
	/*Do not change*/
	position: absolute;
	cursor: default;
	right: 0;
	top: 0;
	height: 100%;
	
	/*image for the background of the track*/
	background:url(../images/track.gif) repeat-y; 

}

/**
This is the style for the main part of the scrollbar.  At present, it's set to grow to the 
full size, and fill that with the background-image specified.  
**/
.jScrollPaneDrag {
	position: absolute;
	cursor: default;
	overflow: hidden;
	
	/*image for the middle of the scroll bar*/
	background:url(../images/dragMid.gif) repeat-y 0 50%;
}
/**
This is the style for the top of the scroll bar(the top part of the actual slider).  If you make 
any changes to the image's height, make sure you update the *height* value in this style.
**/
.jScrollPaneDragTop {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	/*image for the background of the top of the scrollbar*/
	background:url(../images/dragTop.gif) no-repeat;
	/*make sure the height corrosponds to the height of the image*/
	height:10px;
}
/**
This is the style for the bottom of the scroll bar(the bottom part of the actual slider).  If you make 
any changes to the image's height, make sure you update the *height* value in this style.
**/
.jScrollPaneDragBottom {
	position: absolute;
	bottom: 0;
	left: 0;
	overflow: hidden;
	/*image for the background of the bottom of the scrollbar*/
	background:url(../images/dragBot.gif) no-repeat;
	/*height of the background image of the bottom of the scrollbar*/
	height:10px;
}
/**
This is the style for the up arrow on the track.  The only things to change here are 
the background-color (you shouldn't need to), the background image, and the height.
If you make any changes to the height of the actual image, make sure to reflect them
in this style.
**/
a.jScrollArrowUp {
	display: block;
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;
	
	
	background-color:#d5d6d8;
	background:url(../images/scrollUp.gif) no-repeat 0 0;
	height:10px;
}
/**
This is a style for when the user mouses over the up-arrow.  I didn't find any reason to change this, but you might.
**/
a.jScrollArrowUp:hover {
	/*background-color: #f60;*/
}
/**
This is the style for the down arrow on the track.  The only things to change here are
the background-color (once again, you shouldn't have to), the background image, and the height.
If you make any changes to the height of the actual image, make sure to reflect them in this style.
**/
a.jScrollArrowDown {
	display: block;
	position: absolute;
	z-index: 1;
	bottom: 0;
	right: 0;
	text-indent: -2000px;
	overflow: hidden;


	background-color:#d5d6d8;
	background:url(../images/scrollDn.gif) no-repeat 0 0;
	height:10px;
}
/**
This is a style for when the user mouses over the down-arrow.  I didn't find any reason to change this, but you might.
**/
a.jScrollArrowDown:hover {
	/*background-color: #f60;*/
}
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover {
	/*background-color: #f00;*/
}
/**
This ends the section for the actual scrollbar - the following section is for the containers, content, etc.
**/

This is the pane container.  This style is used to set the borders around the actual scrollable content.
**/
#paneContainer{
	/*This width and height MUST match the width and height of the pane it contains.*/
	float:left;
	width:348px; 
	height:309px;
	background-color:#eaeced;
	border-top:0px;
	border-left:#cccccc 1px solid;
	border-right:#cccccc 1px solid;
	border-bottom:#cccccc 1px solid;
	
}

#paneContainer1{
	/*This width and height MUST match the width and height of the pane it contains.*/
	float:left;
	width:348px; 
	height:309px;
	background-color:#eaeced;
	border-top:0px;
	border-left:#cccccc 1px solid;
	border-right:#cccccc 1px solid;
	border-bottom:#cccccc 1px solid;
	
}

#paneContainer2{
	/*This width and height MUST match the width and height of the pane it contains.*/

	float:left;
	width:347px; 
	height:309px;
	background-color:#eaeced;
	border-top:0px;
	border-left:#cccccc 1px solid;
	border-right:#cccccc 1px solid;
	border-bottom:#cccccc 1px solid;
	
}
/**
This is the actual pane itself.  This is where you would adjust the width and height of the viewable content.
If you make any changes to this, please make sure you update the width/height in the #paneContainer.
**/
#pane{

	width:347px;
	height:309px;
	border-bottom:#eaeced 15px solid;
	overflow:auto;/*DO NOT CHANGE - this sets the division to actually scroll*/

}

#pane1{

	width:347px;
	height:309px;
	border-bottom:#eaeced 15px solid;
	overflow:auto;/*DO NOT CHANGE - this sets the division to actually scroll*/

}
#pane2{
	
	width:347px;
	height:309px;
	border-bottom:#eaeced 15px solid;
	overflow:auto;/*DO NOT CHANGE - this sets the division to actually scroll*/

}
/**
This is the content style, which should encapsulate all the content that you wish to be scrollable.  
It sets up the margins.  Feel free to adjust these as you please.  All content will re-adjust.
**/
#content{
	margin-top:15px;
	margin-left:15px;
	margin-right:15px;


}

#content2{
	margin-top:15px;
	margin-left:15px;
	margin-right:15px;


}

#veil{
	width:330px; /* the width should be (containerWidth - scrollbarWidth)*/
	background-color:#eaeced; 
	height:15px; /*The height should match #content's margins*/
	top:-15px; /*Top should be -height*/
	position:absolute;
	top:336px;
	z-index:6;
}
/**
This is for the headline in the content, it's a mock-style I slapped together, feel free to adjust it as needed.
**/
.newsHeader{
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	line-height:16px;
	color:#666;
}
/**
This is for the date below the headline.  It has padding beneath it to space out from the actual paragraphs.
**/
.date{
	font-size:13px;
	font-weight:bold;
	line-height:16px;
	color:#3371af;
	padding-top:6px;
	padding-bottom:5px;
}

.readMore{
	font-family:Arial, Helvetica, sans-serif;
	font-size:11px;
	color:#3371af;
	padding-bottom:28px;
}

.readMore a{
	color:#3371af;

}

.subNav1{
	float:left;
	width:300px; 
	font-family:  Arial, sans-serif;
    font-size: 12px; 
	font-weight:bold;
	letter-spacing:.22em;
	color:#3371af;

}

.subNav1 a{
	color:#3371af;

}


.subNav2{
	float:left;
	width:300px; 
	font-family:  Arial, sans-serif;
    font-size: 12px; 
	font-weight:bold;
    padding-top:4px;
	letter-spacing:.22em;
	color:#3371af;
	padding-bottom:18px;
}

.subNav2 a{
	color:#3371af;

}
/**
This is the class for the actual content.  Contains the font size, family and color for the main-text in the pane.
**/

/**
Mock class to space out paragraphs.
**/
.content p{
	margin-top:0px;
	margin-bottom:15px;
}

.content1 p{
	margin-top:0px;
	margin-bottom:15px;
}


.content2 p{
	margin-top:0px;
	margin-bottom:15px;
}