/**********************************/
/*Basic Elements*/ 
/**********************************/

body {
	background: #222  url('../images/background_footer.jpg');
	color: #FFF;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	line-height: 20px;
	}
	
a {
	color: #d81d1d; /*f04603*/
	font-weight: bold;
	outline: none;
	text-decoration: none;
	}

	a:hover {	color: #222; }
		
	a:focus {
		position : relative; 
		top: 1px;
		}
	
h2, h3, h4 { font-weight: normal; }
	
h2 {
	font-size: 30px;
	line-height: 36px;
	margin-bottom: 10px;
	}
	
h3 {
	font-size: 20px;
	line-height: 26px;
	margin-bottom: 10px;
	}
	
h4 {
	font-size: 18px;
	line-height: 24px;
	margin-bottom: 10px;
	}	

p { margin-bottom: 20px; }
	
p:last-child { margin-bottom: 0; }

blockquote {
	margin-bottom: 20px;
	padding: 0 40px;
	text-align: justify;
	}

/**********************************/
/*Basic Layout*/ 
/**********************************/

#beginning {
	background: #d81d1d url('../images/background_header.jpg');
	color: #FFF;
	}	
	
#middle {
	background: #FFF url('../images/background_middle.png') repeat-x;
	color: #222;
	float: left;
	padding: 40px 0;
	width: 100%;
	}	
	
#end {
	background: url('../images/end_hightlight.png') top center no-repeat;
	float: left;
	padding: 30px 0;
	text-shadow: 0 2px 1px #000;
	width: 100%;
	}
	
	.section {
		margin: 0 auto;
		padding: 0 10px;
		width: 940px;
		}
	
/**********************************/
/*Dividers*/ 
/**********************************/	

div.hr {
	background-repeat: repeat-x;
	clear: both;
	height: 52px;
	width: 100%;
	}	
	
div.hr.top {
	background-image: url('../images/divide_top.png');
	margin-top: -2px;
	position: relative;
	z-index: 100;
	}	
	
div.hr.bottom {
	background-image: url('../images/divide_bottom.png');
	height: 50px;
	position: relative;
	z-index: 100;
	}	
	
/**********************************/
/*Beginning*/ 
/**********************************/	

#header {
	background: url('../images/background_header_bokeh.jpg') no-repeat;
	min-height: 50px;
	padding: 30px 10px;
	}
	
	h1 {
		float: left;
		height: 50px;
		width: 250px;
		}
		
		h1 a {
			background: url('../images/logo.png') 0 0 no-repeat;
			display: block;
			height: 50px;
			text-indent: -9999em;
			width: 250px;
			}
		
		h1 a:focus {
				background-position: 0 -50px;
				top: 0;
				}
			
	#nav {
		float: right;
		height: 36px;
		padding: 7px 0;
		width: 465px;
		}
		
		#nav li {
			float: left;
			margin-left: 4px;
			}
		
		#nav li a {
			background-image: url('../images/nav.png');
			display: block;
			height: 36px;
			text-indent: -9999em;
			}
			
			#nav li a:focus { top: 0; }
			
		#nav li.home a { background-position: 0 0; width: 85px; }
		#nav li.about a { background-position: -90px 0; width: 85px; }
		#nav li.portfolio a { background-position: -180px 0; width: 105px; }
		#nav li.contact a { background-position: -290px 0; width: 95px; }
		#nav li.blog a { background-position: -390px 0; width: 75px; }
		
		#nav li.home a:hover, #nav li.home.selected a { background-position: 0 -36px; }
		#nav li.about a:hover, #nav li.about.selected a { background-position: -90px -36px; }
		#nav li.portfolio a:hover, #nav li.portfolio.selected a { background-position: -180px -36px; }
		#nav li.contact a:hover, #nav li.contact.selected a { background-position: -290px -36px; }
		#nav li.blog a:hover, #nav li.blog.selected a { background-position: -390px -36px; }
		
		#nav li.home a:focus, #nav li.home.selected a:focus { background-position: 0 -72px; }
		#nav li.about a:focus, #nav li.about.selected a:focus { background-position: -90px -72px; }
		#nav li.portfolio a:focus, #nav li.portfolio.selected a:focus { background-position: -180px -72px; }
		#nav li.contact a:focus, #nav li.contact.selected a:focus { background-position: -290px -72px; }
		#nav li.blog a:focus, #nav li.blog.selected a:focus { background-position: -390px -72px; }
		
	#introduction {
		clear: left;
		font-size: 32px;
		line-height: 48px;
		margin-bottom: 0;
		padding-top: 24px;
		text-align: center;
		width: 940px;
		}
		
	#showcase {
		height: 210px;
		margin: 30px auto 20px auto;
		width: 800px;
		}

		.roundabout-moveable-item {
			height: 210px;
			width:300px;
			cursor: pointer;
			}
			
			.roundabout-moveable-item img {
			height: 100%;
			width: 100%;
			}

			.roundabout-in-focus { cursor: auto; }
			
				.roundabout-moveable-item h2 a {
					display: none;
					text-indent: -9999em;
					}
			
				.roundabout-in-focus:hover h2 a {
					background: url('../images/view_project.png') center center no-repeat;
					display: block;
					height: 210px;
					left: 0;
					position: absolute;
					top: 0;
					width: 300px;
					}
		
		
/**********************************/
/*Middle*/ 
/**********************************/	

.section ul { margin-bottom: 20px; }

/*index (blog archive list) */

#archives { 
	float: left;
	margin-bottom: 0;
	width: 100%;
	}

.entry {
	float: left;
	margin-bottom: 30px;
	position: relative;
	width: 100%;
	}

.entry:last-child { margin-bottom: 0; }

	.entry h2 {
		float: left;
		margin-bottom: 0;
		padding: 0 20px 0 160px;
		width: 360px;
		}
		
	.meta {
		left: 0;
		padding-top: 5px;
		position: absolute;
		top: 0;
		width: 140px;
		}
		
		.meta li {
			margin-bottom: 5px;
			/*padding-left: 18px;*/
			}
			
		/*.meta li.date { background: url('../images/meta_date.png') 0 5px no-repeat; }
		.meta li.comments { background: url('../images/meta_comments.png') 0 5px no-repeat; }*/
		
	.entry p {
		float: left;
		padding-top: 5px;
		width: 380px;
		}
/*blog item*/

#meta {
	float: left;
	margin-bottom: 20px;
	width: 100%;
	}

	#meta ul {
		border-bottom: 1px #CCC solid;
		float: left;
		margin-bottom: 0;
		padding-bottom: 20px;
		width: 100%;
		}
		
		#meta ul li {
			border-right: 1px #CCC solid;
			float: left;
			margin-right: 20px;
			padding-right: 19px;
			text-align: center;
			width: 200px;
			}
		
		#meta ul li.tags {
			width: 440px;
			}
		
		#meta ul li.comments {
			border-right: 0;
			margin-right: 1px;
			}

#post {
	clear: left;
	margin: 0 auto;
	width: 620px;
	}
	
	#post ol li, #post ul li {
		list-style-type: circle;
		margin: 0 0 5px 40px;
		}
	
	#post ol li { list-style-type: decimal; }
		
	#post .imgleft {
		float: left;
		margin: 0 20px 20px 0;
		}
	
	#post .imgright {
		float: right;
		margin: 0 0 20px 20px;
		}
		
/*comments*/	

#comments {
	border-top: 1px #CCC solid;
	margin-top: 20px;
	padding-top: 20px;
	}
	
	#comments h3 { margin: 0 0 20px 160px; }
	
	.commentlist {
		border-bottom: 1px #DDD dashed;
		float: left;
		margin-bottom: 20px;
		padding-bottom: 20px;
		width: 100%;
		}
	
	.comment {
		float: left;
		margin-bottom: 20px;
		width: 100%;
		}
	
		.commenter {
			float: left;
			margin-right: 20px;
			text-align: right;
			width: 140px;
			} 
			
			.commenter h4 { margin-bottom: 0; }
			
		.theComment {
			float: left;
			width: 620px;
			}
	
	#respond {
		clear: left;
		}
		
/*portfolio*/

#portfolio-list {
	float: left;
	margin-bottom: 0;
	width: 960px;
	}
	
	#portfolio-list li {
		float: left;
		margin: 0 20px 20px 0;
		width: 300px;
		}
		
		#portfolio-list li img {
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			background-color: #EFEFEF;
			border: 1px #CCC solid;
			display: block;
			height: 200px;
			padding: 9px;
			width: 280px;
			}
			
		#portfolio-list li img:hover { border-color: #AAA; }
		
#control {
	border-bottom: 1px #CCC solid;
	margin-bottom: 20px;
	padding-bottom: 10px;
	position: relative;
	width: 940px;
	}		
	
	#control h2 { 
		margin: 0 auto;
		text-align: center;
		width: 480px;
		}
		
	#control .control {
		left: 0;
		position: absolute;
		top: 10px;
		width: 230px;
		}
	
		.control a {
			background: url('../images/control.png') no-repeat;
			display: block;
			font-size: 10px;
			height: 24px;
			line-height: 11px;
			overflow: hidden;
			}
		
			.control a span {
				color: #484848;
				display: block;
				}
	
	#control #next {
		left: auto;
		right: 0;
		}
	
		#prev a {
			background-position: 0 -24px;
			padding-left: 30px;
			}
			
		#prev a:hover { background-position: 0 -72px; }
	
		#next a {
			background-position: 206px 0;
			text-align: right;
			padding-right: 30px;
			}
			
		#next a:hover { background-position: 206px -48px; }

#project {
	float: left;
	width: 940px;
	}		
		
	#details {
		float: left;
		margin-right: 20px;
		width: 320px;
		}	
		
		#details p:last-child { margin-bottom: 20px; }
		
		#details .info ul li {
			list-style-type: circle;
			font-weight: bold;
			}
			
			#details .info ul li span { font-weight: normal; }
		
		#details .testimonial blockquote {
			background: url('../images/quote.png') 0 4px no-repeat;
			margin: 0 0 0 -30px;
			padding: 0 0 0 30px;
			}
		
			#details .testimonial blockquote cite {
				display: block;
				font-style: italic;
				margin-top: 5px;
				}
		
	#preview {
		float: left;
		width: 600px;
		}
		
	#preview.website {
		background: url('../images/browser.png') no-repeat;
		padding-top: 30px;
		}
			
			.website ul {
				height: 600px;
				width: 600px;
				}
			
				.website ul li {
					height: 600px;
					width: 600px;
					}
			
					.website ul li img {
						display: block; 
						height: 600px;
						width: 600px;
						}
		
	.view a {
		background: url('../images/view.png') 0 0 no-repeat;
		display: block;
		height: 40px;
		margin-top: 20px;
		text-indent: -9999em;
		width: 160px;
		}
		
	.view a:focus { background-position: 0 -40px; top: 0; }
		
/*about*/

#middle .about {
	float: left;
	margin-right: 40px;
	width: 600px;
	}
	
	.about .photo {
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		background-color: #EFEFEF;
		border: 1px #CCC solid;
		display: block;
		height: 250px;
		margin-bottom: 20px;
		padding: 9px;
		width: 580px;
		}
	
/*contact*/

.theForm {
	float: left;
	margin-right: 40px;
	width: 600px;
	}
	
	#contactMeForm p { position: relative; }
	
	#contactMeForm input, #contactMeForm textarea {
		width: 590px;
		}
	#contactMeForm #submit {
		width: 300px;
		}
	
	#contactMeForm textarea { height: 150px; }	
		
	#contactMeForm label {
		float: none;
		line-height: 20px;
		text-align: left;
		}
	
	#contactMeForm label.error {
		color: #d81d1d;
		margin-right: 0;
		position: absolute;
		right: 0;
		text-align: right;
		top: 0;
		width: 300px;
		}
	
	#contactMeForm #submit {
		background: url('../images/contact.png') 0 0 no-repeat;
		border: none;
		height: 40px;
		width: 160px;
		}
		
	#contactMeForm #submit:focus {
		background-position: 0 -40px;
		}
	
.extra-infos {
	float: left;
	width: 300px;
	}
		
	#networks ul li a {
		background: left center no-repeat;
		display: block;
		line-height: 32px;
		padding-left: 25px;
		}
		
	#networks ul li.twitter a { background-image: url('../images/twitter_16.png'); }
	#networks ul li.linkedin a { background-image: url('../images/linkedin_16.png'); }
	#networks ul li.delicious a { background-image: url('../images/delicious_16.png'); }
	#networks ul li.facebook a { background-image: url('../images/facebook_16.png'); }
	#networks ul li.stumbleupon a { background-image: url('../images/stumbleupon_16.png'); }
	#networks ul li.youtube a { background-image: url('../images/youtube_16.png'); }
	
	#theMap {
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		background-color: #EFEFEF;
		border: 1px #CCC solid;
		display: block;
		height: 300px;
		margin-bottom: 20px;
		padding: 9px;
		width: 280px;
		}
	
		#gmap {
			height: 300px;
			width: 280px;
			}

	
/**********************************/
/*Forms*/ 
/**********************************/

label {
	display: block;
	float: left;
	line-height: 28px;
	margin-right: 20px;
	text-align: right;
	width: 130px;
	}

input, select, textarea {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px #CCC dashed;
	color: #222;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 12px;
	padding: 4px;
	width: 290px;
	}

input:focus, select:focus, textarea:focus { border-color: #67a702; }

input.error, textarea.error { border-color: #d81d1d; }
	
textarea {
	width: 590px;
	}
	
#submit {
	background-color: #67a702; 
	border-color: #548802;
	color: #FFF;
	cursor: pointer;
	width: auto;
	}
	
	#submit:hover {
		background-color: #548802; 
		border-color: #406702;
		}
	
/**********************************/
/*End*/ 
/**********************************/

#end a { color: #d81d1d; }

#end a:hover { color: #FFF; }

#end .section { padding: 0; }

#extra {}

	.segment {
		float: left;
		margin-right: 50px;
		width: 280px;
		}
		
		.segment h2 {	margin-bottom: 7px; }
	
	#about {}
	
	#about p { margin-bottom: 0; }
	
	#delicious { margin-right: 0; }
	
				#bookmarks li { margin-bottom: 10px; }
				
				#bookmarks, #bookmarks li:last-child { margin-bottom: 0; }
	
	#twitter {	position: relative; }
		
		#twitter h2 {
			background: url('../images/twitter_divide.png') bottom right no-repeat;
			margin-bottom: 10px;
			padding-bottom: 18px;
			}
		
		#tweets { margin-bottom: 0; }
		
			#tweets li {
				height: 120px;
				width: 280px;
				}
		
		#follow {
			line-height: 36px;
			position: absolute;
			right: 0;
			top: 0;
			}
			
#footer {
	clear: left;
	padding-top: 30px;
	}
	
	#footer p {
		float: left;
		padding-top: 30px;
		width: 400px;
		}
		
	#footer ul {
		float: right;
		padding-top: 30px;
		text-align: right;
		width: 540px;
		}
		
		#footer ul li {
			float: right;
			}
			
			#footer ul li a {
				background: url('../images/rss_16.png') left center no-repeat;
				display: block;
				margin-left: 20px;
				padding-left: 24px;
				}