
body {
   background-color: #F2F7FF;
   background-image: url(../images/lavender.gif);
   font-family:"Times New Roman","serif";
   font-size: 12.0pt;

   max-width: 1200px;
   margin: auto;
   padding: 0 10px 10px 10px;
}

/* Phone display */
@media (max-width: 600px ) {
   body {
      font-size: 16.0pt;
   }
}

/**********************************************/
/*            Horizonal Lines                 */
/* <div class=dividor><span></span><hr></div> */
/**********************************************/

div.dividor {
   height: 80px;
}

div.dividor span {
   display: inline-block;
   height: 34%;
   vertical-align: middle;
}

div.dividor hr {
   width: 100%;
   height: 6px;
   border-radius: 5px;
   background-image: url(../images/dividor.gif);
}

/*******************************************************/
/*                Horizonal Lines                      */
/* This version causes the main menu hover to not work */
/* when the horiz-line is under the hover point.       */
/*         <div class=dividor2><hr></div>              */
/*******************************************************/

div.dividor2 {
   position: relative;
   width: 100%;
   height: 80px;
}

div.dividor2 hr {
   display: block;
   position: absolute;
   top: 50%;
   height: 6px;
   margin-top: -3px;
   width: 100%;
   border-radius: 3px;
   z-index: -1;
   background-image: url(../images/dividor.gif);
}


/****************************************************************************/
/*                           Boxs With Borders                              */
/* Primary sections, flyer sections, purchase sections, and footer sections */
/****************************************************************************/

.margin_top {
   margin-top: 60px;
}

.boxWithBorders  {
   border-color:#800000;
   border-style:solid;
   border-width:3px;
   background-color:#F2F7FF;
}

.review div p {
   padding: 20px;
}

.boxWithBorders h3 {
   color: #800000;
   font-size: 22px;
}

.boxWithBorders h4 {
   color: #800000;
   font-size: 18px;
}

div.primary, section.primary {
   font-size: 24px;
   min-width: 388px;
}

@media (min-width: 601px ) {

   div.primary, section.primary {
      display: table;
   }
}

section.primary h3 {
   text-align: center;
}


/* Computer display */
@media (min-width: 993px ) {

   div.primary_left {
      display: table-cell;
      vertical-align: middle;
   }

   div.primary_right {
      display: table-cell;
      vertical-align: middle;
      padding: 30px;
   }
}

/* Smaller display */
@media (max-width: 992px ) {

   div.primary_left {
      display: table-row;
   }

   /* Horiz. Center image */
   div.primary_left div {
      width: 388px;
      margin: auto;
   }
   
   div.primary_right {
      padding-left: 30px;
      padding-right: 30px;
   }
}

nav.contents {
   padding: 20px;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
   min-width: 348px;
}

@media (min-width: 601px ) {

   nav.contents {
      columns: auto 2;
   }
}

nav.contents_single {
   padding: 10px 30px 30px 30px;
   width: 320px;
   margin-left: auto;
   margin-right: auto;
}

nav.contents_single ul li {
   margin-top: 10px;
   margin-bottom: 10px;
   color: green;
}

nav.contents ul li {
   margin-top: 10px;
}

nav.contents ul li.navCurrent a {
   color: red;
}

nav.contents_single ul li.navCurrent a {
   color: red;
}

/* Computer display */
@media (min-width: 870px ) {

   div.contents {
      width: 780px;
   }

   div.contents_left {
      display: table-cell;
      width: 50%;
      vertical-align: top;
   }

   div.contents_right {
      padding-left: 30px;
      display: table-cell;
      width: 50%;
      vertical-align: top;
   }
}

/* Same as primary but image made smaller on phone */
div.threebooks {
   padding: 0px;
   display: table;
}

/* Computer display */
@media (min-width: 993px ) {

   div.threebooks_left {
      display: table-cell;
      vertical-align: middle;
   }
   
   div.threebooks_left div {
       width:650px; 
       height: 600px;
   }
   
   div.threebooks_left div img {
       width:650px; 
       height: 600px;
   }
   
   div.threebooks_right {
      display: table-cell;
      vertical-align: middle;
      padding-left: 20px;
      padding-right: 20px;
   }
}

/* Smaller display */
@media (max-width: 992px ) {

   div.threebooks_left {
      display: table-row;
   }

   /* Horiz. Center image */
   div.threebooks_left div {
      width: 388px;
      margin-left: auto;
      margin-right: auto;
   }
   
   /* Image size is reduced for phone */
   div.threebooks_left div img {
      width: 388px;
      height: 358px;
   }
   
   div.threebooks_right {
      padding-left: 10px;
      padding-right: 10px;
   }
}

div.onebook {
   padding: 0px;
}

@media (min-width: 601px ) {

   div.onebook {
      display: table;
   }
}

@media (max-width: 600px ) {

   div.onebook {
      min-width: 388px;
      overflow: hidden;
   }
}

/* Computer display */
@media (min-width: 993px ) {

   div.onebook_left {
      display: table-cell;
      vertical-align: middle;
      width: 482px;
      height: 600px
   }

   div.onebook_right {
      display: table-cell;
      vertical-align: middle;
      padding: 0 30px 0 30px;
   }
}

/* Smaller display */
@media (max-width: 992px ) {

   div.onebook_left {
      display: table-row;
   }

   /* Horiz. Center image */
   div.onebook_left div {
      width: 388px;
      margin-left: auto;
      margin-right: auto;
   }
   
   div.onebook_left div img {
      width: 388px;
      height: 482px;
   }
   
   div.onebook_right {
      padding-left: 30px;
      padding-right: 30px;
   }
}

div.wrap_image {
   padding: 30px;
}

/* Computer display - Text wraps */
@media (min-width: 701px ) {

   div.wrap_image img {
      float: left;
   }
}

/* Smaller display - Text under image */
@media (max-width: 700px ) {

   /* Horiz. Center image */
   div.wrap_image div {
      width: 280px;
      margin-left: auto;
      margin-right: auto;
   }
}

.verse_box {
   padding: 30px;
   max-width: 400px;
   margin: auto;
   min-width: 328px;
}

.verse_box h3 {
   text-align: center;
}

div.flyer, section.flyer {
   padding: 30px;
   display: table;
   min-width: 328px;
}

div.chart, section.chart {
   min-width: 730px;
   max-width: 840px;
   padding-top: 20px;
   padding-bottom: 20px;
   text-align: center;
   margin: auto;
   margin-top: 60px;
}

/* This no longer works.  You can't have table-cell without a table. */
/* Wait on the use of CSS columns. */
div.fixed_flyer {
   padding: 30px;
   display: inline-block;
   height: 821px;
   overflow: hidden;
}

/* Computer display - two columns */
@media (min-width: 601px ) {
	
   div.flyer_left {
      display: table-cell;
      width: 50%;
      vertical-align: top;
   }

   div.flyer_right {
      padding-left: 30px;
      display: table-cell;
      width: 50%;
      vertical-align: top;
   }
}

div.purchase {
   display: table;
}

div.purchase_left {
   display: table-cell;
   width: 16%;
   height: 200px;
   vertical-align: middle;
   text-align: center;
   background-color:#800000;
   border-right: solid 3px #800000;
   padding: 10px;
}

div.purchase_cols {
   display: table-cell;
   vertical-align: middle;
   width: 28%;
   padding: 30px;
}

/* Computer display */
@media (min-width: 993px ) {
   div.purchase_cols_required {
      display: table-cell;
      vertical-align: middle;
      width: 28%;
      padding: 30px;
   }
}

/* Smaller display */
@media (max-width: 992px ) {
   div.purchase_cols_required {
      display: table-cell;
      font-size: 12.0pt;
      vertical-align: middle;
      width: 42%;
      padding: 30px;
   }
}

/* Computer display */
@media (min-width: 993px ) {
   div.purchase_cols_optional {
      display: table-cell;
      vertical-align: middle;
      width: 28%;
      padding: 30px;
   }
}

/* Smaller display */
@media (max-width: 992px ) {

   div.purchase_cols_optional {
      display: none;
   }
}

footer {
   width: 100%;
   margin-bottom: 60px;
}

footer p img {
   width: 28px;
   height: 28px;
}

footer p {
   text-align: center;
   color: #FF0000;
   font-size: x-large;
}

footer nav p {
   text-align: left;
}

.size3 {
   color: #800000;
   font-size: 16px;
}

.size4 {
   color: #800000;
   font-size: 18px;
}

.size5 {
   color: #800000;
   font-size: 24px;
   font-weight: bold;
}

.size3text {
   font-size: 16px;
}

.size4text {
   font-size: 18px;
}

.size5text {
   font-size: 24px;
}

.redbrown {
   color: #800000;
}

.centerTitle {
   text-align: center;
}

div.getBook {
   text-align: center;
   color: #800000;
   font-size: 22px;
   padding: 12px;
   margin: 0;
}

div.appendices {
   text-align: center;
   color: #800000;
   font-size: 18px;
   padding: 12px;
   margin: 0;
}


/*****************************************/
/* The menu system.                      */
/*****************************************/

ul.nav {
   position: fixed;
   height: 64px;
   width: 1200px;
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #800000;
}

ul.nav li.nav_item, li.dropdown {
   float: left;
}

/* Menu optional items - Smaller display */
@media (max-width: 992px ) {
   ul.nav {
      width: 486px;
   }
   ul.nav li.nav_optional {
      display: none;
   }
}

li.nav_item a, a.dropbtn {
   display: inline-block;
   color: white;
   text-align: center;
   padding: 16px 8px;
   text-decoration: none;
}

li.nav_item a:hover, li.dropdown:hover, a.dropbtn:hover {
   background-color: red;
}

li.dropdown {
   display: inline-block;
}

li.dropdown div.dropdown-content {
   display: none;
   position: fixed;
   background-color: #f9f9f9;
   min-width: 160px;
   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
   z-index: 1;
}

li.dropdown div.dropdown-content a {
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
}

li.dropdown div.dropdown-content a:hover {
   background-color: #f1f1f1;
   text-shadow: 1px 1px red;
}

li.dropdown:hover div.dropdown-content {
   display: block;
}

div.navBottom {
   height: 100px;
}


/*****************************************/
/* Styles for specific IDs               */
/*****************************************/

div#perfectionAndReview {
   overflow: hidden;
}

div#perfectionAndReview div {
   width: 410px;
   float: left;
   margin-right: 40px;
}

@media (max-width: 600px ) {
	
   div#perfectionAndReview div {
      width: 386px;
      font-size: 12.0pt;
   }
}

div#perfectionAndReview div.perfection {
   padding-bottom: 10px;
}

div#perfectionAndReview div.perfection h3 {
   color: #800000;
   font-size: 16px;
   text-align: center;
}

div#perfectionAndReview div.perfection h3 b {
   font-size: 20px;
}

div#perfectionAndReview div.perfection div.chapters {
   line-height: 2.0em;
   margin: 0 9 20px 20px;
   padding: 0 0 0 20px;
}

div#perfectionAndReview div.perfection div.getBook {
   text-align: center;
   color: #800000;
   font-size: 22px;
   padding: 0;
   margin: 0;
}

div#authorPicture {
   padding: 20px;
   margin: 10px 20px 0 0;
}

div#authorPicture img {
   margin: auto;
   padding:20px;
   text-align: center;
}

div#VerseSources {
   margin-top: 30px;
   margin-left: auto;
   margin-right: auto;
   width: 60%;
   background: #D9D9D9;
   border: solid black 2px;
   padding: 0in 5.4pt 0in 5.4pt;
   font-size: 10.0pt;
}

div#VerseSources p {
   margin-top: 3.75pt;
   margin-right: 7.5pt;
   margin-bottom: 3.75pt;
   margin-left: 7.5pt
}

#VerseSourcesLeft {
   margin-top: 10px;
   margin-left: 20px;
   background: #D9D9D9;
   border: solid black 2px;
   padding: 0in 5.4pt 0in 5.4pt;
   font-size: 10.0pt;
   margin-right: 20px;
}
@media (min-width: 601px ) {
   #VerseSourcesLeft {
      float: left;
      width: 60%;
   }
}

#VerseSourcesLeft p {
   margin-top: 0;
   margin-right: 7.5pt;
   margin-bottom: 3.75pt;
   margin-left: 7.5pt
}
