/*------------------------------------------------------------------------------
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 {
font-family : verdana, arial, sans-serif;
font-size : 100%;
min-width : 850px;
color : black;
background : #333366 url(blkblugrad.jpg) 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;
}

h3 {
font-family : verdana, arial, sans-serif;
font-size : 16px;
font-weight : 500;
color : navy;
margin-right : 0;
margin-top : 0.4em;
margin-bottom : 0.3em;	
}

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

#homeSchool {
position : relative;
background : #f6f6f6;
border-right : 2px solid #dddddd;
border-bottom : 2px solid #dddddd;
font-family : verdana, arial, sans-serif;
color : white;
top : 20px;
width : 100%;
height: 1400px;
left : 0;
letter-spacing : 0px;
}

#homeSchool h2 {
color : #333333;
font-size : 200%;
margin : 0px 18px 6px 15px;
padding : 12px 0 9px 0;
}

#homeSchool h2.bigfirst:first-letter	{
font-size : 300%;
color:	#33cc33;
}

#homeSchool h3 {
color : #333333;
font-size : 125%;
margin : 0px 18px 0px 15px;
padding : 12px 0 0 0;
}

#homeSchool p {
font-family: verdana, sans-serif;
line-height : 18px;
font-size : 12px;
color : #000000;
font-weight: 500;
margin : 0;
padding: 12px 12px  6px 12px;
}


#homeSchool div {
position : relative;
height : 240px;
margin-top : 12px;
border-bottom: #dddddd solid 0px;
}

#homeSchool a img {
float:	left;
position : relative;
margin : 12px 18px 12px 15px;
}

li {
margin: 6px 12px 6px 12px
line-height : 12px;

}

#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 : 10px;
}

#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 : left;
margin : 0 0 0 0;
width : 570px;
border-right : 0 solid #ddddd0;
z-index : 1;
background-color : #ffffff;
text-align : left;
}

#navinst  {
position : relative;
width : 544px;
top : 18px;
left : 12px;
line-height: 12px;
background : #979b94 url("graphics/springrain-short-24.jpg");
padding : 6px 0 6px 0px;
margin : 0 0 18px 0;
border-right : #979b94 solid 1px;
border-bottom : #979b94 solid 2px;
	}
	
#navinst p {
font-family : verdana;
font-weight: 900;
font-size : 10px;
color : #333333;
padding : 3px 12px;
margin : 0;
line-height : 12px;
	    }	
	
#navinst h3 {
font-family : arial;
font-size : 14px;
color : #333333;
padding : 6px 0 12px 12px;
	    }	


#poem	{
position : relative;
width : 544px;
height : 360px;
top : 12px;
left : 12px;
background : #979b94 url("graphics/springrain-32.jpg") ;
font-family : georgia;
border-right : #979b94 solid 1px;
border-bottom : #979b94 solid 2px;
	}

	
#poem p	{
font-size : 10px;
color : #663311;
font-weight : 900;
	}
	
#poem h3	{
font-size : 20px;
color : #663311;
font-weight : 900;
	}
	
#winpoem	{
position : relative;
width : 544px;
top : 12px;
left : 12px;
height : 162px;
background : #666666 url("book-pages/pictures/tracks-in-snow.jpg");
border-right : #000000 solid 1px;
border-bottom : #000000 solid 2px;
margin : 0;
padding : 0;
	}
	
#poem-1	{
position : absolute;
width : 100%;
top : 24px;
text-align : center;
background : transparent;
	}

#poem-1 p	{
font-size : 11px;
line-height : 13px;
color : #333333;
font-weight : 900;
margin : 0;
padding : 0;
	}
	
#poem-1 h3	{
font-family : georgia;
font-style : italic;
font-size : 20px;
color : #000000;
font-weight : 900;
margin : 0;
padding : 0;
	}	

#poem-2	{
position : absolute;
width : 270px;
top : 90px;
left : 78px;
background : transparent;
	}	

#poem-2 p	{
font-size : 12px;
color : #333333;
font-weight : 900;
margin : 0;
padding : 0;
	}

#poem-3	{
position : absolute;
width : 235px;
top : 90px;
left : 318px;
background : transparent;
	}

#poem-3 p	{
font-size : 12px;
color : #333333;
font-weight : 900;
margin : 0;
padding : 0;
	}

#block2	{
position : relative;
width : 544px;
top : 18px;
left : 12px;
background : #979b94 url("graphics/springrain-tall-24.jpg");
border-right : #979b94 solid 1px;
border-bottom : #979b94 solid 2px;
	}
	
#block2	h2	{
font-family : tahoma;
font-size : 24px;
font-weight : 900;
color : #333333;
padding : 24px 12px 6px 12px;
	}

#block2	h3	{
font-family : tahoma;
padding : 6px 12px 12px 12px;
color : #333333;
	}
	
div.book-container	{
position : relative;
width : 100%;
display : block;
height : 210px;
	}
	
div.book-container p	{
font-family : tahoma;
color : #333333;
padding : 6px 48px 0 12px;
font-weight : 900;
	}

div.book-container img	{
position : relative;
float : left;
padding : 0 12px 0 12px;
height : 150px;
display : block;
	}
	
#block3	{
position : relative;
width : 544px;
top : 48px;
left : 12px;
background : #ffeeaa;
border-right : #ccbb77 solid 1px;
border-bottom : #ccbb77 solid 2px;
	}

#block3	h2	{
font-family : tahoma;
font-size : 24px;
font-weight : 900;
background : #ffcc11;
color : #663311;
padding : 24px 12px 6px 12px;
	}

#block3	h3	{
padding : 12px;
font-family : tahoma;
padding : 6px 12px 12px 12px;
color : #000000;
	}

#block3	p	{
padding : 6px 0 0 0;
margin : 0 0 0 0;
	}
	
#block3	img	{
position : relative;
float : left;
padding : 0 12px 0 12px;
height : 150px;
	}
	

/* Right side -------------------------------------------------- */

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

#iebugs {
float: right;
position : relative;
width : 100%;
top : 0px;
background : #d2cfd0 url("book-pages/pictures/pc-ins-bk-2.gif");
border-right : #000000 solid 1px;
border-bottom : #000000 solid 2px;
margin: 12px 0 0 0;
}

#iebugs p	{
font-family : verdana;
font-weight: 900;
font-size : 10px;
color : #333333;
padding : 3px 12px 6px 12px;
margin : 0;
line-height : 12px;
}

#iebugs h3	{
font-family : arial;
font-size : 14px;
color : #333333;
padding : 6px 0 3px 12px;
}

.rblock1 {
float : right;
position : relative;
width : 100%;
top : 0px;
background : #e9e9e9;
border-right : #000000 solid 1px;
border-bottom : #000000 solid 2px;
margin : 12px 0 0 0;
}

.rblock1 h2 {
font-size : 24px;
text-align : left;
margin : 6px 0 12px 0;
line-height : 12px;
letter-spacing : 3px;
background : transparent;
color : #333333;
}

.rblock1 h3 {
margin : 6px 0 6px 12px;
color : #333333;
}

.rblock1.rbgn h3 {
color : #009900;
}

.rblock1 h4 {
margin : 0 0 6px 12px;
}

.rblock1 h5 {
font-size : 12px;
padding : 0 0 0 24px;
margin : 0;
line-height : 16px;
}

.rblock2 {
float : right;
position : relative;
width : 100%;
background : #e9e9e9;
border-right : #000000 solid 1px;
border-bottom : #000000 solid 2px;
margin : 12px 0 0 0;
padding : 0 0 6px 0;
}

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

.rblock2 h3 {
margin : 6px 0 6px 12px;
color : #333333;
}

.rblock2 h4 {
margin : 0 0 0 12px;
}

.rblock3 {
float : right;
position : relative;
width : 100%;
background : #e9e9e9 url("book-pages/pictures/rblk3-lin.gif");
border-right : #000000 solid 1px;
border-bottom : #000000 solid 2px;
margin : 12px 0 0 0;
padding : 0 0 6px 0;
}

.rblock3 h2 {
font-size : 24px;
text-align : left;
margin : 6px 0 12px 0;
line-height : 12px;
letter-spacing : 3px;
background : transparent;
color : #333333;
}

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

.rblock3 h4 {
margin : 0 0 0 12px;
}

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

.rblock4 h2 {
font-size : 24px;
text-align : left;
margin : 6px 0 12px 0;
line-height : 12px;
letter-spacing : 3px;
background : transparent;
color : #333333;
}

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

.rblock4 h4 {
margin : 0 0 0 12px;
}

.rblock	{
float : right;
position : relative;
width : 100%;
background : #e9e9e9;
border-right : #000000 solid 1px;
border-bottom : #000000 solid 2px;
margin : 12px 0 0 12px;
padding : 0 0 6px 0;
}

.rblock h2 {
font-size : 24px;
text-align : left;
margin : 6px 0 12px 0;
line-height : 12px;
letter-spacing : 3px;
background : transparent;
color : #333333;
}

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

.rblock h4 {
margin : 0 0 0 12px;
}

.rblock h5 {
font-size : 12px;
padding : 0 0 0 24px;
margin : 0;
line-height : 16px;
}

.crtblk			{	
			position: 		absolute;
			height: 		20px; 
			width: 			20px; 
			top: 			100px; 
			left: 			498px;
			display:		block;
			}


#rightSide {
float : right;
position : relative;
margin : 15px 12px 0 0;
display : inline;
width : 250px;
border : 0 solid #000000;
}

#rightSide h2 {
padding : 12px 0 6px 12px;
}
 
.rsbkinfo {
background : #e9e9e9;
color : #000000;
border-right : #000000 solid 1px;
border-bottom : #000000 solid 2px;
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 : 0px 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: 			12px;
			}
/* 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;
			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;
background-color : #ddddd0;
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;
}