@charset "UTF-8";

/*Notice that this is from HTML 5 First - 
Chapter 7, 7-8. The main thing is that 
this works to separate elements nicely. 
Comments provided where applicable. */

/*color guide:
#e1d8b9 sand
#cb7d20 orange
#952 accent orange (dark)
#3c6b92 main blue
#2c566a teal
#c3cebc light green
#7f7f7f accent gray
*/

@font-face {
	font-family: 'MidoMedium';
	src: url('../_assets/Mido-webfont.eot');
	src: local('☺'), url('../_assets/Mido-webfont.woff') format('woff'), url('../_assets/Mido-webfont.ttf') format('truetype'), url('../_assets/Mido-webfont.svg#webfontdeSVIj0D') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'ChunkFiveRegular';
	src: url('Chunkfive-webfont.eot');
	src: local('☺'), url('../_assets/Chunkfive-webfont.woff') format('woff'), url('../_assets/Chunkfive-webfont.ttf') format('truetype'), url('../_assets/Chunkfive-webfont.svg#webfont4CzPTNtF') format('svg');
	font-weight: normal;
	font-style: normal;
}


/*limited reset*/
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video {
	margin: 2;
	padding: .5;
	border: 0;
}
a {
	text-decoration: none;
}

/*html5 display rule* - check to see what display: block does.
I think it makes it more like an article look and feel. */
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, nav, menu, nav, section, summary {
	display: block;
}

body {
	background:url(images/dkblubg.jpg);
	text-align: center;
	font: 100% Georgia, "Times New Roman", Times, serif;
}
/* Not sure what a list-style does. Need to research */
nav ul, ul.menu {
	list-style: none;
}

/* layout styles - This controls the top title of the page. */
.container {
display: flex;
flex-direction: row; /* Aligns children in a row (side by side) */
height=: 100vh; /*full height of the viewport*/ 
}

#wrapper {
	width: 1150px;
	margin: auto;
	padding: 2em 60px;
	position: relative;
	background: #ff0;
	}

/* This controls the size of the main header area. You need this so all of the header elements fit there. */
header#mainHeader {
	height: 250px;
	color: #00f;
}
/* I decided to create a two column look using flex at 40% left and 60% right. I tried also to flirt with padding between each area. */ 

/* The color changes only those aspects not defined as a header. 
In other words, only the link color changed here. */
section#leftInfo {
	flex: 1;
	width: 50%;
	padding: 0 0 0 10px;
	margin-bottom: .5em;
	background: #00f;
	}

/* Changed the color to grey to demonstrate the sections are different.*/
section#rightInfo {
	flex: 1
	width:50%;
	padding: 0 0 0 10px;
	margin-bottom: 1em;
	background: #fff;
	}

footer#pageFooter {
	clear: both;
}

/*-------------presentation styles---------------*/
/*column text styles*/
.text2Col {
	-moz-column-count: 2;
	-moz-column-gap: 1em;
	-webkit-column-count: 2;
	-webkit-column-gap: 1em;
	column-count: 2;
	column-gap: 1em;
	text-align: justify;
}
/*header styles*/
header#mainHeader {
	background:url(images/MLogo.jpg) no-repeat 2px 0;
	position: center;
	no-repeat 25px 0;
	padding: 45px 0 0 105px;
	border-bottom: 2px solid #7f7f7f;
	margin-bottom: .5em;
}
#mainNav ul {
position: center;
	top: 0;
	padding-top: 85px;
	color: #ff0
                   padding: 2em 50px;
	}
/*-------------Main Navigation Styles---------------*/

header#mainHeader nav ul li a:hover {  
        color: #ffff00;  
        background-color: #0000ff;  
        }  

ul li {  
        display: inline;
      }  
  
ul li a {  
        text-decoration: none;  
        padding: 1em .8em;  
        color: #0000ff;  
        background-color: #fff;  
        }  
  
ul li a:hover {  
        color: #ffff00;  
        background-color: #0000ff;  
        }  

/*-------------presentation styles---------------*/
header#mainHeader hgroup h2 {
	font-weight: normal;
	font-size: 2em;
	font-family: MidoMedium, Georgia, serif;
}

/*section styles*/

section#leftInfo header p {
	font-size: .7em;
	color: #00ff00;
     text-align: left;
}
section#leftInfo header a {
	color: #00ff00;
}
section#leftInfo header a:hover {
	color:#952
}
section#leftInfo header h1 {
	font-weight: normal;
	font-size: 1.3em;
	color: #ff0;
	margin-top: 1em;
}
section#leftInfo article p {
text-align:left;
}

section#leftInfo article h2 {
	font-weight: normal;
	font-family: ChunkFiveRegular,"Arial Black", Arial, serif;
	color: #ff0;
	font-size: .8em;
	margin-bottom: .6em;
	margin-top: .5em;
	text-shadow: 1px 1px 1px #333;
	filter: dropshadow(color=#333, offx=2, offy=2);
}
section#leftInfo article caption {
	text-transform: uppercase;
	font-family: MidoMedium, Georgia, serif;
	font-weight: bold;
	font-size: 1em;
	text-align: left;
	color: #ffffff;
}
section#leftInfo caption span {
	font-size: .6em;
	font-style: italic;
	text-align: right;
	text-transform: lowercase;
	position: relative;
	right: 0;
	top: -1.4em;
	display: block;
}
section#leftInfo table#quickFacts {
	width: 500px;
	background: #c3cebc;
	border: none;
	margin: .5em 0 .5em;
}
section#leftInfo table#quickFacts th {
	width: 110px;
}
section#leftInfo table#quickFacts th, section#leftInfo table#quickFacts td {
	font-family: Arial, Helvetica, sans-serif;
	font-size: .8em;
	padding-left: 1em;
	text-align: left;
	line-height: 3;
}
section#leftInfo table#quickFacts tr.alt {
	background: #e1d8b9;
}

section#leftInfo p {
	color: #fff;
	line-height: 1.6;
	margin-bottom: 1em;
	}
section#leftInfo h2 {
	font-size: 1em;
	color: #ff0;
	margin-top: 1.2em;
	margin-bottom: 0;
	color: #000;
}
section#leftInfo img {
	display: center;
}
section#leftInfo article a {
	color: #ffff00;
}

section#leftInfo article a:hover {
	color: #333300;
        background-color: #ffff00;  
        }  
}
/*table info*/
/*for later use*/
/*aside styles*/
aside#rightInfo {
	font-size: 90%;
	padding: .2em;
	border-left: 2px solid #7f7f7f
}
aside#rightInfo h1{
	font-size: 3em;
	font-weight: normal;
	font-family: ChunkFiveRegular,"Arial Black", Arial, serif;
	line-height: 1;
	color: #7f7f7f;
	border-bottom: 1px solid #7f7f7f;
	margin-bottom: .5em;
	text-shadow: 1px 1px 1px #333;
	filter: dropshadow(color=#333, offx=1, offy=1);
}
.news {
	background: #e1d8b9;
	padding: .7em .7em;
	margin-bottom: 1.5em;
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 20px;
	-webkit-border-bottom-left-radius: 0px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 20px;
	-moz-border-radius-bottomleft: 0px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 0px;
	text-align:left;
	padding-left: 20px;
}
.news h1 {
	font-size: 2.5em;
	border: none;
	margin-bottom: 0;
}
.news h2 {
	font-size: 1.2em;
	margin-bottom: .2em;
}
.news h3 {
	font-size: 1.1em;
	color: #666;
	font-weight: normal;
	margin-bottom: .2em;
}
.news p {
	line-height: 1.8;
	color: #333;
	margin-bottom:1em;
	text-align:left;
	padding-left: 20px;
}
.news p.pubdate {
	text-align:right;
	color: #666;
	font-size: .9em;
	font-style: italic;
}
aside#rightInfo video {
	margin: .5em 0 1em;
}
/*form styles*/
label {
	display:block;
	margin: 1em 0 0;
}
input:focus {
	border: 1px solid #952;
}
input[type="number"] {
	width: 3em;
}
input[type="text"], input[type="email"],input[type="url"] {
	width: 350px;
	height: 20px;
}

/*form animation styles - change this to bookReview */
aside#rightInfo p.review {
	font-family:ChunkFiveRegular, Arial, serif;
	font-size: 1.2em;
	color: #952;
	margin-bottom:0;
}
aside#rightInfo p.review:hover {
	cursor: pointer;
}

/*footer styles*/
footer#pageFooter {
	border-top: 2px solid #7f7f7f;
	padding: 1em;
	height: 125px;
	background-color: #fff;
	font-size: .8em;
}
footer#pageFooter div.leftCol {
	float: left;
	width: 600px;
}
footer#pageFooter div.rightCol {
	float: right;
	width: 420px;
	text-align: right;
}
footer#pageFooter div.rightCol a {
	color: #666;
}
footer#pageFooter div.rightCol a:hover {
	color: #952;
}
footer#pageFooter p {
	margin-bottom: 1em;
	color: #666;
}
footer#pageFooter p.topLink {
	background: url(../_images/up.gif) no-repeat right center;
	}
footer#pageFooter small {
	font-style: italic;
}

/*New Book Ad*/
.mbkad { 
        float: left;
}