/* -------------------------------------------------------------- 
  
   Blueprint CSS Framework Screen Styles
   * Version:   0.6 (21.9.2007)
   * Website:   http://code.google.com/p/blueprintcss/
   See Readme file in this directory for further instructions.
   
-------------------------------------------------------------- */

@import 'css/reset.css';
@import 'css/960.css';
@import 'css/text.css';

body{background:#f9f9f9 url(images/body.png);;}

/*  ======================================== BRANDING and NAV ========================================  */
.container_12{
/*	background: #fff url(images/12_col.gif) repeat-y !important;*/
	position:relative;
	margin-top:10px;
	}
 .feed {
	position:absolute;
	top:0;
	right:0;
	font-size:12px;
	text-decoration:none;
  	margin-left: 3px;
  	padding: 0 0 0 19px;
  	background: url(images/feed-icon-14x14.png) no-repeat 0 50%;
}
#branding {
	margin-left:0;
	margin-right:0;
	width:470px;
	}	
#nav{
	margin-left:0;
	margin-right:0;
	width:490px;
	background:url(images/bg-nav.gif) no-repeat bottom !important;

	}
#nav ul{
	margin:0;
	padding:0;
}
#nav li{
	display:block;
	margin:20px 0 0 0;
	padding:0;
	float:left;
	list-style:none;
	width:160px;
	height:160px;
}
#nav li#work_link{width:170px;}

#nav li a{
	display:block;
	width:160px;
	height:160px;
	text-indent:-5000px;
}
#nav li a:hover{background:url(images/bg-nav-hover);}
#nav li#work_link a:hover{background-position:bottom left;}
#nav li#about_link a:hover{background-position:-170px -20px }
#nav li#archives_link a:hover{background-position: -330px -20px }


/*.rtcol{background:url('images/bg-rtcol.gif') repeat-y left;}*/

/* ======================================== HEADERS ======================================== */

h2.headline{
	font-weight:bold;
	font-size:30px;
	text-shadow: 1px 1px 0px #FFFFFF;
	color:black;
	clear:right;
	border-top:3px solid #000;
	border-bottom:1px solid #ccc;
	margin-top:0;
	margin-bottom:10px;
	line-height:30px;
	padding:5px 0;
}
h2.headline a{text-decoration:none;}		
h3.subheadline{
	font-size:14px;padding:2px 5px 0px 5px;
	background:#111;
	display:inline;
	float:right;
	margin-bottom:0 !important;
	font-weight:normal;
	line-height:16px;
	color:#fff;
	letter-spacing:0 !important;
}
.subheadline span{
	text-transform:none;
}

h2.altheadline{
	font-weight:bold;
	color:black;
	margin-top:0;
	margin-bottom:10px;
	padding:5px 0;
	font-size:18px;
	line-height:24px;
}

h2.altheadlin em{
	font-style:normal;
	color:#427dab;
}


/* ======================================== HOME // Big Picture ======================================== */


#bigpicture{margin-top:30px;}

#bigpicture #potd{
	display:block;
	clear:both;
	border-top:3px solid #000;
	}
.photo_caption{	
	background:#222;
	color:#fff;
	padding:5px;
	display:block;
	text-align:center;
	margin-bottom:10px;
}
.photo_caption a{
	font-size:11px;
	color:#fff;
}
.photo_caption a:hover;{
	color:#fff;
}
/* ======================================== HOME // Twitter Feed ======================================== */

#twitterfeed {
	border-top:3px solid #000;
	clear:right;
}
#twitterfeed ul{
	list-style:none;
	margin:20px 0 0 0;
	padding-left:0;
}
#twitterfeed li {
	margin-bottom:20px;
	padding:0;overflow:hidden;
}
#twitterfeed li.alpha{clear:left;}
#twitterfeed li span{
	width:140px;

}
#twitterfeed li a{
	display:block; 
	font-size:10px!important;
}
#twitterfeed li span a{
	display:inline;
	color:#777;
	font-size:10px !important;
}
/* ======================================== HOME // I Make Web Sites ======================================== */

#mywork{
	color:#eee;
	clear:both;
	margin-top:30px;
	height:300px;
	background:url('images/banner-mywork.png') no-repeat top;
}
#mywork h2{
	height:100px;
	margin:0 0 10px 10px;
	padding:0;
	text-indent:-900em;
	border-bottom:1px solid #444;
}
#mywork .description p{
	padding-left:10px;
	font-size:15px;
	margin:5px 0 15px 10px;
}
#projectplanner h4{
	color:#fff;
	margin:0;
}
#projectplanner img{
	float:left;
	margin:0 5px 5px 0;
	border:5px solid #000;
}
#projectplanner p{
	font-size:12px;
	margin-bottom:10px;
	}
#projectplanner p a:hover{color:#427dab;}
#mywork .clickthru{
	border-color:#444;
}
#mywork .clickthru:hover{background:#427dab;color:#fff;}
#viewportfolio:hover{color:#427dab;}
#lgi{
	width:420px;
	margin-top:35px;
	margin-left:20px;
}
#lgi .subheadline{
	background:#000;
	margin-right:-30px;
}
#lgi img{
	border:5px solid #000;
}



/* ========================================  ARTICLE // Home ======================================== */

.lftcol{
	margin-top:30px;
}
#leadarticle{
	position:relative;
}
#leadarticle_comments{
	float:left;
	text-align:center;
	color:#777;
	margin-top:4px;
}
#leadarticle_meta{
	margin-bottom: 15px;
}
#leadarticle p{display:inline;}/*do this so the plus sign will apear on the same line*/

#recently{
	border-bottom:1px solid #ccc;
}
#recently .clickthru{
	border:0 !important;
}
#recently .clickthru.selected{
	background:#151515;
	color:#fff;
}
#latestfew{
	background:#222;
	position:absolute;
	right:0;

}
#latestfew strong{
	display:block;
	padding:5px 10px;
	color:#aaa;	
	background:#151515;
}
#latestfew .reglink{
	color:#aaa !important;
	text-decoration:underline !important;
	font-size: 10px !important;
	padding:5px 10px !important;
	text-align:right;
	background:#151515;
}
.reglink:hover{
	background:transparent !important;
}
#latestfew a{
	color:#fff;
	font-size:12px;
	display:block;
	line-height:20px;
	text-decoration:none;
	padding:10px;	
/*	width:140px;*/
	/*What follows is box model hack*/
/*	voice-family: "\"}\""; voice-family:inherit;width: 120px*/
}

#latestfew a:hover{
	background:#427dab;
}

.recent_article p, .recent_article a{
	font-size:11px;
}

/* ========================================  ARTICLE // Single ======================================== */

.single #content{
	padding-top:20px;
}
.pgright,.pgleft{
	margin-top:20px;
}
.navigation{margin-bottom:20px;}
.navigation .clickthru{border-top:3px solid #000;border-bottom:1px solid #ccc;line-height:36px;}
.navigation .previous{padding-right:10px;}
.navigation .next{padding-left:10px;}

.entry{
	width:460px;overflow:hidden;
}
.author_img{
	display:block;
	float:left;
	margin-bottom:5px;
}
.entry .author_img{
	margin-right:10px;
	margin-bottom:0;
}
img.alignleft, 
img.alignnone,
img.alignright,
.entry a img{
	border:5px solid #ccc;
}
img.alignleft{ float:left;margin:0 10px 5px 0;} 
img.alignright{ float:right;margin:0 0 5px 10px;}
img.alignnone{ display:block;}


a.comment_num {
	display:block;
	margin-left:10px;
	background: url('images/bg-comments.gif') no-repeat;
	width: 40px;
	height: 40px;
	text-align:center;
	font-size:18px;
	line-height:34px;
	text-decoration:none;
}

.articlemeta{
	margin-top:-10px;
	margin-bottom:10px;
	text-align:center;
	padding:2px 0;
	border-bottom:1px solid #ccc;
	font-size:11px;
}
.articlebody p{padding-right:20px;}

.caption {font-size:12px;font-family:arial, sans-serif;color:#666}

/* ========================================  ARTICLE // COMMENTS ======================================== */


#comment_list{
	clear:right;
	border-top:3px solid #000;	
}
.comment_meta{
	margin-top:20px;
	margin-bottom:5px;
}
.comment{border-top:1px solid #ccc;}
#comments .entry{margin:0;padding:0;}

#respond.subheadline{
	margin-top:20px;
}
#commentform{
	clear:right;
	border-top:3px solid #000;
	padding-top:20px;
}
#commentform label{
	font-size:12px;
	text-align:right;

}
#commentform td{padding:5px;}

#commentform .text_input{
	width:320px;
}
#commentform .text_area{
	width:400px;
}
/* ========================================  ARTICLE // RIGHT SIDEBAR  ======================================== */


#r_sidebar{
	padding-top:30px;
}
.widget{
}

.widget_content{
	border-top:3px solid black;
	clear:right;
}

#searchform{
	background:#222;
	padding:20px;
	text-align:center;
}
#searchform .search_input{
	border:5px solid #fff;
	width:70%;
	background: #fff url('images/magnify.png') no-repeat left center;
	padding-left:30px;
	line-height:16px;
	font-size:16px;
	color:#777;
}

#flickrfeed .widget_content{
	padding:10px 0;
	text-align:center;
}
#flickrfeed a img{
	display:block;
	float:left;
	padding:2px;
	border:1px solid #444;
	margin-right:11px;
	margin-bottom:10px;
}


#recentposts ul{
	list-style:none;
	margin:10px 0 0 0;
	padding-left:0;
	
}
#recentposts li {
	margin-bottom:10px;
	padding:0;
}

#recentposts .recent_date{display:block;}
#recentposts li a{
	display:block;
	font-size:12px;
	line-height:15px;
}

#recommending .widget_content{
	text-align:center;
}
#recommending img{
padding:15px 7px 15px 7px;
}

/* ========================================  ARTICLE / ARCHIVES ======================================== */
#archives, #articleside{
	margin-top:30px;
	margin-bottom:30px;
}

#articleside #find{
	margin-bottom:30px;
}

ul#archivemonths{
	list-style:none;
	margin-left:0;
	padding-left:0;
}

#archivemonths li{
	margin-left:0;
	padding-left:0;
	float:left;
	position:relative;

}
#archivemonths a{
	display:block;
	padding:19px;
	text-align:center;
}
#archivemonths li a strong{display:block;}
#archivemonths li.oddyear{
	background:#ddd;
}
#archivemonths li.evenyear{
	background:#fff;
}
#archivemonths a:hover, #categorylist a:hover{
	background:#333;
	color:#fff;

}
#archivemonths .count, #categorylist .count{
	position:absolute;
	top:0px;
	right:3px;
	font-size:12px;
}
.evenyear .count{color:#fff}
.oddyear .count{color:#ddd}

#categorylist{
	margin-left:0;
}

#categorylist li{
	position:relative;
	list-style:none;
	padding-left:0;
	margin-left:0;
	float:left;
	width:140px;
	text-align:center;
	background:#fff;
	margin:0 10px 10px 0;
	color:#fff;
}
#categorylist a{
	display:block;
	padding:10px 5px;
}

.oldernewer{margin:20px 0 0 0;}
.archivepost{padding-top:20px;}
.archivepost p{display:inline;}  /*do this so the plus sign will apear on the same line*/
.archivelist .altheadline{margin-bottom:0;padding-bottom:0;}
.archivelist #find{margin-top:45px;}
/* ======================================== TESTIMONIES ======================================== */

.clientphoto{
	float:left;
	border:5px solid #ccc;
	margin-right:10px;
}
#testimonies cite{
	display:block;
	color:#666;
	font-family:Arial,Verdana,sans-serif;
	font-size:11px;
	
}
#testimonies cite a{color:#000;}
/* ======================================== PORTFOLIO ======================================== */

#projectlinks li{
	list-style:none;
	padding-left:0;
	margin-left:0;
	font-weight:bold;
	line-height:24px;
	border-bottom:1px solid #ccc;
}
li#projectlink_0{border-top:1px solid #ccc;}
#projectlinks li span{
	text-transform:lowercase;
	font-weight:none;
	color:#999;
}
#projectlinks li:hover{
	background:#edf8fe;
}
#projectlinks li.selected{
	background:#427dab;
	color:#fff;
}
.project img{
	border:5px solid #ccc;
	display:block;
	margin-bottom:20px;
	cursor:pointer;
}
#allprojects img{
	float:left;
	margin-right:5px;
	margin-bottom:5px;
}
#allprojects img:hover{border:5px solid #aaa;}
#allprojects img.selected{border:5px solid #427dab;}
/* ======================================== MISC ======================================== */
.dom_link{
	cursor:pointer;	
}

.clickthru {
	text-align:center;
	clear:both;
	padding:2px 0;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
	font-size:10px;
	display:block;
}
.clickthru:hover{
	background:#fff;
}
/* ======================================== FOOTER ======================================== */

#footer{
	margin-top:20px;	
	clear:both;
	position:relative;
	background: url(images/since2002.gif) no-repeat center;
}
#footer p{
	padding:2px 0;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}
#footer .feed{top:5px;}
#footer .smcf-link {
	position:absolute;
	top:5px;
	right:160px;
	font-size:12px;
	text-decoration:none;

}