@charset "utf-8";
/* 

Company         : Catchcolors
Description     : Website design, web development, CMS development and SEO
Auther   		: Shafeer UI
Coding & Design : Faisal N

 */

img {
	border:none;
}

a:focus, a:active {
	outline:none;
}

#main_wrapper{
	width:980px; 
	height:auto;
	margin:0 auto;
	padding:0;
}

* html form, form {
	margin:0;
	padding:0;
}

/* ------------
			For IE 
					--------------*/
					
* html .icon_box, .icon_box ul li, .icon_box .v_more, h2.toggle_bttn, #top_header .logo, #top_header .nav, #left_container .left_cont, #right_container, #folio_container ul li.gap, #logo_container ul li, #print_container ul li, #right_box, #left_box, .srv_box h6, #right_container .s_form .submt   {
	display:inline;
}

/* ------------
			Top Header Section 
					--------------*/
					
#top_header{
	width:980px;
	height:100px;
	float:left;
}

#top_header .logo{
	width:177px;
	height:53px;
	float:left;
	margin:21px 0 0 24px;
}

#top_header .nav{
	width:500px;
	height:38px;
	float:left;
	margin:38px 0 0 250px;
}

#top_header .nav ul {
	margin:0;
	padding:0;
	list-style:none;
}

#top_header .nav ul li {
	width:100px;
	height:38px;
	text-align:center;
	float:left;
}

#top_header .nav ul li a {
	font: normal 13px/38px Arial, Helvetica, sans-serif;
	color:#fff;
	text-decoration:none;
}

#top_header .nav ul li a:hover, #top_header .nav ul li a:active, #top_header .nav ul li a.act {
	background:url(../images/nav_bg.jpg) top left no-repeat;
	display:block;
}

/** html #top_header .nav ul li a:hover{
	display:block;
	width:100px;
	height:38px;
}*/
	
#banner {
	width:980px; 
	height:324px;
	float:left;
}

#inner_banner {
	width:980px; 
	height:180px;
	float:left;
	margin:0 0 50px 0;
}

/* ------------
			Icon Box Section 
					--------------*/
					
#middle_banner {
	width:980px; 
	height:auto;
	float:left;
}

.icon_box {
	width:220px;
	height:auto;
	background:url(../images/gray_line.gif) top right no-repeat;
	margin:18px 0 8px 25px;
	padding:0;
	float:left;
}

.icon_box img {
	float:left;
	border:none;
}

.icon_box ul {
	margin:0;
	padding:0;
	list-style:none;
}

.icon_box ul li {
	width:200px;
	height:20px;
	float:left;
	background:url(../images/bullt_red.gif) 0 13px no-repeat;
	font:normal 14px/20px Arial, Helvetica, sans-serif;
	color:#CCCCCC;
	padding:8px 0 0 20px;
}
.icon_box ul li.org {
	background:url(../images/bullt_org.gif) 0 13px no-repeat;
}

.icon_box ul li.yllw {
	background:url(../images/bullt_yllw.gif) 0 13px no-repeat;
}

.icon_box .v_more {
	width:90px;
	height:22px;
	float:left;
	margin:10px 0 0 100px;
	background:url(../images/more_arrw.gif) right top no-repeat;
}

.icon_box .v_more a {
	font:normal 12px/22px Arial, Helvetica, sans-serif;
	color:#03C3F3;
	text-decoration:none;
}

.icon_box .v_more a:hover {
	color:#fff;
	text-decoration:underline;
}

/* ------------
			Toggle Section 
					--------------*/
h2.toggle_bttn {
	width:198px;
	height:38px;
	background:url(../images/toggle_bttn.png) top left no-repeat;
	float:left;
	margin:0 0 0 782px;
}
h2.toggle_bttn a{
	font: bold 13px/38px Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	display:block;
	text-decoration:none;
}
h2.toggle_bttn a:hover {
	color:#FFCC00;
}
h2.active {
	background:url(../images/toggle_bttn2.png) 0 0 no-repeat;
}

#slickbox{ 
	width:974px; 
	height:210px;
	float:left;
	padding:20px 0px 20px 0px;
	border-bottom:3px solid #2E2E2E;
	border-right:3px solid #2E2E2E;
	border-left:3px solid #2E2E2E;
	background:#4F4F4F;
}

* html #slickbox{ 
	width:974px;
	height:160px;
	padding:20px 0 0 0;
	}
.toggle_inner-box {
	width:264px;
	height:210px;
	float:left;
	margin:0;
	padding:0 30px 0 30px;
	border-right:1px solid #666;
}

* html .toggle_inner-box {
}

.toggle_inner-box p{
	font: normal 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#FFF;
	margin:0;
}

.toggle_inner-box .mail {
	width:255px;
	height:27px;
	clear:left;
	margin:5px 0 0 0;
	text-align:left;
}

.toggle_inner-box .mail a {
	font: normal 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#999;
}

.toggle_inner-box .mail a:hover {
	color:#fff;
	text-decoration:none;
}

.toggle_inner-box .mail img {
	float:left;
	padding-right:10px;
	border:none;
}
.toggle_inner-box h4{
	font: normal 13px/24px Arial, Helvetica, sans-serif;
	color:#999;
	margin:0;
}

.toggle_inner-box h3 {
	font: normal 17px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#CCCCCC;
	margin:0 0 10px 0;
}

/** html .toggle_inner-box h3{
	display:inline;
	margin:0 0 10px 0;
	padding:0;
}*/

.toggle_inner-box .in_box{
	width:252px;
	height:22px;
	background:transparent url(../images/input_bg2.png) 0 0 no-repeat;
	font: normal 12px/24px Arial, Helvetica, sans-serif;
	color:#666;
/*	border: 3px solid #4B4B4B;*/
	border:none;
	margin:0 0 8px 0;
	padding:4px 0 0 3px;
}


* html .toggle_inner-box .in_box{
	height:24px;
	padding:0;
	margin:0 0 8px 0;
	display:inline;
}

.toggle_inner-box label{
	font: normal 13px/24px Arial, Helvetica, sans-serif;
	color:#333;
	margin:0;
}

.toggle_inner-box .txt_box{
	width:252px;
	height:62px;
	background:url(../images/mssg_bg2.png) 0 0 no-repeat;
/*	border: 3px solid #4B4B4B;*/
	font: normal 12px/24px Arial, Helvetica, sans-serif;
	color:#666;
	border:none;
	margin:0 0 8px 0;
	padding:0 0 0 3px;
}

.toggle_inner-box .sub_bttn{
	width:74px;
	height:30px;
	border:none;
/*	border: 3px solid #4B4B4B;*/
	font: bold 12px Arial, Helvetica, sans-serif;
	color:#333;
	margin:0 0 8px 0;
	padding:0;
}

.no-border { border:none;}

/* ------------
			Text Content Section 
					--------------*/

#text_container {
	width:980px; 
	height:auto;
	float:left;
	margin:2px 0 20px 0;
	
}


.slideshow { height: 120px; width: 330px; margin: auto }
.slideshow img { padding: 0px; /*border: 1px solid #ccc;*/ background-color: #eee; }

/* ----- Left Content Section --------*/

#left_container {
	width:580px;
	margin:0;
	padding: 0;
	float:left; 
}

/** html #left_container {
	display:inherit;
}
*/
.left_cont {
	width:520px;
	float:left;
	clear:left;
	margin:0 0 20px 0;
	padding: 0 29px 0 30px;
	border-right:1px solid #DBDBDB;
}
* html #left_container .left_cont{
	overflow:hidden;
	clear:left;
	}
	
#left_container h2 {
	font: normal 21px/30px Arial, Helvetica, sans-serif;
	color:#0E3356;
	text-align:left; 
	width:520px;
	float:left;
	margin:0 0 20px 0;
	border-bottom:1px solid #DBDBDB;
}

#left_container p {
	font: normal 12px/18px Arial, Helvetica, sans-serif;
	color:#666;
	/*width:520px;*/
	padding:0;
	margin:0;
	clear:left;
	text-align:left;
}

#left_container p a {
	color:#377DB9;
	text-decoration:none;
}

#left_container p a:hover {
	color:#333;
	text-decoration:underline;
}

* html #left_container  p{ /* IE 3px jog hack*/ height: 1%;}

#left_container .more_link a{
	font: normal 11px/18px "Trebuchet MS", Arial, Helvetica, sans-serif;
	width:75px;
	float:left;
	margin:20px 0 0 445px;
	padding:0;
	color:#CF2C25;
	text-align:right;
	text-decoration:none;
}

/*--------
		Service Page
			------*/
.srv_box {
	width:520px;
	height:auto;
	float:left;
	margin:10px 0;
}
.srv_box .serv_icon {
	width:150px;
	height:140px;
	float:left;
}

.srv_box .serv_txt {
	width:350px;
	height:140px;
	float:left;
	padding:0 0 0 20px;
	border-bottom:1px solid #ccc;
}

.srv_box .serv_txt h5{
	font:normal 17px/30px Arial, Helvetica, sans-serif;
	color:#235988;
	margin:0;
}

.srv_box h6 {
	width:75px;
	height:16px;
	float:left;
	background:#EC8700;
	margin:0 0 0 445px;
	padding:0;
	text-align:center;
}
.srv_box h6 a {
	color:#fff;
	font:normal 11px/16px Arial, Helvetica, sans-serif;
	text-decoration:none;
	display:block;
	
}

.srv_box h6 a:hover {
	color:#333;
	}
/*--------
		Service Page Ends here
			------*/
* html #left_container .more_link a {
	display:inline;
	}
	
#left_container .more_link a:hover {
	color:#154F82;
	text-decoration:underline;
}

.client_sect {
	width:520px;
	float:left;
	margin:0 0 20px 0;
	padding: 0 30px 0 30px;
	border-right:1px solid #DBDBDB;
}

* html #left_container .client_sect{
	overflow:hidden;
	clear:left;
}
	
.client_sect ul {
	width:520px;
	height:180px;
	margin:0; 
	padding:0;
	list-style:none;
}

.client_sect ul li {
	width:245px;
	height:80px;
	float:left;
	margin:10px 0 0 0;
	text-align:center;
}

.client_sect ul li.space{
	margin-left:30px;
	
}

.client_sect .l_box {
	width:250px;
	background:url(../images/client_bg.jpg) 0 0 no-repeat;
	height:145px;
	float:left;
	margin:20px 20px 20px 0;
}

.client_sect .l_box img {
	padding:17px 14px;
	border:0;
}
.client_sect .nm {
	margin-right:0;
}

/*.client_sect .nm img {
	padding:17px 14px;
	border:0;
}*/

#left_container .h_light {
	width:520px;
	float:left;
	margin:0 0 20px 0;
	padding: 0 30px 0 30px;
	border-right:1px solid #DBDBDB;
}

#left_container .h_light ul {
	margin:0;
	padding:0;
	list-style:none;
}

#left_container .h_light ul li {
	width:470px;
	height:26px;
	font:normal 14px/26px Arial, Helvetica, sans-serif;
	color:#333;
	background:url(../images/tick.jpg) 0 0 no-repeat;
	float:left;
	margin:0 0 15px 0;
	padding:0 15px 0 35px;
	text-align:left;
}

/* ----- Right Content Section --------*/

#right_container {
	width:368px;
	height:auto;
	margin-left:30px;
	padding:0;
	float:left;
}

* html #right_container{
	width:369px;
	float:left;
}
	
.right_cont {
	width:338px;
	height:auto;
	padding: 0 30px 0 0;
	float:left;
	margin:0;
}

#right_container h2 {
	font: normal 21px/30px Arial, Helvetica, sans-serif;
	color:#0E3356;
	margin:0 0 20px 0;
	text-align:left; 
	width:338px;
	border-bottom:1px solid #DBDBDB;
}

#right_container .recent_wrk {
	width:308px;
	height:158px;
	background:url(../images/recent_wrk_bg.jpg) 0 0 no-repeat;
	margin:0 0 30px 0;
	padding:11px 12px;
	float:left;
}

#right_container .testimnl{
	width:316px;
	height:335px;
	background:url(../images/testimonial_bg.jpg) 0 0 no-repeat;
	margin:20px 0 0 10px;
	float:left;
}

#right_container .testimnl h3 {
	font: normal 21px/30px Arial, Helvetica, sans-serif;
	color:#0E3356;
	margin:20px 0 20px 0;
	text-align:left; 
	width:316px;
/*	border-bottom:1px solid #DBDBDB;*/
}

#right_container .testimnl h6 {
	font: normal 14px/22px Arial, Helvetica, sans-serif;
	color:#666;
	margin:0 0 20px 0;
	text-align:left; 
	padding:40px 40px 0 40px;

}

#right_container .testimnl p {
	font: normal 14px/22px Arial, Helvetica, sans-serif;
	color:#666;
	margin:0;
	text-align:right;
	padding:0 30px 0 0;
}

#right_container .f_ways {
	width:330px;
	height:auto;
	background:url(../images/5_ways.jpg) 0 0 no-repeat;
	margin:0 0 30px 0;
	padding:0;
	float:left;
}

#right_container .f_ways ul {
	margin:0;
	padding:90px 0 0 60px;
	list-style:none;
}

#right_container .f_ways ul li {
	width:250px;
	height:40px;
	list-style:none;
	border-bottom:1px solid #DFDFDF;
	font:normal 16px/40px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#333;
}

#right_container .s_client {
	width:330px;
	height:auto;
	margin:0 0 30px 0;
	padding:0;
	float:left;
}

#right_container .s_client h6 {
	font: bold 17px/30px Arial, Helvetica, sans-serif;
	color:#0E3356;
	margin:0;
}

#right_container .s_client img {
	width:330px;
	height:auto;
	float:left;
}

#right_container .s_form {
	width:270px;
	height:auto;
	margin:0 0 30px 0;
	padding:30px;
	border:1px solid #D3D3D3;
	background:#F5F5F5;
	float:left;
}

#right_container .s_form input {
	width:260px;
	font: normal 14px/20px Arial, Helvetica, sans-serif;
	color:#999;
	margin:0 0 15px 0;
	padding:8px 5px;
	background:#DDDDDD;
	border:none;
}

#right_container .catch_bttn {
	width:150px;
	height:36px;
	float:left;
	margin:0;
}
#right_container .s_form textarea {
	width:260px;
	height:70px;
	font: normal 14px/20px Arial, Helvetica, sans-serif;
	color:#999;
	margin:0;
	padding:8px 5px;
	background:#DDDDDD;
	border:none;
}

#right_container .s_form .submt {
	width:75px;
	height:20px;
	float:left;
	color:#fff;
	margin:0 0 0 195px;
	padding:0;
}
/* ------------
			Conatct page  
					--------------*/
					
#left_box {
	width:489px;
	height:auto;
	float:left;
	margin:0 0 0 30px;
	padding:0 45px 0 0;
	border-right:1px solid #DBDBDB;
}

#left_box h2 {
	font: normal 21px/30px Arial, Helvetica, sans-serif;
	color:#0E3356;
	margin:0 0 20px 0;
	text-align:left; 
}		

#left_box .form_box {
	width:380px;
	height:auto;
	padding:30px;
	margin:20px 0;
	background:#F8F8F8;
	border:1px solid #E0E0E0;
}

#left_box .form_box input {
	width:370px;
	height:20px;
	background:#fff;
	padding:10px 5px;
	margin:0 0 20px 0;
	border:1px solid #ccc;
}

#left_box .form_box .submt {
	width:227px;
	height:51px;
	margin:0;
	padding:0;
}

#left_box .form_box textarea {
	width:370px;
	height:120px;
	background:#fff;
	padding:10px 5px;
	margin:0 0 20px 0;
	border:1px solid #ccc;
}

#left_box .form_box label {
	font: bold 12px/20px Arial, Helvetica, sans-serif;
	color:#000;
	padding-left:5px;
	text-align:left;
	}
#left_box p {
	font: normal 13px/18px Arial, Helvetica, sans-serif;
	color:#666;
	padding:0;
	margin:0;
	clear:left;
	text-align:left;
}

#right_box {
	width:340px;
	height:auto;
	float:left;
	margin:0 0 0 45px;
	padding:0 30px 0 0;
}

#right_box .g_map {
	width:298px;
	height:218px;
	clear:left;
	padding:0 ;
	margin:0;
}

#right_box  h1 {
	font: bold 19px/20px Arial, Helvetica, sans-serif;
	color:#1A5C99;
	margin:0 0 15px 0;
	text-align:left;
	padding:0;
}	

#right_box p {
	font: normal 13px/20px Arial, Helvetica, sans-serif;
	color:#666;
	padding:0;
	margin:0;
	clear:left;
	text-align:left;
}

#right_box .mail2 {
	width:140px;
	height:27px;
	float:left;
	margin:10px 10px 0 0;
	text-align:left;
}

#right_box .mail2 a {
	font: normal 13px/20px "Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#1B609E;
}

#right_box .mail2 a:hover {
	color:#666;
	text-decoration:none;
}

#right_box .mail2 img {
	float:left;
	padding-right:5px;
	border:none;
}

#right_box hr {
	width: 340px;
	margin:30px 0;
	float:left;
	height:1px;
	background:#E0E0E0;
	border:0;
}
/* ------------
			Recent Work Slideshow 
					--------------*/
					
					
#slideshow {
    position:relative;
    height:158px;
}

#slideshow DIV {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    height:158px;
    background-color: #E0E0E0;
}

* html #slideshow DIV{
	height:150px;
}
#slideshow DIV.active {
    z-index:10;
    opacity:1.0;
}

#slideshow DIV.last-active {
    z-index:9;
}

#slideshow DIV IMG {
    height: 158px;
    display: block;
    border: 0;
    margin-bottom: 10px;
}

* html #slideshow DIV IMG {
	display:inline;
	 border: 0;
	margin:0;
}


/* --------------
			Folio thumb style
			-------------- */

.projectsList {
overflow: hidden;
}

.projectsList .projectItem {
float: left;
height: 190px;
background:url(../images/gallery_bg.jpg) 0 0 no-repeat;
position: relative;
overflow: hidden;
margin: 5px;
}

.projectsList.big .projectItem {
width: 440px;
}

.projectsList.small .projectItem {
width: 150px;
}

.projectsList .projectItem a {
color: #fff;
text-decoration: none;
display: block;
height: 167px;
margin:0 27px 23px 0;
border: 5px solid #ccc;
}

.projectsList.big .projectItem a {
width: 418px;
}

.projectsList.small .projectItem a {
width: 200px;
}

.projectsList .projectItem a:hover {
border-color: #666;
}

.projectsList .projectItem .projectTitle {
position: absolute;
height: 40px;
padding: 5px 10px;
background: #ccc;
background: rgba(255,255,255,0.7);
bottom: -50px;
left: 5px;
color: #000;
}

.projectsList.big .projectItem .projectTitle {
width: 380px;
}

.projectsList.small .projectItem .projectTitle {
width: 120px;
}

.projectsList .projectItem .projectTitle h3 {
font-size: 14px;
}

.projectsList .projectItem .projectTitle small {
font-size: 9px;
color: #666;
}

.projectsList.small .projectItem .projectTitle small {
display: none;
}

.projectsList .projectItem .projectThumbnail {
height: 150px;
}

.projectsList.big .projectItem .projectThumbnail {
width: 405px;
padding-left:5px;
}

.projectsList.small .projectItem .projectThumbnail {
width: 200px;
}

/* ------------
			Portfolio Section 
					--------------*/
					
#folio_container {
	width:920px;
	height:auto;
	float:left;
	margin:0;
	padding:0 30px;
}

#folio_container ul {
	margin:0;
	padding:0;
	list-style:none;
}

#folio_container ul li {
	width:405px;
	height:156px;
	float:left;
	padding:11px 27px 23px 13px;
	margin:25px 0;
	background:url(../images/gallery_bg.jpg) 0 0 no-repeat;
}

#folio_container ul li a:hover img {
	opacity:0.7;
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;

}

#folio_container ul li.gap {
	margin-left:30px;
}	

/*----- Logo section ----*/

#logo_container {
	width:920px;
	height:auto;
	float:left;
	margin:0;
	padding:0 30px;
}

#logo_container ul {
	margin:0;
	padding:0;
	list-style:none;
}

#logo_container ul li {
	width:230px;
	height:148px;
	float:left;
	padding:10px 10px 27px 10px;
	margin:15px 18px;
	background:url(../images/logo_frame_bg.jpg)0 0 no-repeat;
}

#logo_container ul li a:hover img {
	opacity:0.7;
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;

}

#logo_container ul li.gap {
	margin-left:30px;
}

/*----- Print section ----*/

#print_container {
	width:920px;
	height:auto;
	float:left;
	margin:0;
	padding:0 30px;
}

#print_container ul {
	margin:0;
	padding:0;
	list-style:none;
}

#print_container ul li {
	width:330px;
	height:330px;
	float:left;
	padding:10px 10px 26px 10px;
	margin:15px 45px;
	background:url(../images/print_bg.jpg)0 0 no-repeat;
}

#print_container ul li a:hover img {
	opacity:0.7;
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;

}

#print_container ul li.gap {
	margin-left:30px;
}

/*----- Logo section ----*/

#banner_container {
	width:920px;
	height:auto;
	float:left;
	margin:0;
	padding:0 30px;
}

#banner_container ul {
	margin:0;
	padding:0;
	list-style:none;
}

#banner_container ul li {
	width:214px;
	height:146px;
	float:left;
	padding:36px 28px;
	margin:15px 0;
	background:url(../images/banner_bg.jpg)0 0 no-repeat;
}

#banner_container ul li a:hover img {
	opacity:0.7;
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;

}

#banner_container ul li.gap {
	margin-left:30px;
}


/* ------------
			Footer content Section 
					--------------*/
					
#footer {
	width:100%;
	height:260px;
	background:url(../images/footer_bg.jpg) 0 0 repeat-x;
	clear:both;
}

#f_cont {
	width:980px;
	height:260px;
	margin:0 auto;
}

#f_cont .location {
	width:295px;
	height:192px;
	margin:0;
	padding:10px 0 0 0;
	float:left;
}

#nav-footer {
	width:665px;
	height:172px;
	float:left;
	margin:20px 0 0 0;
	padding:0;
}

#nav-footer ul { margin:0; padding:0;}
#nav-footer ul li {
	list-style:none;
	margin:0 80px 0 0 ;
	font:normal 12px/20px Arial, Helvetica, sans-serif;
	width:136px;
	float:left;
	overflow:hidden;
}

* html #nav-footer ul li, #nav-footer  {
	display:inline;
}
#nav-footer ul li a {
	border-bottom:solid 1px #ccc;
	width:140px;
	text-decoration:none;
	display:block;
	margin:0;
	line-height:20px;
	color:#fff;
}
#nav-footer ul li ul {
	float:left;
	margin:10px 0 20px 0;
	padding:0;
}
#nav-footer ul li ul li {
	margin-left:0;
}


#nav-footer ul li ul li a {
	border:none;
	text-decoration:none;
	margin-left:0;
	font:normal 11px/20px Arial, Helvetica, sans-serif;
	color:#ccc;
	clear:left;
}

#nav-footer li li a:hover {
	color:#377DB9;
}

#f_cont .blue_strip {
	width:980px;
	height:50px;
	margin:0;
	background:url(../images/bttm_logo.jpg) 0 0 no-repeat;
	padding:0;
	clear:both;
}

#f_cont .blue_strip p {
	font:normal 11px/30px Arial, Helvetica, sans-serif;
	color:#999;
	width:305px;
	float:left;
	margin:0;
	text-align:left;
	padding:20px 0 0 155px;
}

#f_cont .blue_strip p a {
	color:#FFFFFF;
}

#f_cont .blue_strip p a:hover {
	color:#377DB9;
	text-decoration:none;
}

#f_cont .blue_strip .valid {
	width:187px;
	height:20px;
	float:left;
	padding:15px 0 0 280px;
}
#f_cont .blue_strip .valid img {
	float:left;
	}
#f_cont .blue_strip .valid a:hover img {
	opacity:0.7;
	filter: alpha (opacity=70);
	}