/* CSS DOCUMENT */
/*------------------------- GENERAL -------------------------*/
body{padding:0; margin:0; font:normal 13px/21px Arial, Helvetica, sans-serif; color:#4E4E4E; background:url(../images/base.gif) 0 0 repeat-x;}
td, th, div, img, p, a, ul, h1, h2, h3, h4, h5, h6, form, label, select, input, textarea, object{padding:0; margin:0;}
img{display:block; border:none;}
a{text-decoration:none; outline:none;}
ul{list-style-type:none;}
.spacer{clear:both; font-size:0; line-height:0;	width:0; height:0; padding:0px;	margin:0px;}


/*------------------------- MAIN -------------------------*/
div#main{background:url(../images/bottom.gif) 0 100% repeat-x;}

/*------------------------- HEADER AREA -------------------------*/
div#headerArea{width:960px; height:146px; margin:0 auto; position:relative;}
div#headerArea a.logo{width:266px; height:60px; position:absolute; top:73px; left:24px; z-index:100;}
div#headerArea h1{width:506px; height:17px; position:absolute; font-size:0; line-height:0; text-indent:-20000px; top:91px; left:317px; background:url(../images/catchline.png) 0 0 no-repeat;}


/*------------------------ TOP LINK -------------------------*/	
div#headerArea ul#top_right{background:url(../images/top_right.png) 0 0 no-repeat; width:303px; height:49px; position:absolute; top:0px; left:527px; padding:0 0 0 130px;}
div#headerArea ul#top_right li{float:left; position:relative; width:auto; height:49px;}
div#headerArea ul#top_right a.portfolio{background:url(../images/icon_portfolio.png) 0 0 no-repeat; display:block; padding:0 0px 0 55px; color:#ffffff; font:bold 11px/49px Arial, Helvetica, sans-serif; margin:3px 0 0 0; width:70px; background-color:inherit;}
div#headerArea ul#top_right a.portfolio:hover{color:#ffffff; font:bold 11px/49px Arial, Helvetica, sans-serif; text-decoration:underline; background-color:inherit;}
div#headerArea ul#top_right a.request{background:url(../images/icon_request.png) 0 0 no-repeat; display:block; padding:0 0 0 40px; color:#ffffff; font:bold 11px/41px Arial, Helvetica, sans-serif; margin:5px 0 0 0; width:100px; background-color:inherit;}
div#headerArea ul#top_right a.request:hover{color:#ffffff; font:bold 11px/41px Arial, Helvetica, sans-serif; text-decoration:underline; background-color:inherit;}


/*--------------------- direction --------------------------*/
div#direction{background:url(../images/direction_bg.png) 0 0 no-repeat;  width:183px; height:263px;  position:absolute; top:49px; left:740px; padding:121px 0 0 30px; line-height:23px;}
div#direction h3{background:url(../images/direction.png) 0 0 no-repeat; font-size:0; line-height:0; text-indent:-20000px; height:30px;}
div#direction h4.address1{background:url(../images/address01.png) 0 0 no-repeat; font-size:0; line-height:0; text-indent:-20000px; height:20px;}
div#direction h4.address2{background:url(../images/address02.png) 0 0 no-repeat; font-size:0; line-height:0; text-indent:-20000px; height:25px;}
div#direction h4.address3{background:url(../images/address03.png) 0 0 no-repeat; font-size:0; line-height:0; text-indent:-20000px; height:30px;}
div#direction h4.address4{background:url(../images/address04.png) 0 0 no-repeat; font-size:0; line-height:0; text-indent:-20000px; height:30px;}
div#direction p.phn_number{background:url(../images/phone_number.png) 0 0 no-repeat; font-size:0; line-height:0; text-indent:-20000px; height:35px;}
div#direction p.fax{background:url(../images/fax.png) 0 0 no-repeat; font-size:0; line-height:0; text-indent:-20000px; height:35px;}
div#direction p.mail{background:url(../images/mail.png) 0 0 no-repeat; font-size:0; line-height:0; text-indent:-20000px; height:23px; display:block;}
div#direction p.mail a{background:url(../images/mail_id.png) 0 0 no-repeat; font-size:0; line-height:0; text-indent:-20000px; height:23px; display:block; margin:0 0 0 45px;}
div#direction p.mail a:hover{background:url(../images/mail_id_hover.png) 0 0 no-repeat; font-size:0; line-height:0; text-indent:-20000px; height:23px; display:block; margin:0 0 0 45px;}


/*------------------------- BANNER -------------------------*/
div#bannerArea{background:url(../images/banner_areabg.gif) 0 0 repeat-x;  height:273px;}
div#bannerArea div#banner_back{background:url(../images/banner_back.gif) 0 0 no-repeat; width:960px; height:273px; margin:0 auto; padding:7px 0 0 0;}
div#bannerArea div#banner_back div#banner{background:url(../images/banner.png) 0 0 repeat; width:704px; height:240px; padding:10px;}

	
/*------------------------- MENU ------------------------------------*/
div#menuarea{background:#ffffff; background-color:inherit;}
div#menuarea ul.menu{width:960px; margin:0 auto; padding:23px 0 0 0; height:64px;}
div#menuarea ul.menu li{text-decoration: none; float:left; font:normal 11px/19px Tahoma, Geneva, sans-serif; color:#C2C2C2; text-align:center;}
div#menuarea ul.menu li a{padding:0px 80px; float:left; display:block; width:auto;}
div#menuarea ul.menu li a:hover{}
div#menuarea ul.menu li a.active{}

div#menuarea ul.menu li a.home{background:url(../images/home.gif) 45% 0 no-repeat; height:15px;}
div#menuarea ul.menu li a.home:hover{background:url(../images/home.gif) 45% -15px no-repeat;}
div#menuarea ul.menu li a.home_active{background:url(../images/home.gif) 45% -15px no-repeat; height:15px;}

div#menuarea ul.menu li a.about{background:url(../images/aboutus.gif) 55% 0 no-repeat; height:16px;}
div#menuarea ul.menu li a.about:hover{background:url(../images/aboutus.gif) 55% -16px no-repeat;}
div#menuarea ul.menu li a.about_active{background:url(../images/aboutus.gif) 55% -16px no-repeat; height:16px;}

div#menuarea ul.menu li a.services{background:url(../images/services.gif) 60% 0 no-repeat; height:15px;}
div#menuarea ul.menu li a.services:hover{background:url(../images/services.gif) 60% -15px no-repeat;}
div#menuarea ul.menu li a.services_active{background:url(../images/services.gif) 60% -15px no-repeat; height:15px;}

div#menuarea ul.menu li a.portfolio{background:url(../images/portfloio.gif) 55% 0 no-repeat; height:16px;}
div#menuarea ul.menu li a.portfolio:hover{background:url(../images/portfloio.gif) 55% -16px no-repeat;}
div#menuarea ul.menu li a.portfolio_active{background:url(../images/portfloio.gif) 55% -16px no-repeat; height:16px;}

div#menuarea ul.menu li a.lz{background:url(../images/learningzone.gif) 80% 0 no-repeat; height:19px;}
div#menuarea ul.menu li a.lz:hover{background:url(../images/learningzone.gif) 80% -19px no-repeat;}
div#menuarea ul.menu li a.lz_active{background:url(../images/learningzone.gif) 80% -19px no-repeat; height:19px;}

div#menuarea ul.menu li a.contact{background:url(../images/contactus.gif) 45% 0 no-repeat; height:15px;}
div#menuarea ul.menu li a.contact:hover{background:url(../images/contactus.gif) 45% -15px no-repeat;}
div#menuarea ul.menu li a.contact_active{background:url(../images/contactus.gif) 45% -15px no-repeat; height:15px;}

.menu_divider{background:url(../images/menu_divider.gif) 0 0 no-repeat;}

/*------------------------- BODY CONTAINER -------------------------*/
div#Container{background:url(../images/content_bottom.png) 0 95% no-repeat; width:1003px; margin:0 auto;}
div#bodyContainerArea{background:url(../images/content_top.jpg) 50% 0 no-repeat;}


/*------------------------- BODY CONTAINER - TOP PANEL -------------------------*/
div#content{width:930px; margin:0 auto; padding:25px 15px 40px 15px;}
div#content p{width:930px;}
	
div#box_area{width:930px; overflow:hidden;}	
div#box_area div#box1{background:url(../images/box_bg.png) 0 0 no-repeat; width:231px; height:353px; float:left;}
div#box_area div#box2{background:url(../images/box_bg.png) 0 0 no-repeat; width:231px; height:353px; margin:0 2px; float:left;}
div#box_area div#box3{background:url(../images/box_bg.png) 0 0 no-repeat; width:231px; height:353px; float:left;}
div#box_area div#box4{background:url(../images/box_bg.png) 0 0 no-repeat; width:231px; height:353px; float:right;}

div#box_area div#box1 h3,
div#box_area div#box2 h3,
div#box_area div#box3 h3,
div#box_area div#box4 h3{color:#ffffff; font:normal 20px/18px Tahoma, Geneva, sans-serif; padding:28px 0 0 37px; background-color:inherit;}
	
div#box_area div#box1 ul,
div#box_area div#box2 ul,
div#box_area div#box3 ul,
div#box_area div#box4 ul{padding:38px 0 0 37px;}

div#box_area div#box1 ul li,
div#box_area div#box2 ul li,
div#box_area div#box3 ul li,
div#box_area div#box4 ul li{background:url(../images/bullet.gif) 0 0 no-repeat; padding:0 0 0 26px; color:#4E4E4E; font:normal 11px/23px Arial, Helvetica, sans-serif;}
	
div#box_area div#box1 p.affordable{background:url(../images/affordable.png) 0 0 no-repeat; width:193px; height:65px; font-size:0; line-height:0; text-indent:-20000px; margin:50px 0 0 37px;}
div#box_area div#box2 p.popular{background:url(../images/popular.png) 0 0 no-repeat; width:193px; height:65px; font-size:0; line-height:0; text-indent:-20000px; margin:5px 0 0 37px;}
div#box_area div#box3 p.customer{background:url(../images/customers.png) 0 0 no-repeat; width:203px; height:65px; font-size:0; line-height:0; text-indent:-20000px; margin:50px 0 0 27px;}
div#box_area div#box4 p.life{background:url(../images/life.png) 0 0 no-repeat;  width:207px; height:65px; font-size:0; line-height:0; text-indent:-20000px; margin:73px 0 0 22px;}
	
div#box_area div.button{width:198px; margin:0 auto; padding:13px 0 0 0;}
div#box_area div.button p{background:url(../images/button.png) 0 0 no-repeat; width:99px; height:35px; float:left; text-align:center;}
div#box_area div.button p a.read{color:#525252; font:normal 15px/28px Arial, Helvetica, sans-serif;}
div#box_area div.button p a.read:hover{color:#C60000; font:normal 15px/28px Arial, Helvetica, sans-serif;}
	
div#box_area div.button p a.quote{color:#C60000; font:normal 15px/28px Arial, Helvetica, sans-serif;}
div#box_area div.button p a.quote:hover{color:#525252; font:normal 15px/28px Arial, Helvetica, sans-serif;}
	
	
/*------------------------- BODY CONTAINER - BOTTOM PANEL -------------------------*/
div#content_bottom{width:930px; padding:40px 0 0 0;}

div#leftpanel{width:580px; float:left;}
div#rightpanel{width:330px; float:right;}

div#leftpanel h1{font:normal 25px/18px Arial, Helvetica, sans-serif; color:#B01513; padding:0 0 32px 0;}
div#leftpanel p{width:570px; font:normal 13px/20px Arial, Helvetica, sans-serif; color:#4E4E4E;	padding:0 0 25px 0;}
div#leftpanel p span{color:#B70000;}


/*------------------------- BODY CONTAINER - RIGHT PANEL -------------------------*/
div#rightpanel h2{ color:#B90200;  font:normal 17px/18px Arial, Helvetica, sans-serif; padding:0 0 27px 0;}
div#rightpanel p{width:320px;}
div#rightpanel form{}
div#rightpanel form label.newsletter{background:url(../images/newsletter.jpg) 0 0 no-repeat; width:281px; height:30px; display:block; margin:26px 0 0 0; padding:11px 0 0 45px;}
.input_text{color:#000000; font:normal 12px/20px Arial, Helvetica, sans-serif; border:0; width:230px; height:20px; background:none; background-color:inherit; outline:none; float:left;}
.newsletter_button{background:url(../images/newsletter_button.gif) 0 0 no-repeat; width:26px; height:26px; border:0; font-size:0; line-height:0; text-indent:-20000px; cursor:pointer; float:right; margin:0 15px 0 0;}
div#rightpanel p.subscribe{ background:url(../images/rss.jpg) 0 0 no-repeat;  padding:0 0 10px 40px; margin:28px 0 0 0; width:300px;}
div#rightpanel p.subscribe a{color:#4E4E4E; font:normal 17px/29px Arial, Helvetica, sans-serif;}
div#rightpanel p.subscribe a:hover{color:#4E4E4E; font:normal 17px/29px Arial, Helvetica, sans-serif; text-decoration:underline;}


/*------------------------- BODY CONTAINER - CONTENT INNER -------------------------*/
div#content_inner{width:930px; padding:40px 0 0 0;}
div#content_inner h1{font:normal 25px/18px Arial, Helvetica, sans-serif; color:#B01513; padding:0 0 32px 0;}
div#content_inner h2{font:normal 18px/18px Arial, Helvetica, sans-serif; color:#4E4E4E; padding:0 0 20px 0;}
div#content_inner h3{font:normal 16px/18px Arial, Helvetica, sans-serif; color:#D00000; padding:20px 0 10px 0;}
div#content_inner p{width:930px; font:normal 13px/20px Arial, Helvetica, sans-serif; color:#4E4E4E;  padding:0 0 25px 0;}
div#content_inner p a,
div#content_inner p span{color:#D00000; text-decoration:none;}

div#content_inner ul.tech{background:url(../images/tech_bg.jpg) 0 0 no-repeat; padding:29px 0 50px 0;}
div#content_inner ul.tech li{background:url(../images/bullet.gif) 0 0 no-repeat; padding:0 0 0 25px;}
div#content_inner a{color:#D00000; text-decoration:underline;}
div#content_inner p a:hover,
div#content_inner a:hover{color:#000000; text-decoration:underline; background-color:inherit;}

div#content_inner h4{ font:bold 15px/18px Arial, Helvetica, sans-serif; color:#4E4E4E; padding:0px 0 10px 0;}

div#content_inner ul.list{padding:5px 0 35px 0;}
div#content_inner ul.list li{background:url(../images/bullet.gif) 0 0 no-repeat; padding:0 0 0 25px;}

div#content_inner h5{background:url(../images/bullet2.gif) 0 0 no-repeat; padding:0 0 15px 25px; color:#D00000; font:bold 12px/18px Arial, Helvetica, sans-serif;}


/*------------------------- CONTACT AREA -------------------------*/
div#contact_area{width:930px; padding:40px 0 0 0;}
div#contact_form{width:500px; float:left;}
div#contact_detail{width:400px; float:right;}
/* div#contact_form h1{background:url(../images/mail.gif) 50% 0 no-repeat; font:normal 25px/30px Arial, Helvetica, sans-serif; color:#B01513; padding:0 0 23px 0; width:380px;} */
div#contact_form h1{font:normal 25px/30px Arial, Helvetica, sans-serif; color:#B01513; padding:0 0 23px 0; width:380px;}
div#contact_form h2{font:normal 13px/18px Arial, Helvetica, sans-serif; color:#4E4E4E;}
div.formarea{margin:23px 0 16px 0;}
div.formarea p.form_top{background:url(../images/form_top.png) 0 0 no-repeat; width:469px; height:17px; font-size:0; line-height:0; text-indent:-20000px;}
div.formarea p.form_bottom{background:url(../images/form_bottom.png) 0 0 no-repeat; width:469px; height:24px; font-size:0;line-height:0; text-indent:-20000px;}

div.form_box{background:url(../images/form_bg.png) 0 0 repeat-y; width:429px; padding:0 20px;}
div.form_box form div.options{width:429px; padding:0 0 21px 0;}

div.options div{float:left; width:190px; line-height:10px; height:24px;}
div.options div span{color:#CACACA; font:italic 10px/12px Arial, Helvetica, sans-serif; display:block;}
div.options label{float:right; width:237px; display:block;}
div.options label input.inputbox{width:235px; padding:3px; font:normal 12px/20px Arial, Helvetica, sans-serif; border:#E7E7E7 solid 1px; background:url(../images/input_bg.gif) 0 0 repeat-x; height:18px;}
div.options label textarea{width:235px; padding:3px; font:normal 12px/20px Arial, Helvetica, sans-serif; border:#E7E7E7 solid 1px; background:url(../images/input_bg.gif) 0 0 repeat-x #FCFCFC;}
div.options label input.button{width:auto; height:24px; border:#ED736A solid 1px; background:#D60000; font:bold 13px/14px Arial, Helvetica, sans-serif; color:#ffffff; cursor:pointer; padding:3px 5px;}
div.options label input.button:hover{width:auto; height:24px; border:#000000 solid 1px; background-color:#D50000; font:bold 13px/14px Arial, Helvetica, sans-serif; color:#ffffff; cursor:pointer; background-color:inherit;}

div#contact_form h6{font:normal 11px/18px Arial, Helvetica, sans-serif; font-style:italic; color:#A2A2A2; padding:0 0 0 28px;}	
div#contact_form h6 a{color:#DB0000;}
div#contact_form h6 a:hover{color:#DB0000; text-decoration:underline;}

div#contact_detail h2{color:#B90200;  font:normal 17px/15px Arial, Helvetica, sans-serif; padding:0 0 20px 0;}
div#contact_detail p{width:400px;}

.address{background:url(../images/address_bg.gif) 0 0 no-repeat; margin:11px 0 0 0; padding:30px 0 0 0;	width:400px;}
.address div.text{width:100px; color:#000000; float:left; background-color:inherit;}
.address ul{float:right; width:300px; display:block; padding:0 0 30px 0;}


/*-------------------------- REQUEST A QUOTE -----------------------------------------*/
div#contact_form h3{font:normal 25px/30px Arial, Helvetica, sans-serif; color:#B01513; padding:0 0 23px 0;}


/*--------------------------- PORTFOLIO -------------------------------*/
div#portfolio{width:941px; padding:40px 0 0 0;}
div#portfolio div.porfolio{background:url(../images/portfolio_bg.png) 0 0 no-repeat; width:927px; padding:19px 0 0 14px; margin:0 0 38px 0;}
div#portfolio div.project_screenshot{width:594px; height:266px; float:left;}
div#portfolio div.project_detail{width:204px; float:right; margin:0 113px 0 0;}
/* div#portfolio div.project_detail h1{color:#D30008; font:normal 18px/20px Arial, Helvetica, sans-serif;  padding:0 0 26px 0;} */
div#portfolio div.project_detail h1{color:#D30008; font:normal 18px/20px Arial, Helvetica, sans-serif;  padding:0 0 6px 0;} 
/* div#portfolio h1.title{font:normal 25px/18px Arial, Helvetica, sans-serif; color:#B01513; padding:0 0 32px 0;} */
div#portfolio h1.title{font:normal 25px/18px Arial, Helvetica, sans-serif; color:#B01513; padding:0 0 0px 0;}
div#portfolio div.project_detail p{width:204px;	display:block;}
div#portfolio div.project_detail ul{padding:30px 0 0 0;}
div#portfolio div.project_detail ul li span{color:#CA050D; background-color:inherit;}
div#portfolio div.project_detail a{color:#CA050D; text-decoration:underline; font-size:13px; background-color:inherit;}
div#portfolio div.project_detail div.role{overflow:auto;height:95px;width:235px}

a.get_quote{color:#C60000; font:normal 15px/37px Arial, Helvetica, sans-serif; background:url(../images/get_quote.png) 0 0 no-repeat; width:117px; height:49px; display:block; margin:11px 0 0 760px; text-align:center; cursor:pointer;}
a.get_quote:hover{color:#525252; font:normal 15px/37px Arial, Helvetica, sans-serif;}


/*---------------------- PAGINATION -------------------------*/
#portfolio_pagination{}
#portfolio_pagination ul{font-size:12px; text-align:center}
#portfolio_pagination li{list-style-type: none; display: inline; padding-bottom: 1px;}
#portfolio_pagination a, .portfolio_pagination a:visited{background:#ffffff; color:#595959; padding:2px 6px; text-decoration:none;}
#portfolio_pagination a:hover, .portfolio_pagination a:active{background:#CA050D; color:#ffffff; padding:2px 6px; text-decoration:none;}
#portfolio_pagination a.currentpage{background:#CA050D; color:#ffffff; padding:2px 6px; cursor: default; text-decoration:none;}
#portfolio_pagination a.disablelink, #portfolio_pagination a.disablelink:hover{background-color: white; cursor: default; color: #929292; border-color: #929292; font-weight: normal !important; text-decoration:none;}
#portfolio_pagination a.prevnext{}


/*------------------------- FOOTER AREA -------------------------*/
div#footerArea{width:960px;	height:76px; margin:0 auto; color:#AAA9A9; text-align:center; padding:45px 0 0 0;}
div#footerArea p{font:normal 11px/25px Arial, Helvetica, sans-serif; color:#6F6F6F;}
div#footerArea p a{color:#656565; padding:0 3px;}
div#footerArea p a:hover{color:#000000; padding:0 3px;}