/* 
The Big Noob - two point ooohhhhhh yeeeaaaah, baby
-----------------------------------------------------------------------------------------------

Hello. CSS is a journey and I shall be the narrator. Our story begins with myself beckoning
the aid of a few friendly css gnomes. These compassionate, forest-dwelling creatures and I 
began this journey quite awhile ago. Together, we toiled through many hardships together, 
battling foes the likes of Splinternet Explorer the Fifth and a Half and his tumultuous son, 
the Sixth, as well as W3C Standroids and Nit Picker the Validator. Alas, we have emerged 
victorious, glad to be alive and well. Here is our story in its entirety...

-----------------------------------------------------------------------------------------------
*/


/*****************************************************
* Global
*****************************************************/

* { padding: 0; margin: 0; }

body {
    text-align: center;
    background: url(/_graphics/bg.jpg) repeat;
    font: normal 100% "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}

ul,
li  { list-style-type: none; }
img { border: 0; }
a   { outline: none; }

table,
tr,
td {
    border: 0;
    border-collapse: collapse;
    vertical-align: top;
}

div.clear {
	position: relative;
	clear: both;
}

.hidden { display: none; }


/*****************************************************
* Typography
*****************************************************/

body#home h1 {
	text-indent: -7777px;
}

h2,
h3 {
	font: bold 220% "Century Schoolbook", Georgia, Times, serif;
	color: #333;
	line-height: 90%;
	margin: .2em 0 .4em 0;
	letter-spacing: -2px;
}
h3 {
	font-weight: normal;
	letter-spacing: -1px;
	font-size: 150%;
	margin-bottom: .7em;
	color: #fff;
}
	#whole_post h3 {
		margin: .1em 0 .4em 0;
		padding: 0 0 .5em 0;
		border-bottom: 1px solid #1e4979;
		font-size: 180%;
		font-weight: bold;
	}

h5 {
	font: normal 60% Georgia, "Century Schoolbook", Times, serif;
	color: #fff;
	letter-spacing: 4px;
	margin: 30px 0;
	line-height: 100%;
	text-transform: uppercase;
}
	.column_right h5 {
		margin-top: 40px;
		letter-spacing: 3px;
	}
	
	#hotness h5 {
		margin-left: 10px;
	}
	
	#flickrness h5,
	#virb_friends h5,
	#virb_tunes h5 {
		margin: 7px 0 15px 0;
	}
	
	.column_small_right h5.alt {
		margin-bottom: 10px;
	}
	.column_right h5.solo { margin-top: 0; }
	
em { font-family: Georgia, "Century Schoolbook", Times, serif; }

p {
	font-size: 80%;
	color: #6691be;
	line-height: 100%;
}

	#cover_story p {
		font-size: 75%;
		color: #76879b;
	}
	
	a#author_link p,
	a#author_link:visited p {
		float: left;
		width: 740px;
		font-size: 70%;
		color: #90b0d2;
		padding: 10px 0 0 0;
		line-height: 140%;
	}
		a#author_link p em,
		a#author_link:visited p em {
			display: block;
		}
	
	p.post_date,
	#cover_story p strong {
		font-size: 85%;
		text-transform: uppercase;
		letter-spacing: 1px;
	}
	#cover_story p strong {
		color: #bbb;
		font-size: 70%;
	}
	
	.column_left p {
		font-size: 75%;
		color: #90b0d2;
		line-height: 150%;
	}		
		#whole_post p,
		body#soldiers .column_left .full_post p,
		.noob_bio p {
			color: #b5cae1;
			margin: 0 0 1.8em 0;
			padding: 0 2em 0 0;
		}
		#whole_post p strong,
		#whole_post p b,
		.noob_bio p strong {
			color: #e9f0f7;
		}
	
	p.post_date {
		font-size: 70%;
		color: #5a84b1;
	}
	#whole_post p.post_date b { color: #5a84b1; }
		#whole_post p.post_date {
			color: #6691be;
			margin: 0;
		}
	
	p.extras,
	p.continue {
		font-size: 70%;
		margin: 1em 0 0 0;
		color: #5a84b1;
	}
		#whole_post p.extras {
			margin: 0 0 2em 0;
			color: #6691be;
		}
		
	p.float_date {
		float: right;
		text-align: right;
		font-size: 65%;
		color: #5a84b1;
	}
		
	p.feed_icon {
		font-size: 15px;
		color: #5a84b1;
		padding: 0;
		margin: 0 0 .6em 0;
		line-height: 100%;
	}
	
	.column_right p, 
	.hot_spot p {
		font-size: 65%;
		line-height: 150%;
	}
	
	#the_author p    { margin: 0 0 1em 0; }
	#the_author p em { font: normal 100% "Lucida Grande", Verdana, Helvetica, Arial, sans-serif; }
	
		#the_author p img {
			float: left;
			margin: 2px 12px 5px 0;
		}
	
	p#authentic_jobs {
		width: 150px;
                height: 70px;
                background: url(/_graphics/authentic_jobs.gif) no-repeat;
	}
		p#authentic_jobs a,
		p#authentic_jobs a:visited {
			display: block;
			text-indent: -7777px;
			width: 100%;
			height: 50px;
			border: 0;
		}
                
	p#post_job {
		border: 1px solid #1e4979;
		border-left: 0; border-right: 0;
		padding: 1.8em 10px 1.8em 0;
	}
	
	.popular p {
		text-align: center;
		padding: 0 3px;
		font-size: 65%;
	}

	#footer p {
		font-size: 65%;
		line-height: 170%;
	}


/*****************************************************
* Linkage
*****************************************************/

a,
a:visited {
	color: #9fe722;
	text-decoration: none;
	border-bottom: 1px solid #1f4a7a;
}
a:hover {
	color: #fff;
	border-color: #b8cade;
}

	a#cover_link,
	a#cover_link:visited {
		display: block;
		position: absolute;
		width: 940px;
		height: 280px;
		top: 0;
		left: 0;
		border: 10px solid transparent;
		text-indent: -7777px;
		opacity: .18;
	}
	a#cover_link:hover {
		border: 10px solid #08376c;
	}
	
	a#author_link,
	a#author_link:visited {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 920px;
		height: 50px;
		opacity: .3;
		padding: 20px;
		border: 0;
	}
	a#author_link:hover {
		opacity: 1;
	}
	
	.extras em a,
	.extras em a:visited { color: #5a84b1; }
	.extras em a:hover   { color: #fff; }

	a.comments,
	a.comments:visited {
		color: #90b0d2;
		padding: 0 0 0 15px;
		margin: 0 0 0 8px;
		background: url(/_graphics/comments.gif) no-repeat left top;
	}
	a.comments:hover {
		color: #fff;
		background: url(/_graphics/comments.gif) no-repeat left bottom;
		border: 0;
	}
	.mini_post a.comments,
	.mini_post a.comments:visited { font-size: 95%; }
	
	body#home .full_post .post p a,
	body#home .full_post .post p a:visited,
	#whole_post .post p a,
	#whole_post .post p a:visited {
		border-color: #032a56;
		background: #032a56;
		padding: 1px 1px 0 1px;
	}
	body#home .full_post .post p a:hover,
	#whole_post .post p a:hover {
		border-color: #b8cade;
		background: none;
	}
	
	#nav a,
	#nav a:visited,
	a.noborder,
	a.noborder:visited, 
	.jobsinc li a,
	.jobsinc li a:visited,
	#post_job a,
	#post_job a:visited,
	.popular a,
	.popular a:visited,
	.hot_spot a,
	.hot_spot a:visited,
	#google_ad a,
	#google_ad a:visited {
		border: 0;
	}
	
	.jobsinc li a,
	.jobsinc li a:visited,
	.post_list li a,
	.post_list li a:visited {
		color: #72b338;
	}
	.jobsinc li a:hover,
	.post_list li a:hover {
		color: #fff;
	}
	
	.post_list li strong a,
	.post_list li strong a:visited {
		color: #9fe722;
	}
	
	#post_job a,
	#post_job a:visited {
		color: #fff;
	}
	#post_job a:hover,
	.post_list li strong a:hover {
		color: #fff;
		border-bottom: 1px solid #b8cade;
	}
	
	body#archive .mini_post p a,
	body#archive .mini_post p a:visited,
	body#archive .full_post p a,
	body#archive .full_post p a:visited {
		color: #90b0d2;
	}
	body#archive .mini_post p strong a,
	body#archive .mini_post p strong a:visited,
	body#archive .full_post p strong a,
	body#archive .full_post p strong a:visited {
		color: #b5cae1;
	}
	body#archive .full_post p strong a,
	body#archive .full_post p strong a:visited {
		font-size: 120%;
	}
	body#archive .mini_post p a:hover,
	body#archive .full_post p a:hover {
		color: #fff;
	}
	
	.feed_icon a,
	.feed_icon a:visited {
		padding: 0 0 0 17px;
		background: url(/_graphics/feed_menu.gif) no-repeat left 3px;
	}

h3 a, 
h3 a:visited,
h5 a,
h5 a:visited {
	color: #fff;
}


/*****************************************************
* Layout
*****************************************************/

div#billboard {
	width: 100%;
	background: url(/_graphics/bg_gradient.jpg) repeat-x;
}

div.container {
	width: 960px;
	margin: 0 auto;
}

	div#mast {
		position: relative;
		display: block;
		height: 140px;
	}
		
		#mast h1 {
			display: block;
			width: 450px;
			height: 90px;
			padding-top: 30px;
			background: url(/_graphics/thebignoob.jpg) no-repeat left 30px;
		}
			#mast h1 a,
			#mast h1 a:visited {
				display: block;
				width: 100%;
				height: 100%;
				text-indent: -7777px;
				border: 0;
			}
		
		div#bubble {
			position: absolute;
			display: inline-block;
			top: 22px;
			left: 444px;
			height: 36px;
			background: url(/_graphics/bubble_left.jpg) no-repeat;
		}
			#bubble p {
				display: inline-block;
				font: normal 9px "Lucida Grande", Verdana, Tahoma, sans-serif;
				color: #fff;
				line-height: 0;
				height: 24px;
				padding: 13px 12px 0 12px;
				background: url(/_graphics/bubble_right.jpg) no-repeat top right;
			}
				#bubble p span {
					display: block;
					width: 25px;
				}
			
		div#nav {
			position: absolute;
			bottom: 40px;
			right: 0;
			width: 420px;
		}
			#nav ul li {
				float: right;
				padding: 0 0 0 1em;
			}
				#nav ul li a,
				#nav ul li a:visited {
					font-size: 70%;
					color: #5f7083;
					padding: 5px 0 5px 5px;
				}
				#nav ul li a.selected,
				#nav ul li a.selected:visited {
					color: #9fe722;
					cursor: default;
				}
				#nav ul li a:hover {
					color: #fff;
				}
	
	div#canvas,
	div.canvas {
		position: relative;
		display: block;
		height: 300px;
	}
	div.canvas {
		height: 340px;
		background: url(/_graphics/canvas_shadow.jpg) no-repeat left bottom;
	}
	
		div#cover_story {
			position: absolute;
			bottom: 80px;
			right: 40px;
			width: 600px;
			text-align: right;
		}
		.canvas div#cover_story {
			bottom: 90px;
		}
		
		.canvas ul {
			position: absolute;
			top: 70px;
			right: 80px;
			width: 320px;
			height: 160px;
			background: url(/_graphics/3questions.gif) no-repeat;
		}
			.canvas ul li {
				display: block;
			}
			li#q_read { height: 50px; }
			li#q_whom { height: 75px; }
			li#q_what { height: 35px; }
			
				.canvas ul li a,
				.canvas ul li a:visited {
					display: block;
					width: 100%;
					height: 100%;
					text-indent: -7777px;
					border: 0;
				}
				li#q_read a:hover { background: url(/_graphics/3questions.gif) left -160px; }
				li#q_whom a:hover { background: url(/_graphics/3questions.gif) left -210px; }
				li#q_what a:hover { background: url(/_graphics/3questions.gif) left bottom; }
		
	div#author {
		position: relative;
		display: block;
		height: 90px;
		margin: 0 0 30px 0;
		background: url(/_graphics/bg_author.jpg) repeat-x;
		text-align: left;
	}
		
		#author div {
			display: block;
			padding: 20px;
			height: 50px;
			opacity: .3;
		}
		#author div:hover {
			opacity: 1;
		}
	
		#author a img,
		#author a:visited img {
			float: left;
			margin: 0 15px 0 0;
		}
	
	div.column_left,
	div.column_right {
		float: left;
		text-align: left;
		width: 600px;
		border-top-width: 1px;
		border-top-style: solid;
		border-top-color: #456890;
	}
	div.column_right {
		width: 320px;
		padding: 30px 0 0 40px;
		border-top-color: #1e4979;
	}
	
		div.full_post,
		div.mini_post,
		div#whole_post,
		div.noob_bio {
			display: block;
			padding: 0 0 30px 0;
			margin: 0 0 30px 0;
			border-bottom: 1px solid #456890;
		}
		body#archive div.full_post,
		body#archive div.mini_post {
			padding: 0 0 .7em 0;
			margin: 0 0 .7em 0;
			border-bottom: 1px solid #1e4979;
		}
		
			div.video_embed {
				display: block;
				text-align: center;
				padding: 0 0 1.5em 0;
			}
		
			blockquote.quote_left,
			blockquote.quote_right {
				float: left;
				width: 150px;
				margin: 0 .3em 0 0;
				padding: .5em 0;
				font: italic 20px "Century Schoolbook", Georgia, Times, serif;
				color: #fff;
				text-align: left;
				line-height: 110%;
			}
			blockquote.quote_right {
				float: right;
				text-align: right;
				padding: .5em;
			}
		
			div#end_post {
				display: block;
				width: 15px;
				height: 5px;
				background: #849cb6;
				margin: 2em 0 .7em 0;
			}
	
		div#google_ad {
			display: block;
			height: 250px;
			background: #15467d;
			border: 10px solid #022b59;
			text-align: center;
		}
		
		div#block_ad div {
			display: block;
			height: 250px;
			border: 10px solid #022b59;
		}
		div#block_ad div#hello { background: url(/_graphics/hello.gif) no-repeat; }
		div#block_ad div#krop { background: url(/_graphics/krop.jpg) no-repeat; border-color: #000; }
		div#block_ad div#itrapped { background: url(/_graphics/itrapped.jpg) no-repeat; border-color: #000; }
		div#block_ad div#cottyn_noob { background: url(/_graphics/300x250_noob.jpg) no-repeat; border-color: #235389; }
		div#block_ad div#cottyn_twitter { background: url(/_graphics/300x250_twitter.jpg) no-repeat; border-color: #235389; }
		div#block_ad div#cottyn_humanicon { background: url(/_graphics/300x250_humanicon.jpg) no-repeat; border-color: #235389; }
        div#block_ad div#sxsw_pc { background: url(/_graphics/300x200_sxsw.jpg) no-repeat; height:200px; }
		div#block_ad div#mt_hostingcard { background: url(/_graphics/300x250_mthostingcard.jpg) no-repeat; border-color: #235389; }
		div#block_ad div#aj_2009 { background: url(/_graphics/300x250_aj-2009.gif) no-repeat; border-color: #04244A; }

			#block_ad a,
			#block_ad a:visited {
				display: block;
				width: 100%;
				height: 100%;
				text-indent: -7777px;
				border: 0;
			}
			#hello a:hover {
				background: url(/_graphics/hello.gif) no-repeat left bottom;
			}
		
		div#flickrness,
		div#virb_friends,
		div#virb_tunes {
			padding: 10px;
			background: #022b59;
			margin: 0 0 30px 0;
		}
			#virb_friends h3,
			#virb_friends hr,
			#virb_tunes h3,
			#virb_tunes hr { display: none; }
			
			#flickrness img,
			#flickrness a,
			#flickrness a:visited, 
			#virb_friends img,
			#virb_friends a,
			#virb_friends a:visited {
				width: 75px;
				height: 75px;
				margin: 0;
				padding: 0;
				border: 0;
			}
			#virb_friends img,
			#flickrness img { float: left; }
			
			ul.virb_tunes {
				font-size: 70%;
				padding: 0 0 1.5em 0;
				color: #5a84b1;
			}
				ul.virb_tunes li {
					padding: .8em 0;
					border-bottom: 1px solid #24476f;
				}
					ul.virb_tunes li span.artist { color: #b5cae1; }
					
					span.artist a,
					span.artist a:visited {
						border-color: #022b59;
					}
					span.artist a:hover {
						border-color: #b8cade;
					}
			
			#virb_tunes p {
				color: #456f9b;
			}
			#virb_tunes p a,
			#virb_tunes p a:visited {
				color: #456f9b;
				border-color: #022b59;
			}
			#virb_tunes p a:hover {
				color: #fff;
				border-color: #b8cade;
			}

		div.column_small_left,
		div.column_small_right {
			float: left;
			text-align: left;
			width: 150px;
			padding: 0 10px 2em 0;
		}
		div.column_small_right { padding: 0 0 2em 10px; }
		
			ul.jobsinc li {
				font-size: 70%;
				line-height: 125%;
				padding: 0 10px 1.8em 0;
			}
		
			div.popular {
				display: block;
				padding: 20px 0;
				border-bottom: 1px solid #1e4979;
				text-align: center;
			}
			div.popular:hover {
				background: #042c59;
			}
				.popular img {
					margin: 0 0 .8em 0;
				}
				
			div#feed_me {
				display: block;
				height: 95px;
				padding: 20px 0;
				background: url(/_graphics/rss_feed.jpg) no-repeat left 20px;
				border-bottom: 1px solid #1e4979;
			}
				#feed_me a,
				#feed_me a:visited {
					display: block;
					width: 100%;
					height: 100%;
					text-indent: -7777px;
					border: 0;
				}
				
			ul#soldier_list {
				border-bottom: 1px solid #1e4979;
			}
			ul#soldier_list li {
				display: block;
				height: 50px;
				padding: 0 0 2em 0;
			}
				#soldier_list li a,
				#soldier_list li a:visited {
					float: left;
					display: block;
					width: 50px;
					height: 50px;
					margin: 0 10px 0 0;
					border: 0;
				}
				
				#soldier_list li p {
					float: left;
					font-size: 70%;
					margin: 10px 0 0 0;
				}
					#soldier_list li p strong {
						color: #fff;
						font-size: 110%;
						display: block;
					}
					
			#categories li {
				font-size: 120%;
				padding: 0 0 .1em 0;
			}
					
			ul.post_list,
			div#the_author {
				border-bottom: 1px solid #1e4979;
				margin: 0 0 1em 0;
				padding: .5em 0;
			}
			body#about ul.post_list { padding: 0 0 1.5em 0; }
			
				ul.post_list li {
					font-size: 105%;
					padding: 0 0 .2em 0;
				}
				body#posts ul.post_list li { padding: 0 0 1em 0; }
			
			div#the_author { padding: 0 0 1em 0; margin: 0; }
		
	div#hotness {
		position: relative;
		border-top: 1px solid #1e4979;
		padding: 0 0 1em 0;
		margin: 1em 0 0 0;
	}
		
		div.hot_container {
			float: left;
			width: 320px;
			text-align: left;
		}
			div.hot_spot {
				display: block;
				padding: 10px;
				margin: 0 0 1em 0;
			}
			div.hot_spot:hover {
				background: #042c59;
			}
				.hot_spot img {
					margin: 0 0 .8em 0;
				}

	div#footer {
		border-top: 1px solid #456890;
		padding: 20px 0;
		text-align: left;
	}
	

/*****************************************************
* Form Elements
*****************************************************/
	
input,
textarea {
	display: block;
	margin: 0 0 1.5em 0;
	font-size: 80%;
	width: 100%;
	color: #15467d;
}
input.form_button {
	width: auto;
	font-size: 100%;
	padding: 0 10px;
}

textarea {
	height: 200px;
	font: normal 70% "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
}


/*****************************************************
* Comments
*****************************************************/

div.show_comment {
	padding: 20px 0 0 0;
	border-top: 1px solid #1e4979;
}

	.show_comment p,
	#post_comment p {
		font-size: 70%;
		color: #6691be;
		margin: 0 0 20px 0;
	}
	.show_comment p.comment_author { margin: 0; }
	
	div.comment_left,
	div.comment_right {
		float: left;
		width: 400px;
	}
	div.comment_right {
		width: 160px;
		padding: 0 0 0 40px;
	}