/*Credits: CSSpplay */
/*URL: http://www.cssplay.co.uk/menus/pro_five */

.menu5 {width:100%;padding:5px 0 0 0em; margin:0; list-style:none; height:40px; position:relative; background:transparent url(../images/pro_five_0c.gif) repeat-x left bottom; font-size:100%;}
.menu5 li {float:left; height:40px; margin-right:1px;}
.menu5 li a {display:block; float:left; height:40px; line-height:35px; color:#333; text-decoration:none; font-family:arial, tahoma, arial, verdana, sans-serif; text-align:center; padding:0 0 0 4px; cursor:pointer; background:url(../images/pro_five_0a.gif) no-repeat;}
.menu5 li a b {float:left; display:block; padding:0 16px 5px 12px; background:url(../images/pro_five_0b.gif) no-repeat right top;}
.menu5 li.current a {color:#000; background:url(../images/pro_five_2a.gif) no-repeat;}
.menu5 li.current a b {background:url(../images/pro_five_2b.gif) no-repeat right top;}
.menu5 li a:hover {color:#000; background: url(../images/pro_five_1a.gif) no-repeat;}
.menu5 li a:hover b {background:url(../images/pro_five_1b.gif) no-repeat right top;}
.menu5 li.current a:hover {color:#000; background: url(../images/pro_five_2a.gif) no-repeat; cursor:default;}
.menu5 li.current a:hover b {background:url(../images/pro_five_2b.gif) no-repeat right top;}

.headerline{
	width: width:100%;
	background: lightblue;
	border-bottom:1px Solid Gray;
	padding: 5px 5px 2px 25px;
	height: 20px;
}

.footerline{
	margin-top: 20px;
	width: 98%;
	background: lightblue;
	border-bottom:1px Solid Gray;
	padding: 10px;
	background:lightblue url(../images/pro_five_0c.gif) repeat-x left top;
}


body
{ 
	margin: 0;
	padding: 0; 
	font-family: arial, tahoma, arial, verdana, sans-serif;; 
	color: black;
	font-size:12px;
}

a{
  text-decoration: none;
  font-weight: 100;
  color: #336699;
}

a:hover{
  text-decoration: underline;
}

<!-- header menu parts -->

h2 {
	color: #336699;
	font-weight: bold;
	font-size: 1em;
	padding: 5px;
	
}
<!-- messages -->

div#err{
	color: Maroon;
	padding: 10px;
	margin: 6px;
	width: 450px;
	background-color: lightyellow;	
}

div#warning{
	color: Maroon;
	padding: 10px;
	margin: 6px;
	width: 450px;
	background-color: #efdadf;	
}

div#info{
	color: Green;
	padding: 10px;
	margin: 6px;
	width: 450px;
	background-color: #D3FFB4;
}

<!-- header menu parts -->

div#indicator
{
  position: relative;
  width: 100px;
  height: 40px;
  z-index: 900;
 	padding-left: 20px;
  background: url(../images/indicator.gif) no-repeat 0 0;
}

th{
	text-align: left;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	background: #f3f5ff;
	color: black;
}

td{
	padding: 5px;
	font-size: 11px;
	text-align: left;
	color: #666;
}
a.title{
	font-size: 13px;
	font-weight: bold;
	color: #003366;
}

.thHeader{
	background: #eee;
	border:1px Solid #999;
	padding: 5px;
	font-family: arial;
}

td label, td a{
	font-weight: none;
	color: #333;
}
.mainbody{
	background: white;
}
input, textarea, select, optgroup {
	font-size:12px;
	font-family: arial, Tahoma;
	padding: 2px;
	font-weight: 100;
}

.small{
	color: #999;
	font-size: 11px;
	font-family: arial, Tahoma;
	font-weight: normal;
}
.important{
	color: maroon;
	font-family: arial, Trebuchet MS;
}

div.title{
	width: 98%; 
	padding: 5px; 
	padding-left: 20px; 
	margin:0 auto;
 	background: lightblue; 
 	font-weight: bold;
 	font-size:12px;
}

/*---------- bubble tooltip -----------*/
a.tt{
    position:relative;
    z-index:24;
    color:#00000;
    text-decoration:none;
    font-size: 11px;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
  display:block;
  position:absolute;
  top:0px; left:0;
	padding: 15px -10px 0 0;
	width:200px;
	color: #000;
  text-align: left;
	filter: alpha(opacity:90);
	KHTMLOpacity: 0.90;
	MozOpacity: 0.90;
	opacity: 0.90;
	font-weight: 100;
}
a.tt:hover span.top{
	display: block;
	padding: 30px 8px 0;
  background: url(../images/body.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
	display: block;
	padding: 0 8px; 
	background: url(../images/pixel.gif) repeat bottom; 
}
a.tt:hover span.bottom{
	display: block;
	padding:3px 8px 10px;
	color: #548912;
    background: url(../images/body.gif) no-repeat bottom;
}

/* rounded corner homepage */
/* Show only to IE PC \*/
* html .boxhead h2 {height: 1%;} /* For IE 5 PC */

.sidebox {
	margin: 0 auto; /* center for now */
	width: 450px; /* ems so it will grow */
	background: url(../images/sbbody-r.gif) no-repeat bottom right;
	font-size: 100%;
}
.boxhead {
	background: url(../images/sbhead-r.gif) no-repeat top right;
	margin: 0;
	padding: 0;
	text-align: center;
}
.boxhead h2 {
	background: url(../images/sbhead-l.gif) no-repeat top left;
	margin: 0;
	padding: 22px 30px 5px;
	color: white; 
	font-weight: bold; 
	font-size: 1.2em; 
	line-height: 1em;
	text-shadow: rgba(0,0,0,.4) 0px 2px 5px; /* Safari-only, but cool */
}
.boxbody {
	background: url(../images/sbbody-l.gif) no-repeat bottom left;
	margin: 0;
	padding: 5px 30px 31px;
}
h1{
	font-family: arial, Tahoma;
}

a.ovalbutton
	{
		background: transparent url(../images/oval-blue-left.gif) no-repeat top left;
		display: block;
		float: left;
		font: normal 11px Tahoma; 
		line-height: 16px; 
		height: 24px; 
		padding-left: 11px; 
		text-decoration: none;
	}

a:link.ovalbutton, a:visited.ovalbutton, a:active.ovalbutton
	{
		color: #494949;
	}

a.ovalbutton span
	{
		background: transparent url(../images/oval-blue-right.gif) no-repeat top right;
		display: block;
		padding: 4px 11px 4px 0; 
	}

a.ovalbutton:hover
	{
		background-position: bottom left;
	}

a.ovalbutton:hover span
	{ 
		background-position: bottom right;
		color: black;
	}

.buttonwrapper
	{ 
		overflow: hidden;
		width: 100%;
}

input[type=submit],input[type=reset],input[type=button],input.button,button,label {cursor:pointer;}
input[type=submit],input[type=reset],input[type=button],button,a.button,input.button {display:inline-block;width:auto;padding:0.3em;border:1px solid #aaa;background:#e3e3e3 url(../images/button.gif) repeat-x left top;font-size:1.2em;font-family:inherit;text-shadow:#ccc 2px 2px 0;text-decoration:none;color:#333!important;overflow:visible;white-space:nowrap;}
button:hover,a.button:hover,input.button:hover {background:#fff url(../images/button-hover.gif) repeat-x left top;}

input[type=text],input[type=password],input[type=file],textarea {
  background: transparent url(../images/shadow.png) repeat-x 0px -32px;
}


input[type=text],input[type=password],select,textarea {
  border: 1px solid #aaa;
  padding: 4px 0 4px 4px;
  font-size:12px;
  color: #334;
}

input.disabled{
	border: 1px Solid #999;
	color: #336699;
	background: lightblue;
}

.tooltipBox{
	padding:10px;
	width: 250px; 
	left: -1000px; 
	top: -500px; 
	visibility: visible; 
	position: absolute; 
	border: 1px solid #003366; 
	background-color:lightblue;
}