@charset "utf-8";

/*--------------------
20 April 2009
Copyright. z-index media.
--------------------*/


/*------------------
GLOBAL :
--------------------*/


	html, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, sub, sup, tt, var,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend {
		margin:0;
		padding:0;
		border:0;
		outline:0;
		font-weight:normal;
		font-style:normal;
		font-size:100%;
		font-family:inherit;
		vertical-align:baseline;
	}
	
	body {
		margin:0;
		padding:0;
		border:0;
		font:14px Arial, Helvetica, sans-serif;
		color:#666;
		background:url(../images/bg-body.jpg) repeat-x #d6d6d6;
	}
		
	a {
		text-decoration:none;	
		font-weight:normal;
	}
	
	li {
		list-style:none;
	}
	
/*	.pngfix {
		behavior:url(css/iepngfix.htc);
		}
*/

/*-------------------------
HEADER
-------------------------*/
	#header {
		width:960px;
		height:125px;
		margin:0 auto;
		}
		
		#header img {
			float:left;
			margin-top:25px;
			}
			
			#header .vacancy {
				width:135px;
				height:102px;
				float:right;
				vertical-align:top;
				}
				
				#header .vacancy img {
				margin-top:0;
					
					}
			
/*-------------------------
MENU - SUBPAGES
-------------------------*/					
ul#menu {
	float:right;
	margin-top:50px;
	}
	
	ul#menu li {
		display:inline;
		float:left;
		}
	
	ul#menu li a {
		display:inline-block;
		padding-left:10px;
		padding-right:10px;
		padding-top:3px;
		padding-bottom:10px;
		font:11px Arial, Helvetica, sans-serif;
		color:#999;
		}
		
		ul#menu li a:hover, ul#menu li a.active {
			color:#ccc;
			background:url(../images/bg-menu.jpg) center no-repeat;
			overflow:visible;
			}
		
		ul#menu li a.home:hover, ul#menu li a.homeactive {
			background:url(../images/bg-menu-home.jpg) center no-repeat;
			}
		
		ul#menu li a.quote:hover, ul#menu li a.quoteactive {
			color:#ccc;
			background:url(../images/bg-menu-request-quote.jpg) center no-repeat;
			}
			
		
/*-------------------------
BANNER
-------------------------*/	
		
	#banner-wp {
		height:480px;
		margin:0 auto;
		background:url(../images/bg-index-banner.jpg) repeat-x;
		}
		
	#banner {
		width:960px;
		height:280px;
		margin:0 auto;
		}
		
		#banner .banner-left {
			width:400px;
			height:280px;
			float:left;
			}
			
			.banner-left h1 {
				font: 14px Arial, Helvetica, sans-serif;
				color:#666;
				margin-top:30px;
				}
			
				.banner-left a {
				color:#000000;
				padding-bottom:1px;
				}
				
				.banner-left a:hover {
				background:url(../images/underline-z.gif) bottom no-repeat;
				}
				
				.banner-left a.solutions:hover {
				background:url(../images/underline-solutions.gif) bottom no-repeat;
				}
				
				.banner-left a.portfolio:hover {
				background:url(../images/underline-portfolio.gif) bottom no-repeat;
				}
				
				.banner-left a.request:hover {
				background:url(../images/underline-request.gif) bottom no-repeat;
				}
			
		.banner-right {
			width:560px;
			height:280px;
			float:left;
			}
			
			.banner-right img {
				float:right;
				}
				
		#slider-homepage {
			width:960px;
			height:150px;
			margin:0 auto;
			background:url(../images/bg-slider.jpg) repeat-x;
			}
			
			#slider-homepage .btn{
				width:27px;
				height:150px;
				float:left;
				}
			
			#slider-homepage .main{
				width:906px;
				height:150px;
				float:left;
				display:block;
				overflow:hidden;
				}
				
				#slider-homepage .main img{
					margin-top:20px;
					margin-left:14px;
					}
					
					#slider-homepage .main img.first {
					margin-top:20px;
					margin-left:15px;
					}
					

		
			
/*-------------------------
SECTION
-------------------------*/

.section-wp {
	height:auto;
	margin:0 auto;
	background:#fff url(../images/bg-section.jpg) repeat-x;
	overflow:hidden;
	}

	.section {
	width:960px;
	height:auto;
	margin:0 auto;
	overflow:hidden;
	background:url(../images/section-bar.png) repeat-y;
	}
		
		.container {
			height:300px;
			float:left;
			padding:25px;
			background:url(../images/section-bar-single.jpg) repeat-y right;
			}
		
			.home-left {
			width:330px;
			}
			
				.home-left h1 {
					background:url(../images/text-designs-that-deliver.jpg) no-repeat;
					text-indent:-999999px;
					height:25px;
					}
				
				#section .home-left h2 {
					margin-top:10px;
					}
				
			.center {
			width:200px;
			}
			
				.center h1 {
					background:url(../images/text-IT-solutions.jpg) no-repeat;
					text-indent:-999999px;
					height:25px;
					}
					
				
				.center h2 {
					border-top:1px dotted #ccc;
					margin-top:10px;
					}
				
				.center a {
					width:200px;
					height:25px;
					float:left;
					display:block;
					border-bottom:1px dotted #ccc;
					color:#666;
					font:11px/25px Arial, Helvetica, sans-serif;
					}
					
					.center a:hover {
						background:#f0f0f0 url(../images/bullet-arrow.gif) no-repeat right;
						
						}
			
			.home-right {
			width:275px;
			background:none;
			}
				.home-right h1 {
					background:url(../images/text-portals-products.jpg) no-repeat;
					text-indent:-999999px;
					height:25px;
					}
					
				.home-right img {
					float:left;
					margin-top:20px;
					}
					
/*--------------
FOOTER
----------------*/

#footer-wp {
	width:auto;
	height:120px;
	clear:both;
	background:url(../images/bg-footer.jpg) repeat-x;
	font:11px Arial, Helvetica, sans-serif;
	}
	
	.footer {
		width:960px;
		margin:0 auto;
		}
	
	.footer img {
		float:left;
		margin-left:-20px;
		}
		
	.footer-menu{
		width:810px;
		float:right;
		}
		
		.footer-menu ul {
			height:56px;
			float:right;
			}
			
		.footer-menu ul li {
			display:inline;
			}
		
		.footer li a {
			font:11px/56px Arial, Helvetica, sans-serif;
			color:#888;
			margin-left:15px;
			}
		
		.footer li a:hover {
			text-decoration:underline;
			}
	
	.footer span {
			float:right;
			height:40px;
			line-height:40px;
			padding-right:25px;
			background:url(../images/valid-xhtml-css.jpg) no-repeat right;
			}
		.footer span a {
			font:11px Arial, Helvetica, sans-serif;
			color:#999;
			border-bottom:1px dotted #666;
			}	
			
		.footer span a:hover {
			border-bottom:1px dotted #ccc;
			color:#ccc;
			}	


/*-------------------------
ABOUT US
-------------------------*/	
	#banner-wp-about {
		height:175px;
		margin:0 auto;
		background:url(../images/bg-banner-about.jpg) repeat-x;
		}
			
		.about-banner {
			width:960px;
			margin:0 auto;
			font-size:16px;
			color:#000000;
			}
			
			.about-banner span {
				width:480px;
				float:left;
				}
				
				.about-banner span.left {
				width:480px;
				float:left;
				margin-top:35px;
				}
			
			
		
		.about-left {
			width:655px;
			height:400px;
			}
			
				.about-left h1 {
					height:25px;
					font-size:20px;
					color:#000000;
					}
				
				.about-left h2 {
					margin-top:10px;
					}
				
				.about-left h3 {
					margin-top:25px;
					width:200px;
					float:left;
					vertical-align:text-top;
					
					}
					
					.about-left h3 img {
					margin-right:5px;
					}
					
		.about-right {
			width:200px;
			background-image:none;
			height:auto;
			}
			
			.about-right img {
				margin-top:25px;
				}

/*-------------------------
SOLUTIONS
-------------------------*/	
	#banner-wp-solutions {
		height:352px;
		margin:0 auto;
		background:url(../images/bg-banner-solutions.jpg) repeat-x;
		}
		
		.banner-solutions {
			width:960px;
			height:300px;
			padding-top:52px;
			margin:0 auto;
			overflow:hidden;
			}
			
			.banner-solutions-left {
				width:310px;
				height:352px;
				overflow:hidden;
				float:left;
				}
				
			.banner-solutions-right {
				width:650px;
				height:352px;
				float:left;
				}
				
				.banner-solutions-right h2 {
					font:12px Arial, Helvetica, sans-serif;
					color:#000000;
					}
					
				.banner-solutions-right img {
					margin-top:25px;
					}
			
	
.section-wp-solutions{
		height:auto;
		background:#fff url(../images/bg-section.jpg) repeat-x;
		float:left;
		}
	.section-solutions {
		width:960px;
		height:auto;
		display:block;
		overflow:hidden;
		margin:0 auto;
		background:url(../images/section-bar.png) repeat-y;
		}
		
		.solutions-left {
			width:260px;
			height:600px;
			}
			
			.solutions-left h1 {
				font-size:20px;
				color:#666;
				}
				
			.solutions-left h2 {
					border-top:1px dotted #ccc;
					margin-top:20px;
					padding-top:20px;
					font:14px/20px Arial, Helvetica, sans-serif;
					}
				
				.solutions-left a{
					width:260px;
					height:30px;
					float:left;
					display:block;
					border-bottom:1px dotted #ccc;
					color:#000;
					font:14px/30px Arial, Helvetica, sans-serif;
					}
					
					.solutions-left a:hover {
						background:#f0f0f0 url(../images/bullet-arrow.gif) no-repeat right;
						
						}
			
		.solutions-right {
			width:600px;
			background-image:none;
			height:auto;
			}
			
			.it-solutions {
				width:600px;
				border-top:1px dotted #ccc;
				float:left;
				}
				
				.it-solutions h2{
					font:20px/50px Arial, Helvetica, sans-serif;
					color:#000000;
					display:block;
					padding-left:30px;
					background:url(../images/bullet-arrow-down.gif) 0 20px  no-repeat;
					}
				
				.it-solutions h3 a {
					font:20px Arial, Helvetica, sans-serif;
					color:#000000;
					display:block;
					padding-left:30px;
					padding-top:10px;
					padding-bottom:10px;
					background:url(../images/bullet-arrow-next.gif) 0 20px  no-repeat;
					}
					
					.it-solutions h3 a:hover {
						background:#f0f0f0 url(../images/bullet-arrow-down.gif) 10px 25px  no-repeat;
						}
						
						
				.solutions-detail {
					margin-bottom:25px;
					}
					
					.solutions-detail span {
						width:400px;
						float:left;
						}
					
					.solutions-detail img {
						float:left;
						margin:20px 0;
						}
						
				.no-top-border {
					border-top:none;
					}
					
				.yes-bottom-border {
					border-bottom:1px dotted #ccc;
					}
/*-----------------
PORTFOLIO	
-----------------*/			
	.section-wp-common {
			height:auto;
			margin:0 auto;
			overflow:hidden;
			clear:both;
			background:#d6d6d6 url(../images/bg-section-common.jpg) repeat-x;	
			}
		
		.section-common {
			width:960px;
			height:auto;
			margin:0 auto;
			overflow:hidden;
			}
		
			.title{
				width:960px;
				height:100px;
				padding-top:40px;
				float:left;
				display:block;
				}
				
				.title img {
					float:left;
					}
				
				.portfolio-cat {
					width:auto;
					height:34px;
					float:right;
					margin-top:25px;
						font:11px/34px Arial, Helvetica, sans-serif;
					}
					
					.portfolio-cat li {
						float:left;
						display:inline;
						line-height:34px;
						background:url(../images/portfolio-cat-active-bg.jpg);
						}
					
					.portfolio-cat li.end{
						width:6px;
						height:34px;
						display:inline;
						float:left;
						}
						
						.portfolio-cat li.first-active{
						background:url(../images/portfolio-cat-left-active.jpg) no-repeat;
						}
						
						.portfolio-cat li.last-inactive{
						background:url(../images/portfolio-cat-right-inactive.jpg) no-repeat;
						}
					
					.portfolio-cat li.active{
						background:url(../images/portfolio-cat-active-bg.jpg);
						padding:0 10px;
						font:11px/34px Arial, Helvetica, sans-serif;
						font-weight:bold;
						color:#999;
						}
						
						.portfolio-cat li a.active{
							background:url(../images/portfolio-cat-active-bg.jpg);
							padding:0 10px;
							color:#999;
							display:block;
							}
							
							.portfolio-cat li a.active:hover{
								background:url(../images/portfolio-page-active-bg.jpg);
								}
								
						.portfolio-cat li a.inactive-cat{
							background:url(../images/portfolio-cat-inactive-bg.jpg);
							}
						
					.portfolio-cat li.portfolio-page-active {
						background:url(../images/portfolio-page-active-bg.jpg);
						padding:0 10px;
						font-weight:bold;
						}
					
					.portfolio-cat li.sep {
						width:1px;
						height:34px;
						background:#ccc;
						}	
						
					portfolio-cat li a.portfolio-cat-up {
						background:url(../images/portfolio-page-active-bg.jpg);
						padding:0 10px;
						font-weight:bold;
						display:block;
						font:11px/34px Arial, Helvetica, sans-serif;
						}
				
			.portfolio-nav {
				width:960px;
				height:140px;
				background:url(../images/bg-portfolio-nav.jpg) repeat-x;
				float:left;
				margin-bottom:55px;
				}
				
				.portfolio-nav a{
					width:192px;
					height:125px;
					padding-top:15px;
					display:block;
					text-align:center;
					background:url(../images/portfolio-nav-bar.jpg) right repeat-y;
					float:left;
					}
					
				.portfolio-nav a:hover, .portfolio-nav a.portfolio-right:hover{
					background:url(../images/bg-portfolio-nav-hover.jpg) repeat-x;
					}
					
				.portfolio-nav a.portfolio-right{
					background-image:none;
					}
				
			.portfolio-container {
				width:960px;
				height:400px;
				float:left;
				margin-bottom:50px;
				}
				
				.portfolio-gap {
					width:960px;
					height:20px;
					float:left;
					
					}
				
				.portfolio-image {
					width:580px;
					height:354px;
					padding:20px;
					float:left;
					margin-right:25px;
					background:#ededed;
					border:1px dotted #666;
					}
					
						.portfolio-image:hover {
							border:1px solid #999;
						}
					
					.portfolio-container h1 {
						font:26px Arial, Helvetica, sans-serif;
						color:#000000;
						float:left;
						width:300px;
						}
						
					.portfolio-container h2 {
						font:16px Arial, Helvetica, sans-serif;
						color:#000000;
						float:left;
						width:300px;
						}
					
					a.portfolio-website {
						font:12px Arial, Helvetica, sans-serif;
						color:#666666;
						float:left;
						padding-left:20px;
						margin-top:25px;
						background:url(../images/bullet-arrow-browse.jpg) no-repeat left;
						}
						
					a.portfolio-website:hover {
						background:url(../images/bullet-arrow-browse-now.jpg) no-repeat left;
						text-decoration:underline;
						}
					
/*-----------------
REQUEST QUOTE
-----------------*/

	.quote-left {
		width:340px;
		float:left;
		margin-top:40px;
		}
		
	.quote-right{
		width:540px;
		height:auto;
		padding:40px;
		float:left;
		background:#ededed url(../images/request-quote-form-top.jpg) no-repeat top;
		margin:40px auto;
		}
		
	.quote-right table td {
		height:22px;
		font-size:12px;
		}
	
	.quote-right table td.tbl-cat{
		font-weight:bold;
		color:#000000;
		}
		
	.quote-right table td.tbl-head{
		font:14px Arial, Helvetica, sans-serif;
		color:#000000;
		height:30px;
		font-weight:bold;
		}
		
		.quote-right h1 {
			font-size:30px;
			color:#000000;
			}
		
		.quote-right strong {
			color:#000000;
			}
			
		.quote-right a {
			font:20px Georgia, "Times New Roman", Times, serif;
			font-style:italic;
			color:#066;
			border-bottom:1px dotted #666;
			}
			
			.quote-right a:hover {
				border-bottom:1px solid #066;
				}
				
		.quote-right .btn-req {
			margin-right:25px;
			}
				
		
/*-----------------
CONTACT
-----------------*/


.contact-form-holder {
		width:960px;
		height:600px;
		margin:0 auto;
		margin-bottom:50px;
		background:url(../images/bg-contact-form.png) top no-repeat;
		}
		
		.contact-add {
			text-align:center;
			padding-top:15px;
			}
			
			.contact-add a {
				color:#666;
				border-bottom:1px dotted #666;
				}
				
				 .contact-add a:hover{
				border-bottom:1px solid #666;
				}
		
		.contact-form {
		width:610px;
		height:225px;
		margin:0 auto;
		padding-top:100px;
		}
		
			.contact-form label {
				color:#666;
				font:14px Georgia, "Times New Roman", Times, serif;
				line-height:30px;
				height:30px;
				float:left;
				display:inline-block;
				}
				
			.contact-form input, .contact-form textarea {
				width:500px;
				border:0;
				font:14px Georgia, "Times New Roman", Times, serif;
				color:#ccc;
				font-style:italic;
				padding-left:10px;
				background:none;
				
				}
				
				.contact-form input:focus, .contact-form input:active,.contact-form textarea:focus, .contact-form textarea:active {
				color:#000;
				outline:0;
				
				}
				
				.contact-form textarea {
					height:150px;
					line-height:28px;
					float:right;
					}
					
			.contact-submit {
				width:100px;
				margin-left:428px;
				padding-top:50px;
				font:11px Arial, Helvetica, sans-serif;
				}
				
				.contact-submit a{
					color:#CCCCCC;
					font-weight:bold;
					}
					
					.contact-submit a:hover{
						color:#ffffff;
						text-decoration:underline;
						}
					
					.return-to {
						width:640px;
						height:150px;
						margin:0 auto;
						text-align:right;
						padding-top:10px;
						font:11px Georgia, "Times New Roman", Times, serif;
						color:#999;
					}