body {
background-color: #edddc3;
text-color: black;
font-family: Franklin Gothic Medium, sans-serif;
font-size: medium;
line-height: 125%;
}

a:link {color: #CC3300;}
a:visited {color: #000066}

h1 { font-size: 175%;
font-weight: 600;
line-height: 120%;
font-family: Arial, sans-serif;
margin-bottom: .3em;
}

h2 { font-size: x-large;
line-height: 120%;
font-family: Arial, sans-serif;
margin-top: .5em;
}

img.align-left { 
margin-top: 0;
margin-bottom: 1.5em;
margin-left: 0;
margin-right: 1.5em;
width: 25%;
border: 1px solid black;
float: left; 
}

img.align-right { 
margin-top: .5em;
margin-bottom: 1.5em;
margin-left: 1.5em;
margin-right: 0;
width: 25%;
border: 1px solid black;
float: right; 
}

.caption-right {
width: 24%;
border: none;
margin: .5em 0 .5em 1.5em;
padding: 0;
text-align: center;
font-size: small;
font-style: italic;
line-height: 120%;
float: right;
}

.caption-right img {
width: 100%;
margin-bottom: .9em;
border: 1px solid black;
}

.caption-left {
width: 24%;
border: none;
margin: .5em 1.5em .5em 0;
padding: 0;
text-align: center;
font-size: small;
font-style: italic;
line-height: 125%;
float: left;
}

.caption-left img {
width: 100%;
margin-bottom: .9em;
border: 1px solid black;
}

@media only screen and (min-width: 768px) {
body {background-image: url("images/gradient-bg.jpg");margin: 1em 0 1em 1.5em;
background-size: 100%; }
}

div {
width: 95%;
background-color:  #edddc3;
background-image: url('images/parchment.jpg'); 
border-color: cc0000;        
border-style: ridge;
border-width: 4px;        
margin-top: 2%;
margin-bottom: 2%;
margin-left: auto;
margin-right: auto;
padding-left: 8px;        
padding-right: 8px;
padding-top: 1%;
}
        
@media only screen and (min-width: 768px) {
div { 
width: 70%;
margin-top: 4%;
margin-bottom: 4%;              
padding-left: 2.5%;  
padding-right: 2.5%; } 
}


.booklist {
float: left;
width: 92%;
margin: 0;
padding: 0;
border: 2px solid black;
}

img.booklist {
float:  left;
width: 30%;
height: auto;
vertical-align: top;
margin: 0 1.5em 2em 0;
border: none
}

@media only screen and (min-width: 768px) {
.booklist { width: 48% }
.joegrey { float: right; }
}

.navbar {
width:98%;
border: none;
padding: 0; 
font-size: small;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}

.navbar .navtable, td {
text-align: center;
vertical-align: middle;
border: 4px ridge #cc0000;
border-collapse: collapse;
}

a.navbar:link { color:black; text-decoration:none; }
a.navbar:visited { color:black; text-decoration:none; }

@media only screen and (min-width: 768px) {
.navbar { width: 76%; font-size: medium; } 
}

.clear { clear: both; }

.center {
text-align: center;
padding: 0;
border: none;
}

@media only screen and (max-width: 767px) {
h1 { font-size: 150%; margin-top: 0; }
h2 { font-size: 125%; margin-top: 0; }
h3 { font-size: 100%; margin-top: 0; }
.variable-size { font-size: medium; }
img.align-left, caption-left img { margin: 0 .8em .8em 0; }
img.align-right, caption-right img { margin: 0 0 .8em .8em; }
}

@media only screen and (min-width: 768px) {
.variable-size { font-size: large; line-height: 120%; }
.navbar { font-size: medum; }
}

.line  {
border-top: 2px solid black;
}

@media only screen and (min-width: 768px) {
.home1 { width: 42%; margin-left: 6%; float: left; }
.home2 { width: 42%; margin-right: 6%; float: right; }
}

@media only screen and (max-width: 767px) {
.small-screen { display: block; } 
.large-screen { display: none; }
} 

@media only screen and (min-width: 768px) {
.small-screen { display: none; } 
.large-screen { display: block; }
}