/*-----------------------------
 * FB - SITE CSS - edsuom.com
 *-----------------------------*/

.container {
    padding: 0;
}
.belowimage {
    padding: 0 2% 2%;
}
.content {
    /* Was 16px */
    font: 14px Georgia, Utopia, 'Palatino Linotype', Palatino, serif;
}
.footer {
    margin-top: 2em;
}

div.navbar {
    font-size: 12px;
}

h1 {
    margin-top: 0.5em;
    font-size: 2.0em;
}
h2 {
    /* h1 is made the same as h2 for my hierarchical site layout */
    margin-top: 0.5em;
    margin-bottom: 0em;
}
h2 + .epigraph             { margin-top: 1em; }
h3 + .epigraph             { margin-top: 1em; }
p.supplemental + .epigraph { margin-top: 1em; }

.epigraph, .epigraph_source, div.pe, div.postscript { color: #7f6000; }
.epigraph_source, .byline { margin-bottom: 1.5em; }

.fd-left, .fd-right {
    float: none;
    padding-left: 0.2em;
    padding-right: 0.2em;
}
.fd-partwidth-heading { margin-top: 1.0em; }
.fd-partwidth-heading-indent { margin-top: 0.8em; }
img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* IE8 fix noted by Kurt Schindler */
}
.imagerow {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

sup { vertical-align: super; }


/* Flexboxes */
.navbar, .linkbar, .bottom-info {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: inline-axis;
    -webkit-box-direction: normal;
    -moz-box-orient: inline-axis;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}
.navbar, .linkbar {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;

    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;

}
.navbar, .bottom-info {
    -webkit-box-lines: multiple;
    -moz-box-lines: multiple;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.linkbar {
    -webkit-box-lines: single;
    -moz-box-lines: single;
    -ms-flex-wrap: none;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
}
.bottom-info {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.book {
    margin-left: 10px;
    margin-right: 0;
}
.book:first-child { margin-left: 0; }
.hr-linkbar { margin-bottom: 0; }

.textlinkbar {
    width: 80%;
    text-align: left;
    margin-left: 0.5em;
    margin-bottom: 1.5em;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
}
.textlinkbar > p {
    margin-top: 0.5em;
    margin-bottom: 1em;
}
.textlinkbar + h1 {
    margin-top: 0;
}

.side-heading {
    font-weight: bold;
    font-size: 1.2em;
    text-indent: 0;
    margin-top: 0.5em;
}
.side-img {
    margin-top: 1em;
    width: 150px;
}
.side-hr {
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    width: 150px;
}
.side-extend-line {
    margin-bottom: 30px
}


/* MEDIA QUERIES */

/* Header image bigger (iPhone landscape) so navbar text can be bigger */
@media screen and (min-device-width: 480px) {
    img.heading-part { max-width: 400px; }
}

/* Allow background, floating images */
/* (all tablets but Kindle Fire HD 7) */
@media screen and (min-device-width: 580px) {
    body {
        /* For Safari 5.1 to 6.0 */
        background: -webkit-linear-gradient(#E1C679 20%, #F2E7C6 80%);
        /* For Opera 11.1 to 12.0 */
        background: -o-linear-gradient(#E1C679 20%, #F2E7C6 80%);
        /* For Firefox 3.6 to 15 */
        background: -moz-linear-gradient(#E1C679 20%, #F2E7C6 80%);
        /* Standard syntax */
        background: linear-gradient(#E1C679 20%, #F2E7C6 80%);
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    .container {
        margin: 0 auto 0;
    }
    .belowimage {
	top: -5px;
        padding: 0 15px;
    }
    div.navbar {
	font-size: 13px;
	margin-right: 4px;
    }
    div.parts { margin-top: 0.5em; }
    .linkbar + h3 {
        /* h3 fills left, linkbar right, so tighten vertical spacing */
        margin-top: 1.0em;
    }
    .full { width: 95%; }
    .tr_bq {
        margin-left: 2.0em;
        margin-right: 1.0em;
    }
    .fd-left {
        float: left;
        padding-left: 0;
        padding-right: 0.7em;
    }
    .fd-right {
        float: right;
        padding-left: 0.7em;
        padding-right: 0;
    }
    .fd-partwidth, .fd-partwidth-indent {
	margin-top: 0.5em;
    }
    div.box {
        padding-left: 1em;
        padding-right: 1em;
        margin-left: 4px;
        margin-right: 4px;
    }
    .book { margin-left: 20px; }
}


/* Full-size content div, more padding (some tablets) */
@media screen and (min-device-width: 725px) {
    .offset { margin-left: 10px; }
    .container {
	/* 640 (img) + 2*5 (img padding) = 650
	/* 650 + 10 (offset) + 35 (padding) = 695 */
	width: 695px;
	margin-top: 15px;
    }
    .belowimage {
	padding-left: 15px;
	padding-right: 20px;
    }
    div.navbar {
	font-size: 15px;
    }
    .epigraph {
	margin-left: 2em;
	margin-right: 1em;
    }
    .byline {
	margin-left: 5em;
	margin-right: 3em;
    }
    .fd-center {
	padding-left: 5px;
    }
    .fd-left {
	float: left;
	padding-right: 1.0em;
    }
    .fd-right {
	float: right;
	padding-left: 1.0em;
    }
    .book { margin-left: 20px; }
    .footer { margin-right: 2em; }
}


/* Side info at the expense of a squished normal div */
/* Apple iPad, Galaxy, Nexus, KF HD 8.9 */
@media screen and (min-device-width: 768px) {
    body { background: white; }
    .container {
	width: 768px;
	margin: 0 auto;
    }
    .belowimage {
	padding-left: 10px;
	padding-right: 10px;
    }
    .offset { margin-left: 0; }
    .left {
	float: left;
	padding-right: 10px;
	/* Need to specify a width to keep from wrapping
	/* 768 - 150 (side-info) - 4*10 (ext & int padding) = 578 */
	/* Not sure why 560 is what actually works on FF 35. Not 561! */
	width: 560;
    }
    .side-info {
	float: right;
	display: block;
	padding-left: 10px;
	width: 160px;
    }
    .fd-center { padding-left: 0; }
    .footer { width: 610px }
}


/* Full size */
@media screen and (min-device-width: 900px) {
    body {
	/* For Safari 5.1 to 6.0 */
	background: -webkit-linear-gradient(#E1C679 20%, #F2E7C6 80%);
	/* For Opera 11.1 to 12.0 */
	background: -o-linear-gradient(#E1C679 20%, #F2E7C6 80%);
	/* For Firefox 3.6 to 15 */
	background: -moz-linear-gradient(#E1C679 20%, #F2E7C6 80%);
	/* Standard syntax */
	background: linear-gradient(#E1C679 20%, #F2E7C6 80%);
	background-repeat: no-repeat;
	background-attachment: fixed;
    }
    .container {
	/* +95 (normal), +10 (offset), 4*(+5) ext & int padding = 893 */
	/* 897 is what actually works on FF 35, though */
	width: 896px;
	margin: 15px auto;
    }
    .content {
	font-size: 15px;
    }
    .belowimage {
	padding-left: 15px;
	padding-right: 15px;
    }
    div.chapters { letter-spacing: 0; }
    .offset { margin-left: 10px; }
    .left {
	padding-right: 15px;
	/* +90 img, +5 on right padding = +95 */
	width: 655px;
    }
    .normal { line-height: 1.4; }
    .side-info {
	padding-left: 15px;
	width: 170px;
    }
    .fd-center { padding-left: 5px; }
    .imagerow { flex-wrap: nowrap; }
    div.box {
	margin-left: 6px;
	margin-right: 6px;
    }
    .book { margin-left: 30px; }
    .footer { width: 750px }
}


/* Full size, with a bit more breathing room */
@media screen and (min-device-width: 950px) {
    .container {
	width: 930px;
    }
    .belowimage {
 	padding-left: 20px;
	padding-right: 20px;
    }
    .left {
	padding-right: 20px;
	width: 660px;
    }
    .full { width: 90%; }
    .side-info {
	padding-left: 20px;
	width: 175px;
    }
    .tr_bq {
	margin-left: 2.5em;
	margin-right: 1.5em;
    }
    .book { margin-left: 40px; }
}