/* 
--------------------------------------------------
	NOTSOGEEKY CSS DOCUMENT
	Author: Armono Wibowo
	Last Update: Jan, 2009
-------------------------------------------------- 
*/

/* --------------------------------
	01. GLOBAL BROWSER RESET
-------------------------------- */

@import "reset.css";

/* --------------------------------
	02. COMMON STYLE
-------------------------------- */

body {
	background: #fff2ac url("images/bgheader.gif") top repeat-x;
	font-family: Helvetica, Arial, Verdana, sans-serif;
	font-size: 62.5%;	/* ems rules */
	color: #372c1c;
}

a {
	text-decoration: none;
	color: #83922d;
}
a:hover {
	text-decoration: underline;
}

p {
	margin: 10px 0 0;
	font-size: 1.2em;
	line-height: 18px;
}


/* --------------------------------
	03. STRUCTURE
-------------------------------- */


#wrapper {
	margin: 0 auto; padding: 0;
	width: 780px;
}



/* 	HEADER
-------------------------------- */
#header {
	overflow: hidden;
	height: 1%;
}
		.logo h1 a {
			margin: 28px 0 0 48px;
			background: url("images/notsogeeky.png") no-repeat;
			width: 136px; height: 104px;
			display: block;
			text-indent: -9000px;
		}
		
		
/* Right Nav
-------------------------------- */
.nav {
	float: right;
	margin-top: -72px;
	height: 40px;
	
}
.nav ul {
	list-style: none;
	margin: 0; padding: 0;
}
.nav ul li {
	float: left;
	margin: 0;
	line-height: 40px;
	font-size: 1.8em; font-weight: bold;
	background: url("images/separator.gif") right no-repeat;
	
}
.nav ul li a {
	display: block;
	padding: 0 17px;
	color: #382d1d;
	text-decoration: none;
}
	.nav ul li a:hover {
		color: #7b5c2a;
		text-decoration: none;
	}
			
			
/* Banner
-------------------------------- */
#banner {
	float: right;
	margin: -15px 0 15px 0; padding: 5px;
	width: 468px; height: 60px;
	background: #fff;
}		



/* 	CONTENT
-------------------------------- */
#content {
	clear: both;
	margin: 28px 0 0; /*padding-bottom: 50px;*/
	background: #fff;
	overflow: hidden;
	height: 1%;
	/*z-index: 100;*/
}
	#content h2 {
		margin: 0; padding: 30px 30px 0 30px;
		font-size: 2.0em;
		color: #382d1d;
		background: url("images/main_rounded_top.gif") top left no-repeat;
	}
		h2 span {
			color: #9c4317;
		}
	
	#content p.postinfo {
		margin: 5px 0 0;
	}
	#content img {
		margin: 15px 0 0;
	}



/* Main Content
-------------------------------- */
.maincont {
	float: left;
	margin: 0;
	width: 485px;
} 
	.maincont-inner {
		padding: 0 30px;
	}
		.maincont-inner ul {
			margin: 10px 0 0; padding: 0;
			list-style: none;
		}
		.maincont-inner ul li {
			display: block;
			width: auto;
			margin: 0; padding-left: 20px;
			font-size: 1.2em;
			line-height: 18px;
			text-indent: 0;
			background: url("images/bullet.gif") 0 2px no-repeat;
		}
		
		.maincont-inner h3 {
			margin: 30px 0 0;
			font-size: 1.6em;
			color: #9c4317;
		}
		
		.comment {
			padding: 10px 0;
			border-bottom: 1px solid #dedede;
			overflow: hidden;
			height: 1%;
		}
			.comment .pic {
				float: left;
				margin-top: -15px;
				width: 65px;
			}
				img.avatar {
					border: 3px solid #dedede;
					padding: 2px;
				}
				
			.comment .bubble {
				float: right;
				width: 360px;
			}
				.bubble h4 {
					margin: 0;
					font-size: 1.2em;
				}
					.bubble h4 span {
						font-weight: normal; font-style: italic;
					}
					
				.bubble p {
					margin: 5px 0 0;
				}
			

/* Side Content
-------------------------------- */
.sidecont {
	float: right;
	margin: 0;
	width: 295px;
}
	.sidecont-inner {
		background: #57381c url("images/side_rounded_bottom.gif") bottom left no-repeat;
	}
	.sidecont-inner p {
		margin: 0; padding: 30px;
		font-size: 1.8em;
		line-height: 22px;
		color: #fff8d2;
		background: url("images/side_rounded_top.gif") top right no-repeat;
	}
		.sidecont-inner p em {
			color: #d6c181;
		}
		
	.sidecont .archive, .sidecont .channel {
		margin-top: 20px; padding: 0 30px;
	}
		.archive h3 {
			margin: 0; padding: 0;
			font-size: 1.6em;
			color: #9c4317;
		}
		.sidecont .episode {
			overflow: hidden;
			height: 1%;
			border-bottom: 1px solid #dedede;
		}
			.episode img {
				float: left;
				padding: 0 15px 20px 0;
			}
			.episode h4 {
				margin: 15px 0 0;
				font-size: 1.3em;
			}
			.episode p {
				margin: 4px 0 0;
				line-height: 16px;
			}
				.episode p span {
					font-style: italic;
					color: #6b6357;
				}
				
		.channel ul {
			margin: 10px 0 0; padding: 0;
			list-style: none;
		}
		.channel ul li {
			display: block;
			width: auto;
			margin: 0; padding-left: 24px;
			font-size: 1.2em;
			line-height: 24px;
			text-indent: 0;
		}
		.channel ul li.feed {
			background: url("images/ico_feed.png") 0 3px no-repeat;
		}
		.channel ul li.facebook {
			background: url("images/ico_facebook.gif") 0 3px no-repeat;
		}
		.channel ul li.twitter {
			background: url("images/ico_twitter.gif") 0 3px no-repeat;
		}
		.channel ul li.flickr {
			background: url("images/ico_flickr.gif") 0 3px no-repeat;
		}
		.channel ul li.vimeo {
			background: url("images/ico_vimeo.gif") 0 3px no-repeat;
		}
		

/* 	FOOTER
-------------------------------- */
#footer {
	margin: 0; padding: 0;
	height: 130px;
	color: #aea380;
	text-align: right;
	background: #382d1d;
	/*z-index: 1;*/
}
	.footer-inner {
		margin: 0 auto; padding-top: 50px;
		width: 780px;
		background: url("images/main_rounded_bottom.gif") top no-repeat;
	}
	
	.footer-inner .copyright {
		float: left;
	}
	.footer-inner .poweredby {
		float: right;
	}
	.footer-inner p {
		margin: 0;
		font-size: 1.1em;
		line-height: 80px;
	}
	

/* 	FORM CONTROLLER
-------------------------------- */	
form {
	margin: 30px 0 0;
}


/* Inquiry Form
-------------------------------- */
form div.inquiry {
	background: #f6f4d4 url("images/comment_rounded_bottom.gif") bottom no-repeat;
	overflow: hidden;
	height: 1%;
}	
	form div.inquiry h3 {
		margin: 0; padding: 15px 20px 10px 20px;
		font-size: 1.6em;
		color: #9c4317;
		background: url("images/comment_rounded_top.gif") top no-repeat;
		border-bottom: 1px solid #fff;
	}
	form div.inquiry p {
		padding-left: 20px;
	}
	
form div.inquiry label, form div.inquiry input, form div.inquiry textarea {
	float: left;
	margin: 0;
	font-size: 1.2em; font-family: Helvetica, Arial, Verdana, sans-serif;
}
form div.inquiry label {
	display: block;
	width: 75px;
	margin: 10px 15px 0 0; padding: 5px 0 0;
	text-align: right;
}
form div.inquiry input {
	width: 175px;
}
form div.inquiry textarea {
	width: 290px;
}

form div.inquiry br {
	clear: left;
}
form div.inquiry input.tfield, form div.inquiry textarea.tarea {
	margin: 10px 0 0; padding: 4px;
	background: #fff;
	border: 1px solid #cec39e;
	color: #655237;
}
form div.inquiry input.button {
	margin: 10px 0 25px 0; padding: 2px 4px;
	background: #655237;
	color: #fff;
	width: auto;
}