@charset "UTF-8";

/*
stylesheet for www.telltalebooks.com, version 1
last revised March 2021
Gregory Kerkman, Creative Director
*/

/* -----color guide-----
#000000 black
#FFFFFF white
#333333 background dark grey
#CCCCCC background light grey
#999999 border medium grey
#515151 navigation text dark grey
#BABABA footer link hover/visited light grey
#555843 dark green: header
#A58F5E dark gold
#D9D099 tan
#96A481 light green
#4D0415 deep maroon
#12BC8C bright green
#0EA3D3 bright blue
*/

/* -- Fonts --
@import url("letter/alegreya-fontfacekit/stylesheet.css");*/

/* CSS Document */

/* CSS Reset */
/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {    margin: 0;    padding: 0;    border: 0;    font-size: 100%; font: inherit;    vertical-align: baseline;} /* HTML5 display-role reset for older browsers */article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;} body {line-height: 1;} ul {list-style: none;} blockquote, q {    quotes: none;} blockquote:before, blockquote:after, q:before, q:after {content: '';    content: none;} table {border-collapse: collapse; border-spacing: 0;}

/* Global Constants */

/*html5 display rule*/
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
    display: block;
}

 /* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

html {
    min-width: 100%;
    min-height: 100%;
    font-size: calc(0.9em + 0.4vw);
}
body  {
    margin: 0;
    padding: 0;
    text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
    color: #ffffff;
    background-color: #000000;
    font-family: "adobe-caslon-pro-1","adobe-caslon-pro-2",serif;
    font-style: normal;
    font-weight: 400;
    font-size: 1em;
    width: 100%;
    min-height: 100%;
}
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}
#container  {
    margin: 0 auto;
    padding: 0;
}

/* --- GENERAL STYLES --- */
p {
    line-height: 1.4em;
    margin: 0 0 0.6em 0;
    /*padding: 1em 1em 0 1em;*/
}
strong {
    font-weight: 700;
}
em {
    font-style: italic;
}
a {
    text-decoration: underline;
    color: #D9D099;
}
a:hover {
    color: #F49541;
    text-decoration: underline;
}
h1 {
    font-weight: 700;
    font-size: 2em;
    padding: 0;
    margin: 0.3em 0 0 0;
}
h2 {
    font-weight: 700;
    font-size: 1.5em;
    padding: 0.5em 0;
    /*margin: 0 5%;*/
}
h3 {
    font-weight: 700;
    font-size: 1.2em;
    padding: 0;
    line-height: 1.5em;
    color: #ffffff;
}
ol {
    list-style-type: decimal;
}
ol li {
    margin: 0 0.5em;
}
li {
    line-height: 1.3em;
}
.headLeft {
    text-align: left;
    text-transform: uppercase;
}

/* Form Styles */
form {
    /*width: 100%;*/
    margin: 1em 4em;
    padding: 0;
    align-self: center;
}
form .inputLine {
    width: 100%;
    margin: 1em 2%;
    display: block;
    float: none;
}
textarea {
    width: 100%;
    /*border-radius: 0.3em;
    border-width: 0em;
    border-color: #999;
    border-style: solid;*/
    margin: 0 0 0.5em 0;
    color: #000000;
}
input {
    height: 2.5em;
    color: #000000;
}
label {
    display: block;
    text-align: left;
    font-weight: 900;
    width: 100%;
}
input[type=checkbox], input[type=radio] {
    width: auto;
    border: none;
    height: auto;
    margin: 0 0 0 0.5em;
    padding: auto;
}
input[type=submit], input[type=reset] {
    margin: 0.3em;
    padding: 0.5em;
    font-family: "calluna-sans-1","calluna-sans-2",sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.3em;
    color: #D9D099;
    background-color: #A58F5E;
    border: solid 2px #A58F5E;
    border-radius: 5px;
}
input[type=submit]:hover, input[type=reset]:hover {
    color: #FFFFFF;
    background: #000000;
}
.filterText {
    border-width: 0.1em;
    width: auto;
    margin: 0.5em 0 0 0;
    padding: auto;
    height: 1.5em;
}

.flexdiv {
    width: 100%;
    padding: 0.5em 0;
}
/* End Form Styles */

/* Contact Form Specific Styles */
.contactForm {
    display: block;
    width: 100%;
    padding: 1em;
    margin: 1em auto;
    text-align: center;
    vertical-align: middle;
}
.contactForm .message {
    padding: 0.7em;
    display: block;
    width: 100%;
}
/* End Contact Form Styles */

table {
    margin: 0;
}

/* --- HEADER STYLES --- */
#header  {
    padding: 1.5em 0 0;
    background: #555843;
}
.siteName {
    padding: 0 0 0 0.2em;
    font-weight: 400;
    font-size: 1.7em;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: 0.2em;
    color: #D9D099;
}
.siteName:hover {
    color: #CCCCCC;
    text-decoration: none;
}
#nav  {
    width: 100%;
    padding: 0.5em 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
#nav a {
    display: block;
    margin: 0.3em;
    padding: 1em 0.5em;
    font-family: "calluna-sans-1","calluna-sans-2",sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.3em;
    color: #D9D099;
    background-color: #A58F5E;
    border: solid 2px #A58F5E;
    border-radius: 5px;
    width: 45%;
}
#nav a:hover {
    background-color: #000000;
}

.download {

    display: block;
    margin: 0.3em auto;
    padding: 1em 0.5em;
    font-family: "calluna-sans-1","calluna-sans-2",sans-serif;
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.3em;
    color: #D9D099;
    background-color: #A58F5E;
    border: solid 2px #A58F5E;
    border-radius: 5px;
    width: 75%;
}
/* End Header Styles */

/* Main Content Styles */
#mainContent {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background-color: #333333;
    text-align: center;
}
#noBkgrd {
    background-color: none;
}
.trail {
    font-family: "calluna-sans-1","calluna-sans-2",sans-serif;
    font-size: 0.7em;
    margin: 0;
    padding: 0.5em;
    text-align: left;
    display: block;
    background-color: none;
    border-radius: none;
}
.textSingle {
    text-align: left;
    vertical-align: baseline;
    margin: 2em;
    width: auto;
}
.textColumns {
    text-align: left;
    -webkit-columns: auto 1;
    -moz-columns: auto 1;
    columns: auto 1;
    -webkit-column-gap: 0.5em;
    -moz-column-gap: 0.5em;
    column-gap: 0.5em;
    vertical-align: baseline;
    margin: 2em;
    width: auto;
}
.textColumns p {
    padding: 0;
}
.tableContent {
    margin: 1em;
    padding: 1em;
    background-color: #fff;
}
.lgtable {
    width: 100%;
}
.lgtable th {
    color: #fff;
    background-color: #000;
}
.lgtable th, td {
    border: solid 0.2em #9F9A9A;
    text-align: left;
    padding: 0.6em;
}
.seriesTable th, td {
    border: solid 0;
}
.scroll {
    max-height: 41em;
    overflow: scroll;
}
.masonry {
    margin: 0;
    padding: 0;
    -moz-column-gap: 1.5em;
    -webkit-column-gap: 1.5em;
    column-gap: 1.5em;
    font-size: 0.85em;
}
.homeImage {
    margin: 0;
    padding: 0;
    /*-moz-column-gap: 0;
    -webkit-column-gap: 0;
    column-gap: 0;*/
    position: relative;
}
.homeImage img {
    max-width: 100%;
}

/* End Main Content */

/* Footer Styles */
#footer {
    margin: 0;
    padding: 1em;
    background-color: #000000;
}
#footer p {
    margin: 0;
    padding: 0.5em 0;
    color: #A9A9A9;
    font-size: 0.8em;
}
#footer a {
    color: #FFF;
}
#footer a:hover {
    color: #BABABA;
}
#footer a:visited {
    color: #BABABA;
}
.socialIcon {
    width: 2.5em;
    margin: 0.5em;
}
/* End Footer Styles */

/* --- specific styles --- */
.pageTitle {
    font-size: 1.5em;
    font-weight: 800;
    margin: 0;
    padding: 1em 0;
}
.pageTitle img {
    width: 80%;
}
.bookTitle {
    font-size: 3em;
    font-weight: 800;
    margin: 1em 0 0.3em 0;
    line-height: 1.3em;
}
.bookAuthor {
    font-size: 1em;
    font-weight: 800;
    margin: 0;
}
.bookDate {
    font-size: 1em;
    font-weight: 800;
    margin: 0;
    font-style: italic;
}
.projectImage {
    width: 100%;
    margin: 0;
    display: block;
}
.projectText {
    display: block;
    width: 100%;
    vertical-align: top;
    margin: 0;
    text-align: left;
    padding: 0.5em 1em;
}
/* Sidebar */
.sidebar {
    margin: 0.8em;
    padding: 0.3em 0;
    width: 35%;
    /*border: solid #000 0.1em;*/
    text-align: center;
    display: inline-block;
}
.sidebar ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.sidebar ul li{
    display: inline-block;
    float: left;
}
.sidebar a {
    line-height: 2.2em;
    color: #000;
    display: block;
    text-decoration: none;
    padding: 0.3em 1em;
}
.sidebar a:hover {
 color: #ef6b21;
}
.gallery {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.listCell {
    display: block;
    width: 100%;
    /*height: 10em;*/
    margin: 1em;
    padding: 0.3em;
    background-color: #333;
    border: solid 1px #555;
}
.listCell:hover {
    background-color: #222;
}
.thumb1 {
    width: 100%;
    /*height: 9em;*/
    object-fit: cover;
    object-position: center;
}
.thumb2 {
    width: 100%;
    height: 9em;
    object-fit: contain;
}
.listCell a {
    text-decoration: none;
}
.listCell a:hover {
    text-decoration: underline;
}
/* End Sidebar Styles */

/* blog styles */
.artimages {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.portfolioThumb {
    width: 12em;
    height: 12em;
    border: solid 1px #FFF;
    display: inline-block;
    margin: 0.3em;
    padding: 0.3em;
}
.portfolioThumb img {
    width: 100%;
    height: 11.3em;
    object-fit: cover;
    object-position: center;
}
/* end blog styles */

.bio {
    text-align: left;
    vertical-align: baseline;
    margin: 2em;
    width: auto;
}

.cvText {
    text-align: left;
    margin: 0 auto;
    padding: 0.5em;
}

/*#description {
    background-color: #FFF;
    padding: 0.5em;
    margin: 1em 0 1em 0;
}*/
.fltrt { /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
    float: right;
    margin-left: 0.5em;
}
.fltlft { /* this class can be used to float an element left in your page */
    float: left;
    margin-right: 0.5em;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear: both;
    height: 0;
    font-size: 0.1em;
    line-height: 0;
}

} /* End 320px width */

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

} /* End Extra Small Devices, Phones */

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) and (orientation: landscape){
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
    .homeImage {
        /*-moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;*/
        /*height: 75vh;*/
    }
    .homeImage img {
        /*height: 100%;*/
    }
    .listCell {
        display: inline-block;
        width: 45%;
    }
    .thumb1 {
        height: 20em;
    }
    .projectImage {
        width: 50%;
        margin: 1em;
        display: inline-block;
    }
    .projectText {
        display: inline-block;
        width: 40%;
        vertical-align: top;
        margin: 0;
        text-align: left;
        padding: 0.5em 1em;
    }
    .bio {
        display: flex;
        flex-direction: row;
        /*flex-wrap: wrap;*/
        justify-content: center;
    }
    .bioentry {
        width: 43%;
        margin-right: 2em;
    }
    .cvText {
        width: 50%;
    }
    
    .flexdiv {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: stretch;
    }
    .threecol {
        width: 30%;
        margin: 1em;
    }
    .threecol p {
        text-align: left;
    }
    
    .book {
        width: 20%;
        margin: 1em;
        padding: 0.4em;
        background-color: #A58F5E;
        border: 4px solid #D9D099;
        border-radius: 5px;
    }
    
    .book a {
        color: #ffffff;
    }

} /* End Small Devices, Tablets */

@media only screen and (min-width : 768px) and (orientation: portrait){

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    #mainContent {
    }
    #nav a {
        font-size: 0.8em;
        width: 15%;
    }
    .contactForm {
        display: inline-block;
        width: 65%;
        margin: 1em 0;
    }
    .contactAddress {
        display: inline-block;
        float: left;
        width: 30%;
        margin: 1em 2%;
    }
    .textSingle {
        margin: 2em auto;
        width: 80%;
    }
    .textColumns {
        -webkit-columns: auto 2;
        -moz-columns: auto 2;
        columns: auto 2;
        -webkit-column-gap: 0.8em;
        -moz-column-gap: 0.8em;
        column-gap: 0.8em;
        margin: 2em auto;
        width: 80%;
    }
    .thumb1 {
        height: 24em;
    }
    .projectImage {
        width: 40%;
        margin: 1em;
        display: inline-block;
    }
    .projectText {
        display: inline-block;
        width: 56%;
        vertical-align: top;
        margin: 0;
        text-align: left;
        padding: 0.5em 1em;
    }

} /* End Medium Devices, Desktops */

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    .textColumns {
        -webkit-columns: auto 3;
        -moz-columns: auto 3;
        columns: auto 3;
        -webkit-column-gap: 1.5em;
        -moz-column-gap: 1.5em;
        column-gap: 1.5em;
    }
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
    .homeImage {
        margin: 0 10%;
    }
    .listCell {
        width: 30%;
    }
    .thumb1 {
        height: 20em;
    }
} /* End Large Devices, Wide Screens */
@media only screen and (min-width : 1920px) {
    .listCell {
        width: 22%;
    }
}
@media only screen and (min-width : 2880px) {
    .listCell {
        width: 18%;
    }
}