<style type="text/css">
/****************/
/* basic styles */
/****************/

body, p, td, th, input
{
	color: #000;
	font-family: Arial, Verdana, Helvetica, Sans-Serif;
	font-size: 9pt;
}

body
{
	margin: 0px;
}

input
{
	padding: 2px;
}

.bill, .login
{
	font-family: Arial, Verdana, Helvetica, Sans-Serif;
	font-size: 9pt;
}

a:link, a:visited
{
	color: #006;
}

a:hover, a:active
{
	color: #66C;
}

header
{
	margin-top: 5px;
	margin-bottom: 20px;
}

/*********************/
/* login page styles */
/*********************/

.login .fields
{
	background-color: #E9E9E9;
	width: 600px;
	border: 1px solid #006;
	margin-top: 20px;
	padding: 2px;
}

.login .fields .title
{
	background-color: #006;
	color: #FFF;
	font-weight: bold;
	height: 24px;
}

.login .fields .error
{
	color: #F00;
	border-top: 1px solid #006;
	font-weight: bold;
}

.login .fields .label
{
	font-weight: bold;
	text-align: right;
	padding: 10px;
}

.login .fields .control {}

.login .information
{
	width: 600px;
	border: 1px solid #006;
	margin-top: 20px;
	padding: 5px;
}

.login .information h3
{
	font-size: 10pt;
	font-weight: bold;
}

.login .button
{
	width: 600px;
	margin-top: 20px;
	text-align: center;
}

.login .button input[type="submit"]
{
	width: 100px;
	height: 24px;
}

.login .button td
{
	width: 50%;
}

/**********************/
/* !login page styles */
/**********************/

.container
{
	margin-top: 20px;
	margin-left: 20px;
}

.container .sidebar
{
	width: 180px;
}

.container .sidebar .title
{
	background-color: #007;
	color: #FFF;
	font-weight: bold;
	height: 24px;
}

.container .sidebar td
{
	color: #808080;
	font-weight: bold;
	text-decoration: none;
}

.container .sidebar a
{
	font-weight: bold;
	text-decoration: none;
}

.container .sidebar .counter
{
	margin-top: 25px;
}

.container .content .grid
{
	width: 700px;
	border: 1px solid #006;
	margin-left: 40px;
	margin-bottom: 20px;
}

.container .content .grid td, .container .content .grid th
{
	background-color: #E9E9E9;
	padding: 2px;
}

.container .content .grid .title
{
	background-color: #006;
	color: #FFF;
	font-weight: bold;
	height: 24px;
	white-space: nowrap;
	text-align: left;
}

.container .content .grid .subtitle
{
	background-color: #808080;
	color: #FFF;
	font-weight: bold;
	height: 20px;
	white-space: nowrap;
	text-align: left;
}

.container .content .grid .label
{
	font-weight: bold;
	width: 35%;
}

.container .content .grid .error
{
	color: #F00;
	border-top: 1px solid #006;
}

.container .content .button
{
	width: 700px;
	margin-top: 20px;
	text-align: center;
}

.container .content .button input[type="submit"]
{
	width: 100px;
	height: 24px;
}

.container .content .grid .sum
{
	background-color: #AAA;
	color: #FFF;
	font-weight: bold;
	height: 20px;
}

.container .content .buttons
{
	margin-left: 20px;
}

.container .content .buttons td
{
	border: 1px solid #006;
}

/****************/
/* usage styles */
/****************/

.usage .container .content .grid .product
{
	width: 38%;
}

.usage .container .content .grid .date
{
	width: 22%;
}

.usage .container .content .grid .amount
{
	width: 40%;
}
</style>

