/* CSS file for www.sjlibary.org
** default font-size:12px
** default color: #000000; -- for text only
** default font-family: Arial, Helvetica, sans-serif;
*/
html 
{	margin: 0;
	padding: 0;
}
body
{	background-color: #ffffff;
	margin: 0px;	
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;	
	color: #000000;
}
p, dl, dt, ol, ul, li, blockquote, table, td, th, 
.black12, div, span, sup, form, label, input, select, textarea
{	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;	 
}
/************** image control *******************/
td#topcorner, #topcorner	/* corner image */
{	width: 15px;
	height: 10px;
	border: 0;
	background: #ffffff url("/images/w3.gif") no-repeat;	
	background-position: left top;
}
td#bottomcorner, #bottomcorner /* corner image */
{	width: 15px;
	height: 10px;	
	border: 0;
	background: #ffffff url("/images/w2.gif") no-repeat;	
	background-position: left bottom;
}
/************** background color and images *******************/
td#leftnav, table#leftnav, td#footerLine, table#footerLine, #sidebar, #sidebar1
{	background-color: #336699;
}
.bgcolor, .leftColBgColor, .footerBgColor
{	background-color: #336699;
}
.bgcolorLtBlue
{	background-color: #6699cc;
}
.bgcolorBody
{	background-color: #FFFFFF;
}
.bgcoloryellow
{	background-color: #FFFFCC;
}
.bgcoloryellow1
{	background-color: #FFFFF0;
}
.bgcolorgray
{	background-color: #CCCCCC;
}
#sidebar1
{	line-height: 11.5px; 
	white-space: wrap;
	padding: 6px 3.5px 5px 6px;
}
.bgimage1
{
	padding:10px 0 0 29px;
	height:37px;
	background: url(/images/promo_icon_arrow2.gif) 0 17px no-repeat; /*20px 0 equals horizontal and vertical position of arrow. Adjust as desired (ie: 20px -5px).*/
}
.bgimage2
{
	padding:10px 0 0 18px;
	height:30px;
	background: url(/images/promo_texting.jpg) 0 10px no-repeat; /*20px 0 equals horizontal and vertical position of arrow. Adjust as desired (ie: 20px -5px).*/
}
.bgimage3
{
	padding:10px 0 0 29px;
	height:37px;
	background: url(/images/promo_icon_arrow2.gif) 0 17px no-repeat; /*20px 0 equals horizontal and vertical position of arrow. Adjust as desired (ie: 20px -5px).*/
}
.bgimage4
{
	padding:0 0 0 18px;
	height:18px;
	background: url(/images/icon_notice.gif) 0 2px no-repeat; /*20px 0 equals horizontal and vertical position of arrow. Adjust as desired (ie: 20px -5px).*/
}

.bgimage5
{
	padding:0 0 0 18px;
	background: url(/images/icon_notice.gif) 0 2px no-repeat; /*20px 0 equals horizontal and vertical position of arrow. Adjust as desired (ie: 20px -5px).*/
}
/************** text alignment *******************/
.aligncenter
{ text-align: center;
}
.alignleft
{ text-align: left;
}
.alignright
{ text-align: right;
}
.nowrap				/* force text graphic not to wrap */
{	white-space : nowrap;
}
.autoalign {margin-left:auto;margin-right:auto;}
/************** links *******************/
A:link, A.drop:hover, A.leftnavheader, A.leftnavOn, A.blue12, A.ltblue,
A.small, A.text, A.textbold, A.text12, A.text11, A.texthover, A.menu:hover,
A.gray12, A.text14bold
{	font-family: Arial, Helvetica, sans-serif;
	color: #0000FF;
	font-size: 12px;
	text-decoration: underline;	
}
A.blacklink, A.drop, A.leftnav, A.leftnav2, A.leftnavheader, 
A.menu
{ 	color: #000000; 	
	text-decoration: none;
}
A.leftnav, A.leftnav2, A.leftnavOn, A.leftnavheader, A.orange14bold, A.textbold, A.text14bold
{	font-weight: bold;
}
/* size */

A.orange14bold, A.texthover14, A.text14bold, A.blue14
{	font-size: 14px; 	
}
A.breadcrumbing, A.blue11, A.drop, A.drop:hover, A.footer, 
A.leftnav, A.leftnav2, A.ltgreen11, A.orange, A.small, A.text11,
A.texthover11, A.menu, A.menu:hover, A.red11
{	font-size: 11px; 	
}
/* color */
A.blue12, A.blue11, A.blue14
{ 	color: #00319C; 
}
A.ltblue
{ 	color: #336699; 
}
A.footer, A.gray12
{	color: #666666;
}
A.leftnav, A.leftnav2:hover, A.leftnavheader:hover
{ 	color: #ffffff; 
}
A.leftnav:hover, A.leftnavOn, A.leftnav2, 
A.leftnavheader
{	color: #ffff99; 
}
A.ltgreen11, A.ltgreen12
{	color: #666633;
}
A.orange, A.orange12, A.orange14bold, A.texthover11:hover, A.texthover:hover, A.texthover14:hover
{	color: #996600;
}
A.red, A.red11, A.breadcrumbing
{ 	color: #9F0101; 
}
A.menu
{	background-color: #FFF; 
	cursor: pointer;
	display: block;  
 	margin: 1px 5px 1px 6px; /* top right bottom left */
 	padding: 0 0 1px 0; /* top right bottom left */
}

#layer1Menu
{	Z-INDEX: 50;
    LEFT: 2px;
    VISIBILITY: hidden;
    POSITION: absolute;
    TOP: 118px; /*original 128 */
	WIDTH: 139px;
  	background-color: #FFF;
  	border: 1px solid #000;
  	text-align: left;	
}
/************** form fields *******************/
.input
{	width: 350px;
}
.input2
{	width: 250px;
}
/************** for text size/bold *******************/
.title18, .blue18bold, .gray18, h2, .red18bold, .yellow18, .titlewhite18
{ 	font-size: 18px;	
	font-weight: bold;  	
}  
.black16bold, .blue16bold, .orange16, .yellow16bold, .white16bold
{	font-size: 16px;	
	font-weight: bold;
}
.titlewhite14, .black14, .bluenavy14, .orange14, .reddark14,
.white14, h3
{	font-size: 14px;	
}
.title14, .black14bold, .blue14bold, .orange14bold, .reddark14bold,
.white14bold, .yellow14bold
{	font-size: 14px;	
	font-weight: bold;
}
.black12, .blue12, .bluelink, .gray12, .green12, .orange12, .white12
.red12, .reddark12, .yellow12, .ltgreen12, h4
{	font-size: 12px;	 
}
.black12bold, .blue12bold, .orange12bold, .red12bold, .red12bold, 
.reddark12bold, .orange12bold, .white12bold, .yellow12bold
{	font-size: 12px;
	font-weight: bold;
}
.black11, .blue11, .bluenavy11, .gray11, .orange11, 
.red11, .reddark11, .ltgreen11, small, #breadcrumbing, #pageInfo
{	font-size: 11px;	
}

.reddark11bold
{	font-size: 11px;
	font-weight: bold;
}

.black8
{	font-size: 8px;	
}
/************** heading titles *******************/
h1, .hideMe
{	display: none;
}
h2
{	padding-top: 10px;
}
/************** for text color/other *******************/
.titlewhite14, .titlewhite18, .white16bold, .white14, .white14bold, .white12, .white12bold
{	color: #ffffff;
}
.bluelink
{	color: #0000FF;
}
.blue18bold, .blue16bold, .blue12bold, .blue14bold, .blue12, .blue11
{ 	color: #00319C;  
}
.dkblue12
{	color: #000099;
}
.bluenavy14, .bluenavy11
{ 	color: #336699; 
}
.gray18, .gray12, .gray11
{	color: #666666;
}
.green12
{	color: #009900;
}
.ltorange
{	color: #996633;
}
.ltgreen12, .ltgreen11
{	color: #666633;
}
.olive18 {color: #556B2F; font-size: 18px;}
.orange16, .orange14, .orange14bold, .orange12, .orange11
{	color: #996600;
}
.red18bold, .red12bold, .red12, .red11
{	color: #FF0000;
}
.reddark18,.reddark14, .reddark14bold, .reddark12, .reddark12bold, .reddark11, .reddark11bold
{	color: #9F0101;
}
.yellow18, .yellow16bold, .yellow14bold, .yellow12, .yellow12bold
{	color: #ffff99;
}

/************** banner's search box *******************/
table#banner td#bannerBG
{	width: 205px;
	height: 72px;
	border: 0;
	background: #ffffff url("/images/banner_home_04.gif") no-repeat;	
	background-position: left top;
}
#banner td#bannerBG #search
{
	float:	left;
	position: relative;
	top: 3.8px;
}
#banner td#bannerBG #go
{
	float: left;
	position: relative;
}
#banner td#bannerBG #search label .searchFld
{
	width: 160px;
	height: 14px;
	color: #666666;
}
/************** temporary survey for banner *******************/
.valign {vertical-align:middle}
#survey {
	background:#ffffcc;
	text-align:center;
	font-weight:bold;
	margin:0;
	width:auto;
	padding:5px;
	border-bottom:1px solid;
	border-color:#000000;
}
/************** border color for box *******************/
.borderltgray
{	border-color: #CCCCCC;
}
.borderwhite
{ 	border-color: #ffffff; 
}

/************** id/div *******************/
#breadcrumbing
{	padding-top: 14px;
}
#pageInfo
{	padding-top: 30px;
}
/******************* PADDINGS/SPACING *******************/
/*-- spacing:ALL --*/
.noindent {margin:0 ;padding:0;}
.space1 {padding:1px;}
.space5 {padding:5px;}
/*-- left/right spacing --*/
.left5, .leftright5
{ 	padding-left: 5px;
	margin-left: 5px;
}
.leftM5
{ 	
	margin-left: 10px;
}
.leftright5
{ 	padding-right: 5px;
}
.right5
{ 	padding-right: 5px;
}
.right10
{ 	padding-right: 10px;
}
.rightM10
{ 	margin-right: 10px;
}
.left10
{ 	padding-left: 10px;
	margin-left:10px;
}
.left15
{ 	padding-left: 15px;
	margin-left:15px;
}
.top10
{ 	padding-top: 10px;
	margin-top:10px;
}
.top5
{ 	padding-top: 5px;
	margin-top:5px;
}
.top3
{ 	padding-top: 3px;
	margin-top:3px;
}
.bottom3
{ 	padding-bottom: 3px;
}
.bottom4
{ 	padding-bottom: 4px;
	margin-bottom: 4px;
}
.bottom5
{ 	padding-bottom: 5px;
	margin-bottom: 5px;
}
.bottom10
{ 	padding-bottom: 10px;
	margin-bottom:10px;
}
.blockquote
{ 	padding-left: 40px;
	padding-right: 40px;
}

/************** box *******************/
#rightBox
{
	width: 130px;
	height: 100px;
	border: 1px;
	color: #eeeeee;
	padding: 2px
}
#rightBox2
{
	width: 215px;
	height: 100px;
	border: 1px solid #CCCCCC;
	padding: 5px;
	margin:0 0 0 5px;
}
.box
{	
	border: 1px solid #CCCCCC;
	padding: 5px; /* top bottom right left */
	margin: 5px 0 0 0; /* top right bottom left */
}	
.box1
{	
	border: 1px solid #936516;
	padding: 5px; /* top bottom right left */
	margin: 5px 0 0 0; /* top right bottom left */
}	
.box2
{	
	border: 1px solid #336699;
	padding: 5px; /* top bottom right left */
	margin: 5px 0 0 0; /* top right bottom left */
}	
/************** parallel columns block for text *******************/
.block {display:block;position:relative;}
.block1 
{
	position: relative;
	float: left;
	width: 303px;
	padding: 0px 5px 0px 0px; /* left right top bottom */
}
.block2 
{
	position: relative;
	float: left;
	width: 260px;
	padding: 0px 5px 0px 0px; /* left right top bottom */
	margin: 0 30px 0 0; /* top bottom right left */
}
.promoteImg
{
	float:left;
	margin:0 3px 0 3px;
}
.block3
{
	float: left;
	width: 230px;	
}

/************** force text to wrap *******************/
.textWrap12
{	width:450px;
} 
.textWrapShort
{	width:420px;
} 
/******************* TEXT ALGINMENT, LINK TEXT DECORATION *******************/
.textcenter {text-align:center}
.textleft {text-align:left}
.textright {text-align:right}
.textnone {text-decoration:none}
.textline {text-decoration:underline}
.textFloatLeft { margin: 0 0 0 80px; /* top bottom right left */}
/******************* DIVIDER/LINE *******************/
hr {
	width:100%;
  	background-color:#808080;
 	border-style:none;
  	border-color:#808080;
  	color:#808080;
  	height:1px;
  	margin:10px 0 10px 0;
}
/************** highlighting ***********************/
.searchword {background-color: #f2f2f2}

/************** for images color *******************/
.blackImg 
{ 	border-color: #000000; 	
	/*padding: 0px 5px 0px 0px; /* left right top bottom */
}  
.grayImg 
{ 	border-color: #666666; 
}
.ltgrayImg 
{ 	border-color: #cccccc; 
}  
.feature
{	padding: 10px;
}
.image
{ 	margin: 15px 15px 5px 0; /* left right top bottom */
	background: #FFFFFF;
	border: 1px solid #000000;
}	
.imageNoborder
{ 	margin: 15px 15px 5px 0; /* left right top bottom */
	background: #FFFFFF;
	border: 0px;
}	
.noMargin
{
	margin: 0px;
}

.imageFloatLeft 
{
	text-align:left;
	float: left;
	clear: left;	
	margin: 0 5px 5px 0; /* top right bottom left */
}
.imageFloatRight 
{
	float: right;
	clear: right;	
	margin: 0 0 7px 0; /* top bottom right left */	
}
.imageTextLeft 
{
	float: left;
	clear: left;	
	margin: 0 5px 7px 0; /* top bottom right left */
	
}
.imagetest
{
	float: left;
	margin: 0 5px 0 0; /* top bottom right left */
	
}
.imageNotAvailable 
{
   width: 63px; 
   height: 94px;
   background: url("/images/notavailable.gif") top left no-repeat;
}
.photoNotAvailable 
{
   width: 78px; 
   height: 104px;
   background: url("/images/icon_photonotavailable.jpg") top left no-repeat;
}
a.video
{
   background: url("/images/icon_video.gif") no-repeat left;
   padding:0 5px 0 0;
}
/******************* CLEAR STYLES  *******************/
.leftpos {float:left;}
.rightpos {float:right;}
.centerpos {float:center;}
.clearL {clear:left;}
.clearR {clear:right;}
.styleClear {clear: both;}