/*------------------------------------------------------------------------------
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 : '';
}

#jan, #feb, #mar {
display:	none;
}



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

body {
height:  650px;
font-family : verdana, arial, sans-serif;
font-size : 100%;
min-width : 850px;
color : black;
background-color : #333366;
background-image : url(blkblugrad.jpg);
background-repeat : repeat-x;
}

h1 {
font-family : verdana, arial, sans-serif;
font-size : 28px;
font-weight : 500;
color : #000099;
}

h2 {
font-family : verdana, arial, sans-serif;
font-size : 22px;
font-weight : 500;
color : #166328;
margin-top : 0.35em;
margin-bottom : 0.15em;
}

h4 {
font-family : verdana, arial, sans-serif;
font-size : 90%;
font-weight : 900;
color : #404040;
margin-top : 0.2em;
margin-bottom : 0.2em;
margin-right : 0;
}

h5 {
font-family : verdana, arial, sans-serif;
font-size : 80%;
font-weight : 500;
font-style : normal;
color : black;
margin-right : 5%;
margin-top : 0.4em;
margin-bottom : 0.4em;
}

h6 {
font-family : georgia, serif;
font-size : 165%;
font-weight : 500;
font-style : italic;
color : navy;
margin-top : 0;
margin-bottom : 0;
}

p {
font-family : verdana, arial, sans-serif;
font-size : 75%;
margin-top : 0.5em;
margin-bottom : 0.5em;
text-indent : 0;
padding-left : 7px;
padding-right : 7px;
line-height : 18px;
}

#mainbody p {
padding : 0 20px;
}


#overall {
position : relative;
border : 0 solid #993333;
background-color : #ffffff;
color : black;
top : 10px;
width : 850px;
margin : 0 auto;
text-align : left;
clear : both;
height : 17600px;
}

#basicNav {
border : 0 solid rgb(237, 28, 36);
background-color : transparent;
float : right;
position : relative;
top : 18px;
right : 3px;
width : 240px;
height : 20px;
z-index : auto;
font-family : "trebuchet ms", arial, sans-serif;
font-size : 70%;
font-weight : 500;
letter-spacing : normal;
color : #333333;
z-index : 3;
}

#topBanner {
position : relative;
z-index : 1;
width : 100%;
height : 106px;
background : url(graphics/grad-ddd-fff.gif) repeat;
}

#topBanner h1 {
float : left;
font-family : georgia, serif;
font-style : italic;
font-weight : 500;
font-size : 175%;
color: #000000;
margin : 28px 0 0 20px;
width : 500px;
height : 25px;
text-align : center;
border : 0 solid #000000;
}

#topBanner h1.long {
width : 600px;
text-align : left;
}

#topBanner h1.twoLine {
margin-top : 12px;
}

#topBanner img {
height : 76px;
float : left;
position : relative;
left : 12px;
top : 15px;
}

#orangeBox {
position : absolute;
top : 18px;
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 : 36px;
right : 42px;
z-index : 2;
width : 40px;
height : 50px;
background-color : rgb(237, 28, 36);
background-image : url(redBook.jpg);
border : 1px solid #990033;
}

#mainBody {
float : right;
margin : 18px 12px 0 0;
width : 660px;
z-index : 1;
background : #dddddd;
border-right : 1px solid #ddddd0;
border-bottom : 2px solid #ddddd0;
text-align : left;
padding : 0 0 12px 0;
}

#mainBody div.pal	{
float : left;
position : relative;
width : 100%;
margin : 3px 0 0 0;
border : #cccccc solid 1px;
background : #eeeeee;
}
 
#mainBody div.intro p	{
padding : 0px 6px 6px 6px;
}
 
#mainBody div.intro h4	{
padding : 6px 6px 0px 6px;
line-height : 12px;
}

#rblock4 {
position : relative;
width : 100%;
background : #ffeeaa;
border-right : 1px solid #ddddd0;
border-bottom : 2px solid #ddddd0;
margin : 3px 0 0 0px;
font-size : 80%;
}


#mainBody div.pal h4	{
padding : 6px 6px 0px 6px;
line-height : 12px;
}

.pal hr	{
width : 50%;
margin-top : 24px;
}

#mainBody .pal .pic	{
float : left;
position : relative;
width : 150px;
/* height : 162px; */
margin:	18px 6px 6px 6px;
border : #000000 solid 0px;
text-align : center;
}

#mainBody .pic .yeardesc {
float : left;
position : relative;
width : 150px;
text-align : center;
}

.yeardesc p {
font-size : 10px;
margin : 6px;
line-height : 10px;
}

#mainBody .pic .popupwin	{
display : none;
position : absolute;
width : 480px;
background : #ffffff;
min-height : 0px;
z-index : 5;
left : 150px;
top : 0px;
text-align : left;
padding : 12px 0 0 12px;
}

#mainBody .pic:hover .popupwin	{
display : block;
cursor : pointer;
}

#mainBody img	{
position : relative;
width : 120px;	
/* height : 152px;	*/
border : #000000 solid 0px;
}

#mainBody .popupwin img	{
width : 240px;
float : left;
margin : 0;
display : block;
}

#mainBody .popupwin h3	{
margin : 12px 0 0 0px;
}

#mainBody .popupwin p	{
padding : 24px 0 0 112px;
}

#mainBody .popupwin ul	{
margin : 24px 0 0 240px;
width : 240px;
}

#mainBody .popupwin li	{
font-size : 11px;
line-height : 16px;
background : #cceecc;
padding : 0 0 0 12px;
}



#mainBody .popupwin li	.popupwin2	{
position : absolute;
width : 240px;
left : 0px;
top : 0px;
background : transparent;
border-right : #333333 solid 2px;
border-bottom : #333333 solid 2px;
display : none;
padding : 12px 0 0 12px;
line-height : 12px;
}

#mainBody .popupwin li:hover .popupwin2	{
display : block;
}

#mainBody .popupwin li.pink:hover .popupwin2	{
display : block;
background : #eeeeee;
line-height : 14px;
background : #cccccc;
font-size : 11px;
padding : 6px;
}

#mainBody .popupwin li.blue:hover .popupwin2	{
display : block;
background : #ffeeff;
line-height : 14px;
font-size : 11px;
padding : 6px;
}



#mainBody img.logoimage	{
float : right;
position : relative;
width : 65px;
height : 90px;
padding-left : 18px;
padding-right : 12px;
}
/*
#mainBody ul		{
float : left;
position : relative;
width : 120px;
min-height: 190px;
border : #cc0000 solid 0px;
margin : 12px 6px 0 6px;
}
*/
#mainBody ul.gal	{
float : left;
position : relative;
margin : 12px 0 12px 0;
width : 132px;
}

#mainBody .gal h3	{
font-family : verdana, arial, sans-serif;
font-size : 12px;
font-weight : 500;
line-height : 14px;
color : #000000;
margin : 6px 0 0 0;
padding : 0;
}


#mainBody ul.val	{
float : left;
position : relative;
margin : 12px 0 0 0;
width : 252px;
border : #00cc00 solid 0px;
}

#mainBody ul.sal1	{
float : left;
left : 0px;
position : relative;
width : 48px;
margin : 12px 0px 0 0px;
border : #0000cc solid 0px;
}

#mainBody .sal1 h3	{
font-family : verdana, arial, sans-serif;
font-size : 12px;
font-weight : 500;
line-height : 14px;
color : #000000;
margin : 6px 0 0 0;
padding : 0;
}
#mainBody ul.sal2	{
float : left;
left : 0px;
position : relative;
width : 60px;
margin : 12px 0 0 0;
border : transparent solid 0px;
}

#mainBody .sal2 h3	{
font-family : verdana, arial, sans-serif;
font-size : 12px;
font-weight : 500;
line-height : 14px;
color : #000000;
margin : 6px 0 0 0;
padding : 0;
}


#mainBody ul.val p	{
margin : 6px 0 0 0;
font-size : 12px;
font-family : verdana;
color : #000000;
line-height : 14px;
}

/* Left side -------------------------------------------------- */

/* New vintage and collectable nav ----------------------------- */

#leftSide {
float : left;
position : relative;
margin : 12px 0 0 12px;
display : inline;
width : 152px;
border : 0 solid #000000;
}

#leftSide h2 {
padding : 12px 0 6px 12px;
}

#newVintage {
position : relative;
width : 100%;
background : #eeeeee;
border-right : 1px solid #999999;
border-bottom : 1px solid #999999;
margin : 12px 0 0 0;
}


#newVintage h2 {
font-size : 32px;
text-align : center;
margin : 6px 0 12px 0;
line-height : 12px;
letter-spacing : 6px;
background : transparent;
color : #333333;
}

#newVintage h3 {
margin : 6px 0 6px 12px;
color : #339933;
}

#newVintage h4 {
padding : 0 0 0 12px;
margin : 0 0 3px 0;
background : #333333;
color : #cccccc;
}
 
/*	left navigation		*/
		
#newVintage	ul	{
		background:		#eeeeee;
		position:		relative;
		top:			0px;
		list-style:		none;
		margin:			0;
		padding:		0 0 6px 0;
		border:			#000000 solid 0px;
		}

#newVintage li	{
		background:		#eeeeee;
		width:			100%;
		padding:		0;
		font-size:		12px;
		line-height:		18px;
		}
		
#newVintage .here	{
    		background:		#99cc99;
    		}

#newVintage li a:link, #newVintage li a:visited		{
		display:		block;
		background:		transparent;
		width:			100%;
		color:			#000000;
		}

#newVintage li a:hover, #newVintage li a:active		{
		display:		block;
		background:		#ffffff;
		width:			100%;
		color:			#cc0000;
		text-decoration:	none;
		}
		
/*	newVintage classes	*/

.newVintage {
position : relative;
width : 100%;
background : #eeeeee;
border-right : 1px solid #999999;
border-bottom : 1px solid #999999;
margin : 12px 0 0 0;
}


.newVintage h2 {
font-size : 32px;
text-align : center;
margin : 6px 0 12px 0;
line-height : 12px;
letter-spacing : 6px;
background : transparent;
color : #333333;
}

.newVintage h3 {
margin : 6px 0 6px 12px;
color : #339933;
}

.newVintage h4 {
padding : 0 0 0 12px;
margin : 0 0 3px 0;
background : #333333;
color : #cccccc;
}
 		
/*	left navigation		*/

.newVintage	ul	{
		background:		#eeeeee;
		position:		relative;
		top:			0px;
		list-style:		none;
		margin:			0;
		padding:		0 0 6px 0;
		border:			#000000 solid 0px;
		}

.newVintage li	{
		background:		#eeeeee;
		width:			100%;
		padding:		0;
		font-size:		12px;
		line-height:		18px;
		}
		
.newVintage .here	{
    		background:		#99cc99;
    		}

.newVintage li a:link, .newVintage li a:visited		{
		display:		block;
		background:		transparent;
		width:			100%;
		color:			#000000;
		}

.newVintage li a:hover, .newVintage li a:active		{
		display:		block;
		background:		#ffffff;
		width:			100%;
		color:			#cc0000;
		text-decoration:	none;
		}
/* ------------------------------------------------------- */


#grading	{
		position:		relative;
		width:			100%;
		background : #eeeeee;
		border-right : 1px solid #999999;
		border-bottom : 1px solid #999999;
		margin : 12px 0 0 0;
		}
		
#grading h4 	{
		padding : 12px 0 12px 12px;
		margin : 24px 0 3px 0;
		background : #333333;
		color : #cccccc;
		line-height: 14px;
		}
		
#grading h5	{
		padding : 0 0 0 12px;
		margin : 6px 0 12px 0;
		background: #99cc99;
		color: #000000;
		font-size: 12px;
		}
		
#grading p	{
		margin : -6px 0 3px 0;
		padding : 0 0 3px 12px;
		font-size : 10px;
		font-family : verdana;
		color : #000000;
		line-height : 10px;
		
		}
		
		
		
.indnt		{
		padding:		0 0 0 12px;
		}
		
.indnt2		{
		padding:		0 0 0 18px;
		}

.rsbkinfo {
background : #f0f0f0;
color : #000000;
border-right : 1px solid #ddddd0;
border-bottom : 2px solid #ddddd0;
width : 100%;
margin : 0 0 36px 0;
float : right;
}

.rsbkinfo img {
float : left;
position : relative;
padding : 6px 12px;
}

#birthdays.rsbkinfo p {
font-family: verdana, sans-serif;
font-size: 12px;
color: #000000;
font-style: normal;
padding : 12px 12px 0px 12px;
text-align : left;
line-height : 18px;
}

.rsbkinfo p a	{
		color:			#660000;
		}

#birthdays.rsbkinfo p.bigfirstline:first-line {
font-size: 12px;
color: #990000;
font-style: italic;
font-weight: bold;
}

#birthdays.rsbkinfo h2 {
text-align : center;
color: #660000;
margin: 0px 0 0 0;
}

#birthdays p.smallprint	{
			font-size:		65%;
			text-align:		center;
			padding:		0;
			margin:			0 0 6px 0;
			line-height:		12px;
			}

#birthdays 	{
			position: 		relative;
			width: 			100%;
			top: 			25px;
			}
/* Birthday month selectors ---------------------------------------- */

#birthdays ul		{
			border:			#000000 solid 0px;
			position:		relative;
			width:			100%;
			display:		inline;
			list-style:		none;
			background:		transparent;
			font-family:		arial;
			font-weight:		900;
			font-size:		12px;
			padding:		0 0 0 10px;
			margin:			0;
			}

#birthdays li		{
			position:		relative;
			width:			100%;
			display:		inline;
			margin:			0;
			padding:		3px .35em;
			}
			
.holiday span.sml	{
			font-size:		90%;
			}
			
#birthdays li:hover 	{
			position:		relative;
			display:		inline;
			background:		#666666;
			color:			#ffffff;
			font-weight:		900;
			cursor:			pointer;
			}

/*
li.curmo		{
			background:		#999999;
			color:			#ffffff;
			}

#birthdays li.curmo	{
			cursor:			pointer;
			background:		#ffffff;
			}
*/			
/* Birthday tables -------------------------------------------------- */

#birthdays li div.month	{
			border:			#009900 solid 0px;
			position:		relative;
			float:			left;
			width:			250px;
			height:			450px;
			cursor:			pointer;
			display:		none;
			background:		#f0f0f0;
			z-index:		1;
			}

#birthdays li:hover div.month	{	
			position:		relative;
			float:			left;
			display:		block;
			z-index:		3;
			background:		#f0f0f0;
			cursor:			pointer;
			}

#birthdays #jan, #birthdays #feb, #birthdays #mar, #birthdays #apr, #birthdays #may, #birthdays #jun
			{
			position:		relative;
			}
			
#birthdays #jul, #birthdays #aug, #birthdays #sep, #birthdays #oct, #birthdays #nov, #birthdays #dec
			{
			position:		relative;
			}

/*
#birthdays li #feb	{					
			position:		absolute;
			float:			left;
			display:		block;
			cursor:			auto;
			z-index:		1;
			}	
*/

#birthdays table 	{
			position: 		relative;
			width:			95%;
			margin:			24px 0 0 8px;
			}

#birthdays th 		{
			text-align: 		center;
			}

#birthdays tbody 	{
			position:		relative;
			font-family: 		arial, sans-serif;
			color: 			#990033;
			font-size: 		88%;
			text-align:		right;
			line-height: 		18px;
			}
/*			

#birthdays td 		{
			position:		relative;
			top:			50px;
			display:		block;
			padding: 		0 5px;
			}
#Birthdays tr			{
			position:		relative;
			display:		block;
			}
*/

#birthdays td.taln 	{
			position:		relative;
			text-align: 		left;
			display: 		block;
			}

#birthdays td.talnb 	{
			position:		relative;
			text-align: 		left;
			display: 		block;
			color:			navy;
			}

#birthdays tr.holiday 	{
			color: 			#000099;
			}
			
#birthdays td.taln a	{
			color:			#00cc00;
			font-size:		100%;
			}
			
#birthdays td.hdng		{
			position:		relative;
			text-align: 		left;
			display: 		block;
			color:			#000000;
			font-weight:		900;
			}
/*			
#birthdays li span.noright {
	display: none;
	background: #ffffff;
	font-size: 14px;
	position: absolute;
	left: 	0px;
	top:	10px;
	width:	250px;
	height: 650px;
	z-index: 1;	}

#birthdays li:hover span.noright {	
	display: block;
	z-index: 1;
	}
*/
#footerWrapper {
position : relative;
width : 850px;
height : 20px;
border : 0 solid red;
bottom : 0;
margin : 0 auto;
text-align : center;
clear : both;
}

#footerWrapper h5	{
font-size : 12px;
line-height : 20px;
color : #000000;
}

.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);
}

a:link {
text-decoration : none;
color : #cd1419;
font-weight : bold;
}

a:visited {
text-decoration : none;
color : #cd1419;
font-weight : bold;
}

a:active {
text-decoration : none;
color : #cd1419;
font-weight : bold;
}

a:hover {
text-decoration : none;
color : #fec60c;
font-weight : bold;
}

a.basnav:link {
font-size : 100%;
text-decoration : none;
color : #333366;
font-weight : bold;
}

a.basnav:visited {
font-size : 100%;
text-decoration : none;
color : #333366;
font-weight : bold;
}

a.basnav:active {
font-size : 100%;
text-decoration : none;
color : #333366;
font-weight : bold;
}

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

A.authlnk:link {
text-decoration : none;
color : black;
font-weight : normal;
}

A.authlnk:visited {
text-decoration : none;
color : black;
font-weight : normal;
}

A.authlnk:active {
text-decoration : none;
color : black;
font-weight : normal;
}

A.authlnk:hover {
text-decoration : underline;
color : red;
font-weight : normal;
}