/*  Use ONLY the "slash star ... star slash" style comment inside a style sheet */

/* Don't want tiny white border inside browser window - apply to html and body. */
html, body {  
    margin:0; 
    padding:0; 
}

body { 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; /* no tail font is more readable for small font */
    font-size:16px;
}

#titleNav { /* titleNav is fixed, always at the top */

    /* position fixed removes the element from the normal flow, placing it where you specify with top/bottom, left/right */
    position:fixed; 
    top:0px;
    left:0px;
    z-index: 1;     /* To make sure titleNav is on top of content, give it a higher z-index than content 
                    (content would have default value of zero). */
    width: 100%;    

    padding-bottom: 10px; 

    font-weight: bold;
    box-shadow: 0px 0px 5px black;  /* give a little "3D"  effect to the bottom of the title area */

    min-width: 650px; /* stop nav bar from unwanted overlap with title */
}


#pageTitle { /* no change */
    padding:12px;
    padding-bottom: 0px; 
    font-size:46px;
    font-style: italic;
    font-family: serif;
    letter-spacing: 2.5px; /* spaces out letters a bit */
    float: left; 
}

#nav { /* fix the nav bar */
    float:right;
    font-size:24px;
    padding-top:30px;
}


#nav a {  /* no change */
    text-decoration:none;  /* Do not want links in "nav" to be underlined */
}

#content {  /* Added padding top and bottom to prevent top/bottom content from getting hidden under titleNav/footer */ 
    padding:1%;
    padding-top: 80px; /* prevent the top of the content from getting hidden under the fixed titleNav */
    padding-bottom: 40px; /* prevent the the bottom of the content from getting hidden under the fixed footer */
}

#footer { /* footer fixed, always at the bottom */

    position: fixed;
    bottom: 0px; 
    left: 0px; 
    z-index: 1; /* make sure footer is on top of content which would have default z-index value of 0 */

    width:100%;
    text-align:center;
    padding:8px;	

    box-shadow: 0px 0px 5px black;  /* give a little "3D"  effect to the top of the footer area */
}

.dropdown {
    position: relative;
    display: inline-block;
    margin-right: 1ex;
    cursor: pointer;
}

.dropContent {
    background-color:black;

    right:0px;
    position: absolute;
    font-size: 14px;
    z-index: 3;

    padding: 8px;
    line-height: 1.7em;
    border-radius: 8px;
    letter-spacing: 1px;
    right: -500px;
    visibility: hidden;

    /* animate the change of the right property when clicked (zooms in from right)*/
    transition: right 0.5s ease 0s;
}

/* don't delete this even though empty - js needs it. */
.dropHeader {

}