/* (C) 2010 XHTML & CSS by Adam Husar */
body {
	font-family: Arial;
	font-size:13px;
	color:#222;
	background-image: url(images/global/glow.png);
	background-repeat: no-repeat;
	background-position: center 72px;
	background-color: #000;
	height:100%;
}

/* Paperwork */

a { color:#286db1; text-decoration: underline; }
a:hover { color:#3183d3; }

#body {
	width:100%;
	height:auto;
	position:absolute;
	min-height:100%;
	background-image: url(images/global/top-bg.png);
	background-repeat: repeat-x;
}

#body_center {
	width: 779px;
	height: auto;
	margin: auto;
}

#clear {width: 780px; height: 1px; clear: both;}

/* Globals */
#head_wrap {
	width: 779px;
	height: 72px;
	float: left;
}
	#head_wrap #logo {
		width: 116px;
		height: 60px;
		float: left;
	}

	#head_wrap #menu_wrap {
		width: 400px;
		height: auto;
		float: right;
	}
	
	#head_wrap #menu_wrap ul {
		width: auto;
		height: auto;
		float: right;
		margin: 27px 0 0;
	}
	#head_wrap #menu_wrap ul li {
		width: auto;
		height: auto;
		float: left;
		margin: 0 0 0 5px;
	}
	#head_wrap #menu_wrap ul li a {
		width: auto;
		height: 23px;
		float: left;
		display: block;
		color: #fff;
		text-decoration: none;
		font-size: 12px;
		text-transform: uppercase;
		padding: 0;
		text-indent: -99999px;
		background-image: url(images/global/menu.png);
		background-repeat: no-repeat;
		background-position: 0 0;
	}
	
	#head_wrap #menu_wrap ul li a#home		{ width: 53px; background-position: 0 0; }
	#head_wrap #menu_wrap ul li a#about		{ width: 59px; background-position: -58px 0; }
	#head_wrap #menu_wrap ul li a#services	{ width: 74px; background-position: -123px 0; }
	#head_wrap #menu_wrap ul li a#contact	{ width: 71px; background-position: -203px 0; }
	
	#head_wrap #menu_wrap ul li a:hover#home		{ width: 53px; background-position: 0 -28px; }
	#head_wrap #menu_wrap ul li a:hover#about		{ width: 59px; background-position: -58px -28px; }
	#head_wrap #menu_wrap ul li a:hover#services	{ width: 74px; background-position: -123px -28px; }
	#head_wrap #menu_wrap ul li a:hover#contact	{ width: 71px; background-position: -203px -28px; }
	
	#head_wrap #menu_wrap ul li#on a#home		{ width: 53px; background-position: 0 -28px; }
	#head_wrap #menu_wrap ul li#on a#about		{ width: 59px; background-position: -58px -28px; }
	#head_wrap #menu_wrap ul li#on a#services	{ width: 74px; background-position: -123px -28px; }
	#head_wrap #menu_wrap ul li#on a#contact	{ width: 71px; background-position: -203px -28px; }

#top-sep {
	width: 779px;
	height: 47px;
	float: left;
}

#box_wrap {
	width: 777px;
	height: 447px;
	float: left;
	background-color: #fff;
	border: 1px solid #000;
}
#box_wrap #box-overlay-top {
	width: 777px;
	height: 3px;
	position: absolute;
	z-index: 500;
	background-image: url(images/global/box-overlay-top.png);
	background-repeat: no-repeat;
}
#box_wrap #box-overlay-left {
	width: 3px;
	height: 447px;
	position: absolute;
	z-index: 499;
	background-image: url(images/global/box-overlay-left.png);
	margin: 3px 0 0;
}
#box_wrap #box-overlay-right {
	width: 3px;
	height: 447px;
	position: absolute;
	z-index: 499;
	background-image: url(images/global/box-overlay-right.png);
	margin: 3px 0 0 774px;
}

	#box_wrap .scroll {
		width: 777px;
		height: 448px;
		float: left;
		overflow: hidden;
    	overflow-x: hidden;
   		position: absolute;
   		z-index: 5;
	}
	#box_wrap .scroll .slide {
		width: 777px;
		height: 448px;
		float: left;
		position: relative;
	}
	#box_wrap .scroll .slide#s1 {
		width: 777px;
		height: 448px;
		float: left;
		background-color: #000;
	}


#controls_wrap {
	width: 779px;
	height: 35px;
	float: left;
	background-image: url(images/global/controls-bg.png);
	background-repeat: repeat-x;
}
	#controls_wrap #prev {
		width: 93px;
		height: 34px;
		float: left;
		margin: 0 0 0 -8px;
	}
	#controls_wrap #next {
		width: 93px;
		height: 34px;
		float: right;
		margin: 0 -8px 0 0;
	}

	button.scrollButtons {
		width: 93px;
		height: 35px;
		position: absolute;
		z-index: 999;
		border: none;
		cursor: pointer;
		background: none;
		background-image: url(images/global/controls.png);
	}
		button.right { background-position: 0 0px; margin: 447px 0 0 693px; }
		button.left { background-position: 0 -40px; margin: 447px 0 0 -9px; }
		
		button.right:hover { background-position: -98px 0px; }
		button.left:hover { background-position: -98px -40px; }
		
		button.right:active { background-position: -196px 0px; }
		button.left:active { background-position: -196px -40px; }

	.hide {
	    display: none;
	}
	
	
	
	
	#controls_wrap #progress {
		width: 593px;
		height: 35px;
		float: left;
	}
	
	#controls_wrap #progress ul {
		width: auto;
		height: 35px;
		float: left;
		margin: 0 0 0 73px;
	}
		#controls_wrap #progress ul li {
			width: auto;
			height: auto;
			float: left;
			margin: 0 0 0 11px;
		}
		#controls_wrap #progress ul li a {
			width: 7px;
			height: 35px;
			float: left;
			display: block;
			background-image: url(images/global/progress.png);
			background-repeat: no-repeat;
			background-position: 0 center;
		}
		#controls_wrap #progress ul li a.selected {background-position: -12px center;}



/* SLIDE CONTENT */

		#box_wrap .slide .screenshot {
			width: 610px;
			height: 248px;
			margin: 15px 0 0 84px;
			float: left;
			border-bottom: 1px solid #c5c5c5;
		}
	
	#box_wrap .slide .description_wrap {
		width: 610px;
		height: 150px;
		float: left;
		margin: 0 0 0 84px;
		padding: 30px 0 0;
		background-repeat: no-repeat;
		background-position: 0 0;
	}
		#box_wrap .slide .description_wrap .facts_wrap {
			width: 216px;
			height: auto;
			float: left;
		}
		#box_wrap .slide .description_wrap .facts_wrap .left-sep {
			width: 170px;
			height: 15px;
			float: left;
			margin: 0 0 0 0;
		}
		#box_wrap .slide .description_wrap .facts_wrap .d-row {
			width: 180px;
			height: auto;
			float: left;
			margin: 0 0 2px 0;
		}
			#box_wrap .slide .description_wrap .facts_wrap .project_desc {
				width: 180px;
				height: auto;
				float: left;
				font-size: 11px;
			}
				#box_wrap .slide .description_wrap .facts_wrap .project_desc .d-title {
					width: 50px;
					height: auto;
					float: left;
				}
				#box_wrap .slide .description_wrap .facts_wrap .project_desc .d-title.bold {font-weight: bold;}
				
				#box_wrap .slide .description_wrap .facts_wrap .project_desc .d-desc {
					width: 120px;
					height: auto;
					float: right;
				}
				#box_wrap .slide .description_wrap .facts_wrap .project_desc .d-desc.bold {font-weight: bold;}
			
		#box_wrap .slide .description_wrap .facts_wrap .button {
			width: 180px;
			height: auto;
			float: left;
			margin: 10px 0 0 0;
		}
			#box_wrap .slide .description_wrap .facts_wrap .button a {
				width: 163px;
				height: 20px;
				float: left;
				display: block;
				background-image: url(images/global/button.png);
				text-decoration: none;
			}
			#box_wrap .slide .description_wrap .facts_wrap .button a:hover {background-position: -169px 0;}
			#box_wrap .slide .description_wrap .facts_wrap .button a:active {background-position: -338px 0}
		
		
		#box_wrap .slide .description_wrap .text_wrap {
			width: 378px;
			height: 119px;
			float: left;
			margin: 0 0 0 0;
		}
			#box_wrap .slide .description_wrap .text_wrap p {
				width: 360px;
				height: 200px;
				float: left;
				font-size: 13px;
				color: #222;
				line-height: 17px;
			}


/* Subpages */
#content_top {
	width: 779px;
	height: 6px;
	float: left;
	background-image: url(images/global/content-top.png);
}
#content_wrap {
	width: 779px;
	height: auto;
	float: left;
	background-image: url(images/global/content-bg.png);
	background-color: #fff;
	border: none;
	border-bottom: 1px solid #000;
}
	#content_wrap #intro {
		width: 619px;
		height: auto;
		float: left;
		margin: 30px 0 0 80px;
		padding: 0 0 20px 0;
		border-bottom: 1px solid #c5c5c5;
	}
		#content_wrap #intro h1 {
			width: 619px;
			height: auto;
			float: left;
			text-align: center;
			margin: 0 0 5px;
			font-weight: normal;
			font-size: 21px;
		}
		#content_wrap #intro p {
			width: 619px;
			height: auto;
			float: left;
			font-size: 14px;
			color: #222;
			line-height: 19px;
			text-align: center;
		}

	#content_wrap #clients_wrap {
		width: 619px;
		height: auto;
		float: left;
		margin: 25px 0 0 80px;
		padding: 0 0 7px 0;
		border-bottom: 1px solid #c5c5c5;
	}
		#content_wrap #clients_wrap .row {
			width: 619px;
			height: auto;
			float: left;
			margin: 0 0 20px;
		}
			#content_wrap #clients_wrap .row .bubbles {
				width: 619px;
				height: auto;
				float: left;
				background-image: url(images/global/bubble.png);
				background-repeat: no-repeat;
				background-position: 0 0;
			}
			#content_wrap #clients_wrap .row .bubbles p.b-left {
				width: 260px;
				height: auto;
				float: left;
				color: #fff;
				font-size: 12px;
				margin: 14px 0 14px 20px;
			}
			#content_wrap #clients_wrap .row .bubbles p.b-right {
				width: 260px;
				height: auto;
				float: right;
				color: #fff;
				font-size: 12px;
				margin: 14px 14px 14px 0;
			}
			
			
		#content_wrap #clients_wrap .row .credits {
			width: 619px;
			height: auto;
			float: left;
			background-image: url(images/global/bubble.png);
			background-repeat: no-repeat;
			background-position: 0 -240px;
		}
			#content_wrap #clients_wrap .row .credits p.c-left {
				width: 200px;
				height: auto;
				float: left;
				font-size: 11px;
				font-style: italic;
				margin: 5px 0 0 20px;
			}
			#content_wrap #clients_wrap .row .credits p.c-right {
				width: 200px;
				height: auto;
				float: right;
				font-size: 11px;
				font-style: italic;
				margin: 5px 20px 0 0;
				text-align: right;
			}
			
#bio_wrap {
	width: 619px;
	height: auto;
	float: left;
	margin: 16px 0 0 80px;
}
	#bio_wrap #bio-left {
		width: 500px;
		height: auto;
		float: left;
	}
		#bio_wrap #bio-left p {
			width: 480px;
			height: auto;
			float: left;
			font-size: 13px;
			color: #222;
			margin: 0;
		}
		#bio_wrap #bio-left p#bio-hd {
			font-size: 15px;
			margin: 0 0 5px 0;
		}
		
		#bio_wrap #bio-left ul {
			width: auto;
			height: auto;
			float: left;
			margin: 14px 0 0 0;
		}
			#bio_wrap #bio-left ul li {
				width: auto;
				height: auto;
				float: left;
				margin: 0 10px 0 0;
			}
			#bio_wrap #bio-left ul li a {
				width: 104px;
				height: 28px;
				float: left;
				display: block;
				background-image: url(images/global/buttons-social.png);
				background-repeat: no-repeat;
				background-position: 0 0;
			}
				#bio_wrap #bio-left ul li#linkedin a {background-position: 0 0px;}
				#bio_wrap #bio-left ul li#twitter a {background-position: 0 -33px;}
				#bio_wrap #bio-left ul li#blog a {background-position: 0 -66px;}
				
				#bio_wrap #bio-left ul li#linkedin a:hover {background-position: -109px 0px;}
				#bio_wrap #bio-left ul li#twitter a:hover {background-position: -109px -33px;}
				#bio_wrap #bio-left ul li#blog a:hover {background-position: -109px -66px;}
				
				#bio_wrap #bio-left ul li#linkedin a:active {background-position: -218px 0px;}
				#bio_wrap #bio-left ul li#twitter a:active {background-position: -218px -33px;}
				#bio_wrap #bio-left ul li#blog a:active {background-position: -218px -66px;}
	
	#bio_wrap #bio-right {
		width: auto;
		height: auto;
		float: right;
		padding: 0 0 10px 0;
	}
		#bio_wrap #bio-right img {
			margin: 0;
			float: right;
			margin: 5px 0 0 0;
		}

#about-bottom-sep {
	width: 779px;
	height: 35px;
	float: left;
}

.services-sep { width: 779px; height: 50px; float: left; }
.services-sep.bottom { width: 779px; height: 20px; float: left; }

	#content_wrap #services_wrap {
		width: 619px;
		height: auto;
		float: left;
		margin: 0 0 0 80px;
		padding: 0 0 7px 0;
	}
		#content_wrap #services_wrap .row {
			width: 619px;
			height: auto;
			float: left;
			margin: 0 0 20px;
			padding: 0 0 10px;
			border-bottom: 1px solid #c5c5c5;
		}
		#content_wrap #services_wrap .row.last {border-bottom: 0; margin: 0;}
			#content_wrap #services_wrap .row .row-left {
				width: 280px;
				height: auto;
				float: left;
			}
			#content_wrap #services_wrap .row .row-right {
				width: 280px;
				height: auto;
				float: right;
			}
		
		#content_wrap #services_wrap .row h3 {
			width: auto;
			height: auto;
			float: left;
			background-color: #444;
			font-size: 16px;
			font-weight: bold;
			color: #fff;
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			padding: 3px 9px 3px 6px;
			margin: 0 0 11px 0;
			text-shadow: #000 0 -1px 0px;
		}
		#content_wrap #services_wrap .row p {
			width: 270px;
			height: auto;
			float: left;
			font-size: 12px;
			line-height: 16px;
			color: #222;
			margin: 0 0 7px 1px;
			text-align: justify;
		}
		#content_wrap #services_wrap .row .row-left.overview h3 {background-color: #888; text-shadow: #555 0 -1px 0px;}


	#content_wrap #contact_wrap {
		width: 619px;
		height: auto;
		float: left;
		margin: 0 0 0 80px;
		padding: 0 0 7px 0;
	}
	
	.contact-sep { width: 779px; height: 20px; float: left; }
	
	#content_wrap #contact-intro {
		width: 619px;
		height: auto;
		float: left;
		margin: 30px 0 0 80px;
		padding: 0 0 20px 0;
		border-bottom: 1px solid #c5c5c5;
	}
		#content_wrap #contact-intro p {
			width: 619px;
			height: auto;
			float: left;
			text-align: center;
			margin: 0 0 5px;
			font-weight: normal;
			font-size: 19px;
		}
	
		#content_wrap #contact_wrap #form_wrap {
			width: 340px;
			height: auto;
			float: left;
		}
			
			#content_wrap #contact_wrap #form_wrap p.msg {
				width: 330px;
				height: auto;
				float: left;
				margin: 0 0 10px 0;
			}
				#content_wrap #contact_wrap #form_wrap p.msg.err {color: red;}
				#content_wrap #contact_wrap #form_wrap p.msg.ok {color: green;}
		
			#content_wrap #contact_wrap #form_wrap p {
				width: 330px;
				height: auto;
				float: left;
				margin: 0 0 3px 0;
			}
			#content_wrap #contact_wrap #form_wrap p label {
				width: 320px;
				height: auto;
				float: left;
				font-size: 12px;
				margin: 0 0 2px 0;
			}
				#content_wrap #contact_wrap #form_wrap p label.error {
					width: 328px;
					height: auto;
					float: left;
					font-size: 11px;
					margin: 2px 0 0 0;
					text-align: right;
					color: red;
				}
			#content_wrap #contact_wrap #form_wrap p input[type=text] {
				width: 320px;
				height: auto;
				float: left;
				background: #666666;
				border: none;
				background-image: url(images/global/input-bg.png);
				background-repeat: no-repeat;
				margin: 0;
				padding: 5px 0 5px 5px;
				font-family: Arial;
				color: #fff;
				font-size: 13px;
				border: 1px solid #464646;
			}
			#content_wrap #contact_wrap #form_wrap p textarea {
				width: 320px;
				height: 140px;
				float: left;
				background: #666666;
				border: none;
				background-image: url(images/global/input-bg.png);
				background-repeat: no-repeat;
				margin: 0;
				padding: 5px 0 5px 5px;
				font-family: Arial;
				color: #fff;
				font-size: 13px;
				border: 1px solid #464646;
			}
			#content_wrap #contact_wrap #form_wrap p input[type=submit] {
				width: 104px;
				height: 24px;
				float: right;
				border: none;
				background: #c8c8c8;
				background-image: url(images/global/button-send.png);
				background-repeat: no-repeat;
				background-position: 0 0;
				cursor: pointer;
				margin: 8px 2px 0 0;
			}
			#content_wrap #contact_wrap #form_wrap p input:hover[type=submit] {background-position: -110px 0; }
			#content_wrap #contact_wrap #form_wrap p input:active[type=submit] {background-position: -220px 0; }

		#content_wrap #contact_wrap #right-info {
			width: 240px;
			height: auto;
			float: right;
			margin: 15px 0 0;
		}
			#content_wrap #contact_wrap #right-info #map_wrap {
				width: 240px;
				height: 120px;
				float: left;
			}
			
			#content_wrap #contact_wrap #right-info #details {
				width: 220px;
				height: auto;
				float: left;
				margin: 18px 0 0;
				background-color: #ccc;
				-webkit-border-radius: 3px;
				-moz-border-radius: 3px;
				border-radius: 3px;
				padding: 10px;
			}
			
		#content_wrap #contact_wrap #right-info p.s {
			width: 240px;
			height: auto;
			float: left;
			font-size: 10px;
			margin: 6px 0 0 10px;
			color: #666;
		}






#bottom_wrap {
	width: 779px;
	height: 35px;
	float: left;
	background-image: url(images/global/bottom-bg.png);
	background-repeat: repeat-x;
	text-transform: uppercase;
}
#bottom_wrap a {
	color: #666; 
	text-decoration: none;
}
	#bottom_wrap p {
		width: auto;
		height: auto;
		float: right;
		margin: 11px 80px 0 0;
		color: #666;
		font-size: 11px;
		text-shadow: #000 0 -1px 0px;
	}
	#bottom_wrap p#bottom-left {float: left; margin: 11px 0 0 80px;}
	#bottom_wrap p#bottom-right {float: right;}

#bottom_spacer {
	width: 779px;
	height: 110px;
	float: left;
}