html, body {
height: 100%;
}

body {
	font: 100% Verdana, Arial, Helvetica, sans-serif;
	background-image: url(pics/bg.jpg);
	background-repeat: repeat-x;	
	background-color: #5a74a5;
	margin: 0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	color: #FFFFFF;
}

#page {
	width: 46em;
	height: 100%;
	/*background: inherit;*/
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: center; /* this overrides the text-align: center on the body element. */
}

#header {
	height: 170px;
	padding: 10px 0px 0px 0px;
	position: relative;
}

#content {
	/*background: transparant;*/
	padding: 65px 0px 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
	font: 95% Verdana, Arial, Helvetica, sans-serif;
	color: #DCDCDC;
}

li {
	line-height: 150%;
}

img {
	border: none;
}

.bevelmenu{
font: bold 90% arial,sans-serif;
padding: 30px 0px 0px 0px;
margin: 0;
width: 100%;
text-align: center; /*set value to "right" for example to align bevelmenu to the right of page*/
}

.bevelmenu li{
list-style: none;
display: inline;
}

.bevelmenu li a{
padding: 3px 0.5em;
text-decoration: none;
	color: #C1EEFF;
}

.bevelmenu li a:hover{
color: White;
border-style: none;
padding-top: 6px;
padding-bottom: 4px;
}

.bevelmenu li .current {
font: bold 155% arial,sans-serif;
color: white; /*text color of selected and active item*/
padding-top: 6px; /*shift text down 1px for selected and active item*/
padding-bottom: 4px; /*shift text down 1px for selected and active item*/
}

html>body .bevelmenu li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: none;
}

a{
padding: 3px 0.5em;
text-decoration: none;
	color: #C1EEFF;
}

a:hover{
color: White;
border-style: none;
}

.style2 {
	color: #C1EEFF;
	font-size: 300%;
}
h1 {
	font: 130% normal Verdana, Arial, Helvetica, sans-serif;
	color: #C1EEFF;
}