/* -----------------------------------------------------------------
	Creation: 	Original:	14/02/2010
	Author:		Robert Dillon
				www.refreshingedge.com
	Contents
	-----------------------------
	OTHER CSS FILES:
	resets.css
		00		reset margins etc
	fonts.css
		00		@font-face (not general font styles)
	globals.css
		00		stretch the page height
		01		clears, for floats etc
		02		noDisplay
		03		floats
		04		font/text styles	
		05		global site color	
	THIS CSS FILE:
	00	heading styles
	01	standard, global, text formatting
	02	body
	03	siteWrapper
	04	headerWrapper	(inc. logo and top links)
	05	mainLinks									
		05a	first unordered list (parent)
		05b	second unordered list (nested/child)
		05c	mouseover effects
		05d	show on active/current page										
	06	pageContent
	07	three column
		07a	specific columns (headings, img etc)
		07b	ticks as list
		07c	drops as list
		07d	portfolio-small	-	smaller homepage portfolio column
	08	two column	(as used on homepage)
	09	page splits (used on portfolio and contact)
		09a	larger split (porfolio gallery, contact form)
	10	heropage specific
		10a	lowerHighlight	
		10b	highlight box	jQuery/Animate
		10c	highlight box	CSS/NoScript
		10d	recognition & social
		10e	two column specific styling homepage
	11	info specific
	12	portfolio specific
	13	project detail specific
		13a	siteCaps
		13b	siteCaps navigation
		13c	siteCaps full size image/zoom
		13d	lower section, coded with, designed with, quote
	14	services specific
	15	contact specific
------------------------------------------------------------------*/	





/*	00	heading styles
------------------------------------------------------------------*/		
h1, h2, h3, h4 {
	font-family: AaarghNormal;
}
h3, h4 {
	color: #99ff00;
}
h1 {
	color: #fff;
	font-size: 36px;
	font-weight: 300;
	letter-spacing: -1px;
	padding-bottom: 0.25em;
	text-transform: capitalize;
}
h2 {
	color: #fff;
	font-size: 17px;
	font-style: italic;
	font-weight: normal;
	line-height: 1.5em;
	letter-spacing: 0px;
	padding-bottom: 2.25em;
}
h3 { 
	font-size: 22px;
	font-weight: 400;						/*	maybe best non-bold	*/
}
h4 { 
	font-size: 15px;
	font-weight: 400;						/*	maybe best non-bold	*/
	padding: 1em 0 1em 1em;
	word-spacing: -1px;
}



/*	01	standard, global, text formatting
------------------------------------------------------------------*/		
a {
	color: #99ff00;
	text-decoration: underline;
}

p {
	line-height: 140%;
	padding: 0.6em 0;
}
	.leftP {
		float: left;
		padding-right: 30px;
		width: 345px;
	}
	.rightP {
		float: right;
		width: 345px;
	}
ul {
	list-style: none;
}



/*	02	body
------------------------------------------------------------------*/		
body {
	background: 	url(../images/core/header_glow.jpg) no-repeat 0 0,
							url(../images/core/test_bg.png) repeat  0 0;
	color: #e5e5e5;
	font-family: Tahoma, Arial, sans-serif;
	font-size: 13px;
	overflow-x: hidden;
}



/*	03	siteWrapper
------------------------------------------------------------------*/		
#siteWrapper {  
	height: 100%;
	margin: 0 auto;
	padding: 20px 0;
	width: 960px;																
}
	#siteWrapper:after { 												/*	float fix	*/
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}


	
/*	04	headerWrapper	(inc. logo and top links)
------------------------------------------------------------------*/		
#headerWrapper {
	overflow: auto;
	width: 100%;
}
	#logo {
		background: transparent url(../images/core/test_logo.png) no-repeat 0 0;
		float: left;
		height: 59px;
		padding-bottom: 0;
		width: 119px;
	}
		#logo a {
			display: block;
			height: 100%;
			width: 100%;
		}
	ul#topLinks {
		float: right;
		font-size: 10px;
		font-weight: 600;
	}
		ul#topLinks span.topLinks_grey {
			color: #b5b5b5;
			font-weight: 500;
		}
		ul#topLinks li {
			display: block;
			float: left;
			padding-left: 0.5em;
		}
		ul#topLinks a {
			color: #b5b5b5;
			font-weight: 500;
			text-decoration: none;
		}
			ul#topLinks a:hover {
				color: #99ff00;
				text-decoration: underline;
			}


			
/*	05	mainLinks									
------------------------------------------------------------------*/		
#mainLinks { 
	clear: both;
	color: #7c807a;
	float: left;
	height: 100%;																		/*	I want this to fill the space	*/
	padding-top: 80px;
	text-transform: uppercase;
	width: 240px;
}
	/*	05a	first unordered list (parent)
	---------------------------------------------------------------*/		
	#mainLinks ul {  	
		font-size: 32px;
		font-weight: bold;
		-webkit-transition: color 0.4s linear;
	}
		#mainLinks ul li {
			line-height: 0.80em;
		}
		#mainLinks ul:hover {														/*	when mouseover the container expands to show the nested <ul> below, also adds color 	*/
			color: #99ff00;
			cursor: default;
		}
	/*	05b	second unordered list (nested/child)
	---------------------------------------------------------------*/		
	#mainLinks ul.nested { 
		background: url(../images/core/test_transparent.png)  no-repeat -1px -1px;		/*	this is a damn IE/Opera bug where an overlapped container (using :hover) must have a background to stop the container below preventing the :hover padding	*/
		display: none;																	/*	need the native state to be hidden	*/
		font-size: 10px;
		font-weight: bold;
		margin: -20px 0 -5px 0;													/*	reset the distance when using padding for the mouseover	*/
		padding: 20px 0 5px 0;													/*	padding for the mouseover	*/
		position: relative;																/*	make the links already over the nested <li>	*/
		z-index: 9;																			/*	make the links already over the nested <li>	*/
	}
		#mainLinks ul.nested:after { 											/*	this is instead of overflow: auto so we can keep padding and margins	*/
			content: ".";
			display: block;
			height: 0;
			visibility: hidden;
			clear: both;
		}
		#mainLinks ul.nested li { 		
			float: left;
			margin-right: 5px;
			padding-top: 2px;															/*	brings the spacing even top-bottom so it sits halfway between each link	*/
		}
			#mainLinks ul.nested li a { 	
				color: #7c807a;
				display: block;
				height: 100%;
				text-decoration: none;
				width: 100%;
				padding: 20px 0 5px 0;											/*	padding for the mouseover	*/
				margin: -20px 0 -5px 0;											/*	reset the disatnce when using padding for the mouseover	*/
				position: relative;														/*	make the links already over the nested <li>	*/
				z-index: 10;																/*	make the links already over the nested <li>	*/
				-webkit-transition: color 0.5s linear;
			}
		#mainLinks ul.nested a:hover {			
			color: #99ff00;		
		}
	/*	05c	mouseover effects
	---------------------------------------------------------------*/		
	#mainLinks ul:hover ul.nested {											/*	need the mouseover on the main nav to show the nested/child	*/
		display: inherit;
	}	
	#mainLinks ul.nested:hover {												/*	need to keep this ontop, as using padding and margins, nested and their parent overlap	*/
		position: relative;
		z-index: 10;
	}
	/*	05d	show on active/current page									/*	php in the header.php related to this script	
	---------------------------------------------------------------*/		
	#mainLinks ul.active {															/*	make the nested visible	*/
		color: #99ff00;
		display: inherit;															
	}
	.activeColor {																	
		color: #99ff00;
	}
	#mainLinks ul .active a.activeColor {
		color: #99ff00;
	}
	
	
	
/*	06	pageContent
------------------------------------------------------------------*/		
#pageContent { 	
	float: right;
	height: 100%;
	padding-top: 50px;
	width: 720px;																
}
	#pageContent:after { 															/*	float fix	*/
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}



/*	07	three column
------------------------------------------------------------------*/		
.col-three {	
	float: left;
	width: 220px; 
}
	.col-three h4 {	
		padding: 10px 0px 10px 10px;
	}
	.center {																					/*	700px divided by 3 won't go, this solves the problem and also adds required padding	*/
		padding: 0 20px;
	}
	/*	07a	specific columns (headings, img etc)
	-------------------------------------------------------------*/		
		.col-three h4.features {	
			background: url(../images/core/pageFeatures/features_bg.png) no-repeat 150px 0;
		}	
		.col-three h4.previous {	
			background: url(../images/core/pageFeatures/previous_bg.png) no-repeat 180px 0;
			padding-left: 30px;
		}	
		.col-three h4.services {	
			background: url(../images/core/pageFeatures/services_bg.png) no-repeat 150px 0;
		}	
		.col-three h4.testimonials {	
			background: url(../images/core/pageFeatures/testimonals_bg.png) no-repeat 150px 0;
		}	
		.col-three h4.portfolioView {	
			background: url(../images/core/pageFeatures/portfolioView_bg.png) no-repeat 150px 0;
		}	
	/*	07b	ticks as list
	-------------------------------------------------------------*/		
	ul.ticked {
	}
		ul.ticked li {
			background: url(../images/core/listStyles/ticks.png) no-repeat 10px 50%;
			line-height: 30px;
			padding-left: 30px;
		}
	/*	07c	drops as list
	-------------------------------------------------------------*/		
	ul.drops {
	}
		ul.drops li {
			background: url(../images/core/listStyles/drops.png) no-repeat 10px 50%;
			line-height: 25px;
			padding-left: 30px;
		}
		ul.drops a {
			color: #fff;
			text-decoration: none;
		}
			ul.drops a:hover {
				color: #99ff00;
			}
	/*	07d	portfolio-small	-	smaller homepage portfolio column
	-------------------------------------------------------------*/		
	.portfolio-small {	
		background: url(../images/core/portfolio-small_bg.png) no-repeat 50% 50%;
		float: left;
		height: 177px;
		width: 260px;
	}
		.portfolio-small img {	
			display: block;
			margin: 0px auto;
		}
		.portfolio-small ul {
			/*	margin-top: -75px;	*/
			overflow-x: hidden;
			overflow-y: scroll;
		}
			.portfolio-small li {
				background: url(../images/core/porfolio-small-img_bg.png) repeat-x 0 0;
				height: 102px;
				width: 200px;
				display: block;
				margin: 0px auto;
				padding-top: 6px;
			}
		.carbon_overlay { 
			background: url(../images/core/portfolio-small_bg2.png) repeat-x 0 0; 
			background-attachment: scroll;
			height: 177px;
			margin-left: 20px;
			position: absolute;
			width: 200px;
			z-index: 100;
		}
#homepage_portfolio-bg-top {
	background: url(../images/core/pageFeatures/homepage_portfolio-bg-top.png) no-repeat 0 0;
	height: 36px;
	margin: 0 0 -36px 22px;
	position: absolute;	
	width: 210px;
	z-index: 100;
}
#homepage_portfolio-bg-bottom {
	background: url(../images/core/pageFeatures/homepage_portfolio-bg-bottom.png) no-repeat 0 0;
	height: 36px;
	margin: -36px 0 0 22px;
	position: absolute;	
	width: 210px;
	z-index: 100;
}



/*	08	two column	(as used on homepage)
------------------------------------------------------------------*/		
.col-two { 	
	float: left;
	padding-top: 150px;
	width: 350px;				
}
	.col-two h2 {
		cursor: pointer;
	}	
	.col-two p {
		background: url(../images/core/listStyles/arrow-across.png) no-repeat 0 50%;
		font-size: 9px;
		padding-left: 10px;
		text-transform: uppercase;
	}



/*	09	page splits (used on portfolio and contact)
------------------------------------------------------------------*/		
#splitSmall { 
	display: inline;
	float: left;
	height: 100%;
	margin-top:30px;
	width: 150px;
}
	#splitSmall h4 {																		/*	used on the contact */
		padding: 0;
	}
	#splitSmall p {
		font-size: 11px;
	}
	#splitSmall li {
		font-style: italic;	
		line-height: 140%;
	padding: 0.6em 0;

		font-size: 11px;
	}
	#splitSmall a {
		color: #e5e5e5;
		text-decoration: none;
	}
	/*	09a	larger split (porfolio gallery, contact form)
	------------------------------------------------------------------*/		
	#splitLarge {	
		float: right;
		margin-top:30px;
		width: 540px;
	}
		#splitLarge h3 {
			padding: 0 0 1em 0;
		}

	

/*	10	heropage specific
------------------------------------------------------------------*/		
#hero-home {  
	margin-top: -40px;																/*	pageContent has a padding, looks wrong on homepage	*/
	padding-bottom: 40px;	
}
	#hero-home:after { 																/*	this is instead of overflow: auto so we can keep padding and margins	*/
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}
	#hero-home h1, #hero-home h2, #hero-home h3 {
		color: #fff;
	}
	#hero-home h2 {
		clear: both;																			/*	clear the floated image	*/
		display: block;
	}
	#hero-home h3 {
		display: block;
	}
	#hero-home img {  
		float: left;
		height: 215px;
		width: 208px;
	}
h1#original {
	margin: 30px 0px 0px 375px;
}
h1#spontaneous {
	margin: 0px 0px -5px 440px;
}
h1#stimulating {
	margin: 0px 0px 0px 340px;
}
	/*	10a	lowerHighlight	
	------------------------------------------------------------------*/		
	#lowerHighlight { 
		clear: both;
		width: 100%;
		overflow: hidden;
	}
	/*	10b	highlight box	jQuery/Animate
	---------------------------------------------------------------*/		
	#highlightContainer {
		background: url(../images/core/highlight_box.png) no-repeat 0 0;
		height: 83px;
		margin: 25px 0 0 -1300px;
		opacity: 0;
		position: absolute;
		width: 300px;
	}
	/*	10c	highlight box	CSS/NoScript
	---------------------------------------------------------------*/		
	.highlightContainerCSS {  
		background: url(../images/core/highlight_box.png) no-repeat 0 0;
		display: none;
		height: 83px;
		margin: -100px 0 0 0;
		position: absolute;
		width: 300px;
	}
	/*	10d	recognition & social
	---------------------------------------------------------------*/		
	.recognition, .social {
		position: relative;
		z-index: 10;																		/*	required to prevent mouseover / mouseout changes in jquery	*/
	}
	/*	10e	two column specific styling homepage
	---------------------------------------------------------------*/		
	ul.homepageThumbs {  
		display: none;
		height: 48px;
		margin: 155px 0 0 23px;													/*	push it down, so it can be animated back into view	*/
		position: absolute;
		width: 255px;
	}	
		ul.homepageThumbs li {  
			display: block;
			float: left;
			height: 16px;
			margin: 2px;
			filter:alpha(opacity=50);
			-moz-opacity:0.5;
			-khtml-opacity: 0.5;
			opacity: 0.5;
			width: 16px;
		}
			ul.homepageThumbs li:hover {  
				filter:alpha(opacity=100);
				-moz-opacity: 1;
				-khtml-opacity: 1;
				opacity: 1;
			}
			/*	professional recognition	*/
			ul.homepageThumbs li.bestcsswebdesign {  
				background: url(../images/core/social/thumbs/bestcsswebdesign.jpg) no-repeat 0 0;
			}	
			ul.homepageThumbs li.blazingwebgallery {  
				background: url(../images/core/social/thumbs/blazingwebgallery.jpg) no-repeat 0 0;
			}		
			ul.homepageThumbs li.boxedcss {  
				background: url(../images/core/social/thumbs/boxedcss.jpg) no-repeat 0 0;
			}		
			ul.homepageThumbs li.cssarts {  
				background: url(../images/core/social/thumbs/cssarts.jpg) no-repeat 0 0;
			}		
			ul.homepageThumbs li.cssblaze {  
				background: url(../images/core/social/thumbs/cssblaze.jpg) no-repeat 0 0;
			}		
			ul.homepageThumbs li.csscookie {  
				background: url(../images/core/social/thumbs/csscookie.jpg) no-repeat 0 0;
			}		
			ul.homepageThumbs li.cssloaf {  
				background: url(../images/core/social/thumbs/cssloaf.jpg) no-repeat 0 0;
			}		
			ul.homepageThumbs li.mabcplus {  
				background: url(../images/core/social/thumbs/mabcplus.jpg) no-repeat 0 0;
			}	
			/*	social networks	*/
			ul.homepageThumbs li.delicious {  
				background: url(../images/core/social/thumbs/delicious.png) no-repeat 0 0;
			}		
			ul.homepageThumbs li.digg {  
				background: url(../images/core/social/thumbs/digg.png) no-repeat 0 0;
			}		
			ul.homepageThumbs li.flickr {  
				background: url(../images/core/social/thumbs/flickr.png) no-repeat 0 0;
			}		
			ul.homepageThumbs li.lastfm {  
				background: url(../images/core/social/thumbs/lastfm.png) no-repeat 0 0;
			}		
			ul.homepageThumbs li.linkedin {  
				background: url(../images/core/social/thumbs/linkedin.png) no-repeat 0 0;
			}		
			ul.homepageThumbs li.stumbleupon {  
				background: url(../images/core/social/thumbs/stumbleupon.png) no-repeat 0 0;
			}		
			ul.homepageThumbs li.twitter {  
				background: url(../images/core/social/thumbs/twitter.png) no-repeat 0 0;
			}	
		ul.homepageThumbs li a {  
			display: block;
			height: 100%;
			width: 100%;
		}
		/*	 these are the hover state changes	*/
			.recognition:hover ul.homepageThumbs, .social:hover ul.homepageThumbs {	
				display: inherit;
				margin: -153px 0 0 23px;
			}	
			.col-two:hover .highlightContainerCSS {	
				display: inherit;
			}	
			.col-two:hover  {
				padding: 125px 0px 25px 0px;								/*	remove the upper padding, whilst adding some lower padding, to keep the container the same size	*/
			}
			.col-two:hover p {
				background: url(../images/core/listStyles/arrow-up.png) no-repeat 0 50%;
			}
div.sc_menu_wrapper {
	position: relative; 	
	height: 213px;																		/*	overlayed carbon, adds required height */
	/* Make bigger than a photo, because we need a place for a scrollbar. */
	width: 260px;
	overflow: auto;
}
div.sc_menu {
	padding: 15px 0;
}
.sc_menu a {
	background: url(../images/portfolio/porfolio-small-img_bg.png) repeat-x 0 0;
	height: 102px;
	width: 200px;
	display: block;
	margin: 0px auto;
	padding-top: 6px;
}
 
.sc_menu_wrapper .loading {
	position: absolute;
	top: 40px;
	left: 60px;
	
	margin: 0 auto;
	padding: 10px;
 
	width: 100px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;	
	
	text-align: center;
	color: #fff;
	border: 1px solid rgb(79, 79, 79);
	background: #1F1D1D;
}
/* Styling tooltip */
.sc_menu_tooltip {
	display: block;
	position: absolute;
	
	padding: 6px;
	font-size: 12px;	
	color: #fff;
	
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;	
	
	border: 1px solid rgb(79, 79, 79);
	background: rgb(0, 0, 0);
	/* Make background a bit transparent for browsers that support rgba */	
	background: rgba(0, 0, 0, 0.5);
}

			
			
/*	11	info specific
------------------------------------------------------------------*/		
.logo_bg {
	background: url(../images/core/pageFeatures/logo_bg.png) no-repeat 50% 15px;
}

.newContainer {
	clear: both;
	display: block;
	margin-bottom: 10px;
	overflow: auto;
	padding: 1.75em 0 1em 0;
	width: 100%;
}
	
h3#info-site_pullQuote {
	background: url(../images/core/pageFeatures/test_info-site.png) no-repeat 50% 50%;
	float: right;
	height: 261px;
	width: 410px;
}

img#photo-me {
	float: right;
	padding: 10px 0 0 20px;
}



/*	12	portfolio specific
------------------------------------------------------------------*/		
.portfolioShowcase {
	background: url(../images/core/portfolioExample_bg.png) no-repeat 0 22px;
	display: inline;
	float: left;
	margin: 0 15px 40px 0px;
	width: 255px;
}
	.portfolioShowcase:hover {
		background: url(../images/core/portfolioExample_bg-hover.png) no-repeat 0 22px;
		display: inline;
		float: left;
		margin: 0 15px 40px 0px;
		width: 255px;
	}
	.portfolioShowcase h4 { 
		font-size: 14px;
		padding: 0 0 12px 10px;
		text-transform: uppercase;
	}
	.portfolioShowcase p {
		line-height: 120%;
		padding: 15px 0 0 7px;
	}
	.portfolioShowcase img {
		display: block;
		margin: 0 auto;
	}
	.portfolioShowcase br {
		margin-bottom: 5px;
	}
	.portfolioShowcase a {
		text-decoration: none;
	}
		.portfolioShowcase a.readMore {
			border-bottom: 1px dotted #99ff00;
			text-decoration: none;
		}
#categoryList a:hover {
	color: #99ff00;
}
#categoryList .activeCategory a {
	color: #99ff00;
}



/*	13	project detail specific
------------------------------------------------------------------*/		
#splitLarge h2 {
	font-style: normal;
	margin-bottom: 0.5em; 
	padding: 0;
}

h4#category {
	background: #99ff00;
	color: #000;
	font-size: 11px;
	padding: 0.5em;
}
	
#pageCaps {
	border: 1px solid #99ff00;
	height: 318px;
	width: 538px;																				/*	540 - 2px border	*/
	margin: 35px 0;
	overflow: hidden;																		
}
	#pageCaps:after {
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}
	/*	13a	siteCaps
	---------------------------------------------------------------*/		
	#siteCaps { 
		height: 350px;
		margin: 25px 0 0 0;
		overflow-x: scroll;
		overflow-y: hidden;
		width: 542px;
	}
		#siteCaps ul { 
			display: block;
			height: 320px;																	/*	318px add 2px for border	*/
			overflow: hidden;
			width: 3000px;
			padding-top:2px;
		}
			#siteCaps ul li {
				border: 1px solid #99ff00;
				display: block;
				float: left;
				height: 318px;	
				margin-right: 30px;
				width: 540px;
			}	
				#siteCaps ul li a {		
					display: block;
					height: 100%;
					width: 100%;
					margin: 0px;
					padding: 0px;
				}		
	/*	13b	siteCaps navigation
	---------------------------------------------------------------*/		
	ul#currentImage { 
		display: none;																		/*	hide no-script	*/
		height: auto;
		width: 40px;
		margin: 0 auto;
	}	
	ul#currentImage:after{
		content: ".";
		display: block;
		height: 0;
		visibility: hidden;
		clear: both;
	}
		 ul#currentImage li {
			background: #50545c url(../images/core/listStyles/currentImg.png) no-repeat 50% 50%;
			float: left;
			height: 8px;
			margin: 5px 1px;
			width: 8px;
		}
			 ul#currentImage li a {
				display: block;
				height: 100%;
				width: 100%;
			}	
	/*	13c	siteCaps full size image/zoom
	---------------------------------------------------------------*/		
	.nivoZoomHover {
		cursor: pointer;
		height: 100%;
		left: 0px;
		position: absolute;
		top: 0px;
		width: 100%;
		z-index: 9;
	}
	.nivoCaption {
		display: none;
		position: absolute;
		z-index: 110;
		text-align: center;
		background: #010101;
		color: #fff;
		padding: 4px 0;
		overflow: hidden;
	}
	/*	13d	lower section, coded with, designed with, quote
	---------------------------------------------------------------*/		
	ul#designedWith, ul#codedWith, #customerQuote {
		margin-top: 35px;
	}
	ul#designedWith {																	
		clear: left;
		display: inline-block;
		float: left;
		font-size: 11px;
		width: 140px;
	}
		ul#designedWith li {
			line-height: 30px;
		}
		ul#designedWith li#bp-illustrator {
			background: url(../images/core/listStyles/illustrator.png) no-repeat 10px 50%;
			line-height: 30px;
			padding-left: 30px;
		}
		ul#designedWith li#bp-photoshop {
			background: url(../images/core/listStyles/photoshop.png) no-repeat 10px 50%;
			line-height: 30px;
			padding-left: 30px;
		}
		ul#designedWith li#bp-gimp {
			background: url(../images/core/listStyles/gimp.png) no-repeat 10px 50%;
			line-height: 30px;
			padding-left: 30px;
		}
	ul#codedWith {
		display: inline-block;
		float: left;
		font-size: 11px;
		width: 140px;
	}
		ul#codedWith li {
			line-height: 30px;
		}
		ul#codedWith li#bp-notepad {
			background: url(../images/core/listStyles/notepad.png) no-repeat 10px 50%;
			line-height: 30px;
			padding-left: 30px;
		}
		ul#codedWith li#bp-wordpress {
			background: url(../images/core/listStyles/wordpress.png) no-repeat 10px 50%;
			line-height: 30px;
			padding-left: 30px;
		}	
		ul#codedWith li#bp-aptana {
			background: url(../images/core/listStyles/aptana.png) no-repeat 10px 50%;
			line-height: 30px;
			padding-left: 30px;
		}
	#customerQuote {
		color: #d3d3d3;
		display: block;
		float: right;
		font-family: AaarghNormal;
		font-size: 12pt;
		font-style: italic;
		width: 260px;
		}
	.customerQuote_extra {
		color: #d3d3d3;
		clear: both;
		font-size: 9px;
		text-align: right;
		padding: 0;
	}


/*	14	services specific
------------------------------------------------------------------*/		
#pageSplit {
	clear: both;
	margin-left: 60px;
}

#overflowContainer {
	clear: right;
	overflow-x: scroll;																	/*	can hide this is you want	*/
	overflow-y: hidden;
	width: 465px;
}
	#priceSection_container { 
		float: left;
		height: 800px;
		width: 5790px;
	}
		#priceSection_container h4 { 
			padding: 0;
			width: 465px;
		}
		#priceSection_container h4 a { 
			display: block;			
			padding: 25px 0;
			text-decoration: none;
		}
p#underServices {
	margin-top: 10px;
}

		
.priceSection_info { 
	float: left;
	height: 100%;
	margin-right: 500px;
	width: 465px;
}
	

	
/*	15	contact specific
------------------------------------------------------------------*/	
#socialIcons_bg {
	background: url(../images/core/pageFeatures/social_carbon.png) repeat-y 0 0;
	height: 150px;
	position: absolute;
	width: 16px;
}
ul#socialIcons {
	margin-left: 8px;
}
#socialIcons_bg, ul#socialIcons {
	margin-top: 10px;
}
	ul#socialIcons li { 
		height: 39px;
		margin-bottom: -15px;
		width: 100%;  
	}
		ul#socialIcons li:hover {
			background-position: 30px 0; 
		}
		ul#socialIcons li a {
			display: block;
			height: 100%;
			margin-top: -15px;
			width: 100%;
		}
		li#social-linkedin {
			background: url(../images/core/social/round_linkedin.png) no-repeat -10px 0;
		}
		li#social-twitter {
			background: url(../images/core/social/round_twitter.png) no-repeat -10px 0;
		}
		li#social-lastfm {
			background: url(../images/core/social/round_lastfm.png) no-repeat -10px 0;
		}
		li#social-flickr {
			background: url(../images/core/social/round_flickr.png) no-repeat -10px 0;
		}
.formParagraph p { 
	margin-bottom: 0;
	padding-bottom: 0;
	width: 180px;
}
	p.standardParagraph {
		display: block;
		margin-bottom: 1.5em;
		width: 100%;
	}
	.contactUndertext {
		color: #a9a8a8;
		font-style: italic;
		font-size: 11px;
		margin-top: 0px;
	}
input { 
	background: url(../images/core/form_bg.png) repeat 0 0;
	border: 1px solid #383838;	
	color: #fff;
	float: right;
	height: 36px;
	margin-right: 15px;
	width: 300px;
}
textarea {
	background: url(../images/core/form_bg.png) repeat 0 0;
	border: 1px solid #383838;	
	color: #a9a8a8;
	font-style: italic;
	font-size: 11px;
	float: right;
	margin-right: 15px;
	width: 300px;
}
.submitButton {
	background: url(../images/core/pageFeatures/submit.jpg) no-repeat 50% 50%;
	border: 1px solid #383838;	
	height: 35px;
	margin-top: 5px;
	width: 302px;
}
	input:focus, textarea:focus, .submitButton:active {
		border-color: #99ff00;
	}
.error {
	color: red;
}