/******************** General Rules ********************/

body
{
  /* position: relative; */
   
   min-width: 990px;
   margin-left: auto;
   margin-right: auto;
   color: black;
   background-color: #ccffff;
   text-align: left;
   font-size: 12px;
   border: 0px solid blue;
}

table
{
   display: table;
   width: 950px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 15px;
   margin-bottom: 15px;
   border-collapse: collapse;
   border: 0px solid blue;
}

tr
{
   display: table-row;
}

td
{
   display: table-cell;
   border-left: 2px solid blue;
   border-right: 2px solid blue;
   border-top: 2px solid blue;
   border-bottom: 2px solid blue;
   padding-left: 10px;
   padding-right: 10px;
}

hr
{
   width: 600px;
   height: 5px;
   margin-top: 30px;
   margin-bottom: 30px;
   color: #0000FF;
   background-color: #0000FF;
}

h1
{
   text-align: center;
   font-size: 16px;
   color: blue;
   font-family: "Comic Sans", "Comic Sans MS", cursive;
}

h2
{
   text-align: center;
   margin-top: 12px;
   margin-bottom: 12px;
   color: black;
   font-size: 16px;
   font-weight: bold;
   font-family: "Comic Sans", "Comic Sans MS", cursive;
} 

.leftheading
{
   text-align: left;
   margin-top: 12px;
   margin-bottom: 12px;
   padding-left: 16px;
   padding-right: 16px;
   color: black;
   font-size: 16px;
   font-weight: bold;
   font-family: "Comic Sans", "Comic Sans MS", cursive;
}

p
{
   font-size: 12px;
   color: black;
   padding-left: 16px;
   padding-right: 16px;
}

a
{
   font-size: 12px;
   font-weight: normal;
   color: #0000FF;
}

a:focus {outline: 0px;}

a:link
{
   text-decoration: none;
}

a:visited
{
   text-decoration: none;
}

a:active
{
   text-decoration: none;
}

.quote
{
   font-size: 12px;
   color: black;
   padding-left: 48px;
   padding-right: 16px;
}

.quoteitalics
{
   font-size: 12px;
   font-style: italic;
   color: black;
   padding-left: 48px;
   padding-right: 16px;
}

.textcentered
{
   text-align: center;
   font-size: 12px;
   color: black;
   padding-left: 16px;
   padding-right: 16px;
}

.textitalics
{
   font-size: 12px;
   font-style: italic;
   color: black;
   padding-left: 16px;
   padding-right: 16px;
}

.textbold
{
     font-weight: bold;
}

img
{
   border: 0px;
}

.imagecentered
{
   display: block;
   margin-left: auto;
   margin-right: auto;
   margin-top: 0px;
   border: 0px;
}

.ImageVisible
{
   visibility: visible;
}

.ImageNotVisible
{
   visibility: hidden;
}

.elementfloatedleft
{
   float: left;
   margin-left: 20px;
   margin-right: 20px;
   margin-top: 0px;
   margin-bottom: 10px;
   border: 0px solid red;
}

.elementfloatedright
{
   float: right;
   margin-left: 20px;
   margin-right: 20px;
   margin-top: 0px;
   margin-bottom: 10px;
   border: 0px solid green;
}

ul,ol
{
   font-size: 12px;
   margin-top: 10px;
   margin-bottom: 10px;
}

li
{
   margin-top: 2px;
   margin-bottom: 2px;
}

ol.lettered
{
   list-style-type: lower-alpha;
}

.red
{
   
   color: red;
}

.black
{
   
   color: black;
}

/******************** Header Rules ********************/

#Header
{
   overflow: hidden;
   width: 964px;
   height: 120px;
   margin-left: auto;
   margin-right: auto;
   border: 0px solid blue;
   background-image: url(Roses.gif);
}

#Logo
{
   width: 450px;
   height: 90px;
   margin-left: 50px;
   margin-top: 16px;
   border: 0px solid red;
}

#KingOfGloryImage
{
   width: 267px;
   height: 60px;
   margin-top: 2px;
   border: 0px solid red;
}

.KingOfGloryCaption
{
   text-align: center;
   font-size: 12px;
   margin-top: 0px;
   color: blue;
   font-family: "Comic Sans", "Comic Sans MS", cursive;
}

#LogoCross /* No longer used */
{
   margin-left: 100px;
   width: 119px;
   height: 90px;
}

#LogoBible /* No longer used */
{
   width: 100px;
   height: 75px;
   margin-top: 10px;
}

/******************** Main Menu Rules ********************/

#MenuContainer  /* Placing this id in front of rules limits them to element in this container */
{
   width: 204px; /* Allows for a 2px border around a 200px menu */
   float: left;
   border: 0px solid blue;
}

#MenuContainer div.heading
{
   width: 200px;
   height: 40px;
   background-image: url(GradientMenuItem-1.png);
}

#MenuContainer li    /* A class for ALL munu li */
{
   list-style-type: none;
   /* border: 0px solid black; */
   border-left: 1px solid #0000cc;
   border-right: 1px solid #0000cc;
   border-top: 1px solid #0000cc;
   position: relative;
   margin-top: -2px;
   margin-right: -1px;
   /* A positioned element constitutes a new containing block for all its descendants. Thus, the
      absolute positioned element (2nd level ul below) is positioned with respect to the li block
      it is nested in. This allows the nested ul to open next to the parent li it is nested in.
   */
}

#MenuContainer li li  /* A class for 2nd level menu li */
{
    /* This keeps the in between borders from doubling */
    border-left: 0px solid #0000cc;
    margin-right: 0px;
}
 
#MenuContainer li li li /* A class for 3nd level menu li */
{
    /* This keeps the in between borders from doubling */
    border-left: 0px solid #0000cc;
}

#MenuContainer ul   /* A class for 1st level menu ul */
{
   width: 200px;
   padding-left: 0px;     /* This padding and margin sets ul indent to 0 */
   margin-left: 0px;
   border: 0px solid #0000cc;
}

#MenuContainer ul ul   /* A class for 2nd level menu ul */
{
   visibility: hidden;
   position: absolute;
   top: -8px;
   left: 200px;              /* Opens 2nd level menu to the right of 1st level menu */
   padding-left: 0px;
   margin-left: 0px;
   border: 0px solid #0000cc;
   
}

#MenuContainer a.basic
{
   display: block;
   padding-top: 5px;
   padding-bottom: 5px;
   padding-left: 5px; 
   text-align: left;
   font-size: 12px;
   font-weight: bold;
   font-family: cursive;
   text-decoration: none;
   border-top: 0px solid purple;   /* Color of menu item borders */
}

#MenuContainer a.textcolor
{
     color: black;               /* Color of text in menus */
}

#MenuContainer a.bgcolor
{
   background-color: #e6ccff;
   /* background-image: url(c1.png); */
}

#MenuContainer a.bgcolorHover
{
   background-color: #ce99ff;
   /* background-image: url(c2.png); c1a.png is the reverse of c1.png */
}

/******************** Regular Page Menu Rules ********************/

#Menu
{
   margin-top: 12px;
   margin-bottom: 20px;
   border: 0px solid red;
}

table.menu
{
   width: 800px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 0px;
   margin-bottom: 0px;
   border-spacing: 0px;
}

tr.menu
{
   background-color: #f4d1ff;  /* Background color for horizontal menu */
   margin: 0px;
   padding: 0px;
}

td.menu
{
   border: 2px solid #0000cc;    /* Border color for horizontal menu */
   padding: 2px;
   font-weight: bold;
   text-align: center;
   color: white;
   cursor: pointer;
}

a.white /* Original color, here #0000cc */
{
   color: #0000cc;               /* Text color for horizontal menu */
   font-weight: bold;
   font-size: 14px;
}

a.black /* mouseover color, here #cc0066 */
{
   color: #cc0066;               /* Text color for mouseover on horizontal menu */
   font-weight: bold;
   font-size: 14px;
}

/******************** Quiz Table Rules for Matching Questions ********************/

#QuizContainer  /* Placing this id in front of rules limits them to element in this container */

#QuizContainer table.centered
{
   width: 90%;
   margin-left: 5%;
   margin-right: 5%;
   border-collapse: collapse;
   border: 2px solid blue;
}

#QuizContainer  td.column1
{
   width: 31%;
   background-color: #D8BFD8;
   border: 2px solid blue; 
   padding: 5px;
}

#QuizContainer td.column2
{
   width: 31%;
   background-color: #D8BFD8;
   border: 2px solid blue; 
   padding: 5px;
}

#QuizContainer td.column3
{
   width: 31%;
   background-color: #D8BFD8;
   border: 2px solid blue;
   padding: 5px;
}

#QuizContainer td.column4
{
   width: 7%;
   background-color: #D8BFD8;
   border: 2px solid blue; 
   padding: 5px;
   border-left: hidden;
}

.greenbg
{
   width: 31%;
   background-color: #c1ffc1;
   border: 2px solid blue;
   padding: 5px;
}

.whitebg
{
   width: 31%;
   background-color: #D8BFD8;
   border: 2px solid blue;
   padding: 5px;
}

#QuizContainer a.highlight
{
   font-size: 12px;
   color: red
}

#QuizContainer a.black
{
   /* Within "Container" div, next two rules take precedence over same two values in
      "a.black" from regular menu rules above */

   font-size: 12px; 
   color: black;

   /* By the same logic, without the following rule, the "bold" rule in "a.black" from
      regular menu rules is applied */

   font-weight: normal; 
}

#QuizContainer p.black
{
   margin: 0px;
   padding-left: 5px;
}

/******************** Container Rules ********************/

.Container
{
   overflow: hidden;
   width: 970px;
   margin-left: auto;
   margin-right: auto;
   border: 0px solid red;
}

.HomePageLeftColumn
{
   width: 204px; /* Allows for a 2px border around a 200px menu */
   float: left;
   border: 0px solid purple;
}

/* For Container on Home Page Right of Vertical Menu */

.HomePageRightColumn
{
   width: 758px;
   /* width: 379px; */
   float: left;
   border: 0px solid blue;
}

.HomePageTwoColumns
{
   width: 377px;
   float: left;
   border: 0px solid red;
}


/* For Splitting Whole Container in Halves and Thirds */

.TwoColumns
{
   width: 480px;
   float: left;
   border: 0px solid green;
}

.ThreeColumns
{
   width: 320px;
   float: left;
   border: 0px solid blue;
}

.Box
{
   border: 2px solid black;
   margin: 0px;
   padding: 10px;
   background-color: #add8e6;
}

/******************** Footer Rules ********************/

#Footer
{
   overflow: hidden;
   width: 990px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 30px;
   border: 0px solid black;
}

.textfooter
{
   font-size: 11px;
   color: black;
   padding-left: 16px;
   padding-right: 16px;
}

#warning
{
   width: 400px;
   height: 70px;
   border: 0px solid black;
}