/*-----------------------------------------------------------------------------------------------

Reset
-----------------------------------------------------------------------------------------------*/

body, p, h1,h2,h3,h4,h5,h6,h7,h8,h9,form {

	margin:0px 0px 0px 0px;
	padding:0px;
	display: inline;
	font-family: "Century Gothic", "Arial", "Trebuchet";
}

img {
	border-style:none;
}

a {
	color: #fff;
}

/*-----------------------------------------------------------------------------------------------

Link Sytles

-----------------------------------------------------------------------------------------------*/

a.masnav:link  {
	color: #2a2a2a;
	text-decoration: none;
	border-style: none;
}

a.masnav:visited {
	color:#2a2a2a;
	text-decoration:none;}

a.masnav:active {
	color: #2a2a2a;
	text-decoration: none;
}
a.masnav:hover {
	color: #ff209b;
}

/* 2nd Hovers */

a.secnav:link {
	color: #2a2a2a;
	text-decoration: none;
}
a.secnav:visited {
	color:#2a2a2a;
	text-decoration:none;}
 
a.secnav:active {
	color: #2a2a2a;
	text-decoration: none;
}
a.secnav:hover {
	color: #fff;
	text-decoration: none;
	background-color: #ff209b;
}


p {
	border-bottom: 1px dotted #b1b1b1;
	font: 10pt/150% "Trebuchet MS";
}

.p2
{
	color: #ff209b;
	font: 10pt/150% "Trebuchet MS";

}

.p3
{
	color: #808080;
	font: 10pt/150% "Trebuchet MS";

}
.p4
{
	color: #ddd;
	font: 9pt/150% "Trebuchet MS";
	margin: 0;
	padding: 0;

}

.p5
{
	color: #fff;
	font: 12pt/150% "Trebuchet MS";

}

.p6
{
	color: #424242;
	font: 14pt/150% "Trebuchet MS";
	margin-left: 30px;

}

.p7
{
	color: #1f1f1f;
	font: 13pt/150% "Trebuchet MS";

}



.p8{

	color: #424242;
	margin: 0px;
	padding-left: 30px;
	padding-top: 10px;
	font-size: 10px;
	line-height: 150%;
}	
a {
	outline-style:none;
	
}

/*-----------------------------------------------------------------------------------------------

Headers

-----------------------------------------------------------------------------------------------*/
h1{

	color: #ff209b;
	font-size: 45pt;
	text-decoration: none;
	letter-spacing: -5px;
	font-weight: normal;
	font-style: normal;
	line-height: 98%;
}

h2{

	color: #424242;
	margin: 0px;
	padding-left: 30px;
	padding-top: 10px;
	font-size: 12px;
	line-height: 150%;
}

h3{

	color: #464646;
	font-size: 45pt;
	text-decoration: none;
	letter-spacing: -5px;
	font-weight: normal;
	font-style: normal;
	line-height: 98%;

}

h4{

	color: #b5b5b5;
	font-size: 45pt;
	text-decoration: none;
	letter-spacing: -5px;
	font-weight: normal;
	font-style: normal;
	line-height: 98%;

}

h5{

	color: #808080;
	font-size: 45pt;
	text-decoration: none;
	letter-spacing: -5px;
	font-weight: normal;
	font-style: normal;
	line-height: 98%;

}

h6{

	color: #dadada;
	font-size: 45pt;
	text-decoration: none;
	letter-spacing: -5px;
	font-weight: normal;
	font-style: normal;
	line-height: 98%;

}


/*-----------------------------------------------------------------------------------------------

Navigation

-----------------------------------------------------------------------------------------------*/
.nav
{
	width: 185px;
	height: 341px;
	float: right;
	margin-top: 10px;
	padding: 10px 0 0 25px;
	background: url(../images/home/nav-bg.png) no-repeat;
}

ul#menu, ul#menu ul {
  list-style-type:none;
  margin: 0;
  padding: 0;
  width: 180px;
}

ul#menu a {
  display: block;
  text-decoration: none;	
}

ul#menu li {
  margin-top: 1px;
}

ul#menu li a {
  background: #fcfcfc;
  color: #303030;	
  text-transform: uppercase;
	padding: 0.3em 0.1em 0.3em 0.2em;
	font: bold 19px Arial;
}

ul#menu li a:hover {
	color: #ff209b;
}

ul#menu li ul li a {
  background: #fcfcfc;
  color: #616161;
    padding-left: 35px;
      font-size: 13px;
}

ul#menu li ul li a:hover {
	color: #ff209b;
	background-color: #fcfcfc;
}

.pinknumbers
{
  	font-size: 19px;
	color: #ff209b;
	margin: 0;
}

/*-----------------------------------------------------------------------------------------------

Page Layout // Home

-----------------------------------------------------------------------------------------------*/

body {
	color: #1f1f1f;
	font: 10px "Century Gothic", "Trebuchet MS";
	background: transparent url(../images/home/black-stripe.gif) repeat center;
}

.wrapper-spray
{
	width: 1150px;
	background-image: url(../images/home/border-spray.png);
		margin:0px auto;

}



.wrapper{

	width:1024px;
	position:relative;
	border-left: 10px solid white;
	border-right: 10px solid white;
	background-color: #fff;
			margin:0px auto;

}

.banner {
	width: 1024px;
	height:341px;
	position:relative;
	background: url(../images/home/neil-sampson-banner.png) no-repeat;
	border-bottom: 1.1px dotted #bfbfbf;
	z-index:0;
}

.bannertext
{
	padding: 120px 0 0 45px;
		z-index:0;

}

.contentwrapper
{
	width: 964px;
	height:375px;
	position: relative;
	background-color: #fff;
	padding-left: 35px;
	padding-right: 30px;
}

.content {
	width:690px;
	height: 345px;
	float:  left;
	margin: 10px 0 0 0px;
	background: url(../images/home/content-bg.png) no-repeat;
	color: #3f3f3f;
	letter-spacing: -1px;
	padding-left: 20px;
	padding-right: 10px;
}


.dottedline
{
	width: 1018px;
	border-bottom: 1.1px dotted #bfbfbf;
	margin-left: 6px;
}

.boxwrapper
{
	width: 1024px;
	height:270px;
	position: relative;
	background-color: #fff;
}

.equal {
		display:table;
		border-collapse:separate;
	}
.row {
		display:table-row;
	}
.row div {
		display:table-cell;
}


/*-----------------------------------------------------------------------------------------------

Home Showcase Gallery
-----------------------------------------------------------------------------------------------*/
	
#home-showcase {
    margin-top:5px;
    width: 690px;
    height: 315px;
  }
	

/*-----------------------------------------------------------------------------------------------

Box Model

-----------------------------------------------------------------------------------------------*/
.equal {
		border-spacing:10px;
		padding-left: 5px;
		background: #fff;
		width:975px;
		color: #000;
	margin: 15px auto 15px 30px;
}

.row div {
		background:#fcfcfc;
}

.row div.one {
		width:257px;
		height:220px;
		padding-top: 10px;
		background: url(../images/home/box-bg.png) no-repeat;
		padding-left: 20px;
		padding-right: 40px;
		position:relative;
		float:left;

		
}

.row div.two {
		width:257px;
		height:220px;
		background: url(../images/home/box-bg.png) no-repeat;
		padding-left: 20px;
		padding-right: 40px;
		padding-top: 10px;
		position:relative;
		float:left;

	}
	
.row div.three {
		width:276px;
		height:220px;
		background: url(../images/home/box-bg.png) no-repeat;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 10px;
		position:relative;
		float:left;
		}
		
.row div h2 {
		margin: 10px 20px 3px 6px;
		padding: 1px 10px 3px 6px;
		color:#000;
		background: #fcfcfc;
		border-left: 5px solid #ff209b;
	font-size: 12pt;
}


.contact {
		width: 946px;
		height: 106px;
	background: #fff url(../images/contact-form/contact-bg.jpg) no-repeat;
	margin-left: 40px;
	padding-top: 5px;
}

.contact-email
{
	padding: 30px 0 0 0;
	width: 440px;
	float: left;
}

.contact-phone
{
	padding: 30px 0 0 0px;
	width: 440px;
	float: right;

}

.testimonial
{
	width: 762px;
	height: 330px;
	background: #fff url(../images/about/testimonial.png) no-repeat;
	margin-left: 36px;
	padding: 25px 100px 20px 100px;
}

/*-----------------------------------------------------------------------------------------------

Footer

-----------------------------------------------------------------------------------------------*/



.footer-wrapper
{
	width:  1024px;
	height: 500px;
	margin-top: 40px;
	background: #1b1b1b repeat-x;
	top: 50px;
	left: 50px;
	border-top: 1px solid #ff209b;
}

.footer-box
{
	width: 260px;
	height: 250px;
	margin: 40px;
	float:left;
	position:relative;
	display:inline;
}

.footer-titles
{
	width: 230px;
	height: 25px;
	margin-left: 15px;
	margin-top: 15px;
	color: #fff;
	border-bottom: 1px solid #ff209b;
}

.footer-text
{
	width: 230px;
	height: 200px;
	margin-left: 15px;
	margin-top: 15px;
	color: #ddd;
	text-align: left;

}

.foot-note-wrapper
{
	width:915px;
	height: 100px;
	margin-left: 55px;
	margin-top: 20px;
	float:left;
	position:relative;
	border-top: 1px solid #ff209b;

}

.foot-note
{
	width:550px;
	float:left;
	color: #fff;
    position:relative;
}

.twitter
{
	z-index: 4;
	float: right;
	width: 235px;
	height: 100px;
	padding-left: 40px;
	list-style-type: none;
	border-left: 1px solid #464646;
	margin: 15px 0 10px 85px;
}

.twitter-titles
{
	width: 235px;
	height: 25px;
	color: #fff;
	border-bottom: 1px solid #ff209b;
	z-index: 5;
}

/*-----------------------------------------------------------------------------------------------
  Image Styles
-----------------------------------------------------------------------------------------------*/

ul#thumbs{

	border:0;
	padding:0;
	margin:0;
	display: inline;
}

ul#thumbs li{
	float: left;
	display: inline;	
	margin: 0px 13px 10px 0;
	list-style-type: none;
	border:0;
}

ul#thumbs img{
	border:4px solid #FFF;
}

ul#thumbs img:hover{
	border:4px solid #ff209b;
}

a.footernav:link  {
	color: #ddd;
	text-decoration: none;
	border-style: none;
	font: 9pt/150% "Trebuchet MS";
}

a.footernav:visited {
	color:#ddd;
	text-decoration:none;
	font: 9pt/150% "Trebuchet MS";
}

a.footernav:active {
	color: #ddd;
	text-decoration: none;
	font: 9pt/150% "Trebuchet MS";

}
a.footernav:hover {
	color: #fff;
	font: 9pt/150% "Trebuchet MS";

}


/*-----------------------------------------------------------------------------------------------
Drop Down Contact Form
-----------------------------------------------------------------------------------------------*/

	
/* Positions the contact form so it doesn't interfere with any other content, as well as a z-index above any other elements on the page */	
#contactFormContainer {
	position:absolute;
	left:750px;
	z-index:1;
	}
	
/* Hides the whole contact form until needed */	
#contactForm {
	height:250px;width:248px;
	background: #191919 no-repeat 241px 11px; 
	border:1px solid #929191;
	display:none;
	padding:7px 12px; 
	color:#fff
	}   

/* Loading bar that will appear while the ajax magic is happening */
.bar{
	display:none; 
	background:url(../images/contact-form/ajax-loader.gif) no-repeat center; 
	margin-top:100px; 
	height:40px; width:230px;
	}
	
/* Hides the confirmation message until needed */	
#messageSent {display:none;}

/* This hides the form validation alert messages until needed */
#contactForm span { 
	display:none; 
	font-size:9px; 
	line-height:10px; 
	padding-left:6px; 
	color: #ff209b;
	}
	
/* Some styling for the contact button */
#contactFormContainer .contact {
	height:33px; width:172px;
	background: url(../images/contact-form/contact_me.png) no-repeat; 
	position:absolute; 
	left:50px; bottom:-35px; 
	cursor:pointer;
	}
			
/* Hides the darkening layer for the Modal effect. The z-index is necessary for layering purposes, and be sure to keep the positioning/height/width the same */	
#backgroundPopup{
	display:none; 
	position:fixed; 
	_position:absolute; 
	height:100%; width:100%; 
	top:0; left:0;
	background:#191919; 
	z-index:11;
	}  
	
/* Form styling from here on out. There is nothing in here that you HAVE to use to get this to work */	
#contactForm textarea, #contactForm input {
	width:180px; 
	background:#6d6d6d url(../images/contact-form/contact_input.png) repeat-x top; 
	color:#fff; 
	border:1px solid #8a8a8a; 
	height:15px; 
	line-height:14px; 
	font-size:11px; 
	padding:2px 2px 0px;
	}
#contactForm input {background-position:0px -20px;}
#contactForm textarea {height:114px;}
#contactForm .submit {
	border: 1px solid #535353; 
	background:#000; 
	text-transform:uppercase; 
	color:#fff; 
	font-weight:bold; 
	padding:4px 16px 7px 14px; 
	height:25px; width:100px; 
	cursor:pointer; 
	float:left; 
	margin-top: 8px;
	}
#contactForm .submit:active {background:#cacaca; }
#contactForm label {padding-left:4px; font-weight:bold;}
#contactForm p {padding-bottom:8px;}
#contactForm .input_boxes {float:left; width:204px;}

#dummycontent {padding-top:100px; height:900px; position:relative;}
.bottomlink {position:absolute; bottom:0;}

/*-----------------------------------------------------------------------------------------------
Selected Work Portfolio
-----------------------------------------------------------------------------------------------*/


.portfolio-wrapper
{
	width: 994px;
	height:800px;
	position: relative;
	background-color: #fff;
	margin: 20px 0 0 40px;
}

.portfolio-box
{
	width: 470px;
	height: 383px;
	position: relative;
	float:left;
	background-image: url(../images/portfolio/box-bg.png);
	margin: 0 10px 10px 0;
}

.portfolio-sub-grey-box
{
	width: 435px;
	height: 350px;
	margin: 15px 0 0 20px;
	background-color: #eeeeef;
}

.portfolio-img
{
	margin: 8px 0 0 8px;
	border: 1px solid #fff;
	position:relative;
}

.portfolio-text
{
	width: 220px;
	height: 40px;
	margin: 10px 0 0 10px;
	position:relative;
	background: url(../images/portfolio/pink-bullet.png) no-repeat;
	padding: 0 0 0 20px;
	float: left;
}

.portfolio-view-details
{
	width: 154px;
	height: 41px;
	float: right;
	margin: 10px 0 0;
}

/* Portfolio Hovers */


a.portfoliohover:hover {
	background-image: url(../images/portfolio/view-website-hover.png);
}


/*-----------------------------------------------------------------------------------------------
About Neil Sampson
-----------------------------------------------------------------------------------------------*/

.about-wrapper
{
	width: 962px;
	height: 400px;
	background: url(../images/about/about-bg.png) no-repeat;
	position:relative;
	margin: 20px 0 10px 35px;

	}

.about-box
{
	width: 260px;
	height: 300px;
	float: left;
	position: relative;
	padding: 15px 20px 5px 40px;
	border-right: 1.1px dotted #bfbfbf;
	margin-top: 25px;

}

.about-box-right
{
	width: 260px;
	height: 300px;
	float: left;
	position: relative;
	padding: 15px 20px 5px 30px;
	margin-top: 25px;

}

		
.about-wrapper div h2 {
		margin: 10px 20px 3px 6px;
		padding: 1px 10px 3px 6px;
		border-left: 5px solid #ff209b;
	font-size: 12pt;
}

/*-----------------------------------------------------------------------------------------------
Services Neil Sampson
-----------------------------------------------------------------------------------------------*/

.services-wrapper
{
	width: 962px;
	height: 499px;
	background: url(../images/services/services-bg.png) no-repeat;
	position:relative;
	margin: 20px 0 10px 35px;

	}
	
	.services-sub-wrapper
{
	width: 890px;
	height: 425px;
	background:#fff;
	position:relative;
	margin: 25px 0 10px 35px;
	float:left;

	}
	
	.services-float-left
	{
	width: 445px;
	height:425px;
	float:left;
	position:relative;
	
	}
	
	.services-float-right
	{
	width: 445px;
	height:425px;
	float:right;
	padding-top: 10px;
	
	}

.services-title
{
	width: 430px;
	height: 50px;
	margin: 10px 0 0 10px;
}

.services-title h2 {
	margin: 10px 20px 3px 6px;
	padding: 1px 10px 3px 6px;
	color: #2a2a2a;
	border-left: 5px solid #ff209b;
	font-size:17pt;
	}
	
	.services-image
	{
	width: 414px;
	height:146px;
	float:left;
	position:relative;
	border:solid #f1f1f1 5px;
	margin: 10px 0 5px 10px;
	}
	
	.services-blurb
	{
	width: 414px;
	height:120px;
	float:left;
	position:relative;
	margin: 10px 0 5px 15px;
	}
	
	.button-wrapper
	{
	width: 414px;
	height:120px;
	float:left;
	position:relative;
	margin: 10px 0 5px 15px;
	padding: 10px 0 0 0;
	}
	
	.button
	{
	width:auto;
	height: 33px;
	float:left;
	position:relative;
	margin-left: 15px;
	}
	
.services-text-wrapper
{
	width: 405px;
	height:100px;
	position:relative;
	margin: 5px 0 0 25px;
	padding-right:15px;
}

.services-text-wrapper h2 {
	color:#464646;
	font-size: 11pt;
	font-weight: bold;
	margin: 0;
	padding: 0;
}



.services-text-wrapper p {
	font-size: 9pt;
	margin: 0;
	padding: 0;
}
.services-icon
{
	width: 75px;
	height:75px;
	float:left;
	position:relative;
	margin: 5px 5px 5px 0;
	padding-right: 10px;
}


/*-----------------------------------------------------------------------------------------------
Quotes Neil Sampson
-----------------------------------------------------------------------------------------------*/

.quotes-wrapper
{
	width: 962px;
	height: 675px;
	background: url(../images/quotes/quotes-bg.png) no-repeat;
	position:relative;
	margin: 20px 0 0 35px;

}

.quotes-left-coloumn
{
	width:  450px;
	height: 625px;
	margin: 10px 5px 15px 30px;
	float: left;
}

.quotes-right-coloumn
{
	width:  420px;
	height: 625px;
	float: right;
	margin: 10px 5px 15px 5px;
	padding-left: 15px;
}

.quotes-intro
{
	width: 440px;
	height: 200px;
	padding: 5px;
	position:relative;
}

.quotes-intro p {
		color: #2c2c2c;
		font-size: 16pt;
	line-height: 100%;
}

.quotes-right-intro
{
	width: 440px;
	height: 150px;
	padding: 5px;
	position:relative;

}

.quotes-left-coloumn div h2 {
		color: #2c2c2c;
		border-left: 5px solid #ff209b;
		font-size: 14pt;
		margin: 10px 20px 3px 6px;
		padding: 1px 10px 3px 6px;
}

.quotes-right-coloumn div h2 {
		color: #2c2c2c;
		border-left: 5px solid #ff209b;
		font-size: 14pt;
		margin: 10px 20px 3px 6px;
		padding: 1px 10px 3px 6px;
}

.quotes-form-left
{
	width: 440px;
	height: 210px;
	padding: 5px;
	position:relative;
}

.quotes-form-left-grey
{
	width: 420px;
	height: 380px;
	padding: 10px;
	position:relative;
}

textarea
{
	font: 12px "Trebuchet MS";
	color: #383838;
}