/*

Last Updated: 30'th May 2010


I. Table Of Contents

	I. Table Of Contents

	1. Reset
	2. Common Classes - common classes
	3. Layout - handles the layout grid -- includes header and footer styles
		a. Branding
		b. Contents
		c. Footer
	4. Type - handles typography
	5. Widget - common widgets like readmore, getintouch etc
	6. Pagewise - Styles specific to a page
	7. Print 
	8. Handheld

*/



/********************************************************************************

 1. Eric Meyer's CSS Reset -> Thank you  Eric :)

************************************************************************************/
/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background:none repeat scroll 0 0 transparent;
	border:0 none;
	font-size:100%;/*To fix the text resizing exaggeration of IE6 and IE7. Thank you-> A List Apart- http://www.alistapart.com/articles/howtosizetextincss/ */
	margin:0;
	outline:0 none;
	padding:0;
	text-decoration:none;
	/*vertical-align:baseline;*/
}
body {
	margin: 0 auto;
    position: relative;
    /*background:#fff url(images/body-bg.jpg) repeat left top;*/
	color: #444;
	font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    line-height: 1.5em; /* Baseline grid of 24px -> 16x1.5=24 */
    text-align: center; /* Margin 0 auto may not postion the div centrally in IE 6- */
}
ol, ul {
	list-style: none;
}
:focus {
	outline: 0;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/********************************************************************************

 2. Common Classes

************************************************************************************/
.hidden{display:none !important;}
.invisible{visibility:hidden;}
.fleft{float:left;}
.fright{float:right;}
.resetmargin{margin:0 !important;}
.resetpadding{padding:0 !important;}
.clearfloat{overflow:auto;} /* Further Reading-> http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ */
.clearall{clear:both;}
.clearleft{clear:left;}
.tleft{text-align:left;}
.tright{text-align:right;}
.tcenter{text-align:center;}
/* commonly used grids */
.grid60{max-width:3.75em;}
.grid220{width:13.75em; /*220px */margin-left:1.25em; /*20px */}
.grid300{width:18.75em; /*300px */margin-left:1.25em; /*20px */}
.grid380{width:23.75em; /*380px */margin-left:1.25em; /*20px */}
.grid540{width:33.75em; /*540px */margin-left:1.25em; /*20px */}
.grid620{width:38.75em; /*540px */margin-left:1.25em; /*20px */}
.grid700{max-width:43.75em; /*700px */margin-left:1.25em; /*20px */}
a{
	color:#FF6600;
	text-decoration:none;
}
a:hover{
	color:#090;
	text-decoration:none;
}

/********************************************************************************

 3. Layout / Grid

************************************************************************************/
#branding{
	max-width:58.75em; /*940px -> 16x58.75=940*/
	padding:1.5em 0.625em; /* 24px 10px */
	margin:0 auto;
}
	/* BRANDING */
	#logo{
		width:220px;
		display:inline;
		float:left;
		font:0.75em normal Arial, Helvetica, sans-serif;
		color:#999;
	}
	#logo .slogan{
		display:block;
	}
	/* MAIN NAVIGATION */
	#navigation{
		float:right;
		margin:1.5em 0 0;
	}
	#navigation li{
		float:left;
		display:inline;
		margin:0 1.3125em; /* 21px */
	}
	#navigation li a{
		font:1.125em/2.25em Arial, Helvetica, sans-serif;/* font: 18px/36px */
		border-top:0.25em solid #f9f9f9; /*4px */
		color:#C2DFE5;
		float:left; /*Ie6, Mozilla */
	}
	#navigation li a:hover{
		border-top:0.25em solid #333;/*4px */
		/*text-shadow: 3px 3px 10px #999;*/
		color:#333;
	}
	#navigation li a.selected{
		font:normal 1.125em/2.25em Arial, Helvetica, sans-serif;/* font: 18px/36px */
		/*text-shadow: 3px 3px 10px #999;*/
		border-top:0.25em solid #333;/*4px */
		color:#333;
		float:left; /*Ie6, Mozilla */
	}
	/* END BRANDING */
	
#contents{
	max-width:58.75em; /*940px -> 16x58.75=940*/
	padding:1.5em 0.625em; /* 24px 10px */
	margin:0 auto;
	overflow:auto;
}
	.page-header{
		border:0.0625em solid #E8E8EA; /*1px */
		padding:.5em .8em; /*8px */
		margin:0 0 1.5em 0;
		text-align:left;
		background:#F4F4F4;
	}
.footerWrapper{
	background:#F9F9F9 url(images/footer-bg.jpg) repeat-x left top;
	overflow:auto;
	margin-top:1.5em;
}
	#footer{
		max-width:58.75em; /*940px -> 16x58.75=940*/
		padding:1.5em 0.625em; /* 24px 10px */
		margin:0 auto;
		clear:both;
		overflow:auto;
	
	}
		.favouriteWebsites li a{
			display:block;
			font:normal 0.75em/1.75em Arial, Helvetica, sans-serif;
			background:url(images/light_bulb_fade.png) no-repeat left 0;
			padding-left:1.5em;
			text-align:left;
			color:#666;
			text-decoration:none;
			/*border-bottom:0.0625em solid #E8E8EA; /*1px */
		}
		.favouriteWebsites li a:hover{
			color:#F30;
			padding-left:1.75em;
			background:url(images/light_bulb.png) no-repeat .25em 0;
		}
		.photos{
			float:left;
			margin-bottom:0.75em;
		}
		.photos li{
			float:left;
		}
		.photos li{
			margin-left:1.25em; /*20px */
		}
		#quickcontact label{
			display:block;
			float:left;
			text-align:left;
			clear:both;
			margin-bottom:0.55em;
			font:normal 0.75em/1em Arial, Helvetica, sans-serif;
		}
		#quickcontact input{
			clear:left;
			float:left;
			font:normal 0.75em/1.75em Arial, Helvetica, sans-serif;
			color:#666;
			width:100%;
			height:2em;
			margin-bottom:1em;
			border-top:1px solid #ABADB3;
			border-left:1px solid #E2E3EA;
			border-bottom:1px solid #E3E9EF;
			border-right:1px solid #DBDFE6;
		}
		#quickcontact input:focus{
			background:#E3E9EF;
			border:1px solid #D3DDE7;
			color:#333;
			height:2em;
		}
		#quickcontact textarea{
			clear:left;
			float:left;
			font:normal 0.75em/1.75em Arial, Helvetica, sans-serif;
			color:#666;
			display:inline;
			width:99%;
			margin-bottom:1em;
			border-top:1px solid #ABADB3;
			border-left:1px solid #E2E3EA;
			border-bottom:1px solid #E3E9EF;
			border-right:1px solid #DBDFE6;
		}
		#quickcontact textarea:focus{
			background:#E3E9EF;
			border:1px solid #D3DDE7;
			color:#333;
		}
		#quickcontact #submit{
			font:normal 0.75em/1.75em Arial, Helvetica, sans-serif;
			padding:.35em;
			border:none;
			color:#fff;
			width:9em;
			margin-top:.15em;
			height:auto;
			cursor:pointer;
			background:#666;
		}
		#quickcontact #submit:hover{
			background:#555;
			color:#fff;
		}
		.siteinfo{
			display:block;
			background:#fff;
			border-top:1px solid #f1f1f1;
		}
		.siteinfo p{
			text-align:center;
			font:normal 0.75em/1.75em Arial, Helvetica, sans-serif;
			color:#999;
			clear:both;		
		}
		.siteinfo p a{
			color:#999;
			text-decoration:underline;
		}
		.siteinfo p a:hover{
			color:#fff;
			background:#000;
			text-decoration:underline;
		}
/********************************************************************************

 4. Typography

************************************************************************************/

h1{
	font:normal 1.6875em/150% Georgia, "Times New Roman", Times, serif; /*27px */
	display:inline;
	text-align:left;
	text-shadow: 1px 1px 0 #fff;
}
.about h1{
	font:normal 1.6875em/150% Georgia, "Times New Roman", Times, serif; /*27px */
	padding:0;
	background:#000;
	color:#fff;
	display:inline;
	text-shadow: 1px 1px 0 #000;
}
h3{
	font:normal 1.125em/1.6875em Arial, Helvetica, sans-serif; /*18px */
	color:#83BECB;
}
#footer h3{
	margin-bottom:0.75em;
	text-align:left;
	clear:both;
}
h4{
	font:normal 0.875em/1.2em Arial, Helvetica, sans-serif; /*15px */
	color:#999;
	margin:0.75em 0 0 0;
}
h5{
	font:normal 0.75em/1.2em Arial, Helvetica, sans-serif; /*15px */
	color:#999;
	margin:0 0 0.5em 0;
}

.home h2{
	font:bold 0.75em/1.5em Arial, Helvetica, sans-serif;
	margin:0.75em 0;
}
h2.hdrrecent{
	font:normal 1.125em/1.6875em Arial, Helvetica, sans-serif; /*18px */
	color:#83BECB;
	margin:0.75em 0;
}
p{
	font:normal 0.75em/1.75em Arial, Helvetica, sans-serif;
	margin:0.75em 0;
}
.writeup p{
	font:normal 1.125em/1.6875em Georgia, "Times New Roman", Times, serif;
	color:#333;
}


/********************************************************************************

 5. Widget - common widgets like readmore, getintouch etc

************************************************************************************/

.getintouch{
	display:inline;
	font:normal 1.5625em/1.5em Georgia, "Times New Roman", Times, serif;
	color:#fff;
	clear:left;/* IE7 */
	background:#FF6600;
	padding:0.25em;
	margin:0 .625em;
}
.getintouch:hover{
	background:#FC0;
	color:#333;
}
.getinsmall{
	font-size:1.275em;
}



/********************************************************************************

 6. Pagewise - Styles specific to a page

************************************************************************************/

/* HOME PAGE */
.home .imgHolder{
	background:url(images/portfolio-recent.jpg) no-repeat center;
	height:16.75em; /*268px */
	position:relative;
}
.recentwork{
	border:0.0625em solid #E8E8EA;
	background:#F4F4F4;
	padding:0.5625em; /*9px*/
	margin:0 0 1.5em 0; /* 24px */
}
.home .imgHolder a{
	display:block;
	/*padding:1.5em 0.625em; /* 24px 10px */
	height:16.75em; /*268px */
	color:#fff;
}
.home .viewportfoliobar{
	display:block;
	cursor:pointer;
	background:url(images/homeportfolio_bg.png) repeat top left; /* IE 8 for it does not support rgba */
	background:rgba(00,00,00,0.6);
	position:absolute;
	bottom:2em;
	left:0;
	font:normal 1.2em/1.3em Georgia, "Times New Roman", Times, serif;
	text-indent:1.5em;
	padding:1.5em 0;
}
.home .imgHolder a .viewportfoliobar{
	opacity: 0;
	-webkit-transition: opacity 0.5s linear;
}
.home .imgHolder a:hover .viewportfoliobar {
  opacity: 1;
  display:block;
  width:100%;
}
.home .services li{
	display:inline;
	float:left;
}
.home .services li p{
	margin-top:0;
}


/* ABOUT PAGE */

.about .page-header{
	border:none;
	padding:.5em 0; /*8px */
	margin:0 0 1.5em 0;
	background:none;
}
.about .imgHolder{
	width:33.5625em;
	height:27.875em; /*268px */
}
.about .top{
	clear:both;
	overflow:auto;
	margin-bottom:1.5em;
}

/* PORTFOLIO PAGE AND GALLERY PAGE */
.subnavigation{ /* To replace page-header in gallery page */
	padding:0.5em;
	background:#eee;
	overflow:auto;
	margin:0 0 1.5em 0;
}	
.portfolio{
	overflow:auto;
}
.portfolio .services{
	background:#F8F8F8;
	float:left;
	max-width:12.375em;
	padding:0.875em 0.375em 0.875em 0.875em;
	border:0.0625em solid #EEEEEE;
	float:left;
}
.portfolio .services h3{
	border-bottom:0.25em solid #CFE2E6;
}
.serviceslist{
	float:left;
	clear:both;
	margin:.45em 0 .75em 0;
}
.serviceslist li{
	font:normal 0.75em/2em Arial, Helvetica, sans-serif;
	border-bottom:1px solid #eee;
	text-indent:2.5em;
	background:url(images/icon-tick.png) no-repeat left center;
}
.templateframe{
	background:#F9F9F9;
	border:0.0625em solid #eee;
	width:13.625em;
	float:left;
	margin-bottom:1.5em;
	height:18em;
	margin-left:1.25em;
}
.nomarginleft{
	margin-left:0;
}
.template{
	margin:0.5625em;
	background:#ddd;
	width:12.5em;
	height:13.5em;
	top:12.5%;
	left:25%;
}
.templateframe p{
	margin:0 0.7em 0 0;
	text-align:right;
}
.templ001{
	background:url(images/template001.jpg) no-repeat -2em -2em;
}
.templ002{
	background:url(images/template002.jpg) no-repeat -2em -2em;
}
.templ003{
	background:url(images/template003.jpg) no-repeat -2em -2em;
}
.templ004{
	background:url(images/template004.jpg) no-repeat -2em -2em;
}
.templ005{
	background:url(images/template005.jpg) no-repeat -2em -2em;
}
.templ006{
	background:url(images/template006.jpg) no-repeat -2em -2em;
}
.templatehover{
	display:block;
	background:rgba(00,255,200,0.3);
	height:100%;
}
.templatehover:hover{
background:none;
}

.portfolio .prev{
	float:left;
	font:normal 0.75em/1.9em Arial, Helvetica, sans-serif;
	color:#666;
	background:#ccc;	
	width:80px;
}
.portfolio .next{
	float:right;
	font:normal 0.75em/1.9em Arial, Helvetica, sans-serif;
	color:#666;
	background:#ccc;
	width:80px;
}
.portfolio .main{
	display:block;
	font:normal 0.75em/1.9em Arial, Helvetica, sans-serif;
	color:#666;
	background:#ccc;
	margin-left:21em;
	float:left;
	width:250px;
}
.prev:hover, .main:hover, .next:hover{
	color:#fff;
	background:#333;
}
.portfolio .imgHolder{
	width:58.75em;
}
/*Used in homepage */
.viewportfolio{
	display:none;
}


/* CONTACT US PAGE */
.onlineHabitat li{
	background:url(images/light_bulb.png) no-repeat left center;
	text-indent:20px;
}
.onlineHabitat li a{
	font-size:.75em;
	color:#444;
}
.onlineHabitat li a:hover{
	color:#ff0000;
}

/********************************************************************************

 6. Print

************************************************************************************/

/********************************************************************************

 7. Handheld

************************************************************************************/
@media (max-width: 729px) {
	body{
		font-size:.9em;
	}
	.services_home, .blog, #footer .col02, .hide640, .templateframe p{
		display:none;
	}
	.about .mypic{
		clear:both;
		text-align:center;
	}
	.about .grid380{
		clear:both;
	}
	.portfolio .templateframe, .templatefull{
		margin:0;
	}
	.templateframe{
		background:none;
		border:none;
		width:12.5em;
		height:13.5em;
	}
	.template{
		width:12.5em;
		height:13.5em;
	}
	#navigation li{
		margin:0 0.75em; /* 12px */
	}
	
}
@media (max-width: 480px) {
	body{
		font-size:.9em;
	}
	#logo{
		clear:both;
		float:none;
	}
	#logo span{
		display:none;
	}
	#navigation{
		float:none;
		clear:both;
	}
	.hidehh, .about .mypic{
		display:none;
	}
	.grid300{
		margin:0;
		clear:both;
		float:none;
	}
	#navigation li a{
		font:.75em/2.25em Arial, Helvetica, sans-serif;/* font: 18px/36px */
	}
	#navigation li a.selected{
		font:normal .75em/2.25em Arial, Helvetica, sans-serif;/* font: 18px/36px */
	}
	.viewportfolio{
		display:inline;
		clear:left;
	}
	
}
@media (min-width: 1300px) {
	
}

.callme{
	text-align:right;
	font-size:12px;
	color:#999;
}
.callme span{
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#FF6600;
	font-size:24px;
}

/* TWITTER */
.twtr-hd, .twtr-ft{
	display:none;
}
.twtr-tweet-text p{
	font-size:1em;
}
.twtr-widget em, .twtr-widget .twtr-new-results{
	font-size:11px !important;
}