﻿#top-img {
    margin-top: 20px;
    max-width: 100%;
    height: auto;
}
#headline {
    font-size: calc(1.6em + 1vw);
    font-weight: bold;
    margin-top: 20px
}
.line {
    margin: 12px;
    margin-bottom: 50px;
    clear: both;
}

.page-title {
    margin-top: 15px;
    margin-left: 35px
}

.cat-desc {
    font-size: 15px;
    text-align: justify;
    padding-left: 25px;
    padding-right: 25px;
    margin-bottom: 26px
}

.book-item-cont {
    height: 746px;
    margin-top: 40px;
    cursor: pointer;
    background-size: 100% auto;
    background-position-x: 30px;
}
.item-title {
    color: #996600;
    font-size: calc(3.5em + 1vw);
    text-align: right;
    text-shadow: 0 0 1px rgba(0,0,0,0.3);
    padding: 20px 25px 5px 0;
    white-space: normal;
    float: right;
    width: 600px
}

.item-title-link {
    text-decoration: none
}

.item-sub-title {
    clear:both;
    font-size: 26px;
    margin-right: 30px;
    color: #666633;
    text-align: right;
}

.item-desc {
    width: 50%;
    float: right;
    text-align: justify;
    padding-right: 15px
}

.item-bullets {
    clear: both;
    float: right;
    font-size: calc(.1em + 1vw);
    width: 50%;
}
.item-bullets li {
    margin: 0;
    padding: 0
}
.book-page-container{margin:20px}
    .book-page-container h1 {
        color: #996600;
        font-family: 'heebo';
        text-shadow: 0 0 1px rgba(0,0,0,0.3);
        font-display: swap;
    }
.book-page-container h2 {text-shadow: 0 0 1px rgba(0,0,0,0.3);}
.book-page-container hr{margin-bottom:22px}
/*#book-page-container p
{
    font-size:18px;
    margin:0 0 20px 10px;
    color:#666666;
    text-shadow:0 0 1px rgba(0,0,0,0.1)
}
#book-page-container div {text-shadow:0 0 1px rgba(0,0,0,0.1)}*/
/*#book-page-container ul {margin-top:50px; font-size:18px;text-shadow:0 0 1px rgba(0,0,0,0.1)}
#book-page-container ul li {margin-top:10px}
#book-page-container ol {font-size:17px;text-shadow:0 0 1px rgba(0,0,0,0.1)}
#book-page-container ol li {color:#666666;margin-top:30px}*/

.book-page-container img{margin-bottom:15px}

#book-ul
{
	margin-top:35px;
	font-size:18px;
	text-shadow:0 0 1px rgba(0,0,0,0.1)
}
#book-ul li
{
	margin-top:10px
}

#book-page-title{font-size:44px;margin-bottom:0}

#book-title-container h1
{
    font-size:50px
}
#book-title-container h2
{
    color:#666633;
    font-size:22px;
    margin-top:8px;
    margin-right:8px
}
#book-title-container div
{
    text-align:right
}

#example-photos-table{border-collapse:collapse;border-spacing:0}
#example-photos-table img{margin:0;display: block;max-width:100%}

#book-quotes-container blockquote
{
    font-size:17px;
    text-align:justify
}
#book-quotes-container img{margin:-8px 5px 0 0}

#special-offer {font-size:22px;text-align:center}
#special-offer div{margin:20px 0}

/*em {color:#555555}
strong {color:#555555}
u {color:#555555}*/
#book-info p{font-size: 18px;}
#book-info ol li {margin-top:10px;font-size: 16px;}
#chords-in-book span{margin-right:20px;font-size: 20px;text-shadow:0 0 1px rgba(0,0,0,0.1)}

.para-top {margin-top: 6px}
.paraJust {font-size:15px;text-align:justify}
.para-quote {font-size:16px;text-align:justify;margin-bottom:50px}

.cover {margin:40px 20px 20px 35px; float:left}
.listContainer {margin-top:26px; font-size:20px}
.secTitle {margin:0; margin-top:40px;font-size:36px}
.comp-table {margin-bottom:15px;width:100%; border: solid 1px #CCCCCC; font-size:15px;text-shadow: 0 0 1px rgba(0,0,0,0.3)}
.comp-table td {width:50%; border: solid 1px #CCCCCC; text-align:center; vertical-align:middle; padding:5px}
.book-purchase {clear:both; font-size:24px; text-align:center; margin:2vw 0}
.fourVoiceTable {margin-top:20px;font-size:16px;text-shadow:0 0 1px rgba(0,0,0,0.1);text-align:center; vertical-align:middle}

.chordSecTitle {font-size:28px}
.freeSample {clear:both; font-size:20px; text-align:center; margin:20px auto 40px auto}
.freeSampleLink {font-size:18px}
.ed-info {width:95%;margin-left:10px;text-align:justify}
.getit
{
	font-size:18px;
	text-align:center;
	margin:50px 0 30px 0
}


@media only screen and (max-width: 1024px) {
    .book-item-cont {background-position-x: 0}
    .item-title {width: 560px;padding: 20px 0 5px 0;}
    .item-sub-title {margin-right: 0;}
}

@media only screen and (max-width: 960px) {
    .item-title {width: 300px;}
    .item-desc {width: 40%;padding-right: 0}
    .item-bullets {font-size: calc(.1em + 1vw);width: 40%;}
}

@media only screen and (max-width: 768px) {
    .book-item-cont {height: 670px !important;background-size: 75% auto !important}
    .item-sub-title {font-size: 24px}
}

@media only screen and (max-width: 640px) {
    .book-item-cont {height: 500px !important;background-size: 75% auto !important}
    .item-title {
        width: 200px;
        font-size: calc(2.5em + 1vw);
        padding: 2px 0 5px 0;
    }
    .item-sub-title {font-size: 20px}
    .item-desc {width: 50%;padding-right: 0}
    #example-photos-table img{width:220px; height:auto}
}

@media only screen and (max-width:481px) {
    .book-item-cont {height: 460px !important;background-size: 75% auto !important}
    #example-photos-table img{width:200px; height:auto}
}