@charset "utf-8";

/*
Título: Nebula - DavidBohorquez.Com Template
Autor: David Bohórquez (http://www.davidbohorquez.com/)
Copyright © 2010 David Bohórquez (http://www.davidbohorquez.com/). Todos los derechos reservados.
*/

html, body { height: 100%;}

body{
	background: #000 url(../images/bg-nebula.jpg) no-repeat top left fixed;
	color: #DDD;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
}

p, #content h1, h3, h4, h5, h6{
	line-height: 1.4;
	margin-bottom: 14px;
}

h2, #content h1{
	line-height: 1;
	margin-bottom: 30px;
}

#content h1, h2{ font-size: 96px;}
h3{ font-size: 32px;}
h4{ font-size: 24px;}
h5{ font-size: 18px;}
h6{ font-size: 14px;}

a, a:active, a:visited{
	text-decoration: none;
	color: #9BF;
	font-weight: bold;
}

a:hover{ color: #69F;}

/*---------- Layout ----------*/

#wrapper{
	width: 880px;
	margin: 0px 40px -98px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
}

	#header{
		width: 260px;
		margin-top: 150px;
		padding: 0 20px;
		float: left;
		overflow: hidden;
		text-align: right;
		font-size: 16px;
	}

		#logo{
			font-size: 22px;
			text-transform: uppercase;
			margin-bottom: 50px;
		}
	
		#nav{
			clear: both;
			font-size: 30px;
			overflow: hidden;
			margin-bottom: 50px;
		}
		
			#nav li a, #nav li a:active, #nav li a:visited{ color: #99A;}
			#nav li a:hover, #nav li.current a{ color: #FFF;}

			#header .heading{
				font-weight: bold;
				text-align: center;
				color: #FFF;
				font-size: 18px;
				display: block;
				border-bottom: solid 1px #666;
				padding-bottom: 8px;
				margin-bottom: 8px;
			}
		
		#search{ margin-bottom: 8px;}		
			#search .submit{ 
				width: 32px;
				background: url(../images/search.png) no-repeat;
			}
			#search .query{ width: 198px;}
			
		#search-scope{ 
			text-align: center;
			margin-bottom: 20px;
		}
		
			#search-scope input{ margin-left: 14px;}
		
		#followontumblr a{ 
			background: url(../images/follow-on-tumblr.png) no-repeat center;
			height: 30px;
			display: block;
		}
		
		#followontumblr span{ display: none;}
		
		#header #twitter a{
			background: url(../images/twitter.png) no-repeat left;
			padding-left: 26px;
			display: inline;
			color: #FFF;
		}
		
		#tweetcontainer li{
			font-size: 14px;
			border-bottom: solid 1px #666;
			padding-bottom: 8px;
			margin-bottom: 8px;
		}
		
		#following-avatars{ text-align: center; line-height: 2;}
			
			#following-avatars li{
				display: inline;
				margin: 2px;
			}
			
		#buttons{ 
			margin-bottom: 20px;
			overflow: hidden;
		}
			
			#buttons li{
				float: left;
				width: 122px;
				padding-right: 8px;
				text-align: left;
				margin-bottom: 8px;
			}
				
				#buttons li a{ 
					padding-left: 40px;
					display: block;
					height: 32px;
					line-height: 32px;
				}
			
				#button-rss a{ background: url(../images/rss.png) no-repeat left;}
				#button-random a{ background: url(../images/random.png) no-repeat left;}
				#button-archive a{ background: url(../images/archive.png) no-repeat left;}
				#button-mobile a{ background: url(../images/mobile.png) no-repeat left;}
			
	#content{
		padding-top: 140px;
		padding-bottom: 50px;
		margin-left: 340px;
		width: 540px;
	}

		.post{
			background: url(../images/bg-black-alpha.png) repeat;
			padding: 20px;
			margin-bottom: 40px;
			width: 500px;
			overflow: hidden;
		}
		
#footer{
	width: 260px;
	padding: 0 20px 50px;
	margin-left: 40px;
	font-size: 12px;
	text-align: right;
}
	
	#footer a, #header a{ color: #CCC;}
	#footer a:hover, #header a:hover{ color: #FFF;}
	#footer p{ margin-bottom: 0; line-height: 2;}

			
/*---------- Formularios ----------*/

#content form{ overflow: hidden;}

input, textarea{
	color: #DDD;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 18px;
	border: none;
	background: none;
	padding: 4px;
}

#content form input, #content form textarea{
	width: 484px;
	margin-bottom: 0;
	overflow: auto;
}

input.submit, #content input.submit{
	font-weight: bold;
	color: #111;
	background: #DDD;
	cursor: pointer;
	width: auto;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

input.submit:hover, #content input.submit:hover{
	background: #FFF;
}

#content input.submit{ float: right;}

label{ cursor: pointer;}

/*---------- Tablas ----------*/

/*---------- Clases -----------*/

.widget, .audio, .footer, #navigation span, #navigation a, #content input, #content textarea, .nav-button{
	background: url(../images/bg-black-alpha.png) repeat;
	padding: 8px;
	margin-bottom: 20px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	overflow: hidden;
}

.quote, .copy blockquote{
	background: url(../images/quotes.png) no-repeat top left;
	font-size: 32px;
	padding: 20px 0 0 10px;
	font-style: italic;
	margin-bottom: 20px;
}

.quote-source{ font-size: 16px;}

.link h3 a{
	padding-right: 40px;
	background: url(../images/arrow-right.png) no-repeat right;
	display: block;
}

.media, .album-art, .quote-source, .copy ul, .copy ol{ margin-bottom: 20px;}

.audio .meta, .audio_player{ 
	float: left;
	margin-right: 10px;
	font-size: 16px;
}

.audio .meta{ line-height: 26px;}

.line{ line-height: 1.4;}
	.line strong{ color: #9BF;}

	.copy ul li{
		list-style: disc outside;
		margin-left: 32px;
		line-height: 1.4;
	}
	
	.copy ol li{
		list-style: decimal outside;
		margin-left: 32px;
		line-height: 1.4;
	}
	
	.copy blockquote, blockquote.quote{
		font-size: 18px;
		margin-left: 32px;
		min-height: 34px;
	}

.footer{
	font-size: 14px;
	margin-bottom: 0px;
	margin-top: 8px;
	clear: both;
}

	.notes, .date{ float: left;}
	.notes{ width: 30%; text-align: right;}
	.date{ width: 70%;}
	
	.tag-commas:last-child  { display:none;}
	
#navigation, .nav-button{ float: right;}

.optional{ display: none;}
.email{ font-size: 32px;}
.warning{ color: #F99;}
.success{ color: #9F9;}
.project-image{ margin-bottom: 20px; display: block;}

.aside{
	float: right;
	margin-left: 20px;
	margin-bottom: 20px;
	width: 200px;
	font-size: 14px;
}

	.aside img{ margin-bottom: 8px;}
	.aside h4{ font-size: 24px; margin-bottom: 0;}
	.aside h5{ font-size: 16px; margin-bottom: 8px;}
	.aside ul li{ margin-left: 10px; margin-bottom: 4px;}
	.aside ul li img{ vertical-align: text-top; margin: 0 4px 0 0;}