/**
 *  skpl_style.css
 *
 *  For use with the South Kingstown Public Library Website.
 *  Author: LCWebConsulting.com
 *
 */

body{

	font-family: Arial,sans-serif;
	color: #333333;
	line-height: 1.166;
	margin: 0px;
	padding: 0px;
	text-align: center;
	background-color: #99CC99;
	font-size: 100%;
}

a:link, a:visited, a:hover {
	color: #336699;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	color: red;
}
/* overrides decoration from previous rule for hovered links */

h1, h2, h3, h4, h5, h6 {
	font-family: Arial, Helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
	color: #336699;
}

h1{
 font-family: Verdana,Arial,sans-serif;
 font-size: 150%;
font-weight: bold;

}

h2{
 font-size: 130%;
 font-weight: bold;

}

h3{
 font-size: 120%;
 font-weight: bold;

}

h4{
 font-size: 110%;
 font-weight: normal;

}

h5{
 font-size: 110%;
 
}

ul{
 list-style-type: square;
}

ul ul{
 list-style-type: disc;
}

ul ul ul{
 list-style-type: none;
}

label{
 font: bold 100% Arial,sans-serif;
 color: #334d55;
}
				

/***********************************************/
/* Layout Divs                                 */
/***********************************************/

*{
	padding: 0;
	margin: 0;
}

div#container {
	position: relative;
	top: 0px;
	left: 0px;
	padding: 0;
	margin: 0;
	width: 100%;
	background-color: #99CC99;
	text-align: center;

}

/**
 *   Top Banner Area
 */
div#topContainer {
	position: relative;
	top: 0px;
	left: 0px;
	padding: 0;
	margin: 0;
	width: 100%;
	height: 92px;
	background-color: #336699;
}

div#topContentContainer {
	position: relative;
	width: 772px;
	padding: 0;
	margin: 0 auto;
	text-align: left;
	
}

div#treeLogo{
    position: absolute;
	top: 0px;
	left: 0px;
	width:204px;	
	}


div#topMastHead{
	position: absolute;
	width: 568px;
	height: 92px;
 	padding: 0;
	margin: 0;
	top:0;
	right:0;
	text-align: left;
	
}

div#skplName{
	position: absolute;
	top: 0px;
	height: 72px;
	margin: 0;
	padding: 0;
	text-align: left;
}

/**
 *  Top image-based links - commented out as they are imported through individual stylesheets through various templates


div#topNav{
	position: absolute;
	top: 72px;
	left: 0px;
	width: 568px;
	height: 20px;
	margin: 0 0 0 0;
	padding: 0;
	text-align: right;

	
}

div#topNav ul{
margin: 0;
}

div#topNav ul li{

	list-style-type: none;
	float: left;

}

div#topNav ul li a {display: block; color: red;background-color: #99CC99;}
div#topNav ul li a span {display: none;}

div#topNav ul li a#current:link, div#topNav a#current:visited{
display: block; 
	width: 70px;
	height: 20px;
	background-image: url(../images/top_cat2.gif);
	background-repeat:no-repeat;
	margin: 0 0;
}


div#topNav ul li a#linkcatalog:link, div#topNav a#linkcatalog:visited{
	width: 70px;
	height: 20px;

	background-image: url(../images/top_cat_on2.gif);
	background-repeat:no-repeat;
	background-position:0 0;
}

div#topNav ul li a#linkcatalog:link:hover, div#topNav ul li a#linkcatalog:visited:hover{
	width: 70px;
	height: 20px;
	background-image: url(../images/top_cat2.gif);
	background-repeat:no-repeat;
	background-position:0 0px;
}

div#topNav ul li a#linkdatabases:link, div#topNav a#linkdatabases:visited{
	display: block; 
	width: 148px;
	height: 20px;
	background-image: url(../images/top_db.gif);
	background-repeat:no-repeat;

}

div#topNav ul li a#linkdatabases:hover{
	display: block; 
	width: 148px;
	height: 20px;
	background-image: url(../images/top_db_on.gif);
	background-repeat:no-repeat;
	background-position:0 0;
}


div#topNav ul li a#linklinks:link, div#topNav a#linklinks:visited{
	width: 78px;
	height: 20px;
	background-image: url(../images/top_link.gif);
	background-repeat:no-repeat;
	background-position:0 0;
}

div#topNav ul li a#linklinks:hover{
	width: 78px;
	height: 20px;
	background-image: url(../images/top_link_on.gif);
	background-repeat:no-repeat;
	background-position:0 0;
}

div#topNav ul li a#linkprograms:link, div#topNav a#linkprograms:visited{
	width: 139px;
	height: 20px;
	background-image: url(../images/top_prog.gif);
	background-repeat:no-repeat;
	background-position:0 0;
}

div#topNav ul li a#linkprograms:hover{
	width: 139px;
	height: 20px;
	background-image: url(../images/top_prog_on.gif);
	background-repeat:no-repeat;
	background-position:0 0;
}

div#topNav ul li a#linksupport:link, div#topNav a#linksupport:visited{
	width: 133px;
	height: 20px;
	background-image: url(../images/top_support.gif);
	background-repeat:no-repeat;
	background-position:0 0;
}

div#topNav ul li a#linksupport:hover{
	width: 133px;
	height: 20px;
	background-image: url(../images/top_support_on.gif);
	background-repeat:no-repeat;
	background-position:0 0;
}


*/


/**
 *   Content Area
 */
 
div#midContainer{
 	position: relative;
	padding: 0;
	margin: 0;
	width: 100%;
	background-color: #99CC99;
	text-align: center;

/***********************************************/
/* without height specification, background color does not show up on Firefox, which is why the background color is specified in the body tag*/
/***********************************************/

 }
 
div#midContentContainer {
 	width: 772px;
	margin: 0 auto;
	background-color: #99CC99;
	padding: 0;
	text-align: left;
	}

 


div#leftNavSection {
	width: 204px;
	padding: 0;
	margin: 0;
	float: left;
	background-color: #99CC99;
	z-index: 100;


	
}

div#leftURL img{
	padding: 0;
	text-align: left;
	margin: 0 20px 25px 0;

}





/* the horizontal menu starts here */
div#leftMenu {
	width:204px; 	/*  *changed****/
	float:left; /*makes the div enclose the list */
	margin: 0;
	font-size:.9em;	/* SET FONT-SIZE HERE */
	background-color:#99CC99; /* colors the div */
	padding: 0;


	}
div#leftMenu ul {
	margin:0 20px 0 0; /*indents ul from edge of container - left changed to 0 */
	padding-left: 0;
	list-style: none;
	/*border-top:1px solid #667F7F; dividers on the menu */	/*  *ADDED****/
	
	
}


div#leftMenu ul li {
	/*float:left;	/* causes the list to align horizontally instead of stack */ 	/*  *changed****/
	display: block;
	position:relative; /* positioning context for the absolutely positioned drop-down */
	/*list-style-type:none;	/* removes the bullet off each list item */
	background-color:#99CC99; /*sets the background of the menu items-#99CC99*/
	background-image: url(../images/arrow.gif);
	background-repeat: no-repeat;
	background-position: 0 .5em;
	border-bottom:1px solid #667F7F; /*dividers on the menu */	/*  *ADDED****/
	
	padding: 6px 0 6px 22px;/*sets the spacing between the menu items */
    margin: 0;
	z-index: 9;
	}



div#leftMenu ul li:hover { 
	background-color:#e6f6e6;
	background-image: url(../images/arrow_on.gif);
	background-repeat: no-repeat;
	background-position: 0 .5em;
	color:#000099; 
	border-right: 0px solid #666666;/*sets the background of the menu items-#EBEBF7 */
	
	border-bottom: 1px solid #667F7F;
	z-index: 20;

	}

div#leftMenu ul li:first-child {
	border-top:1px solid #667F7F; /*the top edge of the dropdown */
	}

div#leftMenu ul a {
	padding:0; /*creates space each side of menu item's text */
	text-decoration:none;	 /* removes the underlining of the link */
	color:#000099;	/* sets the type color -000099*/
	display: block;
	}
div#leftMenu ul a:hover {
	color:red;
	background-color:#e6f6e6;
	
	}
/* the menu ends here */

/* the drop-down starts here */
div#leftMenu ul li ul {
	margin:0; /* prevents the TEMP value inheriting from the horiz menu - OK to remove if you remove TEMP above */
	 /*  *ADDED**MOVES THE SUBMENU OVER TO BE TO THE RIGHT OF THE MAIN MENU **/

	position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
	width:150px; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
	display:none; /* by default the submenu does not show  */
	padding: 0 0px;
	margin: 0 0 0 0px;	
	background-color:#e6f6e6;
	background-image: none;
	border-left: 0px solid #666666;/*sets the background of the menu items-#EBEBF7 */
	border-right: 0px solid #666666;/*sets the background of the menu items-#EBEBF7 */
	border-bottom: 0px solid #666666;/*sets the background of the menu items-#EBEBF7 */
	top:-1px; /* ADDED - ALLIGNS THE POP-OUT WITH ITS PARENT */
	left:161px; /*aligns the drop exactly under the menu */

	}




div#leftMenu ul li ul li {
	width:100%; /* makes the list items fill the list container (ul) */
	
	background-color:#e6f6e6; /* ADDED - sets the background of the submenu items-#EBEBF7 */
	background-image: none;
	margin: 0 0 0px 0px;
	padding: 6px 8px;
	border-bottom:1px solid #667F7F;

	}
div#leftMenu ul li ul li:first-child {
	border-top:1px solid #667F7F; /*the top edge of the dropdown */
	
	}
div#leftMenu ul li ul li a{background-image: none;}

div#leftMenu ul li ul li:hover {background-image: none;}
/* make the drop-down display as the menu is rolled over */
div#leftMenu ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#leftMenu ul li:hover ul {display:block; } /* shows the drop-down when the menu is hovered */

div#leftMenu ul li ul li:hover ul {display:block;} /* shows the sub-drop-down when drop-down menu is hovered */
div#leftMenu ul li:hover ul ul {display:none;} /* conceals the sub-drop-down when drop-down menu not hovered */

div#leftMenu ul li ul li ul {left:158px;} /*aligns the sub-pop next to the pop - added for side version */

/* HACK ZONE - on hack only for IE */
* html div#leftMenu ul li ul {
    border-top:1px solid #667F7F; /*the top edge of the dropdown */
	}

/* END OF LIST-BASED MENU 
 tested in NN7, Opera, Firefox, IE6, IE5.5, IE5, on Windows and Safari and IE5 on Mac 
*/


/******** Main Content on the right column ********/
 div#mainContentSection {
	width: 568px;
 	padding: 0;
	margin: 0;
	float: left;
	background-color:  #EBEBF7;
	z-index: -100;

}

 div#contentTop {

 	padding: 0;
	margin: 0;
	/*height: 192px; (body content will not extend if include this spec*/

		

}
 div#contentContainer {

 	padding: 0;
	margin: 0;

		

}

div#contentBody{
	margin: 10px 10px;
}

 div#searchFormSection {
 	float: right;
	padding: 0;
	margin: 5px;
	width: 225px;
	text-align:left;
}

 div#searchFormSection h3{
 	padding: 0;
	margin: 5px 0 0 0;
	color: #333366;

}

 div#searchFormContainer form {
 	margin: 0;
	padding: 1em 0;
	border: 0px dotted red;

	
}


.keywordinput{
margin: 5px 0;
color: #000099;
background-color: #FFFFFF;
font-size: 90%;
font-family:Arial, Helvetica, sans-serif;
}

.searchbtn{
margin-top: 5px;
}

 div#contentPhoto {
 	float: left;
	width: 328px;
	padding: 0;
	margin: 0;
	text-align:left;



}


div#contentBranch {

 	background-color: #99CC99;
	margin: 0;
	padding: 0;


}
div#contentNews{

 	padding: 0;
	margin: 0;;
	background-color: #EBEBF7;

}

div#contentNewsHeader{

 	padding: 0;
	margin: 10px 0 10px 3px;
	

}

.contentNewsItems{

 	padding: 0;
	margin: 0 0px 10px 0;
	background-color: #EBEBF7;
	width: 568px;



}

.contentNewsIcon{

	float: left; 
	margin: 5px 5px 10px 3px;
	width: 22px;
}

.contentNewsItems p{
	float: left;
	width: 500px;
	margin-top: 0;
	margin-right: 15px;
	margin-bottom: 15px;
	margin-left: 0;
	font-size: 90%;
}
 

 .contentNewsItems p a{
	color: #000099;
	text-decoration: none;
}
 
  .contentNewsItems p a:hover{
	color: red;

	text-decoration: underline;
}
 
 
 
 
  /******** End Main Content on the right column********/




 /******** Footer ********/
div#btmContainer{
clear: both;
	padding: 0;
	margin: 0;
	width: 100%;
	background-color: #336699;
	height: 100px;
 }
 

div#footer{
	
	width: 773px;
	margin: 10px auto;
	text-align:center;
	color:#CCCCCC;
	font-size:0.8em;
	font-family:"Times New Roman", Times, serif;
	line-height:1.2em;
}

#footer p{
	margin:0; padding:0;
}
	
#footer a{
	color:#FFCC66; 
	text-decoration:none;
}

#footer a:hover{
	color:#CCCCCC; 
	text-decoration:underline;
}


/* CODES FOR CLEAR FLOATS */

.clearfix:after{
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block; /*A fix for IE Mac*/
	
}

/* backslash hack hides from IE mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* end backslash hack */


.clearthefloats{
clear: both;
}