/* GENERAL STYLES */
html {overflow: auto;}
body {font: normal 11px Verdana, Arial; background-color: #1E77D3;}
p {text-align: justify;}
a {color: #666666; text-decoration: none;}
a:hover {text-decoration: underline;}


/*  HEADER and LOGO STYLE  */
#topgrad {position: absolute; top: 0px; left: 0px; width: 770px; height: 20px; background: url(topgrad.jpg) repeat-y left top;}
#toplogo {position: absolute; top: 20px; left: 0px; width: 770px; height: 50px; background: url(toplogo.jpg) no-repeat left top;}


/*  NAVIGATION STYLE  */
#navarea_grad {position: absolute; top: 70px; left: 0px; width: 168px; height: 619px; border: solid 1px #999;
				border-top-width: 0px; background: url(navgrad.jpg) repeat-x left top; text-align: center; z-index: 2;}
#navarea_solid {position: absolute; top: 70px; left: 0px; width: 168px; height: 619px; background-color: #DAE8F7; 
				border: solid 1px #999999; border-top-width: 0px; z-index: 1;}
.navigation {width: 96%; border-bottom: solid 1px #999999; margin-bottom: 5px;}
p.navheader {font: bold 11px Verdana, Arial; text-align: left; margin: 0px 0px 0px 4px; margin-top: 10px; margin-bottom: 2px; padding-left: 15px;}
p.navlink {font: normal 11px Verdana, Arial; text-align: left; margin: 0px; margin-top: 1px; margin-bottom: 3px;}
p.navlink a {text-decoration: none; display: block; color: #000000; padding-top: 3px; padding-left: 10px; padding-bottom: 3px; padding-right: 1px;}
p.navlink a:hover {background-color: #F1F1F1; border: solid 1px #CCCCCC; padding-top: 2px; padding-left: 9px; padding-bottom: 2px; padding-right: 0px;}


/*  MAIN GRAPHIC DISPLAY STYLE  */
#maingraphic {position: absolute; top: 70px; left: 170px; width: 600px; height: 200px; background: url(keyboard.jpg) no-repeat left top; 
				border-top: solid 1px #999; border-bottom: solid 1px #999; z-index: 2;}


/*  CONTENT AREA STYLE  */
#contentarea {position: absolute; top: 271px; left: 170px; width: 600px; height: 418px; background-color: #F5F5F5; 
					border-bottom: solid 1px #999; z-index: 3;}
#fullcontentpane {position: absolute; top: 5px; left: 5px; width: 549px; height: 350px; border: solid 1px #999999; 
					padding: 37px 20px 15px 20px; overflow-y: scroll; z-index: 2;}
#leftcontentpane {position: absolute; top: 5px; left: 5px; width: 274px; height: 350px; padding: 42px 0px 10px 20px; 
					border: solid 1px #999999; border-right-width: 0px;}
#rightcontentpane {position: absolute; top: 5px; left: 300px; width: 265px; height: 350px; padding: 42px 10px 10px 20px; 
					border: solid 1px #999999; border-left-width: 0px;}


/*  HOME PAGE LIST STYLES  */
.contentlistcontainer {width: 80%; border-bottom: solid 1px #999999; margin: 0px 0px 10px 0px; padding: 0px;}
.conentlist li {list-style-image: url(blue_diagbullet.gif); margin: 0px 0px 3px 5px; font-size: 12px;}
.listhead {font-weight: bold; font-size: 12px; text-decoration: underline; margin: 3px 0px 3px 0px;}


/*  PAGE HEADER GRAPHICS  */
#subjeadcontainer {position: absolute; top: 5px; left: 5px; width: 590px; height: 30px; z-index: 3;}
.subhead_txt {position: absolute; top: 0px; left: 20px; width: 300px; height: 30px; line-height: 30px; font-size: 18px; color: #FFFFFF;}
#TR_corner_N {position: absolute; top: 0px; right: -1px; width: 20px; height: 30px; background: url(Rcorner_neutral.jpg) no-repeat top right; z-index: 4;}
#TL_corner_N {position: absolute; top: 0px; left: 0px; width: 20px; height: 30px; background: url(Lcorner_neutral.jpg) no-repeat top right; z-index: 5;}
#subhead_N {position: absolute; top: 0px; right: 19px; width: 570px; height: 30px; background: url(neutralgrad_subhead.jpg) repeat-x left top; z-index: 4;}
#TR_corner_G {position: absolute; top: 0px; right: -1px; width: 20px; height: 30px; background: url(Rcorner_green.jpg) no-repeat top right; z-index: 4;}
#TL_corner_G {position: absolute; top: 0px; left: 0px; width: 20px; height: 30px; background: url(Lcorner_green.jpg) no-repeat top right; z-index: 5;}
#subhead_G {position: absolute; top: 0px; right: 19px; width: 570px; height: 30px; background: url(greengrad_subhead.jpg) repeat-x left top; z-index: 4;}
#TR_corner_O {position: absolute; top: 0px; right: -1px; width: 20px; height: 30px; background: url(Rcorner_orange.jpg) no-repeat top right; z-index: 4;}
#TL_corner_O {position: absolute; top: 0px; left: 0px; width: 20px; height: 30px; background: url(Lcorner_orange.jpg) no-repeat top right; z-index: 5;}
#subhead_O {position: absolute; top: 0px; right: 19px; width: 570px; height: 30px; background: url(orangegrad_subhead.jpg) repeat-x left top; z-index: 4;}
#TR_corner_R {position: absolute; top: 0px; right: -1px; width: 20px; height: 30px; background: url(Rcorner_red.jpg) no-repeat top right; z-index: 4;}
#TL_corner_R {position: absolute; top: 0px; left: 0px; width: 20px; height: 30px; background: url(Lcorner_red.jpg) no-repeat top right; z-index: 5;}
#subhead_R {position: absolute; top: 0px; right: 19px; width: 570px; height: 30px; background: url(redgrad_subhead.jpg) repeat-x left top; z-index: 4;}
#TR_corner_B {position: absolute; top: 0px; right: -1px; width: 20px; height: 30px; background: url(Rcorner_blue.jpg) no-repeat top right; z-index: 4;}
#TL_corner_B {position: absolute; top: 0px; left: 0px; width: 20px; height: 30px; background: url(Lcorner_blue.jpg) no-repeat top right; z-index: 5;}
#subhead_B {position: absolute; top: 0px; right: 19px; width: 570px; height: 30px; background: url(bluegrad_subhead.jpg) repeat-x left top; z-index: 4;}
#BR_corner {position: absolute; bottom: 9px; right: 4px; width: 20px; height: 20px; background: url(BRight_corner.gif) no-repeat top right; z-index: 6;}
#BL_corner {position: absolute; bottom: 9px; left: 5px; width: 20px; height: 20px; background: url(BLeft_corner.gif) no-repeat top right; z-index: 7;}


/*  FOOTER STYLE  */
#bottomgrad {position: absolute; top: 690px; left: 0px; width: 770px; height: 95px; background: url(bottomgrad.jpg) repeat-y left top; margin-bottom: 10px;}
#footerleft {position: absolute; top: 0px; left: 20px; width: 400px; height: 95px; line-height: 30px; 
				font-size: 12px; font-weight: normal; color: #0A6CCD; text-align: left;}
#footerright {position: absolute; top: 0px; left: 420px; width: 310px; height: 95px; line-height: 30px; 
				font-size: 12px; font-weight: normal; color: #FFFFFF; text-align: right;}
#footerright a {text-decoration: none; color: #FFFFFF;}
#footerright a:hover {text-decoration: underline;}