/* CSS Document */
n
/* --------------------------------MENU CSS--------------------------------------------- */

/* Add a margin - for this demo only - and a relative position with a high z-index to make it appear over any element below */
#menuPan { width:680px; margin:auto; z-index:1; position:absolute;}

/* Get rid of the margin, padding and bullets in the unordered lists */
#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none; font:17px/15px "Lucida Sans", Arial, Helvetica, sans-serif; z-index: 1; position:absolute;}

/* Set up the link size, color and borders */
#pmenu a, #pmenu a:visited {display:block; width:113px; font-size:13px; color:#fff; height:31px; line-height:30px; text-decoration:none; text-indent:1px; border:1px solid #000; border-width:1px 0 1px 1px;}

/* Set up the sub level borders */
#pmenu li ul li a, #pmenu li ul li a:visited {border-width:0 1px 1px 1px;}
#pmenu li a.enclose, #pmenu li a.enclose:visited {border-width:1px;}

#spacer{clear:both; font-size:0; line-height:0; height:50px;}

/* Set up the list items */
#pmenu li {float:left; background:#12BD77; text-align:center;}

/* For Non-IE browsers and IE7 */
#pmenu li:hover {position:relative;}
/* Make the hovered list color persist */
#pmenu li:hover > a {background:#ffffff; color:#c00;}
/* Set up the sublevel lists with a position absolute for flyouts and overrun padding. The transparent gif is for IE to work */
#pmenu li ul {display:none;}
/* For Non-IE and IE7 make the sublevels visible on list hover. This is all it needs */
#pmenu li:hover > ul {display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; width:120px;}
/* Position the first sub level beneath the top level liinks */
#pmenu > li:hover > ul {left:-30px; top:23px;}

/* get rid of the table */
#pmenu table {position:absolute; border-collapse:collapse; top:1; left:0; z-index:100; font-size:1em;}

/* For IE5.5 and IE6 give the hovered links a position relative and a change of background and foreground color. This is needed to trigger IE to show the sub levels */
* html #pmenu li a:hover {position:relative; background:#fff; color:#c00;}

/* For accessibility of the top level menu when tabbing */
#pmenu li a:active, #pmenu li a:focus {background:#ffffff; color:#c00;}

/* This lot is for IE5.5 and IE6 ONLY and is necessary to make the sublevels appear */

/* change the drop down levels from display:none; to visibility:hidden; */
* html #pmenu li ul {visibility:hidden; display:block; position:absolute; top:-11px; left:80px; padding:10px 30px 30px 30px; background:transparent url(transparent.gif);}

/* keep the third level+ hidden when you hover on first level link */
#pmenu li a:hover ul ul{
visibility:hidden; 
}
/* keep the fourth level+ hidden when you hover on second level link */
#pmenu li a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the fifth level hidden when you hover on third level link */
#pmenu li a:hover ul a:hover ul a:hover ul ul{
visibility:hidden;
}
/* keep the sixth level hidden when you hover on fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul ul {
visibility:hidden;
}

/* make the second level visible when hover on first level link and position it */
#pmenu li a:hover ul {
visibility:visible; left:-30px; top:14px; lef\t:-31px; to\p:15px;
}

/* make the third level visible when you hover over second level link and position it and all further levels */
#pmenu li a:hover ul a:hover ul{ 
visibility:visible; top:-11px; left:80px;
}
/* make the fourth level visible when you hover over third level link */
#pmenu li a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* make the fifth level visible when you hover over fourth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}
/* make the sixth level visible when you hover over fifth level link */
#pmenu li a:hover ul a:hover ul a:hover ul a:hover ul a:hover ul { 
visibility:visible;
}


/* ----------------------------------------/MENU------------------------------------------------------- */

body{margin:0px; padding:0px; background:url(images/main-bg.jpg) 0 0 repeat-x #F2F0DC; color:#5D5B46; font:14px/18px Georgia, "Times New Roman", Times, serif;}
div, p, ul, h1, h2, img{margin:0px; padding:0px;}
ul{list-style-type:none;}

/*----TOP PANEL----*/
#topPan{ width:778px; height:141px; position:relative; margin:0 auto; font:14px/18px Arial, Helvetica, sans-serif;}
#topPan ul{width:125px; height:22px; position:absolute; top:0px; right:130px;}
#topPan ul li{float:left; width:45px; height:22px;}
#topPan ul li a{width:45px; height:16px; display:block; background:url(images/arrow1.gif) 40px 6px no-repeat #CC0000; color:#fff; font:13px/16px Arial, Helvetica, sans-serif; text-decoration:none;}
#topPan ul li a:hover{background:url(images/arrow1-hover.gif) 40px 6px no-repeat #CC0000; color:#FEF0B7; text-decoration:none;}

#topPan ul li.register{float:left; width:65px; height:22px;}
#topPan ul li.register a{width:65px; height:16px; display:block; background:url(images/arrow1.gif) 65px 6px no-repeat #CC0000; color:#fff; font:13px/16px Arial, Helvetica, sans-serif; text-decoration:none; padding:0 0 0 10px;}
#topPan ul li.register a:hover{background:url(images/arrow1-hover.gif) 65px 6px no-repeat #CC0000; color:#FEF0B7; text-decoration:none;}

#topPan img.logo{width:364px; height:70px; position:absolute; top:60px; left:28px;}
#topPan img.pen{width:305px; height:117px; position:absolute; top:39px; left:472px;}
#topPan img.contact{ width:195px; right:380px; height:29px; background:#212121; color:#EAE8CD; position:absolute; top:4px; left: 574px;
}
/*----/TOP PANEL----*/

/*----HEADER- PANEL----*/
#headerPan{top:18px; width:778px; height:210px; position:relative; margin:0 auto;}
#headerleftPan{width:46px; height:175px; float:left; background:url(images/leftfolder.gif) 0 0 no-repeat;}
/*----Header Middle Panel----*/
#headermiddlePan{width:686px; height:175px; float:left;}
#headerbodyPan{width:688px; height:131px; position:absolute; top:42px; left:46px; background:#FEFDF1; color:#fff; border-bottom:1px solid #CDCAA3; border-top:1px solid #CDCAA3;}

/*---- Header Red Panel----*/
#headerleftredPan{width:684px; height:93px; background:url(images/redpan-bg.jpg) 0 0 no-repeat #FEFDF1; color:#fff; position:absolute; top:15px; left:-3px;}
#form{padding: 8px 25px 0px 0px; width:240px; float:right; font: bold 13px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; }
#form a, #form a:visited {color:#fefefe; font-weight:normal; text-decoration:none;}
#form a:hover {color:#FFFF00; text-decoration:underline;}  
#headerleftredPan h1{width:500px; font:24px/24px "Trebuchet MS", Arial, Helvetica, sans-serif; position:absolute; left:17px; text-transform:uppercase; color:#FFFFFF; margin: 15px 0 0 0;}
#headerleftredPan h3 span{font-size:39px; line-height:10px;}
#headerleftredPan p{width:118px; height:96px; display:block; position:absolute; top:16px; left:171px; font-size:14px; line-height:17px;} 

/*----Header MORE Panel----*/
#headermorePan{width:47px; height:123px; position:absolute; top:32px; right:0px; font:13px/14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight:bold;}
#headermorePan a{width:39px; height:38px; display:block; background:url(images/headermore-normal.gif) 0 0 no-repeat #FEFDF1; color:#FDFCEC; text-decoration:none; padding:85px 0 0 8px;}
#headermorePan a:hover{background:url(images/headermore-hover.gif) 0 0 no-repeat; text-decoration:none;}
/*----/Header MORE Panel----*/

/*----Header Middle Panel----*/
#headerrightPan{width:46px; height:175px; float:left; background:url(images/rightfolder.gif) 0 0 no-repeat;}
/*----HEADER- PANEL----*/

/*----BODY PANEL----*/
#bodyPan{ width:780px; margin:auto; height:100%;}
#bodyPan p{padding:5px 0 0; text-align:justify; font:12px/15px "Lucida Sans", Arial, Helvetica, sans-serif;}
#bodyPan p span{font-weight:bold; font-size:13px; color:#333}
#bodyPan ul{width:250px; margin:5px 0 0 0px;  }
#bodyPan ul li{font:12px/15px "Lucida Sans", Arial, Helvetica, sans-serif; width:710px; display:block; background:url(images/bullet2.gif) 0 5px no-repeat; line-height:20px; text-decoration:none; padding:0 0 0 20px;}
#bodyPan a {color:#0EA369; text-decoration:none;}
#bodyPan a:hover{text-decoration:underline;} 
#bodyPan h1{font:27px/18px  arial, Georgia, "Times New Roman", Times, serif; color:#333333; padding: 0 0 20px 0; line-height:25px;}
#bodyPan h2{font:27px/18px  arial, Georgia, "Times New Roman", Times, serif; color:#333333; padding: 0 0 20px 0; line-height:25px;}
#bodyPan h3{font:16px/18px  arial, "Times New Roman", Times, serif; color:#333333; font-style:bold}

#area1 {margin: 0 10px 5px 0; float:left; height:204px; width:262px; background-image: url(images/typing1.jpg); border:2px solid #CCCCCC;}
#area2 {margin: 0 10px 5px 0; float:left; height:131px; width:175px; background-image: url(images/filing.jpg); border:2px solid #CCCCCC;}
#area3 {margin: 0px 10px 5px 0; float:right;  width:400px; }
#area4 {margin: 20px 10px 5px 0; float:left; height:125px; width:298px; background-image: url(images/graph.gif); border:2px solid #CCCCCC;}
#area5 {margin: 5px 10px 5px 0; float:left; height:219px; width:280px; background-image: url(images/tape-machine.jpg);}
#area9 {position:relative; float:right; height:205px; width:280px; background-image: url(images/tape-machine.jpg);}
#area7 {margin: -5px 0px 0px 0; position:relative; float:right; right:10px; height:220px; width:429px; background-image: url(images/database.jpg); border:2px solid #CCCCCC;}
#area8 {margin: 20px 0 0 0; position:relative; float:right; right:10px;  width:427px; }
#area10 {margin: 0 20px 5px 0; float:left; height:181px; width:272px; background-image: url(images/technology.jpg); border:2px solid #CCCCCC;}

/*----Body Bottom Panel----*/
#bodyimagePan{width:790px; position:relative; margin:0 auto; top:10px; height:190px; }
/*----Bottom Left Panel----*/

#bodycontactPan{width:778px; position:relative; margin:0 auto; top:10px; height:500px;}
#bottomcontactPan{text-align:center; width:778px; float:left; background:url(images/bodybottombg2.jpg) 0 0 no-repeat #FEFDF0; color:#D80000; border-bottom:1px solid #CDCAA3; border-left:1px solid #CDCAA3; border-right:1px solid #CDCAA3; margin:0px; height:460px;}
#enquiries{ padding: 40px 0 0 20px; width:350px; float:left; position:relative; font:12px/15px "Lucida Sans", Arial, Helvetica, sans-serif; color:#333333 }

/*----Body Bottom Panel----*/
#bodybottomPan{width:778px; position:relative; margin:0 auto; top:10px; height:360px; z-index:-1}
/*----Bottom Left Panel----*/
#bottomleftPan{text-align:center; width:375px; float:left; background:url(images/bodybottombg.gif) 0 0 no-repeat #FEFDF0; color:#D80000; border-bottom:1px solid #CDCAA3; border-left:1px solid #CDCAA3; border-right:1px solid #CDCAA3;  height:360px; z-index:-1}
#bottomleftPan h2{width:250px; color:#0EA367; height:58px; background:url(images/icon1.jpg) 0 0 no-repeat; font:26px/26px "Trebuchet MS",Arial, Helvetica, sans-serif; padding:0 0 0 65px; margin:22px 0 0 41px;}
#bottomleftPan h2 span{font-size:12px; background:#FCFBED; color:#5D5B46; line-height:15px;}
#bottomleftPan p {font:12px/15px "Lucida Sans", Arial, Helvetica, sans-serif; padding: 10px 10px 10px 10px; text-align:justify; color:#5D5B46;}
/*----/Bottom Left Panel----*/

.right {float:right; padding: 40px 20px 0 0;}

/*----Bottom full Panel----*/
#bottomfulltPan{text-align:center; width:778px; float:left; background:url(images/bodybottombg2.jpg) 0 0 no-repeat #FEFDF0; color:#D80000; border-bottom:1px solid #CDCAA3; border-left:1px solid #CDCAA3; border-right:1px solid #CDCAA3; margin:0px; height:319px;}
#bottomfulltPan h2{width:200px; color:#0EA367; height:58px; background:url(images/icon1.jpg) 0 0 no-repeat; font:26px/26px "Trebuchet MS",Arial, Helvetica, sans-serif; padding:0 0 0 65px; margin:22px 0 0 41px;}
#bottomfulltPan h2 span{font-size:12px; background:#FCFBED; color:#5D5B46; line-height:15px;}
#bottomfulltPan p {font:12px/15px "Lucida Sans", Arial, Helvetica, sans-serif; padding: 10px 10px 10px 10px; text-align:justify; color:#5D5B46;}
/*----/Bottom full Panel----*/

/*----Bottom Right Panel----*/
#bottomrightPan{ width:375px; float:right; background:url(images/bodybottombg.gif) 0 0 no-repeat #FEFDF0; border-bottom:1px solid #CDCAA3; border-left:1px solid #CDCAA3; border-right:1px solid #CDCAA3; margin:0 0 0 8px; height:100%;}
#bottomrightPan h2{ width:250px; color:#0EA367; height:58px; background:url(images/icon2.jpg) 0 0 no-repeat; font:26px/26px "Trebuchet MS",Arial, Helvetica, sans-serif; padding:0 0 0 65px; margin:22px 0 0 41px;}
#bottomrightPan h2 span{font-size:12px; background:#FCFBED; color:#5D5B46; line-height:15px;}
#bottomrightPan p {font:12px/15px "Lucida Sans", Arial, Helvetica, sans-serif; padding: 10px 10px 10px 10px; text-align:justify; color:#5D5B46;}
#bottomrightPan a {color:#0EA367; text-decoration:none;}
#bottomrightPan ul{width:290px; margin:15px 0 0 80px; }
#bottomrightPan ul li{font:12px/15px "Lucida Sans", Arial, Helvetica, sans-serif; width:290px; height:30px; background:url(images/bullet1.gif) 0 0 no-repeat;} 
#bottomrightPan ul li a{width:210px; height:30px; display:block; background:url(images/bullet1.gif) 0 10px no-repeat #FEFDF1; color:#2F2A28; font-size:14px; line-height:30px; text-decoration:none; padding:0 0 0 50px;}
#bottomrightPan ul li a:hover{display:block;background:url(images/bullet1.gif) 0 10px no-repeat #FEFDF1; color:#2F2A28; line-height:30px;} 
 
#bottomrightPan p.more{width:270px; height:21px; padding:0px; margin:10px 0 25px 50px;} 
#bottomrightPan p.more a{width:270px; height:21px; display:block; background:url(images/bottom-more-bg.gif) 0 0 no-repeat #FEFDF1; color:#fff; font:13px/20px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-decoration:none;} 
#bottomrightPan p.more a:hover{background:url(images/bottom-more-bg.gif) 0 0 no-repeat #FEFDF1; color:#FDF6B6; text-decoration:none;} 
/*----/Bottom Left Panel----*/


/*----Bottom Right Panel----*/
#bottom-rightPan{ width:375px; float:right; background:url(images/bodybottombg.gif) 0 0 no-repeat #FEFDF0; border-bottom:1px solid #CDCAA3; border-left:1px solid #CDCAA3; border-right:1px solid #CDCAA3; margin:0 0 0 8px; overflow:scroll; height:282px;}
#bottom-rightPan h2{ width:250px; color:#0EA367; height:58px; background:url(images/icon2.jpg) 0 0 no-repeat; font:26px/26px "Trebuchet MS",Arial, Helvetica, sans-serif; padding:0 0 0 65px; margin:22px 0 0 41px;}
#bottom-rightPan h2 span{font-size:12px; background:#FCFBED; color:#5D5B46; line-height:15px;}
#bottom-rightPan p {font:12px/15px "Lucida Sans", Arial, Helvetica, sans-serif; padding: 10px 10px 10px 10px; text-align:justify; color:#5D5B46;}
#bottom-rightPan a {color:#0EA367; text-decoration:none;}


#bottom-rightPan ul{width:290px; margin:15px 0 0 80px; }
#bottom-rightPan ul li{font:12px/15px "Lucida Sans", Arial, Helvetica, sans-serif; width:290px; height:30px; background:url(images/bullet1.gif) 0 0 no-repeat;} 
#bottom-rightPan ul li a{width:210px; height:30px; display:block; background:url(images/bullet1.gif) 0 10px no-repeat #FEFDF1; color:#2F2A28; font-size:14px; line-height:30px; text-decoration:none; padding:0 0 0 50px;}
#bottom-rightPan ul li a:hover{display:block;background:url(images/bullet1.gif) 0 10px no-repeat #FEFDF1; color:#2F2A28; line-height:30px;} 
 
#bottom-rightPan p.more{width:270px; height:21px; padding:0px; margin:10px 0 25px 50px;} 
#bottom-rightPan p.more a{width:270px; height:21px; display:block; background:url(images/bottom-more-bg.gif) 0 0 no-repeat #FEFDF1; color:#fff; font:13px/20px "Trebuchet MS",Arial, Helvetica, sans-serif; font-weight:bold; text-align:center; text-decoration:none;} 
#bottom-rightPan p.more a:hover{background:url(images/bottom-more-bg.gif) 0 0 no-repeat #FEFDF1; color:#FDF6B6; text-decoration:none;} 
/*----/Bottom Left Panel----*/


/*------/Bottom Left pics Panel----------*/
#bottompicsPan{height:175px; width:190px; float:left; background:url(images/bodybottombg1.jpg) 0 0 no-repeat #FEFDF0; color:#D80000; border-bottom:1px solid #CDCAA3; border-left:1px solid #CDCAA3; border-right:1px solid #CDCAA3;}
#bottompicsPan h2{text-align:center; width:150px; color:#0EA367; font:15px/26px "Trebuchet MS",Arial, Helvetica, sans-serif; padding: 6px 0 0 0;}
#bottompicsPan h2 span{font-size:12px; background:#FCFBED; color:#0033FF; line-height:20px; }
/*----/Bottom Left pics Panel----*/

/*------/Bottom Left pics Panel----------*/
#bottompicsPan2{height:175px; width:190px; float:left; background:url(images/bodybottombg1.jpg) 0 0 no-repeat #FEFDF0; color:#D80000; border-bottom:1px solid #CDCAA3; border-left:1px solid #CDCAA3; border-right:1px solid #CDCAA3; margin:0 0 0 7px;}
#bottompicsPan2 h2{text-align:center; width:150px; color:#0EA367; font:15px/26px "Trebuchet MS",Arial, Helvetica, sans-serif; padding: 6px 0 0 0;}
#bottompicsPan2 h2 span{font-size:12px; background:#FCFBED; color:#0033FF; line-height:20px; }
/*----/Bottom Left pics Panel----*/

/*----Bottom Right pics Panel----*/
#bottomrightPan1{height:175px; width:190px; float:left; background:url(images/bodybottombg1.jpg) 0 0 no-repeat #FEFDF0; border-bottom:1px solid #CDCAA3; border-left:1px solid #CDCAA3; border-right:1px solid #CDCAA3; margin:0 0 0 7px;}
#bottomrightPan1 h2{text-align:center; width:150px; color:#0EA367; font:15px/26px "Trebuchet MS",Arial, Helvetica, sans-serif; padding: 6px 0 0 0;}
#bottomrightan1 h2 span{font-size:12px; background:#FCFBED; color:#0033FF; line-height:20px; }
/*------/Bottom Right pics Panel----------*/

/*------/contact form----------*/
#member{float:right; width:320px; }
#member form label{ font:normal 11px/22px "Trebuchet MS", Arial, Helvetica, sans-serif; display:block; width:100%;}
/*------/contact form----------*/

/*----FOOTER PANEL----*/
#footermainPan{height:350px; background:url(images/footerbg.gif) 0 0 repeat-x #3B3B3B; color:#fff; font:10px "Trebuchet MS",Arial, Helvetica, sans-serif; position:relative; margin:0 auto; clear:both; padding:15px 0 0;}

#footerPan{width:700px; position:relative; margin:0 auto; font-size:10px; padding-top:30px}
#footerPan H4 {font-size:14px;}

#footerPan a, #footerPan a:visited {color:#FFFFFF; text-decoration:none}
#footerPan a:hover {color:#FFFFCC;}
 
#footerPan #f1 {float:left; width: 230px; margin:0; padding:0}
#footerPan #f1 ul{margin:0 auto; list-style:circle;}
#footerPan #f1 ul li a{padding:0 10px 0; color:#fff;  }
#footerPan #f1 ul li a:hover{text-decoration:underline;}

#footerPan #f2 { float:left; width:250px; }
#footerPan #f3 { float:left; width:200px; }

#footerPan ul{width:480px; height:20px; position:relative; margin:0 auto;}
#footerPan li{float:left; }
#footerPan ul li a{padding:0 10px 0; color:#fff;  text-decoration:none; font-size:12px;}
#footerPan ul li a:hover{text-decoration:underline;}

#footerPan p.copyright{width:600px; position:relative; background: none; color:#fff;  font-size:10px; padding-top:10px;; text-align:center}

#footerPan ul.footerPad{width:250px;  color:#fff; display:block; position:absolute; top:45px; left:269px; font-size:10px;}
#footerPan ul.footerPad li{height:20px;}
#footerPan ul.footerPad li a{display:block; color:#fff; text-decoration:none; padding:0px;}
#footerPan ul.footerPad li a:hover{text-decoration:underline;}


/*----/FOOTER PANEL----*/