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

body
{
   /* position: relative; */
   width: 990px;
   margin-left: auto;
   margin-right: auto;
   color: black;
   background-color: #ccffff; /* Overlaid by background-image */
   background-image: url(Background4.jpg);
   text-align: left;
   font-size: 12px;
   border: 0px solid blue;
}

.buttonColor
{
   background-color: #c2c2d6;
}

.mouseoverButtonColor
{
   background-color: #ddebf1;
}


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: 5px;
   padding-right: 5px;
}

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

h1
{
   text-align: center;
   color: blue;
   font-size: 18px;
   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;
   padding-left: 16px;
   padding-right: 16px;
}

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

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

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

/* CSS code for mouse over displaying a "caption" for an href link */
a.caption:hover
{
    position: relative;
}
a.caption span
{
    display: none;
}
a.caption:hover span
{
     border: 1px solid blue;
     display: block;
     position: absolute;
     margin-top: 30px;
     margin-left:50px;
     padding: 5px;
     color: red;
     background-color: #ddebf1; 
}

a:focus {outline: 0px;}

a:link
{
   text-decoration: none;
}

a:visited
{
   text-decoration: none;
}

a:active
{
   text-decoration: none;
}

.quote
{
   padding-left: 48px;
}

.quoteitalics
{
   font-style: italic;
   padding-left: 48px;
}

.centered
{
   margin-left: auto;
   margin-right: auto;
}
.textcentered
{
   text-align: center;
}

.textitalics
{
   font-style: italic;
}

.textbold
{
   font-weight: bold;
}

img
{
   border: 0px;
}

.imagecentered
{
   display: block;
   margin-left: auto;
   margin-right: auto;
   margin-top: 0px;
   margin-bottom: 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: 14px;
   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 /* The pound sign is used with tag "id" */
{
   overflow: hidden;
   width: 970px;
   height: 120px;
   margin-left: auto;
   margin-right: auto;
   padding-bottom: 15px;
   /* border-bottom: 1px solid blue;   use <hr> instead */
   /*background-image: url(lightfauxfur.jpg);*/
}

#Logo
{
   width: 450px;
   height: 66px;
   margin-top: 8px;
   border: 0px solid red;
}

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

.KingOfGloryCaption
{
   text-align: center;
   font-size: 12px;
   margin-top: 5px;
   color: blue;
   font-style: italic;
   font-weight: bold;
   font-family: serif /* "Comic Sans", "Comic Sans MS", cursive; */
}

/******************** 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: #c2c2d6;  /* was: #bed4dc; */
   /* background-image: url(c1.png); */
}

#MenuContainer a.bgcolorHover
{
   background-color: #ddebf1;  /* was: #98becc; */
   /* 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: #ddebf1;  /* Background color for horizontal menu was #bed4dc; */
   margin: 0px;
   padding: 0px;
}

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

a.white
{
   /* Original text color before mouseover on both horizontal and pull-down menu */
   color: #0000cc;
   font-weight: bold;
   font-size: 14px;
}

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

/******************** Margin and Justification Rules for Articles********************/

#MarginJustify /* The pound sign is used with tag "id" */
p
{
   margin-left:  90px;
   margin-right: 90px;
   text-align:   justify;
}

.HeaderIndent

{
   text-align:   left;
   padding-left:  105px;
}


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

#QuizContainer  /* Placing this id in front of rules limits them to elements in container 
                   with the id
                */

#QuizContainer table.centered
{
   display: table;
   width: 900px;
   margin-left: auto;
   margin-right: auto;
   border-collapse: collapse;
   border: 0px solid blue;
}

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

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

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

#QuizContainer td.column4
{
   width: 70px;
   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-bottom: 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 red;
}

.FourColumns
{
   width: 240px;
   float: left;
   border: 0px solid red;
}

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

/* Code for Clickable div */

div.clickable
{
   position: relative;
}

div.clickable a
{
   position: absolute;
   width:  100%;
   height: 100%;
   top:    0;
   left:   0;
   text-decoration: none; /* No underlines on the link */
   z-index: 10; /* Places the link above everything else in the div */
   background-color: #FFF; /* Fix to make div clickable in IE */
   opacity: 0; /* Fix to make div clickable in IE */
   /* filter: alpha(opacity=1);  Fix to make div clickable in IE */
}


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

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

.textfooter
{
   font-size: 13px;
   color: black;
   padding-left: 50px;
   padding-right: 50px;
}