/* General */

body {
	background: url(../images/wallpaper_bg.gif) repeat;
	/*background: url(../images/grid_bg.png);*/
	color: rgb( 245, 245, 235 );
	font: normal normal normal 62.5%/1.8em "Lucida Grande", "Lucia Sans Unicode", sans-serif;
}

h2 {
	font-size: 1.8em;
	padding: 5px;
	background: rgb(158, 11, 15);
	display: inline;
	margin: 0 20px
}

p {
	font-size: 1.2em;
}

p a {
	color: rgb(0, 155, 200);
	text-decoration: none;
}

p a:hover {
	background: rgb(0, 140, 180);
	color: rgb(245, 245, 235);
}

/* Container */

#container {
	margin: 0 auto;
}

/* Headers & Navigation Menus */

.header {
	background: url(../images/section_header.png) center repeat-x;
	width: 100%;
	height: 6em;
}

.navigation a {
	color: rgb(245, 245, 235);
	text-decoration: none;
}

.navigation a:hover {
	background: rgb(245, 245, 235);
	color: rgb(0, 140, 180);
}

.navigation {
	margin: 0 auto;	
	width: 960px;
}

.navigation dl {
	text-align: right;
	margin: 0 20px 0 0;
}

.navigation dt {
	font-size: 2.4em;
	line-height: 1.6em;
	margin: 0 0 0 20px;
}

.navigation dd {
	font-size: 1.8em;
	line-height: 2.4em;
	display: inline;
}

.navigation dl dt {
	float: left;
}

.content {
	height: 1000px;
}

/* About */

#about .content {
	background: url(../images/about_bg.gif) no-repeat 190px 140px;
	width: 960px;
	margin: 0 auto;
	padding: 30px 20px;
}

#about .content p {
	width: 280px;
	padding: 20px 20px 0 20px;
}

#about .col1 {
	float: left;
}

#about .col2 {
	float: left;
}

#about .col2 h2 {
	margin: 0 0 0 20px;
}

#about img {
	background: url(../images/flickr_top.png);
	display: block;
	margin: -7px 0 0 20px;
	width: 240px;
	padding: 20px;
}

#about #me p {
	font-family: Georgia, serif;
	background: url(../images/flickr_bottom.png) bottom;
	margin: 0 0 0 20px;
	width: 240px;
	padding-top: 0;
	padding-bottom: 20px;
	font-size: 1.2em;
}

/* Home */


#home .content {
	background: url(../images/home_bg.gif) no-repeat -175px -35px;
	width: 960px;
	margin: 0 auto;
	padding: 30px;
}

#home .col1 {
	width: 280px;
	padding: 20px;
}

#home .col2 h2 {
	margin-left: 20px;
}

#home .content .col2 p {
	width: 280px;
	padding: 20px 20px 0 20px;
}

#home .content p a {
	color: rgb(0, 155, 200);
	text-decoration: none;
}

#home .content p a:hover {
	background: rgb(0, 140, 180);
	color: rgb(245, 245, 235);
}

#home .col3 img {
	background: url(../images/flickr_top.png);
	display: block;
	margin: 20px 0 0 20px;
	width: 240px;
	padding: 20px;
}

#home .col3 p {
	font-family: Georgia, serif;
	background: url(../images/flickr_bottom.png) bottom;
	margin: 0 0 0 20px;
	padding: 0 20px 20px 20px;
	font-size: 1.2em;
	width: 240px;
}

#about .col3 h2 {
	margin: 0 0 0 20px;
}

#home .col1 {
	float: left;
}

#home .col2 {
	float: left;
}

#home .col3 {
	float: left;
}

/* Portfolio */

#portfolio .content {
	background: url(../images/portfolio_bg.gif) no-repeat 265px 50px;
}

span.next, span.prev {
	cursor:pointer;
	font-family: Georgia, serif;
	font-size: 132px;
	line-height: 141px;
}

span.next:hover, span.prev:hover {
	color: rgb(158, 11, 15);
}

#screen {
	position:relative;
	height:420px;
	width:640px;
	margin-top:40px;
	margin: 20px auto 0 auto;
}
	#screen .next_arrow, #screen .prev_arrow {
		position:absolute;
		top: 422px;
	}
	
	#screen .prev_arrow {
		background: url(../images/prev_arrow.png) no-repeat 12px 22px;
		left: 38px;
	}
	
	#screen .next_arrow{
		background: url(../images/next_arrow.png) no-repeat 4px 22px;
		right: 36px;
	}
	
	#screen .prev_text, #screen .next_text {
		font-family: Georgia, serif;
		font-size: 2.4em;
		position: absolute;
		top: 428px;
	}
	
	#screen .prev_text {
		left: -64px;
	}
	
	#screen .next_text {
		right: -24px;
	}
	
	#navigation {
		width: 600px;
		text-align: center;
		margin-left: 62px;
		margin-top: 20px;
	}
	
		#navigation ul {
			margin-left: 29px;
			width: 460px;
		}
		
			#navigation li {
				float: left;
				margin: 0;
			}
			
				#navigation a {
					color: transparent;
					line-height: 0;
					font-weight: bolder;
					text-decoration: none;
				}
				
					#navigation img {
						border: 0px solid transparent;
						display: block;
						padding: 10px 5px;
						background: url(../images/transparent.png);
					}
					
					#navigation img.top { padding: 15px 5px 5px 5px; }
					#navigation img.topright { padding: 15px 10px 5px 5px; }
					
					#navigation img.bottom { padding: 5px 5px 15px 5px; }
				  #navigation img.bottomleft { padding: 5px 5px 15px 10px; }

					#navigation li img.first { padding: 15px 5px 5px 10px; }
					
					#navigation li img.last { padding: 5px 10px 15px 5px; }
	
#sections {
	overflow:hidden;
	width:640px;
	height:420px;
	clear:left;
	background: url(../images/portfolio_bg.png);
	
}
	
	#sections ul {
		width:6500px;
	}
	
		#sections li {
			float:left;
			padding: 20px;
		}
			#sections p {
				width:600px;
				margin:2em 0;
				font-size:1.2em;
				line-height:2em;
			}
			
			#sections h2 {
				color:#993333;
				margin:20px 0pt;
			}
			#sections a {
				/*color:#777;*/
				font-weight:bold;
				text-decoration:none;
			}

			.section {
				height: 380px;
			}

			.section dl {
				padding: 10px 0;
				line-height: 20px;
				font-family: Georgia, serif;
			}
			.section dt {
				font-size: 1.6em;
				font-weight: bold;
			}
			
			.section dt a {
				color: rgb(0, 155, 200);
				text-decoration: none;
			}
			
			.section dt a:hover {
				background: rgb(0, 140, 180);
				color: rgb(245, 245, 235);
			}
			.section dd {
				font-size: 1.2em;
				width: 600px;
			}
			
/* Contact */

#contact .content {
	background: url(../images/contact_bg.gif) no-repeat -185px 135px;
	width: 960px;
	margin: 0 auto;
	padding: 30px 20px 20px 20px;
}

	#contact .content p {
		width: 280px;
		margin: 0 0 20px 0;
	}

	#contact label {
		display: block;
		text-align: right;
	}

	#contact input {
		font-size: 1.2em;
	}

		#contact input#email, #contact input#name {
			background: rgb(245, 245, 235);
			border: 0;
			width: 280px;
		}
	
		#contact input#name {
			margin-top: 20px;
		}
		#contact input#submit {
			background: rgb(245, 245, 235);
		}

	#contact textarea {
		height: 200px;
		width: 460px;
	}

	#contact .col1 {
		float: left;
		text-align: right;
		margin: 40px 20px 0 20px;
		width: 280px;
	}

		#contact .col1 ul {
			margin: 0 0 60px 0;
		}

		#contact .col1 li {
			font-size: 1.2em;
		}

	#contact .col2 {
		margin: 0 0 0 20px;
		float: left;
	}

		#contact .col2 h2 {
			margin: 0;
		}

		#contact .col2 ul {
			margin: 20px 0 20px 0;
		}

		#contact .col2 li {
			font-size: 1.2em;
		}

		#contact .col2 li a {
			color: rgb(0, 155, 200);
			text-decoration: none;
		}

		#contact .col2 li a:hover {
			background: rgb(0, 140, 180);
			color: rgb(245, 245, 235);
		}