@charset "utf-8";
/* CSS Document */

html {
	height: 100% !important;
}

html div {
	height: 1%; /* IE */
}

html>body div {
	height: auto; /* fix for all other browsers */
}
body {
	background: #e7e7e7;
	margin: 0px;
	text-align: center;
}

#container {
	width: 856px;
	margin: 0 auto;	
	margin-top: 15px;
	padding: 0px;
}

#wrapper {
	float: left;
	background: url(../images/bg-content.gif) repeat-y;
	width: 856px;
	
}

/*--------------------------------------{ HEADER }--------------------------------------*/

#header {
	float: left;
	background: url(../images/bg-top.gif) no-repeat;
	width: 856px;
	padding: 15px 0px 0px 0px;
}

#logo {
	float: left;
	margin: 25px 0px 0px 30px;
}

/*------------------{ NAVIGATION }-----------------*/

#navigation {
	float: left;
	margin: 70px 0px 0px 65px;
}

ul#topnav {
	display: inline;
}

	ul#topnav li {
		float: left;
		margin: 0px 15px 0px 0px;
	}

	ul#topnav li.sep {
		background: url(../images/nav-sep.gif) no-repeat left top;
		width: 8px;
		height: 30px;
	}

/*------------------{ HEADER IMAGES }-----------------*/
#header-img {
	float: left;
	width: 800px;
	height: 250px;
	margin: 15px 0px 15px 30px;
	
}

#header-img-solutions {
	float: left;
	background: url(../images/header02.jpg) no-repeat;
	width: 800px;
	height: 250px;
	margin: 15px 0px 15px 30px;
}

	#header-img-support {
		float: left;
		background: url(../images/header02b.jpg) no-repeat;
		width: 800px;
		height: 250px;
		margin: 15px 0px 15px 30px;
	}
	
	#header-img-features {
		float: left;
		background: url(../images/header02c.jpg) no-repeat;
		width: 800px;
		height: 250px;
		margin: 15px 0px 15px 30px;
	}

#header-img-portfolio {
	float: left;
	background: url(../images/header03.jpg) no-repeat;
	width: 800px;
	height: 250px;
	margin: 15px 0px 15px 30px;
}

#header-img-about {
	float: left;
	background: url(../images/header04.jpg) no-repeat;
	width: 800px;
	height: 250px;
	margin: 15px 0px 15px 30px;
}

#header-img-contact {
	float: left;
	background: url(../images/header01.jpg) no-repeat;
	width: 800px;
	height: 250px;
	margin: 15px 0px 15px 30px;
}

/*--------------------------------------{ MAIN CONTENT AREA }--------------------------------------*/

#content {
	clear: both;
	float: left;
	width: 800px;
	margin: 0px 0px 0px 30px;
	padding: 0px 0px 20px 0px;
	text-align: left;
}

/*------------------{ LEFT COLUMN }-----------------*/

#left {
	float: left;
	background: #e1e1e1 url(../images/pagecurl.png) no-repeat;
	opacity: .8;
	filter: alpha(opacity=80);
	width: 530px;	
	margin: -45px 0px 15px 0px;	
	padding: 0px 15px 10px 15px;
}
	#left h1 {
		margin:0px 0px -10px;
		font: bold 13px verdana, tahoma, Arial, Helvetica, sans-serif;
	}
	#left p {
		line-height: 21px;
	}
	
	#left ul {
		margin: 0px;
		padding: 0px 0px 0px 15px;
		font: normal 12px tahoma, verdana, arial, helvetica, sans-serif;
		line-height: 15px;
	}
	
	#left ul li {
		padding: 4px 0px 4px 0px;
		list-style-type: circle;
		list-style-position: outside;
		color: #333;
	}
	
#left-home-cols {
	float: left;
	width: 420px;
}

#left-home {
	background: #e1e1e1 url(../images/pagecurl.png) no-repeat right top;
	opacity: .8;
	filter: alpha(opacity=80);
	margin: -45px 0px 15px 0px;	
	padding: 1px 15px 10px 15px;
}

	#left-home p {
		line-height: 21px;
	}
	
	#left-home ul {
		font: normal 12px tahoma, verdana, arial, helvetica, sans-serif;
		margin: 0px;
		padding: 0px 0px 0px 20px;
	}
	
#left-home-under {
	width: 390px;
}
	
.discover {
	background: #9ed2f6 url(../images/bg-discover-top.gif) no-repeat left top;
	width: 420px;
	margin: 15px 0px 0px 0px;
	font: normal 12px tahoma, verdana, arial, helvetica, sans-serif;
}	

	.discover div {
		background: url(../images/bg-discover-bottom.gif) no-repeat left bottom;	
		width: 420px;
		padding:0px 0px 10px;
	}
	
	#left-home-under .discover div ul {
		padding:30px 0px 0px 7px;
		
	}
	
	#left-home-under .discover div ul li {
		background: url(../images/hdots.gif) repeat-x left bottom;
		margin:10px;
		padding:0px 0px 9px;		
		list-style: circle;
		list-style-position: inside;
	}
	

	.discover h1 {
		padding: 40px 15px 0px 15px;
		font: normal 14px verdana, tahoma, arial, helvetica, sans-serif;
		line-height: 14px;
		color: #333;
	}	

	.discover p {
		padding: 40px 15px 20px 15px;
		font: normal 10px verdana, tahoma, arial, helvetica, sans-serif;
		line-height: 14px;
		color: #333;
	}

	.discover div img {
		margin:0px 0px 15px 15px;
	}	
	
	.discover ul li a {
		color: #aa5800;	
		text-decoration: none;
	}
	

#left-col {
	float: left;
}	

#left-portfolio {
	background: #e1e1e1 url(../images/pagecurl.png) no-repeat right top;
	opacity: .8;
	filter: alpha(opacity=80);
	width: 230px;
	margin: -50px 0px 15px 0px;	
	padding: 5px 15px 10px 15px;
}

	#left-portfolio img {
		opacity: 1.0;
		filter: alpha(opacity=100);
	}

	#left-portfolio p {
		line-height: 21px;
	}
	
	#left-portfolio ul {
		font: normal 10px verdana, tahoma, arial, helvetica, sans-serif;
		margin: 0px;
		padding: 0px;
		
	}
	
	#left-portfolio ul li {
		background: url(../images/hdots.gif) repeat-x left bottom;
		padding: 4px 0px 4px 0px;
		list-style-type: circle;
		list-style-position: inside;
		
	}
	
	#left-home a:link, #left-portfolio a:link {
		background: url(../images/hdots.gif) repeat-x left bottom;
		padding: 0px 0px 3px 0px;
		text-decoration: none;
		color: #c46602;
	}
	
	#left-home a:visited, #left-portfolio a:visited {
		background: url(../images/hdots.gif) repeat-x left bottom;
		padding: 0px 0px 3px 0px;
		text-decoration: none;
		color: #954d00;
	}

	#left-home a:hover, a:active, #left-portfolio a:hover, a:active {
		text-decoration: none;
		color: #954d00;
	}
	
#left-portfolio-under {
	width: 230px;
	padding: 0px 26px;
}

/*------------------{ RIGHT COLUMN }------------------*/

#right {
	float: left;
	margin: 0px 0px 0px 25px;
	font: normal 11px Verdana, Arial, Helvetica, sans-serif;
}

	#right ul {
		margin: 0px 0px 15px 0px;
		padding: 0px 0px 0px 5px;				
	}
	
	#right ul li {
		background: url(../images/hdots.gif) repeat-x left bottom;
		padding: 6px 0px 6px 5px;		
		list-style: circle;
		list-style-position: inside;
	}
	
	#right h1 {
		font: bold 11px Verdana, Arial, Helvetica, sans-serif;
	}

#right-portfolio {
	float: left;
	width: 510px;
	margin: 10x 0px 0px 5px;
}

	#right-portfolio h3 {
		font: bold 15px Verdana, Arial, Helvetica, sans-serif;
	}	

#right-privacy {
	float: left;
	width: 215px;
	margin: 0px 0px 0px 25px;
	font: normal 11px Verdana, Arial, Helvetica, sans-serif;	
}

#right-privacy h1 {
	font: bold 13px Verdana, Arial, Helvetica, sans-serif;	
}
.latest-project {
	background: #e1913d url(../images/bg-latest_project-top.gif) no-repeat left top;
	width: 335px;
}	

	.latest-project div {
		background: url(../images/bg-latest_project-bottom.gif) no-repeat left bottom;	
		width: 335px;
	}	

	.latest-project h1 {
		padding: 40px 15px 0px 15px;
		font: normal 14px verdana, tahoma, arial, helvetica, sans-serif;
		line-height: 14px;
		color: #fff;
	}

	.latest-project p {
		margin: -10px 0px 0px 0px;
		padding: 0px 15px 20px 15px;
		font: normal 10px verdana, tahoma, arial, helvetica, sans-serif;
		line-height: 14px;
		color: #fff;
	}

	.latest-project div img {
		margin:0px 0px 15px 15px;
	}



.testimonial {
	background: #e1913d url(../images/bg-testimonial-top.gif) no-repeat left top;
	width: 200px;
	font: italic 10px verdana, tahoma, Arial, Helvetica, sans-serif;	
}

	.testimonial div {
		background: url(../images/bg-testimonial-bottom.gif) no-repeat left bottom;	
		width: 200px;
	}

	.testimonial p {
		padding: 40px 15px 20px 15px;
		font: italic 11px verdana, tahoma, arial, helvetica, sans-serif;
		line-height: 15px;
		color: #fff;
	}

	.byline {
		width: 200px;
		text-align: right;
	}


.clear {
	clear: both;
}

/*--------------------------------------{ FOOTER }--------------------------------------*/

#footer {
	float: left;
	background: url(../images/bg-bottom.gif) no-repeat left bottom;
	width: 856px;	
	
}

	#footer-bot {
		background: url(../images/hdots.gif) repeat-x left top;
		width: 800px;
		margin: 0px 0px 0px 30px;
		padding: 10px 0px 65px 0px;		
	}

#bottomnav {
	float: left;
	width: 480px;
	
}

ul.botnav {
	display: inline;
	font: normal 10px verdana, tahoma, Arial, Helvetica, sans-serif;
}

	ul.botnav li {
		float: left;	
		margin: 0px 5px 0px 0px;
	}

#legals {
	float: left;
	width: 320px;
	margin: 0px;
	font: normal 10px verdana, tahoma, Arial, Helvetica, sans-serif;
	text-align: right;
}

/*--------------------------------------{ IN-CONTENT STYLES )--------------------------------------*/

/*------------------{ CASE STUDIES }------------------*/

blockquote.casestudy {
	background: #e3e3e3; 
	border-top: 1px solid #c3c3c3;
	border-bottom: 1px solid #c3c3c3;
	width: 100%;
	margin-left: 5px;
}

	blockquote.casestudy p {
	padding: 0px 10px 0px 10px;
	}

img.case-study {
	float: left;
	border: 1px solid #000;
	
}

	img.case-studyright {
		float: right;
		border: 1px solid #000;
		margin: -10px 10px 0px 10px;
	}

ul.case_study {
	font: normal 11px verdana, tahoma, Arial, Helvetica, sans-serif

}

	ul.case_study li {
		margin: 0px;
		padding: 0px 0px 2px 0px;
		list-style-type: disc;
	}


/*--------------------------------------{ TEXT, ETC. ELEMENTS }--------------------------------------*/

p, tr, td {
	font: normal 12px tahoma, verdana, arial, helvetica, sans-serif;
	line-height: 20px;
	color: #333;
}

td {
	padding: 2px 0px 2px 0px;
}

a:link {
	text-decoration: none;
	color: #c46602;
}

a:visited {
	text-decoration: none;
	color: #954d00;
}

a:hover, a:active {
	text-decoration: none;
	color: #954d00;
}

ul, li {
	list-style: none;
	list-style-image: none;
}

img {
	border: 0px;
}

	img.padright {
		float: left;
		margin: 0px 10px 0px 0px;
	}
	
	img.padleft {
		float: right;
		margin: 0px 0px 0px 10px;
	}

.hline {
	background: url(../images/hdots.gif) repeat-x;
	height: 1px;
	margin: 10px 0px 10px 0px;
}

