/* ########## Layout ########## */
html,body {
	margin:0;
	padding:0;
	width: 100%;
	height:100%;
	min-height: 100%;
	font-family:verdana,arial,sans-serif;
	font-size: 12px;
	text-align: center;
	color: #666666;
}
html {
	background-color: white;
}
body {
	background-color: transparent;
	position: absolute;
	min-width: 800px;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
div#pagewidth {
	width: 800px;
	margin-top: 25px;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	background-image: url(/images/site/inkdrops.gif);
	background-repeat: no-repeat;
	background-position: bottom right;
	background-position: 635px 250px;
}
div#wrapper {
	position: relative;
	width: 100%;
	height: 100%;
}
div#main {
	padding-left: 18px;
	padding-right: 18px;
}
div#content { margin-bottom: 20px; min-height: 400px; position:relative; width: 550px; margin-right: auto; margin-left: auto; z-index: 9; }

h1,h2,h3,h4,p,ul,li { margin:0; padding:0; }
img { border: none; margin:0; padding:0; }

/* ########## Master Divs ########## */
div#header { height: 135px; position: relative; z-index:10; padding-left: 35px; margin-bottom: -20px; }
#nav { position: absolute; top: 52px; width: 722px; }
div#footer { clear:both; position:relative; z-index: 10; text-align:center; margin-top: 20px; margin-bottom: 35px; font-size: 10px; color: #cbcbcb; padding: 10px; padding-bottom: 20px; }

/* ########## Header & Nav ########## */
#header #logo { position: relative; left: 90px; z-index: 15; }
#header img#nav-bar { position: absolute; top: 43px; }
#nav-bar-shadow { background-image: url(/images/site/navbar-shadow.png); width: 722px; height: 131px; position: absolute; top: 0px; }
#social { position: absolute; left: 490px; top: 14px; }
#social a:hover { position:relative; top:-8px; }
#nav { font-family: 'Arapey', serif; font-size: 17px; font-style:italic; text-align: center; }
#nav a { text-decoration: none; color: #585858; display: block; width: 100%; padding-bottom: 10px; }
#nav a:hover { color: #000000; }
#nav a.selected { color: #585858; font-weight: bold; }

/* ########## NEW Nav ########## */
#nav {  } /* container */
    #nav > a { display: none; }
    #nav li { position: relative; }
 
    /* first level */
    #nav > ul { list-style-type: none; margin: 0; padding: 0; height: 3.75em; width: 68%; margin-left: auto; margin-right: auto; }
    #nav > ul > li { width: 16.65%; height: 27px; float: left; }
 
    /* second level */ 
    #nav li ul { list-style-type: none; display: none; position: absolute; top: 100%; border: 1px solid #ddd; background-color: rgba(255,255,255,.9); margin-left: -50%; margin-right: -50%; padding-left: 10%; padding-right: 10%; }
    #nav li:hover ul { display: block; }
    #nav li:hover ul li { border-top: 1px solid #ddd; }
    #nav li:hover ul li:first-child { border-top: none; }
    #nav li:hover ul li a { padding-top: .35em; padding-bottom: .35em; }
    
@media only screen and ( max-width: 40em ) /* 640 */
{
    #nav { position: relative; }
        #nav > a {  }
        #nav:not( :target ) > a:first-of-type,
        #nav:target > a:last-of-type { display: block; }
 
    /* first level */
    #nav > ul { height: auto; display: none; position: absolute; left: 0; right: 0; }
    #nav:target > ul { display: block; background-color: rgba(235,235,235,.9); }
    #nav > ul > li { width: 100%; float: none; border-bottom: 1px solid #bbb; padding-top: 6px; position: relative; }
 
    /* second level */
    #nav:target > ul ul { display: block; }
    #nav > ul ul { display: none; background-color: rgba(255,100,100,.5); height: auto; width: 100%; margin-left: auto; margin-right: auto; padding: 0; border-bottom: 1px solid #bbb; }
    #nav > ul ul li { padding-top: 6px; }
    #nav li ul { height: 0px; position: relative; /* was static */ }
}

/* ########## Content ########## */
#content a {
	text-decoration: none;
	color: #222222;
}
#content a:hover {
	text-decoration: underline;
	color: black;
}

#content a.lulu {
	text-decoration: none;
	color: #666666;
}
#content a.lulu:hover {
	text-decoration: underline;
	color: black;
}
#content blockquote {
	font-family: serif;
	margin: 0; padding: 0;
	padding: 15px;
	padding-left: 60px;
	padding-right: 20px;
	margin-bottom: 10px;
	background-color: #f2f2f2;
	background-image: url(/images/site/quote-f2.gif);
	background-repeat: no-repeat;
	background-position: 8px 12px;
	clear: both;
	font-size: 20px;
	font-style:italic;
	color: #888888;
	height: 100px;
	display: block;
	position: relative;
}
#content blockquote h3 { font-size: 16px; font-weight: normal; }
#content blockquote span.byline { position: absolute; top: 85px; right: 0px; color: #888888; font-family: 'Cardo', serif; display: block; text-align: right; padding-right: 45px; font-size: 16px; font-style: normal; padding-top: 10px; }
#content blockquote span.source { font-style:italic; color: #aaaaaa; padding-left: 5px; font-size: 14px; }
#content blockquote a { text-decoration: none; color: #888888; }
#content blockquote a:hover { text-decoration: none; color: #333333; }
#content p { margin-bottom: 15px; }
#content p.handwriting { margin-bottom: 20px; }
#content .handwriting { font-family: 'Waiting for the Sunrise', cursive; line-height: 34px; font-size: 24px; }
#content .handwriting.large { font-size: 32px; }
#content .handwriting.small { font-size: 20px; }
#content .handwriting a { color: #6D4925; font-weight: bold; letter-spacing: .04em; } /* was #3366cc*/
#content .scribble { font-family: 'Fredericka the Great', cursive; font-size: 50px; }
#content .center, #content .centered { text-align: center; }
#content .thumbnail { margin-bottom: 10px; margin-right: 5px; display: block; float: left; width: 180px; background-color: #dddddd}
#content .thumbnail.last { margin-right: 0px; }
#content .thumbnail img { border: 1px solid #dddddd; }
#content .thumbnail p { margin-bottom: 5px; }

#content h1 { font-family: 'Fredericka the Great', cursive; font-size: 60px; font-weight: normal; }

#content div.number-circle { width:50px; height:50px; font-size: 40px; margin-left:-65px; margin-top:-10px; position:absolute; font-family:'Fredericka the Great', cursive; border-radius:50%; display:inline-block; margin-right:20px; background-color:#ddd; text-align:center; vertical-align:middle; color:white; border:2px solid #ccc; text-shadow: 0 0 10px #888;}

#content div.more-books a > img, #content div.more-books div.comming-soon { width: 30%; margin-left: 1%; margin-right: 1%; margin-top: 1em; position: relative; background-size: cover; display: inline-block; background-color: #ddd; background-blend-mode: screen; transition: background-color 0.5s ease;}
#content div.more-books div.comming-soon img { width: 100%; filter: grayscale(75%); }
#content div.more-books div.comming-soon span { text-transform: uppercase; color: white; font-size: 12px; position: absolute; top: 19px; right: -6px; transform: rotate(45deg); text-align: center; }
#content div.more-books div.comming-soon:hover { background-color: #888; }

/* ########## Forms ########## */
label.error, label.mce_inline_error { color: #8d0000; float: none; display: block; }
#content input.error, #content textarea.error, #content response.error, #content input.mce_inline_error { background-color: #ffcccc; border-color: #8d0000; }
response.error { color: #D8000C; background-color: #FFBABA; border-color: #D8000C; clear: both; padding: 5px; }
response.success { color: #4F8A10; background-color: #DFF2BF; border-color: #4F8A10; clear: both; padding: 5px; }


label { width: 269px; margin-left: 3px; margin-right: 3px; display: block; }
input, textarea { border: 1px solid #cccccc; margin-bottom: 6px; margin-left: 2px; margin-right: 2px; }
textarea { width: 536px; padding: 4px; margin-bottom: 15px; }
input.submit, button.submit { background-color: #dddddd; width: 546px; padding-top: 4px; padding-bottom: 4px; }
input.submit:hover, button.submit:hover { background-color: #bbbbbb; }

#content form div.row { position: relative; }
#content form div.name { width: 273px; }
#content form div.email { width: 273px; position: absolute; top: 0px; left: 277px; }
#content form div input#realname, #content form div input#email { width: 267px; }

/* ########## Mobile Specific CSS ########## */
a.mobile_notification { display: block; border: 1px solid #666666; background-color: #ffffcc; color: #666666; font-size: 10px; text-decoration: underline; padding: 2px; margin-bottom: 4px; text-align: center; }
a.mobile_notification:hover { background-color: #cccccc; color: #666666; text-decoration: none; }

/* ########## Footer ########## */

/* #### AVAILABLE FONTS FOR USAGE #### */
/* font-family: 'Bilbo Swash Caps', cursive; */
/* font-family: 'Fredericka the Great', cursive; */
/* font-family: 'Waiting for the Sunrise', cursive; */
/* font-family: 'Cardo', serif; */
/* font-family: 'Arapey', serif; */