/*

Lovingly designed and coded by John Mani
	JOHN MANI, 2009
	www.johnmani.com
	
	
	Colours:

*/


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

	}
fieldset, img { 
	border: 0;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}
ol, ul {
	list-style: none;
	}
address, caption, cite, code, dfn, em, strong, th, var {
	font-weight: normal;
	font-style: normal;
	}
caption, th {
	text-align: left;
	}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font-size: 100%;
	}

q:before, q:after {
	content: '';
	}
abbr, acronym { 
	border: 0;		
	}
	
.clear {clear: both;}




/*Page*/


/*STATIC*/
body		{
			background-image: url(images/tile.jpg); background-repeat: repeat;
			font-family: Georgia; font-size: 0.85em; color: #3b3b3b;	
			scrollbar-shadow-color: white;
			scrollbar-highlight-color:white;
			scrollbar-face-color: white;
			scrollbar-3dlight-color: white;
			scrollbar-darkshadow-color: white;
			scrollbar-track-color: white;
			scrollbar-arrow-color: white;
			
			}		
			

p			{line-height:17px; margin-bottom: 15px;}

#pagewrap 	{
			background-image: url(images/background.jpg); background-repeat: repeat-y;
			width: 967px; height: 720px;
			-moz-border-top-image: url(images/border.jpg);
			-moz-border-bottom-image: url(images/border.jpg);
			border: #f1f1f1; border-style: solid; border-width: 25px;
			margin-right: auto; margin-left: auto;
			position:relative; top:20px;
			margin-bottom: 40px;
			}
	#bordertop {width: 967px; height: 1px;
				background-image: url(images/border.jpg); background-repeat: no-repeat;}
	#borderbottom {	width: 967px; height: 1px;
					background-image: url(images/border.jpg); background-repeat: no-repeat;
					position: relative; top:719px;}




#header	{
			background-image: url(images/header.jpg); background-repeat: no-repeat;
			width: 967px; height: 82px; position: relative; top: 44px;
		}

h1 a{
	text-indent: -9999px;
	width: 187px; height: 81px;
	background-color: transparent;
	position: relative; top:0px; left:58px;
	display: block;
	outline: none;
	}
h1	{width: 187px; height: 81px; position: relative; top:0px; left:58px;}
	
h2	{
	text-indent: -9999px;
	float: left; 
	}

#menu	{
		width: 400px;
		float: right;
		}
		
	#home{position: absolute; top:-31px; left:576px; display: none;}
	#about{position: absolute; top:-29px; left:652px; display: none;}
	#portfolio{position: absolute; top:-13px; left:725px; display: none;}
	#quote{position: absolute; top:-22px; left:843px; display: none;}
	
	#onhome{position: absolute; top:-31px; left:576px;}
	#onabout{position: absolute; top:-29px; left:652px;}
	#onportfolio{position: absolute; top:-13px; left:725px;}
	#onquote{position: absolute; top:-22px; left:843px;}

	.home {
		text-indent: -9999px;
		width:46px; height: 17px;
		position:relative; top:-52px; left: 6px;
		background-color: transparent;
		display:block;
		outline: none;
		
		}

	.about {
		text-indent: -9999px;
		width:51px; height: 17px;
		position:relative; top:-69px; left: 81px;
		background-color:transparent;
		display:block;
		outline: none;
		z-index: 100;
		}


	.portfolio {
		text-indent: -9999px;
		width:63px; height: 17px;
		position:relative; top:-86px; left: 155px;
		background-color: transparent;
		display:block;
		outline: none;
		}


	.quote {
		text-indent: -9999px;
		width:102px; height: 17px;
		position:relative; top:-103px; left: 241px;
		background-color: transparent;
		display:block;
		outline: none;
		}
	

	.opacity	{
			filter:alpha(opacity=75);  
  			opacity:.75;
  			-webkit-opacity:.75;
			}

#content	{
			width: 967px; height: 464px; position: relative; top: 44px;
			z-index: 400;

			}
		
#footer	{
		background-image: url(images/footer.jpg); background-repeat: no-repeat;
			width: 967px; height: 99px; position: relative; top: 44px;
			z-index: 1;
		
		}
	#quotation	{text-indent: -9999px;}
	#email		{text-indent: -9999px;
				width:160px; height: 25px;
				position:relative; top:-6px; left: 576px;
				background-color: transparent;
				display:block;
				outline: none;
				}
	#phone		{}	

/*CONTENT*/



#homeContent	{
			background-image: url(images/homeContent.jpg); background-repeat: no-repeat;
			width: 829px; height: 403px; position: relative; top: 50px; left: 51px;
				}
	#services	{
				width:200px; height: 250px;	
				position: relative; top: 50px; left: 514px;
				background-color:transparent;
				text-indent: -9999px;
				}
		#design		{width: 55px; height: 17px;
					position: relative; top: 16px; left: 31px;
					background-color: transparent;
					text-indent: -9999px;
					}
		#project	{width: 163px; height: 17px;
					position: relative; top: 27px; left: 31px;
					background-color: transparent;
					text-indent: -9999px;
					}
		#search		{width: 160px; height: 17px;
					position: relative; top: 39px; left: 31px;
					background-color: transparent;
					text-indent: -9999px;
					}
		#blogs		{width: 49px; height: 17px;
					position: relative; top: 51px; left: 31px;
					background-color: transparent;
					text-indent: -9999px;
					}
		#ecommerce	{width: 91px; height: 17px;
					position: relative; top: 63px; left: 31px;
					background-color: transparent;
					text-indent: -9999px;
					}
		#flash		{width: 132px; height: 17px;
					position: relative; top: 75px; left: 31px;
					background-color: transparent;
					text-indent: -9999px;
					}
		#you		{width: 97px; height: 17px;
					position: relative; top: 88px; left: 31px;
					background-color: transparent;
					text-indent: -9999px;
					}

		#bolt		{width: 16px; height: 31px; position: absolute;
					top: 80px; left: 518px;
					display: none;
					}
		#bulb		{width: 168px; height: 152px; position: absolute;
					top: -39px; left: 320px;
					display: none;
					}			
					


#aboutContent	{
			background-image: url(images/aboutContent.jpg); background-repeat: no-repeat;
			width: 869px; height: 451px; position: relative; top: 20px; left: 0px;
			z-index: 300;
				}
	#aboutText	{	position: absolute; top:75px; left:575px;
					width: 290px; height: 380px; 
				}
	.dropcap 	{ 	float:left; font-size:22px; 
					line-height:auto; padding-top:2px; padding-left: 2px;
					position: relative; top: -3px; line-height: 15px;
				}					

	#twitter	{
				position: absolute; top: 425px; left: 569px;
				height: 100px; width: 389px;
				z-index: 200;
				}
		#twitter a{outline:none;}

		#tbird	{
				background-image: url(images/bird.jpg); background-repeat: no-repeat;
				width: 40px; height: 33px; position: relative; left:255px; top:-30px;
				}
		#tbox	{
				background-image: url(images/tbox.jpg); background-repeat: no-repeat;
				width: 342px; height: 87px; position: relative; left:0px; 
				z-index: 100;
				display: none;
				}
		#boxbubble	{background-image: url(images/thanksbubble.png); background-repeat: no-repeat; 
						display: block; height: 20px; width: 24px; 	
						position: relative; top:-20px; left:230px;	
					}
		.tweet	{
				width: 318px; height: 53px;
				position: relative; top:5px; left:15px;
				display: block;
				font-size: .9em;
				}
				
		.tweet a{font-size: .8em; margin-left: 10px; text-decoration: none;}


#quoteContent	{
			background-image: url(images/quoteContent.jpg); background-repeat: no-repeat;
			width: 661px; height: 430px; position: absolute; top: -1px; left: 306px;			
				}
	#quoteText	{
					position: absolute; top:45px; left:-246px;
					width:527px; height: 95px;
				}			
	#texttop	{
					position: relative; top:0px; left:0px;
					width:240px; height: 95px;
					z-index: 1000;
				}		


	/*FORM*/					
	form		{position: relative; top:28px; font-size: 1.1em;}
	td			{width: auto;}
	textarea	{width:490px; margin-bottom:5px }
	table		{width: 504px;}
	input		{width: 150px;}
	#1furl		{float: right;}
	#1femail		{display: block; margin-left: auto; margin-right: auto;}
	1small#femaillabel	{display:table-cell; text-align: center;}
	

	.optional		{font-size: smaller; color:#404040;}
	.button			{width: 70px;}
	div.error			{font-family: "Arial", "Arial"; font-weight: normal; font-size: 0.7em; 
		color: #f46017; position: relative; top:-70px; left:0px; width: 154px;}
	
	small 	{
		font-family: "Arial", "Arial"; font-weight: normal; font-size: 0.80em; 
		color: #202020; line-height: 18px; margin-top: 5px; margin-bottom: 13px;
		}	

	#thanks	{
		position: relative; top:51px; font-size: 2.6em;
		}
		
	#thankyou	{
				position: relative; top: 25px;
				background-color: white; height: 162px; width: 400px;
				-moz-border-radius:15px;
				-webkit-border-radius:15px;
				-moz-box-shadow: #b2c3c5 0px 0px 15px;
				-webkit-box-shadow: #b2c3c5 0px 0px 15px;
				display: none;
				}	
		.thanksmessage 	{
						font-family: arial; font-size: 1.5em; position: relative; left: 50px; top:20px;
						}	
		#thanksbubble	{background-image: url(images/thanksbubble.png); background-repeat: no-repeat; 
						display: block; height: 20px; width: 24px; 	
						position: relative; top:-20px; left:315px;
						
						}		
	
	
	/*Form Extra*/
	.labelname{height: 25px; width: 169px; position: absolute; left:0px; top:-3px; }
	.labelemail{height: 25px; width: 169px; position: absolute; left:168px; top:-3px; }
	.labelurl{height: 25px; width: 169px; position: absolute; left:336px; top:-3px;}
	
	.inputname{height: 25px; width: 169px; position: absolute; left:0px; top:18px; }
	.inputemail{height: 25px; width: 169px; position: absolute; left:168px; top:18px; }
	.inputurl{height: 25px; width: 169px; position: absolute; left:336px; top:18px; }
	
	
	
	
		
	.soon	{
		font-family: "Arial", "Arial"; font-weight: normal; font-size: 1.25em; 
		color: #404040; line-height: 18px; margin-top: 5px; margin-bottom: 13px;
		}	
	
	.altemail {
		font-family: "Arial"; font-weight: normal; font-size: 0.8em; 
		color: #404040;
		text-decoration:none	
		}

	.altemail a{
		font-family: "Arial"; font-weight: normal; font-size: 1.0em; 
		color: #404040;
		text-decoration:none	
		}

	#quotefooter	{
		background-image: url(images/quotefooter.jpg); background-repeat: no-repeat;
			width: 967px; height: 99px; position: relative; top: 44px;}

#portfolioContent	{height: auto; position:relative; top:44px;}
	
	#portfoliowrap 	{
			background-image: url(images/background.jpg); background-repeat: repeat-y;
			width: 967px; height: auto;
			-moz-border-top-image: url(images/border.jpg);
			-moz-border-bottom-image: url(images/border.jpg);
			border: #f1f1f1; border-style: solid; border-width: 25px;
			margin-right: auto; margin-left: auto;
			position:relative; top:20px;
			margin-bottom: 40px;
			
			}
	#portfoliospacer	{height: 100px;}
	#headerspacer	{height: 1px;}	
	#featuredwork	{background-image: url(images/featuredwork.jpg);  
					display: block; height: 40px; width:364px; z-index: 100;
					position: absolute;	left:50px; top:37px;
					}
	.portfolioitem	{
			background-image: url(images/portfolioBG.jpg); background-repeat: no-repeat;
			height: 636px; width: 516px; position: relative; left: 50px; top:70px;	
			margin-bottom: 100px;
	
					}
		.portfolioitem img	{position:absolute; margin-left: auto; margin-right: auto;
							left:15px; top: 13px;	
							}			
		.services			{position: absolute; left: 29px; top: 592px;
							width: 475px; height: 35px;
							}
		.sitetitle		{
						position: relative; left: 0px; top: 0px;
						width: 250px; overflow: visible;
						font-family: Rockwell,"trebuchet ms"; font-size: 2em; font-weight: bold;
						margin-bottom: 20px;
						}
		
		.sitedetails	{position: absolute; left: 570px; top: 6px;
						width: 226px;						
						}			
					
			.sitedetails a{color: #377273; text-decoration: none;}
		
						
	#portfoliofooter	{
		background-image: url(images/footer.jpg); background-repeat: no-repeat;
			width: 967px; height: 99px; position: relative; top: -29px;}		
	
			
	#bordertop {width: 967px; height: 1px;
				background-image: url(images/border.jpg); background-repeat: no-repeat;}
	#borderbottom {	width: 967px; height: 1px;
					background-image: url(images/border.jpg); background-repeat: no-repeat;
					position: relative; top:719px;}