/* 
==========================================================================
Author 	:	Naveen P Suthar
			http://www.naveenparth.net
			http://www.neowebbers.com
Version	: 	www.hkhcollege.com
Date	: 	July 13, 2009
Tested 	:	Mozilla Firefox 3.0.0.2, MSIE 6.0, Netscape Navigator 9.0
CSS Ver	:	CSS 3.0
==========================================================================
*/

/* CSS Document */
body{padding:0px; margin:0px; background:url(main-bg.gif) 0 0 repeat-x #fff; color:#003333; font:13px/19px Arial, Helvetica, sans-serif;}
div, p, ul, h2, h3, h4, h5, img{padding:0px; margin:0px; border:none;}
ul{list-style-type:none}

.justify{text-align:justify;}
/*----MAIN PANEL----*/
#mainPan{width:778px; position:relative; margin:0 auto;}

/*----TOP PANEL----*/
#topPan{width:778px; height:65px; background:url(topbg.jpg) 0 0 no-repeat #fff; color:#828282; position:relative; margin:0 auto;}
#topPan .logo{ border:none; height:50px; position:absolute; top:10px; left:135px;}
#topPan p.caption{width:200px; background:#fff; color:#828282; position:absolute; top:43px; left:235px;}
#topcontactPan{width:157px;height:62px;background:url(icon1.jpg) no-repeat;position:absolute;left:574px;padding:7px 0 0;top: 5px;}
/*----/TOP PANEL----*/

/*----HEADER PANEL----*/
#headerPan{width:700px; height:153px; background:url(header.jpg) 0 0 no-repeat; position:relative; margin:0 auto; padding:11px 0 0 78px;}

#headerPan ul.leftmenu{width:100px;}
#headerPan ul.leftmenu li{width:100px; height:28px;}
#headerPan ul.leftmenu li a{width:100px; height:28px; display:block; background:url(bullet-normal.gif) 0 7px no-repeat; color:#305E5C; line-height:25px; text-decoration:none; padding:0 0 0 15px;}
#headerPan ul.leftmenu li a:hover{background:url(bullet-hover.gif) 0 7px no-repeat; color:#000000; line-height:25px; text-decoration:none; padding:0 0 0 15px;}
#headerPan ul.leftmenu li.Solutions{width:100px; height:28px; display:block; background:url(bullet-hover.gif) 0 7px no-repeat; color:#305E5C; font-weight:bold; line-height:25px; text-decoration:none; padding:0 0 0 15px;}
#headerPan ul.leftmenu li.clients{width:100px; height:25px; border-bottom:none;}

#headerPan ul.botton{width:150px; height:45px; position:absolute; top:118px; left:600px;}
#headerPan ul.botton li{float:left; height:45px;}
#headerPan ul.botton li.home a{width:42px; height:45px; display:block; background:url(home-normal.gif) 0 0 no-repeat; text-indent:-200000px; margin:0 12px 0 0;}
#headerPan ul.botton li.home a:hover{background:url(home-hover.gif) 0 0 no-repeat;}

#headerPan ul.botton li.aboutus a{width:42px; height:45px; display:block; background:url(aboutus-normal.gif) 0 0 no-repeat; text-indent:-200000px; margin:0 12px 0 0;}
#headerPan ul.botton li.aboutus a:hover{background:url(aboutus-hover.gif) 0 0 no-repeat;}

#headerPan ul.botton li.contact a{width:42px; height:45px; display:block; background:url(contact-normal.gif) 0 0 no-repeat; text-indent:-200000px; margin:0px;}
#headerPan ul.botton li.contact a:hover{background:url(contact-hover.gif) 0 0 no-repeat;}

/*----/Fade Effect----*/
#outDiv{color:#FFFFFF; font-size:1px; font-family:Verdana, Arial, Helvetica, sans-serif; font-weight:lighter; float:right; clear:right; }
#photodiv{position:absolute; top:0px; left:207px; margin:0; padding:0px; clear:right; float:left; width:317px; height:164px; background-repeat: no-repeat;}
/*----/HEADER PANEL----*/

/*----BODY PANEL----*/
#bodyPan{width:750px; background:url(bodybg.gif) 0 0 no-repeat; position:relative; margin:0 auto; padding:22px 0 0 30px;}
/*----Body Left Panel----*/
#leftPan{width:114px; float:left;}

#leftPan h2{width:114px; height:38px; background:#fff url(side_bar.gif) no-repeat; color:#5F7A77; font-size:15px; line-height:34px;}
#leftPan h3{width:114px; height:38px; background:#fff url(side_bar.gif) 0 -38px no-repeat; color:#5F7A77; font-size:15px; line-height:34px;}

#leftPan ul{width:114px; background:#F4F0E8; font-family: Verdana, Tahoma, Geneva;}
#leftPan ul li{width:114px; height:22px;}
#leftPan ul li a{width:100px; height:22px; display:block; background:#F4F0E8 url(bullet2-normal.gif) 5px 10px no-repeat; color:#5F7A77; text-decoration:none; line-height:24px; padding:0 0 0 15px;}
#leftPan ul li a:hover{background:url(bullet2-hover.gif) 5px 10px no-repeat #e7e0d2; color:#ae0000; text-decoration:none; font-weight:bold;}
#leftPan ul li span{text-decoration:none; font-size:11px;}
/*----/Body Left Panel----*/

/*----Body Right Panel----*/
#rightPan{width:600px; min-height:650px; float:left; border-left:1px solid #C8E8E2; padding:0 10px;}
#rightPan p{padding:0 0 10px 0;}
#rightPan a{text-decoration:none;color:#5F7A77;}
#rightPan p.more{width:600px; height:25px; float:left; background:url(sky-color-bg.gif) 0 10px repeat-x; padding:0 0 20px 0;}
#rightPan p.more a{width:75px; height:21px; display:block; background:url(icon2.jpg) 0 0 no-repeat #fff; color:#958201; line-height:21px;font-weight:bold; text-decoration:none;margin:0 0 0 428px; padding:4px 0 0 50px;}
#rightPan p.more a:hover{background:url(icon2.jpg) 0 0 no-repeat #fff; color:#645804; text-decoration:none;}

#rightPan h2{width:20px; height:88px; float:left; display:block; background:url(chain.jpg) no-repeat #293b46; color:#fff; font-size:13px; font-weight:bold; line-height:18px; text-transform:uppercase; padding:46px 0 0 0px; margin:0 0 5px 0;}

#rightPan ul.services{width:350px; float:left; border:1px solid #B1DED5; background:#fff; color:#5F7A77; padding:7px 0 0 15px;}

#rightPan ul.services li.captionone{background:#fff; color: #425366; font-size:12px; font-weight:bold;}

#rightPan ul.services li{ font-size:11px; width:305px; height:20px;}
#rightPan ul.services li a{width:305px; height:20px; display:block; background:url(bullet2-normal.gif) 0 7px no-repeat #fff; color:#5F7A77; text-decoration:none; line-height:20px; padding:0 0 0 12px;}
#rightPan ul.services li a:hover{background:url(bullet2-hover.gif) 0 7px no-repeat #fff; color: #315053; text-decoration:none;}

#rightPan ul.servicestwo{width:137px; height:114px; float:left; border-bottom:1px solid #B1DED5; border-top:1px solid #B1DED5;  border-right:1px solid #B1DED5;background:#fff; color:#5F7A77; padding:7px 0 0 25px;}

#rightPan ul.servicestwo li.captiontwo{background:#fff; color:#AC9601; font-size:12px; font-weight:bold; text-decoration:underline;}

#rightPan ul.servicestwo li{width:137px; height:20px;}
#rightPan ul.servicestwo li a{width:125px; height:20px; display:block; background:url(bullet2-normal.gif) 0 7px no-repeat #fff; color:#5F7A77; text-decoration:none; line-height:20px; padding:0 0 0 12px;}
#rightPan ul.servicestwo li a:hover{background:url(bullet2-hover.gif) 0 7px no-repeat #fff; color:#5F7A77; text-decoration:none;}

#rightPan h4{width:96px; height:77px; float:left; display:block; background:url(icon4.jpg) 8px 38px no-repeat #DFD79C; color:#fff; font-size:16px; font-weight:bold; line-height:18px; text-transform:uppercase; padding:46px 0 0 75px;  margin:0 0 5px 0;}

#rightPan ul.events{float:left; border:1px solid #B1DED5; background:#fff; color:#5F7A77; padding:7px 0 0 25px;}

#rightPan ul.events li.captionthree{background:#fff; color:#AC9601; font-size:12px; font-weight:bold; text-decoration:none;}

#rightPan ul.events li{background:url(bullet2-normal.gif) 0 7px no-repeat #fff;line-height:20px; padding:0 0 0 12px;}
#rightPan ul.events li a{width:293px; display:block; background:url(bullet2-normal.gif) 0 7px no-repeat #fff; color:#959595; text-decoration:underline; line-height:20px; padding:0 5px 0 12px;}
#rightPan ul.events li a:hover{background:url(bullet2-hover.gif) 0 7px no-repeat #fff; color:#5F7A77; text-decoration:underline;}

/*----/Body Right Panel----*/
/*----/BODY PANEL----*/
/*----/MAIN PANEL----*/

/*----FOOTER PANEL----*/
#footermainPan{height:103px; background:url(footerbg.gif) 0 0 repeat-x #D3F0F0; color:#2F5958; font:13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif; position:relative; margin:0 auto; clear:both; padding:36px 0 0;}
#footerPan{width:778px; position:relative; margin:0 auto;}

#footerPan ul{width:608px; height:20px; position:relative; margin:0 auto;}
#footerPan li{float:left; }
#footerPan ul li a{padding:0 10px 0; color:#2F5958; background:#EBF8F7; text-decoration:none; font-size:13px;}
#footerPan ul li a:hover{text-decoration:underline;}

#footerPan p.copyright{width:250px; margin:10px 0 0 92px;}

#footerPan ul.templateworld{width:250px; background:#D3F0F0; color:#007163; display:block; font-size:10px; position:absolute; top:49px; left:92px;}
#footerPan ul.templateworld li{height:20px;}
#footerPan ul.templateworld li a{background:#D3F0F0; display:block; color:#007163; text-decoration:none; padding:0px; font-size:10px;}
#footerPan ul.templateworld li a:hover{text-decoration:underline;}

#footerPanhtml{width:70px; height:24px; display:block; position:absolute; top:35px; left:549px;}
#footerPanhtml a{width:64px; height:24px; display:block; background:url(html-normal.gif) 0 0 no-repeat #D3F0F0; color:#fff; font-size:13px; line-height:23px; font-weight:bold; text-decoration:none;text-transform:uppercase; padding:0 0 0 7px;}
#footerPanhtml a:hover{background:url(html-hover.gif) 0 0 no-repeat #D3F0F0; color:#fff;}
#footerPancss{width:58px; height:24px; display:block; position:absolute; top:35px; left:624px;}
#footerPancss a{width:49px; height:24px; display:block; background:url(css-normal.gif) 0 0 no-repeat #D3F0F0; color:#fff; font-size:13px; line-height:24px; font-weight:bold; text-decoration:none; text-transform:uppercase; padding:0 0 0 10px;}
#footerPancss a:hover{background:url(css-hover.gif) 0 0 no-repeat #D3F0F0; color:#fff; text-decoration:none;}
/*----/FOOTER PANEL----*/



/* ^^^^^^^^ BELOW IS THE CODE FOR THE MENU ^^^^^^^^^^ */
#foxmenu{display:block;height:24px;font-size:11px;font-weight:bold;font-family:Arial,Verdana,Helvitica,sans-serif;}
#foxmenu ul{margin:0px;padding:0;list-style-type:none;width:auto;}
#foxmenu ul li{ text-align:center;display:block;float:left;margin:0 0 0 0;}
#foxmenu ul li a{display:block;float:left;color:#fff;text-decoration:none;padding:3px 18px 0 18px;height:19px;background:transparent url(foxmenu_bg-OFF.gif) no-repeat top left;}
#foxmenu ul li a:hover{color:#fff;background:transparent url(foxmenu_bg-OVER.gif) no-repeat top right;}
#foxmenu ul li a.current:hover,#foxmenu ul li a.current{color:#fff;background:transparent url(foxmenu_bg_cur.gif) no-repeat top right;}
/* ^^^^^^^^ ABOVE IS THE CODE FOR THE MENU ^^^^^^^^^^ */




#sitemerits {margin:0 auto;width:100%;height:15px;padding:3px 0 3px 0;background-color:#e58910;clear:both;}
#smleft{margin:0 0 0 10px;font-family:Georgia, Palatino, Verdana, Tahoma, Arial, Sans-serif;font-size:9px;color:#fff;width:150px;float:left;}
#smleft a{color:#888;}
#smright{margin:0 10px 0 0;width:400px;float:right;text-align:right;}

#gallery{width:590px;height:400px;text-align:center;background:#fff url(gal_back.jpg) top left no-repeat;padding:110px 0 0 15px;}
#albumpics{width:590px;height:200px;overflow:scroll;clear:both;text-align:center;}
.gal_load{background:#FFFFFF url(neo_loader.gif) center no-repeat;float:left;height:45px;width:65px;padding:0 5px 5px 0;}

/*---/COURSE DETAIL----*/
#course{width:590px; color:#828282; position:relative; margin:0 auto;}
#course a{ text-decoration:none; color:#660000;}
#course img.logo{float:left; border:none; height:60px; width:60px; margin:0px 10px 5px 0px;}
#course img.photo{float:left; border:none; height:100px; width:100px; margin:0px 10px 5px 0px;}
#course p.caption{text-transform:uppercase; width:480px; background:#fff; color:#800000; font-weight:bold;}
#course p.cname{width:470px; height:22px; background:#EEE9DF; color:#182C3A; font-weight:bold; padding:2px 0 0 5px; margin:0 0 0 70px;}
#course p.cdetail{width:455px; background:#F5F5F5; color:#182C3A; padding:10px 10px 8px 10px; margin:0 0 0 70px; line-height:20px;}
#course p.dclame{width:540px;font-size:10px; text-align:right; clear:both; }
#course p.head{width:589px; height:30px; background: url(bg_uni_head.gif) top center no-repeat;}
/*---/COURSE DETAIL----*/

/*---/COURSE DETAIL----*/
#result{width:590px; color:#828282; position:relative; margin:0 auto; font-size:11px; color:#333333;}
#result .ro{width:50px; margin:1px 1px; padding-left: 4px; background:#EAF2FF; float:left;}
#result .en{width:90px; margin:1px 1px; padding-left: 4px; background:#EAF2FF; float:left;}
#result .name{width:200px; margin:1px 1px; padding-left: 4px; background:#EAF2FF; float:left;}
#result .mark{width:100px; margin:1px 1px; padding-left: 4px; background:#EAF2FF; float:left;}
#result .divi{width:100px; margin:1px 1px; padding-left: 4px; background:#EAF2FF; float:left;}

/*---/PHOTO----*/
.photo {width:110px; height:135px; background:url(master_layer.jpg) top center no-repeat; float:left; padding:16px 0 0 30px;}

#photo{float:right;}
#photo p.cname{width:350px; height:22px; background:#EEE9DF; color:#182C3A; font-weight:bold; padding:2px 0 0 5px; margin:15px 0 0 150px;}
#photo p.cdetail{width:345px; height:70px; background:#F5F5F5; color:#182C3A; padding:10px 0 0 10px; margin:0 0 0 150px; line-height:20px;}
#photo p.dclame{width:540px;font-size:10px}
#photo p.head{width:589px; height:30px; background: url(bg_uni_head.gif) top center no-repeat;}
/*---/COURSE DETAIL----*/

#bottommenu{
margin:0 auto;
width:100%;
height:27px;
padding:10px 0 0 0;
clear:both;
text-align:center;
background:#F4F0E8 url(bottom_grad.gif) top left no-repeat;
font-size:10px;
color:#666666;
word-spacing:2px;
font-family:Verdana, Helvetica, sans-serif;
}

#bottommenu a{
color:#666666;
text-decoration:none;
}

#bottommenu a:hover{
color:#000000;
}

#footer{
clear:both;
height:75px;
padding:20px 0 0 0;
background:#444444;
font-size:11px;
color:#999;
text-align:center;
font-family:Georgia, Palatino, Verdana, Tahoma, Arial, Sans-serif;
}

#footer img{
position:relative;
top : 12px;
}

.fbcontrol{height:30px;clear:right;}
.fbtext{float:left;text-align:left;width:150px;padding:2px 5px 3px 5px;font-size:1em;}

.hide{
display:none;
}

/*-------- Right pane (2) -------*/
.pics_r{ clear:left;float:left;width:140px;}
.pics_l{ clear:right; margin:0 0 0 30px; float:right; width:200px; text-align:right;}
.head_bg{float:left;width:425px;background:#fff url(head_back.gif) no-repeat top left;height: 40px;padding:3px 0 0 20px;font-weight:bold;color:#804000;}
.summary{float:left;width:425px;padding:0 0 0 20px;}
.clear{clear:both;}
.gray{float:left;width:495px;margin:0 0 10px 25px;padding:10px 10px 0 20px;background:#F1F3FA;}
.cont{float:left;width:300px;margin:0 0 10px 18px;padding:20px 10px 10px 20px;background:#F1F3FA;}

.select_field_b {
font-family:Arial, Verdana, Helvetica, sans-serif;
font-size:10px;
background:#D9D9B3;
color:#000;
width:200px;
border:0;
}

.select_field_c {
font-family:Tahoma, Verdana, Helvetica, sans-serif;
font-size:10px;
background:#376f79;
color:#fff;
width:150px;
border-width:1px;
font-weight:bold;
position:relative;
top:55px;
right:25px;
float:right;
}
/*-------- Marque -------*/
.dmarquee{
width:480px;
background:url(notice_board.jpg) 0px -2px no-repeat ;
color:#FFFFFF;
font-weight:bold;
height:45px;
padding:12px 40px 0px 80px;
}

/*-------- popup -------*/

#popUpDiv {
position:absolute;
background-color:#ffffff;
width:480px;
height:320px;
z-index: 9002;
text-align:center;
border:#CCCCCC solid 10px;
}

.right{text-align:right;}

#h_marqueouter{
 background:url(marque_back.gif) top left no-repeat ;  
 float:right;
 padding: 25px 5px 10px 5px;
 width:200px;
 height:150px;
 }
 
#marquee_replacement{
 text-align:left;
 width:188px;
 height:118px;
 overflow:auto;
 font-family: Tahoma, Verdana, Geneva;
 }

#marquee_replacement ul.news li.spacer{
 background:none;
 height:150px;
}

#marquee_replacement ul.news{float:left;}
#marquee_replacement ul.news li.captionone{background:url(arrow.gif) 0 5px no-repeat; color: #000000; font-size:11px; font-weight:bold;}
#marquee_replacement ul.news li{background:url(bullet2-hover.gif) 5px 8px no-repeat; font-size:11px; padding: 0 0 0 15px; }
#marquee_replacement ul.news li a{color:#003333; text-decoration:none; line-height:20px;}
#marquee_replacement ul.news li a:hover{color: #000000; text-decoration:none;}

/* Testimonial Div ========= */
#testimonial{
  width : 200px;
  height : 150px;
  float : right;
}

#testimonial span{
  width : 190px;
  display : block;
  background : url(foxmenu_bg-OFF.gif) repeat-x;
  height : 20px;
  text-align : left;
  color : #ffffff;
  padding : 2px 0 3px 10px;
  font-weight : bold;
}

#testimonial img.pic{
  width : 60px;
  height : 80px;
  padding : 5px 5px 5px 5px;
  float:left;
}

#testimonial p{
  padding : 5px 5px 5px 5px;
  font-family : Verdana, Arial, Helvetica, sans-serif;
  font-size : 10px;
  color : #586381;
  line-height : 15px;
  text-align:left;
}

#testimonial p.name{
  width : 190px;
  height : 15px;
  display : block;
  padding : 0 2px 2px 10px;
  margin: 0 0 20px 0;
  font-family : Verdana, Arial, Helvetica, sans-serif;
  font-size : 10px;
  color : #dc220d;
  border-bottom : #dc220d solid 1px;
  float: right;
  text-align:right;
  font-style:italic;
}