/* CSS Document */
/*
KEEPING THE FOOTER AT THE BOTTOM:

The html and body tags:

The html and body tags must be set to height:100%; this allows us to set a percentage height on our container div later.
I have also removed the margins and padding on the body tag so there are no spaces around the parameter of the page.

The container div:

The container div has a min-height:100%; this will ensure it stays the full height of the screen even if there is hardly
any content. Many older browsers don't support the min-height property, there are ways around it with JavaScript and other methods but that is out of scope for this article. The container div is also set to position:relative; this allows us to absolutely position elements inside it later.

The header div:

There is nothing unusual with the header. Make it whatever colour and size you like.

The body div:

The body is quite normal too. The only important thing is it must have a bottom padding that is equal to (or slightly larger than)
the height of the footer. You can also use a bottom border if you prefer but a margin won't work.

The footer div:

The footer has a set height in pixels (or ems). The div is absolutely positioned bottom:0; this moves it to the bottom of the
container div. When there is little content on the page the container div is exactly the height of the browser viewport
(because of the min-height:100%;) and the footer sits neatly at the bottom of the screen. When there is more than a page
of content the container div becomes larger and extends down below the bottom of the viewport - the footer is still positioned
at the bottom of the container div but this time you need to scroll down to the end of the page to see it. The footer is
also set to width:100%; so it stretches across the whole page.

The IE 6 & 5.5 CSS

Older versions of Internet Explorer don't understand the min-height property but lucky for us the normal height property
behaves exactly the same way in these old Microsoft browsers, that is, it will stretch to 100% height of the viewport but
if the content is longer it will stretch even further. We simply expose this 100% height rule to Internet Explorer only
by using IE conditional comments. View the source on the demo to see how this is done.
*/

html {
	height: 100%;
}
body {
	background-color: #000000;
	background-image: url(/images/background.jpg);
	background-repeat: repeat-x;
	margin: 0px;
	text-align: center;
	height: 100%;
}
p {
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
	font-size: 14px;
}
h1, h2, h3, h4 {
	font-family: Arial, Helvetica, sans-serif;
	color: #ffffff;
}
a {
	color: #fcee7b;
}
td p {
	padding: 0px;
	margin: 5px;
}
.pipe {
	padding: 0px 5px;
}
.divider {
	position: relative;
	float: left;
	width: 10px;
	height: 410px;
	border-left: 1px dashed #ffffff;
}
.poem {
	color: #ffffcc;
}
#container {
	position: relative;
	width: 100%;
	min-height: 100%;
	margin-right: auto;
	margin-left: auto;
}
#header {
	height: 300px;
	width: 782px;
	margin-right: auto;
	margin-left: auto;
}
#menu {
	position: relative;
	width: 782px;
	height: 46px;
}
#logo_section {
	position: relative;
	float: left;
}
#chandran {
	position: relative;
	float: left;
	padding-top: 23px;
	padding-left: 52px;
	z-index: 9000;
}
.content {
	position: relative;
	top: -30px;
	width: 722px;
	min-height: 200px;
	margin-right: auto;
	margin-left: auto;
	background-image: url(/images/content-background.png);
	background-repeat: repeat-x;
	text-align: left;
	padding: 30px 30px 220px 30px;
}
#left {
	position: relative;
	width: 722px;
}
#right {
	position: relative;
	float: right;
	width: 300px;
	padding-left: 20px;
}
#footer {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 220px;
}
#footer_text {
	width: 100%;
	height: 70px;
	background-image: url(/images/footer-background.png);
	background-repeat: repeat-x;
	text-align: center;
	padding-top: 30px;
}

/*********************************************************************/
/* NAVIGATION                                                        */
/*********************************************************************/

#menubar {
	clear:both;
	width:100%;
	height: 30px;
}
#navbar {
	width: 782px;
	height: 30px;
	margin-left: auto;
	margin-right: auto;
}
#nav {
	width: 742px;
    margin:0;
	padding:0;
	padding-left: 40px;
	position:relative;
}
#nav li {
	width: 137px;
	height: 30px;
	display: block;
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
}
#nav li a {
	display:block;
	line-height: 30px;
	margin:0;
	color:#ffffff;
	text-decoration:none; 
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-weight: bold;
}
#nav li a:hover {
	color:#fcee7b;
}
#nav ul {
    position: absolute;
	top: 30px;
    width: 170px;
	margin: 0px;
	list-style:none;
	padding-left: 0px;
	background-color: #dbdbdb;
	line-height: 30px;
    display: none;
	z-index: 9000;
}
#nav ul li a {
	width: 160px;
	line-height: 30px;
	margin:0;
	padding-left: 10px;
	color:#000000;
	text-decoration:none;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	text-align: left;
}
#nav ul li a:hover {
	color:#ffffff;
	background-color: #b4b4b4;
	background-image: none;
}
#nav ul ul {
	top:auto;
}	
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul {
    display:none;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul {
    display:block;
}

/*********************************************************************/