@charset "utf-8";

/*************************************************/
/**                                             **/
/**         jamesTbaker - style sheet           **/
/**             screen version 1.0              **/
/**         http://www.jamestbaker.com          **/
/**                                             **/
/**---------------------------------------------**/
/**                                             **/
/**           © James T Baker, 2010             **/
/**                                             **/
/*************************************************/



/*===============================================*/
/*                  Global                       */
/*===============================================*/

/*------------------ RESET ----------------------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin: 0;
	padding: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset,img { 
	border: 0;
}

address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
	font-weight: normal;
}

ol,ul {
	list-style: none;
}

caption,th {
	text-align: left;
}

h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}

q:before,q:after {
	content: '';
}

abbr,acronym {
	border: 0;
}

img {
	vertical-align: bottom;
}

/*--------------- RECONFIGURE -------------------*/

body {
	background-color: #FFF;
	font-family: Arial, Helvetica, Garuda, Utkal, "Nimbus Sans L", FreeSans, "Mukti Narrow", Malayalam, sans-serif;
	font-size: 13px;
	line-height: 18px;
	color: #676767;
	text-align: center;
}

img {
	color: #676767;
	font-style: italic;
}

/*------------------ OUTER ----------------------*/

#website-container {
	width: 960px;
	margin-left: auto; 
	margin-right: auto;
	text-align: left;
}

	#website-header {
		width: 960px;
		*width: 100%;
		height: 105px;
		margin: 45px 0 45px 0;
		border-bottom: 2px solid #00BDF2;
	}
	
	#website-content {
		float: left;
		width: 960px;
		*width: 100%;
		padding-bottom: 30px;
		border-bottom: 2px solid #00BDF2;
		margin-bottom: 10px;
	}
	
	#website-footer {
		clear: left;
		width: 960px;
		*width: 100%;
		margin-bottom: 15px;
	}
	
/*------------------ INNER ----------------------*/

#tagline {
	display: block;
	margin-top: 6px;
	font-family: Arial, Helvetica, Garuda, Utkal, "Nimbus Sans L", FreeSans, "Mukti Narrow", Malayalam, sans-serif;
	font-size: 10px;
}

ul#website-navigation {
	float: right;
	position: relative;
		top: -26px;
}

	ul#website-navigation li {
		font-family: Baskerville, "Baskerville Old Face", "Baskervald Std", "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, Norasi, Rekha, FreeSerif, serif;
		list-style-type: none;
		padding-left: 21px;
		line-height: 30px;
		text-transform: lowercase;
		font-size: 19px;
		display: inline;
	}

		.current-page{
			color: #F60;
		}

.photo, .fn, .org, .url {
	display: none;
}

#copyright {
	display: block;
	font-family: Arial, Helvetica, Garuda, Utkal, "Nimbus Sans L", FreeSans, "Mukti Narrow", Malayalam, sans-serif;
	font-size: 10px;
	line-height: 10px;
}

.preload {
	display: none;
}

/*-------------- GENERAL TYPE -------------------*/

strong {
	font-weight: 900;
}

a {
	color: #676767;
	text-decoration: none;
}

	a:hover {
		color: #00BDF2;
		text-decoration: underline;
	}

h1 {
	font-family: Baskerville, "Baskerville Old Face", "Baskervald Std", "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, Norasi, Rekha, FreeSerif, serif;
	font-size: 48px;
	display: block;
	margin: 30px 0 15px 0;
	text-transform: lowercase;
}

h2, .client-name {
	font-family: Baskerville, "Baskerville Old Face", "Baskervald Std", "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, Norasi, Rekha, FreeSerif, serif;
	font-size: 27px;
	line-height: 30px;
	display: block;
	text-transform: lowercase;
}

h2 {
	margin-bottom: 15px;
}

.maintenance {
	color:#C00;
	font-weight: 700;
	font-size: 14px;
	margin: 30px 0;
}

.highlight {
	color: #F60;
}

/*===============================================*/
/*                     Pages                     */
/*===============================================*/

#page-introduction {
	float: left;
	width: 960px;
	margin-bottom: 15px;
}
	
	#page-introduction-text {
		float: left;
	}

		#page-introduction-text p {
			font-family: Baskerville, "Baskerville Old Face", "Baskervald Std", "Palatino Linotype", Palatino, Georgia, "Times New Roman", Times, Norasi, Rekha, FreeSerif, serif;
			font-size: 18px;
			line-height: 24px;
			margin-top: 15px;
			color: #787878;
		}
		
			.windows-webkit-correction {
				font-family: "Baskerville Old Face", Georgia, "Times New Roman", serif;
			}
		
			.portfolio-page #page-introduction-text p {
				width: 500px;
			}
			
			.about-page #page-introduction-text p {
				width: 545px;
			}
			
			.services-page #page-introduction-text p {
				width: 425px;
				margin-top: 9px;
			}
			
			.contact-page #page-introduction-text p {
				width: 490px;
			}

	#page-introduction-illustration {
		float: right;
	}
	
		.portfolio-page #page-introduction-illustration {
			background: url('images/portfolio.png') no-repeat;
			height: 212px;
			width: 383px;
			margin: 20px 0 8px 0;
		}
		
		.about-page #page-introduction-illustration {
			background: url('images/about.png') no-repeat;
			height: 270px;
			width: 274px;
		}
		
		.services-page #page-introduction-illustration {
			background: url('images/services.png') no-repeat;
			height: 245px;
			width: 428px;
			margin: 10px 0 15px 0;
		}
		
		.contact-page #page-introduction-illustration {
			background: url('images/contact.png') no-repeat;
			height: 270px;
			width: 317px;
		}

#page-body {
	
}

	.portfolio-page .part-one, .portfolio-page .part-two {
		float: left;
		width: 325px;
	}
	
	.portfolio-page .part-three {
		float: left;
		width: 310px;
	}
	
		.client-type {
			font-family: Arial, Helvetica, Garuda, Utkal, "Nimbus Sans L", FreeSans, "Mukti Narrow", Malayalam, sans-serif;
			font-size: 10px;
			text-transform: uppercase;
			line-height: 10px;
		}
		
		.product, .website-image a:first-child {
			font-family: Arial, Helvetica, Garuda, Utkal, "Nimbus Sans L", FreeSans, "Mukti Narrow", Malayalam, sans-serif;
			font-size: 10px;
			line-height: 10px;
			display: block;
		}

	.services-page .part-one, 
	.services-page .part-two,
	.about-page .part-one,
	.about-page .part-two {
		width: 300px;
		margin-right: 30px;
		float: left;
	}
	
	.services-page .part-three, .about-page .part-three  {
		width: 300px;
		float: left;
	}

		.services-page ul,
		.about-page ul,
		.contact-page .part-two ul {
			list-style-image: url('images/bullet01.png');
			list-style-position: outside;
			margin-left: 15px;
		}
	
				.services-page ul ul,
				.about-page ul ul {
					list-style-image: url('images/bullet02.png');
					list-style-position: outside;
					margin-left: 15px;
				}
	
	.contact-page .part-one {
		float: left;
	}
	
	.contact-page .part-two {
		float: right;
		width: 313px;
	}
	
		.contact-page .part-two li {
			margin-bottom: 30px;
		}
		
		.contact-page .part-two li li{
			margin-bottom: 0;
		}
		
		.contact-page .part-one ul li label {
			display: block;
			margin-bottom: 15px;
		}
		
		.contact-page .part-one ul li .text-field,
		.contact-page .part-one textarea,
		#recaptcha_response_field {
			display: block;
			margin-bottom: 30px;
			
			border: 1px solid #00BDF2 !important;
			background-color: #FFF !important;
			font-size: 20px;
			font-family: Arial, Helvetica, Garuda, Utkal, "Nimbus Sans L", FreeSans, "Mukti Narrow", Malayalam, sans-serif;
			
			width: 430px;
			height: 30px;
		}
		
		.contact-page .part-one ul li .text-field:focus,
		.contact-page .part-one textarea:focus,
		#recaptcha_response_field:focus {
			border: 1px solid #F60 !important;
		}
		
		.contact-page .part-one textarea {
			height: 150px;
		}
		
		#recaptcha_response_field {
			width: 300px !important;
		}
	
		.recaptchatable .recaptcha_image_cell, #recaptcha_table {
			background-color:#FFF !important; //reCaptcha widget background color
			border-color: #fff;
		}
		 
		#recaptcha_table {
			border-color: #fff !important; //reCaptcha widget border color
		}
		
		#recaptcha-table label {
			margin: 0 0 5px 8px;
		}
		
		#recaptcha-table {
			margin-left: -8px;
		}

/*-------------- PORTFOLIO DETAILS --------------*/

#hide-project-preview {
	width: 100%;
	position: absolute;
		top: 0px;
		left: 0px;
	background-color: #111;
	opacity: 0.8;
	-moz-opacity:0.8;
	-khtml-opacity: 0.8;
	filter: alpha(opacity=80);
	z-index: 11;
}

.project-detail {
	width: 930px;
	height: auto;
	position: absolute;
	background-color: #FFF;
	z-index: 12;
	padding: 15px 15px 9px 15px;
}

	.hide-project-detail {
		float: right;
	}
	
		.hide-project-detail a:first-child {
			margin-right: 894px;
		}
		
		a.hide-button {
			width: 16px;
			height: 16px;
			display: inline-block;
		}
		
		a.hide-button:hover {
			background: url('images/btnCloseHover.png') no-repeat;
		}
		
		a.hide-button:focus {
			background: url('images/btnCloseFocus.png') no-repeat;
		}
		
		.continued {
			position: relative;
				top: 10px;
		}
		
		.final {
			margin-top: 11px;
		}
		
			a.hide-button img {
				vertical-align: 2px;
			}
		
	.project-detail ul li {
		margin-left: 30px;
	}
	
	.project-detail .client-name {
		padding-top: 14px;
	}
	
	.project-detail .client-type {
		padding-top: 2px;
	}
	
	.project-detail .product {
		padding: 5px 0 22px 0;
	}
	
	.project-detail .problem,
	.project-detail .solution,
	.project-detail .technology-used {
		list-style-image: url(images/bullet01.png);
		list-style-position: outside;
		margin-left: 45px;
		line-height: 20px;
		width: 540px;
	}
	
	.project-detail .problem, .project-detail .solution {
		margin-bottom: 5px;
	}

	.website-image {
		padding-top: 26px;
		width: 870px;
	}
	
		.website-image a:first-child {
			margin-bottom: 5px;
		}
	
	.non-website-image {
		padding-top: 41px;
		width: 870px;
	}

.project-preview {
	width: 310px;
	margin-top: 29px;
	float: left;
	border-top: 2px solid #00BDF2;
	display: block;
}

	.project-preview .image {
		width: 280px;
		margin: 30px 0 0 15px;
	}
	
		.project-preview .image a {
			display: block;
			border-top: 10px solid #ccc;
			border-bottom: 10px solid #ccc;
			margin-top: 3px;
			margin-bottom: -3px;
		}
		
			.project-preview .image a:hover {
				border-top: 10px solid #00BDF2;
				border-bottom: 10px solid #00BDF2;
			}
		
	.project-preview .client-and-product {
		margin: 7px 0 0 14px;
	}