/* **********************************************************************************************************************
 *                                                        
 * The Worlds of Donald J Hunt Website
 * Website Page CSS File Name: WoDJHBixbyTheHob.css
 * Website Page Version: 2.09.01
 * 
 * Description of Page: The Bixby The Hob Page
 *   This module contains the CSS Styling for the "TheBixby The Hob" page for the website "The Worlds of Donald J Hunt". 
 *   All HTML is contained in an HTML module of the same name.  
 *   
 * Naming conventions: All module names are prefaced by WoDJH followed by the name of the website menu page displayed.
 *                     Sub Menus will be named WoDJHxxxyyy, where:
 *                         xxx is the menu page name
 *                         yyy is the sub menu page name
 *                     
 * Deployment: All website HTML and CSS page modules, graphics and external modules (spreadsheets, PDF's, etc.) 
 *             must be deployed into the same folder on the Website host.
 *             
 ************************************************************************************************************************/

/* **********************************************************************************************************************
 *                                                        
 * This section creates the header by:
 *          - Displaying the background image
 *          - Displaying the Sun image at the top of the page
 *          - Inserting the Menu over the bottom portion of the Sun image
 *          - Inserting the "Worlds of Donald J. Hunt" box in the center of the Sun image
 *             
 ************************************************************************************************************************/

/* **********************************************************************************************************************
 *                                                        
 * Set the background image for the entire page.  Start the image at the bottom of the Header image and Menu
 *             
 ************************************************************************************************************************/

body {
    background-image: url("seamonstersm.png");
    background-repeat: repeat;
    background-position: 0em 30em;
}

/* **********************************************************************************************************************
 *                                                        
 * This section positions and displays the Sun image.
 *             
 ************************************************************************************************************************/

/* Position the overall header container to be fixed at the top of the page.  All contents in the 
 * container (sun pic, menu, Don Hunt box) will be positioned relatively inside of the container. 
*/
#header {
    position: relative;
    width: 100%;
    top: -0em;
/* Change top command to:                                      */
/*                        -0em; for Singletons in Peril banner */
/*                        -2em; for Sun Picture                */
}

/* Position the Sun pictuer to always start at top leftmost part of the page
 * This is done to ensure that the picture does not shift to the right on some
 * web browsers.
*/
#sunpic {
/* For Sun Pic Set Width to 105%, For SiP Banner Set Width to 103%    */
/* For Sun Pic Set top   to -1em, For Sun Pic Set top to -1em;        */   
    position: relative;
    width: 103%;
    left: -1em;
    top: -.5em;
    z-index: 0;
}

/* **********************************************************************************************************************
 *                                                        
 * This section styles and positions the Menu.
 *             
 ************************************************************************************************************************/

/* Move menu text to the center of the text area
 * sun picture.   
*/
#menuindent {
    text-indent: 10px;
} 

/* Move menu text to the center of the text area
 * sun picture.   
*/
#menu {
    list-style-type: none;
    text-align: center;
}

/* Move menu on top of the lower portion of the sun picture.
 * sun picture.
 * Set width to 100% for Singeltons Banner, 102% for Sun Pic
 * Set top to -3.0em for Singletons Banner, -5.5em for Sun Pic
*/
#menu {
    position: relative;
    left: -1em;
    width: 100%;
    top: -3.0em; 
    z-index: 1;
}

/* Define menu font type, color, etc.    
*/
#menu a {
    font-family: arial;
    font: menu;
    font-size: medium;
    text-decoration: none;
    color: white;
    display: block;
    background-color: black;
    margin-bottom: 1px;
    margin-right: 2px;
}

/* Define overall menu background and overflow characteristics    
*/
#menu {
   background: black;
   overflow: auto;
}

/* Align menu line items horizontally on the screen and set size of the menu bar.   
*/
#menu li {
    float: left;
    padding: 15px;
}

/* Define how the menu item reacts when the pointer is hovering over it.   
 * sun picture.   
*/
#menu a:hover {
    background-color: black;
    color: teal;
}

/* **********************************************************************************************************************
 *                                                        
 * This section styles and positions the "Worlds of Donald J. Hunt" box.
 *             
 ************************************************************************************************************************/

/* position box on the page */
#headerbox {
    position: absolute;
    top: 32%;
    left: 35%;
    z-index: 1;
}

/* Remove the bullets from the text in the box */
#headerbox li {
   list-style-type: none;
}

/* Set height, width and color of the box.  Align all text to center on horizental axis. */
#headerbox {
   height: 25%;
   width: 30%;
   padding: 0em;
   border: 1em;
   border-color: black;
   background-color: black;
   text-align: center;
   }

/* Define font characteristics for first line of text in box */
#djh {
   position: relative;
   font-family: arial;
   font-size: xx-large;
   line-height: 150%;
   text-decoration: none;
   color: white;
   display: block;
   background-color: black;
   margin-left: -1em;
}

/* Define font characteristics for second line of text in box */
#underlin {
   position: relative;
   font-family: arial;
   font-size: medium;
   line-height: 150%;
   text-decoration: none;
   color: grey;
   display: block;
   background-color: black;
   margin-left: -1.5em;
}

/* Define font characteristics for third line of text in box */
#websitename {
   position: relative;
   font-family: arial;
   font-size: large;
   text-decoration: none;
   line-height: 200%;
   color: white;
   display: block;
   background-color: black;
   margin-left: -2em;
}

/* **********************************************************************************************************************
 *                                                        
 * ALL CONTENT ABOVE THIS COMMENT IS THE SAME FOR ALL WEB PAGES WITH THE STANDARD HEADER (Sun Image, Menu, etc.) 
 *             
 ************************************************************************************************************************/

/* **********************************************************************************************************************
 *                                                        
 * This section styles and positions the content for the website page.
 *             
 ************************************************************************************************************************/

/* Set position of overall layout container, define:
 *     Border around layout
 *     Define position as absolute
 *     width of layout
 *     height of layout
 *     position relative to top of page
 *     position relative to left side of page
*/

/*  Set top to -4em for Singletons Banner, -10em for Sun Pic */
#allcontent {
   position: relative;
   left: 0px;
   top: -4em;
   width: 100%;
   height: 10em;
}

/* Create a left and right column for the Book and wording text  */
#leftColumn {
    padding-top: 10px;
    float: left;
    width: 50%;
}
#rightColumn {
    padding-top: 20px;
    float: left;
    width: 40%;
}
#rightColumn
   img {
      padding-top: 10px;
      padding-left: 1em;
      width: 160px;
      height: 240px;
   }

/* Set position of the header section of the layout. Define the font charicteristics for the text  */
#contenthdr1 {
 /*  border: 1px solid blue; */
   padding-left: 150px;
   padding-right: 1%;
   overflow: auto;
}

#contenthdr1 {
   font-family: sans-serif;
   font-size: xx-large;
   display: block;
   font-weight: bold;
   line-height: normal;
   text-align: left;
   text-decoration: none;
   color: black;
}

/* **********************************************************************************************************
 * 
 * Set position of the content detail section of the layout. Define the font charicteristics for the text
 * Note: The content detail is broken into 3 separate sections due to different formatting requirements.
 * 
 ***********************************************************************************************************/
.contentdet1 {
/*   border: 1px solid yellow;  */
   top: 0%;
   padding-left: 150px;
   padding-right: 1%;
   overflow: auto;
}

.contentdet1 {
   font-family: sans-serif;
   font-size: x-large;
   line-height: 140%;
   text-decoration: none;
   color: darkblue;
   display: block; 
}

#contentdet2 {
   clear: both;
 /*  border: 1px solid yellow; */
   width: 50%;
   top: 0%;
   padding-left: 150px;
   padding-right: 1%;
   overflow: auto;
}

#contentdet2 {
   font-family: sans-serif;
   font-size: larger;
   line-height: 150%;
   text-decoration: none;
   color: black;
   display: block;
}

.contentdet3 {
   position: relative;
 /*  border: 1px solid yellow; */
   width: 50%;
   top: 0%;
   left: 150px;
   padding-left: 1%;
   padding-right: 1%;
   overflow: auto;
}

.contentdet3 {
   font-family: sans-serif;
   font-size: larger;
   line-height: 120%;
   text-align: center;
   text-decoration: none;
   color: black;
   display: block;
}

.contentdet3
   img {
        padding-top: 10px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 200px;
        height: 200px;
   }

.contentdet4 {
   position: relative;
 /*  border: 1px solid yellow; */
   width: 50%;
   top: 0%;
   left: 150px;
   padding-left: 1%;
   padding-right: 1%;
   overflow: auto;
}

.contentdet4 {
   font-family: sans-serif;
   font-size: larger;
   line-height: 120%;
   text-align: center;
   text-decoration: none;
   color: black;
   display: block;
}

.contentdet4
   img {
        padding-top: 10px;
        margin-left: auto;
        margin-right: auto;
        display: block;
        width: 300px;
        height: 300px;
   }
   
/* Set the colors for the links to black. Only underline when hovering and active.  */
.linkstateB {
   color: black;
   text-decoration: none;
}

.linkstateB:visited {
   color: black;
   text-decoration: none;
}

.linkstateB:hover {
   color: black;
   text-decoration: underline;
}

.linkstateB:active {
   color: black;
   text-decoration: underline;  
}

/* Set the colors for the links to dark Blue. Only underline when hovering and active.  */
.linkstateP {
   color: darkblue;
   text-decoration: none;
}

.linkstateP:visited {
   color: darkblue;
   text-decoration: none;
}

.linkstateP:hover {
   color: darkblue;
   text-decoration: underline;
}

.linkstateP:active {
   color: darkblue;
   text-decoration: underline;  
}

/* Set the colors for the links to Red. Only underline when hovering and active.  */
.linkstateR {
   color: darkred;
   text-decoration: none;
}

.linkstateR:visited {
   color: darkred;
   text-decoration: none;
}

.linkstateR:hover {
   color: darkred;
   text-decoration: underline;
}

.linkstateR:active {
   color: darkred;
   text-decoration: underline;  
}
/* Set the colors for the links to Green. Only underline when hovering and active.  */
.linkstateG {
   color: green;
   text-decoration: none;
}

.linkstateG:visited {
   color: green;
   text-decoration: none;
}

.linkstateG:hover {
   color: green;
   text-decoration: underline;
}

.linkstateG:active {
   color: green;
   text-decoration: underline;  
}

/* Leave appropriate spacing at the bottom of the page.  */
#setfooterspace {
   position: relative;
/*   border: 1px solid yellow;  */
   width: 75%;
   top: 0%;
   left: 150px;
   padding-left: 1%;
   padding-right: 1%;
   margin-bottom: 2em;
   overflow: auto;
}