/*
   Posted
*/

h1
{
	
	font-size: 14pt;
	font-family: Humanist 777 BT, Arial, Verdana, Tahoma;
	font-style: bold;
	color: #000000;
	background-color: #C0C0C0;
	text-align: left;
}

/*
   From
*/

h2
{
	
	font-size: 14pt;
	font-family: Humanist 777 BT, Arial, Verdana, Tahoma;
	font-weight: bold;
	color: #000000;
	background-color: #C0C0C0;
	text-align: right;
}


/*
	Text
*/

h3
{
	
	font-size: 14pt;
	font-family: Humanist 777 BT, Arial, Verdana, Tahoma;
	color: black;
	text-align: justify;
}

/*
	Menu heading
*/
	
h4
{
	
	font-size: 18pt;
	font-family: Pristina, Lucida Calligraphy, Times Roman, Times;
	color: #0000FF;
	text-align: left;
}

/*
	Menu description
*/
	
h5
{
	
	font-size: 14pt;
	font-family: President, Bradley Hand ITC, Times Roman, Times;
	color: #0000FF;
	margin-left: 50px;
	text-align: justify;
}
/*
	Light Bites Centered
*/

h6
{
	
	font-size: 14pt;
	font-family: President, Bradley Hand ITC, Times Roman, Times;
	text-align: center;
}

/*
	Code for menues

The first part of the CSS should be pretty straight forward. Initially we’re just redefining the styles
for the unordered list, the list items and the body whilst using the global reset method to remove
padding and margin’s from all elements on the page.
*/

* {
padding: 0;
margin: 0;
}
body {
font-size: 73%;
font-family: verdana, arial, helvetica, sans-serif;
padding: 10px;
}
#navigation {
list-style: none;
overflow: auto;
}
#navigation li {
float: left;
background-color: #666; /* to cater for users without images */
}

/*
Next comes the step of applying the background images. Firstly we’ll apply the tabright.gif image to the
link and position it to the right to show the curved corner. We also need to use display: block; to ensure
that the link fills the list item otherwise this style will only affect the actual text.

The next step is to apply the tableft.gif image to the span so that it sits to the left of the tab.
*/

#navigation a {
display: block;
background-image: url('images/tabright-1.gif');
background-position:  right top;
background-repeat: no-repeat;
color: #FFF;
text-decoration: none;
font-weight: bold
}
#navigation span {
display: block;
background-image: url('images/tableft-1.gif');
background-repeat: no-repeat;
padding: 5px 15px;
}

/*
With the tabs now in place we can manipulate the background image so that it shifts upwards when the
user hovers over the tab.

The hover state image resides at 198px down the image so we just need to shift the position of both
images up to achieve this simple effect.
*/

#navigation a:hover {
background-position: right -198px;
}
#navigation a:hover span {
background-position: 0 -198px;
}

/*
Completely hide the submenu by positioning it 999em off to the left of the screen using absolute
positioning. We’ll also style the list a little itself by providing a width, fontsize and a margin
so that it’s styled as we want when it becomes visible again.
*/

#navigation li ul {
position: absolute;
width: 10em;
left: -999em;
margin-left: 2px;
font-size: 90%;
}

/*
Next, we need a little bit of code to style the link correctly and give the submenu items a hover state.
*/

#navigation li ul a, #navigation li ul a:link {
background-image: none;
padding: 5px;
width: 12em;
background-color: #00C400;
}
#navigation li ul a:hover {
background-color: #00FF00;
color: #000000;
}

/*
Finally, we snap the submenu back into place by apply left: auto; to the menu once the parent is hovered
over. This resets the submenu to it’s default positioning instead of the -999em we used previously.
*/

#navigation li:hover ul, #navigation li.sfhover ul {
left: auto;
}