/* style sheet of littlelight.co.uk 
	author Sue Fernandes
	August 2009 */
	/* colors used: dark border: #0e0512
					pink text: color: #FD5CA6
					
	
	*/
	
	
/* reset formats */
* {margin: 0;
	padding: 0;}
	
.body {font-size: 62.5%; font-family: Arial, Helvetica, sans-serif;}	
	
html 				{overflow-y: scroll;}
ul 					{list-style: none;}
p 					{font-size: .9em; line-height: 1.2em; text-align:justify; margin-bottom: 1em;}

a 					{outline: none; text-decoration: none;}
a:focus				{outline: none;}


img 				{border: none;}

h1 					{}
h2 					{font-size: 1.2em; margin-bottom: 1em;}
h3 					{font-size: 1.1em; margin-bottom: 1em;}


/* page setup */

body 							{background: url(images/body-bk.png) repeat-x #0e0512; }

#pagewrap 						{width: 960px; margin: 0 auto 0 auto; }
#pagewrap a:hover, a:active 	{color: #FFCCCC;}

#header 						{position: relative; width: 960px; height: 103px; 
								background: url(images/header.png) no-repeat;
								text-indent: -9999px;}
	
#nameplate 						{width: 960px; height: 140px; background: url(images/nameplate.png) no-repeat;
								text-indent: -9999px;}
	
#main_content 					{width: 100%;}

#main_content span				{color: #FD5CA6; font-weight: bold;}
	
/* navigation */

#nav 							{position: absolute; top: 44px; left: 339px; width: 621px;}
	
ul#navigation li 				{display: inline;}
#nav ul#navigation li a 		{display: block; height: 53px; float: left; text-indent: -9999px;}
	
		#nav ul#navigation li.index a {width: 152px; 
		background: url(images/home_nav.png) no-repeat; background-position: top;}
		#nav ul#navigation li.index a:hover, #nav ul#navigation li.index a:active {
		background-position: bottom;}
		
		#nav ul#navigation li.about a {width: 148px; 
		background: url(images/about_nav.png) no-repeat; background-position: top;}
		#nav ul#navigation li.about a:hover, #nav ul#navigation li.about a:active {
		background-position: bottom;}
		
		#nav ul#navigation li.portfolio a {width: 148px; 
		background: url(images/portfolio_nav.png) no-repeat; background-position: top;}
		#nav ul#navigation li.portfolio a:hover, #nav ul#navigation li.portfolio a:active
		{background-position: bottom;}
		
		#nav ul#navigation li.contact a {width: 152px; 
		background: url(images/contact_nav.png) no-repeat; background-position: top;}
		#nav ul#navigation li.contact a:hover, #nav ul#navigation li.contact a:active {
		background-position: bottom;}
	
		#nav ul#navigation li.active_button a  {background-position: bottom;}
		

/* index page */

#index #main_content				{width: 960px; height: 387px; background: url(images/main-bk.png) no-repeat;
									padding: 60px 70px 0 50px;}

#index #main_left 					{width: 400px; margin-right: 500px;}
	
#index #main_left p					{color: #fff;}


#portfolio 							{position: relative; width: 960px; height: 153px; 
									background: url(images/portfolio.png) no-repeat;}
		
	#portfolio h2 					{position: absolute; top: -15px; left: 50px; color: #FD5CA6;}
	#portfolio h3 					{position: absolute; top: 60px; left: 710px;  font-size: .9em;}
	#portfolio h3 a 				{color: #FD5CA6;} 
	#portfolio ul#thumbnails 		{height: 102px; margin: 0 0 auto 90px; 
									padding-top: 20px;}
	#portfolio ul#thumbnails li 	{display: block; width: 184px; 
									margin: 0 10px 0 10px; float: left;}
		
		
		
		
/*portfolio page */

#portfolio_page #main_content 		{width: 960px; height: 520px; 
									background: url(images/page_main_bk.png) no-repeat;
									padding: 80px 50px 0px 0px;}

#wrapper 							{width: 100%; text-align: center;}


/* contact page */

#contact_page #main_content 		{position: relative; width: 100%; height: 550px; 
									background: url(images/page_main_bk.png) no-repeat; padding-top: 50px;}
		
#contact_page #main_content h2 		{position: absolute; top: 500px; left: 160px; 
									color: #fff;}
#contact_page #main_content h2 a	{color: #FD5CA6;}
#contact_page #main_content h2 a:hover, #contact_page #main_content h2 a:active {color: #FFCCCC;}
		
.clear 								{ clear: both; }
fieldset							{ border: none; }
input, textarea, a 					{ outline: none; }
			
#page-wrap 							{width: 800px; margin: 0 auto;
									background: url(images/form-bg.png) top center no-repeat;
									height: 450px;	}
form 								{padding: 100px 0 0 76px;}
h1 									{font-size: 1em; text-align: center;
									padding-top: 200px;	color:#0e0512;	}
									
#formLeft 							{width: 320px; float: left;	}
	#formLeft input 				{width: 250px; margin: 0 0 20px 0; border: none;
									text-align: center; background: none; margin: 13px 0 0 8px;
									font-size: 1.1em;	}
	#formLeft .input-bg 			{background: url(images/form-sm-bg.png) bottom left no-repeat transparent;
									height: 45px; margin-bottom: 10px; position: relative; }
	#formLeft .active				{background: url(images/form-sm-bg.png) top left no-repeat transparent;	}
	
	
#formRight 							{width: 360px; float: right;padding-right: 44px; }
	#formRight textarea 			{width: 298px; height: 209px; display: block;
									border: none; background: none; margin: 0 0 0 20px; padding: 13px 0 13px 0;
									font-family: Helvetica, sans-serif; font-size: 1.2em; overflow: auto; }
	#formRight .message-bg 			{background: url(images/message-bg.png) bottom left no-repeat transparent;
									height: 238px; 	}
	#formRight .active 				{background: url(images/message-bg.png) top left no-repeat transparent;	}
	
label 								{display: block; font-size: 1.2em;	text-indent: 10px;
									font-weight: bold;	color: #0e0512; }
	label.error 					{position: absolute; top: -16px; right: 49px;
									padding: 3px; color: #fd5ca6; font-size: .9em; text-align: right;
									font-style: italic; font-weight: normal; }
	input.submit-button				{float: right; padding-right: 110px; }
					
					
					
/* about page */
			
#about_page #main_content 			{width: 100%; height: 520px; 
									background: url(images/page_main_bk.png) no-repeat;
									padding: 80px 0px 0px 50px;}
					
#about_page #main_content p 		{color: #fff; margin-right: 300px;}
					
#about_page #main_content img 		{float: right; margin-right: 90px;}
					

/*footer */

#footer 							{width: 960px; height: 83px; background: url(images/footer.png) no-repeat;
									color: #fff;}

	ul#footer_nav					{text-align: center; padding-top: 15px;}
	ul#footer_nav li 				{display: inline;}
	ul#footer_nav li a 				{padding: 5px; color: #fff;}
	ul#footer_nav li a:hover, 
	ul#footer_nav li a:active 		{color: #FD5CA6;}