/*------------------------------------------------------------------------------
Style Sheet for the nanasbooksforkids website

version:		1.0
date:			September 26, 2006
author:			Jim Stephenson
email:			kineticjim@stephensonmusic.com
			jim@lockportucc.org  
			jim@kineticjim.com
			sstephenson_lock@hotmail.com
website:		www.nanasbooksforkids.com
------------------------------------------------------------------------------*/

/* Tag resets ------------------------------------------------------*/

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, address, th, td {
margin : 0;
padding : 0;
}

h2, h3, h4, h5, h6 {
font-size : 100%;
font-weight : normal;
}

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

table {
border-collapse : collapse;
border-spacing : 0;
}

caption, th {
text-align : left;
}

fieldset, img {
border : 0;
}

dt, address, caption, cite, code, dfn, em, i, strong, b, th, var {
font-style : normal;
font-weight : normal;
}

q:before, q:after {
content : '';
}

/* Basic tag formatting ------------------------------------------------------*/

body			{	
			font-family:		verdana, arial, sans-serif;
			font-size:		100%;
			font-weight:		500;
			text-align:		center;
			min-width:		850px;
			background-color:	#333366;	
			background-image:	url(../blkblugrad.jpg);
			background-repeat:	repeat-x;	
			}

h1			{	
			font-family:		"lucida sans unicode", verdana, arial, sans-serif;
			font-size:		20px;
			font-weight:		900;
			color:			black;
			margin-left:		0px;
			margin-top:		0em;
			margin-bottom:		0em;		
			}

h2			{	
			font-family:		"Franklin Gothic Book", Tahoma, Arial, sans-serif;
			font-size:		120%;
			font-weight:		900;
			color:			#000080;
			margin:			18px 0 0 6px;
			line-height:		18px;
			}

h3			{	
			font-family:		Verdana, Arial, sans-serif;
			font-size:		90%;
			font-weight:		900;
			color:			black;
			margin:			18px 12px 12px 18px;
			padding:		0;		
			}

h4			{	
			font-family:		"News Gothic MT", verdana, arial, sans-serif;
			font-size:		90%;
			font-weight:		900;
			color:			#404040;
			margin-top:		.2em;
			margin-bottom:		.2em;
			margin-right:		0;		
			}

h5			{	
			font-family:		verdana, arial, sans-serif;
			font-size:		80%;
			font-weight:		500;
			color:			black;
			margin-left:		10px;
			margin-right:		5%;
			margin-top:		.4em;
			margin-bottom:		.4em;		
			}

h6			{	
			font-family:		"Comic sans MS", Arial, sans-serif;
			font-size:		150%;
			font-weight:		600;
			color:			#000080;
			margin-top:		0em;
			margin-bottom:		.2em;		
			}

li			{	
			font-family:		Arial, sans-serif;
			font-size:		100%;
			font-weight:		500;
			color:			black;
			margin-top:		0em;
			margin-bottom:		0em;		
			}

p			{	
			font-family:		Verdana, Arial, sans-serif;
			font-size:		12px;
			margin:			0 12px 12px 18px;
			padding:		0 12px 0 0;
		  	line-height:		14pt;
			}



/* Banner ID's --------------------------------------------------------------*/

#overall		{
			position:		relative;
			height:			2200px;
			background:		#ffffff;
			top:			10px;
			width:			850px;
			margin:			0px auto;
			text-align:		left;
			}

#topBanner		{	
			position:		relative;
			z-index:		1;
			width:			100%;
			height:			106px;
			background:		#ffffff 	
			}
			
#topBanner h1		{	
			position:		relative;
			float:			left;
			width:			430px;
			height:			50px;
			text-align:		center;
			z-index:		10;
			font-family: 		georgia, serif;
			font-style:		italic;
			font-size:		26px;
			font-weight:		500;			
			color:			#000080;
			top:			42px;
			margin:			0px 0 0 12px;
			}
			
#topBanner h6		{
			float: 			left; 
			margin-left: 		10px; 
			width: 			475px; 
			height: 		50px; 
			text-align: 		center; 
			z-index:		10;
			}
			
#topBanner twolinesmall	{
			font-size:		14px;			
			}

#topBanner span.author	{
			font-size:		20px;
			color:			#333333;
			font-family:		verdano, san-serif;
			font-style:		italic;
			line-height:		26px;
			}

#basicNav		{
			position:		relative;
			float:			right;
			background-color:	transparent;
			top:			22px;
			width:			240px;
			height:			20px;
			z-index:		3;
			font-family:		"trebuchet ms",arial,sans-serif;
			text-align:		left;
			font-size:		70%;
			font-weight:		500;
			color:			#333333;			
			}

#bannersub1		{
			position:		absolute;
			width:			60%;
			border:			1px solid red;
			top:			20px;
			left:			250px;
			}
			
#bannersub2		{
			position:		absolute;
			width:			40%;
			top:			50px;
			left:			250px;
			}

#bannersub3		{
			position:		absolute;
			width:			60%;
			top:			8px;
			left:			250px;
			}
			
#topBanner img 		{
			position:		relative;
			float:			left;
			height:			76px;
			left:			12px;
			top:			18px;
			}

#orangeBox 		{
			position : absolute;
			top : 20px;
			right : 12px;
			z-index : 2;
			width : 40px;
			height : 50px;
			background-color : rgb(254, 198, 12);
			background-image : url(yellowBook.jpg);
			border : 1px solid #cccc33;
			}

#redBox 		{
			position : absolute;
			top : 40px;
			right : 42px;
			z-index : 2;
			width : 40px;
			height : 50px;
			background-color : rgb(237, 28, 36);
			background-image : url(redBook.jpg);
			border : 1px solid #990033;
			}

/* Top Navigation ID's --------------------------------------------------------------*/

#topNavigation		{	
			position: 		relative; 
			width: 			850px;
			text-align:		center; 	
			background-color: 	#ffeeaa; 
			}
			
#topNavigation table	{
			width:			100%;
			}

#pulldownWrapper 	{	
			position: 		absolute; 
			top: 			131px; 
			z-index: 		2;	
			}

#typePullDown		{	
			position: 		absolute; 
			width: 			200px; 
			left: 			130px;	
			}

#agesPullDown		{	
			width: 			200px;	
			}

#authorsPullDown 	{	
			width: 			200px;	
			}

#otherInfoPullDown 	{	
			width: 			200px;	
			}

#table2			{	
			border-collapse: 	collapse;
			visibility: 		hidden;	
			}

#table3			{	
			position: 		absolute; 
			border-collapse: 	collapse; 
			visibility: 		hidden; 
			left: 			260px;	
			}

#table4			{	
			position: 		absolute; 
			border-collapse: 	collapse; 
			visibility: 		hidden; 
			left: 			390px;	
			}

#table5			{	
			position: 		absolute; 
			border-collapse: 	collapse; 
			visibility: 		hidden; 
			left: 			520px;	
			}

/* mainBody ID's --------------------------------------------------------------*/

#mainBody		{	
			position:		relative;
			float:			left;
			width: 			620px; 
			z-index: 		1; 
			background: 		#ffffee; 
			border-right: 		#ddddd0 solid 1px;
			text-align: 		left;
			margin:			18px 0 0 0;
			}

#rightSide		{	
			position:		relative;
			float:			right;
			margin:			18px 6px 0 0;
			display:		inline;
			width: 			210px; 
			}
			

#footerWrapper		{	
			position: 		relative; 
			width: 			850px; 
			height: 		20px; 
			border:			red solid 0px;
			background-color: 	#ddddd0; 
			bottom: 		0px; 
			margin:			0px auto;
			text-align: 		center;
			clear:			both;	
			}

/* rightSide ID's and classes ----------------------------------------------*/

.rsbkinfo		{
			background-color: 	#eeeee0;
			padding-top:		0px;
			padding-bottom:		20px;			
			}
			
.rsbkinfo p 		{
			padding:		0px 12px 20px 12px;
			font-size:		12px;			
			}
			
.rsbkinfo h2, 
  .rsbkinfo h3, 
    .rsbkinfo h4 	{
    			padding:		20px 12px;		
    			}
    
.rsblAinfo		{        
			position:		relative;
			background-color:	#f6f6f6;
			width:			210px;
			float:			right;
			display:		inline;
			margin:			5px 6px 30px 0px;
			border-right: 		1px solid #ddddd0;
			border-bottom: 		2px solid #ddddd0;
			}
			 									 						
.rsblAinfo p		{
			margin:			6px;
			color:			#000000;
			font-family:		verdana, arial, sans-serif;
			font-size:		75%;
			}
			
.rsblAinfo tr	{
			padding:		6px;

			}
									
.rsblAinfo img		{									
  			position: 		relative; 
  			width:			90px; 
  			display: 		inline; 
  			float: 			left; 
  			margin: 		12px 6px 0 6px;
  			}
  			
.rsblAinfo div		{
 			position: 		relative; 
 			margin-top: 		10px; 
 			height: 		135px;		
 			}

.shirleyslist li	{
			margin:			6px 6px 6px 24px;
			font-size:		12px;
			font-style:		italic;
			}


		
 #rsOne			{	
			position: 		relative; 
 			width: 			100%; 
			background-color: 	#eeeee0;
			font-size:		80%;
			border-style: 		solid; 
			border-width: 		0px; 
			border-color: 		rgb(26,123,48); 
			padding: 		0px;		
			}

.rsOne			{	
			position: 		relative; 
			width: 			100%; 
			background-color: 	#eeeee0;
			font-family:		verdana, arial, sans-serif;
			font-size:		80%;
			border-style: 		solid; 
			border-width: 		0px; 
			border-color: 		rgb(26,123,48); 
			padding: 		0px;		
			}

#rsTwo			{	
			position: 		relative; 
			width: 			100%; 
			background-color: 	#eeeee0; 
			border-style: 		solid; 
			border-width: 		0px; 
			border-color: 		rgb(26,123,48); 
			padding: 		0px;		
			}

#rsThree		{	
			position: 		relative; 
			width: 			100%; 
			background-color: 	rgb(112,195,126); 
			border-style: 		solid; 
			border-width: 		0px; 
			border-color: 		rgb(26,123,48); 
			padding: 		0px;		
			}

#rblock4 		{
			float : right;
			position : relative;
			width : 100%;
			background : #ffeeaa;
			border-right : 1px solid #ddddd0;
			border-bottom : 2px solid #ddddd0;
			margin : 12px 0 0 0;
			padding : 0 0 6px 0;
			}


/* navigation classes ---------------------------=================-------------*/	

.menu-top		{	
			background-color:	#ffeeaa;
			font-family:		arial;
			font-size:		12px;
			font-weight:		bold;
			line-height:		20px;
			text-align:		center;
			border: 		0px solid rgb(0,174,239);
			}
		
.menu-sub2		{	
			background-color:	rgb(254,198,12);
			font-family:		arial;
			font-size:		11px;
			font-weight:		bold;
			line-height:		16px;
			text-align:		left;
			left:			0px;
			position:		relative;
			top:			0px;
			padding-left:		10px;	
			}

/* mainBody classes ---------------------------=================-------------*/	

.ttlblk			{	
			margin:			18px 12px 36px 18px;
			top:			12px;
			height:			30px;
			font-size:		12px;
			font-weight:		900;
			color:			#000080;
			font-family:		Verdana, sans-serif;
			}
			
.teaseblk		{
			margin:			18px 0px 6px 18px;
			}
			
.teaseblk p		{
			font-family:		Verdana, sans-serif;
			font-style:		italic;
			font-size:		12px;
			font-weight:		900;
			color:			#330080;
			margin:			6px 0 0 0;
			line-height:		18px;
			}			

.bkblk			{	
			position: 		relative;
			width:			100%;
			top:			0px;
			left:			0px;
			vertical-align: 	top; 
			text-align: 		left;	
			}
			
.bkblk p		{	
			margin:			6px 0px 0px 18px;
			font-size:		12px;
			font-weight:		500;
			font-family:		Verdana, sans-serif;
			}
			

			
.picblk			{	
			position: 		absolute; 
			top: 			6px; 
			left: 			18px;	
			margin:			18px 0 0 0px;
			}
			
.used			{	
			position:		absolute;
			font-size:		12px;
			font-style:		italic;
			color:			red;
			background:		yellow;
			top:			55px;
			left:			200px;	
			z-index:		5;	
			}
			
.datblk1		{	
			position: 		absolute; 
			font-family:		verdana;
			font-style:		italic;
			line-height:		14px;
			width: 			100px; 
			top: 			0px; 
			left: 			290px;	
			margin:			24px 0 0 0;	
			}			
			
.datblk2		{	
			position: 		absolute; 
			width: 			180px; 
			top: 			0px; 
			left: 			420px;
			line-height:		14px;
			margin:			24px 0 0 0;	
			}			
			
.prcblk1		{	
			position: 		absolute; 
			font-family:			verdana;
			line-height:		14px;
			height: 		40px; 
			width: 			100px; 
			top: 			228px; 
			left: 			290px;	
			}

.prcblk2		{	
			position: 		absolute; 
			font-family:			verdana;
			line-height:		14px;
			height: 		40px; 
			width: 			85px; 
			top: 			228px; 
			left: 			420px;	
			}			

.crtblk			{	
			position: 		absolute; 
			height: 		30px; 
			width: 			30px; 
			top: 			192px; 
			left: 			542px;	
			}

.crttxt			{	
			position: 		absolute; 
			height: 		30px; 
			width: 			90px; 
			font-family:		verdana, sans-serif;
			font-size:		10px;
			top: 			242px; 
			left: 			526px;	
			}


.awdblk			{	
			position: 		relative; 
			font-family:		verdana;
			width: 			320px; 
			top: 			298px; 
			left: 			290px;	
			}
			
.awdblk	h5		{	
			font-weight:		bold;
			}

.awdblk div		{
 			font-size: 		12px; 
 			font-weight: 		normal; 
 			margin-left: 		9px;
 			}
			
.autblk			{	
			position: 		relative;
			font-family:		verdana;
			width: 			100%;
			top:			6px;
			}

.autblk	p		{	
			color:			green;
			margin:			18px;
			}

.autblk h5		{	
			margin:			12px 0 -12px 15px;
			font-weight:		bold;
			}

.infoblk		{	
			position: 		relative; 
			float:			left;
			width:			100%;
			margin:			300px 0 0 0; 		
			left: 			0px;		
			}

.infoblk li		{
			margin:			6px 0px 0px 30px;	
			font-family:		Verdana, sans-serif;
			font-style:		italic;
			font-size:		12px;
			}
			
/*			
.infoblk p		{	
			padding:		0px 12px 20px 0px;
			font-size:		12px;		
			}	

.infoblk h3		{	
			padding:		20px 0px;	
			}
*/

	
/* More classes ---------------------------------------------------------*/	

* html .picblk		{	
			width:			225px;		
			}
			
.bppic			{	
			border:			0px solid;
			line-height:		300px;
			vertical-align:		middle;
			width:			190px;
			}			

.subhead		{	
			position: 		relative; 
			border: 		0px solid rgb(0,174,239); 
			height: 		40px; 
			text-align: 		center;	
			}

.tB			{
			position:		relative;
			left: 			0px;
			}

.bold			{	
			font-weight:		bold;		
			}

.white			{	
			color:			white;		
			}

.black, .active		{	
			color:			black;		
			}

.logoblue		{	
			color:			rgb(0,174,239);			
			}

.logoyellow		{	
			color:			rgb(254,198,12);		
			}

.logogold		{	
			color:			rgb(247,148,29);		
			}

.logored		{	
			color:			rgb(237,28,36);			
			}

.logogreen		{	
			color:			rgb(26,123,48);			
			}

.logoflesh		{	
			color:			rgb(253,198,138);		
			}

			
.rightSide		{	
			line-height:		12pt;
			font-size:		75%;
			padding-left:		5px;
			padding-right:		5px;		
			}

.smMgn			{	
			margin-left:		5%;
			margin-right:		5%;		
			}

.for			{	
			font-size:		80%;
			font-style:		italic;
			margin-left:		2%;
			margin-top:		-.5em;		
			}


/* Link formatting ----------------------------------------------------------*/

A:Link			{	
			text-decoration: 	none;
			color: 			red;
			font-weight: 		bold;		
			}

A:Visited		{	
			text-decoration: 	none;
			color: 			red;
			font-weight: 		bold;		
			}

A:Active		{	
			text-decoration: 	none;
			color: 			red;
			font-weight: 		bold;		
			}

A:Hover			{	
			text-decoration: 	none;
			color: 			black;
			font-weight: 		bold;		
			}
			
A.basnav:Link	  	{	
			font-size:		100%;	
			text-decoration: 	none;
			color: 			#333333;
			font-weight: 		bold;		
			}

A.basnav:Visited  	{	
			font-size:		100%;	
			text-decoration: 	none;
			color: 			#333333;
			font-weight: 		bold;		
			}

A.basnav:Active	  	{	
			font-size:		100%;	
			text-decoration: 	none;
			color: 			#333333;
			font-weight: 		bold;		
			}

A.basnav:Hover	  	{	
			font-size:		100%;	
			text-decoration: 	underline;
			color: 			#9999cc;
			font-weight: 		bold;		
			}