/**
 * CSS to define the homepage header section.
 *
 */

headerSection
{
	margin:            0px;
	border:            0px;
	width:             100%;
	padding:           0px;
	background-color:  DarkViolet;
	background-image:  url("../images/starscape.gif");
	color:             yellow;
}


centerImage
{
	display:    block;
	margin:     auto;
	padding:    10px;
	max-width:  640px;
}

.rounded25
{
	border-radius: 25%;
}

.rounded50
{
	border-radius: 50%;
}

title
{
	display:      block;
	margin:       auto;
	Xwidth:       60%
	padding:      10px;
	font-family:  "Times New Roman", Times, serif;
	font-size:    6em;
	font-style:   normal;
	font-weight:  bold;
	text-align:   center;
}

subtitle
{
	display:      block;
	margin:       auto;
	Xwidth:       60%
	padding:      10px;
	font-family:  "Times New Roman", Times, serif;
	font-size:    3em;
	font-style:   italic;
	font-weight:  bold;
	text-align:   center;
}

/**
 * CSS to define the main menu as it appears at the top of the homepage.
 *
 * NOTE: see footer-menu.css for the CSS that defines the main menu
 *       as it appears in the footer of the page.
 */

.top-menu-container
{
	display:             block;
	width:               100%;
	margin:              auto;
}

.top-menu-container menuTitle
{
	display:             none;
}

.top-menu-container  ul
{
	display:             block;
	background-color:    var(--mainMenuBGColor);
	color:               var(--mainMenuFGColor);
	list-style-type:     none;
	height:              2em;
	margin:              0px;
	
	font-size:           1.0em;
	font-weight:         bold;
	text-align:          center;

}

.top-menu-container  li
{
	float:               left;
	background-color:    var(--mainMenuBGColor);
	color:               var(--mainMenuFGColor);

	border-right:        1px solid var(--mainMenuSeparatorColor);

    height:              2em;
}

.top-menu-container li:hover
{
	background-color:    var(--mainMenuHoverBGColor);
	color:               var(--mainMenuHoverFGColor);
}

.top-menu-container  li a
{
	position:            relative;
	top:                 0.5em;

	color:               var(--mainMenuFGColor);
	
	padding:             1em;
	text-decoration:     none;
	vertical-align:      middle;

    width:               12em;
	height:              2em;

}

.top-menu-container li:hover a
{
	color:               var(--mainMenuHoverFGColor);
}