@import url("reset.css");
@import url("typography.css");
@import url("forms.css");


#skip {
	display: none;
	visibility: hidden;
}

#container {
  width: 940px;
  margin: 0 auto;
  position: relative;
  text-align: left;
}

#content {
	clear: both;
	margin-bottom: 2em;
}


/*  Navigation
    --------------------  */

#nav {
	float: right;
	list-style-type: none;
	padding-top: 40px;
	margin: 0 0 3.5em 0;
	overflow: hidden;
}

.home-page #nav {
	 margin-bottom: 7em;
}

	#nav li {
		float: left;
		font-size: 1.25em;
		font-weight: bold;
		text-transform: lowercase;
		margin-left: 30px;
	}
	
		#nav li a {
			color: #333;
			padding: 5px 10px 7px;
			display: block;
			line-height: 1;
		}
		
		#nav li a:focus,
		#nav li a:hover {
			color: #999;
			text-decoration: none;
		}
		
		.home-page #nav-home a,		
		.home-page #nav-home a:focus,
		.home-page #nav-home a:hover,
		.about-page #nav-about a,
		.about-page #nav-about a:focus,
		.about-page #nav-about a:hover,
		.portfolio-page #nav-portfolio a,
		.portfolio-page #nav-portfolio a:focus,
		.portfolio-page #nav-portfolio a:hover,
		.contact-page #nav-contact a,
		.contact-page #nav-contact a:focus,
		.contact-page #nav-contact a:hover {
			color: #fff;
			background: #7dbe36;
		}


/*  Home page
    --------------------  */
	
#intro {
	width: 410px;
	clear: both;
	background: #eee;
	padding: 25px 500px 5px 30px;
	font-size: 1.17em;
	position: relative;
	margin-bottom: 8em;
}

	#intro img {
		position: absolute;
		right: 20px;
		top: -42px;
	}
	
	#intro #slogan {
		position: absolute;
		bottom: -4em;
		left: 0;
		font-family: Georgia, "Times New Roman", Times, serif;
		font-size: 1.5em;
		color: #999;
		width: 940px;
	}
	
		#intro #slogan strong {
			font-weight: normal;
		}
		
		
/*  Portfolio links
    --------------------  */
	
#links {
	margin: 4em 0 0 -20px;
	padding: 0;
	overflow: hidden;
	list-style-type: none;
	width: 960px;
}

	#links li {
		float: left;
		display: inline;
		width: 300px;
		margin-left: 20px;
		border-top: 3px solid #ddd;
		padding-top: 15px;
	}
	
		#links li img {
			float: right;
			margin-top: 1em;
		}
		
		#links li h2 {
			font-size: 1.33em;
			margin-bottom: 0.5em;
		}
		
			#links li h2 a {
				color: #7dbe36;
			}
			
			#links li h2 a:focus,
			#links li h2 a:hover {
				color: #9ece68;
				text-decoration: none;
			}
	
		#links li p {
			width: 140px;
		}


/*  Portfolio page
    --------------------  */
		
#portfolio-nav {
	list-style-type: none;
	margin: 0 0 3em;
	background: url(../images/portfolio-nav-border.png) repeat-x left bottom;
	overflow: hidden;
}

	#portfolio-nav li {
		float: left;
		display: inline;
		font-size: 1.17em;
		line-height: 1;
		border: 2px solid #ddd;
		margin: 0 0 0 10px;
	}
	
		.indoor-page #nav-indoor,
		.outdoor-page #nav-outdoor,
		.other-page #nav-other {
			border-bottom-color: #fff;
		}
	
			#portfolio-nav li a {
				padding: 10px 15px 12px;
				display: block;
				background: #fff;
			}
			
			#portfolio-nav li a:focus,
			#portfolio-nav li a:hover {
				background: #7dbe36;
				color: #fff;
			}
			
			.indoor-page #nav-indoor a,
			.outdoor-page #nav-outdoor a,
			.other-page #nav-other a {
				color: #333;
			}
			
			.indoor-page #nav-indoor a:focus,
			.indoor-page #nav-indoor a:hover,
			.outdoor-page #nav-outdoor a:focus,
			.outdoor-page #nav-outdoor a:hover,
			.other-page #nav-other a:focus,
			.other-page #nav-other a:hover {
				background: #fff;
				color: #333;
			}
			
#portfolio-main {
	margin-bottom: 2em;
	overflow: hidden;
	clear: both;
}

	#portfolio-main img {
		float: left;
		margin: 0 80px 2em 0;
	}
	
	#portfolio-main h2 {
		font-size: 1.33em;
		padding-top: 0.5em;
	}

.portfolio {
	margin: 0 0 3em -20px;
	list-style-type: none;
	overflow: hidden;
	width: 960px;
}

	.portfolio li {
		width: 190px;
		float: left;
		display: inline;
		margin: 0 30px 0 20px;
		overflow: hidden;
		min-height: 325px;
	}
	
	.other li {
		min-height: 275px;
	}
	
	/* #portfolio li.clear {
		clear: both;
	} */
	
		.portfolio .image {
			position: relative;
			height: 130px;
			margin-bottom: 1.5em;
		}
		
			.portfolio .image img {
				position: absolute;
				left: 0;
				bottom: 0;				
			}
		
		.portfolio h2 {
			font-size: 1.17em;
			margin-bottom: 0.5em;
			line-height: 1.25;
		}
		
		.portfolio p {
			margin-bottom: 0.5em;
			font-size: 0.92em;
		}


/*  Contact page
    --------------------  */
	
.vcard {
	font-size: 1.17em;
	margin-bottom: 3.5em;
}

.vcard .adr {
	margin-bottom: 1.5em;
}

	.vcard .adr span {
		display: block;
	}
	
.vcard p {
	margin-bottom: 0;
}

.vcard p.margin {
	margin-bottom: 1.5em;
}


/*  Footer
    --------------------  */
	
#footer {
	border-top: 3px solid #7dbe36;
	padding-bottom: 2em;
	clear: both;
	color: #999;
	text-align: right;
	line-height: 3;
}

	#footer strong {
		margin-left: 10px;
	}