/*CSS FOR TEENLIBRIS.COM/EDUCATORS*/ 
/**************************************************************************************

date:   	11/17/08
author:    	Laura Yeffeth
email:     	laura@laurayeffeth.com
website:   	http://www.teenlibris.com/educators

/**************************************************************************************

This site has been tested in Firefox/MAC, IE 6 AND 7/Windows XP, Safari/MAC/Windows XP, Opera/MAC/Windows XP.
Site has all functionality when images are turned off and when style sheets are disabled.
Valid XHTML AND CSS.

/**************************************************************************************

   COLOR SCHEME
   Body Background:					#fff 		White
   Main Text:						#324a56		Dark Blue
   Sub Text:						#5882b0		Medium Blue
   Navigation/Footer Background: 	#a9c6e5		Light Blue
   Content Blocks:					#eff4fb 	White tinted blue
   Rollover Links/Accent Text:		#ac2734 	Red 
   
**************************************************************************************/
html, body {
height: 100%; /* This along with min-height attribute in body forces scrollbar in Firefox*/ 
} 
body {  
min-height: 101%;
background: #fff;
color: #324a5b;
font: 62.5%/1.4 "Trebuchet MS", arial, verdana, helvetica, "sans serif";
text-align: center; /* This centers the container in IE 5* browsers*/
z-index: 1;
}
#pageWrap {
text-align: left; /* This overrides the text-align: center on the body element. */
/*	The following code keeps the footer positioned at the bottom of the browser window */
min-height: 100%; 				
height: auto !important;	
height: 100%;
margin: 0 auto -14em; /* the bottom margin is the negative value of the footer's height */
}
/*Highlighting of NEW! link*/ 
span.new {
color: white;
}
.right {
float: right;
}
.left {
float: left;
}
/***** IMAGES *****************************************************************/

/* THE FOLLOWING IS STYLING FOR THE ALT TEXT FOR THE BOOK COVER IMAGE */
img.cover {
background-color: #5882b0;
color: #fff;
font-size: 1.4em;
text-align: center;
}
/***** =IMAGE REPLACEMENT *************************************************************

Neal Image Replacement by Neal Venditto:  http://neal.venditto.org/
This technique allows for text to show up in place of images when style sheets 
are disable or when images are turned off.

/**************************************************************************************

In your html, add class "nir" to any text element you want to replace with an image.
Then surround the text with <span> tags. */

.nir span {
position:relative;
z-index:-1;
}
.nir a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
}
/***** =HEADER ***********************************************************************/
#header {
position: relative;
width: 900px;
height: 180px;
margin: 0 auto;
}
h1#logo {
width:900px;
height: 180px;
}
/*Using NIR Image Replacement Method for Logo*/
h1#logo a {
background: transparent url(../images/educatorsHeader.jpg) 0 0 no-repeat;
}
h1#logo a:hover {
background: transparent url(../images/educatorsHeader.jpg) 0 -180px no-repeat;
}
h1#logo a span { /* STYLING OF THE TEXT REPLACEMENT FOR THE IMAGE OF LOGO */
font-size: 2em;
line-height: 1em;
display: block;
width: 880px;
height: 60px;
padding: 80px 10px 40px;
text-transform: lowercase;
}
h5#tagline {
width: 900px;
height: 0;			/* HACK FOR IE 6: REMOVES GAP UNDER HEADER */
margin: 0 auto;
}
h5#tagline span {  /* STYLING OF THE TEXT REPLACEMENT FOR THE IMAGE OF TAGLINE */
position: absolute;
display: block;
width: 742px;
height: 20px;
margin-top: -40px;
margin-left: 15px;
}
/***** =NAVIGATION *******************************************************************/
#nav {
background-color: #a9c6e5;
height: 68px;
}
ul#navList {
position: relative;
height: 68px;
width: 900px;
margin: 0 auto;
background-color: #a9c6e5;
}
ul#navList li {
float: left;
display: block;
height: 68px;
}
ul#navList li.wardrobe {width: 146px;}
ul#navList li.demigods {width: 149px;}
ul#navList li.newdawn {width: 92px;}
ul#navList li.secrets {width: 159px;}
ul#navList li.mindrain {width: 82px;}
ul#navList li.monster {width: 144px;}
ul#navList li.tlhome {width: 128px;}     

ul#navList li.wardrobe a {width: 98px;}
ul#navList li.demigods a {width: 101px;}
ul#navList li.newdawn a {width: 44px;}
ul#navList li.secrets a {width: 111px;}
ul#navList li.mindrain a {width: 34px;}
ul#navList li.monster a {width: 96px;}
ul#navList li.tlhome a {width: 80px;}

ul#navList li a  {
display: block;
float: left;
height: 34px;
text-align: center;
font-size: 1em;
line-height:  1.2em;
text-transform: uppercase;
font-weight: bold;
text-decoration: none;
padding: 12px 24px;
border-bottom: 10px solid #324a56;
background-color: #a9c6e5;
}
/*Changes navigation link text and border strip to red on rollover and when on current page*/
ul#navList li a:hover, #wardrobe ul#navList li.wardrobe a, #demigods ul#navList li.demigods a, #newdawn ul#navList li.newdawn a, #secrets ul#navList li.secrets a, #mindrain ul#navList li.mindrain a, #monster ul#navList li.monster a, #tlhome ul#navList li.tlhome a {
border-bottom: 10px solid #ac2734;
background-color: #bad1ea;
color: #ac2734;
}
/*Changes footer navigation link text to reflect current page*/
#wardrobe #footer ul#footerNav li.wardrobe a, #demigods #footer ul#footerNav li.demigods a, #newdawn #footer ul#footerNav li.newdawn a, #secrets #footer ul#footerNav li.secrets a, #mindrain #footer ul#footerNav li.mindrain a, #monster #footer ul#footerNav li.monster a {
text-decoration: underline;
color: #fff;
}

/***** =POSITIONING *****************************************************************/
#container {
border-top: 10px solid #324a56;
margin-top: -10px;
}
#contentWrap {
position: relative;
width: 900px;
margin: 0 auto;
padding-top: 30px;
}
/***** =INTRO ***********************************************************************/
#intro {
text-align: center;
}
/*Using NIR Image Replacement Method for Intro H2*/
#intro h2 {
width: 900px;
height: 35px;
background: transparent url(../images/intro_h2.gif) 0 0 no-repeat;
}

/***** =PREVIEW BOXES **************************************************************/

/*PREVIEW BOX EXPANDING CONTAINERS*/

#row1, #row2, #row3 {
margin: 20px 0;
overflow: auto;
width: 900px;
clear: both;
}
.previewBox {
position: relative;
width: 440px;
overflow: hidden;
}
.previewBox_top {
background: #eff4fb url(../images/gridBox_top.png) no-repeat bottom center;
height: 20px;
}
.previewBox_middle {
display: block;
width: 440px;
background: #eff4fb url(../images/gridBox_middle.png) top center repeat-y;
overflow: auto;
}
.previewBox_bottom {
height: 100px;
width: 440px;
}
/*Using NIR Image Replacement Method for Corner Tab*/
.previewBox_bottom a.more {
background: transparent url(../images/gridBox_bottom_more.png) no-repeat 0 0;
}
.previewBox_bottom a.comingsoon {
background: transparent url(../images/gridBox_bottom_comingsoon.png) no-repeat 0 0;
}
.previewBox_bottom a:hover.more {
background: transparent url(../images/gridBox_bottom_more.png) no-repeat bottom center;
}
.previewBox_bottom a:hover.comingsoon {
background: transparent url(../images/gridBox_bottom_comingsoon.png) no-repeat bottom center;
}
.previewBox_bottom a span { /* STYLING OF THE TEXT REPLACEMENT FOR THE IMAGE OF CORNER TAB */
position: absolute;
bottom: 0;
right: 0;
text-decoration: underline;
text-transform: uppercase;
text-align: right;
font-size: 1.4em;
font-weight: bold;
background-color: #eff4fb;
width: 420px;
height: 20px;
padding: 60px 20px 20px 0;
}
/*PREVIEW BOX CONTENT*/

.previewBox .titleSection {
margin: 0 11px 0 2px;
width: 427px;
overflow: auto;
} 
.previewBox .titleSection a img {
position: relative;
float: left;
height: 228px;
width: 152px;
margin: 0 20px;
border: 2px solid #a9c6e5;
}
.previewBox .titleSection a:hover img {
border: 2px solid #ac2734;
}
.previewBox .titleDescription {
float: left;
width: 206px;
} 
.previewBox .titleSection h4{
padding-bottom: 1em;
}
.previewBox .titleSection h5{
margin-bottom: 1em;
}
.previewBox .titleSection p.with {
margin-bottom: 0;
}
.previewBox .bookDetail {
clear: both;
overflow: auto;
margin: 0 11px 0 2px;
width: 427px;
}
.previewBox .bookDetail p {
padding: 0 20px;
margin-bottom: 0;
font-size: 1.3em;
min-height: 10em;			/*  KEEPS BOXES EQUAL HEIGHT FOR CURRENT CONTENT */
height: auto !important;	/* 	HACK FOR IE	7: OVERRIDES HEIGHT	*/
height: 10em;				/* 	HACK FOR IE 6: RECOGNIZES HEIGHT AS MIN-HEIGHT	*/
}

/***** =BOOK PAGES ***************************************************************/

/*MAIN CONTENT*/
#mainContent {
width: 540px;
float: left;
margin-right: 20px;
overflow: hidden;
}
.mainSectionHeader {
background: #eff4fb url(../images/mainBox_top.png) no-repeat bottom center;
height: 21px;
}
.mainMiddleSection {
width: 540px;
background: #eff4fb url(../images/mainBox_middle.png) top center repeat-y;
}
#mainContent .titleSection {
width: 524px;
margin: 0 16px 0 2px;
overflow: hidden;
} 
#mainContent .titleSection img {
position: relative;
float: left;
width: 200px;
height: 300px;
border: 1px solid #324a56;
margin-left: 20px;
}
#mainContent .titleDescription {
float: right;
width: 262px;
padding-right: 20px;
} 
#mainContent h2#title {
padding-bottom: .5em;
}
#mainContent h3#subtitle {
margin-bottom: 1em;
}
#mainContent h4#editor {
margin-bottom: 1em;
}
#mainContent p#contributorList {
margin-bottom: 0;
}
h2.order {
width: 482px;
height: 2em;
line-height: 2em;
margin: 40px 36px 40px 22px;
clear: both;
background-color: #ac2734;
color: white;
}
h2.order a {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
text-transform: uppercase;
font-size: .9em;
color: white;
text-align: center;
} 
h2.order a:hover {
background-color: #5882b0;
}
#mainContent .bookDetail {
clear: both;
overflow: auto;
width: 524px;
margin: 0 14px 0 2px;
}
#mainContent  h3.tagline {
text-align: center;
padding: 0 20px 10px;
color: #5882b0;
font-size: 1.8em;
font-style: italic;
}
#mainContent .bookDetail p {
padding: 0 30px;
}
.mainSectionFooter {
background: url(../images/mainBox_bottom.png) no-repeat top center;
height: 45px;
width: 100%;
}
/*SIDE CONTENT*/
#sideContent {
width: 340px;
float: right;
}
.sideBox {
position: relative;
width: 340px;
overflow: hidden;
margin-bottom: 15px;
}
.sideBoxHeader {
background: #ac2734 url(../images/sideBox_top.png) no-repeat bottom center;
height: 38px;
}
.sideBoxHeader h3 {
margin: 0 14px 0 2px;
padding: 4px 10px;
text-align: center;
text-transform: uppercase;
color: #fff;
}
.sideBoxMiddle {
width: 340px;
background: #eff4fb url(../images/sideBox_middle.png) top center repeat-y;
overflow: hidden;
}
.sideBoxMiddle ul#links {
width: 284px;
margin: 15px 14px 0 2px;
padding: 0 20px;
}
.sideBoxMiddle ul#links li.lessonPlans, .sideBoxMiddle ul#links li.supplementary {
text-align: center;
color: #fff;
background-color: #ac2734;
text-transform: uppercase;
font-weight: bold;
padding: 2px 0;
margin: 15px 0;
background-image: none;
}
.sideBoxMiddle ul#links li {
padding: 2px 0;
}
.sideBoxMiddle ul#links li a {
display: block;
background: url(../images/pdf.png) no-repeat center left;
padding-left: 30px;
}
/* FOR BOOK SERIES OF THREE, FIVE OR SIX */
.sideBoxMiddle ul.three, .sideBoxMiddle ul.six, .sideBoxMiddle ul.five {
margin: 15px 14px 0 2px;
padding-left: 9px;
overflow: hidden;
}
.sideBoxMiddle ul.three li, .sideBoxMiddle ul.six li, .sideBoxMiddle ul.five li {
float: left;
padding-right: 6px;
display: block;
}
.sideBoxMiddle ul.six li, .sideBoxMiddle ul.five li {
padding-bottom: 6px;
}
.sideBoxMiddle ul.three li a, .sideBoxMiddle ul.six li a, .sideBoxMiddle ul.five li a {
float: left;
display: block;
width: 90px;
height: 137px;
text-decoration: none;
background-color: #5882b0;
border: 4px solid #5882b0;
font-size: .8em;
text-align: center;
}
.sideBoxMiddle ul.three li a:hover, .sideBoxMiddle ul.six li a:hover, .sideBoxMiddle ul.five li a:hover {
background-color: #ac2734;
border: 4px solid #ac2734;
}
/* FOR BOOK SERIES OF TWO OR FOUR */
.sideBoxMiddle ul.four, .sideBoxMiddle ul.two {
margin: 20px 14px 0 2px;
padding-left: 22px;
overflow: hidden;
}
.sideBoxMiddle ul.two {
margin-top: 14px;
}
.sideBoxMiddle ul.four li, .sideBoxMiddle ul.two li {
float: left;
padding: 0 16px 20px 0;
display: block;
}
.sideBoxMiddle ul.two li {
padding-bottom: 0;
}
.sideBoxMiddle ul.four li a, .sideBoxMiddle ul.two li a {
float: left;
display: block;
width: 120px;
height: 182px;
text-decoration: none;
background-color: #5882b0;
border: 6px solid #5882b0;
font-size: .8em;
text-align: center;
}
.sideBoxMiddle ul.four li a:hover, .sideBoxMiddle ul.two li a:hover {
background-color: #ac2734;
border: 6px solid #ac2734;
}


.sideBoxMiddle ul.series li a:hover img{
background-color: #ac2734;
}
.sideBoxFooter {
background: #eff4fb url(../images/sideBox_bottom.png) no-repeat top center;
height: 32px;
width: 100%;
}
/***** =HEADINGS **********************************************************************/
h1 {font-size: 3em;}
h2 {font-size: 2.5em;}
h3 {font-size: 2.0em;}
h4 {font-size: 1.6em;}
h5 {font-size: 1.4em;}

#header h5#tagline {
margin: 0;
}
/*=PARAGRAPHS AND =LISTS*/
p {
margin: 1em 0;
}
p, ol, ul {
font-size: 1.4em
}
#footer p {
font-size: 1.2em;
text-align: center;
margin: 0;
}
#intro h3 {
padding-top: 20px;
font-style: italic;
font-weight: bold;
color: #ac2734;
}
#intro p {
margin: 20px;
font-size: 1.5em;
}
#intro p.instruction {
font-size: 1.7em;
color: #ac2734;
padding: 0 140px;
}
#mainContent h2#title {
font-size: 1.9em;
}
#mainContent h4#subtitle {
color: #5882b0;
font-style: italic;
margin-bottom: 1em;
}
.previewBox .titleSection h5 {
color: #ac2734;
font-style: italic;
}
/***** =FORM ***********************************************************************/
form {
margin: 40px 69px;
}
form fieldset {
position: relative;
padding: 20px;
border: 1px #5882b0 solid;
background-color: #eff4fb;
width: 720px;
height: 55px;
}
form fieldset legend {
position: absolute;		 /* HACK FOR IE 7: REMOVES EXTRA SPACE AT TOP OF FORM */
}
p.getUpdate {
margin-top: 0;
padding: 0;
font-weight: bold;
}
label {
font-size: 1.4em;
padding: 0 20px;
}
form input#email {
width: 400px;
margin-right: 40px;
border: 1px #5882b0 solid;
background-color: #fff;
}
/***** =FOOTER ***********************************************************************/
.push {
height: 14em;
}
#footerWrap {
clear: both;
height: 12em;
background-color: #324a56;
color: #fff;
padding: 1em 0;
}
#footer {
width: 900px;
margin: 0 auto;
}
#footerNav {
height: 1em;
padding-bottom: 1em;
}
#footerNav li, #footerNav li a {
float: left;
padding: 0 7px;
text-transform: uppercase;
font-size: .8em;
color: #fff;
text-decoration: none;
}
#footer ul#footerNav li a:hover {
text-decoration: underline;
color: #fff;
}
#footerNav li {
border-right: 1px solid #fff;
}
#footerNav li.tlhome {
border-right: none;
}
#footerNav li a:hover {
color: #ac2734;
}
#footer p {
clear: both;
padding: .2em 0;
}
#footer p a {
color: #fff;
border-bottom: 1px solid #fff;
text-decoration: none;
}
#footer p a:hover, #footer p a:active {
color: #ac2734;
border-bottom: 1px solid #ac2734;
text-decoration: none;
}
/***** =ROLLOVERS ********************************************************************/
a:link, a:visited {color: #324a56;} /*TEXT COLOR OF LINKS: DARK BLUE*/
a:hover, a:active {color: #ac2734;} /*TEXT COLOR OF LINKS ON ROLLOVER: RED*/