@charset "UTF-8";
/* CSS Document */

* {margin:0; padding:0;}
#breadcrumbs {
	display: block;
	padding: 0 0 0.75em 4em;
	width: 90%;
	clear: both;
	float: left;
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: .8em;
	color: #28a2c4;
}
#breadcrumbs a {
	color: #28a2c4;
} 

body {
	font-family:helvetica, arial, sans-serif; 
	background:#efefef; margin:0 0;
	min-width:450px;
	}
#wrapper {
	width:980px; margin:0 auto 20px;
	}
.clearfix:after {
	 content: ".";
	 display: block;
	 height: 0;
	 clear: both;
	 visibility: hidden;
}

header {
	position:relative; /* positioning context for title and search areas */
	margin:10px 0;  /* vertical space around header */
	border-radius:20px 0px 20px 0px; /* order: tl, tr, br, bl */
	box-shadow:0 12px 8px -9px #555; /* negative spread brings shadow inside box width */
	background:#fff;
	padding-top:1px; /* prevents menu's top margin collapsing 
		z-index:50;
*/
	}

header#topheader {
		height:135px;   /*  fixed height to enclose absolutely positioned elements */	
		border: 3px solid #28a2c4;	/*aqua blue*/
}
	

header img{
	position:absolute;
	top:10px;
	left:10px;
}	
header section#title {
	position:relative;
	float:right;
	width:380px; /* wide enough to not force text wrap */
	height:90px; /* tall enough for both lines of text */
	margin-right:20px;
	top:15px;
	
	}
header section#title p {
	font-family:Lato, helvetica, sans-serif;
	font-style:normal;
	font-weight:400;
	line-height:1.5;
	text-align: right;
	letter-spacing:-.025em;
	font-size: 1em;
	color: #28a2c4;	/*aqua blue*/
	}

/* BOOK AREA */
section#top_image_area	{
	clear:both;
/*	background-color:white;
	border:1px solid #f58c21;	
*/	border-radius:20px 0px 20px 0px;
	margin:8px 0 16px; /* separation from feature area and footer */
	overflow:hidden; /* encloses floated article elements */
	}	
#top_image_area  article { /* four columns for the books */
	float:left;
	width:25%;
	padding:10px 0;
	background:none;
	}
#top_image_area article .inner { /* wrapper  */
	position:relative; /* positioning context for popups */
	width:150px; 
	margin:0 auto;
	}
	#myImg1, #myImg2, #myImg3 {
	float: left;
 padding 3%;
	width: 33.333333333333%;
	height: auto;
	display: block;
}
#myImg1 img, #myImg2 img, #myImg3 img {
	width: 93.9%;
	padding: 3%;
	float: left;
	border: 1px black solid;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.myImages {
	background-color: #FFF;
	clear: none;
	width: 100%;
	display: block;
	float: left;
}


	
#top_image_area  .inner h3 { /* rotated type */
	position:absolute;
	width:160px;
	left:115%; /* positions type on right side of book */
	bottom:5px;
	-webkit-transform:rotate(-90deg);
	-webkit-transform-origin:left bottom;
	   -moz-transform:rotate(-90deg);
	   -moz-transform-origin:left bottom; /* turns the type - needs VSPs */
		-ms-transform:rotate(-90deg);
	   	-ms-transform-origin:left bottom; /* turns the type - needs VSPs */
		    transform:rotate(-90deg); /* sets rotation point at start of type */
		    transform-origin:left bottom;
	color:#ccc;
	font-size:1.4em;
	font-family:Lato, helvetica, sans-serif;
	font-style:normal;
	font-weight:900;
	text-align:left;
	}
/* #top_image_area article.right:last-child h3 {
	left:85%; different offset for narrower 4th book cover 
	}*/
#top_image_area article img {
	box-shadow: 0 12px 8px -9px #555; /* shadow under book */
	}
	
/* start of the pop-ups */
#top_image_area article aside {
	display:none; /* hides popups */
	position:absolute; /* relative to images */
	z-index:100;
	width:200px; /* width of popup */
	background:#fff;
	padding:10px 2px 5px; /* space around popup content */
	border:2px solid #f58c21;
	border-radius:10px 0px 10px 0px;
	box-shadow:4px 4px 16px #555; 
	color:#555;
	font-family:"Source Sans Pro", helvetica, sans-serif;
	font-size:.8em;
	line-height:1.5em;
	}
#top_image_area article:hover aside {
	display:block; /* shows popup */
	}
#top_image_area article aside li {
	padding:.25em 0 .75em 1em;
	list-style-type:none;
	line-height:1.2em;
	}
#top_image_area article aside li a {
	text-decoration:none;
	font-size:1.2em;
	color:#616161;
	}
#top_image_area article aside li a:hover {
	color:#333;
	}
#top_image_area article.left aside {
	left:84%; top:-7px; /* positions popup on right side of image */
	}
#top_image_area article.right aside {
	right:84%; top:-7px;	/* positions popup on left side of image */
	}
#top_image_area article aside:after { /* red triangle box*/
	content:""; /* some content required - using empty text string */
	position:absolute; /* relative to popup */
	top:33px;
	border:12px solid;
	height:0px; width:0px; /* collapses box to create triangle */
	}	
#top_image_area article.left aside:after { /* create the triangle by making three sides transparent */
	right:100%;
	border-color:transparent #f58c21 transparent transparent; 
	}
#top_image_area article.right aside:after { /* create the triangle by making three sides transparent */
	left:100%;
	border-color:transparent transparent transparent #f58c21;
	}
#top_image_area article aside:before { /* red triangle box*/
	content:""; /* some content required - using empty text string */
	position:absolute; /* relative to popup */
	border:8px solid;
	height:0px; width:0px; /* collapses box to create triangle */
	z-index:100;
	top:37px;
	}
#top_image_area article.left aside:before { /* create the triangle by making three sides transparent */
	right:100%; 
	border-color:transparent white transparent transparent; 
	}
#top_image_area article.right aside:before { /* create the triangle by making three sides transparent */
	left:100%;
	border-color:transparent transparent transparent white;
	} 
footer {
	margin-top: 20px;
	clear: left;
	padding: 1em 0 .35em 0; /* space above and below content */
	text-align: center; /* centers content */
	border-radius: 10px 0px 10px 0px;
	box-shadow: 0 12px 8px -9px #555;
	background-color: #28a2c4;
	}
footer p { /* text line styling */
	font-family: 'Sorts Mill Goudy', serif;;
	font-weight:400;
	font-size:1em;
	letter-spacing:.1em;
	color:#fff;
	}
footer p a { /* link in text line */
	font-family: 'Sorts Mill Goudy', serif;;
	font-weight:400;
	font-size:1.2em;
	color:#ddd;
	text-decoration:none;
	}
footer p a:hover {
	color:#fff;
	}
footer ul { /* list of links */
	display:inline-block; /* shrink-wraps list */
	margin:4px 0 0; 
	}
footer li {
	list-style-type:none; /* removes default bullets */
	float:left; /* makes list horizontal */
	font-size:1em;
	letter-spacing:.1em;
	
	}
footer li + li a {
	border-left:1px solid #ccc; /* dividers between links */
	}
footer li a {
	text-decoration:none; /* removes default underlining off links */
	color:#eed;
	padding:0 5px; /* space between links */
	}
footer a:hover {
	color:#fff;
	}
footer #mi{
	display: inline-block;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	font-size:smaller;
	vertical-align: top;

}


/* START OF MEDIA QUERIES */
@media only screen and (max-width:1000px) {
	body { 
		margin:0 8px 20px; /* add right margin to prevent scroll clipping */
	}
	#wrapper {width:98%;} /* layout becomes fluid */
	header {
     padding:1px 0 0 0; /* header height increases to make romm for lower menu */
	}
}

@media only screen and (max-width:640px) {
		#wrapper {width:98%;}
	header nav.menu {width:94%; font-size:.65em; } /* more horiz margin - relatively */
header section#title p {
	font-size:.75em;
} 
header section#title{
	top:25px;
}

#top_image_area {
	display:none;
}
#breadcrumbs {
	padding: 0.75em 0 0.75em 1em;
}
footer li {
	list-style-type:none; /* removes default bullets */
	float:none; /* makes list horizontal */
	font-weight:400;
	letter-spacing:-.1em;
	}
footer li + li a {
	border-left: hidden; /* dividers between links */
	}
}