/* --- RESET --- */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,p,blockquote,th,address,td { 	margin:0;	padding:0;}
table {	border-collapse:collapse; border-spacing:0;}
fieldset,img { 	border:0;}
h1,h2,h3,h4,h5,h6 {	font-weight:normal; }
q:before,q:after { content:''; }

/* --- WIREFRAME LAYOUT --- */
html{
	background:#FFF url(../images/v20/top_back.gif) repeat-x top left;
	margin-bottom:2em;
	}
body{ 
	color:#333;
	font-family:Georgia, "Times New Roman", Times, serif;
	margin: 0 auto;
	width:45em; /* 4 10em cols with 1 px gutter */
	/*border:1px solid #009900;*/
	}
#main_content_full{
	width:43em;
	padding:0 1em;
	/*border:1px solid #000990;*/
	}
#main_content{
	width:32em;
	padding:5em 1em 0 12em;
	/*border:1px solid #000990;*/
	}
.single_column{
	width:10em;
	}
.double_column{
	width:21em;
	}
.triple_column{
	width:32em;
	display:block;
	float:left;
	}
#footer{
	clear:both;
	}
	
/* -------------------------- IMAGES------------------------ */
img{
	margin:4px;
	padding:0px;
	border: 1px solid #FFFFFF;
	}
h2 img { border: none; }
.rss img{ background-color:#999; margin:0 0 -3px -3px; padding:0; border:0}
.rss img:hover{	background-color:#5D92F3;	}
a img:hover{	border: 1px solid #5D92F3;	}

/* -------------------------- TYPE-------------------------- */

.postmeta{
	width:10em;
	float:left;
	margin:0;
	padding:.5em 0 0 0;
	/*border:1px solid #000990;*/
	}
.post{
	margin:0 0;
	padding:5em 0 0 0;
	clear:both;
	/*border:1px solid #000990;*/
	}
.postcontent{
	width:32em;
	float:left;
	margin:0 0 0 1em;
	/*border:1px solid #000990;*/
	}

/*------------------- TEXT ----------------------*/
abbr {	text-decoration:none;	border-bottom: 1px dotted #888;	}
.strikeout{	text-decoration:line-through; }

p {	margin-bottom: 1em; }	
	p a{ color:#333; }
	p a:hover{ color:#5D92F3;	}

blockquote {
	font-style:italic;
	padding:.5em 1em;
	margin:0 1em;
	border-left:1px solid #999;
	}

.notation{
	margin:0 0 0 -13em;
	width:11em;
	float:left;
	line-height: 1.4em;
	text-align:right;
	font-family:Arial, Helvetica, sans-serif;
	font-size:.8em;
	color:#333;
	}
	
table{ line-height: 1.4em; }	
	td{ vertical-align:top; }	
	
.postcontent ol, 
.postcontent ul{
	padding:0 0 1em 2em;
	}
.postcontent li{
	padding:0 0 1em 0;
	}
.postcontent p{
	line-height:1.2em;
	}
	
dl.projects{
	margin:0 0 2em 0
	}
	dl.projects dt{
		margin-top:1em;
		font-size:1.2em;
		border-bottom:2px solid #DDD;
		padding:.25em;
		}
	dl.projects dd{
		padding:.25em;
		margin:0;
		display:block;
		border-bottom:1px dotted #ddd;
		}
	dl.projects a{
		text-decoration:none;
		color:#000;
		}
	dl.projects a:hover{
		color:#5D92F3;
		}
.styleicon {
	margin:0;
	background-color:#CCC;
	}

.post dl{
	margin:0 0 2em 0
	}
	.post dt{
		margin-top:1em;
		font-size:1.2em;
		border-top:2px solid #DDD;
		padding:3px 0 0 30px;
		}
	.post dd{
		padding:3px 0 0 30px;
		margin:0;
		display:block;
		border-top:1px dotted #ddd;
		}
.design_module{
	clear:both;
	padding-bottom:1.5em;
	margin-bottom:1.5em;
	border-bottom:1px solid #CCC;
	}	
	.design_module h3{
		font-size:1.3em;
		margin: 1.5em 0;
		font-weight:normal;
		letter-spacing:normal;
		color:#000;
		}			
	.project_photo{	
		float:right; 
		padding:0 0 0 1em;
		margin:0;
		}	
	.project_photo img{ 
		padding:0;
		margin:0;
		}
.project_category{
	clear:both;
	padding: 2em 0;
	}
	.project_subindex{
		list-style-type:none;
		margin-top:2.2em;
		}
	.project_category dt{
		padding: 0 0 1em 0;
		}
	.project_category .cur_category{
		font-weight:bold;
		}
/* ------------------ CODE EXAMPLES ------------------*/

h4.code_title{
	display:block;
	font-family: arial, sans-sarif;
	margin:1em 1em 0 1em;
	color:#FFFFFF;
	padding:1px 1em;
	background:#667285;
	border:1px solid #667285;
	width:37em;
	}
pre{
	padding:1em;
	border:1px solid #ddd;
	background-color:#f6f6f6;
	overflow:auto;
	}
pre code{
	font-size:.8em;
	font-family: Courier, "Lucida Console", monospace;
	line-height:1.5em;
	}
pre code var{
	font-style:normal;
	font-weight:bold;
	}
pre {
	background:#eee;
	border:1px solid #667285;
	padding:0 1em 1em 1em;
	margin:0 1em 1em 1em;
	width:37em;
	overflow:auto;
	}
	
	
/* -------------------------- HEADERS-------------------------- */
h1{
	border-top: none;
	padding:0;
	margin:1em 0  0 0;
	font-size:3em;
	text-align:center;
	letter-spacing:.05em;
	}
	h1 a{
		color:#000000;
		text-decoration:none;
		}
	h1 a:hover{
		color:#5D92F3;
		}	
h2{
	font-size:1.5em;
	margin:0 0 1em 0;
	letter-spacing:.03em;
	}
	h2 a{
		color:#000000;
		text-decoration:none;
		}
	h2 a:hover{
		color:#5D92F3;
		}	
h3{
	font-size:1em;
	margin: 1.5em 0;
	font-weight:normal;
	letter-spacing:.07em;
	color:#000;
	}
	h3 a{		
		color:#000;
		text-decoration:none;
		}

h4{
	color:#667285;
	text-transform:uppercase;
	font-size: 1em;
	margin: 1.2em 0 0 0;
	font-weight: bold;
	}
h5, h6 {
	color:#667285;
	font-size: 1em;
	margin: 1.2em 0em 1.2em 0em;
	font-weight: bold;
	}
h4.subtitle_comment{
	font-style:italic;
	font-weight:bold;
	font-family:Georgia, "Times New Roman", Times, serif;
	color:#ADA3AE;
	}
/* -------------------------- COMMENT-------------------------- */

.comment_tag{
	color: #206593;
	font-weight:normal;
	background:url(/images/v20/border_solid.gif) repeat-x center left;
	}
		
.comment_tag span{
	margin:0 auto 0 auto;
	background-color:#FFFFFF;
	width:10em;
	display:block;
	font-size:.9em;
	text-align:center;
	font-style:normal;
	cursor:pointer;
	}
	
.comment_tag .numComments{
	color:#000;
	padding-right:.25em;
	font-size:1.3em;
	font-style:normal;
	}
	
.comments{
	width:32em;
	display:block;
	margin:0 0 0 11em;
	}		
.comments li{
	list-style-type:none;
	clear:both;
	margin:0;
	padding:1em 0;
	}
.comments form{
	padding:1em 0;
	}
	
.comments label{
	width:10em;
	float:left;
	text-align:right;
	}
.comments li div{
	padding:1em 0;
	width:10em;
	float:left;
	display:block;
	text-align:right;
	}
.comments li div span{
	font-size:1.1em;
	}
.comments li p{
	padding:1em 0;
	float:left;
	width:21em;
	display:block;
	margin:0 0 0 1em;
	}
.comments textarea,
.comments input#username{
	font-family:Georgia, "Times New Roman", Times, serif;
	width:20.5em;
	font-size:1em;
	margin:0 0 .25em 1em;
	float:left;
	}
.comments #submit{
	clear:both;
	font-size:1em;
	padding:.25em;
	display:block;
	margin:0 0 0 11em;
	}
	#archive_comments li{
		list-style-type:none;
		margin-bottom:2em;
		}
	#archive_comments li div{
		margin-bottom:.5em;
		font-size:.9em;
		}
	#archive_comments li div a{
		font-size:1.2em;
		color:#000;
		text-decoration:none;
		}
	#archive_comments li div a:hover{
		color:#5D92F3;
		text-decoration:underline;
		}
	#archive_comments li p{
		text-align:justify;
		}
	
/* -------------------------- NAVIGATION-------------------------- */

#about{
	margin:0;
	width:45em;
	}
	#nav{
		list-style: none;
		clear:left;
		margin:0;
		padding:.5em 0;
		font-size:1em;
		}
		#nav li{
			padding:.5em 0 0 1em;
			margin: 0;
			float:left;
			}
		#nav li a{
			font-size:1em;
			padding:.5em;
			margin:0;
			display: block;
			text-decoration: none;
			width: 9em;
			border-bottom:3px solid #000;
			color:#000;
			}
		#nav li#selected a{
			font-weight:bold;
			}
		#nav li a:hover{
			border-bottom:3px solid #5D92F3;
			}			
	
/* -------------------------- GRAPH-------------------------- */

.graph {
	margin-bottom:2em;
	clear:both;
	}
.graph ul {
	position: relative; 
	height: 250px;
	margin:  0; 
	padding: 0;
	font: 11px Helvetica, Geneva, sans-serif;
	border-bottom: 4px solid #222;
	}
.graph ul li {
	position: absolute; 
	background-color: #666;
	bottom: 0; 
	margin: 0; 
	padding: 0 0 0 4px;
	list-style: none;
	width: 37px; 
	border: 1px solid #484848;
	font-size:.9em; 
	border-right: 4px solid #484848;
	}
.graph ul li:hover {
	background-color: #888;
	}
.graph ul li a{
	color: #FFF;
	text-decoration:none;
	}
.graph ul li a:hover{
	text-decoration:underline;
	}
.graph ul li span {
	font-size:1.5em;
	font-weight:bold;
	}
.numComments{
	color:#000;
	padding:0 0 0 10px;
	font-size:.9em;
	}