/* ----- CSS ----- */
body {
	margin: 0;
	padding: 0;
	line-height: 1.3em;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 81.3%;
	color: #6b7a83;
	background: #badeeb url(BG.gif) repeat-x top center;
}

/* ----- header ----- */
#wrapper {
	position: relative;
	margin: 0 auto;
}
#header {
	position: absolute;
	top: -65px;
	width: 905px;
	background: transparent url(header.jpg) no-repeat top left;
}
	#header h1 {
		margin: 0 0 0 0px;
		padding: 0;
	}
		#header h1 a {
			display: block;
			width: 260px;
			height: 60px;
			text-indent: -9000px;
			background: transparent url(kelimeezberlemelogo.gif) no-repeat top left;
		}
	#header ul {
		position: absolute;
		bottom: 0;
		right: 20px;
		float: left;
		list-style: none;
		font-size: 1.231em;
		font-weight: normal;
	}
		#header ul li {
			display: inline;
			margin: 0;
			padding: 0; 
		}
			#header ul li a {
				margin: 0 10px 0 13px;
				color: #fff;
				letter-spacing: 1px;
				text-decoration: none;
			}
			#header ul li a:hover {
				color: #badeeb;
			}
		
			#header li#links a:link, #header li#links a:visited {
				background-position:-104px 0px;
			}
			#header li#contact a:link, #header li#contact a:visited {
				background-position:-208px 0px;
			}

			#header li#work a:hover, #header li#work a:focus {
				background-position:-0px -34px;
			}
			#header li#links a:hover, #header li#links a:focus {
				background-position:-104px -34px;
			}
			#header li#contact a:hover, #header li#contact a:focus {
				background-position:-208px -34px;
			}
			
			/*----- MAIN NAVIGATION ACTIVE STATE -----*/

			.workPage li#work a, .aboutPage li#about a, .contactPage li#contact a {
				color: #badeeb;
			}

	
/* ----- contents ----- */
			
#contents {
	position: relative;
	margin: 0 auto;
	width: 905px;
	height: 520px;
}
	#contents #introGraphic {
		position: absolute;
		top: 18px;
		left: 42px;
		width: 227px;
		height: 204px;
		text-indent: -9000px;
		background: #fff url(introGraphic.gif) no-repeat top left;
	}
	#contents #intro {
		position: absolute;
		top: 30px;
		left: 341px;
		width: 533px;
	}
		#contents #intro h1 {
			margin-right: 100px;
			padding: 6px 0 55px 0;
			font-size: 50px;
			font-weight: bold;
			line-height: 42px;
		}
		#contents #intro span.innovator {
			position: absolute;
			top: 58px;
			left: 41px;
			width: 390px;
			font-size: 29px;
			line-height: 0.8em;
		}
		body.home #contents #intro div {
			display: block;
			position: absolute;
			top: -1px;
			right: 6px;
			width: 132px;
			height: 104px;
			background: transparent url(silhouetteSM.gif) no-repeat top left;
		}
		#contents #intro h2 {
			padding: 0.4em 0 0.4em 0;
			font-size: 48px;
			font-weight: normal;
			line-height: 0.9em;
		}
		#contents #intro span.ux {
			position: absolute;
			top: 167px;
			left: 41px;
			width: 430px;
			font-size: 26px;
			line-height: 0.9em;
		}
		#contents #intro h1 span, #contents #intro h2 span {
			margin: 0 0 0 41px;
			display: block;
			font-weight: normal;
			font-family: Helvetica, Arial, Verdana, sans-serif;
			color: #6b7a83;
		}
	#contents #innovation {
		position: absolute;
		top: 239px;
		width: 905px;
		height: 105px;
		background: #c1c4c5 url(innovation.gif) no-repeat top left;
	}
		#contents #innovation h3 {
			width: 320px;
			margin: 21px 0px -11px 33px;
			font-size: 22px;
			font-weight: normal;
	
		}
		#contents #innovation p {	
			margin-left: 32px;
			width: 617px;
			height: 29px;
			text-indent: -9000px;
			font-size: 15px;
			letter-spacing: 1px;
			color: #d0d5d7;
			background: transparent url(innovationPaph.gif) no-repeat top left;
		}
			#contents #innovation p span {
				color: #fff;
				font-style: oblique;
				font-weight: bold;
			}
	#contents #carousel {
		position: absolute;
		bottom: 0;
		width: 905px;
		height: 176px;
		color: #fff;
		background: #96c9dd url(contentsBtmBG.gif) no-repeat bottom left;
	}
		#contents #carousel #pagination {
			padding-left: 10px;
			position: absolute;
			bottom: 4px;
			left: 323px;
			width: 63px;
			height: 18px;
			text-align: center;
			z-index: 3;
			background: #83bcd3 url(paginationBG.gif) no-repeat bottom left;
		}
			#contents #carousel #pagination a {
				margin: 4px 0 0 2px;
				float: left;
				display: block;
				width: 15px;
				line-height: 13px;
				text-indent: -9000px;
				background: transparent url(paginationBtn.gif) no-repeat bottom left;
			}
			#contents #carousel #pagination a:hover {
				background-position: top center ;
			}
			#contents #carousel #pagination a:active, #contents #carousel #pagination a.active {
				background-position: top right ;
			}
		#contents #carousel .projects {		
			position: relative; 
		}
			#contents #carousel .projects h4 {
				margin: 0;
				padding: 0;
				position: absolute;
				top: 10px;
				left: 18px;
				font-size: 1.12em;
				letter-spacing: 0.06em;
			}
				#contents #carousel .projects h4 a {
					display: block;
					width: 185px;
					padding: 0 0 92px 0;
					color: #fff;
					text-align: center;
					font-weight: normal;
				}
			
			#contents #carousel .projects p {
				margin: 0 32px 0 239px;
				padding: 7px 0 0 0;
				line-height: 1.5em;
			 	font-size: 13px;
			}
				#contents #carousel .projects p em {
					margin: 0 0 0.5em 0;
					display: block;
					font-size: 17px;
					font-style: normal;
					letter-spacing: 0.06em;
				}
				#contents #carousel .projects p a {
					margin: 0 0 0 5px;
					padding: 0 0 0 11px;
					line-height: 10px;
					background: transparent url(linkArrow.gif) no-repeat center left;
				}
	#contents #inAction {
		margin: 0;
		padding: 0;
		position:absolute;
		left: 718px;
		width: 187px;
		height: 198px;
		text-indent: -9000px;
		background: transparent url(actionBtn.gif) no-repeat bottom right;
	}
	
/* ----- Footer ----- */

#footer {
	width: 100%;
	color: #979c9e;
	background: #d0d5d7;
	border-top: 3px solid #fff;
}

	
	
	
/* ---- Work Page ---- */	

body.workPage #contents {
	background-image: url(projectListBG.gif);
}
body.workPage #contents #pagination { /* pagination for projectList */
	padding-left: 4px;
	position: absolute;
	top: -19px;
	left: 390px;
	width: 121px;
	font-size: 11px;
	font-weight: bold;
	line-height: 17px;
	text-align: center;
	background: #fff url(jumpBG.gif) no-repeat bottom left;
}
	body.workPage #contents #pagination a {
		font-weight: normal;
		padding: 0px 4px;
		line-height: 19px;
		font-size: 12px;
		color: #63a8c8;
	}
	body.workPage #contents #pagination a:hover {
		color: #fff;
		background: transparent url(jumpBtnRO.gif) no-repeat center center;
	}
	body.workPage #contents #pagination a:active, body.workPage #contents #pagination a.active {
		color: #fff;
		background: transparent url(jumpBtnOn.gif) no-repeat center center;
	}
#contents #projectList {
	width: 905px;
	height: 144px;
}
#contents #projectList li {

}	
	#contents #projectList ul {
		overflow: hidden;
		margin: 0 0 0px 30px;
		width: 850px;
		height: 70px;
		display: inline;
		float: left;
		background: transparent url(verticalDivider.gif) repeat-x top right;
	}
		#contents #projectList ul li {
			float: left;
			margin: 20px 8px 20px 4px;
			width: 274px;
			display: inline;
		}	
			
/* ----- HTML ----- */
h1, h2 {
	margin: 0;
	padding: 0;
	color: #96c9dd;
}
h1, h2, h3, h4, em { /* display interstate if user has it */
	font-family: Helvetica, Arial, Verdana, sans-serif;
}
ul, li {
	list-style: none;
	margin: 0;
	padding: 0;
}
dl, dt, dd {
	margin: 0;
	padding: 0;
}
a {
	outline: none;
}
a:link, a:visited {
	text-decoration: none;
}
a:hover, a:active {
	color: #506975;
}
img {
	border: none;
}


/* ----- form ----- */
input, textarea {
	font-size: 110%;
	padding: 5px 6px;
	border: none;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
}
label {
	margin-left: 2px;
	margin-right: 6px;
	font-size: 16px;
	color: #696f71;
}
textarea {
	height: 100px;
	font-family: Helvetica, Arial, Tahoma, sans-serif;
}
.txt {
	width: 424px;
	color: #696f71;
	border: none;
	background: #fff;
	border: 3px solid #c1c7ca;
}
#sendBtn {
	margin: 0;
	padding: 0;
}
.inputHighlighted {  /* Highlighting style */
	width: 296px;
	color: #fff;
  	background-color:#6f8b9b;
}

/* ---- class -----*/
.clear {
	clear: both;
}

/* ---- sticky footer -----*/
#footer {
	font-size: 12px;
	position: absolute;
	bottom: 0; /* stick to bottom */
}
	#footer p {
		position: relative;
		width: 880px;
		margin: 11px auto;
	}
		#footer p span {
			position: absolute;
			right: 0;
		}
			#footer p span a {
				margin: -1px 0 0 10px;
				display: block;
				float: left;
				height: 19px;
				text-indent: -9000px;
				color: #8fa0ab;
			}
				#footer p span a#emailIcon {
					width: 54px;
					background: transparent url(email.gif) no-repeat top left;
				}
					#footer p span a#emailIcon:hover, #footer p span a#vcardIcon:hover {
						background-position: bottom left;
					}

a.smlapply {margin: 0 auto; font-size: 11px;
text-decoration: none;
padding-top:5px;
width: 150px;
height: 30px;
color: #545d63;
font-weight:bold;
font-size:14px;
line-height: 1.7em;
text-align: center;
display: block;
background: url(button.gif) no-repeat top; }
a:hover.smlapply {background: url(button.gif) no-repeat 0 -35px;}
a:visited.smlapply {background: url(button.gif) no-repeat 0 -70px;}

.apply { width: 150px; height: 28px; padding-top: 12px; text-align: center; background: #57A9D5 url(btn_apply_lrg.png) no-repeat top; display: block;	color: #fff; font-size: 14px; text-decoration: none; float: left; margin: 10px 0 0 0;}
.apply:hover{ background-position: 0 -40px; color: #EDF5FA; }