/* SZ 02/28/2020
/* Fixed Sidebar - No Table Layout
/* Trick 1: #header/#footer full width due to left/right absolute positioning
/* Clearfix Hack at bottom of file
*/

* {box-sizing: border-box;}

body
{
    background-color: #f0f0fc; /* Same as body bgcolor; was #000066 */
    font-family: Segoe UI, Trebuchet MS, Arial, sans-serif;
	font-size: 2.2vmin;
    line-height: 150%;
}

#shell
{
    background-color: #f0f0fc; /* Same as body bgcolor; was #000066 */
    width: 100%;
}

#container
{
    /* Trick 2: #container width 100% due to containing #header/#footer */
    background-color: #f0f0fc; /* same as #leftpillar bgcolor #cfcfe1 */
    margin: 10px 10px 5px 10px;
    border-radius: 15px;
}

.wordsContent
{
    /* Trick 3: #main width 100% due to containing <p float right> in HTML */
    background-color: #f0f0fc;
    margin: 10px 0px 5px 10px; /* -780 margin-left from 200 to 10 px */
    border-radius: 10px;
    list-style-type: none;
    overflow: hidden;
    padding: 10px;
}

#header
{
    /* Trick 1: #header/#footer full width due to left/right absolute positioning */
    background-color: #cfcfe1; /* was ffffcc */
    height: 9.0em;
    position: relative; /* Use position: relative, left, right to set width. */
    left: 0px; /* IE adds border + margin to width                  */
    right: 0px; /* Other browsers width 100% = 100%!                 */
    margin: -10px 10px 10px 10px; /* -780 margin-left from 230 to 10 px */
	background-size: contain;
    background-image: url(https://1stedition.net/ssl/Images/PicturebookLogo3.gif);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    border-color: #cfcfe1;
    border-width: 5px;
    border-style: hidden; /* solid, dotted, dashed, double, groove, ridge, inset, outset, hidden */
    border-radius: 10px;
    clear: both;
}

#footer
{
    /* Trick 1: #header/#footer full width due to left/right absolute positioning */
    background-color: #cfcfe1; /* was ffffcc same as header */
    /* height: 120px; */
    position: relative; /* Use position: relative, left, right to set width. */
    left: 0px; /* IE adds border + margin to width                  */
    right: 0px; /* Other browsers width 100% = 100%!                 */
    margin: 10px 20px 0px 10px; /* -780 margin-left from 230 to 10 px */
    border-color: #cfcfe1;
    border-width: 5px;
    border-style: hidden; /* solid, dotted, dashed, double, groove, ridge, inset, outset, hidden */
    border-radius: 10px;
    padding: 2px;
    clear: both;
}

#attribution
{
    /* Trick 1: #header/#footer full width due to left/right absolute positioning */
    background-color: #f0f0fc; /* was cfcfe1 same as footer */
    position: relative; /* Use position: relative, left, right to set width. */
    left: 0px; /* IE adds border + margin to width                  */
    right: 0px; /* Other browsers width 100% = 100%!                 */
    margin: 10px 20px 10px 10px; /* -780 margin-left from 230 to 10 px */
    border-color: #cfcfe1;
    border-width: 5px;
    border-style: hidden; /* solid, dotted, dashed, double, groove, ridge, inset, outset, hidden */
    border-radius: 10px;
    padding: 2px;
    clear: both;
}

p
{
	display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: normal;
	line-height: 130%;
    margin: 0.5em 0.5em 0.5em 0.5em !important;
    padding: 0.5em 1.0em 0.5em 0.5em;
}
.wordsContent p
{
}

}
.wordsContent li
{
	line-height: 150%;
    margin: 0.5em 0.5em 0.5em 0.5em;
    padding: 0.5em 1.0em 0.5em 1.0em;
		
}

/*
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!
*/
a
{
    text-decoration: none;
}
a:link
{
    color: #0000ff;
}

a:visited
{
    color: #660033;
}

a:active
{
    color: #0033ff;
}

a:hover
{
    color: #f0f0fc;
    background-color: #0000ff;
}

li
{
    margin: 0px 0px 0px 5px;
    font-weight: normal;
    line-height: 150%;
}

#footer p
{
    display: block;
    margin-block-start: 0px;
    margin-block-end: 0px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: normal;
	font-size: 80%;
    text-align: center;
	line-height: 100%;
    margin: 0.5em 0.5em 0.5em 0.5em !important;
    padding: 0.0em 0.5em 0.0em 0.5em;
}

#attribution p
{
    color: #000066;
    font-size: 70%;
    margin: 6px 0px 0px 0px;
	line-height: 90%;
}

#attribution h3
{
    font-size: 100%;
    color: #000066;
    background-color: #cfcfe1;
	border-radius: 10px;
    font-weight: bolder;
    margin: 20px 0px 0 0px;
    padding: 6px 10px 6px 10px;
    text-align: left;
}

#attribution a:link
{
    color: green;
}
#attribution a:visited
{
    color: green;
}

.wordsContent h2
{
    font-size: 130%;
    background-color: #f0f0fc;
    color: #8080b2;
    margin: 0px 30px 0px 0px;
    border-top: solid #add8ef 0px;
    padding: 15px 5px 5px 5px;
    text-align: center;
}

.wordsContent h3
{
    font-size: 110%;
    color: #f0f0fc;
    background-color: #8080b2; /* 8080b2 b8b8c8 ffc266 ffcc80 ffcc66 leftpillar #cfcfe1*/
    font-weight: bolder;
    margin: 20px -5px 0 5px;
    padding: 4px 2px 4px 10px;
    text-align: left;
    line-height: 120%;
}

.wordsContent h4
{
    font-size: 110%;
    color: #000066;
    background-color: #f0f0fc;
    margin: 10px 0px 0px 8px;
    font-weight: bold;
    padding: 2px;
    text-align: left;
}

.wordsContent h5
{
    font-size: 100%;
    color: #000066;
    background-color: #f0f0fc;
    margin: 2px 0px 0px 4px;
    font-weight: bold;
    padding: 1px;
    text-align: left;
}

/*     ==========     START LEFT PILLAR     ==========     */
.leftPillar
{
    width: 100%; /* -780 changed from 200px to 80% */
    background-color: #cfcfe1; /* was ffffcc */
    margin: 12px 0px 4px 0px;
    padding: 0px 0px 0px 0px;
    vertical-align: top;
    z-index: 1;
    position: relative;  /* -780 changed to relative */
    top:  0px; /* -780 changed from 10px to 0px */
    left: 0px; /* -780 changed from 10px to 0px */
	border-color: #cfcfe1;
    border-width: 5px;
    border-style: hidden; /* solid, dotted, dashed, double, groove, ridge, inset, outset, hidden */
    border-radius: 10px;
}
.leftPillar p
{
    margin: 0.5em;
}
.menu
{
	list-style: none;
    margin-bottom: 1px; /* Clear floats */
    width: 100%;
    position: relative;
    z-index: 5;
}
.menu h2
{
    display: inline-block; /* -780 changed from block */
	font-weight: normal;
    white-space: nowrap;
    background-color: #f0f0f5; /* was same as leftPillar #cfcfe1 */
    color: #000066;
    margin: 0px 0px 5px 0px;
    padding: 0px 0px 0px 0px;
    border-color: white;
    border-top-style: solid;
    border-top-width: 1px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
/*    width: 160px; */
}
.menu h3
{
    font-weight: normal;
    white-space: nowrap;
    background-color: #f0f0f5; /* was same as leftPillar #cfcfe1 */
    color: #0000ff;
    margin: 0px 0px 0px 0px;
    padding: 1px;
    border-color: white;
    border-bottom-style: solid;
    border-bottom-width: 0px;
}
.menu li
{
   	display: inline; /* -780 changed from block */
	line-height: 120%;
    position: relative; 
}
.menu a
{
    display: inline; /* -780 changed from block */
	font-size: 1.7vmin;
    padding: 2px 4px 2px 4px;
    text-decoration: none;
}
.menu ul /*--- DROPDOWN ---*/
{
    background: #e6e6fa; /* was same as leftPillar #cfcfe1 - Adding BG makes the dropdown work properly in IE7+ */
    background: rgba(255,255,255,0); /* But make the BG fully transparent where can, don't awant to see it if we can help it... */
    list-style: none;
    position: absolute;
    left: -9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
.menu ul li
{
	padding-top: 1px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float: left;	/* -780 changed from none*/
}
.menu ul a
{
    white-space: nowrap;
}

.menu ul:link h2
{
}
.menu ul:visited h2
{
}
.menu ul:hover h2
{
    white-space: nowrap;
}
.menu li:link ul
{
}
.menu li:visited ul
{
}
.menu li:hover ul
{
    /* Display the dropdown on hover */
    left: 90px; /* Bring back on-screen */
    top: 3px;
    z-index: 5;
}
.menu li:link a
{
}
.menu li:visited a
{
}
.menu li:hover a
{
    /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
    color: #000066;
    background-color: #cfcfe1; /* was same as #f0f0f5;*/
}
.menu li:hover a:link
{
}
.menu li:hover a:visited
{
}
.menu li:hover a:hover
{
    /* Highlight the H2 */
    color: #cfcfe1;
    background-color: #000066;
    position: relative; /* Added position: relative & left: 10px to animate H2 on hover   */
    left: 10px;
}
.menu li:hover ul a
{
    /* Persistent hover state creates a global style for links even before they're hovered. This undo these effects. */
    text-decoration: none;
}
.menu li:hover ul li a:hover
{
    /* Define the most explicit hover states--what happens when you hover each individual link. */
    color: #cfcfe1;
    background-color: #000066;
}
/*     ==========     END LEFT PILLAR     ==========     */

* html
{
    height: 1%; /* So IE plays nice */
}

.leftbord
{
    background-color: #f0f0fc;
    margin: 10px;
    padding: 0px 5px;
    list-style-type: none;
    border-left: 0.5em solid blue;
}
/***********          Previous and Next Button Styling               **********/

.nextprev a 
{font-size:150%;margin:6px;padding:6px;border:4px;border-style:solid;border-color:#cfcfe1;border-radius:8px;}

.nextprev a:link,.nextprev a:visited 
{background-color:#cfcfe1; color:#000000; border-color:#cfcfe1;}

.nextprev a:hover
{background-color:#f0f0fc; color:#000066;}

.button
/* block; */
{
	padding: 16px;
	margin: 4px;
	border-style: solid;
	border: 4px color: #cfcfe1;
	width: 100px;
	height: 50px;
	vertical-align:middle;
	overflow:hidden;
	text-decoration:none;
	color:inherit;
	background-color:e6e6fa;
	text-align:center;
	cursor:pointer;
	white-space:nowrap;
}



/***********          start .wordsContent class table styling               **********/
.outline table
{
    border-color: #cfcfe1;
    border-style: solid;
    border-width: 2px;
}
.wordsContent table
{
    font-family: "Trebuchet MS" , Arial, Helvetica, sans-serif;
	table-layout: fixed;
	width: 80%;
    border-collapse: collapse;
    margin: auto; /* centers the table */
    overflow: scroll;
    padding: 0px;
	font-size: 90%;
}
.wordsContent table caption
{
    caption-side: top;
    font-size: 150%;
    font-style: normal;
    color: #000066;
    text-align: center;
    padding: 10px;
}
.wordsContent table thead
{
    font-size: 110%;
    color: #f0f0fc;
}
.wordsContent table thead tr
{
    background-color: #000066;
}
.wordsContent table thead th
{
    text-align: center;
    border-right: 1px solid #CCCCE0;
    border-bottom: 2px solid #CCCCE0;
    padding-top: 5px;
    padding-bottom: 4px;
}
.wordsContent tr
{
    background-color: #E6E6E0;
}
.wordsContent td
{
    font-size: 80%;
    text-align: left;
    vertical-align: top;
    height: 1.0em;
    overflow: hidden;
    border: 1px solid #000066;
    padding: 2px 4px 2px 4px;
	line-height: 120%;
	display: table-cell;
}
.wordsContent table tr.highlight td
{
    color: #000000;
    background-color: #CCCCE0;
}

/*
.wordsContent table th[scope=col]:hover, tr:hover td
{
    background-color: #8080B2;
    color: #fff;
}*/
/* First edition identification tables  */
.firsts td
{
	text-align: center;
}
.firsts td + td
{
    text-align: left;
}
.firsts td + td + td
{
    text-align: center;
}
.firsts td + td + td + td
{
    text-align: left;
}
/* Beginner Book Table    C C L R L L   */
.bb01 td
{
    text-align: center;
}
.bb01 td + td + td
{
    text-align: left;
}
.bb01 td + td + td + td
{
    text-align: right;
}
.bb01 td + td + td + td + td
{
    text-align: left;
}
/* Caldecott Medal Table    C C C L L R R R   */
.cm01 td
{
	text-align: center;
}
.cm01 td + td + td + td
{
    text-align: left;
}
.cm01 td + td + td + td + td + td
{
	text-align: right;
}
/* Dr Seuss Table   C L R R R   */
.dr01 td
{
    text-align: center;
}
.dr01 td + td
{
    text-align: left;
}
.dr01 td + td + td
{
    text-align: right;
}
/* Most Valuable Table    C L L R R R R   */
.mv01 td
{
	text-align: center;
}
.mv01 td + td
{
	text-align: left;
}
.mv01 td + td + td + td
{
	text-align: right;
}
/* Newbery Medal    C L C L L R R   */
.nm01 td
{
    text-align: center;
}
.nm01 td + td
{
    text-align: left;
}
.nm01 td + td + td 
{
    text-align: center;
}
.nm01 td + td + td + td
{
    text-align: left;
}
.nm01 td + td + td + td + td + td
{
    text-align: right;
}
/* eBay Completed    C L C C R R C C   */
.eb01 td
{
    text-align: center;
}
.eb01 td + td
{
    text-align: left;
}
.eb01 td + td + td 
{
    text-align: center;
}
.eb01 td + td + td + td + TD
{
    text-align: right;
}
.eb01 td + td + td + td + td + td + td
{
    text-align: center;
}
/***********             end .wordsContent class table styling               **********/
img {
  max-width: 100%;
  height: auto;
}

img.right
{
    margin: 4px 2px 2px 7px;
    border: solid #000000 1pt;
    padding: 0px;
    display: inline;
}

img.left
{
    margin: 4px 7px 2px 2px;
    border: solid #000000 1pt;
    padding: 0px;
    display: inline;
}

img.middle
{
    display: block;
    margin-left: auto;
    margin-right: auto;
}
middle
{
    position: relative;
    left: 0%;
    right: 0%;
}

.right
{
    float: right;
}

.rightclear
{
    float: right;
    clear: right;
    margin: 4px;
}

.left
{
    float: left;
}

.clearall
{
    clear: both;
}

.scroll
{
    clear: both;
    overflow: scroll;
}
.whitespace
{
    margin: 20px 0px 20px 0px;
}
.quote1
{
    background-color: #cfcfe1;
    display: block;
    text-align: left;
    font-style: italic;
    padding: 10px;
    margin: 6px 60px 6px 60px;
	border-radius: 6px;
}
.book
{
    background-color: #f0f0fc; /* #E6E6E0 = palest blue */
    font-family: "Trebuchet MS" , Arial, Helvetica, sans-serif;
    font-size: 80%;
    color: #000066; /* #000066=dark blue */
    float: left;
    width: 140px;
    height: 240px;
    margin: 5px 20px 15px 20px;
    padding: 5px 5px 5px 5px;
    border-collapse: collapse;
    border-style: solid;
    border-width: 1px;
    border-color: #CCCCE0; /* #CCCCE0= pale blue */
    text-align: center;
}
.book img
{
    width: 120px;
    height: 160px;
    border-collapse: collapse;
    border-style: solid;
    border-width: 1px;
    border-color: #000066; /* #000066=dark blue */
}
.book a:hover
{
    color: #000000;
    background-color: #f0f0fc; /* #E6E6E0 = palest blue */
}