/* GENERAL STYLING OF ELEMENTS
----------------------------------- */
html {
	background-color: #fff;
}

body {	
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	font-size: 100%;
	max-width: 60em;
	margin: 0 auto;
}

* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.page {
	/*border: .5em solid #008080;
	max-width: 70em;
	margin: 0 auto;*/
	
}

article,
aside,
figcaption,
figure,
footer,
header,
main,
nav,
section {
  display: block;
}

h1,
h2 {
	letter-spacing: .04em;
	text-align: center;
	font-family: "Gill Sans", Arial, Verdana, sans-serif;
	font-weight: normal;
	color: #008080;
	margin: .5em 0;
}

h1 {
	background-color: #d5e9d7;
	text-transform: uppercase;
	font-size: 2.1875em; 
	line-height: 1.19318; 
}
 
h2 {
	background-color: #d5e9d7;
	color: #008080;
	font-size: 1.75em; 
	font-variant: small-caps;
}

h3 {

	color: #008080;
	font-size: 1.60em;
	font-weight: normal;
}

p {
	text-align: left;
	padding-left: .1em;
	/*margin: .7em;*/
}

li {
	/*spacing between li elements*/
	margin: .5em;
}

/* CONTENT
----------------------------------- */

p.special {
	/* mainly for index page */
	font-size: 1.09em;
	color: #008080;
	}

p.specialfooter {
	/* For Company name in footer */
	font-size: 1.5em;
	color: #008080;
	text-align: center;
	margin-bottom: 0;
	}

p.centerfooter {
	/* For company address in footer */
	text-align: center;
	margin-top: .4em;
	}

p.legal {
	/* For copyright statements or legal phrases required by Amazon */
	margin: 1em 4em 2em;
	text-align: center;
	font-size: .95em;
}

p.right {
	/* For back to top link */
	text-align: right;
}

p.center {
	/* For article copyright */
	text-align: center;
}

a.override {
	/* For back to top link or links in page */
	font-weight: normal;
}

h2.nobackground {
	/* For use index page and RogerQuotes page */
	background-color: #ffffff;
}

.indexh1 {
	background-color: #ffffff;
}

.ads {
	/* For use with google ads */
	text-align: center;
}

.indent {
	/* to indent from LHS */
	margin-left: 4em;
}

/* The following rule centers the images. */
.books {
	text-align: center;
}

/* Make images flexible */

.image-logo {
	max-width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.image-right {
	float: right;
	max-width: 100%;
	margin: .2em;
	}

.image-left {
	float: left;
	max-width: 100%;
	margin: .2em;
}

.image-book-list {
	max-width: 100%;
	margin: .5em;
}

.image-quotes {
	/* for RogerQuores.html */
	max-width: 100%;
	margin: .2em;
}

.bold008080 {
	color: #008080;
	font-weight: bold;
}

.bold8e2323 {
	color: #8e2323;
	font-weight: bold;
}

/* :::: Links :::: */


a {
	font-size: 1em;
	font-weight: bold;
}
	
a:link {
	color: #8e2323;
}
	
a:visited {
	color: #008080;
}
	
a:hover {
	background-color: #d5e9d7;
}



/* NAVIGATION
------------------------------------------------ */
nav {
	display: block;
}

.nav,
.nav ul {
	background: #fff;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav {
	min-height: 1.3em;
 	overflow: auto;
	padding: 10px 10px 10px 16px;

	/* 
		Tools like css3please.com, which I used for the code that follows, 
		help you generate CSS3 code. Try it out yourself!
	*/
  	-webkit-border-radius: 6px 6px 0 0; /* Android ≤ 1.6, iOS 1-3.2, Safari 3-4 */
          border-radius: 6px 6px 0 0; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
}

.nav a {
	color: #8e2323;
	display: block;
	font-weight: bold;
	text-decoration: none;
}

.nav li {
	float: left; 				
	width: 10em;
	color: #8e2323;
	font-weight: bold;
}


/* :::: Navigation Submenus (the dropdowns) :::: */
.nav .submenu {
	margin-left: -10px;
	padding: 10px 10px 15px;

	left: -999em; /* hide a submenu offscreen by default so visitors don't see it */
	position: absolute;
	z-index: 1000;
	
	/* 
		See note above about css3please.com.
	*/
  -webkit-border-radius: 0 0 8px 8px; /* Android ≤ 1.6, iOS 1-3.2, Safari 3-4 */
          border-radius: 0 0 8px 8px; /* Android 2.1+, Chrome, Firefox 4+, IE 9+, iOS 4+, Opera 10.50+, Safari 5+ */
}

.nav li:hover .submenu {
	display: block; /* for older versions of IE */
	left: auto; /* show the submenu when user hovers over the parent li */
	width: 10em;
}

.nav .submenu li {
	float: none;
	font-size: .875em;
	margin-top: .5em;
	width: auto;
}