@charset "UTF-8";
/* CSS Document */


body {
	font: 				100%  Chaparral Pro, Times New Roman, Helvetica, Arial, webdings;
	margin: 			0; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	margin: 			0 auto; /* the auto margins (in conjunction with a width) center the page */
	padding: 			15px;
	text-align: 		center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	background-color:	#FFFFFF;
	width: 				984px;
	display: block;
}

p {
	font-size:			18px;
	color: 				#666666;
	line-height: 		30px;
	font-weight:		lighter;
	text-align:			left;
	
}

strong {
	font-weight:		normal;
}

h1, h2, h3 {
	font-weight: 		lighter;
	color: 				#666666;
	padding: 	        0px;
	margin:             0px;
}

h1 {

	text-align: 		left;
	margin-bottom: 		30px;
	margin-top: 		30px;
}

h2 {
	font-size: 			30px;
	color:				#cccccc;
} 

a {
	outline:none;
	text-decoration:	none;
	font-size: 			18px;
	color: 				#cc0000;
	
}

a:hover {
	text-decoration:	underline;
	
}

#sidebar {
	display:block;
	width:				300px;
	float: 				right;
	text-align:			left;
	margin-left: 		10px;
}

#sidebar p {
	text-align:			left;
}



#home h1 {
	font-size:			70px;
	color: 				#cccccc;
}

#about h1 {
	font-size:			70px;
	color: 				#cccccc;
}

#work h1 {
	font-size:			70px;
	color: 				#cccccc;
}

#contact h1 {
	font-size:			70px;
	color: 				#cccccc;
}

#home h1 span {
	color: 				#666666;
}

#about h1 span {
	color: 				#666666;
}

#work h1 span {
	color: 				#666666;
}

#contact h1 span {
	color: 				#666666;
}



#nav {
	display:			block;
	padding-bottom: 	40px;
	width: 				984px;
}

#nav ul {
   display:				block;
   list-style:			none;
   padding:				0;
   margin: 				0;	
}

#nav ul li{
   display:				block;
   float:				left;
   list-style-type:		none;
   width: 				267px;
   font-size:			36px;

}

#nav ul #klLi {
   text-align:			left;
}

#nav ul #aboutLi {
   text-align:			right;
}

#nav ul #workLi {
   text-align:			right;
}

#nav ul #contactLi {
   text-align:			right;
}

#home #nav ul #klLi a {
   color:				#cc0000;
}

#about #nav ul #aboutLi a {
   color:				#cc0000;
}

#work #nav ul #workLi a {
   color:				#cc0000;
}

#workTest #nav ul #workLi a {
   color:				#cc0000;
}

#contact #nav ul #contactLi a {
   color:				#cc0000;
}

#nav ul li a {
	text-decoration:	none;
	color:				#cccccc;
	font-size: 			40px;
}

#nav ul #klLi a {
	display:			block;
	text-indent:       -9009px;
	
}

#home #nav ul #klLi {
	display:			block;
    float:				left;
	margin: 			0;
	margin-top: 		6px;
	background-image: 	url(images/kieronleppard.com-selected.png);
	height:				38px;
	width: 				183px;
}


#about #nav ul #klLi {
	display:			block;
    float:				left;
	margin: 			0;
	margin-top: 		6px;
	background-image: 	url(images/kieronleppard.com-unselected.png);
	height:				38px;
	width: 				183px;
}

#work #nav ul #klLi {
	display:			block;
    float:				left;
	margin: 			0;
	margin-top: 6px;
	background-image: 	url(images/kieronleppard.com-unselected.png);
	height:				38px;
	width: 				183px;
}

#workTest #nav ul #klLi {
	display:			block;
    float:				left;
	margin: 			0;
	margin-top: 6px;
	background-image: 	url(images/kieronleppard.com-unselected.png);
	height:				38px;
	width: 				183px;
}


#contact #nav ul #klLi {
	display:			block;
    float:				left;
	margin: 			0;
	margin-top: 6px;
	background-image: 	url(images/kieronleppard.com-unselected.png);
	height:				38px;
	width: 				183px;
}

#about #nav ul #klLi:hover {
	display:			block;
    float:				left;
	margin: 			0;
	margin-top: 6px;
	background-image: 	url(images/kieronleppard.com-hover.png);
	height:				38px;
	width: 				183px;
}

#work #nav ul #klLi:hover {
	display:			block;
    float:				left;
	margin: 			0;
	margin-top: 6px;
	background-image: 	url(images/kieronleppard.com-hover.png);
	height:				38px;
	width: 				183px;
}

#workTest #nav ul #klLi:hover {
	display:			block;
    float:				left;
	margin: 			0;
	margin-top: 6px;
	background-image: 	url(images/kieronleppard.com-hover.png);
	height:				38px;
	width: 				183px;
}

#contact #nav ul #klLi:hover {
	display:			block;
    float:				left;
	margin: 			0;
	margin-top: 6px;
	background-image: 	url(images/kieronleppard.com-hover.png);
	height:				38px;
	width: 				183px;
}


#nav ul li a:hover {
	color: 				#666666;
}

#strapLine h1 {
	font-size: 			30px;
}

#kieronText {
	color:				#cc0000;

}

#taglineText {
	color:				#cccccc;

}

#hero {
	clear:				both;
	display: 			block;

}

#hero img {
	width: 				654px;
	float:				left;
}

#hero a img {
	text-decoration:	none;
	border:				none;
	
}

#hero a {
	text-decoration:	none;
	border:				none;
	padding: 	        0px;
	margin: 			0px;
}

#heroDescription {
	text-decoration:	none;
	display: 			block;
	background-color:	#cc0000;
	text-align: 		left;
	height: 			319px;
	width: 				310px;
	float: 				right;
	padding:       		20px 0 0 20px;
	
}

#heroDescription h2{
	color:				#FFCC00;
}

#heroDescription h3{
	font-size:			24px;	
	color:				#FFFFFF;
}

#heroDescription p{
	font-size:			16px;
	font-weight:		lighter;
	color:				#FFFFFF;
	padding-right: 		20px;
}

#heroDescription p a{
	text-decoration:	none;
	color:				#FFFFFF;
}

#heroDescription p a:hover{
	text-decoration:	underline;
}

#heroDescription h2, h3, p{
	
}


#features {
    display:			block;
	clear:				both;
	float: 				left;
	padding-bottom:	    60px;
	padding-top: 		30px;
}

.miniFeature {

	display:			block;
	width: 				308px;
	
	text-align:			left;
	float:				left;
	
}

#aboutMe {
	display:			block;
	margin-right:		30px;
	float:				left;
}

#aboutMe p {
	padding-top: 	    10px;
	margin: 			0px;
}

#myWork {
	display:			block;
	margin-right: 		30px;
	float:				left;
}

#myWork p {
	padding-top: 	    10px;
	margin: 			0px;
}

#contactMe {
	display:			block;
	float:				left;
}

#contactMe #contactDetails  {
	padding-top: 	    10px;
	margin: 			0px;
}

#contactMe #contactDetails  p{
	padding:	 	    0px;
	margin: 			0px;
}

#contactMe #labelling {
	font-weight:		bold;
	float:				left;
	display: 			block;
	padding-right: 		30px;
}

#contactMe #details {
	margin-left: 		10px;
}

#twitter{
	display:			block;
	float:				left;
}

#twitter {  
	float: 				right;
	display: 			block;  
	width:         		270px;                
	padding: 	        10px;        
	margin-bottom: 		30px;    
} 

#twitter img {
	float: 				left;
	margin-right: 		10px;
}

#twitter h2 {    
	font-size: 			30px;    
	font-weight:		normal;    
	color:				#CC0000;    
	margin: 			0px;    
	margin-bottom: 		0px;    
	padding: 	        0px;    
	text-align: 		left;
} 

#twitter ul { 
	display: 			block;
	list-style:   		none;    
	padding: 	        5px;    
	margin:             0px;  
	width: 				197px;  
	text-align: 		left; 
	float: right; 
} 

#twitter ul li {    
	clear: both;
	display: 			block;
	padding: 	        0px;    
	margin: 			0px;    
	color:				#444040; 
} 

#twitter ul li a { 
overflow: hidden;
	clear: 				both;
	display: 			block;
	text-decoration: 	none;
	color:				#cc0000;   
	padding: 	        0px;    
	margin: 			0px;          
}

twitter_update_list a {
	overflow: hidden;
	clear: 				both;
	display: 			block;
} 


#twitter_div a {   
	clear: both;
	display: block;
	
	overflow: hidden;
	float: 				right;
	padding-top: 		10px;    
	color:				#cc0000;     
} 

.miniFeature a {
	color:				#cc0000;
	float:				right;
	padding-top: 		10px;
}

#footer {
	clear: 				both;
	display: 			block;
	float: 				left;
	margin-top:			10px;
	width: 				984px;
	border-top-style:	solid;
	border-top-color:	#cccccc;
	border-width:		thin;	
}

#footer p {
	font-size:			12px;
}

#footer #copyright  {
	float:				left;
}

#footer #footerLinks  {
	float:				right;
}

#footer #footerLinks a  {
	text-decoration:	none;
	color:				#cc0000;
}

/* About styling */
#about #main {
	display: 			block;
	width:				654px;
	float: 				left;
	text-align:			left;
	margin-right:		20px;
	padding-top: 		0px;
	margin-top: 		0px;
}

#about #main p {
	padding-top: 		0px;
	margin-top: 		0px;
} 

#about h2{
	padding-top: 		0px;
	margin-top: 		0px;
} 

#about #main a {
	color: 				#cc0000;
	
}

#about #resumeFormatIcons {
   display:				block;
   clear: 				both;
   overflow:			hidden;
   list-style:			none;
   padding:				0;
   margin: 				0;
   margin-bottom: 		20px;	
}


#about #resumeFormatIcons li{
   display:				block;
   float:				left;
   list-style-type:		none;
   padding:				0;
   margin: 				0;	
   margin-right: 		10px;	
}

#about #resumeFormatIcons li a{
   	display:				block;
 	text-indent: 			-9009px;
}



#about #pdfLink {
	background-image: 	url('images/pdfButton.png');
	background-repeat: 	no-repeat;
	height:				44px;
	width: 				231px;
}

#about #docLink {
	background-image: 	url('images/docButton.png');
	background-repeat: 	no-repeat;
	height:				44px;
	width: 				235px;
}


#about #sidebar img {
	display: 			block;
	width: 				280px;
	height: 			280px;
	margin-bottom: 		30px;
	border-style:		solid;        
	border-color: 		#CCCCCC;        
	border-width:		1px;
	
}


#about #sidebar {
	display: 			block;
	width:				280px;
	float: 				right;
	text-align:			left;
}

#about #sidebar p {
	text-align:			left;
}

#about #sidebar h3 {
	font-size:			30px;
	color: 				#CCCCCC;
	margin-bottom: 		10px;
	clear:				both;
}




#about #sidebar ul {
   display:				block;
   list-style:			none;
   margin: 				0px 0px 0px 0px;
   padding: 	        0px 0px 0px 0px;
   padding-bottom:      30px;
  

}

#about #sidebar ul li {
	list-style-type:	none;
	margin: 			0px 0px 0px 0px;
	padding: 	        0px 0px 0px 0px;
	padding-top: 		5px;
	padding-bottom: 		5px;
}

#about #sidebar ul li p {
	margin: 			0px 0px 0px 0px;
	padding: 	        0px 0px 0px 0px;
}

#about #sidebar ul li a {
	color:				#cc0000;
	font-size:			18px;
	
}

#about #sidebar #resume {
	padding-bottom: 	20px;
}

/* Workstyling */

#work {
	text-align:			left;
}

#work a {
	color:				#cc0000;
}

#work #portfolioDescription {
	display:			block;
	width: 				280px;
	float: 				left;

	
}

#work #portfolioDescription ul li{
	margin-bottom:      20px;	
}

#work #portfolioimages {
	display:			block;
	width: 				659px;
	margin-bottom:      10px;
}

#work #portfolioimages ul {
	display:			block;	
}

#work #portfolioimages ul li{
	margin-bottom:      20px;	
}

#work #portfolioimages {
	display:			block;
	width: 				659px;
	margin-bottom:      10px;
}

#work ul {
	list-style:			none;
	padding: 	        0px;
	margin: 	        0px;
}

#work ul li {
	list-style-type:	none;
}

#work h2{
	font-size:			30px;
	color:				#666666;
}


#work h3{
	color:				#cccccc;
}

/* Contact */

#contact #main{
	display: 			block;
	width:				654px;
	float: 				left;
	text-align:			left;
	margin: 0px;
	margin-right:		20px;
	padding-top: 		0px;
	margin-top: 		0px;
	
}

#contact #main #intro {
	padding:           0px;
	margin: 0px;

}

#contact h3 {
	font-size:			30px;
	color: 				#CCCCCC;
	text-align: 		left;
}

#contact p {
	font-size:			18px;
	line-height: 30px;
}


#contact .email {
	font-size: 			18px;
}

#contact #social .email a {
	font-size: 			18px;
	color: 				#cc0000;
}

#contact #social a {
	font-size: 			18px;
	text-decoration:	none;
	color: 				#cc0000;
}

#contact #sidebar ul {
	padding: 	            0px;
	margin: 			    0px;
	list-style-type: 		none;	
}

#contact #sidebar ul li {
	padding: 	        0px;
	margin: 			0px;
	list-style-type: 	none;
}

#contact #sidebar ul li a {
	padding: 	        0px;
	margin: 			0px;
	margin-left: 		0px;
}

#contact #sidebar #emailLink {
color: 				#666666;
	padding: 	        0px;
	padding-bottom: 	0px;
	margin: 			0px;
	
}

#contact #sidebar p {
	padding: 	        0px;
	margin: 			0px;
}

#contact p a:hover {
	text-decoration: 	underline;
	color: 				#CC0000;
}

#contact #sidebar ul li{
	padding-bottom: 		5px;
	
}

#contact #sidebar ul li a {
	display:			block;
	text-indent:	    -9009px;
	
}

#contact #mapLink {
	color: #cc0000;
} 

#contact #sidebar ul #linkedinLink {
	background-image: 	url('images/socialLogos/linkedin_small.gif');
	background-repeat: 	no-repeat;
	height:				18px;
	width: 				66px;
}

#contact #sidebar ul #linkedinLink:hover {
	background-image: 	url('images/socialLogos/linkedin_small_hover.gif');
	background-repeat: 	no-repeat;
	height:				18px;
	width: 				66px;
}

#contact #sidebar ul #facebookLink {
	background-image: 	url('images/socialLogos/Facebook_small.gif');
	background-repeat: 	no-repeat;
	height:				15px;
	width: 				71px;
}

#contact #sidebar ul #facebookLink:hover {
	background-image: 	url('images/socialLogos/facebook_small_hover.gif');
	background-repeat: 	no-repeat;
	height:				15px;
	width: 				71px;
}

#contact #sidebar ul #twitterLink {
	background-image: 	url('images/socialLogos/twitter_small.gif');
	background-repeat: 	no-repeat;
	height:				18px;
	width: 				100px;
}

#contact #sidebar ul #twitterLink:hover {
	background-image:	url('images/socialLogos/twitter_small_hover.gif');
	background-repeat: 	no-repeat;
	height:				18px;
	width: 				100px;
}



#contact #googleMap {
	display: 			block;
	overflow:			hidden;
	padding: 	        10px;
	margin-top: 10px;
	border-style: 		solid;
	border-width:		1px;
	border-color:		#CCCCCC;
	margin-bottom:      10px;
	padding-bottom: 	5px;
}

#contact #googleMap a {
	display: 			block;
	overflow: 			hidden;
	padding: 	   	    0px;
	margin:				0px;
}

#contact #form {
	display: 			block;
	width: 				654px;
	
}

#contact #form #personalDetails {
	margin: 			0;
	padding: 	        0;
	display: 			block;
	width: 				654px;	
}

#contact #form .label {
	float: 				left;
	margin-right: 		15px;
	
}

#contact #form p {
 	font-size: 			24px;
	color: 				#666666;
}

#contact #form p span {
 	font-size: 			14px;
	color: 				#CCCCCC;
	font-style:			italic;
	line-height: 		18px;
}

#contact #sidebar p span {
 	font-size: 			14px;
	color: 				#CCCCCC;
	font-style:			italic;
}



#form #commentArea {
	border:				solid 1px #CCCCCC;
	font-family: 		Chapparal Pro;
	font-size: 			24px;
	color: 				#CC0000;
	width: 				634px;
}


#form .formField {
	border:				solid 1px #CCCCCC;
	font-family: 		Chapparal Pro;
	font-size: 			18px;
	color: 				#CC0000;
	width: 				199px;
}

input:focus { 
	outline: none;
	background-color:  #FFFFFF;	 
}

textarea:focus { 
	outline: none;
	background-color:	#FFFFFF;		 
}



#contact #form #submitButton {
	clear:				both;
	display: 			block;
	margin-bottom: 		30px;
}

#contact #form #submitButton #button {
	background:			transparent  url(images/submitCommentButton_06.gif) no-repeat scroll 0px 0px;
	width: 				209px;
	height: 			44px;
	border:				none; 
	font-family: 		Chapparal Pro;
	font-size: 			20px;
	color: 				#FFFFFF;
}



#twitter_div a {   
	display: block;
	overflow: hidden;
	float: 				right;
	padding-top: 		10px;    
	color:				#cc0000;     
} 

#about #twitter_div {  
	float: 				right;
	display: 			block;  
	width:         		280px;                
	padding: 	        0;        
	margin-bottom: 		30px; 
	clear:				both;
} 

#about #twitter_div h2 {    
	font-size: 			30px;    
	font-weight:		normal;    
	color:				#CC0000;    
	margin: 			0px;    
	margin-bottom: 		0px;    
	padding: 	        0px;    
	margin-bottom: 		0px; 
	text-align: 		center;
} 

#about #twitter_div ul { 
	display: 			block;
	list-style:   		none;    
	padding: 	        5px;    
	margin:             0px;  
	width: 				268px;  
	text-align: 		left; 
	 
} 

#about #twitter_div ul li {    
	padding: 	        0px;   
	margin: 			0px;   
	color:				#666666;
	font-size: 			18px;
} 

#about #twitter_div ul li a { 
	text-decoration: 	none;   
	padding: 	        0px;    
	margin: 			0px;         
} 


#twitter_div a {   
	
	padding-top: 		10px;    
	color:				#cc0000;     
} 

#twitter-link{
	float: 				right;
}

#about #sidebar #twitterPic {
	float: 				left;
	width: 				51px;
	padding-right: 		10px;
	height: 			46px;
	border: 			none;

}

#about #twitter_div #twitter_update_list li {
	float: 				left;
	padding-bottom: 	15px;
}

#about #twitter_div #twitter_update_list a {
	float: 				left;
}

#workTest h1{
	font-size:			72px;
	color: 				#cccccc;

}

#workTest h1 span{
	color: 				#666666;
}


#workTest #portfolioContent{
	float: 				left;
	padding: 	        0;
	margin: 			0;
	padding-top: 		10px;
}

#workTest #portfolioContent .portfolioEntry .portfolioDescription h3 {
	font-style:italic;
	
}

#workTest .portfolioEntry{
	clear: 				both;
	display:			block;
	padding: 	        0;
	margin: 			0;
	text-align:			left;
}

#workTest .portfolioImage{
	float: 				left;
	padding: 	        0;
	margin:             0;
	padding-right: 		30px;
	padding-bottom: 	60px;
	
}

#workTest .portfolioDescription{
	float: 				right;
	padding:            0;
	margin:             0;
	text-align:			left;
	width: 				268px;
}

#workTest #instruction {
	font-style:italic;
}

.lightBoxImage img{
	border:none;
}


#contact #sidebar img {
	display: 			block;
	width: 				280px;
	height: 			280px;
	margin-bottom: 		30px;
	border-style:		solid;        
	border-color: 		#CCCCCC;        
	border-width:		1px;
	
}

#intro {
	font-size: 30px;
	line-height: 36px;
}

#quote {
	font-size: 38px;
	line-height: 40px;
	color:#999999;
}


#hero #bigHeart {

width: 335px;
height: 318px;
	float:				left;
	
}

#hero #intro {
	width: 550px;
	display: block;
	float: left;
	margin-right: 99px;
}

#hero #intro #helloText {
	padding: 0;
	margin: 0;
	text-align:left;
	font-size: 30px;
}

#hero #intro #quote {
	text-align:center;
	width: 460px;
	display:block;
	margin-left: auto;
  margin-right: auto;
  font-size: 40px;
	line-height: 44px;
	
}

.miniFeature h2 {
	color:#CCCCCC;
}

#home .miniFeature {
	width: 308px;
}

#home #features #twitter {
	padding: 0px;
	border: none;
	width: 308px;
}

#twitter_div a {   
	display: block;
	overflow: hidden;
	float: 				right;
	padding-top: 		10px;    
	color:				#cc0000;     
} 

#home #twitter_div {  
	float: 				right;
	display: 			block;  
	width:         		280px;                
	padding: 	        0;        
	margin-bottom: 		30px; 
	clear:				both;
} 

#home #twitter_div h2 {    
	font-size: 			30px;    
	font-weight:		normal;    
	color:				#CC0000;    
	margin: 			0px;    
	margin-bottom: 		0px;    
	padding: 	        0px;    
	margin-bottom: 		0px; 
	text-align: 		center;
} 

#home #twitter_div ul { 
	display: 			block;
	list-style:   		none;    
	padding: 	        0px;    
	margin:             0px;  
	width: 				280px;  
	text-align: 		left; 
	 
} 

#home #twitter_div ul li {    
	padding: 	        0px;   
	margin: 			0px;   
	color:				#666666;
	font-size: 			18px;
} 

#home #twitter_div ul li a { 
	text-decoration: 	none;   
	padding: 	        0px;    
	margin: 			0px;         
} 


#twitter_div a {   
	padding-top: 		10px;    
	color:				#cc0000;     
} 

#twitter-link{
	float: 				right;
}

#home #twitter #twitterPic {
	float: 				left;
	width: 				41px;
	padding-right: 		0px;
	height: 			36px;
	border: 			none;

}

#home #twitter_div #twitter_update_list {
	padding-top: 		11px;
}

#home #twitter_div #twitter_update_list li {
	float: 				left;
	padding-bottom: 	15px;
	line-height: 30px;
}

#home #twitter_div #twitter_update_list a {
	float: 				left;
}

#home #features {
    display:			block;
	clear:				both;
	float: 				left;
	padding-bottom: 	0;
	padding-top: 		0;
	
}

#home #features #twitter h2 {
	color: 				#CCCCCC;
}

#home #features #twitter {
	padding-top: 		0px;
}

#home #features #contactMe {
	margin-right: 		30px;

}

#home #features #twitter #twitter_div {
	padding: 0;
	float: left;
}

#home #features #aboutMe p a {
float:none;
padding: 0;
margin: 0;
}