/* BODY */

body {
	background:black url(images/bayarea_bridge.jpg) no-repeat -40px 0px fixed;
	font-family:"Trebuchet MS",Georgia,serif;
	color:#ccc;

}

/* HEADER */

#header {
	position:fixed;
	height:220px;
	top:15px;
	width:280px;
	text-align:right;
	background:url(images/logo.png) no-repeat left;
	left:30px;
}

	#header h1 {
		color:white;
		margin-bottom:0px;
		padding-bottom:0px;
	}
	
	#header h1 span { font-weight:normal; }

/* LEGEND */

#legend {
	position:fixed;
	top:0px;
	left:330px;
	bottom:0px;
	width:150px;
	padding:10px 10px 5px 10px;
	font-size:11px;
	background:url(images/almost_black.png);
	border:1px solid #333;
	border-top:0px;
	border-bottom:0px;
	text-shadow:#000 0px 1px 2px;
}
	
	#legend img { 
		padding-right:3px;
		border:0px;
	}
	
	#legend h4 {
		text-transform:uppercase;
		letter-spacing:2px;
	}
	
	#legend h4 a {
		text-decoration:none;
		color:white;
	}
	
	#legend ul {
		list-style-type:none;
		margin:0px;
		padding:0px;
	}
	
		#legend li {
			color:#666;
			border-bottom:1px solid #222;
		}
		
		#legend li.last {
			color:#666;
			border:0px;
		}
		
			#legend li a {
				color:#666;
				display:block;
				text-decoration:none;
				padding:2px 2px 4px 2px;
			}
			
			#legend li a span {
				float:right;
				color:#333;
				padding-top:5px;
			}
			
			#legend li a:hover {
				color:white;
			}
			
	#comment_form textarea {
		width:145px;
		height:100px;
		border:1px solid #333;
		background:black;
		color:#ccc;
		padding:3px;
		font-size:11px;
		font-family:"Trebuchet MS",Helvetica,Arial,sans-serif;
	}
	
	#comment_form input[type=submit] {
		margin-top:5px;
		border:1px solid #333;
		background:black;
		color:#ccc;
		padding:3px;
		width:145px;
		text-align:center;
		text-transform:uppercase;
	}
			
/* MAIN CONTENT */
			
#content {
	position:absolute;
	width:410px;
	left:520px;
	top:0px;
	font-size:12px;
	line-height:16px;
	padding-right:20px;
	padding-bottom:50px;
}

	#content div.map {
		float:right;
		margin:0 0 10px 10px;
		padding:3px;
		border:1px solid #999;
	}
	
		#content div.main div.map a, #content div.main div.map img {
			padding:0px;
			margin:0px;
			border:0px;
		}

	#content h1 {
		font-size:17px;
		padding:5px 3px;
		margin:10px 0 0px 0;
		color:white;
		border:1px solid #333;
		text-shadow:#000 0px 1px 2px;
		background:#1a1a1a url(images/header_bg.png) no-repeat;
	}
	
	#content h1 a {
		color:white;
		border:0px;
	}
	
	#content h1 img {
		padding:0 5px;
	}
	
	#content h2 {
		text-align:right;
		margin:0 0 15px 0;
		padding:5px 0 0 0;
		font-weight:normal;
		font-size:12px;
		color:#444;
		font-family:Arial, Helvetica, sans-serif;
	}
	
	#content h2.bottom {
		margin:0 0 5px 0;
		padding:0px;
	}
	
	#content h2 a {
		border:0px;
		font-size:11px;
		padding:8px;
		margin-right:-3px;
		text-transform:uppercase;
	}
	
		#content h2 a.active {
			background:#191919;
			color:#eee;
		}
	
		
	#content h3 {
		text-align:center;
		font-weight:normal;
		margin:0 0 15px 0;
		color:#666;
		text-transform:uppercase;
		letter-spacing:2px;
		padding:20px 5px;
		font-size:16px;
		text-shadow:#000 0px 1px 2px;
	}

	
	#content h4 {
		margin:0px 0 0 0;
		padding:2px 0 0 0;
		font-size:11px;
		text-align:right;
		color:#666;
		font-weight:normal;
	}
	
	#content p {
		font-size:13px;
		line-height:17px;
		color:#aaa;
		text-shadow:#000 0px 1px 2px;
	}
	
	#content div.main img {
		padding:3px;
		margin:5px;
		margin-right:10px;
		margin-left:-5px;
	}
	
	#content div.main img.border {
		border:1px solid #333;
		padding:5px;
		cursor:pointer;
	}
		
	#content div.main img.frame {
		background:#eee;
		padding:8px;
		cursor:pointer;
		border:1px solid #666;	
	}
			
	#content a {
		color:#888;
		text-decoration:none;
		border-bottom:1px dotted #666;
	}
	
	#content a:hover {
		border:0px;
	}
	
	#content a.mobileme {
		padding:5px 5px 5px 30px;
		border:1px solid #333;
		text-decoration:none;
		color:#666;
		background:#111 url(http://www.macwebos.com/icons/pictures.png) no-repeat 5px 4px;
	}
	
	#content a.mobileme:hover {
		background-color:#222;
		color:#999;
	}

		#content #small_nav a {
			font-size:15px;
			border:1px solid #333;
			background:#111;
			padding:5px 10px;
		}
		
		#content #small_nav a:hover {
			border:1px solid #333;
			background:#222;
		}
		
		#content p.caption {
			float:right;
			text-align:left;
			font-size:15px;
			line-height:18px;
			width:170px;
		}
		
		#content span.small {
			color:#444;
			font-size:10px;
		}
		
#updates {
	position:fixed;
	top:400px;
	left:410px;
	width:150px;
	padding-top:30px;
	color:#666;
	background:url(images/dots.png) no-repeat top center;
}

	#updates h4 { 
		color: #ccc;
		margin:15px 0 0 0;
		text-transform:uppercase;
		letter-spacing:2px;
		font-size:12px;
	}
	
	#updates h5 {
		color:#777;
		font-size:10px;
		margin:0px 0 15px 0;
	}
	
	div.twitter {
		background:url(images/twitter.png) no-repeat right top;
		//height:25px;
	}
	
	div.fruitunes {
		background:url(images/fruitunes.png) no-repeat right top;
		//height:25px;
	}
	
	div.fruitunes div.tweet_date { margin-bottom:25px; }
	
	div.tweet {
		font-size:12px;
		margin-bottom:5px;
	}
	
	div.tweet span {
		color:#aaa;
		font-size:11px;
	}
	
	div.tweet_date {
		color:#777;
		font-size:10px;
		margin-bottom:15px;
	}
	
	div.tweet a {
		color:#ddd;
		text-decoration:none;
	}
	
#me {
	background:url(images/me_bg.png) no-repeat;
	float:left;
	margin:300px 0 0 -50px;
	width:600px;
	position:fixed;
	height:400px;
}

/* FOOTER */

#footer {
	bottom:0px;
	left:20px;
	position:fixed;
	font-size:10px;
	padding:20px 0;
	color:#666;
}

	#footer a {
		color:#999;
	}
	
#copyright {
	font-size:10px;
	color:#555;
}

#question {
	width:100%;
	height:50px;
	position:fixed;
	bottom:0px;
	left:0px;
	background:url(images/fader.png) repeat-x bottom left;
}

	#question a img { 
		border:0px; 
		margin:-10px 0 0 20px;
	}

/* POST BACKGROUND */

.main {
	padding:0 15px 5px 15px;
	background:url(images/almost_black.png);
	position:relative;
	border:1px solid #333;
	border-top:0px;
}

.comments {
	background:#191919;
	position:relative;
	padding:5px 15px;
	font-size:11px;
	margin:-1px -15px -5px;
}

.comments span {
	color:#999;
	float:left;
	width:100px;
}

#content .comments span a { 
	color: #eee; 
	border:0px;
	font-size:11px;
}
.comments span b { color:#eee; }

div.comment {
	margin-bottom:2px;
	border-bottom:1px solid #444;
}

#content .comments h3 {
	text-align:left;
	font-size:12px;
	margin:0px;
	padding:5px 0;
}

#content .comments p { 
	font-size:11px; 
	margin-left:100px;
}

.comments form {
	margin-top:10px;
}

.comments input[type=text] {
	background:#000;
	border:1px solid #333;
	width:290px;
	margin:2px 0;
	padding:2px;
	font-size:11px;
	font-weight:normal;
	color:#ccc;
}

.comments input[type=submit] {
	border:1px solid #333;
	background:none;
	color:#777;
	font-size:10px;
	text-transform:uppercase;
	padding:3px;
	margin:2px;
}

.comments label {
	float:left;
	width:80px;
	padding-top:3px;
	font-size:12px;
	color:#777;
}

.comments textarea {
	background:#000;
	border:1px solid #333;
	width:370px;
	height:50px;
	font-family:Tahoma, Lucida Grande, Helvetica, sans-serif;
	font-size:11px;
	padding:2px;
	color:#ccc;
}

#about {
     visibility:hidden;
     position: fixed;
     top:0px;
     left:0px;
     width:100%;
     height:100%;
     background:url(images/black_fade.png);
     text-align:center;
     z-index: 1200;
}

#overlay {
	position:fixed;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background:url(images/black_fade.png);
    z-index: 1200;
}

	#overlay div {
		margin:50px auto;
		position:relative;
		width:370px;
	}
	
	#overlay div img {
		padding:10px;
		background:white;
	}
	
	#overlay div a#close_link {
		position:absolute;
		top:-10px;
		left:-10px;
		cursor:pointer;
		z-index:1600;
		background:url(images/closebox.png) no-repeat;
		width:28px;
		height:28px;
	}

#about div {
	 width:390px;
	 height:290px;
     margin: 100px auto;
     color:black;
     position:relative;
     font-size:11px;
     padding:50px 70px 50px 50px;
     background:url(images/cloud.png) no-repeat top left;
     text-align:center;
     z-index:1500;
}

#about div img.about_img {
	float:left;
	background:white;
	padding:5px;
	margin-right:10px;
	border:1px solid #ccc;
}

#about div img.close {
	position:absolute;
	top:57px;
	left:40px;
}

#about div h1 {
	color:black;
	font-size:20px;
	text-align:center;
	background:url(images/about.png) no-repeat;
	height:30px;
	margin-left:20px;
	text-indent:-9999px;
}

#about div p {
	font-size:12px;
	text-align:justify;
	line-height:16px;
	width:390px;
	font-weight:normal;
	color:black;
}

#about div p a {
	color:#666;
}