body {
font-family:Arial, Verdana, Geneva, sans-serif;
font-size:14px;
background-color:#ccc; 
margin:0px;
}

/* Add transition to containers so they can push in and out. */
#layout, #menu, .menu-link {
-webkit-transition:left 0.2s ease-out;
-moz-transition:left 0.2s ease-out;
-ms-transition:left 0.2s ease-out;
-o-transition:left 0.2s ease-out;
transition:left 0.2s ease-out;
}

/* This is the parent `<div>` that contains the menu and the content area. */
#layout {
position:relative;
left:0;
}

/* The content `<div>` is where all your content goes. */
.content {
margin:0 auto;
padding:0em 0.5em;
}

.header {
margin:0;
background-color:#666;
text-align:center;
padding:0.5em 0em;
position:relative;
}
.header h1 {
margin:9px 0px;
padding-left:116px;
font-size:36px;
font-weight:bold;
}

.pic {
text-align:center;
font-size:x-small;
}

div.logo {
position:absolute;
left:0;
top:0;
z-index:2000;
content:url(https://www.so-calleddollars.com/images/test.gif);
height:100%;
width:auto;
}

img.bookcover {
float:right;
margin-left:20px;
height:130px;
width:101px;
}

.columns {   
-moz-column-width:11.5em; /* Firefox */
-webkit-column-width:11.5em; /* webkit, Safari, Chrome */
column-width:11.5em;
}
/* Remove standard list and bullet formatting from ul */
.columns ul {
margin:0;
padding:0;
list-style-type:none;
}
/* correct webkit/chrome uneven margin on the first column*/
.columns ul li:first-child {
margin-top:0px;
}

/* The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that appears on the left side of the page. */
#menu {
position:fixed;
top:0;
left:0;
bottom:0;
width:122px;
height:100vh;
margin-left:-122px; /* "#menu" width */
z-index:1000; /* so the menu or its navicon stays above all content */
background:#000;
overflow-x:visible;
overflow-y:auto;
-webkit-overflow-scrolling:touch;
}
#menu a {
color:#999;
border:none;
padding:0.6em 0 0.6em 0.6em;
}
#menu .pure-menu, #menu .pure-menu ul {
border:none;
background:transparent;
}
#menu .pure-menu li a:hover, #menu .pure-menu li a:focus {
background:#333;
}
#menu .pure-menu-selected, #menu .pure-menu-heading {
background:#1f8dd6;
}
#menu .pure-menu-selected a {
color:#fff;
}
#menu .pure-menu-heading {
font-size:110%;
color:#fff;
margin:0;
}
.pure-menu-list {
list-style:none;
margin:0;
padding:0;
}
.pure-menu-list, .pure-menu-item {
position:relative;
}
.pure-menu-item {
padding:0;
margin:0;
height:100%;
}
.pure-menu-link, .pure-menu-disabled, .pure-menu-heading {
padding:.5em 1em;
}
.pure-menu-link {
color:#777;
}
.pure-menu-link, .pure-menu-heading {
display:block;
text-decoration:none;
white-space:nowrap;
}
.pure-menu-active>.pure-menu-link, .pure-menu-link:hover, .pure-menu-link:focus {
background-color:#eee;
}
/* Prev/Next buttons in footer */
.button
{
color:#fff;
text-decoration:none;
display:inline-block;
padding:4px 10px;
margin-top:20px;
margin-bottom:60px;
-webkit-border-radius:5px;
font:normal 14px/16px Helvetica, Arial, sans-serif;
}
.button.black {
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%,
    from(#7d828c),
	color-stop(0.5, #303749),
	color-stop(0.5, #121a2e),
	to(#121a2e));
border:solid 1px rgba(79, 79, 79, 0.75);
}
.button.black:hover {
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, 
	from(#4286f5), 
	color-stop(0.5, #4286f5),
	color-stop(0.5, #194fdb),
	to(#194fdb));
}
.button.back {
position:relative;
padding-left:5px;
margin-left:8px;
float:left;
}
.back.black > span {
background-image:-webkit-gradient(linear,
    left top,
	right bottom,
	from(#7d828c),
	color-stop(0.5, #303749),
	color-stop(0.5, #121a2e), to(#121a2e));
border-left:solid 1px rgba(79, 79, 79, 0.75);
border-bottom:solid 1px rgba(79, 79, 79, 0.75);
-webkit-border-top-left-radius:6px;
-webkit-border-bottom-right-radius:6px;
height:19px;
width:19px;
display:inline-block;
-webkit-transform:rotate(45deg);
-webkit-mask-image:-webkit-gradient(linear, left bottom, right top, 
	from(#000000), 
	color-stop(0.5,#000000), 
	color-stop(0.5, transparent), 
	to(transparent));
position:absolute;
left:-8px;
top:2px;
-webkit-background-clip:content;
}
.back:hover > span {
background-image:-webkit-gradient(linear, left top, right bottom, 
	from(#4286f5), 
	color-stop(0.5, #4286f5),
	color-stop(0.5, #194fdb),
	to(#194fdb));
}
.button.next {
position:relative;
padding-right:5px;
margin-right:8px;
float:right;
}
.next.black > span {
background-image:-webkit-gradient(linear,
    left top,
	right bottom,
	from(#7d828c),
	color-stop(0.5, #303749),
	color-stop(0.5, #121a2e),
	to(#121a2e));
border-right:solid 1px rgba(79, 79, 79, 0.75);
border-top:solid 1px rgba(79, 79, 79, 0.75);
-webkit-border-top-left-radius:6px;
-webkit-border-bottom-right-radius:6px;
height:20px;
width:20px;
display:inline-block;
-webkit-transform:rotate(45deg);
-webkit-mask-image:-webkit-gradient(linear,
    right top,
	left bottom,
	from(#000000),
	color-stop(0.5,#000000),
	color-stop(0.5, transparent),
	to(transparent));
position:absolute;
right:-8px;
top:2px;
-webkit-background-clip:content
}
.next:hover > span {
background-image:-webkit-gradient(linear, left top, right bottom, 
	from(#4286f5), 
	color-stop(0.5, #4286f5),
	color-stop(0.5, #194fdb),
	to(#194fdb));
}

.menu-link {
position:fixed;
display:block; /* show this only on small screens */
top:0;
left:122px; /* "#menu width" */
background:rgba(0,0,0,0.7);
font-size:10px; /* change this value to increase/decrease button size */
z-index:3000;
width:2em;
height:auto;
padding:2.1em 1.6em;
}
.menu-link:hover, .menu-link:focus {
background:rgba(0,0,0,0.7);
}
.menu-link span {
position:relative;
display:block;
}
.menu-link span, .menu-link span:before, .menu-link span:after {
background-color:#fff;
width:100%;
height:0.2em;
}
.menu-link span:before, .menu-link span:after {
position:absolute;
margin-top:-0.6em;
content:" ";
}
.menu-link span:after {
margin-top:0.6em;
}

@media (min-width:48em) {

#layout {
padding-left:122px; /* left col width "#menu" */
left:0;
}
#menu {
position:absolute;
padding-top:200px;
left:122px;
}
#menu.stuck {
position:fixed;
top:-200px;
}
.menu-link {
display:none;
}
.content {
padding:1em;
padding-left:62px;
}
.header {
text-align:left;
padding:1em 0em;
}
.header h1 {
margin:9px 62px;
padding-left:0px;
}
div.logo {
height:206%;
left:-121px;
}
img.bookcover {
height:260px;
width:202px;
}

}

@media (max-width:48em) {
	
#layout.active {
left:122px;
}
#layout.active #menu {
left:122px;
}

}